概要

中秋の名月、スーパームーンが過ぎて、秋が深まってきました。秋の花々を24枚の写真に収めました。デジカメ販売会社製やパソコン、スマホ備付けのスライドショーで閲覧することができます。

BGMが流れ、切り替え効果で味を付けながら思い出の写真を見ることができますが、既存の表示には飽きを感じているマニア向けにスライドショーを自作しました。発展途上で既存のものと勝負する段階ではないので、スライドビューと呼ぶことにしました。

作り方

➊写真枚数が24枚と多くないので、規則正しい6行4列の集合写真にする。ペイントの表示タグでルーラー、グリッド線、ステータスバーにチェックマークを入れ合成写真を作成する。

➋ブログやホームページでアップロードする画像サイズは2MBに制限されているので、デジカメで作成した画像を1％に縮小する。リサイズ超簡単などのフリーソフトでリサイズする。

➌リサイズしても2MBを超えることがあり、レンタルサーバーのユーザー専用ページからログインし、PHP.INIを修正してアップロード可能画像サイズを20MB等に変更する。

➍集合写真をアップロードし、URLアドレスを抑える。

➎drawImage関数を使って1枚の集合写真からトリミング画像を取り出す。

➏input type=”number”を使って、表示時間と表示枚数を設定するコードを作成する。

➐1ページに１～４枚の写真を同時表示するコードを作成する。

➑同時表示枚数に応じた画像サイズを処理する。

➒主要ブラウザの最少機能に合わせた描画仕様を決定する。

サンプル実行例と操作方法

上図の〇印付近にカーソルを当てると、上下マークが現れます。上下スイッチにより数値を変更して右の決定キーをクリックして表示時間や表示枚数を入力します。上下マークが現れないブラウザでは左端で数字をキー入力します。

参照

音楽は怪しくコミカルな甘茶の音楽工房の『夜のワルツ』です。

終わりに

Webプログラミング書法関連で多くのプログラムコードを公開しました。今回、サンプルコードは公開されませんが、WebProg5をひな形にして作成されました。

順を追って作成すれば、スライドビューにたどり着くことでしょう。表示画面はウィジェット欄への表示を抑制したフルサイズ仕様です。