Javascript 記事の一覧

Twitter のウィジェットを任意のタイミングでロードする方法

技術 (Javascript) のお話です。

Twitter が公式サイトで配布しているウィジェットを使うと、自分のブログやサイトにタイムラインや検索結果を表示させることができます。

http://twitter.com/goodies/widgets

たとえばこんな感じ。

ですがこのウィジェット、Javascript が読み込まれたタイミングでタグを出力している(document.writeしている) ため、任意のタイミングで (非同期に) ロードすることができません。

で、なんかいい方法はないかなと思ってソースコードを眺めてみたら(*)、オプションに任意の id を文字列として指定してやることで、タグの出力をせずに指定された id に埋め込むようになっていました。

具体的には、

widget.js はあらかじめ読み込んでおく。 (<script src="http://widgets.twimg.com/j/2/widget.js"></script> は先に読み込まれるようにする)

埋め込みコードを任意のタイミングで実行する。このとき、 TWTR.widget()の引数に埋め込み先となる id を文字列で指定する。

/*
たとえば、 に埋め込む場合
*/
function loadTweets(){
  new TWTR.Widget({
    id: "tweets", // ← id パラメーターを追加する
    version: 2,
    type: 'profile',
    rpp: 4,
    interval: 6000,
    width: 250,
    height: 300,
    theme: {
      shell: {
        background: '#333333',
        color: '#ffffff'
      },
      tweets: {
        background: '#000000',
        color: '#ffffff',
        links: '#4aed05'
      }
    },
    features: {
      scrollbar: false,
      loop: false,
      live: false,
      hashtags: true,
      timestamp: true,
      avatars: false,
      behavior: 'all'
    }
  }).render().setUser('hajime').start();
}

以上で、任意のタイミングでウィジェットを実行させることができるようになります。

たとえば、動的に作成したノードにウィジェットを表示させたり、ウィジェットの作成を遅延実行させてページの読み込みを早くさせたい場合なんかに使えると思います。試してみてください。

であ、また。

(*) どっかにドキュメントがありそうですが、見当たらなかったので・・・

続きを読む "Twitter のウィジェットを任意のタイミングでロードする方法" »

Prototype.js 1.6 + Safariで onbeforeunloadに Event.observeを使うと確認ダイアログが表示されない

久々に技術系のお話。

DOM(window)のイベントに onbeforeunloadというものがあります。これは今開いているブラウザのウィンドウ(タブ)が閉じられる(または別のページに遷移、再読み込みされる)直前に発生するイベントで、編集中の内容があるかどうかなどをチェックして、実際にウィンドウを閉じてよいかを確認するダイアログを表示することができます。(例えば、Gmailでメールを編集中に再読み込みなどを行うと表示されるダイアログがこのイベントを使っています。)

このイベントは IE6以降、Firefox、Safari3以降でサポートされているようです。(Operaでは動作しませんでした。) ですが Safari3.1.1で、その確認ダイアログが表示されないという報告があり、色々と調べてみました。

続きを読む "Prototype.js 1.6 + Safariで onbeforeunloadに Event.observeを使うと確認ダイアログが表示されない" »

Photo Shows リニューアルとポートランドの写真追加

本日、フォトアルバムページ(いま命名)である「Photo Shows」のリニューアルを行いました。

また、同時に去年の 4月くらいから撮り貯めていたポートランドの写真の一部も追加してみました。

続きを読む "Photo Shows リニューアルとポートランドの写真追加" »

[javascript,prototype]innerHTMLに +=(文字列結合)するのはよろしくないみたい

まさかの連続開発ネタ。(一回、間があきましたが)

なんか prototype.jsの Element.extend()関数が IEでうまく動かないと思ったら、意外な事実がわかりました。

続きを読む "[javascript,prototype]innerHTMLに +=(文字列結合)するのはよろしくないみたい" »

script.aculo.us付属のユニットテスト(unittest.js)の使い方後編

前回に引き続き、script.aculo.usに付属のユニットテスト(unittest.js)の使い方です。

今回は、ベンチマーク関数やマウス、キーボードのシミュレート関数の使い方を解説していきます。

続きを読む "script.aculo.us付属のユニットテスト(unittest.js)の使い方後編" »

script.aculo.usのUnitTestの使い方前編

Javascript用のテストライブラリを探していたのですが、そういえば script.aculo.usについてるじゃん、と思い見てみるとなんか使えそう。
じゃあもう少し詳しく調べて・・・みようと思ったら、資料があんまりない。公式サイトのドキュメントもめっちゃ書きかけ。
しょうがないので、結局 script.aculo.us自身のテストを読むことに・・・

というわけで、せっかくなので UnitTestの使い方の解説をしてみようと思います。なんかここんとこ技術系の話題に向きが振れ気味。そしてまた 2回にわかれます・・・

続きを読む "script.aculo.usのUnitTestの使い方前編" »

Javascriptにおける配列と連想配列 prototype.js編その2

前回の続きです。

その2で終わりなので前編・後編のがよかったな、といまさら思いつつ。

続きを読む "Javascriptにおける配列と連想配列 prototype.js編その2" »

Javascriptにおける配列と連想配列 prototype.js編その1

IT戦記さんで、「Javascriptの配列と連想配列の違い」が解説されてました。

で、おなじみの Javascript用フレームワークの prototype.js(いつのまにか公式サイトがリニューアルされて、ドキュメント等がかなり充実してます)を使っててはまったポイントが以前あったのを思い出したので、ちょっと書いてみようと思います。というか、なんか prototype.jsの初歩的な解説になってるかもしれない・・・

というわけで、かなり久々の技術エントリ。プログラミングしない方にはごめんなさひ。

続きを読む "Javascriptにおける配列と連想配列 prototype.js編その1" »