JavaScriptの最近のブログ記事

フィード取得用ライブラリについて試したときのメモまとめ。

| | Comment(0) | | t

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

試している最中のTwitterログ(日付無視)

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

再生&停止時のエフェクトがかっこいい「Embedded MP3 Audio Player」

| | Comment(2) | | t

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

※音源は 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をふることで数を増やせるし......と、なんだかいろいろな場面で使えそうなので、ちょっと楽しみです。

ツイッターの最新情報を思い通り(?)に表示できる「Twitter.js」

| | Comment(2) | | t

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


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

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

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

スクリプトの説明ページはこちら。↓
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)

「初めてのJavaScript」を再開

| | Comment(0) | | t

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

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

Google AJAX Feed API

| | Comment(0) | | t

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件で、どうやって変えるんだ~と思っていたのですが、改めて調べたらレビューもたくさんありました(何で気付かなかったんだろうというくらい)。

12

↓他にはこんな記事を書いてます↓

  • Books(32):読んだ本の紹介と感想。
  • CustomizeLog(48):このブログのカスタマイズ記録など。
  • DailyTalk(73):日常の覚え書き。
  • JavaScript(6):JavaScriptについて勉強したこと。
  • PHP(5):PHPについて勉強したこと。
  • rinatsuku.net?(1):このブログについて。