コック長さんのブログ

MozStorage

Feb 12, 2007

今回は少し上級者向けです。一般的にマッシュアップサイトではユーザーのデータを保存するのにデータベースを使います。例えばレストランガイドサイトに書いたコメントや、もっと身近な所で言うとあなたのブログの記事やコメント(このブログが使っている VOX もですが)はすべてデータベースによって管理保存されいます。ブログなどで使われるデータベースはウェブデータベースとも言われ殆ど場合 SQL 言語によって操作します。この SQL 言語は規格化されているため、一度習得すれば Oracle や MySql あるいは Microsoft SQL Server などソフトに関係なく使う事ができます。

さてタイトルにある MozStorage とは何でしょうか? これは Firefox 2 に組み込まれたデータベース機能の事です。Firefox そのものにデータベース機能があれば、例えばオンラインカレンダーのデータを MozStorage に保管することでインターネットに接続できないような状況でも Firefox でカレンダーをチェックすると言った事もできますし、ブログのランキングや参照数などの情報を MozStorage に保存してランキングの推移を見ると言った機能を作ることが出来るかもしれません。

MozStorage は SQLite と呼ばれる組み込み用の軽量なデータベースを採用しています。このデータベースは PHP でも既に採用され Oracle や MySql などの本格的なデータベースに比べると見劣りする部分がある物の、メモのようなテキストデータを保存する程度であれば十分な性能を発揮します。

今回のサンプルもエディタ等で HTML 形式で任意の名前(この記事では storage.html とします)で保存し、拡張機能の content フォルダに入れ chrome://mashuprecipe/content/storage.html を Firefox のロケーションバーに入力して実行してください。また後述しますが Firefox で MozStorage データベースを作成するとプロファイルフォルダ(ブックマークなどのユーザー情報が保存されているフォルダ)に sample.sqlite というファイルが作成されます。もし上手く動作しない場合などはそのファイルを削除してください(プロファイルフォルダには複数の .sqlite 拡張子のファイルがありますが、決して sample.sqlite 以外の .sqlite 拡張子のファイルを削除しないでください)。また SQLite Database Browser などの調査ツールを使う事をお勧めします。

<html>
    <head>
        <script type="application/x-javascript">
            function storage(){
                var file = Components.classes["@mozilla.org/file/directory_service;1"]
                             .getService(Components.interfaces.nsIProperties)
                             .get("ProfD", Components.interfaces.nsIFile);
                file.append("sample.sqlite");
                var storageService = Components.classes["@mozilla.org/storage/service;1"]
                            .getService(Components.interfaces.mozIStorageService);
                var Connect = storageService.openDatabase(file);
                if(!Connect.tableExists("foo")){
                    Connect.createTable("foo","a INTEGER");
                }
                Connect.executeSimpleSQL("INSERT INTO foo VALUES (1)");
                var storageWrapper = Components.classes["@mozilla.org/storage/statement-wrapper;1"]
                                                .createInstance(Components.interfaces.mozIStorageStatementWrapper);

                var statement= Connect.createStatement("SELECT * FROM foo");
                storageWrapper.initialize(statement);
                while (storageWrapper.step()) {
                      document.getElementById('display').textContent=storageWrapper.row["a"];
                }
            }
         </script>
    </head>
    <body>
        <input type="submit" onclick="storage();" >
        <div id="display"></div>
    </body>
</html>

Firefox で MozStorage を使用するには XPCOM と呼ばれる Firefox の API を使う必要があります。API と聞くと小難しいイメージがあるかもしれませんが、あくまでも形式的あるいは手続き的な物なので MozStorage やファイルを操作する時はこういうおまじないを唱えるんだ程度に思ってかまいません。

var file = Components.classes["@mozilla.org/file/directory_service;1"]
                .getService(Components.interfaces.nsIProperties)
                .get("ProfD", Components.interfaces.nsIFile);
file.append("sample.sqlite");
var storageService = Components.classes["@mozilla.org/storage/service;1"]
                                .getService(Components.interfaces.mozIStorageService);
var Connect = storageService.openDatabase(file);

MozStorage を使用するにはファイル操作をする必要があります。Firefox には nsIFile と言うファイル操作を行うための API が用意されているので file に nsIFile の機能を追加します。ここで注目して欲しいのは太字で表示されている ProfD という部分です。これはプロファイルフォルダ(履歴やブックマークなどのユーザー情報が保存されているフォルダです)内を操作する事を表しています。ですから file には Firefox のプロファイルフォルダを操作するための機能が追加されることになります。

次に MozStorage で使われている SQLite はファイル単位でデータベースを管理するため SQLite ファイルを追加します。これには append という機能を使用します。append は指定されたファイル(サンプルの場合は sample.sqlite)が指定されたフォルダ内に存在しない場合はファイルを作成し file に入れられます(ファイルが既に存在した場合は file に入れられます)。

そしてデータベースへ接続するための機能(mozIStorageService)を storageService に追加します。この機能を追加すると storageService で openDatabase という機能が使えるようになります。openDatabase とは名前のとおりデータベースファイルを開くための機能で file を指定することで sample.sqlite を開き Connect に入れます。これで Connect にはデータベース(sample.sqlite)を操作する為の機能が備わります。

データベースは内部にテーブルと呼ばれる表計算ソフトで言うところのワークシートのようなリストによってデータを管理しています。そしてデータベースファイルを作成した時点では、データベース内にテーブルはありません。新しく買ったばかりのノート同じで空っぽの状態なわけです。そこで最初にデータベースを使う時にテーブルを作成する必要があります。

if(!Connect.tableExists("foo")){
Connect.createTable("foo","a");
}
Connect.executeSimpleSQL("INSERT INTO foo VALUES (1)");

まず tableExists を使用して foo というテーブルが既にあるかを確認し、もしなければ createTable を使ってテーブルを作成します。createTable の一番目の引数にはテーブル名 (サンプルでは foo)を、二番目の引数にはテーブルの列の名前と保存形式(SQLite は一般的な SQL を使用したデータベースソフトと違いデータ型を指定する必要はありませんが、念のために指定する事をお勧めします)を入力します(サンプルでは a INTEGER になっていますが、複数の列を作成する場合はカンマで区切ってください)。

そして executeSimpleSQL によってデータをテーブルに追加します。executeSimpleSQL は指定された SQL を実行できるので、SQL に慣れている人はテーブルを作成するのに createTable を使うよりも executeSimpleSQL を使ってテーブルを作るほうがスムーズかもしれません。

次にデータベースに保存されたデータを読み込んで毎度おなじみの display に表示します。

var storageWrapper = Components.classes["@mozilla.org/storage/statement-wrapper;1"]
.createInstance(Components.interfaces.mozIStorageStatementWrapper);
var statement=Connect.createStatement("SELECT * FROM foo");
storageWrapper.initialize(statement);
while (storageWrapper.step()) {
document.getElementById('display').textContent=storageWrapper.row["a"];
}

まず StatementWrapper という機能を storageWrapper に読み込みます。この機能を使うことでデータベースに保存された情報を列に付けられた名前で取り出すことが出来ます。次に createStatement を使って SQL でデータベースを検索し、その検索結果を statement に入れます。そして storageWrapper の initialize 機能を使って statement を storageWrapper に組み込みます。これで列の名前で情報を取り出す準備が整いました。

仕上げとして storageWrapper.step() を使って検索結果の数だけループ処理を行います。テクノラティの Web API を取り上げた時には for 文を使って配列の数だけループさせて情報を取得していましたが、step() を使った方法の場合は配列を意識する事無く情報を取得する事が出来ます。そして storageWrapper.row["a"] で a という列に入っている情報を display に入れます。row とは日本語で「列」と言う意味で、このサンプルの場合は文字通りデータベースの a の列に入っている情報を display に入れてください。という処理を行っています。もし b という列を作り、その列の情報が欲しい場合は storageWrapper.row["b"] とします。

今回のサンプルは単に display にデータベース内の情報を表示するだけでした、そのためにデータベース内に複数の情報が存在しても、その情報を追加するのではなく上書きしているので、何個の情報があるのかわからなかったりします。このサンプルを元に appendChild などを使って自分で改造して見ましょう。

Cosmos を使う

Feb 9, 2007

Cosmos とはテクノラティが提供する URL 検索 API です。SearchQuery のようにただ検索結果を知らせるのではなく、検索したブログの情報(例えばリンクをしている数やされている数など)を知ることできます。前回とやっている事は同じですが若干機能を追加しているので、前回作った物に組み込んで見るのも良いかもしれません。

今回のサンプルもエディタ等で HTML 形式で任意の名前(この記事では cosmos.html とします)で保存し、拡張機能の content フォルダに入れ chrome://mashuprecipe/content/cosmos.html を Firefox のロケーションバーに入力して実行してください。

<html>
    <head>
        <script type="application/x-javascript">
            function cosmos(){
                var key='9fa156ebe425c64d796956f8f355c4a8';
                var lang='ja';
                var blog='http://mashuprecipe.vox.com/';
                var url ='http://api.technorati.com/cosmos?url='+blog+'&key='+key+'&language'+lang;
                var webFeed='';

                var xmlDoc = document.implementation.createDocument("", "", null);
                xmlDoc.async = false;
                xmlDoc.load(url);

                var item=xmlDoc.getElementsByTagName("item");
                while (document.getElementById("display").firstChild) {
                    document.getElementById("display").removeChild(document.getElementById("display").firstChild);
                }

                for(var i = 0; i <= item.length; i++) {
                    var aTags =document.createElement("a");
                    aTags.textContent=item[i].getElementsByTagName("name")[0].textContent;
                    aTags.href=item[i].getElementsByTagName("nearestpermalink")[0].textContent;
                    aTags.target='_blank';

                    var blogInfo =document.createElement("div");
                    blogInfo.textContent='ブログの参照回数: '+item[i].getElementsByTagName("inboundlinks")[0].textContent;

                    var rss =document.createElement("a");
                    if(item[i].getElementsByTagName("rssurl")[0].textContent){
                        rss.textContent='[フィード]';
                        rss.href=webFeed+item[i].getElementsByTagName("rssurl")[0].textContent;
                    }

                    var blockquoteTags =document.createElement("blockquote");
                    blockquoteTags.textContent=item[i].getElementsByTagName("excerpt")[0].textContent;

                    var divTags =document.createElement("div");
                    divTags.appendChild(aTags);
                    divTags.appendChild(rss);

                    document.getElementById("display").appendChild(divTags);
                    document.getElementById("display").appendChild(blogInfo);
                    document.getElementById("display").appendChild(blockquoteTags);
               }
            }
         </script>
    </head>
    <body>
        <input type="submit" onclick="cosmos();" >
        <div id="display"></div>
    </body>
</html>

前回と違う部分はすべて太字にして表示しています。まず前回は search() というプログラムでしたが今回は cosmos() と言う名前にしています。

var blog ='http://mashuprecipe.vox.com/';
var url ='http://api.technorati.com/cosmos?url='+blog+'&key='+key+'&language'+lang;
var webFeed ='';

まず blog には検索するブログのアドレスを入力します。サンプルではこのブログが指定されていますが、あなたがブログを持っているのなら自分のブログのアドレスを入力してみましょう。次に url ですがここには Web API のアドレスを入れます。今回は Cosmos を使うので http://api.technorati.com/cosmos? にします。最後に webFeed には普段あなた使用しているウェブフィードリーダーの登録用のアドレスを入れます。はてなの場合なら http://r.hatena.ne.jp/append/ 。Bloglines なら　http://www.bloglines.com/sub/ と入力します。

次に表示部分の処理を見てましょう。並び順が違いますがやっている事は前回と同じです。

var blogInfo=document.createElement("div");
blogInfo.textContent='ブログの参照回数: '+item[i].getElementsByTagName("inboundlinks")[0].textContent;
var rss =document.createElement("a");
if(item[i].getElementsByTagName("rssurl")[0].textContent){
rss.textContent='[フィード]';
rss.href=webFeed+item[i].getElementsByTagName("rssurl")[0].textContent;
}
var blockquoteTags=document.createElement("blockquote");
blockquoteTags.textContent=item[i].getElementsByTagName("excerpt")[0].textContent;

blogInfo にブログの参照回数を表示する為の DIV タグを作って入れます。そして作った DIV タグにテクノラティから送られてきた参照回数の情報(inboundlinks)を入れます。

次にフィードの登録機能をつけます。まず登録用のリンクを作る必要があるので、rss に A タグを作ります。そしてテクノラティから送られてきた検索結果にフィードの情報があるのを確認した後に A タグの表示部分(textContent)とリンク先(href)を設定します。リンク先を設定する時にフィードのアドレスの前に登録先の URL が入っている webFeed を追加します。

最後に検索されたブログの記事のダイジェストを表示します。今回は blockquote タグを作って blockquoteTags に入れていますが、あなたの好みのタグに換えてみるのも良いかもしれません。そして表示部分(textContent)にテクノラティから送られ来る記事のダイジェスト(excerpt)を入れます。

そして display に appendChild を使って追加します。

var divTags =document.createElement("div");
divTags.appendChild(aTags);
divTags.appendChild(rss);

document.getElementById("display").appendChild(divTags);
document.getElementById("display").appendChild(blogInfo);
document.getElementById("display").appendChild(blockquoteTags);

フィードの追加用のリンクはブログのタイトルの横に表示するので divTags に rss を追加します。そしてブログのタイトル、ブログの参照回数、記事のダイジェストの順番で表示するので divTags、blogInfo、blockquoteTag の順番で display に追加して完成です。

SearchQuery でマッシュアップ

Feb 4, 2007

実際にテクノラティの API (SearchQuery) を使ってマッシュアップをしていきましょう。今回のサンプルはエディタ等で HTML 形式で任意の名前(この記事では search.html とします)で保存してください。そして以前に作った拡張機能の content フォルダに入れ chrome://mashuprecipe/content/search.html を Firefox のロケーションバーに入力して実行してください。

<html>
    <head>
        <script type="application/x-javascript">
            function search(){
                // セクション1
               var key='[ここにあなたの API Key を入力してください]';//あなたのAPIKey
                var query=document.getElementById('input').value.replace(/\s/g,'+');
                var lang='ja';
                var url = 'http://api.technorati.com/search?key='+key+'&query='+query+'&language='+lang;

                // セクション2
               var xmlDoc = document.implementation.createDocument("", "", null);
               xmlDoc.async = false;
               xmlDoc.load(url);
                var item=xmlDoc.getElementsByTagName("item");

                // セクション3
               while (document.getElementById("display").firstChild) {
                   document.getElementById("display").removeChild(document.getElementById("display").firstChild);
               }
                // セクション4
               for(var i = 0; i <= item.length; i++) {
                   var aTags =document.createElement("a");
                   var divTags =document.createElement("div");
                   aTags.textContent=item[i].getElementsByTagName("title")[0].textContent;
                   aTags.href=item[i].getElementsByTagName("permalink")[0].textContent;
                   divTags.appendChild(aTags);
                   document.getElementById("display").appendChild(divTags);
               }
            }
         </script>
    </head>
    <body>
        <input type="text" id="input">
        <input type="submit" onclick="search();" >
       <div id="display"></div>
    </body>
</html>

今回のサンプルは [実行] ボタンをクリックすると input という ID のテキストボックスに入力された文字列をテクノラティを検索して display という ID の DIV タグ (以後 display) の中に検索結果(リンクの一覧)を表示します。

セクション1
ここでは Web API を使うにあたっての下準備をします。

var key='[ここにあなたの API Key を入力してください]';
var query=document.getElementById('input').value.replace(/\s/g,'+');
var lang='ja';
var url = 'http://api.technorati.com/search?key='+key+'&query='+query+'&language='+lang;

まず key という変数にあなたの API Key を入れます (斜体になっている部分を消してあなたの API Key を入力してください)。そして query という変数に前回のサンプルのようにテキストボックス (input) に入力した文字列を入れています。ただ前回と違い value の後ろに replace と言う物が追加されています。replace とは指定した文字列を置き換える機能です。テクノラティの API ドキュメントによると複数の検索ワードを使用するには '+' で区切るようにとあるので、一般的な検索エンジンと同じように空白で複数の検索ワードを指定できるように、テキストボックス内の空白を '+' と置き換えます。そして url に Web API への URL を入れて下準備は終わりです。(今回は触れませんが lang には検索対象の言語を設定します。日本語の場合は ja です。)

セクション2
次にテクノラティの Web API と通信を行います。今回は一般的な Ajax では無く DOM を使って通信をします。この方法は大きなデータを扱うには不向きですが、XML などの小さなデータの場合はプログラムを簡潔に出来て分りやすいと言うメリットがあります。

var xmlDoc = document.implementation.createDocument("", "", null);
xmlDoc.async = false;
xmlDoc.load(url);
var item=xmlDoc.getElementsByTagName("item");

1行目では xmlDoc と言う名前の変数を XML 形式を入れるための器にする手続きをしています。これを行うことで xmlDoc に Web API と通信するための機能が付与されます。2行目の async は通信の同期方法を設定します。今回は同期通信を使うので 'false' (無効) にします。そして 3行目の load で通信を行います。セクション1 で作った url を通信先に設定しこれで Web API との通信は完了です。そして xmlDoc の中にはテクノラティからの検索結果が XML 形式で入れられます。

テクノラティの API では4行目では検索の結果を item タグに入れる事になっているので、getElementsByTagName を使って、xmlDoc に収納されている item タグを検索して item という変数に入れます。

セクション3
このセクションでは検索結果が表示される DIV タグの中を消去する処理を行います。なぜこの処理が必要ですか? 仮に 'Firefox' と検索した後に 'Thunderbird' を検索すると同じ画面に 'Firefox' と 'Thunderbird' の両方の検索結果が表示されてしまうからです。

while (document.getElementById("display").firstChild){
document.getElementById("display").removeChild(document.getElementById("display").firstChild);
}

ここでは新たに firstChild と removeChild という機能が出てきます。firstChild とは getElementById で検索したタグの中にある一番最初のタグを取得します。そして removeChild とは getElementById で検索したタグの中にあるタグを削除する機能です。つまりこのセクションでは display の中にタグがある限り処理を行い続け一番最初に発見したタグを削除し続ける事で display の中を空にします。

セクション4
このセクションでは検索結果の表示処理を行っています。

for(var i = 0; i <= item.length; i++) {
    var aTags=document.createElement("a");
    var divTags=document.createElement("div");
    aTags.textContent=item[i].getElementsByTagName("title")[0].textContent;
    aTags.href=item[i].getElementsByTagName("permalink")[0].textContent;
    divTags.appendChild(aTags);
    document.getElementById("display").appendChild(divTags);
}

まず 1行目では item.length と言うのがあります。セクション2で xmlDoc に収納されている item タグを検索して、すべて item という変数に入れましたが、item.length は item という変数の中に item タグが何個あるかを知らせています。つまり item タグの個数分だけ処理を繰り返しています。

次にcreateElement という物が出てきます。これは任意の指定されたタグを作る機能です。ここでは 'a' と 'div' を作っていますが 'img' も作ることができます。そしてそれぞれ出来たタグを aTags と divTags という変数に入れます。

そして aTags (a タグ) の表示部分 (textContent) には検索されたブログのタイトル (title) とリンク先 (href) にはブログの記事へのアドレス (permalink) を設定します。この処理は item タグと同じように getElementsByTagName を使いますが、注意しないといけないのは、document から検索するのではなく item[i] から検索しているという事です。こうする事で getElementsByTagName による検索の範囲を狭めより的確に XML からデータを取得できるようにします。そして設定した a タグ (aTags) を div タグ (divTags) の中に入れます。これを行うには appendChild と言う機能を使います。この機能は removeChild とは逆に指定したタグの中に任意のタグを追加するものです。最後の二行では div タグ (divTags) の中に a タグ (aTags) を追加した後、display に先ほど作った div タグ (divTags) を追加しています。

このようにタグの操作をプログラムで行うことで簡単に Web API を使って自分だけのサービスを作る事ができました。このサンプルは初歩的な機能を収めているに過ぎませんが、このサンプルを雛形にしてあなたオリジナルの機能を追加してみましょう。

DOM を使ってマッシュアップ

Feb 3, 2007

マッシュアップの材料となる XML 形式のデータを調理するには DOM を使用します。DOM は Javascript を使って HTML や XML を操作する方法の規格です。DOM を使えば簡単に HTML の書き換えができます。以下はテキストボックスに入力された文字を display という ID が割り当てられた DIV タグに表示する簡単なコードです。

<html>
    <head>
        <script type="application/x-javascript">
            function test(){
                document.getElementById('display').textContent=document.getElementById('input').value;
            }
         </script>
    </head>
    <body>
         <div id="display"></div>
        <input type="text" id="input">
        <input type="submit" onclick="test();" >
    </body>
</html>

このサンプルでは [送信] ボタンを押すと test() というプログラムを呼び出して input というテキストボックスの内容を display という DIV タグに入れます。ここで getElementById というのが出てきます。これはなんでしょうか?

getElementById とは ID を指定すると、その ID を使っているタグ (要素) を探し、そしてそのタグを制御する機能です。そしてこれは DOM の根幹を成す機能と言えます。

getElementsByTagName

同様の機能に getElementsByTagName があります。getElementById と違う点としてタグに割り当てられた ID では無くタグの名前で検索します。例えば DIV タグを探したい場合は

document.getElementsByTagName('div')

となります。また getElementById は getElement ですが getElementsByTagName は getElements と複数形になるので入力ミスに注意しましょう。また ID と違ってタグだと同じタグを何度も使います。例えば最初に出てくる A タグと一番最後に出てくる A タグをどうやって区別するのでしょうか? getElementsByTagName は発見した順番に 0 から数字を割り振り、この数字でそれぞれのタグを識別します。一番最初の DIV タグを使いたい場合は

document.getElementsByTagName(’div’)[0]

となり、太字の部分の数字を増やす事でタグを自由に利用できます。

タグの機能

さてサンプルコードを見ると getElementById の後ろに textContent や value と言った文字があります。これはなんでしょうか? これは検索したタグに備わっている機能(プロパティ)を表しています (タグにどんな機能が備わっているかは各自で調査する必要がります)。例えば textContent はタグに表示される文字列を、value はテキストボックスの表示機能をそれぞれ担っています。つまりサンプルコードにある

document.getElementById('display').textContent=document.getElementById('input').value;

と言うのは value (テキストボックスに入力された内容) を textContent (DIV タグに表示される文字列) に入れてくださいと言う意味になります。ここで上げた DOM の例は基礎的な事ですが getElementById とgetElementsByTagName の使い方を覚えることで簡単にマッシュアップする事ができます。

MashUp 開始

Feb 3, 2007

拡張機能の作成方法を習得した所で早速マッシュアップを開始しましょう。今回はテクノラティジャパンの API を使います。テクノラティの API は利用するには無料の会員登録が必要になるので、まだ会員になっていない場合はまず会員登録を行いましょう。

会員登録を終了したら、あなたの API キーを調べます。API キーはこのページの "Your Technorati API key is" という部分に続く太字の数字とアルファベットの羅列があなたの API キーです。

テクノラティにはタグ検索や自分のブログに誰がリンクを張っているかを調べる Cosmos と言った機能がありますが、今回は検索ワードを使ってブログを検索する Search API を使います。試しに以下のアドレスをブラウザのロケーションバーに入力して開いてみてください。

http://api.technorati.com/search?key=[あなたの API キーを入力してください]&query=firefox&language=ja

テクノラティで Firefox を検索したのと同じ内容が XML 形式で表示されます。これがあなたのマッシュアップの材料になります。ではこの材料をどうやって調理するのでしょうか?

拡張機能を作る

Feb 2, 2007

拡張機能を作るには以下のソフトが必要です。

Firefox
UTF-8n に対応したエディタ (xyzzy 等)
ZIP の圧縮ソフト (7-Zip 等)

そして次に以下のファイルとフォルダを用意します

content という名前のフォルダ
install.rdf という名前のファイル
chrome.manifest という名前のファイル

以上のものが用意できたら早速拡張機能を作ってみましょう。

Step 1 - install.rdf
install.rdf は拡張機能の名前や Firefox のどのバージョンで使用できるか等の情報を XML 形式で以下のように記述します。

<?xml version="1.0"?>
<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#">
    <Description about="urn:mozilla:install-manifest">
        <em:id>mashuprecipe@vox.com</em:id>
        <em:name>MashUp Recipe</em:name>
        <em:version>0.1</em:version>
        <em:description>MashUp Recipe</em:description>
        <em:creator>コック長</em:creator>
        <em:type>2</em:type>
        <em:targetApplication>
            <Description>
                <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
                <em:minVersion>2.0</em:minVersion>
                <em:maxVersion>2.0.0.*</em:maxVersion>
            </Description>
        </em:targetApplication>
    </Description>
</RDF>

Step 2 - chrome.manifest
chrome.manifest は Firefox にあなたの作ったプログラムを登録するの使用し、今回は以下のように記述します。

content mashuprecipe file:chrome/content/

Step 3 - content フォルダ
content フォルダにはあなたの作った HTML や Javascript ファイルを入れます。

Step 4 - 圧縮
そして install.rdf と chrome.manifest そして content フォルダを Zip で圧縮します。そして作成した圧縮ファイルの拡張子を .zip では無く .xpi に変更します。

これで拡張機能は完成しました。後は Firefox に作成したファイルをドラッグアンドドロップしてインストールします。

では、どうやってプログラムを表示するのでしょうか? 私たちはホームページを表示するとき http:// から始まる文字列を入力します。それと同じように Firefox で拡張機能内のプログラムにアクセスをする場合は chrome:// から始まる文字列を入力します。今回作成するプログラムの場合 chrome://mashuprecipe/content/○○.html で content フォルダに入れた HTML ファイル等を表示できます。

Firefox でマッシュアップする理由

Feb 1, 2007

一見便利に見える Ajax にも大きな問題があります。最大の問題としてクロスドメインが上げられます。Ajax ではセキュリティー上の問題から同一のドメイン内でしか通信できないよう制限されています。

例えば www.mozilla-japan.org に置かれた Javascript から www.mozilla-japan.org 内に置かれたページへ通信する事はできますが、www.mozilla-japan.org に置かれた Javascript から www.vox.com 内に置かれたページへは通信できません。

これは Ajax の普及の当初から問題点とされ、現在では優秀な開発者が様々解決策を考案していますが、一般的に同じドメイン内に置いた Perl 等のサーバーサイドプログラムを経由してデータをやり取りします。

この方法の場合、あなたは Perl 等のサーバーサイドプログラムが使えるサーバーのレンタルサービスと契約する必要があり、月数百円とはいえ出費が必要ですし、さらに Perl 等の新しい言語の取得も必要になるかも知れません。

Firefox の拡張機能を使ってマッシュアップを行えば異なるドメイン間の通信 (クロスドメイン) の通信も自由に行えるため、この問題に頭を悩める必要はありません。HTML と Javascript の基本的な知識に加えて、ほんのわずかな好奇心があれば、簡単に作る事ができます。また Mozilla Developer Center には開発に役立つ豊富な情報とサンプルコードが収録されています。

What is MashUp

Feb 1, 2007

マッシュアップとは元々 Remix 曲のように複数の音楽を混ぜて 1つの新しい楽曲を作る手法の事をいいます。このように既存のものから新しいものを作る事から、複数のウェブサービスを使って新しいサービスを作る事を「マッシュアップする」と言います。

マッシュアップには主に次のふたつの物を必要とします:

Web API
Ajax (Asynchronous JavaScript and XML)

Web API
Web API とはインターネット越しに使うプログラムです。例えばテクノラティには "キーワード検索" という Web API があります。この API に検索したいワードを送ると、それを RSS 等の XML 形式のデータとして送り返してきます。そして送り返されたデータを自分のプログラムで加工して使います。またテクノラティだけでなく大勢の会社が Mash up Award 2nd で Web API を提供しています。

Ajax (Asynchronous JavaScript and XML)
では、どうやってインターネット越しにプログラムを使う (通信を行う) のでしょうか? 現在最も広く知られている手法として Asynchronous JavaScript and XML (通称 Ajax) があります。Ajax は皆さんにおなじみの JavaScript を使用しているので、一般的なブラウザならば大抵使用する事ができます。また and XML とありますが、普通のテキスト形式のデータもやり取りできます。以下は非常に初歩的な Firefox 用の Ajax サンプルです。

var objHTTP = new XMLHttpRequest();
var Method='GET'; // 通信方式
var Url='http://www.○○○.com/○○?'; // 使用する Web API の URL
var ASync=true; // 通信の同期方法 'true' 非同期; 'false' 同期;
 
objHTTP.onload  = function(){ 
	if (objHTTP.readyState == 4 && objHTTP.status == 200) {
		var value=objHTTP.responseText; // テキスト形式で受信する場合
		// XML 形式で受信する場合は objHTTP.responseXML を使用します。
		window.alert(value);
        } else {
		window.alert('error');
        }
};
objHTTP.open( Method, Url, ASync);
objHTTP.send(null);

このように Ajax を使用することで簡単にデータの通信ができるようになりました。とは言え Ajax にも問題があります。

コック長さんのブログ

MozStorage

Cosmos を使う

SearchQuery でマッシュアップ

DOM を使ってマッシュアップ

MashUp 開始

拡張機能を作る

Firefox でマッシュアップする理由

What is MashUp

About Me

Neighborhood

Archives

Photos

Archives

Subscribe