第11回ホームページ勉強会

19日目　2021年　6月24日実施
三宅　節雄

 QPONさんのページめくりスライドショー


　今回(6/24)の『ホームページ勉強会』は数あるQPONさんの写真スライドショーの中で、『ページめくりスライドショー』を使ってみましょう。

　本の様に左右の写真を同時表示してめくりますから、写真の枚数が多い場合や、全て縦長の写真でもOKです。
1．事前準備1「フォルダーの作成」
　皆さんのMy-HPに新しいフォルダーを作成し、PageMekuriの様な名前を付けておいて下さい。
更にその中にimgというフォルダーを作って下さい。
２．事前準備2「写真の準備」
  　写真展示用の写真は横長の場合には500×375ピクセル(縦長写真の場合は360×480ピクセル)の写真を、10枚以上で偶数枚、写真の名前は01.jpg～10.jpg････として下さい。

　今回は試しに、横幅が2倍の写真を、左右2枚に切って表示してみましたが、全く違和感なしでした。

　準備した写真は上で作ったimgというフォルダーに入れて下さい。
３．事前準備3「BGM用mp3の準備｣
  　BGM用のmp3形式の音楽ファイルを今回も準備し、PageMekuriフォルダーに入れておいて下さい。
４．ダウンロード
  　今までと同様に、通常はQPONさんのページを開きます。

　下記の表示になりますから、｢スライドショー｣の『ページめくりスライドショー』をクリックします。 
　
　サンプルが表示されます。

　下にスクロールしていくと、ソースが表示されます。
　
　今回も下の方にスクロールするとソースが表示されましたが、<html>から</html>までではなく、<script>から</script>と、一部分しか表示されません。このままでは使えません。
ソース
 
<script>
dt=new Array();
//写真が別の場所にあるときはhttp://～フルパスで書く
img_url="./";
　　　　　　　　　　　　：
　　　　　　　　　　　　：
photo="270,360,5,1,#666688,26,#8888ff";
	//写真の横幅,縦幅,中心余白,枠の太さ,枠の色,文字サイズ,文字色
</script>
<script src="https://qpon-toyota.com/java/page/page.js"></script>

　この表示されたソースは役に立ちませんが、このページでサンプルのスライドショーがちゃんと表示されていますので、ページ全体を取り込んで不要部を削除します。

　スライドショーのすぐ左辺りで『右クリック』⇒『フレームのソース表示』をクリックします。

　htmlのソースが表示されますので、全部を選択してコピーします。
５．HPビルダーで編集 
  　ＨＰビルダーを起動し、『ファイル』⇒『標準モードで新規作成』をクリックします。

　HTMLソースに切り替え、表示された行を全て選択後に、『右クリック』⇒『貼り付け』を実施します。

　プレビューに切り替えると、写真はHTTPでリンクされていますので、スライドショーは問題なく表示されます。
　ここで、一旦main.htmlという名前でPageMekuri フォルダーに保存します。

　ページ編集に切り替えます。



ページめくりスライドショーとその下の｛S｝より下はスライドショーには不要です。
下図の範囲をクリック・選択し、『右クリック』⇒『タグを削除』をクリックします。


同様にもう1行選択し、『右クリック』⇒『タグを削除』をクリックします。
 

ここまでの操作で、ページめくりスライドショーの本体だけが選択されました。以下がソースです。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>和洋書ライドショー</title>
<script type="text/javascript">
<!--
dt=new Array();
//フォルダー（別の場所にあるときはhttp://～フルパスでかく
img_url="https://qpon-toyota.com/nobana/img/";

//写真データ
//左ページ用，右ページ用

n=0;dt[n]="000.jpg,050.jpg,,リンドウ";
n++;dt[n]="295.jpg,010.jpg,モウセンゴケ,アメリカフウロ";
n++;dt[n]="123.jpg,086.jpg,ヌマトラノオ,ミゾカクシ";
n++;dt[n]="250.jpg,076.jpg,ノミノフスマ,チゴユり";
n++;dt[n]="234.jpg,227.jpg,ノビル,ミゾソバ";
n++;dt[n]="030.jpg,000.jpg,ニガナ,";

//めくる設定
sys="0,0,3,2,1,1"; // めくる方式,めくる方向,静止時間,めくる速度,スタート,繰り返し
//めくる方向(左←右＝0 ・左→右＝１）
//めくる方式（和紙タイプ＝0・洋紙タイプ＝1)
//静止時間＝秒
//めくる速度（1～10ピクセル）
//スタート（手動＝0 自動＝1)
//繰り返し（なし＝0 無限＝1)
//写真の設定
photo="270,360,5,1,#666688,26,#8888ff";
//写真の横幅 ，縦幅 ，中心余白 ，枠の太さ ，枠の色 ，文字サイズ ，文字色


// -->
</script>
</head>
<body>
<center>
<h1>ページめくりスライドショー</h1>

<table><tr><td>

<script src="https://qpon-toyota.com/java/page/page.js"></script>



</td></tr></table>
</center>
</body>
</html>

ここでプレビューするとスライドショーが表示されます
６．ソースの編集
  写真データおよび写真のコメント部を皆さんの写真に対応させて変更して下さい。
ソースのピンクあるいは赤で表示した部分を変えます

<title>和洋書ライドショー</title>
タイトルはあなたのスライドショーの名前に変えます

写真のフォルダーがimgの場合には、img_url="./img/";に変える
　　　　　　　　　　　　 photoの場合には、img_url="./photo/";にする

写真データ欄を下記の様に変える

n=0;dt[n]="000.jpg,050.jpg,,リンドウ";
n++;dt[n]="295.jpg,010.jpg,モウセンゴケ,アメリカフウロ";
　　　　　　　　　　　　　　：
000.jpg,050.jpg,,リンドウは写真の名前2つとその写真の説明です
2つ目の写真の名前の後ろの,,は1つ目の写真の説明を省略しています

sys="0,0,3,2,1,1";
めくる方式,めくる方向,静止時間,めくる速度,スタート,繰り返し

photo="270,360,5,1,#666688,26,#8888ff";
写真の横幅 ，縦幅 ，中心余白 ，枠の太さ ，枠の色 ，文字サイズ ，文字色
640,480に変更します

<h1>ページめくりスライドショー</h1>
スライドショーの上部に表示するスライドショーの名前です

<script src="https://qpon-toyota.com/java/page/page.js"></script>
page.jsをプログラムと同じ場所に置いた場合は、次の様に記載します
<script src="page.js"></script>
７．page.jsのダウンロード 
  下記アドレスをクリックします
https://qpon-toyota.com/java/page/page.js

page.jsの本文が表示されますので、『右クリック』⇒『名前を付けて保存』をクリックします
保存場所はPageMekuriフォルダー内とし、名前はデフォルトのpage.jsのままにします
８．動作確認 
  　ちゃんと動作すればOK。そうでない場合日はmain.htmlをHPビルダーのHTMLソースモードやメモ帳などで開き、写真データ付近を調べる。

　html言語で書かれたプログラムですから､ルールに反して1文字消した､；と：を間違えた等はエラーになります。

　壁紙、BGMやホーム(戻る)ボタンは勉強済みですから皆さんご自身で設置して下さい。
　作成結果は
９．リンクの作成 
  前回と同様にトップページの左のメニュー表と、PageMekuriのmain.htmlにリンクを設定します。



　｢ページめくりスライドショー｣のリンク先は『d:\My-HP\PageMekuri\main.html』で、ターゲットは｢right｣です。

　｢ページめくりスライドショー｣からの戻り先は../index.htmlでターゲットは全画面表示に設定します。
10．データのアップロード 
  うまく動作したら、ffftpで自分のサーバーへ新規ファイルと変更ファイルをアップします。
11．停止、反転ボタンの移動
  　『停止』、『反転』ボタンはpage.jsで左上に表示するよう設定されており、そのままでは『停止』、『反転』ボタンを自由に移動させることができません。
　

　元のpage.jsをpage_org.jsの様な名前で保存しておきます。

(1) 元のpage.jsをpage_org.jsの様な名前でコピーして保存しておきます。
(2) page.jsをNotepadやSakuraエディターで開く。
全部で291行ありますが、256行目から下記4行を切り取ります。
///////
document.write('<table><tr><td>');
document.write('<input type=button value="開 始" onClick="go()" id="play_button">');
document.write('<input type=button value="反　転" onClick="back()" id="back_button">');
(3) main.htmlをHPビルダーで開く。
BGM挿入の場合の様に、『停止』、『反転』ボタンを挿入したい場所にaaa等の目印を入れる
例えばHTMLソースに切り替え、スライドショーのタイトル部の後ろに入れたい場合は
<h1>ページめくりスライドショー</h1>
の<h1>と</h1>を削除し、ページ編集に戻り
の表示の後ろにスペースを2個ぐらい挿入してaaaと入力する

『ページめくりスライドショー』の文字だけを選択して、文字拡大『A+』を2回クリックします
　　　　　　　　　　　　　⇓
(4) HTMLソースに切り替え、目印のaaaの前後で改行し、
aaaを選択反転させて、(2)で切り取った行を貼り付ける。
貼り付けた文字列の内、下記で赤で示した<>内以外は不要ですから、削除します。
///////
document.write('<table><tr><td>');
document.write('<input type=button value="開 始" onClick="go()" id="play_button">');
document.write('<input type=button value="反　転" onClick="back()" id="back_button">');
この付近のソースは以下のようになります。

<body>
<div align="center">
<font size="+2">ページめくりスライドショー</font>　　
<input type=button value="開 始" onClick="go()" id="play_button">
<input type=button value="反　転" onClick="back()" id="back_button">
<table>
<tr>
<td><script src="page.js"></script>
  ここをクリックするとサンプルの動画が始まります。動作時の表示は下図のようになります。

12．実施例
  実施例はここをクリック