制作メモ

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

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

Google MyMaps

過去の実験的なMapsEngineが新しい標準になってから使いにくくなった。共有URLがiframeで使えなくなったので、埋め込みURLも作成するようにした。短縮URLの二重管理が面倒だ。ひとつのMyMapsの一部を拡大した地図をページ内に埋め込むことができなくなった。つねにデフォールトで表示された。最近分かったのが、共有URLの地図で一部を拡大したときのURLをアドレス欄からコピーし、viewerをembedに書きかえれば拡大地図を埋め込める。ただし、短縮URLにすると、デフォールトの大きさになってしまう。

更新日: