スパダイブログ- 和歌山県南紀白浜

昨日気付いたんですが、ふとIE（InternetExplorer）を開いてみたら、なななんとサイトの角丸がちゃんと表示されてる～！！
ひと通り色々ページ開いてみると、CSSで「border-radius」指定した部分がちゃんと表現されてるように見える...ビックリしました！
（ただし、IE9のみで互換表示の方は×） 

えっ？前からですか？
たしか数日前、写真集のページリニューアルの際に表示確認したときは全く無反応の角々表示だったので、よっぽどまたIEに対する文句の一つでも書いてやろうと思った記憶が新しいのだけど...

そういえば数日前にWindowsUpdateがあったような気がするんで、その時かな？

なんにせよ、IEもちゃんとWEB標準化の方向へ進んでくれてる（？）ことが確認できてちょっとよかった(^^)

ちなみに「background: gradient」とかはまだ全然無反応だけど、「border-radius」に関しては、Chrome用の「-webkit-」もFirefox用の「-moz-」もいらなくなってるし（旧バージョンのことは知らない）、スッキリしてきました。

ブラウザは最新バージョンにした方がきっといいと思います。

先日のブログページに引き続き、写真集のページも改変しました。
コレです。「写真集」

今回の改変目的は2つ。
「ページ管理を楽にする」と「iphone等スマートフォンに対応させる」です。
ちょっとモサつくような気がするのと、個別画像表示へ行き着くまでのステップが1操作増えることになってしまいましたが、概ね目的は果たせたかな...と。

写真集ページ全体の管理を楽にする

今までは静的なhtmlページを手動で毎月ごとに作成していました。
といっても大半がコピペ作業なので最初の頃は問題なかったのですが、年に15ページくらいずつ増え続けてそれが何年も続くと...
既に現状何か変更したいときには約130ページ分程同じ作業を繰り返すことになり、それが今後まだ増え続けるとなるとさすがにウンザリ。

という訳で、サイトを「HTML5＋PHP＋UTF8化～」の時に、PHP化したんだからもっと便利に！を目標に。

調べてみるといくつかスッポリはまるものが！

「minishowcase：モノグサ太郎な写真ギャラリーに最適」

スライドショーもあってキビキビ動いて...
最初はこれでテスト進めてみたんですが、PHP5.3でエラーが修正出来なかったのと、フォルダの階層未対応、それと後述するiPhoneのスワイプ用スクリプトが動作しなかったので断念。

結局最終的には、10pressさんの

「イメージギャラリー用PHPスクリプトpipipiga（改）」

を利用させていただきました。
NiconicoPHPさんの本家「webアルバム（pipipiga）」にしなかったのは、PHP5.3によるものと思われるエラーが大量発生で...
その点pipipiga（改）の方はエラーもなく、HTML構文もvalidで文句なしでした。 見た目調整も1枚のテンプレートhtmlとCSSでできるのでやりやすかった。

ここのも画像をフォルダごとUPすれば、後はPHPによる自動処理でサムネイル画像を作ってくれたり、表示ページ処理等をしてくれます。しかもフォルダ階層も対応！

コレすごいです！！
今まで1枚1枚手作業でやってたことがほぼ一瞬でww もっと早く出会ってれば^^;

厚かましくも難点をあげるならば、個別画像を単体で拡大表示させるまでのステップが遠く、最短4ステップ踏む必要があります。
サムネイルも2度も別サイズで作ってくれるのは凄いですが、どちらか一つで十分かも...
あと、画像の表示にColorBoxを利用できてたんですが、iPhoneスワイプ用スクリプトと干渉するのでこれは外しました。

iphone等スマートフォンに対応させる

画像表示でiPhoneといえばやっぱり、画面を指でタッチしたまま横にズリッとスライドさせて次々に画像をおくっていくアレです。

とにかくアレに対応させたかった。
で、すぐに見つかりました。

PhotoSwipe

希望通りズリズリとスワイプ操作で画像をおくれて、しかもスライドショー機能もついてて＼(^o^)／

ちなみにPC上でもマウスカーソルを画像上に置いてドラッグするみたいに横にスライドさせるとスワイプします。
気持ちいいです。

設置で苦しんだのは、上記ColorBoxと干渉して上手く動いてくれなかったことと、iPhoneの縦持ちで表示させた時の下部操作ボタンが小さすぎだったことの調整。

前者はColorBoxを外すことで難なくクリア。
後者は...色々やってみて3～4倍程の大きさになった！と思ったんですがね～ww
さっきiPhone3GSで動作確認したら3GSではボタンが拡大されてなかった...

そうそう、端末の動作確認は手持ちのiPhone4S、4、3GSでは確認できましたが、その他のスマートフォンは持ってないので確認できてません。

おわりに

「写真集」（といっても単なるギャラリーですが）良かったら覧ください。特にこれまでに水中等でご一緒した皆様とか見ていただきたくと違いがわかるかと。

あっ、でも本体画像自体は前とおんなじ低容量に圧縮した画像のままなので荒いです。 置き換えようかとも考えたんですが、なんせ数が多すぎて...
最近はサーバーの容量や速度も上がったし、今年からはもう少しクオリティーを上げた圧縮サイズにするつもりです。

今後の課題

これでサイト全体に渡ってひと通り改変した上で、HTML5化、PHP化、HTML構文のVALID化は概ね出来たかなと思います。

あとは、リンク切れ等の細かいチェックや、全体的な見た目調整をCSSを整理・勉強しながら修正していく感じのことをボチボチとやっていこうかと思ってます。

ってか、これが一番の根気作業かも^^;

色々検討てみたけれど、結局これに収まりました。

なんか無駄に（？）遠回りしたけど、一番単純な形に収まった感じです。

iflameでembedってのを入れるとちゃんとiphoneでも表示されることにやっと気づき...

また覚えがきでも一つ。

埋込コードをiframeに置き換え

まずyoutubeから持ってきた下記埋め込みコードそのもの

<object style="height: 390px; width: 640px;"><param name="movie" value="http://www.youtube.com/v/AVt24Vij9jk?version=3&amp;feature=player_detailpage" /><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /></object>

或いは

<iframe width="640" height="360" src="http://www.youtube.com/embed/AVt24Vij9jk?feature=player_embedded" frameborder="0" allowfullscreen></iframe>

から、videoIDの部分（＝AVt24Vij9jk）を抜き出して下記iframeフォマットへ置き換える

<div class="youtube"><iframe src="http://www.youtube.com/embed/AVt24Vij9jk" title="20110825南紀白浜 権現崎海中" width="540" height="325"> </iframe></div>

置き換えの際の注意点は、

１．iframeのframeborderやallowfullscreenは削除

目的はhtml5でのvalid化

２．titleを追加して動画のタイトルをコピペ

これもhtml5のvalid対処

３．videoIDの前に/embed/を！

たぶんこれがiphone表示にきいてるんだと思う

４．width="540" height="325"指定

freoで作成の本ブログで、PC表示向けにうまく表示されるMAXサイズがこのあたり

５．iframeタグ全体をdivで囲みyoutubeクラスを与える

事前にiphone専用css（freo/css/iphone/common.css）に下記追加

.youtube iframe {
    max-width: 300px;
    height: auto;
    border: none;
}

しておくことで、iphone表示の際には横幅自動調整される。
300pxはfreoブログでiphone表示させた場合のmax値。これ以上大きくすると全体の表示が崩れる 。

結局この形が一番いいのではないかという結論になりました。

同様に２つほどテスト。

Yngwieが野球場（？）で演奏してるの面白い動画...

大好きなレブとダグを従えてかっこいい還暦おじいちゃん...

googleの「iframe 埋め込み式 YouTube Player 向け JavaScript Player API」てのを使ってみた

参考にした記事はコレ。

iframe 埋め込み式 YouTube Player 向け JavaScript Player API のご紹介

そのま～んま。そのまんま設置してdiv内へのタイトル入力とvideoID入力しただけでやってみました。

よそ様の動画を2つほど貼りつけてみたけど、iphoneではうまくいかなかった。最後に自分の動画で。

続けて違うのも並べて。。。と、やってみたんですが、2つ並べて表示させるのはid名とか変えただけでは駄目でした。やり方あるのかもしれないけど、単純に並べてしまうだけでは無理だった。

1つだけ表示させるにはこれもありなのかな？？

ちょっと今更感ありですが、数日前からブログを今の形変えました。

 変えたといっても、アドレスも同じだしデータ引継ぎもほぼ上手くいったので中身も同じです。変わったのは若干の見た目に加えて操作感あたりが変わっただけです。が、完全に変わったことが一つあって、それが冒頭インフォメーションにもあるRSSフィードのアドレスです。

あまりいないかもですが、feedリーダーに登録してうちの記事を読んで下さってる方いましたら登録を変更願いますm(__)m

 ブログツールは
先代CGI版のWeb Diary Proから、同じ作者様のPHPツールfreo.jpへ移行。

ほぼ満足な出来上がりになりました。作者のないとさんには大感謝です。

さて、ブログ移行にあたって少しアレコレと...

 ブログツールをCGIからPHPへ移行する経緯

 5年前10年前は、まだCGIのものが主流だった（たぶん）のが、ここ数年は完全にPHPのものが主流で、大半を占めるWordPressやMovableTypeもそうです。

決してプログラムの専門家じゃないので詳しいウンチクは語れませんが、ザクッと自分なりに解釈してることは、どちらもサーバー上で動作するプログラムだけど、PHPは最近になって産まれたhtmlを処理するためのプログラムみたいなもので、例えばデータベース内の情報を広範囲に効率的に処理してhtmlに反映させるのに向いて（優れて）おり、最近のように多種多様なデータの扱いをする処理をさせることを考えた場合、一般的により高速...みたいに解釈してます。

CGI版のブログツールは、データを単純にログとしてテキストファイルに記録し、そのログを読みだしたり表示させたり書き込んだりする感じでしたが、PHPのツールは殆どがデータはデータベースとしてのファイルに保存し、そのデータベース内の情報を効率的に読み出したり、書き込みや演算させており、それがトータル的に高速化に繋がってるみたいな。（間違ってたら誰か指摘を..）

ま、そういう時流に乗るみたいな面もありますが、そもそもはiphoneに最適化させたい！というのがきっかけで、2,3年前にWordpressあたりに移行させようかって考えたんですが、データのことやPHPに全く無知だったので参考書を購入して読み始めたうちにそのまま流れて...

iphoneで表示させたいだけだったらアメブロとかでいいじゃない！？って言われそうだけど、

１．ツール移行の度にアドレスが変わってしまうのが嫌
２．データのバックアップがやりにくい
３．みんな使っててありきたりで応用性に乏しい
４．ちゃんと中身を自分で操作してカスタマイズしたり勉強したい
５．できればhtmlをVALIDなものにし、HTML5またはXHTML strictなものでいきたい

という点で、初めからアメブロ移行は除外。

昨年までまだWordpressにしようかと迷ってたんだけど、freoが標準でiphone表示に対応していることが解ってから具体的に移行を進める決意をしました。

（けっきょくまたiphoneだったり^^;）

さらに、スパダイブのサイトをPHP化した際に、CGIがうまく動かない時があって（結局自分の設定不足が原因だけど）、その時に「急がねば！」と思ったのがトドメでした。

実際の移行

移行自体は思ってたより全然スムーズにいきました。

それまで使っていたブログが「WDP（Web Diary Pro）」だったので、freo側へのデータ移行用に「ログ変換ツール」というCGIプログラムを用意してくれています。

それを実行させると、元々のブログのログファイルからデータを吸い出し、同時にSQLデータベース用のインポートファイルを作ってくれます。

実行時間はサーバ上で10秒もかからなかったと思います（1600件分程）。

そのファイルをFTPでダウンロードして保存することでfreoへのインポートファイルは出来上がり。

注意点としては、

１．事前にcgi実行ファイル内に、freoで設定するカテゴリとWDPの分類項目を完全一致させて入力しておかないと、分類／カテゴリーが全く引き継がれない

２．実行ファイル内で移行先ファイルのリンクアドレスは、最終的に設定したいアドレスで入力しておく（特にうちのようにサブドメイン形式にしてる場合は注意）

（最初の一発目はこの2点をあまり考えずに進めて、途中でリンクアドレスとかが全滅していて最初からやり直した..）

次にfreoをサーバ上でセットアップし（セットアップまではサイトの案内に従って進めればすぐに出来るので省略）、最初にやっておくことは上記１．と完全一致したカテゴリを作成することです。

1度失敗したからよくわかりますが、データ完全移行にはコレ重要ポインツ！

ただ、2度目はWDPの分類項目とfreoのカテゴリIDを完全一致させたつもりだったけど、結局カテゴリの引継ぎは半分も引き継がれなかった。

思い当たることとしては、freoの設定に際に「ID」は完全一致させたけど「カテゴリ名」を変更したものがあって、おそらくその分が引き継がれなかったように思う。

現在手作業でカテゴリ付与しながら整理中ww

カテゴリ設定が出来たら、freoにインポートプラグインを導入し、管理画面からインポートファイルを選択して実行すると、アッいう間に1600件ほどのデータが移り、ちゃんと添付画像表示もリンクもバッチリでした。

アレほどのデータが一瞬で移行されて思い通りの表示になっているのは感動モノです。

ただ、いくつか問題がありました。

データ移行時のfreo設定時の問題

 １．サーバ上でデータのインポートが出来なかった

 出来なかったんです...サーバにセットアップしたfreoからは何度実行しても「ファイルを選択して下さい」みたいな表示になるばかりでデータは入らない。

 で、結局サーバ上のfreoフォルダ一式をFTPダウンロードし、ローカル環境（xampp+Perl上）でインポート実行したら1発でした。しかも2秒前後の一瞬で終了！

その後また一式をサーバへFTPアップロードし直して設置し今に至ります。

元々、事前にローカル環境で必要なことを試験的にひと通り試してみて、インポート等も上手くいったことを確認した上で、サーバ上へは別のfreoを最初から新たに手順を追ってセットしていったつもりでしたが未だに原因不明です。

サポートへ投稿しようか迷ったんですが、また機会があればということで。

 ２．旧WDPデータからの分類／カテゴリ引継ぎが不十分

 上記のとおり、freo側のIDとは完全一致させてデータ取り込みをしたんですが、結果は半分も引き継がれなかったということで...

まあ、これはどっちにしてもカテゴリ整理の必要性も感じるので、サイト内でないとさんがおっしゃってるように、これを機会に分類し直しです。

 ３．スパム対策用「投稿キープラグイン」が作用してiphoneからコメント投稿できない

 「導入方法」どおりの設定状態でしたが、iphoneではキーもキー入力枠も表示されないので、入力無しで投稿できるかと思いきや、「投稿キーが間違っています」的な表示が帰ってくるばかりで投稿出来なかったです。

iphone用のテンプレートにコード記述を行なってみても同様。

仕方ないので「投稿キー」設置は諦めて「なぞなぞ認証」プラグインに切り替えました。こちらはiphoneでも問題なく動作したのでこれで様子見。

結論（？）としては、完璧じゃないけどデータ移行がこれだけうまくいっただけで自分的には十分大満足ですけどね。

そしてfreo！気に入ってます(^^)

今後の拡張機能なんかも楽しみにしてます！

ブログや掲示板等をネット上で長年公開していると、必ず不定期にスパム投稿がされるようになります。

詳しくはググるといっぱい出てくるので省きますが、大半が自動プログラム等でバラ撒かれるみたいで、スパム対策を全くしていないと、次から次に本文とは全く関係のない変な投稿が繰り返されます。そして海外のものも多いです。

という訳で、そういうスパム対策として下記対策を本ブログでもしてますので、コメントいただく際はお手数ですがご了承願います。

日本語必須

英文だけの投稿は弾きます。

なぞなぞ認証

コメント入力後、確認や登録ボタンを押す前に、表示されている簡単な「なぞなぞ」に答えて入力していただきます（パソコンとiphoneでは動作確認済み）。おそらく入力いただくのは現時点では日本語ばかりにするつもりです。小学生で解答できる程度の問題ばかりをいくつか用意してまして、それがランダムに表示されるようになってます。目的は上記自動プログラムによる迷惑投稿対策です。

URL記載制限

スパム投稿をしてくるコメントには、大概本文中にクリックして欲しいホームページアドレスが記載されます。なので、URLアドレスの記載を禁止してしまえば手っ取り早いのですが、それも不便なのでまずはアドレス２つまでという制限でいきたいと思います。そのうちゼロにして禁止する可能性もあります。

といってもうちみたいな認知の薄いブログだと、他の大規模なブログに比べて全然たいしたことないんだろうけど。。でも、アレにやられるとほんとうっとおしいんです。

昨日ためしてみたyoutube動画埋込みですが、PC表示は問題なかったけど、iphoneからはやっぱり何も表示されない..

ググッてみたらいくつか手段があるみたいなので試してみる。

まずは、freoの作者さんの記事

freoのentry（またはpage）でYouTube動画をcolorboxで表示する場合

よりメモ目的で引用

１）templates/header.htmlを次のように編集してUPします。

</head>の上に

{literal}
<script>
　$(document).ready(function(){
　　$(".complete").colorbox({iframe:true, innerWidth:640, innerHeight:385});
　});
</script>
{/literal}

を加入します。

２）動画を挿入したい場所で登録画面の「画像の挿入/編集」ボタン（画像の赤丸で囲んだボタン）をクリックします。

３）「画像URL」のところに「http://img.youtube.com/vi/(YouTubeの動画ID)/default.jpg」と入力し、「画像の説明」と「タイトル」のところに適当なタイトルを入力して「更新」ボタンをクリックします。

４）挿入した画像をクリックし、登録画面の「リンクの挿入/編集」ボタン（画像の赤丸で囲んだボタン）をクリックします。

５）「リンクの挿入/編集」ウィンドウが表示されたら、「一般」タブの「リンクURL」のところに「http://www.youtube.com/v/(YouTubeの動画ID)」と入力し、その下の「クラス」のところで「complete」を選択して「更新」ボタンをクリックします。

６）画像に設定が完了したら登録を行います。

登録した記事から画像をクリックすると

YouTube動画が表示されます（上の画像をクリックすると実物大で表示され雰囲気がよくわかります）。

動画を閉じるには、動画右上の[]をクリックします。

※クラスの部分が「complete」だと分かりにくいので「youtube」にしたいときは

７）css/common.cssの一番最後に

.youtube {
}

を加入してUPします。

８）１）のtemplates/header.htmlの編集を次のようにしてUPします（赤字の部分が変更箇所）。

{literal}
<script>
　$(document).ready(function(){
　　$(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:385});
　});
</script>
{/literal}

９）５）の「リンクの挿入/編集」ウィンドウの「クラス」のところで「youtube」が選択できるようになるので選択して「更新」ボタンをクリックします。

をそのまんまやってみたのがこれ。画像をクリックしたらyoutube動画が観れる。。。ハズ！？

追記(覚書）：

１）添付画像は横幅は150px程度にしておかないと、、、サイドバーへのリンクがサムネイル化してくれないので思いっきりはみ出るww

２）iphoneでは画像表示→クリック→別ウィンドウが立ち上がるまではいくけど、その先エラーになる。「YouTubeの動画ID」だけじゃなくて”＆”以降も入れてみるといけるかな？？

→iphoneではやっぱり駄目だった

再度別動画で

さらに追記（2012/02/01）

freoサイト内の下記部分を見劣していた。

最後の文面通りに横幅と高さを150、90みたいに置き換えておくとサイドバー表示がはみ出ることはない筈（これも覚書）。

その設定の上で、上の表示サイズはiphone側の最大横幅 を考慮して幅280px高さ172pxとする。

以下またまた覚書に引用

次に templates/utility.html に、一例ですが以下のコードを追加します。

<div class="utility">
  <h3>エントリーギャラリー</h3>
  <div class="content">
    <ul class="gallery">
      <!--{foreach from=$plugin_entry_galleries|smarty:nodefaults item='plugin_entry_gallery'}-->
      <li><a href="{$freo.core.http_file}/view/{if $plugin_entry_gallery.code}{$plugin_entry_gallery.code}{else}{$plugin_entry_gallery.id}{/if}"><!--{if $plugin_entry_gallery.image}--><img src="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}entry_images/{$plugin_entry_gallery.id}/{$plugin_entry_gallery.image}" alt="{$plugin_entry_gallery.memo|default:$plugin_entry_gallery.title}" title="{$plugin_entry_gallery.memo|default:$plugin_entry_gallery.title}" width="{$plugin_entry_gallery_images[$plugin_entry_gallery.id].width}" height="{$plugin_entry_gallery_images[$plugin_entry_gallery.id].height}" /><!--{else}--><img src="{$plugin_entry_gallery_medias[$plugin_entry_gallery.id].file}" alt="{$plugin_entry_gallery.memo|default:$plugin_entry_gallery.title}" title="{$plugin_entry_gallery.memo|default:$plugin_entry_gallery.title}" width="{$plugin_entry_gallery_medias[$plugin_entry_gallery.id].width}" height="{$plugin_entry_gallery_medias[$plugin_entry_gallery.id].height}" /><!--{/if}--></a></li>
      <!--{/foreach}-->
    </ul>
  </div>
</div>

上のコードにある width="{$plugin_entry_gallery_images[$plugin_entry_gallery.id].width}" と height="{$plugin_entry_gallery_images[$plugin_entry_gallery.id].height}" に任意の数値を設定すると、強制的にそのサイズで画像を表示することができます。（それぞれ2ヶ所ずつあります。）