制作メモ

写真サイトの制作に関するメモを書いておく。備忘録である。記事スタイルの標準テンプレートを作成し、機能を確認しながらデザインした。

サイト制作ツール
MT6にした。メインページのみ標準スタイルのひとつRainierを採用した。最もシンプルでスマホ対応になっているからだ。記事テンプレートは、ローカルの手作りHTMLと同じにした。
スクリプトとスタイル
JQuery, Bootstrapを基本にした。ただし、Bootstrapの8割くらいの機能は使わない。冗長度が高すぎたり、可用性が低いのが多いからだ。基本に使っているのはTabs/Collapse機能である。写真スライド、動画プレイヤー、ポップアップなどのスクリプトは自分が使いやすいものにした。バラバラでは混乱するので、JQueryを含めてすべてのスクリプトを mmdd.js に集約し、記事スタイルは media.css にまとめた。
ページの構成
ページの移動が最小になるようにした。写真・動画・地図の操作が一枚のページでできるように、Tab/Collapseスクリプトを使った。JavascriptフレームワークはJQueryに一本化した。PrototypeやMootoolsスクリプトを使ったHTMLはすべて書き換えた。ページ（セクション）を切り替えるスクリプトはふたつ用意した。軽量の tabs.js と bootstrap のtab機能である。
写真の操作
縮小画像の一覧をつくり、画像をクリックすると拡大写真が表示できるようにした。スクリプトは fancybox と blueimp を改変して作成した fbox.js と gallery.js の二本立てになった。fbox が最も使いやすいが、スマホのスワイプに対応していない。スマホに対応するために gallery.js を作成した。2004年の写真アルバム（以下Album）は、fboxで作成した。古い2009年頃からのAlbumは、gallery.jsで作りかえる予定である。いずれもキーボードの矢印で前後の写真を閲覧できる。fadeスライドショーかcarouselスライドショーかの違いであるが、スマホではgallery.js のほうが閲覧しやすい。
動画プレイヤー
Flowplayer に一本化した。 gallery.jsでも動画（HTML5 Video）を対象にできるので、動画一覧に利用する。Flowplayerでは Playlist と Overlay をメインに使う。Modalは洒落ているが作成<code></code>数倍になってしまって面倒である。
組込みスライドショー
数枚～10枚程度のバナー写真を組込みでスライドショー表示すために、JQueru Cycleプラグインを採用した。記述が簡単だからだ。これにfboxを組み合わせて、バナー写真をクリックすればフルスクリーンで表示できるようにした。カルーセル表示するときは gallery.js を使う。
ポップアップ
個別の写真や外部HTML（たとえば径路地図やGoogleマイマップ）、YouTube動画などのポップアップ表示には、popup.js を採用した。複数あるなかで、Toddish版を使うことにした。ポップアップ画面のサイズを個別に設定できるのが便利である。