<?xml version="1.0" encoding="utf-8" ?>


<?xml-stylesheet href="http://d.hatena.ne.jp/naoya/rssxsl" type="text/xsl" media="screen"?>


<rdf:RDF
xmlns="http://purl.org/rss/1.0/"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:content="http://purl.org/rss/1.0/modules/content/"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xml:lang="ja">
<channel rdf:about="http://d.hatena.ne.jp/naoya/rss">
<title>naoyaのはてなダイアリー</title>
<link>http://d.hatena.ne.jp/naoya/</link>
<description>naoyaのはてなダイアリー</description>

<dc:creator>naoya</dc:creator>
<dc:date>2012-02-10T16:55:11+09:00</dc:date>
<items>
<rdf:Seq>
<rdf:li rdf:resource="http://d.hatena.ne.jp/naoya/20120202/1328177155"/>
<rdf:li rdf:resource="http://d.hatena.ne.jp/naoya/20111111/1320965898"/>
<rdf:li rdf:resource="http://d.hatena.ne.jp/naoya/20101020/1287542202"/>
<rdf:li rdf:resource="http://d.hatena.ne.jp/naoya/20101011/1286799669"/>
<rdf:li rdf:resource="http://d.hatena.ne.jp/naoya/20101011/1286778922"/>
<rdf:li rdf:resource="http://d.hatena.ne.jp/naoya/20100930/1285868397"/>
</rdf:Seq>
</items>
</channel>



<item rdf:about="http://d.hatena.ne.jp/naoya/20120202/1328177155">
<title> 創造性の高い仕事をしたい人におすすめしたい1冊</title>
<link>http://d.hatena.ne.jp/naoya/20120202/1328177155</link>
<description> 100人が選ぶソフトウェア開発の名著選　デブサミ10周年を記念して2月21日に刊行：CodeZine が出版されます。私も一冊推薦しました。id:secondlife:20120202:1328168076 でセコンさんが公開してるのにならって、私も原稿を公開しようかなと思います。推薦したのは以下の本で</description>

<content:encoded><![CDATA[
<div class="section">
<p><a href="http://codezine.jp/article/detail/6401" target="_blank">100人が選ぶソフトウェア開発の名著選　デブサミ10周年を記念して2月21日に刊行：CodeZine</a> が出版されます。私も一冊推薦しました。<a href="http://d.hatena.ne.jp/secondlife/20120202/1328168076">id:secondlife:20120202:1328168076</a> でセコンさんが公開してるのにならって、私も原稿を公開しようかなと思います。推薦したのは以下の本です。</p>
<div class="hatena-asin-detail">
  <a href="http://www.amazon.co.jp/exec/obidos/ASIN/4062144492/naoyadyndnsor-22/"><img src="http://ecx.images-amazon.com/images/I/412tzq2vpML._SL160_.jpg" class="hatena-asin-detail-image" alt="モチベーション3．0　持続する「やる気！」をいかに引き出すか" title="モチベーション3．0　持続する「やる気！」をいかに引き出すか"></a>
  <div class="hatena-asin-detail-info">
    <p class="hatena-asin-detail-title"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4062144492/naoyadyndnsor-22/">モチベーション3．0　持続する「やる気！」をいかに引き出すか</a></p>
    <ul>
      
      <li><span class="hatena-asin-detail-label">作者:</span> <a href="http://d.hatena.ne.jp/keyword/%A5%C0%A5%CB%A5%A8%A5%EB%A1%A6%A5%D4%A5%F3%A5%AF" class="keyword">ダニエル・ピンク</a>,<a href="http://d.hatena.ne.jp/keyword/%C2%E7%C1%B0%B8%A6%B0%EC" class="keyword">大前研一</a></li>
      
      <li><span class="hatena-asin-detail-label">出版社/メーカー:</span> <a href="http://d.hatena.ne.jp/keyword/%B9%D6%C3%CC%BC%D2" class="keyword">講談社</a></li>
      
      <li><span class="hatena-asin-detail-label">発売日:</span> 2010/07/07</li>
                                                      <li><span class="hatena-asin-detail-label">メディア:</span> ハードカバー</li>
      <li><span class="hatena-asin-detail-label">購入</span>: 53人 <span class="hatena-asin-detail-label">クリック</span>: 4,445回</li>
      <li><a href="http://d.hatena.ne.jp/asin/4062144492/naoyadyndnsor-22" target="_blank">この商品を含むブログ (128件) を見る</a></li>
    </ul>
  </div>
  <div class="hatena-asin-detail-foot"></div>
</div>

<p>邦題があまり好きじゃない。原著は『DRiVE ─ The Suprising Truth About What Motivates Us』です。本文の訳は良かったです。『フリーエージェント社会の到来』や『ハイ・コンセプト』の Daniel Pink さんの本です。</p>
<h4> あの github も読んでいる本</h4>
<p>かつてマイクロソフトがプロのライターや編集者に報酬を払って作ろうとした百科事典があります。MSNエンカルタ、という電子百科事典です。2009年3月に同製品は打ち切りとなりました。一方、ウェブの世界には、ボランティアが無報酬で作り上げた百科事典ウィキペディアがあります。至上もっとも成功したオンライン百科事典。みなさんも幾度となくお世話になっていることでしょう。</p>
<p>金銭的報酬によって働くプロが作ったものより、無報酬のボランティアが作ったものが勝ってしまう。インターネットが世界に広まってからそんな事例が多数見られるようになりました。MSNエンカルタではなくウィキペディア。Sun OSではなく Linux。商用データベースではなくMySQL。プロプライエタリ・プロジェクトではなくオープンソース・プロジェクト。</p>
<p>なぜプロよりボランティアが作るそれが上回るのか。</p>
<p>『モチベーション3．0　持続する「やる気！」をいかに引き出すか 』は行動科学分野の研究成果をベースに、金銭的報酬のような外部から与えられる刺激 ・・・ Extrinsic Motivation によって為されるものではなく、使命感や夢中になれるほど好きという内側からの刺激 ・・・ Intrinsic Motivation によって為された成果がより良い品質のものを生み出す可能性・・・などなどについて論じた書籍です。</p>
<p>つまりは、アメとムチによる管理は過去の遺物で、二十一世紀の今は内的な衝動によってプロジェクトを成功に導く新しいやり方が求められていると、そんな話。</p>
<p>題名はいかにも自己啓発本的な微妙な雰囲気を醸し出している本書ですが、実際には、科学的前提に基づきビジネスの有り様を分析するという冷静な内容になっていますのでご安心を。原著は 『DRiVE ー The Surprising Truth About What Motivates Us』 でして、そこに関して言えばこちらのほうがまだマシかな、という気もします。</p>
<p>もとい、なぜこの本を紹介しようと思ったか。ソフトウェア開発者が生産性高く仕事を為すためには、いかに自分の集中力を高められるか、それにかかっています。その集中力を引き出すのに必要な要素について自覚的になりたければこの本を読みなさい・・・というのが私からのメッセージです。</p>
<p>エンジニアという人種はひとたびそれに集中し始めると、やがて周囲の雑音はきこえなくなり、完全にそこにのめり込んだ、異様に活性化された精神状態となります。みなさんも過去にコーディング中に、あるいはエンジニアリングでなくとも、物作りをしたり、読書をしたり、あるいは受験勉強に没頭したりという課程でそんな精神状態を味わったことがあることでしょう。著名な心理学者のミハイ・チクセントミハイはそんな精神状態を「フロー」と名付けました。</p>
<p>創造力の必要とされる仕事 ー 近年のソフトウェア開発がその代表的なひとつ ー においては、それに従事するひとびとがフロー状態を体験できるかどうか、それが成果の善し悪しに直結していると、科学が証明しています。人がフロー状態に入るには、Extrinsic Motivation ではなく Intrinsic Motivation に突き動かされている、ということが必要不可欠な要素です。</p>
<p>かつて、先進国のソフトウェア開発者はオフショア開発などによってその職業価値を失うといったような主張が幅をきかせていた頃がありました。しかし、結果的には、先進国においてもソフトウェア開発者の需要は減るどころかが益々増えて、またその価値は以前よりもっと重要になってきています。ソフトウェア開発者の平均年俸推移という経済指標がそれを端的に表していることでしょう。</p>
<p>サーチ、SNS、ソーシャルメディア・・・ウェブが秘める可能性がまた一つと明らかになるにつれて、既存の多数のビジネスがインターネットによって再構成されてきました。Netscape を開発した Marc Andreessen が書いた "<a href="http://online.wsj.com/article/SB10001424053111903480904576512250915629460.html">Why Software Is Eating The World</a>" という記事が話題になる昨今です。</p>
<p>ソフトウェア産業がなぜコモディティにはならなかったのか。それはソフトウェア開発がもたらす「創造的価値」という言葉に集約されると考えます。創造性が成果を左右する領域ほど、コモディティになりにくい、そんな直感がみなさんにもあるでしょう。</p>
<p>逆に言えば、独創的かつ創造的な価値を発揮できることが今後エンジニアであることの必須条件になっていく、とも言えるでしょう。そして創造性高く仕事をするにはフローに入ること ─ そこで、本書です。</p>
<p>ソフトウェア開発者としての価値は創造性の高さにあるとして、では自分の創造力をどうやって引き出すか。それはフロー時間をいかに作り出せるかにかかっています。そしてそのフロー時間を生み出すエネルギーの源泉こそが内発的動機付け ー Intrisic Motivation です。オープンソース・プロジェクトに従事するハッカーがなぜあれほど高い生産性や情熱をそこに傾けられるのか、その秘訣。</p>
<p>推薦図書を読んだからといって、簡単に集中人間になれる、なんてことはありません。しかし、フロー時間を生み出す要素が何かについて自覚的であれば、日々の習慣を変える指針にはなるでしょう。あるいは自分が管理する組織を、アメとムチ型から自律型に変えるのに必要な指針は何か、ということが明確になるかもしれません。</p>
<p>技術書ではありません。でもソフトウェア開発者が読んでおくべき一冊だと思います。そうそう、みんな大好き github 社は、出社義務もなければ納期もないという先進的な会社運営で知られていますが、本書を組織運営方針のバイブルにしているそうです。</p>
<h4> あとがき</h4>

<ul>
<li> ソフトウェア開発の名著選なのに開発じゃない本紹介してしまった。空気読めなかった</li>
<li> github が云々、はこのスライドをどうぞ : <a href="http://speakerdeck.com/u/schacon/p/robots-beer-and-maslow" target="_blank">http://speakerdeck.com/u/schacon/p/robots-beer-and-maslow</a></li>
</ul>
</div>
]]></content:encoded>
<dc:creator>naoya</dc:creator>
<dc:date>2012-02-02T19:05:55+09:00</dc:date>
</item>
<item rdf:about="http://d.hatena.ne.jp/naoya/20111111/1320965898">
<title> HBFav というはてなブックマーク iPhone アプリを作りました</title>
<link>http://d.hatena.ne.jp/naoya/20111111/1320965898</link>
<description> ちょこちょこと余暇の時間を使って、HBFav という iPhone アプリを作りました。 HBFav は、はてなブックマークの「お気に入り」機能を閲覧するためのアプリです。はてなブックマークの「お気に入り」は、気に入ったユーザーがブックマークしたブックマークを一覧する機能、</description>

<content:encoded><![CDATA[
<div class="section">
<p>ちょこちょこと余暇の時間を使って、HBFav という iPhone アプリを作りました。</p>
<p><a href="http://f.hatena.ne.jp/naoya/20111111075034" class="hatena-fotolife" target="_blank"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/n/naoya/20111111/20111111075034.png" alt="f:id:naoya:20111111075034p:image:w240" title="f:id:naoya:20111111075034p:image:w240" class="hatena-fotolife" width="240"></a> <a href="http://f.hatena.ne.jp/naoya/20111111075035" class="hatena-fotolife" target="_blank"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/n/naoya/20111111/20111111075035.png" alt="f:id:naoya:20111111075035p:image:w240" title="f:id:naoya:20111111075035p:image:w240" class="hatena-fotolife" width="240"></a> <a href="http://f.hatena.ne.jp/naoya/20111111075036" class="hatena-fotolife" target="_blank"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/n/naoya/20111111/20111111075036.png" alt="f:id:naoya:20111111075036p:image:w240" title="f:id:naoya:20111111075036p:image:w240" class="hatena-fotolife" width="240"></a></p>
<p>HBFav は、はてなブックマークの「お気に入り」機能を閲覧するためのアプリです。はてなブックマークの「お気に入り」は、気に入ったユーザーがブックマークしたブックマークを一覧する機能、つまり、Twitter で言うところのタイムラインです。それを見る専用のアプリがほしかった、ということで作ったものです。</p>
<p>・・・ということで、繰り返すと、HBFav はタイムライン形式でソーシャル・ブックマークを楽しむためのアプリ。はてなブックマークのお気に入り機能を活用しているぜ! という方におすすめです。</p>
<p>HBFav は、<a href="http://itunes.apple.com/app/id477950722">App Store からインストール</a>できます。</p>

<ul>
<li> App Store - HBFav : <a href="http://itunes.apple.com/app/id477950722" target="_blank">http://itunes.apple.com/app/id477950722</a></li>
</ul>
<h4> Kindle とともに</h4>
<p>HBFav には、はてなブックマークに追加する機能や、公式のはてなブックマークアプリと連携してブックマークを追加する機能だけでなく、<a href="http://www.instapaper.com/">Instapaper</a> と連携する機能をつけました。Instapaper はいわゆる「あとで読む」サービスで、これは後で読みたいなと思ったサイトを登録すると、良い感じに整形してくれ保存しておいてくれるサービスです。</p>
<p>PC や iPad で Instapaper を利用するのも便利ですが、ぼくはこのところ Kindle を使っています。</p>
<p><a href="http://f.hatena.ne.jp/naoya/20111111074252" class="hatena-fotolife" target="_blank"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/n/naoya/20111111/20111111074252.jpg" alt="f:id:naoya:20111111074252j:image:w640" title="f:id:naoya:20111111074252j:image:w640" class="hatena-fotolife" width="640"></a></p>
<p>はてなブックマークで follow した人たちが運んで来てくれるニュースを日々眺めつつ、その場で読み切れないものは Instapaper に放り込んでおく。Insapaper の Kindle 連携機能を使うと、Insapaper が未読の記事を一日一回 daily で Kindle に送信してくれます。これを移動時間や食事時などに読んでいます。</p>
<p>最近はスマートフォン開発や Node.js に関心があるのですが、その辺りに詳しい人、いまで言うところのキュレーターを探してきて follow して HBFav を毎日眺める。読み切れないものは Instapaper に放り込んで、Kindle へ。これでだいぶ効率的に、この辺のキャッチアップができるようになりました。</p>
<h4> はてなへの要望</h4>
<p>API周りで要望がいくつかあるので、駄目もとで書いておく。</p>

<ul>
<li> はてなスターを HTTP POST で付与できるAPIが欲しい

<ul>
<li> WSSE 認証か https + Basic 認証だと手軽で嬉しい</li>
</ul>
</li>
</ul>

<ul>
<li> はてなブックマークへの要望

<ul>
<li> /naoya/favorite.rss に自分のブックマークを含めて欲しい</li>
<li> /naoya/favorite.rss にキャッシュが効き過ぎている</li>
<li> RSSフィードのレスポンスが良くなると嬉しい</li>
<li> offset ベースの paging ではなく時刻ベース(?)の paging 機能があると嬉しい</li>
<li> ユーザをお気に入りに add / remove できる API が欲しい</li>
<li> 特定の URL をブックマークしてる自分の follower 一覧が取れる API が欲しい</li>
<li> そのほか、公式アプリ用の undocumented な API をもし可能なら公開して欲しい</li>
<li> 時折 Atom API の WSSE 認証に失敗する不具合があるっぽい</li>
</ul>
</li>
</ul>
<h4> 以下、戯言です</h4>
<p>Mark Zuckerberg は、いずれみんな、ニュースは友人知人経由で知ることになるだろうと言っていました。自分もそうなるだろうと思います。</p>
<p>2004年ころに、自分は新聞や大手のニュースをあまり見なくなっていて、情報ソースがほとんど個人の blog になっていることに気づいた時のことをよく覚えています。当時、知人に「最近自分は blog しか見ていない」ということを言ったら、少し怪訝な顔をされましたが、今、同じことを言ったら少しは違う反応が返ってくるのではないかと思います。</p>
<p>情報を取得するメディアがソーシャル・ネットワークにシフトしていくのは間違いないと思うし止められないと思います。おそらく Mark Zuckerberg はそれを facebook が成し遂げるという文脈でそのようなことを言ったのではないかと思いますが、ぼくは、彼らがそれを成し遂げるにはもう少し時間がかかるように感じます。</p>
<p>Stanley Millgram の「六次の隔たり」について触れた <a href="http://naoya.dyndns.org/~naoya/mt/archives/000527.html">新ネットワーク思考を読んだとき</a>強く印象に残ったのは、6人を介せば友人知人に繋がるという話し・・・ではなく、いつも自分に重要な人生の転換期を与えるのは、強いつながりの人たちではなく弱いつながりの人達である・・・という「弱い絆の強み」のくだりでした。</p>
<p>親しい友人や会社の同僚は同じような生活様式あるいは同じような価値観/時間軸で日々暮らしている。一方、少し離れたつながりにいる人々は、異なる価値観、時間軸、生活様式に暮らしているから、そのどちらが自分にとって非連続な価値をもたらすかと言えば、後者だと、そういう話です。</p>
<p>情報は、そこに既知の事実が含まれれば含まれるほど、そこに情報量はないとみなされます。ただ、あまりにも自分の知らないことだらけでは、その情報には関心が持てません。関心のある情報のうち、情報的価値の高いものが自分にとって良い情報。そんな情報を持っているのは、強い絆の人たちではなく弱い絆の人たちではないだろうか、とそんな仮説を持っています。</p>
<p>そういう意味で facebook が表現するリアルグラフは、自分にとって重要なニュースを知るための情報源としてのグラフとしては、うまく機能しません。そのグラフは強い絆に偏りすぎています。Twitter のように弱い絆を実現できるグラフの方が有利でしょう。有事の際に Twitter がより(コミュニケーションインフラではなく)メディアインフラとして機能するのには、そういう側面があると思いました。</p>
<p>しかし、Twitter は Twitter で、URL を伝搬させるインフラとしての機能には特化できていない。日々のコミュニケーションに必要なグラフつまりは強い絆と、情報源としてのグラフである弱い絆、これを切り離すことは容易にはできない。彼らはいずれ、そういう部分も包含しにくるのだとは思いますが。</p>
<p>何が言いたいかというと、この分野においてはソーシャル・ブックマークがいまもまだ有力なメディアないしインフラだと思っている、ということです。弱い絆のグラフを容易に構築できて、日々のコミュニケーションのような雑事によってそのグラフが乱されたりはしない。実際いまも自分にとって一番重要な情報源はソーシャル・ブックマークにおいて follow しているユーザーが作るコンテンツ。つまりはてなブックマークにおける「お気に入り」機能です。</p>
<p>お気に入り機能は、follow したユーザーがブックマークしたものを見る、つまり follow したユーザーのソーシャル・ブックマーク上におけるアクティビティを眺める機能です。今風に言えば、ソーシャル・ブックマークにおける個人のタイムライン、ということになります。facebook や Twitter によって一般的になった News Feed / Timeline という概念をもって整理すれば、わかりやすいのではないでしょうか。</p>
<p>タイムラインあるいはアクティビティフィード、という観点から見ると、Twitter で「何を言ったか」より「誰が言ったか」の方が重要なことと同じように、何がブックマークされたかということより「誰がブックマークしたか」と言うことの方がずっと重要です。それに特化したアプリが欲しかった。</p>
<p>はてなブックマークのお気に入り機能を、タイムライン形式で眺めたかったのはそういう理由がありました。欲しかったけどなかったので、作りました。</p>
<p>ぼくにとってソーシャル・ブックマークで重要なのは人気エントリーでも、注目エントリーでもなく、このタイムラインだしこれから先もしばらくそれは変わらないように思います。いつか facebook や Twitter あるいはその他のソーシャル・メディアがこの価値を飲み込む日が来るかもしれないがそれにはまだ時間がかかるだろうし。</p>
<p>はてなブックマークには、その時間の中でインターネット上のニュースメディアのソーシャル・インフラとなり得るチャンスが、facebook/Twitter 時代になった今でもまだあるでしょう。ソーシャル・インフラになるというのは Twitter が目指しているビジョンですが、はてなブックマークもそういうビジョンを持てる、持っても良いサービスだろうと、そんなことを思ったりした昨今です。</p>
</div>
]]></content:encoded>
<dc:creator>naoya</dc:creator>
<dc:date>2011-11-11T07:58:18+09:00</dc:date>
</item>
<item rdf:about="http://d.hatena.ne.jp/naoya/20101020/1287542202">
<title> Titanium Mobile についての勉強会資料</title>
<link>http://d.hatena.ne.jp/naoya/20101020/1287542202</link>
<description> 昨日は gumiStudy#5 でした。何か Tech Talk を、ということだったので最近いじっていた Titanium Mobile について整理して、紹介してきました。 Titanium MobileView more presentations from Naoya Ito. (フォントがひどいですね・・・すみません。http://www.slideshare.</description>

<content:encoded><![CDATA[
<div class="section">
<p>昨日は <a href="http://atnd.org/events/8821">gumiStudy#5</a> でした。何か Tech Talk を、ということだったので最近いじっていた Titanium Mobile について整理して、紹介してきました。</p>
<p><div style="width:425px" id="__ss_5496614"><strong style="display:block;margin:12px 0 4px"><a href="http://www.slideshare.net/naoya1977/titanium-mobile" title="Titanium Mobile">Titanium Mobile</a></strong><object id="__sse5496614" width="425" height="355"><param name="movie" value="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=20101019titaniummobile-101019212527-phpapp02&stripped_title=titanium-mobile&userName=naoya1977" ></param><param name="allowFullScreen" value="true"></param><param name="allowScriptAccess" value="always"></param><embed name="__sse5496614" src="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=20101019titaniummobile-101019212527-phpapp02&stripped_title=titanium-mobile&userName=naoya1977" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="355"></embed></object><div style="padding:5px 0 12px">View more <a href="http://www.slideshare.net/">presentations</a> from <a href="http://www.slideshare.net/naoya1977">Naoya Ito</a>.</div></div></p>
<p>(フォントがひどいですね・・・すみません。<a href="http://www.slideshare.net/naoya1977/titanium-mobile/download" target="_blank">http://www.slideshare.net/naoya1977/titanium-mobile/download</a> からダウンロードできます)</p>
<p>先日書いたエントリ (<a href="http://d.hatena.ne.jp/naoya/20101011/1286799669" target="_blank">http://d.hatena.ne.jp/naoya/20101011/1286799669</a>) のとおり、<a href="http://www.appcelerator.com/">Titanium Mobile</a> を使うと JavaScript でネイティブアプリを開発することができます。しかも iPhone/Android マルチプラットフォーム対応。最近は BlackBerry への対応も進んでいるようです。</p>
<p>最初はスクリプト言語でネイティブアプリと言ってもいろんな制限があったり、思うようなインタフェースにならないのではないかと半信半疑だったのですが、実際に色々作って見ると、典型的な iPhone アプリケーションであれば何の問題もなく作れてしまいました。これは結構驚きですね。</p>
<p>iPhone/Android でもう少し深い開発をされている方から見ると足りない機能やAPI、あるいは細かい制御が難しいといった側面があるのかもしれませんが、いわゆるクラウド側にデータを置いてそれを表示するビューワー的なものを作るという定番のアプリ開発においては、十分に実用的であると思います。</p>
<p>発表後、質問で <a href="http://www.phonegap.com/">PhoneGap</a> など他の類似する SDK とどう異なるのか質問をいただいたので、その辺も後日調べてみようと思います。</p>
</div>
]]></content:encoded>
<dc:creator>naoya</dc:creator>
<dc:date>2010-10-20T11:36:42+09:00</dc:date>
</item>
<item rdf:about="http://d.hatena.ne.jp/naoya/20101011/1286799669">
<title> Titanium - JavaScript で iPhone/Android アプリを作る</title>
<link>http://d.hatena.ne.jp/naoya/20101011/1286799669</link>
<description> Titanium Mobile は JavaScript で iPhone/Android のアプリ (not Webアプリ) を開発できる開発環境。詳しくは Titaniumで始めるモバイルアプリ作成の基礎知識（1/3） - ＠IT などに解説があります。 少し時間があったので、JavaScript で作るというのがどんな感じか試して</description>

<content:encoded><![CDATA[
<div class="section">
<p><a href="http://www.appcelerator.com/products/titanium-mobile-application-development/">Titanium Mobile</a> は JavaScript で iPhone/Android のアプリ (not Webアプリ) を開発できる開発環境。詳しくは <a href="http://www.atmarkit.co.jp/fwcr/design/tool/titanium02/01.html" target="_blank">Titaniumで始めるモバイルアプリ作成の基礎知識（1/3） - ＠IT</a> などに解説があります。</p>
<p>少し時間があったので、JavaScript で作るというのがどんな感じか試してみました。作ったアプリは</p>
<p><a href="http://f.hatena.ne.jp/naoya/20101011211616" class="hatena-fotolife" target="_blank"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/n/naoya/20101011/20101011211616.png" alt="f:id:naoya:20101011211616p:image:h300" title="f:id:naoya:20101011211616p:image:h300" class="hatena-fotolife" height="300"></a> <a href="http://f.hatena.ne.jp/naoya/20101011211617" class="hatena-fotolife" target="_blank"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/n/naoya/20101011/20101011211617.png" alt="f:id:naoya:20101011211617p:image:h300" title="f:id:naoya:20101011211617p:image:h300" class="hatena-fotolife" height="300"></a> <a href="http://f.hatena.ne.jp/naoya/20101011211618" class="hatena-fotolife" target="_blank"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/n/naoya/20101011/20101011211618.png" alt="f:id:naoya:20101011211618p:image:h300" title="f:id:naoya:20101011211618p:image:h300" class="hatena-fotolife" height="300"></a></p>
<p>こんな感じで TableView があり、選択すると WebView でアプリ内ブラウザが立ち上がる、ブラウザはツールバーで「戻る」や「リロード」が可能。あとはタブコントロールがあったり・・・という単純なもの。初期起動画面のサイトリストは、HTTP でローカルに立てたサーバーから JSON で読み込んでいます。</p>
<p>Web上のドキュメントを見ながら2, 3時間試行錯誤で一応の形になりました。</p>
<h4> Titanium での開発の実際</h4>
<p>Titanium は開発環境ではありますが、IDE がついてくるわけではありません。今回は Emacs + js2-mode.el でゴリゴリ書きました。個人的には、IDE よりこのスタイルの方が好み。</p>
<p>JavaScript 中で、<code>Titanium.UI.createWindow(...)</code> といった API を呼び出して iPhone/Android の UI を組み立てていきます。コードができたら、"Titanium Developer" という開発ツールでビルド。</p>
<p><a href="http://f.hatena.ne.jp/naoya/20101011211619" class="hatena-fotolife" target="_blank"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/n/naoya/20101011/20101011211619.png" alt="f:id:naoya:20101011211619p:image:w480" title="f:id:naoya:20101011211619p:image:w480" class="hatena-fotolife" width="480"></a></p>
<p>ビルドが完了するといつもの iPhone エミュレータが立ち上がり、アプリが動きはじめます。ビルドの裏側で何が行われているかまだ把握していないのですが、立ち上がるアプリは JavaScript によるWebアプリではなく、ネイティブUIを持ったネイティブアプリです。</p>
<p>JavaScript で書くコードは、以下のようなコードになります。</p>
<p>app.js が Titanium アプリのエントリポイントになるスクリプトで、アプリを立ち上げるとまずはこのスクリプトが実行されます。</p>
<pre class="syntax-highlight">
Titanium.UI.setBackgroundColor(<span class="synConstant">'#000'</span>);
<span class="synIdentifier">var</span> tabGroup = Titanium.UI.createTabGroup();

<span class="synIdentifier">var</span> menu = Titanium.UI.createWindow(<span class="synIdentifier">{</span>  
  title :<span class="synConstant">'メニュー'</span>,
  backgroundColor :<span class="synConstant">'#fff'</span>,
  url : <span class="synConstant">'menu.js'</span>
<span class="synIdentifier">}</span>);

<span class="synIdentifier">var</span> tab1 = Titanium.UI.createTab(<span class="synIdentifier">{</span>  
    icon:<span class="synConstant">'KS_nav_ui.png'</span>,
    title:<span class="synConstant">'メニュー'</span>,
    <span class="synStatement">window</span>:menu
<span class="synIdentifier">}</span>);

<span class="synIdentifier">var</span> config = Titanium.UI.createWindow(<span class="synIdentifier">{</span>
  title : <span class="synConstant">'設定'</span>,
  backgroundColor : <span class="synConstant">'#fff'</span>,
  url : <span class="synConstant">'config.js'</span>
<span class="synIdentifier">}</span>);

<span class="synIdentifier">var</span> tab2 = Titanium.UI.createTab(<span class="synIdentifier">{</span>  
    icon:<span class="synConstant">'KS_nav_views.png'</span>,
    title:<span class="synConstant">'設定'</span>,
    <span class="synStatement">window</span>: config
<span class="synIdentifier">}</span>);

tabGroup.addTab(tab1);  
tabGroup.addTab(tab2);  
tabGroup.open();
</pre>

<p>Window を生成し、タブメニューを組み立てています。これで画面下部のタブメニューが表示されるようになります。各タブをクリックした後に起動するのは url プロパティで指定した menu.js や config.js です。</p>
<p>menu.js は、上記のスクリーンショットの GREE や Facebook などの一覧が出ているウィンドウを担当する箇所。</p>
<pre class="syntax-highlight">
<span class="synIdentifier">var</span> win = Titanium.UI.currentWindow;
<span class="synIdentifier">var</span> xhr = Titanium.Network.createHTTPClient();

xhr.open(<span class="synConstant">'GET'</span>, <span class="synConstant">'http://localhost:3000/menu'</span>);
xhr.onload = <span class="synIdentifier">function</span> () <span class="synIdentifier">{</span>
  <span class="synIdentifier">var</span> data = JSON.parse(<span class="synIdentifier">this</span>.responseText);
  <span class="synIdentifier">var</span> tv = Titanium.UI.createTableView(<span class="synIdentifier">{</span> data : data <span class="synIdentifier">}</span>);
  tv.addEventListener(<span class="synConstant">'click'</span>, <span class="synIdentifier">function</span>(e) <span class="synIdentifier">{</span>
    <span class="synIdentifier">var</span> row = e.rowData;
    <span class="synIdentifier">var</span> w   = Ti.UI.createWindow();
    <span class="synIdentifier">var</span> wv  = Ti.UI.createWebView();
        
    <span class="synIdentifier">var</span> btn_back = Ti.UI.createButton(<span class="synIdentifier">{</span>
      title : <span class="synConstant">'戻る'</span>
    <span class="synIdentifier">}</span>);
    btn_back.addEventListener(<span class="synConstant">'click'</span>, <span class="synIdentifier">function</span> () <span class="synIdentifier">{</span> wv.goBack(); <span class="synIdentifier">}</span>);

    <span class="synIdentifier">var</span> btn_reload = Ti.UI.createButton(<span class="synIdentifier">{</span>
      systemButton : Ti.UI.iPhone.SystemButton.REFRESH
    <span class="synIdentifier">}</span>);
    btn_reload.addEventListener(<span class="synConstant">'click'</span>, <span class="synIdentifier">function</span> () <span class="synIdentifier">{</span> wv.reload(); <span class="synIdentifier">}</span>);

    wv.url = row.url;
    w.toolbar = <span class="synIdentifier">[</span> btn_back, btn_reload <span class="synIdentifier">]</span>;
    w.add(wv);
    win.tab.open(w);
  <span class="synIdentifier">}</span>);

  win.add(tv);
<span class="synIdentifier">}</span>;
xhr.send();
</pre>

<p>Titanium.Network.createHTTPClient() で生成した HTTP クライアントで非同期HTTPでJSONを取得し、コールバック中でメニュー (TableView) を組み立てています。テーブルの各項目をクリックすると動的に WebView が生成されて、GREE や Facebook がその中に表示される、という具合。</p>
<p>今回は Titanium の組み込みの API だけを使って書いていますが、jQuery などのライブラリを読み込んで使うこともできるそう。</p>
<p>基本的にアプリを作っていく流れはこれだけ。JavaScript を書いては Titanium Developer でビルドしてエミュレータで確認、という感じです。Objective-C 生で書くときに比べてやはり素早く書けるし、コード量も少ない。楽で良いです。各種 API でカメラや位置情報などデバイスが提供する機能もちゃんと使えます。</p>
<p>間に抽象レイヤが入っている分 Objective-C/Java で作るのに比べると細かい制御ができなかったりというところはあるのかもしれません。とはいえ、十分に実用的なアプリを、書き慣れた JavaScript で手軽に(しかもクロスプラットフォームで)作れるというのはなかなかに魅力的・・・というわけで、Titanium++ です。</p>
<h4> おまけ</h4>
<p>JSON を返すサーバは Mojolisious::Lite で作りました。Mojolicious はこういう Quick Hack の時にも便利。</p>
<pre class="syntax-highlight">
<span class="synStatement">use utf8</span>;
<span class="synStatement">use </span>Mojolicious::Lite;

app-&#62;renderer-&#62;default_format(<span class="synConstant">'json'</span>);

get <span class="synConstant">'/menu'</span> =&#62;<span class="synIdentifier"> </span><span class="synStatement">sub</span><span class="synIdentifier"> </span>{
    <span class="synStatement">my</span> <span class="synIdentifier">$self</span> = <span class="synStatement">shift</span>;
    <span class="synStatement">my</span> <span class="synIdentifier">$menu</span> = [
        {
            <span class="synConstant">title    </span>=&#62; <span class="synConstant">'GREE'</span>,
            <span class="synConstant">hasChild </span>=&#62; <span class="synConstant">1</span>,
            <span class="synConstant">url      </span>=&#62; <span class="synConstant">'http://t.gree.jp/'</span>,
        },
        {
            <span class="synConstant">title    </span>=&#62; <span class="synConstant">'Google'</span>,
            <span class="synConstant">hasChild </span>=&#62; <span class="synConstant">1</span>,
            <span class="synConstant">url      </span>=&#62; <span class="synConstant">'http://google.com/'</span>
        },
        {
            <span class="synConstant">title    </span>=&#62; <span class="synConstant">'Facebook'</span>,
            <span class="synConstant">hasChild </span>=&#62; <span class="synConstant">1</span>,
            <span class="synConstant">url      </span>=&#62; <span class="synConstant">'http://touch.facebook.com/'</span>,
        },
    ];
    <span class="synIdentifier">$self</span>-&#62;stash(<span class="synConstant">json </span>=&#62; <span class="synIdentifier">$menu</span>);
};

app-&#62;start;
</pre>

</div>
]]></content:encoded>
<dc:creator>naoya</dc:creator>
<dc:date>2010-10-11T21:21:09+09:00</dc:date>
</item>
<item rdf:about="http://d.hatena.ne.jp/naoya/20101011/1286778922">
<title> Mojolicious::Lite で WebSocket を使ったチャットを作る</title>
<link>http://d.hatena.ne.jp/naoya/20101011/1286778922</link>
<description> WebSocketで目指せ“リアルタイムWeb”！ - ＠IT という記事を読みました。node.js という V8 を用いたサーバーサイド JavaScript フレームワークを使うと簡単にイベント駆動のサーバが書ける、node-websocket-server.js を使うと node.js で WebSocket サーバが実装できる</description>

<content:encoded><![CDATA[
<div class="section">
<p><a href="http://www.atmarkit.co.jp/fcoding/articles/websocket/01/websocket01a.html" target="_blank">WebSocketで目指せ“リアルタイムWeb”！ - ＠IT</a> という記事を読みました。<a href="http://nodejs.org/">node.js</a> という V8 を用いたサーバーサイド JavaScript フレームワークを使うと簡単にイベント駆動のサーバが書ける、<a href="http://github.com/miksago/node-websocket-server">node-websocket-server.js</a> を使うと node.js で WebSocket サーバが実装できる。Ajax による polling や Long Polling などと WebSocket のアーキテクチャ比較といった内容でした。</p>
<p>WebSocket を使うと手軽にサーバプッシュ的なアプリケーションが作れて嬉しいのですが、現時点では、HTTPサーバー側で WebSocket を処理する下地の実装をどう用意するかというところがひとつ課題でしょう。node.js はその回答のひとつとして、なかなか面白いですね。</p>
<h4> Perl で WebSocket サーバ ・・・ Mojolicious::Lite</h4>
<p>さて、記事に触発されつつサーバー側を JavaScript ではなく Perl で書けたらいいなと言うことで <a href="http://search.cpan.org/~kraih/Mojolicious-0.999929/lib/Mojolicious/Lite.pm">Mojolicious::Lite</a> を使ったサンプルを作ってみました。<a href="http://mojolicious.org/">Mojoliciious</a> には WebSocket を処理できるサーバー実装が同梱されていて、</p>
<pre class="syntax-highlight">
<span class="synStatement">use </span>Mojolicious::Lite;

websocket <span class="synConstant">'/echo'</span> =&#62;<span class="synIdentifier"> </span><span class="synStatement">sub</span><span class="synIdentifier"> </span>{
    <span class="synStatement">my</span> <span class="synIdentifier">$self</span> = <span class="synStatement">shift</span>;
    <span class="synIdentifier">$self</span>-&#62;receive_message(<span class="synStatement">sub</span><span class="synIdentifier"> </span>{
        <span class="synStatement">my</span> (<span class="synIdentifier">$self</span>, <span class="synIdentifier">$message</span>) = <span class="synIdentifier">@_</span>;
        <span class="synIdentifier">$self</span>-&#62;send_message(<span class="synConstant">&#34;echo: </span><span class="synIdentifier">$message</span><span class="synConstant">&#34;</span>);
    });
};

app-&#62;start;
</pre>

<p>と書いて</p>
<pre>
% perl app.pl --daemon
</pre>

<p>でサーバーが起動、 ws://localhost:3000/echo が WebSocket のエンドポイントになり、receive_message() に渡したコールバックが、クライアント側からメッセージを受信する度にキックされるようになります。ハンドシェイクそのほかは Mojo が適当に処理してくれます。お手軽です。</p>
<h4> サンプルの WebSocket チャットのコード</h4>
<p>以下、サンプルで作ってみたチャットです。/ でチャット画面をHTMLで返す。/echo が WebSocket のエンドポイント。メッセージを受け取ると時刻と受け取ったテキストを、接続しているすべてのクライアントに送ります。</p>
<pre class="syntax-highlight">
<span class="synPreProc">#!/usr/bin/env perl</span>
<span class="synStatement">use utf8</span>;
<span class="synStatement">use </span>Mojolicious::Lite;
<span class="synStatement">use </span>DateTime;
<span class="synStatement">use </span>Mojo::JSON;

get <span class="synConstant">'/'</span> =&#62; <span class="synConstant">'index'</span>;

<span class="synStatement">my</span> <span class="synIdentifier">$clients</span> = {};

websocket <span class="synConstant">'/echo'</span> =&#62;<span class="synIdentifier"> </span><span class="synStatement">sub</span><span class="synIdentifier"> </span>{
    <span class="synStatement">my</span> <span class="synIdentifier">$self</span> = <span class="synStatement">shift</span>;

    app-&#62;<span class="synStatement">log</span>-&#62;debug(<span class="synStatement">sprintf</span> <span class="synConstant">'Client connected: %s'</span>, <span class="synIdentifier">$self</span>-&#62;tx);
    <span class="synStatement">my</span> <span class="synIdentifier">$id</span> = <span class="synStatement">sprintf</span> <span class="synConstant">&#34;</span><span class="synIdentifier">%s</span><span class="synConstant">&#34;</span>, <span class="synIdentifier">$self</span>-&#62;tx;
    <span class="synIdentifier">$clients</span>-&#62;{<span class="synIdentifier">$id</span>} = <span class="synIdentifier">$self</span>-&#62;tx;

    <span class="synIdentifier">$self</span>-&#62;receive_message(
<span class="synIdentifier">        </span><span class="synStatement">sub</span><span class="synIdentifier"> </span>{
            <span class="synStatement">my</span> (<span class="synIdentifier">$self</span>, <span class="synIdentifier">$msg</span>) = <span class="synIdentifier">@_</span>;

            <span class="synStatement">my</span> <span class="synIdentifier">$json</span> = Mojo::JSON-&#62;<span class="synStatement">new</span>;
            <span class="synStatement">my</span> <span class="synIdentifier">$dt</span>   = DateTime-&#62;now( <span class="synConstant">time_zone </span>=&#62; <span class="synConstant">'Asia/Tokyo'</span>);

            <span class="synStatement">for</span> (<span class="synStatement">keys</span> <span class="synIdentifier">%$clients</span>) {
                <span class="synIdentifier">$clients</span>-&#62;{<span class="synIdentifier">$_</span>}-&#62;send_message(
                    <span class="synIdentifier">$json</span>-&#62;encode({
                        <span class="synConstant">hms  </span>=&#62; <span class="synIdentifier">$dt</span>-&#62;hms,
                        <span class="synConstant">text </span>=&#62; <span class="synIdentifier">$msg</span>,
                    })
                );
            }
        }
    );

    <span class="synIdentifier">$self</span>-&#62;finished(
<span class="synIdentifier">        </span><span class="synStatement">sub</span><span class="synIdentifier"> </span>{
            app-&#62;<span class="synStatement">log</span>-&#62;debug(<span class="synConstant">'Client disconnected'</span>);
            <span class="synStatement">delete</span> <span class="synIdentifier">$clients</span>-&#62;{<span class="synIdentifier">$id</span>};
        }
    );
};

app-&#62;start;

<span class="synComment">__DATA__</span>
<span class="synComment">@@ index.html.ep</span>
<span class="synComment">&#60;html&#62;</span>
<span class="synComment">  &#60;head&#62;</span>
<span class="synComment">    &#60;title&#62;WebSocket Client&#60;/title&#62;</span>
<span class="synComment">    &#60;script type=&#34;text/javascript&#34; src=&#34;http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js&#34; &#62;&#60;/script&#62;</span>
<span class="synComment">    &#60;script type=&#34;text/javascript&#34; src=&#34;/js/ws.js&#34;&#62;&#60;/script&#62;</span>
<span class="synComment">    &#60;style type=&#34;text/css&#34;&#62;</span>
<span class="synComment">      textarea {</span>
<span class="synComment">          width: 40em;</span>
<span class="synComment">          height:10em;</span>
<span class="synComment">      }</span>
<span class="synComment">    &#60;/style&#62;</span>
<span class="synComment">  &#60;/head&#62;</span>
<span class="synComment">&#60;body&#62;</span>

<span class="synComment">&#60;h1&#62;Mojolicious + WebSocket&#60;/h1&#62;</span>

<span class="synComment">&#60;p&#62;&#60;input type=&#34;text&#34; id=&#34;msg&#34; /&#62;&#60;/p&#62;</span>
<span class="synComment">&#60;textarea id=&#34;log&#34; readonly&#62;&#60;/textarea&#62;</span>

<span class="synComment">&#60;/body&#62;</span>
<span class="synComment">&#60;/html&#62;</span>
</pre>

<p>クライアントの js の中身。WebSocket API で /echo に接続して入出力を適当に処理。</p>
<pre class="syntax-highlight">
$(<span class="synIdentifier">function</span> () <span class="synIdentifier">{</span>
  $(<span class="synConstant">'#msg'</span>).focus();

  <span class="synIdentifier">var</span> log = <span class="synIdentifier">function</span> (text) <span class="synIdentifier">{</span>
    $(<span class="synConstant">'#log'</span>).val( $(<span class="synConstant">'#log'</span>).val() + text + <span class="synConstant">&#34;</span><span class="synSpecial">\n</span><span class="synConstant">&#34;</span>);
  <span class="synIdentifier">}</span>;
  
  <span class="synIdentifier">var</span> ws = <span class="synStatement">new</span> WebSocket(<span class="synConstant">'ws://localhost:3000/echo'</span>);
  ws.onopen = <span class="synIdentifier">function</span> () <span class="synIdentifier">{</span>
    log(<span class="synConstant">'Connection opened'</span>);
  <span class="synIdentifier">}</span>;
  
  ws.onmessage = <span class="synIdentifier">function</span> (msg) <span class="synIdentifier">{</span>
    <span class="synIdentifier">var</span> res = JSON.parse(msg.data);
    log(<span class="synConstant">'['</span> + res.hms + <span class="synConstant">'] '</span> + res.text); 
  <span class="synIdentifier">}</span>;

  $(<span class="synConstant">'#msg'</span>).keydown(<span class="synIdentifier">function</span> (e) <span class="synIdentifier">{</span>
    <span class="synStatement">if</span> (e.keyCode == 13 &#38;&#38; $(<span class="synConstant">'#msg'</span>).val()) <span class="synIdentifier">{</span>
        ws.send($(<span class="synConstant">'#msg'</span>).val());
        $(<span class="synConstant">'#msg'</span>).val(<span class="synConstant">''</span>);
    <span class="synIdentifier">}</span>
  <span class="synIdentifier">}</span>);
<span class="synIdentifier">}</span>);
</pre>

<p>Google Chrome で localhost:3000 にアクセス、ちゃんと動きました。</p>
<p><a href="http://f.hatena.ne.jp/naoya/20101011153308" class="hatena-fotolife" target="_blank"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/n/naoya/20101011/20101011153308.png" alt="f:id:naoya:20101011153308p:image" title="f:id:naoya:20101011153308p:image" class="hatena-fotolife"></a></p>
<p>こうして WebSocket のサーバー側を Perl で実装できる、とわかれば後は既存の資産を生かしていろんなことが考えられますね。先の記事の Activity Monitor のようなものを、サーバーで Perl で実装してしまって、リモートのサーバーステータスをグラフィカルに表示するとかアイデアは尽きません。</p>
<h4> ほか</h4>

<ul>
<li> <a href="http://vti.showmetheco.de/articles/2010/05/more-mojolicious-websocket-examples.html" target="_blank">More Mojolicious WebSocket examples</a> にいくと、Mojolicious + WebSocket のもっと豪華なサンプルがいくつか見られます</li>
<li> Perl で WebSocket のサーバー側を処理している例はほかにないかな、と検索していたら <a href="http://cpansearch.perl.org/src/MIYAGAWA/Twiggy-0.1007/eg/chat-websocket/chat.psgi" target="_blank">http://cpansearch.perl.org/src/MIYAGAWA/Twiggy-0.1007/eg/chat-websocket/chat.psgi</a> に Twiggy (AnyEvent + PSGI) ベースのサンプルが見つかりました。WebSocket を Plack/PSGI で処理できるのは嬉しいですね。</li>
</ul>
</div>
]]></content:encoded>
<dc:creator>naoya</dc:creator>
<dc:date>2010-10-11T15:35:22+09:00</dc:date>
</item>
<item rdf:about="http://d.hatena.ne.jp/naoya/20100930/1285868397">
<title> Scripting Layer for Android で Perl x Android</title>
<link>http://d.hatena.ne.jp/naoya/20100930/1285868397</link>
<description> Shibuya Perl Mongers テクニカルトーク#14 に行ってきました。諸々面白かったですがパネルディスカッション、LT ともに id:kazuhooku さんの発表が良かったですね。 さて、Scripting Layer for Android (SL4A) を使って、Perl で Android を hack する話をしてきました。SL</description>

<content:encoded><![CDATA[
<div class="section">
<p><a href="http://shibuya.pm.org/blosxom/techtalks/201009.html">Shibuya Perl Mongers テクニカルトーク#14</a> に行ってきました。諸々面白かったですがパネルディスカッション、LT ともに <a href="http://d.hatena.ne.jp/kazuhooku/">id:kazuhooku</a> さんの発表が良かったですね。</p>
<p>さて、<a href="http://code.google.com/p/android-scripting/">Scripting Layer for Android</a> (SL4A) を使って、Perl で Android を hack する話をしてきました。SL4A は jRuby、Perl、Python、PHP などの言語を Android で使えるようにするアプリ。それぞれの言語からは AndroidFacade API と呼ばれる API で、Android のUIやカメラを操作できるというものです。</p>
<p>発表資料は以下です。</p>

<ul>
<li> Scripting Layer for Android + Perl (SlideShare)</li>
<li> <a href="http://www.slideshare.net/naoya1977/scripting-layer-for-android-perl" target="_blank">http://www.slideshare.net/naoya1977/scripting-layer-for-android-perl</a></li>
</ul>
<p><a href="http://www.slideshare.net/naoya1977/scripting-layer-for-android-perl"><img width="400" alt="" src="http://img.f.hatena.ne.jp/images/fotolife/n/naoya/20101001/20101001024318.png?1285868634" title=""></a></p>
<p>今日の発表では Perl で Android 上の Toast (通知用のメッセージ領域) に echo を返す echo サーバーを作るという簡単なスクリプトを紹介しました。</p>
<p>で、面白いなと思ってその後も少しウェブを巡っていると <a href="http://handasse.blogspot.com/2010/09/pythonandroid5.html" target="_blank">http://handasse.blogspot.com/2010/09/pythonandroid5.html</a> で、"Python を使って Android 端末を5分でリモートカメラにする方法" なんて hack が見つかる。これは SL4A で Android 端末上にHTTP サーバーを動かして、そのサーバーに HTTP GET すると、端末が API でキックされて写真を撮影する。その写真は GET を投げたブラウザ側に表示されるという hack。面白い!</p>
<p>というわけで、Perl でもやってみようと試みる。</p>
<p>HTTP サーバは HTTP::Server::Simple::PSGI で書けば数行で書ける。問題は、SL4A で追加の CPAN モジュールを動かすところですが、これは組み込みでは足りないモジュールを SDカード上の site_perl ディレクトリに放り込んでやれば ok。HTTP::Server::Simple::PSGI は依存が少ないので、都合が良い。</p>
<p>エミュレータ上のそれに転送するには</p>
<pre>
% adb -e push /Library/Perl/5.10.0/HTTP /sdcard/com.googlecode.perlforandroid/extras/perl/site_perl/HTTP
</pre>

<p>などとする。上記は HTTP 以下のモジュールをすべて丸ごと転送する例。</p>
<p>これで FileHandle.pm、File/* HTTP/* あたりを転送してやった。Pure Perl モジュールのディレクトリ全部を丸ごと放り込んでも良いかもしれない。</p>
<p>カメラ操作の HTTP サーバーの実装は以下。Python のそれを Perl に移植しただけ、簡単。</p>
<pre class="syntax-highlight">
<span class="synPreProc">#!perl</span>
<span class="synStatement">use strict</span>;
<span class="synStatement">use warnings</span>;

<span class="synStatement">use </span>HTTP::Server::Simple::PSGI;
<span class="synStatement">use </span>IO::File;
<span class="synStatement">use </span>Android;

<span class="synStatement">my</span> <span class="synIdentifier">$pic</span> = <span class="synConstant">'/sdcard/snapshot.jpg'</span>;
<span class="synStatement">my</span> <span class="synIdentifier">$droid</span> = Android-&#62;<span class="synStatement">new</span>;

<span class="synStatement">my</span> <span class="synIdentifier">$app</span> =<span class="synIdentifier"> </span><span class="synStatement">sub</span><span class="synIdentifier"> </span>{
    <span class="synStatement">my</span> <span class="synIdentifier">$env</span> = <span class="synStatement">shift</span>;
    <span class="synIdentifier">$droid</span>-&#62;cameraCapturePicture(<span class="synIdentifier">$pic</span>);
    <span class="synStatement">local</span> <span class="synIdentifier">$/</span>;
    <span class="synStatement">my</span> <span class="synIdentifier">$fh</span> = IO::File-&#62;<span class="synStatement">new</span>;
    <span class="synIdentifier">$fh</span>-&#62;<span class="synStatement">open</span>(<span class="synIdentifier">$pic</span>) <span class="synStatement">or</span> <span class="synStatement">die</span> <span class="synIdentifier">$!</span>;
    <span class="synStatement">return</span> [
        <span class="synConstant">200</span>,
        [ <span class="synConstant">'Content-Type'</span> =&#62; <span class="synConstant">'image/jpeg'</span> ],
        [ <span class="synIdentifier">$fh</span>-&#62;getlines ],
    ];
};

<span class="synStatement">my</span> <span class="synIdentifier">$server</span> = HTTP::Server::Simple::PSGI-&#62;<span class="synStatement">new</span>(<span class="synConstant">10082</span>);
<span class="synIdentifier">$server</span>-&#62;app(<span class="synIdentifier">$app</span>);
<span class="synIdentifier">$server</span>-&#62;run;
</pre>

<p>試しにエミュレータで動かしてみたら...</p>
<p><a href="http://f.hatena.ne.jp/naoya/20101001023444" class="hatena-fotolife" target="_blank"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/n/naoya/20101001/20101001023444.png" alt="f:id:naoya:20101001023444p:image" title="f:id:naoya:20101001023444p:image" class="hatena-fotolife"></a></p>
<p>という感じで getprotobyname() の警告は出ているものの、なんとかバインドできている。CPAN モジュールの問題は解決されたし、echo サーバーが難なく動いたことを考えるとこれでいけるっぽい。</p>
<p>よーし、あとは実機のカメラで動かして・・・と思ったのですが、Xperia では SL4A の Perl (だけでなく Python なども) 動かない。 手元には Xperia しかない、というわけでここで終了。残念。でもまあ、CPAN モジュールを転送してやれば動くことが分かったし、HTTPサーバーも立てられそうだしというので収穫はありました。今日の進捗はここまでです。</p>
<p>SL4A は、まだデバッグが少し面倒ではありますが、本当にちょっとしたネタを実装するだけならすぐに仕上げられるのでなかなか楽しめます。</p>
</div>
]]></content:encoded>
<dc:creator>naoya</dc:creator>
<dc:date>2010-10-01T02:39:57+09:00</dc:date>
</item>
</rdf:RDF>

