"Javascript" タグがついている記事

  • 2008/02/14 20:19

    Googe Open Social調査

    今回は、Google Open Social ネタで行きたいと思います。

    Google CodeのOpen Socialページには、賛同している企業が続々と公開され、それに関するニュースも頻繁に見るようになりました。

    個人的にはmixi以外の日本企業が無いからなのか、あるいは実際にサービスとして存在しているものが無いせいなのか、いまいち全体像というかメリットが実感できておりません。
    そこで今回は、具体的にどのようなことができるのか調査してみました。

    Google Open Social とは、各SNSが持つのデータを外部に提供することを目的としたAPIの仕様をまとめたものです。

    プロフィール情報
    友達情報
    活動情報

    また、Google Open Socialの利用方法は、以下の２つがあります。

    上記情報をOpen Socialに準拠したAPIを介し、データを提供する側（コンテナ）
    APIからデータを取得し、サービスを作る側（デベロッパ）

    今回はデベロッパの立場から、orkutが提供するAPIを使ったチュートリアルをやってみました。
    ざっくりとした手順は、以下のようになります。

    orkutに登録
    orkutのテスト環境(sandbox)に登録
    sandbox上で友達関係を構築する
    GGEにてOpen Socialガジェットを作成する
    sandbox上のマイページに、ガジェットを追加する

    1.orkutに登録
    orkutは招待制ではないので、登録はこちらから簡単に行えます。（Googleアカウントが必要です。）

    2. sandboxに登録
    現時点では、APIはsandbox上でしか提供されていないので、こちらから利用する為の申請を行わなければなりません。僕の場合、承認されるまでに1日かかりました。。

    3. 友達情報を取得するAPIを利用するため、sandbox上で友達関係を構築する。
    こちらのフォーラムで、友達募集中のイケメン達がいっぱいいるので、Friend登録しまくります。
    実際に登録依頼をしてみましたが、遠い外国の人たちが多いためか、いまだ承認してくれた人はいません。悲しい。。だれか友達になってください。

    4. ガジェット作成
    orkut上で動作するガジェットは、Googleガジェットと同一の仕様で動きます。よって、前回のエントリと同様に、GGE上でXMLを記述していく形になります。
    先述のようにまだ友達がいないので、とりあえず自分の情報を出力するAPIだけを用いることにしました。

    <?xml version=”1.0″ encoding=”UTF-8″ ?>
    <Module>
     <ModulePrefs title=”My Data”>
       <Require feature=”opensocial-0.6″/>
     </ModulePrefs>
     <Content type=”html”>
     <![CDATA[
     <script type="text/javascript">
      function getData() {
        document.getElementById('message').innerHTML = 'Requesting my data...';
        var req = opensocial.newDataRequest();
        req.add(req.newFetchPersonRequest('OWNER'), 'owner');
        req.send(showMyData);
      };
      function showMyData(dataResponse) {
        var owner = dataResponse.get('owner').getData();
        var html = 'My name is ' [...]

  • 2008/02/06 20:30

    Googleガジェットを作ってみる

    皆さんはブラウザのスタートページを何にしていますか？　
    私は以前MyYahoo!を使っていましたが、最近はiGoogleを利用しています。
    iGoogleは「ガジェット」と呼ばれるブラウザ上で動作するミニアプリケーションをWebページ上に配置し、自分好みのページに仕立て上げることができます。

    また、作成したガジェットは、以下のように簡単にブログに貼付けることができます。
    今回はそのガジェットの作り方を書いていきます。

    まずは環境を整えましょう。

    iGoogle上に、GGE（Google Gadget Editor）と呼ばれるガジェット開発用ガジェットを登録します。

    ここのページ下部の、「To add GGE to your iGoogle page, click here:」下部のボタンを押せば完了です。

    おおお、追加されました。ただし、iGoogle上のガジェットは領域が狭いので好みに応じて使い分けましょう。

    追加されたGGEを見ると、Hello Worldサンプルコードが登録されています。Previewタブをクリックするときちんと表示されるのが分かりますね。

    Editorタブに戻ってソースを見ると、シンプルなXMLで記述されています。基本は下記のCDATA部分に処理を記述していきます。
    <Content type=”html”><![CDATA[
    ** ここにHTMLとCSSとJavascriptを記述する **
    ]]></Content>

    では簡単なガジェットを作ってみましょう。自分のはてなブックマークの最新5件を表示することにします。

    下記のソースをeditor部分にコピペしてみてください。
    ソース中の*****部分はご自分のものにするのをお忘れなく。
    <?xml version=”1.0″ encoding=”UTF-8″?>
    <Module>
        <ModulePrefs
         title=”マイハテブ”
         author=”***** 自分の名前 *****”
         author_email=”***** メールアドレス *****” />
        <Content type=”html”>
            <![CDATA[
            <style> #content_div { font-size: 90%;  margin: 5px; background-color: #FFFFBF;} </style>
            <div id=content_div></div>
            <script type="text/javascript">
                // _IG_で始まる関数がGoogleガジェットAPIです。
                _IG_FetchFeedAsJSON("***** ここに自分のはてブRSS *****",
                [...]