今のiPadでできること・できないこと

5月 17th, 2010

mixi日記には書きましたが、4/26~5/1まで、WWW2010という学会に参加するためにアメリカに行っておりました。
ついでながら、近くにApple Storeもあったため、iPadを何個か買ってきました。

一番初めに使った衝撃が、「ノートPCを持ち歩かなくて済む!」という印象でした。
ちょうど2週間くらい使ってみて、本当にノートPCの代替として使えるのか、現状何ができて何ができないのか、タスク内容に応じてまとめてみました。

※なお、画像は全てiPad本体でキャプチャしたものです。

タッチキー入力
メール/カレンダーチェック
Webブラウジング
本・雑誌・新聞
iPadアプリ
音声通話
カメラ
外部出力
その他

タッチキー入力

iPhoneみたいに結構めんどいのではないか?というのが、懸念として大きかったのですが、案外入力しやすいです。
というより、横に倒してキーボードを大きくすると、本当に普通のキーボードの8割くらいの速度で打てます。
縦の場合、持って両親指二本でタイプする感じですね。

ipad-key

メールを打ったり、メモを書いたりというときにはあまり不自由しません。
ただ、プログラミングといった細かい文章作業は難しいように思えます。
また、十字キーもないので、文章の途中選択、コピー&ペーストはiPhoneと同じくめんどい。。。

メール/カレンダーチェック

・メール
メールのリーダーもデフォルトで入ってるものがあります。
ローカルに保存したい(オフラインでも見たい)場合はこちら。

しかし個人的に、圧倒的にGmailをWebで見た方が使いやすい。
メールのスレッドもちゃんと折りたためたり、開いたりできますし。
メール操作はほとんど不満がありません。

ipad-mail

・カレンダー
こちらは逆に、Web版のGoogle CalendarのUIはクソでした。
なぜか、週での表示ができない。

カレンダーはiPad付属のカレンダーを使っています。
こちらのテクニック↓を使えば、複数のカレンダーを表示できます。
カレンダーも不満無し。
» iPadで複数のGoogleカレンダーを表示させる方法

ipad-cal

Webブラウジング

基本的に、普通のWebブラウザと変わらない感じです。
ただ、タブ(?)が9個までしか開かず、それ以上開こうとすると上書きされてしまうので注意が必要。
操作性、表示は全く問題ありません。
縦で表示するといくらか縮小されますが、横で表示するとほとんどのサイトが等倍で表示されます。

ipad-safari

また、PCで見ていて「あとで読む」記事をiPadに送る、という操作も便利です。
Evernoteでそういうプロセスがあるそうですが、完全にオフラインの状態だと中々開かなかったりしてちょっと不満。
そこで私は、pdfdownloadというサイトで、指定のサイトをPDF化してiPadに入れています。
結構めんどいっちゃめんどいですが、じっくり読めるので長文ブログやニュースは全部PDFに落としています。

本・雑誌・新聞

iBookやKindleアプリを使って、英語の本は基本的に読めます。
PDF化した本も、PDFリーダーアプリを使って読むことができます。
また、Wall Street JournalやTime、New York Timesなど、メジャーなアメリカの雑誌も購読することができます。

日本の場合、i文庫というアプリを使って青空文庫という、著作権切れの本を自由に読むことができます。
日本の雑誌はまだ見たことがありませんが、新聞では、産経新聞がiPhoneアプリを出ていて、それを2倍拡大することで結構読みやすくなっています。
追記: 日本の雑誌も読めるようになりました。 » 今のiPadでできること・できないこと2

ipad-mag

iPadアプリ

現状あまり良質なアプリがあるとは言えない状況です。
電子書籍(雑誌)、ゲーム、メモ帳(手書き可能)などがやはり主流となっています。

また、ややこしいことに、iPadアプリをiTunes経由で見るには米国アカウントが必要で、さらに米国アカウントだとクレジットカードを登録できないため、米国でしか見れない有料アプリは買えない状態です。
例えば、各ドキュメントアプリのKeynoteやNumbers(Excelのような表計算アプリ)も米国でしか見れないため、落とせない。。。
ただ、普通の有料アプリは、日本のアカウントでも検索してダウンロードすることができるので、重宝しています。
この問題は、日本発売と同時に解決されることでしょう。

こちらのサイトから、各カテゴリ毎のアプリランキングを見ることができます。
» iPadアプリのカテゴリ別ランキングリスト – もとまか日記

音声通話

iPadには電話機能は付いていませんが、マイクとスピーカーが内蔵されているので、Skypeアプリ(iPhoneアプリ)を使えば不自由なく音声通話も行えます。
この際なので、Skypeのクレジットも買ってしまいました。
20円/分くらいで携帯電話にも通話ができます。
ただ注意が必要なのが、3G回線ではSkypeは使えないようです。

» Skype – Skype 日本語ブログ – Skype for iPhoneの3G通話対応について

カメラ

標準装備はされていません。
なんか上部にMacBookと同じタイプのカメラっぽいのが付いているんですが・・・
いずれファームウェアかなんかがUpdateされると使えるようになるのか?
追記: 輝度センサーらしいとのこと。

ちなみに、Camera for iPadというアプリを使えば、iPhoneで取った写真・動画を無線経由でiPadに表示する、ということはできるみたいです。

外部出力

iPadのオプションツールとして、VGAアダプタがあります。
要はiPad内のコンテンツを、出力するために必要なコネクタです。
ただ、出力には注意が必要。
基本的に表示できるコンテンツは、以下に限られるようです。

 ・ビデオ、Youtube、Safariで表示しているビデオ
 ・写真(スライドショー)
 ・Keynote
 ・Safari上のWebページ(アプリ使用)

» iPad:iPad Dock Connector – VGA アダプタの互換性について

その他

・ドキュメント編集:
OfficeのWord、Excel、Powerpointのようなアプリを、AppleがPages、Numbers、Keynoteというアプリで、それぞれ$10くらいで販売しています。
ただ、アカウントの問題からまだ購入できていません。
Google Docsは問題なく扱えます。

・印刷
デフォルトの機能としては、まだ無いようです。
下記記事を見るといずれ実装されるみたいですが・・・
とは言え、ネットワーク経由で印刷できるアプリはいくつかあるみたいです。
» アップルのS・ジョブズ氏、「iPad」への印刷機能実装を肯定か–米報道

・ラジオ
radikoというiPhone用のアプリを使って、FMラジオも聞くことができます。
バックグラウンドでの再生もできて便利。(Safariのストリーミングページを立ち上げる)

まだまだ未知数なところが多いiPad。
日本発売が楽しみですね。

続きを書きました→今のiPadでできること・できないこと2

8maki IT, proposal, サービス

Google Visualization APIがGoogle Chart Toolsとしてリニューアルしてた

2月 17th, 2010

パラパラとData Visualization系のライブラリを見てたら、いつの間にかGoogle Visualization APIとGoogle Chart APIが統合してGoogle Chart Toolsなる一つのAPIに統合されていました。

その中でも、QRコードや数式、動的なアイコン生成など、画像を生成するモノはThe Chart API
Motion ChartやインタラクティブなグラフなどJavascriptやFlashを使うモノはThe Visualization API
という棲み分けがなされているようです。

Dynamic Icons (Image API)

Image APIでは、Dynamic Iconsなる機能が追加されていました。

DynamicIconこんな感じの画像をこういうソースで呼び出すことができるようです。

chst=d_bubble_icon_text_big
chld=
snack|
bb|
$2.99+!|
FFBB00|
000000

Visualization Gadget | Data Source (Visualization API)

主にVisualization APIについてですが、Visualization GadgetとしてGoogle Doc等で使えたり、Visualization用にデータを配信するData Source Toolも同時に配布されています。
ちょっと色々な機能を包含していて全体像が把握しきれなかったので、図にまとめました。

OverviewGoogleChartTools

Data Sourceに関して、ちょっと何なのか良く分からなかったのですが、どうやら、ほぼほぼGoogle Server Side Data Source Java Libraryのことを指しているようです。Java LibraryではTomcatを用いてデータを公開している模様。(Javaに限らずPythonやPHP版などもありますが)

これはWebサービス運営者など、データを持つユーザーが、サーバー側でVisualization用にデータを配信するライブラリみたいです。SQLを用いてローカルのDBにアクセスしたり、データをJSON形式やCSV形式や他に様々なスタイルのデータ型に変換して出力したり、Visualization用データを生成する様々なツールが提供されています。

また、Google DocsのSpread Sheetからデータを取得できるのも特徴的ですね。Data Sourceに関してはこのムービーが詳しいです。

Visualizationに着目すると、Motion Chartや、A Magic TableAnnotated Time Lineが珍しいですね。

8maki Web, survey, テクノロジー , ,

【書評】シゴトの渋滞、解消します! 結果がついてくる絶対法則

2月 15th, 2010

以前、とある勉強会でお会いした、東大の「無駄学」で有名な西成先生から新書の献本をいただいたので、読んだ感想を書かせていただきます。

『シゴトの渋滞、解消します! 結果がついてくる絶対法則』

流体力学を学び渋滞学を研究されている西成先生ならでは、仕事のライフハック的なことを「流れ」で説明しようという感じの本でした。
章立ては以下。

  1. 個人の渋滞、解消します!
  2. 部内の渋滞、解消します!
  3. 社内の渋滞、解消します!

正直申し上げると、2章までは普通のことを渋滞学という切り口で書いているだけで、あまり面白さを感じませんでした。
普段からライフハックやら啓蒙本やら読んでる人には物足りないかも。

ただ、3章は別です。

会社組織をどう円滑に運営していくか、というのが題目なのですが、西成先生個人のお話を中心に書かれています。

東大で順調に研究生活を送り、トップジャーナルに載ったにもかかわらず就職口もなく、ストレスで顔面マヒ、運よく滑り込んだ山形大でも予算が無くて発表が年2回くらいしかできない。そんな中、社会とつながる自分独自の研究領域を発見し、東大に戻った後、ケルン大学の一年研究留学する機会をもらい、そこで一生の研究仲間と出会った。

要約するとこんな感じなのですが、テレビに出たり本を出したり社会的な研究者のパラダイム転換を垣間見ることができる貴重なエピソードでした。
バリバリ研究一筋で研究室から出ない研究者のキャリアは読んだりするのですが、実際仕事が経営コンサルみたいな研究者の方の生き様はとても新鮮でした。

「複雑系」に対する全体視野アプローチ

3章の最後には組織の話というよりかは、「複雑系」の話が中心になっていました。
いや、組織も複雑系における個の集合という点で同じ。

そのときに取られる物理学ならではの通常のアプローチというのは・・・・「対象を単純な要素に還元して、モデル化してそのモデルを解くことによって、対象を理解する」という方向でしょう。

生き物については、部分の単なる総和は全体にはならないわけです。物理的にいえば、部分と部分が相互作用をしているから、全体は部分の総和にはならないのです。
だから、「相互作用をしていない要素」「要素と要素の相互関係がかなり弱くなるところ」まで全体をうまく分割できれば、そうした要素のみをあつかっても、全体を理解することができるのではないか?

要素単位を変更させながらも、全体の因果関係を理解するために挑戦してゆく。

単に部分に分割するのではなく、その因果関係に着目して全体の「流れ」を知る。
渋滞学ならではの観点ですね。

複雑系において全体から物事を見ることの大切はよく説かれますが、新しい西成先生なりのアプローチを提案されて妙に腑に落ちた気がしました。

8maki survey, 書評 ,

グラフだけじゃない、Data Visualizationフレームワーク集

1月 19th, 2010

(8 free Data Visualization frameworks not only for charts [en])

相変わらずData Visualization関係で調査・開発を行っているのですが、その中でJavascriptのライブラリ・フレームワークを探す時間も多いです。

» 20 Fresh JavaScript Data Visualization Libraries

上記記事のようにまとめ記事が結構あって助かるのですが、ほとんどがCharts(グラフ)のライブラリなんですよね。Chartsも線グラフか、棒グラフか、円グラフか、、、みたいにライブラリ化される主要なグラフは8種類くらいしかなく、面白くない。
適切なデータに対して適切なVisualを関連付けるわけですから、もっと多くのVisualが考えられてもいいはず!

そこでChartsに限らない、もっと根本的にData Visualizationを扱っている有名どころのフレームワークをリストアップしてみました。

SIMILE Widgets Exhibit

dv-js-library-simile

MITのメディアラボがリリースしているFaceted Search用フレームワークです。HTMLを拡張したテンプレート言語を用いて、簡単にFaceted Searchと、検索結果のリッチなVisualizeを可能にしています。現在、リスト、テーブル、地図、Timeline、TimeplotといったVisualに対応しています。タブなどでVisualを切り替えられるので、ユーザーの目的にマッチした検索機能を提供することができます。

SIMILE Widgetsでは、他にもTimelineや、TimeplotRunway(Coverflow)などのVisualもAPIとして個別に提供しています。

» SIMILE Widgets Exhibit – US President Search DEMO

ProtoVis

dv-js-library-protovis

ProtoVisはStanfordのVisualizationフレームワークです。これは巷のライブラリと違い、グラフや地図、といった単位を1つの単位として扱わず、線や面、点といったもっと細かい部品単位でVisualを作成しています。どちらかというとProcessing.jsに近いかも。たくさんのDEMOが載っているので、それらを参考にかなり自由度の高いVisualを作成することができます。

» ProtoVis DEMO

Prefuse Flare (Flash)

dv-js-library-prefuse

Prefuse FlareもData Visualizationのフレームワークとして有名です。Prefuseは、Javaのフレームワークでしたが、今回Flashに対応しました。こちらも豊富なVisualを用意しており、SIMILE同様データ構造をしっかり設計しているので柔軟性が高く、Visualの切り替えや様々なVisualを拡張することができるようになっています。

また、Flashならでわの気持ちのいいインタラクションも高評価です。

» Flare DEMO

Style Chart

dv-js-library-style-charts

こちらは、javascriptでVisualのリクエストを投げるとサーバー側で画像を生成し、それを表示するというフレームワークです。Galleryを見る限りかなり豊富なVisualを扱えるようです。画像だからってアニメーションやアクションが行えないわけではなく、そこにもちゃんと対応しています。扱っているライブラリが少ない、レーダーチャート(スパイダーチャート)も用意している点がいいです。

» Style Chart Editor(DEMO)
» Style Chart Gallery

CanViz

dv-js-library-canviz

有名なVisualizationフレームワークであるGraphvizのJavascript版です。主にグラフ構造のデータを描画するのに適しています。ただ、DEMOを見る限り、アニメーションやイベントの設定ができないようで、本当にVisualizeのためだけのフレームワークのようです。

» CanViz DEMO

Axiis (Flex)

dv-js-library-axiis

こちらはAdobe FlexのVisualizationフレームワークです。インタラクティブなアクションがかなりリッチに作りこまれています。下記のBrowser Statisticsは一部で話題になりましたね。かなり自由度の高いフレームワークのようです。

» Axiis – Browser Statistics DEMO

Infovis

dv-js-library-infovis

こちらもグラフ構造のデータ描画ライブラリとして有名です。フレームワークではないので個別のVisualを利用する形になります。グラフ構造しか扱えないのですが、この手のライブラリとしては珍しく、Weighted Graph(ノード間のパスに重みが付いている)/Directed Graph(パスに方向がある)、の描画にも対応しています。現時点で5種類のグラフ系、ツリー系のVisualがありますが、どれもよくできています。

» Infovis DEMO

RGraph

番外ですが、HTML5用のグラフ生成ライブラリも登場しています。HTML5なのでまだまだ本格導入は難しいかもしれませんが、相当クオリティ高く仕上がっており、今後が楽しみなライブラリです。

» RGraph DEMO

8maki IT, proposal, survey, テクノロジー, デザイン , , ,

モノと関連データの関係性-Semantic Webによるスキーマ定義-

12月 13th, 2009

前回、モノをある切り口で捉え、それを適切な表現方法にあてはめて考えるアイディア出しスタイルと、モノの関連データにVisualizationをあてはめるというData Visualizationのスタイルは、脳の構造・プロセスが同じで、分かりやすいのではないか、という記事を書きました。

» アイディアの発想法とData Visualizationは同じ構造なのではないか?

そこで今回は、上記事で言及している”モノとその関連データ”とは何なのか、深く掘り下げてみたいと思います。

関連データとはプロパティである

「データから自動でVisualizationを行う」という取り組みの中で、どのようにデータを扱えばよいかという問いにぶちあたり、最近RDFおよびRDF Schema、Dublin Coreあたりを調べています。

RDF とは、主語・述語(プロパティ)・目的語(値)という3要素を用いてデータの関係性を表現するWeb上の枠組みのことです。例えば、「New Yorkの略語はNYである。」という例文は下記のようなXMLで表現されます。

<rdf:RDF
 xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
 xmlns:dcterms="http://purl.org/dc/terms/alternative">
  <rdf:Description rdf:about="urn:states:New%20York">
    <dcterms:alternative>NY</dcterms:alternative>
  </rdf:Description>
</rdf:RDF>

この例で、主語・述語・目的語はこのような意味になります。↓
主語: New York というモノが存在し、
目的語: NY という関連データがあり、
述語: 略語 という主語と関連データの関連性を意味している。

これだけだとちょっと分かりにくいかもしれませんが、表は、基本的に主語・述語・目的語の構造に落とすことができます。下記は宇多田ヒカルのWikipedia Infoboxの例です。「宇多田ヒカルの出生名は宇多田光である」ということを表しています。

utada

この構造は、前回の記事で示した、モノ⇔関連データ⇔Visualizationの構造に合致しています。

ここの述語、要はプロパティの部分とVisualizationをうまくひもづけるルールを定義できたら、「扱うデータからVisualizationを発想する」ことができるのではないでしょうか。さらに言えば、ルールさえしっかりしていれば、データとプロパティさえ定義すると自動でユーザーが求めるVisualizationを生成することができるようになります。

規格化されたプロパティの定義

ただ、適切なプロパティと適切なVisualizationをひもづけるには、プロパティの規格化が必要です。色々な人が、バラバラのプロパティ名を用いたり、統一化されていないカテゴリをプロパティとして付与したりすると、自動化が非常に困難になります。

そこでRDFでは、Dublin Coreというメタデータ記述語彙集を用いることが推奨されています。Dublin Coreには、TitleやCreatorといった15の基本要素と呼ばれるプロパティ候補があり、これらを用いることで、情報に共通化されたメタデータ、プロパティを付与することができるようになります。

さらにこれを細分化したDCMI Metadata Termsというものも存在します。DCMI Metadata Termsでは、50個以上のプロパティが定義されています。 先程の「略語」という述語(プロパティ)は、DCMI Metadata Termsのdcterms:alternativeというプロパティに置き換えることができます。

考察

このようにWeb上でデータを構造化する動きは、Semantic Webという流れの一つです。Semantic Webとは、コンピュータが理解できるように、Web上の情報に意味を付与しよう、というプロジェクトです。Data Visualizationで扱うデータをSemantic Webに合わせて構造化する方法は、現状は、割と有効だと思われます。

ただ、Semantic Webは分かりにくい上に考え方が古いので、中々浸透していません。Data Visualizationを主軸に考える場合、もっと別なデータの構造化・規格化手法を考える余地は大いにあるとは思います。

参考

こちらに、Semantic Webの概念図が載っています。コンテンツにメタデータの付与→メタデータの語彙規格化→語彙の意味把握(Ontology)→論理式を用いて結論を導く(Rules,Logic Framework)→結論の証明(Proof) という流れはいい線いっている気がしますが、先は長そうですね。

8maki IT, proposal, survey, テクノロジー, デザイン , , ,

アイディアの発想法とData Visualizationは同じ構造なのではないか?

11月 30th, 2009

(Data Visualization is the same as how to organize ideas [en])

先日、元サイボウズでアメリカでLUNARRを立ち上げられた高須賀さんにお会いしました。そこで、最近研究している Data Visualization について発想が沸いたので書き残します。各データの種類(スキーマ)から自動で適切な Visualization 方法を選択して表現する、という研究です。

高須賀さんのお話

「アイディアをひねり出すとき、いきなりすごいアイディアを考えるよりも、切り口を見つけてそこから発展させた方がいい。アイディアと切り口のバランスが取れた位置が一番エネルギーがある。」ものすごく簡単にまとめるとこういうお話でした。

つまり、ものごとを構造化してとらえ、ツールを使って着想を得た方がアイディアを出しやすい、ということ。

例: 新しいレーザーを考える。レーザーは点であり直進する。点の反対は面で、直進の反対は曲がる。これらを2次元グラフにプロットし、各象限に何が当てはまるか頭をひねる。面・曲がるという象限、つまりどこにおいても光を反射させ、面に映し出すという切り口から、スクリーンの前に置かなくてもよいプロジェクターというアイディアが生まれた。

このとき、切り口からアイディアをひねるために用いたツールが、高須賀さん曰く2×2というもの。要は2軸ある2次元グラフで昔私もマトリックスとも呼んでいました。構造化してアイディアを得る・まとめる方法は以下の高須賀さんの記事が分かりやすいです。

» 事業を考える切り口 – Toru Takasuka の起業・経営ブログ

» 新しい concept のはじまり – Toru Takasuka の起業・経営ブログ

松岡正剛の編集学校で教える編集術

こういった発想の訓練、実は以前にも受けたことがありました。松岡正剛の編集学校で体験授業です。

割と戦略コンサルのケーススタディ訓練に似ているのですが、MECEに限らず、もっと自由に発想する、ということが目的で楽しかったのを覚えています。そこでいただいたパンフレットに、6個のツールが載っていました。

edit1

1. Combination (一種合成型)
2つのものを合成して新しいアイディアを生み出す。

2. Triple Jump (三間連結型)
ホップ・ステップ・ジャンプ型で発想を展開。大・中・小や過去・現在・未来などの切り口もあり。

3. Branching (二点分岐型)
一つのものを2つに展開。この例ではブランドを切り口に展開した。

4. Trinity (三位一体型)
三位一体型、3点セットで考える発想パターン。3Cなどが代表例かも。

5.1 All Around (二軸四方型1)
Branching型の枝が2つ増えて、四方へと分岐する発想法。

5.2 2×2 (二軸四方型2)
2軸を決めてそれぞれのマスに何が入るか考える。マトリックス型。

※英語は勝手に私が変換したものです。

edit2

Data Visualizationとの関係

さて、本題ですが、切り口をツールにあてはめアイディアを得るという発想法と、Data Visualization は、頭の中では同じ構造で処理しているのではないか?というのが今回のパラダイム・シフトでした。

edit3

どちらも「分かりやすく考える」「分かりやすく表現する」ということで、頭の使い方が非常によく似ているような気がします。Data Visualization というと Computer Science チックですが、何か考えを図にまとめるときのことを考えると分かりやすくて、まず扱う対象があって、それを一つの側面で切ったデータ群があり、それをどう Visualize するか?というのは、高須賀さんのおっしゃる構造的な思考と同じプロセスを踏むのではないでしょうか。

普通 Data Visualization を調べる場合、どういった Visualization があるのか、どうプログラミングで表現するのか、といったことに目が行きがちになります。オライリー本の”Visualizing Data“もアルゴリズム中心の本でした。

そこを、扱うデータから Visualization を発想するというパラダイムに変換することで、おもしろい表現ができるだけでなく、説得力のある Data Visualization 手法を考案できる気がしました。

参考までに、こちらの図↓は様々なチャートを目的別に一覧表示しています。チートシートとして使うと便利かも。

» Chart Suggestions – A Thought Starter

p.s.

オフィスにお邪魔した際、VentureBEATの勝屋さんもいらっしゃいました。Blogに写真を載せてさらにリンクまで張っていただきました。ありがとうございました!最強のコネクターと言われるだけのことあって、超人懐っこいでしたw

» 人のつながりは無限(∞)につながる – 勝屋久の日々是々

  • Ben Fry, 増井 俊之 (監訳), 加藤 慶彦
  • 定価 : ¥ 3,780
  • 発売日 : 2008/12/01
  • 出版社/メーカー : オライリージャパン
  • おすすめ度 : (6 reviews)
    可視化の一つの手段としてProcessingの概要を知りたい人に
    情報の可視化入門
    目からウロコが。。。
    日本人の本より読みやすい
    既存のマッシュアップAPIを使うのとは違ったWeb情報の楽しみ方

8maki IT, proposal, エンジニア , , ,

MicrosoftのChromeOSとは別のベクトルのウェブブラウズ体験「Pivot」

11月 20th, 2009

logo-pivot先程、こんなニュース記事を見つけました。巷ではChromeOSのリリースで賑わっていますが、Microsoftも隠れてこんなものをリリースしていたようです。

» マイクロソフトによるウェブ閲覧の新しい実験「Pivot」

 

「ウェブをばらばらのページの集まりとしてではなく、“くもの巣ようなウェブ”として閲覧する方法だ」というコンセプトのようですが、下記のムービーを見る限り、この3つ↓の部分が特徴的な、半ブラウザ・半検索エンジンみたいなアプリケーションという印象です。

  • 検索itemをグループ化(Collections)して、属性で絞り込んだり、ソートできたりするファセット検索
  • ローカル・Webの境なく、透過的に検索itemを扱える(File、Webページ、画像、、、)
  • リッチなVisualization

» Learn More about Pivot | Microsoft Pivot

個人的に2:30くらいの部分で出てくる”Wikipdeia Collections”がツボりました。便利かどうかは使ってみないとわからないですが、こうやってWebを整理して閲覧する方向性は面白いと思います。

そこでグループ化が肝となってくるようですが、Pivotではそれを”Collections”と評していて、3つのタイプに分けてitemグループを扱っているようです。数学の集合に近いイメージ。

  • Simple Collections
  • Linked Collections
  • Dynamic Collections

pivot-collections

まあ、Windows Vista以上、.NET Framework 3.5、IE8がないと動かない点は、なんというか”Microsoft”っぽいですが。。。

ただ、HTML5も本格的に流行り出していますし、今後もブラウザとWebアプリケーションの境が曖昧なコンセプトが出てきそうで、中々おもしろい領域だと思います。ちなみに、近々2つのHTML5関連のイベントに参加予定です。

» HTML5 Tech Talk on November 2009

» HTML5 のご紹介@Opera

8maki Web, survey, テクノロジー , , , , ,

Python-MySQL(MySQLdb)のメモリリーク対策

10月 27th, 2009

会社のスクリプト言語がPythonに統一されて、今月からPythonをメインに使っているのですが、MySQLに接続する際なぜかものすごくメモリを食う時がありました。その備忘録。

最近技術ネタが続いていますがf^^;

結論から先に書くと、MySQLdbのfetchallの部分を下記のように書きなおすとメモリリークが起きなくなりました。

sql = "SQL文"
con= MySQLdb.connect(db = db, host = host, user = user, passwd = passwd)
cur = con.cursor()
cur.execute(sql, params)
result = cur.fetchall()

sql = "SQL文"
con = MySQLdb.connect(db = db, host = host, user = user, passwd = passwd)
con.query(sql)
r = con.store_result() # use_result()も可
result = []
while(True):
  row = r.fetch_row()
  if not row: break
  result.insert(0, row[0]) # 初めにデータを挿入してリストの再構成を防ぎ高速化!
con.close()

» ueBLOG | PythonをつかってMySQLの巨大な結果を返すselect文を処理する
主にこちらのブログを参考にしたのですが、cursorを使わず直接connectからクエリを投げるようにしています。
大きな違いは、一度にデータを取得するのではなく、1行ずつ取得するようにしている、ということだと思います。6~9行目で取得する行を一つ一つリストに格納しています。

なお、4行目でstore_result()を使っていますが、use_result()も可能で、use_result()を使うとデータをサーバに保持しそこから一行ずつ取得するようになるので、よりメモリの消費が抑えられる、気がしますf^^;
確認していないので何とも言えないのですが。

SQLAlchemyだとメモリリークしない、と聞いて試してみたのですが、ORマッピングで導入が面倒くさそうなうえに、生SQLを叩く際は結局MySQLdbを使うようで問題は解決しませんでした。
大量のデータをMySQLに保存しそこから全文検索(エンジンはSenna)でデータを引っ張る処理を行っていて、ある特定のSQLを書く必要があったので。

参考:
» MySQLdbのメモリー・リーク – スコトプリゴニエフスク通信
» [Python] MySQLdbのメモリリーク (それなりブログ)

8maki IT, proposal, エンジニア , , ,

FirefoxやChromeのPlugin開発に便利なnixysa

10月 9th, 2009

今日はかなりマニアックなネタです。FirefoxやGoogle Chromeのエクステンションを開発する際に、Native Codeにアクセスする必要がある人用のエントリですw
※エクステンションとプラグインという言葉は明示的に分けます。前者はFirefox-AddonやChrome-extensionといった拡張機能、後者はFlash Player PluginやAcrobat Reader Plugin等のNative Codeとして実行されるPluginを指します。

エクステンションからNative Codeを扱う場合、javascriptを用いてNPAPI経由でプラグイン(C++クラス)にアクセスする方法があります。NPAPIはMozillaがメインで進めている、ブラウザがプラグインを実行する際に使うAPIです。

ただ、レファレンスを見ていただけるとわかるのですが、とても面倒くさそうw C++の時点でWeb系Developerには障壁が高いのに、Windowの制御やGUI表現等数多くのAPIを抑えないといけないのが非常に厄介。

そこで登場したのが、nixysa。これは純粋なC++コードからNPAPIに準拠するコード、ブラウザから利用するプラグインを生成してくれる便利なGeneratorです。これを用いればNPAPIコードの部分を無視してプラグインの開発が行えます。

説明よりもソースをお見せした方が早いです。helloworld.ccのような純粋なC++コードからプラグインを生成し、helloworld.html内のjavascriptから呼べるようになります。

helloworld.h

#include <string>

class HelloWorld {
public:
HelloWorld() {}
std::string GetHw();
};
#endif  // HELLOWORLD_H

helloworld.cc

#include <string>
#include "helloworld.h"

std::string HelloWorld::GetHw() {
std::string hw;
hw = "Hellow World";
return hw;
}

#ifndef HELLOWORLD_H
#define HELLOWORLD_H

↑「Hello World」を返すGetHwメソッドを持つHelloWorldクラスです。

helloworld.html

<html>
<head>
<script type="text/javascript">

function init() {
  var plugin = document.getElementById("plugin");
  var hw = plugin.HelloWorld();
  if (!hw) {
    alert("no plugin");
  }

  alert(hw.getHw());
}
</script>
</head>

<body onload="init()">
<object type="application/HelloWorld" id="plugin" width="0" height="0"> </object>
</body>
</html>

↑C++で書かれたHelloWorldクラスのgetHwメソッドの返り値をalertしています。<object>タグでHelloWorldプラグインの利用を明示しています。

本来ならNPAPIを使ったかなり長めのC++コードを書かないといけないのですが、こんな単純なC++コードだけでプラグインが開発できちゃうなんて、すばらしい!NPAPIのレファレンスをうんうん眺めなくても作れるというのが気楽。

なお、nixysaでプラグインを生成する際、PythonとSConsというMakeのようなコンパイラが必要です。SConsをapt-getでインストールする際、Python2.6だとエラーが出たので、Python2.5に戻すとインストールできました。実行環境はVMware Player上のUbuntu8.0.4です。sconsを指定のフォルダで実行するとlibhelloworld.soが生成され、これをブラウザのプラグインフォルダに追加するとプラグインとして使えるようになります。Windowsだとhelloworld.dllができるのかな?

sudo apt-get install scons
cd [PROJECT_HOME]/examples/helloworld
scons

プラグインを生成する際には、上記のC++コードに加え、SConsのMakefileにあたるSConstructファイルとC++クラスのIDLを用意する必要があります。そこが面倒くさいのですが、nixysaのパッケージに入っているサンプルプロジェクトの該当ファイルからパクればなんとかなりますw

今はSubversionで公開されているので、試してみたい方は下記のレポジトリから。

svn checkout http://nixysa.googlecode.com/svn/trunk/ nixysa-read-only

とは言え、まだまだ開発途上のプロジェクトなので、色々とバグがあったり、ドキュメントがほとんど無かったりしますので、ご注意を。

参考:
» Google Chrome/Firefoxプラグイン開発ツールNixysa登場
» NPAPI Plugins // Google Chrome Extensions: Developer Documentation

8maki survey, テクノロジー , , , ,

AjaxフレームワークのYUI2.8.0がHTML5ライクなクライアントストレージに対応

9月 24th, 2009

Ajax JavaScriptフレームワークのYUI (Yahoo! User Interface Library) が、最新版の2.8.0でHTML5ライクなクライアントストレージに対応していました。

YUI 2.8.0における注目の新機能は次のとおり。

  • HTML5スタイルのローカルセッションストレージを提供するクライアントストレージメタコンポーネントStorage Utility (Matt Sinder氏提供)の導入。HTML5ストレージ、Google Gears、Flash共有オブジェクトをサポート
  • さまざまな用途に適用できるプログレスバーコンポーネント ProgressBar (Daniel Barreiro氏提供)の導入
  • 接続マネージャにおけるクロスドメインサポートの実現
  • イベントデリゲーションサポートの実現
  • カルーセルウィジェットにギャラリーモードを追加
  • チャートにおける複数軸表示のサポート

» Yahoo! UI最新版登場、クライアントストレージ | エンタープライズ | マイコミジャーナル

細かく見ると色々と便利な機能がついていますが、個人的にクライアントストレージが時代に沿っているというか、HTML5が注目されだしている昨今、非常にタイムリーで目を引きました。

とその前に、ざっとHTML5のおさらい(といっても理解が不十分だったのでこれを機に調べたのですがf^^;)。

HTML5 まとめ

HTML5の注目点は、新しいマークアップ(タグの整理)と新しいAPIの対応です。

■ 新しいマークアップ

  • 検索インデックスされやすいように構造化

    より構造的な文を生成できるように<nav>や、<section>といったタグが追加されました。

  • マルチメディア対応

    <audio>や<movie>といったマルチメディアタグにより、javascriptやFlashを使わなくても音声・動画の再生ができるようになりました。

  • Flashのような自由な2D表現

    <canvas>タグで簡単にJava Appletのような豊かな2D表現ができるようになりました。

■ 新しいAPI

  • ドラッグ&ドロップ
  • 戻るボタン
  • O3D

    ブラウザのプラグインとして提供されているO3Dをjavascriptから制御できるようになります。例えばGoogle Earthがこれを使ってブラウザ上で3D表現を可能にしていまいす。

  • Geolocation

    1,2カ月程前に話題になりましたが、Firefox3.5でGoogle Mapを開くと現在地を表示できます。これはGeolocation APIを使っていて、javascriptから位置情報にアクセスできるからこそできる機能です。モバイルのブラウザのエンジンとして標準化しだしているWebkitでも実装が進んでいて、モバイル分野でかなり使われそうなAPIです。

  • Web Storage

    javascriptでクライアントにデータを保存することができるAPIです。このときデータベースのようにSQLを用いてデータを保存することもできるようです。こちらにサンプルコードが記載されています。

  • Web Workers

    バックグラウンドでjavascriptを動かせるようになります。いわばjavascriptスレッドです。繊細なUI処理に影響させることなく、重い処理を裏で行うことができるようになります。

  • Web Sockets

    サーバサイドプロセスと双方向に通信することを可能にするAPIです。

HTML5のより詳しい記述はこちらへ↓
» グーグルが賭けるHTML 5の未来 - @IT
» HTML 5 ― HTML 4 からの変更点 W3C 草案 (Working Draft)

YUI2.8.0 Storage Utility

さて、今回のYUI2.8.0のStorage Utilityですが、HTML5のWeb Storage (FireFox 3, Safari 4, IE 8以上必要) に対応しているだけでなく、HTML5未対応のブラウザのためにGoogle GearsやSWFファイル(Flash Player 9.0.115以上必要)を使って本機能を実装しています。もちろんセッションでの保存にも対応しています。

YUIのサンプルで動いているのを確認しました。ウィンドウを閉じても文章が保存されていて感動。
» Simple Storage Example — Saving In-Progress Text Entry

コードもstorageEngineオブジェクトを用意してゲッター/セッターで入れるだけというシンプルさ。色々な場面で使う機会が出てきそうです。

var storageEngine = YAHOO.util.StorageManager.get(
  YAHOO.util.StorageEngineGears.ENGINE_NAME,
  YAHOO.util.StorageManager.LOCATION_LOCAL,
  {
    order: [
      YAHOO.util.StorageEngineGears,
      YAHOO.util.StorageEngineSWF,
      YAHOO.util.StorageEngineHTML5
    ],
  force: false
}
);
~中略~
storageEngine.getItem("simple-storage-textentry");
storageEngine.setItem("simple-storage-textentry", YAHOO.util.Dom.get("textentry").value);

なお、容量としてHTML5は5~10MB、Google GearsはSQLiteを使用していて最大2GB、SWFは100KBまで利用できるようです。

8maki Web, survey, テクノロジー , , ,