http://sceneryseen.net/

先々月のことになりますが、tecra（@papapowder）さんが 2011/05/01 に発表した「verb ep」というCD作品の特設webページを作らせてもらいました。
今後リニューアルされる前に、作る途中で考えたこと、試してみたことをメモメモ。

• デザイン：「好きにしていい」
• 背景画像をスライドショー：jquery.BgImageTransition.js
• iPhoneでも試聴させたい：audio.js
• まったく関係のない雑感

一時期、ていうか昨年末のハナシなんですが、「フィードを読み込んでかっこよくページに出力する」という割と普通のことをしたくて、色々右往左往したログを残してみます。
以前試したことのある「Google AJAX Feed API」ならある程度できると分かっていたので、それ以外に何かいいモノないかな？と、別の方法を探してみたのでした。

試している最中のTwitterログ（日付無視）

• FriendFeedのフィード埋め込みウィジェット。ブログなどに埋め込めるアレ。
• RSSとかのフィードを、Google AJAX Feed APIを「使わずに」PHPかJSで取得する方法を調べてるるる。
• るるー。「Ajax 簡易RSSリーダーを作成する方法。」
• るるるー。「RSS と Atom を使ってサイトでフィードを取得する」
• るるるるー。「SimpleXML関数使ってフィード読み込みたい」
• るるｒ（略）「7. MagpieRSSで簡単にRSSを操作しよう」
• PHP5の「SimpleXML関数」が使える環境では、フィードの読み込みはカンタン、てことだけは分かった。同時に、xmlのツリー構造を理解できてないのも分かった。
• SimpleXML関数で、ひとつのフィードを取得する方法はもやっと理解。んんん、複数のときはどうするんだろう。それに、ツリー構造の末端が扱いにくい形式だったら、取得側で文字列をどうこうできるのか、要追及。。。
• むーむーむー、MagpieRSSを試しているものの、一番出したい内容が出力されない。。。何やらかしてるんだろ。。。
• audioBoo のフィードの content 部分、上手く取得できないや。。。
• XMLのうち、atomフィードの「entry内の2つ目のlink属性の値を取る」って出来れば上手くいきそうなんだけどな。。。うむー。。。
• 【自分メモ】説明ページに書いてあるけど、MagpieRSSは、RSS2.0のフィードには使えないのだ。
• 参考にしました。「jQuery: JavaScriptでサイトのRSSを読み込み＆表示。XML操作。ドメイン内部編。」
• RSS2.0について、ちゃんと読も。「RSS 2.0 Specification : RSS 2.0 at Harvard Law」
• フィードの読み込みについて、Google AJAX Feed API を改めて試してる。
• フィード取得にGoogle AJAX Feed APIを使ってみる

結論、正直、Google AJAX Feed APIって便利だなぁと思った。
サーバーの関係でPHPが使えなくても、フィードの形式が何であっても、すぱーん！と値を取得できるのってスゴイなぁと改めて感じます。
もちろんフィードの内容によっては、思い通りの表示にできないこと＆やり方を理解できていないところもあるんですが、大抵の場合必要な「日付＋タイトル＋リンク先」は何となく取得出来ちゃうし。
ただ、実装するときに使えそうな選択肢は多いほうが（多分）いいので、頭の片隅に入れつつ、違う方法も模索していきますです。

実際の動きはこちら。↓（音が出ますよー）

※音源は tecra よりお借りしました。ありがとうございます！

再生すると「ばよーん」と開き、停止すると「しゅるーん」と閉じる、Flashを利用したMP3プレーヤーです。
よくあるプレーヤーは、↑のように複数並べている場合、同時に再生すると音が重なってしまいますが、これは空気読んで動いてくれます！（再生して試してみてね）
ツイッターの情報を表示できる「Twitter.js」と合わせて、tecra.info のページに利用したのですが、かわいくて使いやすいと思うのでメモメモ。

使い方の詳しい解説はこちら。
Embedded MP3 Audio Player

元はWordPress用のプラグインらしく、それっぽいことが書いてあります。
WP用プラグインとしての解説＆ダウンロードページはこちら。
Audio Player Wordpress plugin

普段からWPをいじっている方にとっては、もしかして、有名なのかな？
WPはテスト程度にしか触ったことがないので分からないですが......。

ともかく、WPでも何でもない静的なページにも組み込む方法があるとのこと。
解説をフィーリングで訳してみると、

• こちらのページから「audio-player.zip」をダウンロード
• 「player.swf（プレーヤー本体のファイル）」と「audio-player.js（組み込むJSファイル）」を取り出す
• サーバーに「audio」というディレクトリを作り、その中に、上記の2ファイルと読み込みたい音声ファイル（.mp3）をアップロード
• 解説ページ「Tutorial」の項目にある、13行にわたるスクリプトをコピー
• MP3プレーヤーを表示したいところにペースト

すれば、ページに音を組み込むことができます☆
スクリプトにあるファイルURLは、任意のものに書き変えてください。
ディレクトリは「audio」という名前でなければ動かないというわけではないので、そのあたりは適当に。

この時点で、確認できる全ブラウザでちゃんと動くよー、という方は、下記はスルーしていただけると嬉しいです。

というのも、解説によれば上記だけで動くはずなんですが、自分の動作確認環境では、FireFox3でしか完全に動きませんでした。
IE8、IE Tester6と7、Google Chrome3では、「ばよーん」と動くものの音声ファイルが再生できなかったのです。

で、ちょこまか探してたら見つけたのがここ。
WordPress Audio Player

「Audio Player 2.0 beta」ということで、ベータ版ですが、WPのプラグインとしての最新版をダウンロードすることができるようです。
ここの、「Download」→「Standalone player」という項目にある「Download (2.0 beta 6)」より、最新版の「player.swf」と「audio-player.js」をゲットして使ってみたところ、上記でうまく動かなかったブラウザでも、利用できるようになりました。

多用するとバリデーションの評価は低くなりますが、見た目がシンプルだし、コンパクトだし、idをふることで数を増やせるし......と、なんだかいろいろな場面で使えそうなので、ちょっと楽しみです。

ツイッターのつぶやきを表示させる方法はたくさんあるんですが、ブログパーツはデザインが好みでないことが多いです。
今、公式設定で作れるブログパーツは、枠の色を選べたりもするんですが、文字の大きさは変えられなかったりします（ちなみに自分のつぶやきで作ると、こんな感じ）。

そこで「つぶやきの内容だけ出したいんだけどなー」と、文字情報だけを取る方法を探してみたところ、

• つぶやきの内容（＋時間などテキスト情報）だけ表示したい
• 見た目を自由に制御できる
• ページに入れるのがカンタン
• 出力するソースが分かりやすい

というワガママを叶えてくれるスクリプトを発見しました！

スクリプトの説明ページはこちら。↓
Add Twitter to your blog (step-by-step)

英語ですが、短くて簡単な表現で書かれているので、フィーリングで使えました。
上記ページからざっくり手順を訳してみると、

• 「Hotlink from Google」という項目のスクリプトを head タグ内に記述
• あるいは、「Download latest Twitter.js」というリンクからJSファイルをダウンロードし、任意のサーバーにアップロードして、head タグ内に記述
• つぶやきを表示したい箇所に「Container HTML」という項目のスクリプトを記述
• 最後に、「Add the script」という項目のスクリプトを head タグ内もしくは body タグを閉じる直前に記述

するだけで利用できちゃいます！
（自分のアカウントを入れる箇所などがあるので、コピペした後、適当に書き換えてください）

「Template variables」という項目にある通り、各情報を取り出すための変数が設定されていて、「template」という属性にその変数の組み合わせを指定することで、ほしいテキスト情報を出力できます。
%text% がつぶやき自体の内容であったり、%time% がつぶやいた時間であったり、と名前を見るとなんとなーく何が出てくるかわかるので安心（違ってたら消せばいいしね）。
「template」には文字列としてHTMLタグを含められるので、classを使うなり何なりして、たいていの見た目は作れると思います。

もうひとつ、このスクリプトを「いいなー」と思った理由は、同じページに複数のアカウントのつぶやきを表示できること。
idを指定することで、いろんな人のつぶやきを一箇所にまとめて表示できます。
自前でフィードを読み込んで云々、というやり方なら、何の問題もないんですが、そっちは要勉強なのでした......。

そんなこんなで、実際動かしているページがこちら。
tecra.info
上部の「Information」のところに、2人分、つぶやき＋時間＋名前＋ツイッターURLを出力しています。

head タグ内もしくは body タグを閉じる直前に書くスクリプトを外部読み込みにできたら、もっとスッキリするなーと思っているところです。
あと、和訳はフィーリングなので、なるべく説明ページを普通に読んでください（ひどい）。

スクリプトの説明ページはこちら！↓
Add Twitter to your blog (step-by-step)

すみません、勉強サボってました（誰に言うともなく）。
prototype.jsのような色々なライブラリを利用するうえで、「なーんかよく分かんないんだよなー」と思うたびに勉強しようと思ったJavaScriptですが、すーっかりおサボりしていました。
やっぱり今年の疑問は今年のうちに解決しなきゃダメよね！ というわけで、以前購入していた「初めてのJavaScript」の続きを開いたところ、ようやくイベントハンドラやDOMについての解説が始まる章からでした。
どうも一番肝心なところでサボっていたようです......あいたた。やるぞー。

JavaScriptを使って（まぁ、言語は何でもいいんですが）、自力でウェブアプリケーションを作るとこまでいけたら絶対楽しいよね。

JavaScriptでフィード情報を取得！
先日利用する機会があったのにメモしていなかった、「Google AJAX Feed API」。
ブログやニュースサイトなどから最新情報を取得して表示したいときは、フィード（RSS）の情報を取得して～表示して～という方法がよく使われますが、その助けになります。
Googleアカウントが必要ですが、取得したいフィードのURLを指定すればぺろーんとフィード情報取得用のスクリプトを出力してくれるので、何ともお手軽です。
使ったサイトはこんな感じ→ Livehouse & Club PEACE（What's new!部分）

参考サイトもメモ。
http://code.google.com/apis/ajaxfeeds/index.html
http://zapanet.info/blog/item/986
記事の表示件数のデフォルトは4件で、どうやって変えるんだ～と思っていたのですが、改めて調べたらレビューもたくさんありました（何で気付かなかったんだろうというくらい）。

何か色々サボりすぎた。
「サボった」と表現するのは適切ではないんですが、心持ちとしてはそんな感じ。
もっと考えられるのに、考えなかった。
もっと頑張れるのに、頑張らなかった。
という事実を反省のためにメモ。
リラックマにも睨まれます。
最近、ローソンの店内がリラックマ祭りなので入るとほのぼのします☆ 苛立たしいくらい平和な顔。

「初めてのJavaScript」を始めてみた！
JavaScriptって、使おうと思えばたくさんライブラリもあるし、ちょっと頑張れば使えないこともないものの、きちんと理解していないので思うようにカスタマイズ出来なかったりします。
変数の宣言がどうだとか、if文がどうだとかは置いておくとして、そもそもどんな言語で、実際の「使いどころ」はどんな場合か......というところが頭からすっぽ抜けてるんですよね。普段JavaScriptが使われているサイトを見ているのに、サイト内のどの部分がJavaScriptで動いているのかは分からなかったりして。
そんなもやもやがずーっと払拭されないので、「初めてのJavaScript」を始めてみました。週明けに届いて、夜寝る前にちょびちょび読みつつ、例題作ってます。ちょっと楽しい！ まだ全然初めのほうだけど、もう始めて知ることがポロポロ出てきてます。
MTみたいなツールをいつもいつも使えるわけじゃないし、全て手作りでサイトを作るとなったときも臆せずに作りたいし。そのためにも、もう少しプログラムも自力で作れるようにならなきゃね、みたいな（←使ってみた）。