JavaScriptの最近のブログ記事

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

| | Comment(2) | Trackback(0) | | 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(0) | Trackback(0) | | 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) | Trackback(0) | | t

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

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

Google AJAX Feed API

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

今週は、

| | Comment(0) | Trackback(0) | | t

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

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


1

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

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

ご協力お願いします

ツイッターbotを作ってみたので、よろしければテストにご協力くださいませ。
詳細は下記の記事でご紹介しています! どうぞよろしくお願いします。

「夏目友人帳」の夏目くんが名前を返してくれるtwitter botを作りました

About rinatsuku.net

rinatsukuが日常、仕事、色々なことをメモってます。
おうちアロマの日誌>>

February 2010

Sun Mon Tue Wed Thu Fri Sat
  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            

Mobile rinatsuku.net

Mobile rinatsuku.net
Creative Commons License