[ カテゴリー » 開発日誌 ]

YouTubeやグーグルビデオ、Soapboxのための記法

category-icon

ひとつ前のエントリーで書きましたが、記法は簡単です。次のようになります。

[yt:(ビデオのID):横幅:縦幅]
YouTubeなら、yt、Googleビデオならgv、マイクロソフトsoapboxならsbです。縦と横のサイズ(整数)は省略できるので、簡単にしたいなら、ビデオのIDを記述するだけでOKです。具体例で見ていきましょう。
[yt:hEYHvLnVcnQ::]
と記述すると(任天堂ゼルダ曲のピアノ演奏、再生すると音が出ますよ)、 次は、GoogleVideoの場合。
[gv:-5379890076544103730::]
と記述すると(任天堂マリオ曲のピアノ演奏)、[gv:-5379890076544103730::]最後に、マイクロソフトのSoapbox。
[sb:022cb97f-95f8-403a-9c1b-5032c70de2e1::]
と記述すると(任天堂Wiiのゼルダデモ映像)[sb:022cb97f-95f8-403a-9c1b-5032c70de2e1::]

 こんな感じです。簡単ですね。この記法のために、スタイルシート用ですが video-linkというクラス名を出力するようにしました。このbasicのテーマの場合は、basic.cssにて次のように指定しています。

/*--------------[ 外部動画 ]-------------*/
.video-link {
  width: 425px; margin: auto; z-index:1;
}

 とりあえず、代表的な3つのビデオサイト向け記法を用意しましたが、utils.phpのソースを見れば分かるように、今後いくらでも追加できるようにしています。この手のは、たいていFlashを用いていますから。ちなみに、utils.phpの該当部分は以下のようになっています。配列なので、FLASH系なら、いくらでも追加できると思います。

 // 外部動画リンク表示処理 (YouTube, Google Video, SoapBox MSN, and so on...)
 if(preg_match_all('{¥[(yt|gv|sb):([0-9a-z¥-]+?):(¥d+?|):(¥d+?|)¥]}i', $com, $movlinks)){
  $length = count($movlinks[0]);
  $embeds = array( # src, type, others, width/height
   'yt' => array('http://www.youtube.com/v/', 'application/x-shockwave-flash', '', '425,350'),
   'gv' => array('http://video.google.com/googleplayer.swf?docId=', 'application/x-shockwave-flash', 'id="VideoPlayback"', '400,300'),
   'sb' => array('http://images.soapbox.msn.com/flash/soapbox1_1.swf?v=', 'application/x-shockwave-flash', 'wmode="transparent" name="msn_soapbox" flashvars="c=v&v=SB_MOV_ID"', '412,362'), //
  );
  for($i=0; $i<$length; $i++){
   $_mv = NL.'<div class="video-link">'.NL;
   $tar = $embeds[$movlinks[1][$i]];
   list($def_w, $def_h) = explode(',', $tar[3]);
   $w = $movlinks[3][$i]=='' ? $def_w : $movlinks[3][$i];
   $h = ($h=$movlinks[4][$i])=='' ? ($movlinks[3][$i]=='' ? $def_h : ceil($w * .75)) : $h;
   $_mv .= ' <object style="width:'.$w.'px; height:'.$h.'px;">
  <param name="movie" value="'.$tar[0].$movlinks[2][$i].'"></param>
  <embed src="'.$tar[0].$movlinks[2][$i].'" type="'.$tar[1].'" '.str_replace('SB_MOV_ID', $movlinks[2][$i], $tar[2]).' width="'.$w.'" height="'.$h.'"></embed>
 </object>';
   $_mv .= NL.'</div>'.NL;
   $com = str_replace($movlinks[0][$i], $_mv, $com);
  }
 }

— posted by martin at 12:54 am   commentComment [3]  pingTrackBack [1]

3ペインの新しいテーマ

category-icon

 こんばんは。ケータイの着信音をジャックバウアーの「24G」(ピッ、ピッ、ピッってなるやつ)にしているのですが、仮眠中に鳴った着信音に起きるどころか、何故か、ジャックと一緒に、日本の某所で潜入捜査をしていて「日本だけに、銃が使えないよね」と匍匐(ほふく)前進しつつ、ジャックに夢の中で話しかけていたmartinです。

 さて、ppBlog1.5版では、デフォルトでついているテーマは、2ペイン(サイドバーとメインコンテンツの2カラム)のベーシックなやつですが、それ以前のバージョンには3ペインのテーマも付けていました。で、1.5系に対応する手間だとか、配布ファイルサイズが大きくなるからなどの理由で、1.5系からは付けていなかったのですが、3ペインの要望もあり、とりあえず1.5系に対応させてみました。自分の3ペインには、「こだわり」があって、クリックで2ペインと3ペインの切り替えが出来たり、ソースを見ると、メインコンテンツがサイドバーの内容より先に表示されるとかです。

 まだ、細かい詰めはこれからなのですが、まぁまぁの出来かなと思っています。記事日付の表示に少し凝ってみました。これは、1.5β版で作成していたテーマ「le chic」などでも似たようなことはやっていたんですが、「日めくりカレンダー」のような雰囲気です。ちなみに、「りえっぺさんLink のと似てない?」という突っ込みはなしで。。

 日付周りは、テーマディレクトリにあるtemplate.phpの記事ボックススタイルで指定するわけですが、実は、それなりに多彩な表現が可能です。このカレンダーっぽい日付の部分は以下のように指定しています。

<p class="article-date" title="%_ARTCL_DATE_FORMAT[g:iA]_%">
   %_ARTCL_DATE_FORMAT[D]_%
   <em>%_ARTCL_DATE_FORMAT[d]_%</em>
   %_ARTCL_DATE_FORMAT[M]_%
   ’%_ARTCL_DATE_FORMAT[y]_%
</p>

これに対応するスタイルシートの指定は、article-dateというクラス名に対して、

.article-date {
  width: 48px; height: 48px;
  color: #585d86;
  float: left; /* この指定がポイント */
  text-align: center;
  font: 500 11px Arial, sans-serif;
  margin-right: 10px;
  background: url(Images/date.png) no-repeat;
}
.article-date em { /* 日付の太文字数字に対応 */
  font: 800 23px Georgia, serif;
  text-decoration: none;
  display: block;
  margin: -6px 0 -3px 0;
}

という指定をしています。template.phpでのポイントは、%_ARTCL_DATE_FORMAT[*]_% という日付に関する変数を複数回用いていることです。これの(*)の部分にはPHPのマニュアルにある日付に関する様々なフォーマット文字を入れることが出来ます。詳しくは、マニュアルの該当箇所Link をどうぞ。

 ちなみに、このテーマは、途中なので、まだテーマのプルダウンメニューに入れていませんが、http://p2b.jp/index.php?theme=theme/3pane2/3pane.cssLink で見ることが出来ます。


— posted by martin at 07:29 pm   commentComment [8]  pingTrackBack [2]

document.write()の実行タイミングをずらす方法

category-icon

関連エントリー: Google Adsenseの表示タイミングを制御するLink

 このサイトのppBlog's webRingのリストは、BlogPeopleLink からdocument.writeで書き出しています。というかBlogPeopleのスクリプトがそうなっているのですが。で、document.writeが、HTMLソースの最初の方にあると、document.writeによる書き出しが終わるまで、それ以降のページのレンダリング(HTMLの書き出し)はストップした状態となります。document.writeによって呼び出している外部サーバー(ここではBlogPeople)のレスポンスが速ければ、ページ描画で待たされることはありませんが、たまにはレスポンスが遅くて、ページの残りがなかなか表示されないという事態は起こりえます。このdocument.writeは、広告バナーなどでも当たり前のように使われていて、メインコンテンツの内容が知りたいのに、バナー広告がなかなか表示されず、イライラしたという経験もあるかと思います。確か、GoogleのADWordsなどでも使われているのではないでしょうか。

 こういう事態を避けるには、HTMLソースの最後の方で document.write を呼び出すというのがあり、これはこれで有効ですが、そう汎用性のあるやり方ではなく、また、スクリプト(JavaScript)がHTMLの中で、あちこちに散らばるのは美しくないです。

 ここでは、document.writeの内容をとりあえず配列などに一時的に退避させといて(この間にHTMLソースの描画は進んでいきます)、ページ読み込み完了と同時に、そのストックしておいたdocument.write内容を吐き出すという方法について書いておきます。

 まず、普通にdocument.writeを含んだ外部スクリプトを呼び出すやり方。これは、BlogPeopleがこうしましょう、と述べているものです。

<script type="text/javascript"
  src="http://www.blogpeople.net/display/usr/0f0d40535b5b4103.js"
  charset="euc-jp"></script>

これの実際の中身は、次のようになっています。

document.write('<div class=¥'blogpeople-main¥'>');
document.write('登録されたサイト')
     :
     :
document.write('</div>');
document.write('<div class=¥'blogpeople-powered-by¥'>');
document.write('<br /><a href=¥'・・・¥' target=¥'_blank¥'><img src=¥'・・・¥' border=¥'0¥' alt=¥'Powered By BlogPeople¥' /></a>');
document.write('</div>');

ここに使われているdocument.write内容をとりあえず配列に入れておけば良いのですが、それには次のようにします。

(function(){
  var alts = []; // document.writeの内容を入れておく配列を準備 
  d._write = d.write; // オリジナルはコピーしておく
  d.write = function(s){ alts.push(s);} // d.writeを新たに定義
  var src = "http://www.blogpeople.net/display/usr/0f0d40535b5b4103.js";
  var script = d.createElement('script');
  script.setAttribute('type', 'text/javascript');
  script.setAttribute('charset', 'euc-jp');
  script.setAttribute('src', src);
  d.getElementsByTagName('head')[0].appendChild(script);
  addEvent(window, "load", function(){
   o("_webRing").innerHTML = alts.join(""); // 指定した場所に流し込む
   d.write = d._write; // d.writeを元の定義に戻しておく
  });
 }());

 ポイントは、既存のdocument.writeを新たに、

document.write = function(s){ alts.push(s); }

と再定義している点です。ここではaltsという配列に退避させています。こうすることで、document.writeによる書き出しを待つことなく、残りのページレンダリングを進めていくことが出来ます。このスクリプトで、SafariでもIE6でもFirefoxでもきちんと動くことを確認しています。

 小生のブログであるmartin.p2b.jpのwebRingLink と、このサイトにあるwebRingLink とは同じ外部スクリプトを呼び出しているのですが、比較のために、このサイトのwebRingは上記の手法で、martin'sの方は従来の方法で呼び出しています。BlogPeopleのサーバーレスポンスは素早いので、なかなか差が実感できにくいかと思いますが、このサイトのやつは、(サイドバーのHTMLソースはdocument.writeよりも後にもかかわらず)サイドバーが先に表示されて、最後にwebRingのリストが表示されるのに対して、martin'sの方は、HTMLソースの順序通り、webRingリスト→サイドバーという順序で表示されています。

 ちなみに、このサイトのwebRingは、ppBlogの「ページ作成機能」を使って作成しているのですが、具体的に、どのような内容になっているのか、理解の一助のために添付しておきますね。

 まぁ、こんなアプローチもありますよということで

添付ファイル: webRing.txtattachedIcon 

 


— posted by martin at 05:09 pm   commentComment [14]  pingTrackBack [1]

現時点でのlib.jsほか動画ファイル関連

category-icon

 Opera9でのAjax関連のスクリプト動作がちょいと怪しいので、一応Opera9でも何とか動くようにlib.jsを修正してみました。以前から、OperaのinnerHTMLの挙動は不審な点があるんですよね。バージョン9になっても、それほど改善はされていないのかなぁ。自分のところにくるOpera使いは3パーセント台で決して多くはないのですが、モダンなブラウザであることに変わりはなく無視するわけにもいきませんので。

 あと、バージョンアップに際して、動画ファイルの扱いを見落としていました。バージョン1.5からは、今後のポッドキャストや音楽ファイルの配布なんかを見据えて、これまでの動画ファイルは画像ファイルと切り離して、画像ファイルと、その他のメディアファイルという扱いにしています。それに伴い動画ファイルのログ形式もちょっと変えたのでした。これは、スクリプトの方で、1.4系もカバーするようにします。ついでといっては何ですが、メディア関連の画像が抜けていたり、ほかに、メディア関連の出力タグに、これまでスタイルシートのクラス名を指定していなかったので、これもクラス名を設けました(class="media-part")ので、添付しておきますね。

 現状では、画像データベースは備えていますが、メディアデータベースはまだです。まぁ、これは画像データベースの流用で、ある程度簡単に実装できると思いますが、動画・音声系は、もうちょっと機が熟してからでよいかなと思っています。バージョン1.5.5ぐらいで? 個人的には、ポッドキャストを勉強して、それをある程度扱えるようになったらと思っています。外枠を捉えるのはそう難しいものではないでしょう。実際のコンテンツ作成は別として。

 というわけで、1.4系の動画ファイルを考慮した、そして、今後のメディア関連の扱いもある程度意識したutils.phpとutils_admin.phpを添付しておきます。その他、メディアアイコンと最新版のlib.jsを添付しておきます。

添付ファイル: 1153060946_DIFF060717.zipattachedIcon 

 


— posted by martin at 12:32 am   commentComment [15]  pingTrackBack [2]

今日あたり・・・

category-icon

 こんばんは。プレッシャーもあって、ひっそりとppBlog1.5.0正式版をアップしていたんですが、いくつか修正点があって、それらのフィックスを合間合間にやってましたが、大体片が付いたので、今日あたりに1.5.1として、正式版をきちんとしたアナウンスのもとにリリースしようと思います。何だか読みにくい日本語になってしま(略)。

 これまで、記事作成画面では、「ワープロモード」と「ローカルプレビュー」が付いていたんですが、ワープロモードはAjaxを利用した「自動ポスト機能」にとって替わりまして、また「ローカルプレビュー」は、従来のものは、ほんとおまけ程度の貧弱なものだったんですが、今回のバージョンからは、デフォルトのテーマをほぼ忠実に再現します。まだ、完璧に再現する訳ではないのですが、ウェブ上での見た目と殆ど変わらないレベルだと思うので、皆さん、活用されて下さい。

 余談ですが、IEに関して、自分はIE7b3を試用中でして、IE6の数あるスタイルシート(CSS)関連のバグはほとんど修正されています。で、IEの動作確認は、ついついこのIE7で済ませてて、まぁOKかなって思っていたら、ご指摘があって、Ajax関連の新しいギミックが、CSSと相まって、IE6ではありえない動作をしたりするんですよね。何じゃ、このIEイィィィィィィ、と思わずDIOになりそうなのをこらえて、何とかIE6にも対応させました。それにしてもIE6のシェアって、このブログの来訪者で見ても6割超なんですよね。。無視できません(--) 
BrowsersShare
sleipnirやlunascapeもIE6エンジンですからねぇ。

— posted by martin at 03:02 am   commentComment [1]  pingTrackBack [1]

T: Y: ALL: Online:
Created in 0.0099 sec.
prev
2025.5
next
        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31