インフォメーション

☆ブログ リューアル!(ようやくiphone表示にも対応)

URL変更は無しですが、RSSフィードは変更です。
◎RSS1.0→http://blog.spadive.com/feed
◎RSS2.0→http://blog.spadive.com/feed/rss2

エントリー

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

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

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>

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

1.iframeのframeborderやallowfullscreenは削除

目的はhtml5でのvalid化

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

これもhtml5のvalid対処

3.videoIDの前に/embed/を!

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

4.width="540" height="325"指定

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

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

事前にiphone専用css(freo/css/iphone/common.css)に下記追加

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

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

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

同様に2つほどテスト。

Yngwieが野球場(?)で演奏してるの面白い動画...

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

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

参考にした記事はコレ。

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

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

YOUTUBE動画-20110825南紀白浜 権現崎

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

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

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

2週間ぶりに服を着替えてのお出かけ♪
健診日でした。 
今日は、お腹の赤ちゃんの状態や成長を詳しく知るため、30分かけてのエコーがありました!
体重は2500gをこえ、どこにも異常はみとめられず、顔をしっかりと見せてくれましたε-(´∀`*)ホッ

元気な女のコで一安心です♪

がっΣ(・□・;)しか~し、あと2週間は、お腹にいとかないとダメなようなので、引き続き自宅安静命令がぁ~!!
前回の健診より、また少し子宮頸管が短くなったとか…(;´д`)トホホ…

安静生活を送ってた2週間で体重が3kg近く増加!!
そりゃあそうだ!!
だって、ほとんど動かないのに食べる量は今まで通りなんですもん(~_~;)あたりまえです。。。

そして、今日は奥歯がかけてビックリΣ(゚д゚lll)
カルシウムが赤ちゃんにとられてるんだなぁ~と実感。

そんなこんなで、あと2週間。
食事制限しながら、カルシウムしっかりとって安静生活~。
あぁ~、おかしくなってしまうナリ~゚(∀)゚ エッ?

☆スパダイブ天気予報☆
明日はグッと気温が下がります!
北風びゅ~びゅ~極寒だぁ~♪───O(≧∇≦)O────♪
この冬、最高レベルの防寒をして乗り越えましょう。

最高気温4℃ 最低温度2℃ 降水確率30%

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

 変えたといっても、アドレスも同じだしデータ引継ぎもほぼ上手くいったので中身も同じです。変わったのは若干の見た目に加えて操作感あたりが変わっただけです。が、完全に変わったことが一つあって、それが冒頭インフォメーションにもある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で表示させたいだけだったらアメブロとかでいいじゃない!?って言われそうだけど、

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

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

 

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

(けっきょくまたiphoneだったり^^;)

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

実際の移行

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

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

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

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

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

注意点としては、

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

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

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

 

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

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

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

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

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

 

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

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

 

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

 

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

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

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

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

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

 

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

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

 2.旧WDPデータからの分類/カテゴリ引継ぎが不十分

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

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

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

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

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

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

 

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

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

 

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

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

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

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

日本語必須

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

なぞなぞ認証

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

URL記載制限

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

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

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

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

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

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

よりメモ目的で引用

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

</head>の上に

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

を加入します。

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

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

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

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

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

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

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

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

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

7)css/common.cssの一番最後に

.youtube {
}

を加入してUPします。

8)1)のtemplates/header.htmlの編集を次のようにしてUPします(赤字の部分が変更箇所)。

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

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

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

Van Halen - Tattoo

追記(覚書):

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

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

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

再度別動画で

白浜花火フェスティバル2011-後半~ラスト

さらに追記(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ヶ所ずつあります。)

tiny_mceで動作がおかしかった点

ボタンクリックで立ち上がった別windowがのっぺらぼうで操作不能

設置後すぐに投稿確認くらいしとけばよかったのに、今になって投稿画面に不具合があることがわかってΣ(゚Д゚;≡;゚д゚)とか、なんとも情けないw

ダウンロード初期状態のfreoをローカル環境に再度セットアップして動かしてみたらちゃんと動作したので、やっぱり何か変えてしまったのだろう..ということで、投稿画面用のhtmlテンプレートやphpファイルを初期状態のものに上書きしたりしてみたが、やっぱりその程度じゃ駄目だった。

で、また投稿画面を操作しながらボタン操作をしていたら、ボタン動作はjavascript動作だということに今更ながら気づき、スクリプトの格納ディレクトリ「tiny_mce」をごっそり入れ替えてみたら\(^o^)/

初期状態での同ディレクトリ内ファイル数とサーバ上のそれが違っていたので、どうもFTP送受信時に消えたファイルがあったようだ。
ちなみに、「表を挿入」ボタンがまだ稼働しないのはまた別問題なのだろうか?? 

使えるようになったボタン

「HTMLソース編集」「画像の挿入/編集」

未だ動かないボタン

「表を挿入」

20120130追記: 別件問題で色々やってるうちにいつの間にか「表を挿入」ボタンもこのとおり使えるようになった。やったことは、サーバー上でphp.ini設定を次のとおり変更。これが効いたのかどうか、そもそも対処として正しいのかどうかも今一解ってないのだけれど...動いたということでメモ 

mbstring.encoding_translation
未設定→on
mbstring.http_input
pass→on
mbstring.http_output
pass→UTF-8

ついでに使えるようになったボタンを利用してみる

HTMLソース編集画面にタグ挿入

YOUTUBE動画挿入てすと

「画像の挿入/編集」ボタンで画像挿入

今朝撮影してtwitter投稿した画像

どうかな?

ページ移動

ユーティリティ

archive

No Data
ブックマークはありません。
/
S M T W T F S

page

  • ページが登録されていません。