jQueryとTwitterのAPIを使ったWindows 7アプリを作ってみた：楽しいWindows 7アプリ作成入門（5）

「あんなこといいな」「できたらいいな」というアイデアをWindows 7の表現力で具体的な“アプリ”という形にするには、どうすればいいのだろうか？具体的なコードやデモとともに一から教えます

» 2010年05月14日 00時00分公開

[軽部正耶，サムライワークス株式会社]

Twitterのフォロワーを画像を一覧表示して投稿もできる

　本稿では、Webデザイナ／プログラマの方でもテキストエディタとWebブラウザで簡単に作成できる、TwitterのAPIを使ったWindows 7デスクトップガジェット（以下、Windows 7ガジェット）の作り方を紹介します。Windows 7デスクトップガジェットの基礎については、記事「HTML＋JavaScriptで作れるWindows 7デスクトップアプリの基礎知識」を参照しておいてください。

　実装する機能は、2つあります。1つは、任意のTwitterアカウントを入力し検索ボタンを押すと、そのTwitterアカウントのフォロワー画像をjQueryプラグインを使って一覧表示する機能です。もう1つは、テキストボックスに入力した内容をTwitterのAPIに渡して、そのまま投稿できるアシスト機能です。

図1　本稿で作成するサンプル（画像をクリックすると、実際にサンプルが試せます）

4ステップでWindows 7ガジェットに

　手順としては、まず開発の前段階としてTwitterアカウントのフォロワー画像を一覧表示するのをサポートしてくれるjQueryプラグインをダウンロードします。ちなみに、本稿で使用するjQueryのバージョンは1.4です。jQuery自体は、GoogleのCDN経由で使用します。jQueryやjQueryプラグイン、CDNについて知りたい方は、下記記事を参照しておいてください。

連載インデックス「CSSの書き方も分かるjQueryプラグイン実践活用法」 - ＠IT via kwout

　次に、コーディングです。まず、Twitter投稿アシスト機能を作成します。最初の手順でダウンロードしたjQueryプラグインを使用し、Twitterパブリックタイムラインの一覧表示します。

　そして、任意のTwitterアカウントのフォロワーが検索できるように、検索フォームを作成します。最後に、Windows 7ガジェットとして動作させるための設定をします。

jQueryプラグインをダウンロード

　jQueryでフォロワー一覧を使うための準備をしておきましょう。「Downloads − twitter-friends-widget − Project Hosting on Google Code」から、jQueryプラグインをダウンロードします。2010年4月の原稿執筆時時点では、「jquery.twitter-friends-1.0.min.js」と「jquery.twitter-friends-1.0.js」というファイルがダウンロードできました。

　「jquery.twitter-friends-1.0.min.js」は、「jquery.twitter-friends-1.0.js」を圧縮しただけのものなので、どちらをダウンロードしても問題ありません。このファイルをローカルに保存しておきましょう。

　下記は、このjQueryプラグインの作成者のブログです。本稿で使うjQueryプラグイン以外のさまざまなTwitter用プラグインのデモを試すことができます。

Twitter Friends & Followers Widget - A jQuery Plugin! via kwout

ステップ【1】Twitter投稿アシストを作ろう

　まずは、入力フォームとボタンのみのシンプルなTwitter投稿アシストを作りましょう。

　Twitterには、「http://twitter.com/home」の後ろに「?status=任意の文字列」で投稿画面へ遷移し、投稿テキストボックスに「?status=」以降に指定した任意の文字列をはめ込んでくれるAPIがあります。この機能を使い投稿アシストを作ります。

　下記のサンプルソースを参考にフォームやテキストボックス、ボタンを書いてみてください。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">        
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="Content-Language" content="ja" />
    <meta name="author" content=""/>
    <meta name="copyright" content=""/>
    <meta name="keywords" lang="ja" content=""/>
    <meta name="description" lang="ja" content=""/>
    <title></title>
    <body>
        <form name="myForm">
            <input type="text" name="tweet" style="width:160px;">
            <input type="button" value="投稿" onclick="window.open('http://twitter.com/home?status='+document.myForm.tweet.value);">
        </form>
    </body>
</html>

　ポイントは、ボタンのonclick属性に上記TwitterのAPIにテキストボックスの内容を送るように記述することです。

　コーディングが終わったら、「任意の名前.html」で保存しWebブラウザから読み込んでみてください。関連付けがされているので、ダブルクリックで呼び出せるはずです。

　テキストボックスに適当な文字列を入力し投稿ボタンをクリックしてみてください。Twitterにログインしている状態で開いているWebブラウザ、もしくはログイン情報を保存されてる場合は、自分のアカウントの画面の投稿フォームにテキストボックスに入力した内容が表示されている画面に遷移するはずです。

　Twitterのログイン情報が保存されてない場合は、Twitterユーザー名とパスワードの入力画面に遷移するので、入力しログインすると、テキストボックスに入力した内容が表示されている画面に遷移するはずです。

【2】jQueryを使ってフォロワー画像を表示

　次に、メインになるフォロワーを一覧表示する部分を書きます。CDN経由でjQuery本体をインポートし、先ほどローカルにダウンロードした「jquery.twitter-friends-1.0.js」もインポートします。

　jQueryの「$(function(){})」を使い、初期ロード関数を定義します。初期ロード関数内で肝となるmake_widget関数を呼び出します。詳細は、下記サンプルコードをご参照ください。

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="Content-Language" content="ja" />
<style>
html,body{  
    width:240px;
    height: 280px;
}
body{
    padding:5px;
    color:white;
    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr="#000000",EndColorStr="#0000FF";
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" charset="utf-8"></script>
<script src="jquery.twitter-friends-1.0.js" type="text/javascript"></script>
<script charset="utf-8">
$(function(){
    make_widget("public_timeline");
    $("form").submit(function(){
        return false;
    });
});
function make_widget(id){
    $("div").remove();
    $("body").append(
        $("<div>")
        .attr("className", "widget")
        .append(
            $("<div>")
            .twitterFriends({
                username: id,
                tweet_image: 40,
                info: "",
                users: 16
            })
        )
    )
}
</script>
<body >
    <form name="myForm">
        <input type="text" name="tweet" style="width:160px;">
        <input type="button" value="投稿" onclick="window.open('http://twitter.com/home?status='+document.myForm.tweet.value);">
        <div id="friends"></div>
    </form>
</body>
</html>

　make_widget関数内を説明します。TwitterのIDと、初期ロード関数からのpublic_timelineをパラメータで渡してください。＜body＞タグに＜div＞タグをアペンドし、「.attr」でアペンドした＜div＞タグに属性を付与します。

　さらに、もう1回＜div＞タグをアペンドし、その中でtwitterFriends関数を呼び、パラメータを渡します。twitterFriends関数に渡すパラメータで、表示する一欄を制御します。twitterFriends関数のパラメータと説明を以下にリスト化します。


パラメータ	説明
username	フォロワー一覧を表示するTwitterのID
user_image	一覧に表示するフォロワー画像のサイズ
info	一覧上部に表示されるインフォメーションリンクを消すためにブランクをセット
users	一覧に表示するフォロワー画像の数

　最後に、整形と軽い装飾をしましょう。ガジェット表示部分の範囲、背景グラデーションをCSSで記述します。保存してWebブラウザで実行してみてください。Twitterのパブリックタイムラインのフォロワー画像が一覧形式で順番に表示できれば、ステップ【2】は終了です。

ステップ【3】検索したIDのフォロワー画像を表示

　パブリックタイムラインのフォロワー画像を表示できるようになると、完成まで後少しです。

　もう1つのテキストボックスと検索ボタンを作成し、検索ボタンのonclick属性でステップ【2】で作成したmake_widget関数を呼び出します。そして、パラメータにテキストボックスの内容を付与すれば、OKです。

<input type="text" name="twitterid" style="width:160px;">
<input type="button" value="検索" onclick="make_widget(document.myForm.twitterid.value);"><br>

　初期起動時は、パブリックタイムラインのフォロワー画像一覧が表示されます。テキストボックスに任意のTwitterIDを入力して検索ボタンを押すと、入力したTwitterIDのフォロワー一覧が表示されます。

ステップ【4】Windows 7ガジェット用にパッケージング

　最後に、いままではWebブラウザ上でしか動作していなかったものを、Windows 7ガジェットとしてパッケージします。

　ステップ【3】までに作成したHTMLファイルと「jquery.twitter-friends-1.0(.min).js」と「gadget.xml」というXMLファイルを同階層に置いてください。

　gadget.xmlはガジェットの情報を記述するXMLファイルです。詳細は、記事「HTML＋JavaScriptで作れるWindows 7デスクトップアプリの基礎知識」を参照してください。

　本稿のサンプルでは、下記のようにしています（アイコン画像を指定するため、「images」ディレクトリを設定しています）。

<?xml version="1.0" encoding="utf-8"?>
<gadget>
    <name>TweetAndListSearch</name>
    <version>1.0.0</version>
    <author name="軽部正耶">
        <logo src="images/icon.png"/>
    </author>
    <copyright>SAMURAI WORKS inc</copyright>
    <description>Twitter投稿サポート機能付きフォロワー一覧表示ガジェット</description>
    <icons>
        <icon height="64" width="64" src="images/icon.png"/>
    </icons>
    <hosts>
        <host name="sidebar">
            <base type="HTML" apiVersion="1.0.0" src="TweetAndListSearch.html"/>
            <permissions>Full</permissions>
            <platform minPlatformVersion="0.3"/>
            <defaultImage src="images/icon.png"/>
        </host>
    </hosts>
</gadget>

　同階層に置いたファイルをすべて選択し、ZIPに圧縮します。圧縮したファイルの拡張子を「.zip」から「.gadget」に変更します。