Technology « bit sized

‘Technology’ カテゴリーのアーカイブ

Ubiquityを使って英単語を調べる

FireFoxのプラグインでUbiquityというのがあります。他のWebサイトの機能をコマンドとして登録して使用できる、User MashUpを可能にするFirefox上の環境です。将来的にはFirefoxのURLバーに実装されるかも知れません（URLをWebのドキュメントがある場所であると考えるのではなく、Web上のリソースに対するリクエストような考えると割と自然な進歩？）。

ブラウザの新境地？　Ubiquityが変える衝撃のブラウザ体験 (1/2):
http://www.itmedia.co.jp/enterprise/articles/0808/31/news003.html

まあ、そういうわけでどういうものかちょっと気になって見てみて、最近APIが公開されたiknowという英語学習SNSの単語検索を呼び出すコマンドを作成してみました。

iknow-search

コード

CmdUtils.CreateCommand({
  name: "iknow_search",
  icon: "http://example.com/example.png",
  homepage: "http://example.com/",
  author: { name: "xxxx", email: "xxxxx@gmail.com"},
  license: "GPL",
  description: "search words or pharase in iknow",
  help: "iknow",
  takes: {"input": noun_arb_text},
  preview: function( pblock, input ) {

    var baseUrl = "http://api.iknow.co.jp/items/matching/${word}.${format}";
    var tempUrl = {"word":input.text,"format":"json"}
    var params = {include_sentences:"true"};

    pblock.innerHTML = "";

    jQuery.getJSON(CmdUtils.renderTemplate(baseUrl,tempUrl),params,function(resp){
      jQuery.each(resp,function(i){
        pblock.innerHTML += this.responses[0].text + "<br/>";
        pblock.innerHTML += this.sentences[0].text + "<br/>";
        pblock.innerHTML += this.sentences[0].translations[0].text + "<br/>";
      });
    });

  },
  execute: function(input) {
    var baseUrl ="http://www.iknow.co.jp/items/search?keyword=${QUERY}";
    var tempUrl = {"QUERY":input.text};
    var urlString = CmdUtils.renderTemplate(baseUrl, tempUrl);
    Utils.openUrlInBrowser(urlString);
  }
});

Ubiquityコマンドの作成
Ubiquityコマンド作成の情報は、現状下記のリンクかソースを見るしかないくらい少なく、しかも上記のコマンドはまだプレビューで訳を表示しEnterキーでiKnowのサイトで該当のアイテム検索結果を表示するのみですが、行数の割には用を足しているかと思います。Ubiquity導入後、Command Editorを使用して上記のコードを貼付ければ使用できます。

Labs/Ubiquity/Ubiquity 0.1 Author Tutorial
https://wiki.mozilla.org/Labs/Ubiquity/Ubiquity_0.1_Author_Tutorial

上のチュートリアルに載っている事ですが簡単に作り方を説明したいと思います。

CmdUtils.CreateCommand({
  name: "hello-world",
  execute: function() {
    displayMessage( "Hello, World!" );
  }
})

ubiquityコマンドは、cmd_<コマンド名>というfunctionがあればそれを参照するのですが、普通はCmdUtils.CreateCommand()というユーティリティ関数を使用して作成します。上記のコードはその最も単純な例です。

CreateCommandに渡すオブジェクトのnameとexecuteというプロパティに、それぞれコマンド名の文字列と実行する関数を指定します。execute(コマンドの実行)はUbiquityのコンソールにコマンド名を入力しEnterを押した時点で実行されます。displayMessage()を実行すると、MacならGrowl,WindowsならUbiquityのコマンドの下に引数に与えた文字列が表示されます。

CmdUtilsにはコマンド作成以外にも、ユーザーがブラウザで選択中の箇所にテキストやHTMLを挿入(setSelection),IPから位置情報を取得(getGeoLocation),文字列のテンプレート処理(renderTemplate)などコマンド作成を楽にする関数が用意されており、これまたドキュメントは少ないのですが、ソースはこちらで見る事ができます。

プレビューの表示
Ubiquityではユーザーの入力に応じて出力されるプレビューウインドウがあり、こちらはCreateCommandに渡すオブジェクトのpreviewプロパティに、HTML文字列か関数を指定する事で実現できます。下記は冒頭のコマンドでのpreview部分です。

preview: function( pblock, input ) {

    var baseUrl = "http://api.iknow.co.jp/items/matching/${word}.${format}";
    var tempUrl = {"word":input.text,"format":"json"}
    var params = {include_sentences:"true"};

    pblock.innerHTML = "";

    jQuery.getJSON(CmdUtils.renderTemplate(baseUrl,tempUrl),params,function(resp){
      jQuery.each(resp,function(i){
        pblock.innerHTML += this.responses[0].text + "<br/>";
        pblock.innerHTML += this.sentences[0].text + "<br/>";
        pblock.innerHTML += this.sentences[0].translations[0].text + "<br/>";
      });
    });

  },.....

previewは第一引数にpreviewエリアに表示するDOM要素を、第二引数にユーザーから渡されるコマンドの引数をとっています。コマンドの引数はtakeプロパティで、どのnoun_typeで取得するか指定できます。

  takes: {"input": noun_arb_text},

引数データの扱い
noun_typeは引数の制約や、コマンドの補完機能（例えば日付データが入力されたら、日付データを引数にとるコマンドをUbiquityがサジェストする）に使用され、下記のようなnoun_typeがあります。また、CmdUtilsを使用してカスタムのnoun_typeを作成する事ができます。

noun_type_arb_text
noun_type_date
noun_type_language
noun_type_people
noun_type_place
noun_type_tab

noun_typeのソースは下記で確認する事ができます
nountypes.js

一方、コマンドの引数としてpreviewやexecute(の第二引数)に渡されるオブジェクトは、下記のようなプロパティを持ちます。

inputObject.text // 文字列
inputObject.html //タグを含む整形されたHTML
inputObject.data // 文字列以外のnoun_typeのデータ
inputObject.summary // 長い文字列の要約版

iknow-searchのpreviewで行っているのは、コマンドの引数から(テンプレート機能を使用して)URL文字列を組み立て、JSONでリクエストを取得、preview用のDOMに結果を反映するという一連の処理ですが、uqibuityではjQueryが使用できるため簡単に実装できます。

また同様に、コマンド入力後Enterを押した時に実行されるexecuteでは、Utils.openUrlInBrowser()を使用してブラウザで該当のURL(検索結果ページ)を開くようになっています。

まだまだ発展途上(というかできたばかり)のコンセプトですが、Webの機能をお手軽にコマンドにできるのはこれから重宝しそうです。

追記：Ubiquity のアップデートに合わせて、コードも少し書き換えました

投稿者: t4ku

2月 8, 2009 3:05 pm

Programming, Technology への投稿

Processingでグラフ

コメントなし

前から少し気になっていたProcessingという言語について、ちょうど本屋におもしろそうなオライリー本が出ていたので買ってみました。

ビジュアライジング・データ ―Processingによる情報視覚化手法

簡単な例としてグラフの作成があったので、自分でも日本の人口統計を使ってグラフを書いてみました。

Population growth in Japan

FloatTable data;
PFont plotFont;
float plotX1,plotY1;
float plotX2,plotY2;
float labelX,labelY;
float dataAreaWidth;
float dataAreaHeight;
final float dataOffsetY = 30;
float volumnInterval = 10000;
float dataCeil;
int []years;
int yearMin;
int yearMax;
int yearInterval;
float dataMin;
float dataMax;


void setup(){
plotFont = createFont(“SansSerif”,20);
textFont(plotFont);
 //load csv file
data = new FloatTable(“ppl1920-1990-grs-t.csv”);
years = int(data.getRowNames());
yearMin = years[0];
yearMax = years[years.length -1];
yearInterval = 10;
dataMin = data.getColumnMin(0);
dataMax = data.getColumnMax(0);
println(ceil(dataMax/volumnInterval));
dataCeil = ceil(dataMax/volumnInterval) * volumnInterval;
size(600,400);
smooth();
plotX1 = 160;
plotY1 = 80;
plotX2 = width - plotX1/2;
plotY2 = height - plotY1;
labelX = plotX1 -110;
labelY = plotY2 +40;


dataAreaWidth = plotX2 - plotX1;
dataAreaHeight = plotY2- plotY1;
}
 
void draw(){
background(022); // (1)background color
fill(044);
rectMode(CORNERS);
noStroke();
rect(plotX1,plotY1,plotX2,plotY2);
strokeWeight(0.4);
stroke(254);
drawDataArea();
stroke(112);
strokeWeight(0.1);
drawLabels();
}


void drawLabels(){
drawTitleLabel();
drawAxisLabels();
drawYearLabels();
drawYearGrid();
drawVolumnLabels();
}
 
void drawTitleLabel( ) {
fill(112);
textSize(15);
textAlign(CENTER,CENTER);
text(“Population growth in Japan\n 1920 to 2000″,(plotX1+plotX2)/2,plotY1 - 40);
}
 
void drawAxisLabels( ) {
fill(112);
textSize(13);
textLeading(15);
textAlign(CENTER, CENTER);
text(“Total \npopulation\n(Thousand)”, labelX, (plotY1+plotY2)/2);
textAlign(CENTER);
text(“Year”, (plotX1+plotX2)/2, labelY);
}


void drawYearLabels(){
fill(112);
textSize(12);
textAlign(LEFT);
 int rowCount = data.getRowCount();
 for(int i=0;i < rowCount;i++){
 if(years[i] % yearInterval ==0){
 String yearText = data.getRowName(i);
 float x = map(int(yearText),yearMin,yearMax,plotX1,plotX2);
text(yearText,x,plotY2+12);
 }
 }
}


void drawYearGrid(){
 int rowCount = data.getRowCount();
 for(int i=0;i < rowCount;i++){
 if(years[i] % yearInterval ==0){
 float x = float(data.getRowName(i));
x = map(x,yearMin,yearMax,plotX1,plotX2);
line(x,plotY2,x,plotY1);
 }
 }
}


void drawVolumnLabels(){
fill(112);
textSize(10);
textAlign(RIGHT);
 float x = plotX1;
 float y;
 for(float v = floor(dataMin/volumnInterval)*volumnInterval;v <= dataCeil;v+= volumnInterval){
y = map(v,floor(dataMin/volumnInterval)*volumnInterval,dataCeil,plotY2,plotY1);
line(x-10,y,x,y);
 //println(v);
text(floor(v),x-20,y+4); 
}
}


void drawDataArea(){
beginShape();
 int rowCount = data.getRowCount();
 for(int i=0;i < rowCount;i++){
 float value = data.getFloat(i,0);
 float x = map(years[i],yearMin,yearMax,plotX1,plotX2);
 float y = map(value,floor(dataMin/volumnInterval)*volumnInterval,dataCeil,plotY2,plotY1);
vertex(x,y);
 }
endShape();
}


void keyPressed( ) {
saveFrame(“japan_pl_##.png”);
}

processing実行後に何かキーを押すと、連番で”japan_pl_01.png”という画像が保存されます。FloatTableというクラスは本のサンプルコードに含まれているものですが、http://benfry.com/writing/archives/3 からダウンロードできます。人口のCSVは統計局からダウンロードしたものをタブ区切りのcsvにしてます。

こんな感じで

Year    Total
55963
56666
57390
58119
58876
59737
60740.9
61659.3
62595.3
63460.6
64450
65457
66434
67432
68309
69254
70114
70630
71013
71380
71933
71933
71933
71933
73064
71998
73114
78101
80002
81773
83200
84573
85852
87033
88293
89276
90259
91088
92010
92973
93419
94285
95178
96156
97186
98275
99054
100243
101408
102648
103720
105014
107332
108710
110049
111940
110089
114154
115174
116133
117060
117884
118693
119483
120235
121049
121672
122264
122783
123255
123611
124043
124452
124764
125034
125570
125864
126166
126486
126686
126926

Processingを一言で説明しようとすると、Javaの描写機能を使用しやすいインタフェースで提供する言語環境（なのかな？）でしょうが、なんでProcessingに興味をもっていたかというと、これを使用した作品（っていうのがいいですね）に興味深いというか斬新なものが多かったからな訳です。

MusicBox: a truly powerful visualization of your music library:http://www.crunchgear.com/2008/12/15/musicbox-a-truly-powerful-visualization-of-your-music-library/
音楽のライブラリを可視化するソフト。ファイルのメタデータ（作者やジャンルなど）のみではなく、実際の音声データをスキャンしてマッピングする。

Aligning humans and mammals:http://benfry.com/infoseed/
人間とほ乳類の遺伝子配列をならべて描写した画像

Base26:http://toxi.co.uk/p5/base26/
英語の言葉同士の慣例性を表現した図。

仕事ではほとんどCRUDなWEBアプリケーションしか見ないのですが、こういうデータの重要性もさることながらどう見せるかでどれだけ印象や理解度が変わるかという事を考えるとおもしろい。色々遊んでみようと思います。

投稿者: t4ku

2月 3, 2009 3:44 am

Programming, Technology への投稿

タグ: processing

google reader – スター付きアイテムのRSSフィード

コメントなし

google readerはすごい。

検索機能、ショートカットや、AJAXによるスムーズでシンプルなUI。

でも、自分が読んでいるRSSフィードのフィードも出力してくれるのは結構隠れたいい機能だと思う。これがどういう事を意味するかというと、、、

Aさんが、毎日100個のニュースやブログのフィードを見ているとする。Aさんは自分の観点で「これは!!」と思うエントリ(10個くらい)にスターを付ける。

Aさんの友人で、Aさん程ネットのヘビーユーザーではないBさんは、Aさんの「スター付アイテム」のRSSフィードを購読する事で、Aさんが重要だと思ったことを10分の1の労力で発見できる。しかも「Aさんの目きき力」も借りることになる。

フィードの設定
他人にフィードを公開するには、フィードやタグについて個別に共有設定で「公開」と設定しなければ、ならない（FeedのURLは共有設定をしてなくても分かるが、未公開だとユーザーIDとPWで認証が必要になる）。

やり方は簡単。

[設定] リンクをクリックします。
[タグ] をクリックします。
チェックボックスを使用して、共有するタグを選択します。代わりにスター付きアイテムを共有することもできます。
[共有を変更] メニューから [公開] を選択します。

エントリごとに、共有するという手もあるがちょっと手間な気がする。こちらはフッター部分の「共有」をクリックするだけ。後は、共有アイテムのフィードURLを登録すればよい。

共有 - エントリごと

↓下記のような記事を見ると、Webの広がりというか可能性を感じずにはいられない…

　小林氏はこれらのWebユーザーをさらに、さまざまなWebコンテンツを無償で創造する「クリエータ」、Web上の情報を関連付ける「エディタ」、Web上の情報の価値を判定する「バリュア」の3種類に分類。閲覧のみのレーシーバーを3284万人、クリエーターを783万人、エディタを 1476万人、バリュアを951万人と推測。さらにそれらすべてを行う人々をCEVと定義して234万人と推測し、その中でも毎日活動している人が63万人いるとした。

NRIの調査によると、CEVが1日にWebに費やす時間は3.9時間なので、そのうちの半分をCEV活動に費やしているとすると、1日2時間×365日×63万人で約4億時間になり、東京都の最低時給739円で換算すると年間3400億円規模にもなると試算した。

エレクトロニクス市場における日本の地位は大きく低下
BtoCのEC市場は2012年に10兆円規模に～NRIがトレンド予測
http://www.atmarkit.co.jp/news/200712/19/nri.html

投稿者: t4ku

12月 29, 2007 1:32 pm

Technology への投稿

タグ: google, rss, tip

SaaSとソフトウェア屋さん – 37Signalsの答え

1件のコメント

すごいエントリだなっと思ったので、日本語にしてみた。SaaSというとイニシャルコストが安いとかセキュリティやサーバー管理の手間が省けるといったユーザーの視点からの議論が多いけれども、Web開発者から見た本質とはこういう事なのだと思う。

Ask 37signals: Installable software?

企業内部で使用できるようにアプリケーションを販売する予定はありますか？

私達がインストーラブル・ソフトウェアを販売する可能性はほとんどないでしょう。これはソフトウェアにというより、ビジネス上の観点からです。

もし、そうすればまったく別の企業になってしまうでしょう

インストーラブル・ソフトウェアを開発、販売、配給するためには今とは根本的に異なる企業にならなければならないでしょう。今ほどアジャイル開発できなくなるだろうし、今よりハッピーではなくなるでしょう。

インストーラブル・ソフトウェアを作るとすると、多大なお金と時間をテクニカルサポートに費やし、より多くのドキュメントを作成し、開発スピードを遅らせ、そして最終的には私達のアプリケーションのカスタマーエクスペリエンスをうまくコントロールできなくなってしまうでしょう。他の企業にとってはたいした問題ではないかも知れませんが、私達にとっては大変なマイナスです。

「ホスティング = 開発環境と動作環境をうまく管理できる」

ソフトウェアというものは、多様な環境でうまく動作させる事が難しいものです。
Webベースのソフトウェアでは単一の動作環境上でうまく動作するように、コードを書けばよいのです。私達はプロダクトをセットアップするのに必要なハードウェアとソフトウェアを責任をもって組み合わせればよいだけです。この意義はとてつもなく大きいものです。

「インストーラブル = マズい事が起こりやすい」

デスクトップアプリケーションでも、顧客の環境にセットアップされたWebアプリケーションでも、大本となるコードは単一でしょうが（あなたがカスタムバージョンを顧客ごとに作成していない限りは）、手に負えないくらい際限なく多様な動作環境に向き合わなければならないでしょう。提供するアプリケーションのインストールやアップグレードや一般的なパフォーマンスに影響を与えるOSやサードパーティのソフトウェアやハードウェアを熟知していないと、なにかマズい事が起こった時、原因を突き止めるのが非常に難しくなってしまいます。また顧客の環境にインストールする場合、異なるバージョンのRuby,Rails,MySQLなどが存在するとますます困難です。

後方互換性とういう悩みの種

さらに、インストーラブル・ソフトウェアを販売すると、後方互換性にも取り組まなければなりません。最新バージョンが3.2だとします、数千人のユーザーが3.1ではなく3.0を使用していたらアップグレード手順はどうなるでしょう？そして、まだ2.9や2.9.7を使用しているユーザーについてはどうしましょう？後方互換性を維持するという事は、多分ソフトウェアのアップデートにとって最大の障害でしょう。

もちろん、ブラウザー間の相違やブラウザーのバージョンの違いといった点ではWebベースのホスティングアプリケーションも似たような問題はありますが、それはWebベースのインストーラブル・ソフトウェアでも変わりません。そういった問題はどちらにも存在するので、チャラです。

アップデート・サイクル

最後に、Webベースのソフトウェアは顧客側の作業を必要とせず、たちどころにすべての顧客に対してアップデートを行うことができます。つまり、顧客に何の負担をかけるもなく、日次で（もしくは一日に何度も）ソフトウェアをアップデートできるということです。インストーラブル・ソフトウェアのアップデート・サイクルはたいていもっと長くなってしまいます、なぜならユーザーにアップデートを毎日ダウンロードするようお願いしなくてすむよう、リリースをまとめることの方が重要だからです。

このように言う事で、デスクトップ・アプリケーションやインストーラブル・ソフトウェアがなくなるとか、魅力がないとか言いたいのではありません。しかし、今のところWebベースのホスティング・アプリケーションという私達が好むやり方にこだわりたいと思います。

投稿者: t4ku

12月 25, 2007 1:34 pm

Technology, Uncategorized への投稿

タグ: development, SaaS, translation, Web

bit sized

‘Technology’ カテゴリーのアーカイブ

Ubiquityを使って英単語を調べる

Processingでグラフ

google reader – スター付きアイテムのRSSフィード

SaaSとソフトウェア屋さん – 37Signalsの答え

Top Posts

アーカイブ

Google Reader

カテゴリー

タグ

Del.icio.us

Blogroll