先日のブログページに引き続き、写真集のページも改変しました。
コレです。「写真集」
今回の改変目的は2つ。
「ページ管理を楽にする」と「iphone等スマートフォンに対応させる」です。
ちょっとモサつくような気がするのと、個別画像表示へ行き着くまでのステップが1操作増えることになってしまいましたが、概ね目的は果たせたかな...と。
写真集ページ全体の管理を楽にする
今までは静的なhtmlページを手動で毎月ごとに作成していました。
といっても大半がコピペ作業なので最初の頃は問題なかったのですが、年に15ページくらいずつ増え続けてそれが何年も続くと...
既に現状何か変更したいときには約130ページ分程同じ作業を繰り返すことになり、それが今後まだ増え続けるとなるとさすがにウンザリ。
という訳で、サイトを「HTML5+PHP+UTF8化~」の時に、PHP化したんだからもっと便利に!を目標に。
調べてみるといくつかスッポリはまるものが!
スライドショーもあってキビキビ動いて...
最初はこれでテスト進めてみたんですが、PHP5.3でエラーが修正出来なかったのと、フォルダの階層未対応、それと後述するiPhoneのスワイプ用スクリプトが動作しなかったので断念。
結局最終的には、10pressさんの
を利用させていただきました。
NiconicoPHPさんの本家「webアルバム(pipipiga)」にしなかったのは、PHP5.3によるものと思われるエラーが大量発生で...
その点pipipiga(改)の方はエラーもなく、HTML構文もvalidで文句なしでした。 見た目調整も1枚のテンプレートhtmlとCSSでできるのでやりやすかった。
ここのも画像をフォルダごとUPすれば、後はPHPによる自動処理でサムネイル画像を作ってくれたり、表示ページ処理等をしてくれます。しかもフォルダ階層も対応!
コレすごいです!!
今まで1枚1枚手作業でやってたことがほぼ一瞬でww もっと早く出会ってれば^^;
厚かましくも難点をあげるならば、個別画像を単体で拡大表示させるまでのステップが遠く、最短4ステップ踏む必要があります。
サムネイルも2度も別サイズで作ってくれるのは凄いですが、どちらか一つで十分かも...
あと、画像の表示にColorBoxを利用できてたんですが、iPhoneスワイプ用スクリプトと干渉するのでこれは外しました。
iphone等スマートフォンに対応させる
画像表示でiPhoneといえばやっぱり、画面を指でタッチしたまま横にズリッとスライドさせて次々に画像をおくっていくアレです。
とにかくアレに対応させたかった。
で、すぐに見つかりました。
希望通りズリズリとスワイプ操作で画像をおくれて、しかもスライドショー機能もついてて＼(^o^)/
ちなみにPC上でもマウスカーソルを画像上に置いてドラッグするみたいに横にスライドさせるとスワイプします。
気持ちいいです。
設置で苦しんだのは、上記ColorBoxと干渉して上手く動いてくれなかったことと、iPhoneの縦持ちで表示させた時の下部操作ボタンが小さすぎだったことの調整。
前者はColorBoxを外すことで難なくクリア。
後者は...色々やってみて3~4倍程の大きさになった!と思ったんですがね~ww
さっきiPhone3GSで動作確認したら3GSではボタンが拡大されてなかった...
そうそう、端末の動作確認は手持ちのiPhone4S、4、3GSでは確認できましたが、その他のスマートフォンは持ってないので確認できてません。
おわりに
「写真集」(といっても単なるギャラリーですが)良かったら覧ください。特にこれまでに水中等でご一緒した皆様とか見ていただきたくと違いがわかるかと。
あっ、でも本体画像自体は前とおんなじ低容量に圧縮した画像のままなので荒いです。 置き換えようかとも考えたんですが、なんせ数が多すぎて...
最近はサーバーの容量や速度も上がったし、今年からはもう少しクオリティーを上げた圧縮サイズにするつもりです。
今後の課題
これでサイト全体に渡ってひと通り改変した上で、HTML5化、PHP化、HTML構文のVALID化は概ね出来たかなと思います。
あとは、リンク切れ等の細かいチェックや、全体的な見た目調整をCSSを整理・勉強しながら修正していく感じのことをボチボチとやっていこうかと思ってます。
ってか、これが一番の根気作業かも^^;
