<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
    <title>Goodpic</title>
    <link rel="alternate" type="text/html" href="http://www.goodpic.com/mt/" />
    <link rel="self" type="application/atom+xml" href="http://www.goodpic.com/mt/atom.xml" />
    <id>tag:www.goodpic.com,2011-09-09:/mt//1</id>
    <updated>2012-05-13T15:30:19Z</updated>
    <subtitle>湘南　茅ヶ崎の海、サーフィンの写真やレストラン紹介。ブログやWEBサービスAPI、アフィリエイトなどのネット技術。自然エネルギーなどがテーマです。</subtitle>
    <generator uri="http://www.sixapart.com/movabletype/">Movable Type Pro 5.13-ja</generator>

<entry>
    <title>Nagual garden farming experience</title>
    <link rel="alternate" type="text/html" href="http://www.goodpic.com/mt/archives2/2012/05/nagual-garden.html" />
    <id>tag:www.goodpic.com,2012:/mt//1.1705</id>

    <published>2012-05-13T13:34:24Z</published>
    <updated>2012-05-13T15:30:19Z</updated>

    <summary></summary>
    <author>
        <name>Jun Kaneko</name>
        <uri>http://www.goodpic.com/mt/</uri>
    </author>
    
        <category term="その他" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="写真" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://www.goodpic.com/mt/">
        <![CDATA[
<p>On Sunday, I, my wife and son visited Nagual garden in Kamakurayama to participate in an organic farming lecture.</p>

<p><a href="http://www.flickr.com/photos/stokeshot/7187702574/" title="IMG_0544 by Jun Kaneko, on Flickr"><img src="http://farm8.staticflickr.com/7101/7187702574_988ddd14d5.jpg" width="500" height="375" alt="IMG_0544"></a></p>

<p>This farm is managed by Romana (Keiko) san, and she offers a monthly lecture called <a href="http://yama0467.jimdo.com/%E8%87%AA%E7%84%B6%E8%BE%B2-%E5%AD%A6%E3%81%B3%E5%A0%82/">自然農 学び堂</a>. You can learn how she is growing seasonal and organic vegetables here.</p>

<p><a href="http://www.flickr.com/photos/stokeshot/7187697600/" title="IMG_0540 by Jun Kaneko, on Flickr"><img src="http://farm8.staticflickr.com/7076/7187697600_e2a28a1d7a.jpg" width="500" height="375" alt="IMG_0540"></a></p>

<p>This garden was originally cultivated by Mr. David Duval-Smith, and she took over the responsibility since 2009. Her methodology is based on Masanobu Fukuoka's natural farming (福岡正信の自然農法). </p>

<p><a href="http://www.flickr.com/photos/stokeshot/7187688258/" title="IMG_0529 by Jun Kaneko, on Flickr"><img src="http://farm9.staticflickr.com/8153/7187688258_d2c118d5e8.jpg" width="500" height="375" alt="IMG_0529"></a></p>

<p>She keeps the soil as natural as possible and let withered plants and insects to cultivate the underground.</p>

<p><a href="http://www.flickr.com/photos/stokeshot/7187686094/" title="IMG_0526 by Jun Kaneko, on Flickr"><img src="http://farm8.staticflickr.com/7234/7187686094_cb93f23c72_n.jpg" width="240" height="320" alt="IMG_0526"></a><a href="http://www.flickr.com/photos/stokeshot/7187690596/" title="IMG_0531 by Jun Kaneko, on Flickr"><img src="http://farm6.staticflickr.com/5342/7187690596_c11f2aeb39_n.jpg" width="240" height="320" alt="IMG_0531"></a><br /><a href="http://www.flickr.com/photos/stokeshot/7187692766/" title="IMG_0534 by Jun Kaneko, on Flickr"><img src="http://farm8.staticflickr.com/7088/7187692766_8fbe9fce01_n.jpg" width="240" height="320" alt="IMG_0534"></a><a href="http://www.flickr.com/photos/stokeshot/7187698690/" title="IMG_0541 by Jun Kaneko, on Flickr"><img src="http://farm6.staticflickr.com/5448/7187698690_67d583b9d5_n.jpg" width="240" height="320" alt="IMG_0541"></a></p>

<p>In the morning, we planted young tomato and lettuce. For me they are hard to distinguish from weeds, but once pointed out, there are so many variety of vegetables around my feet. She offered to pick some of the asparagus and herbs, and they were so fresh and tasty.</p>

<p><a href="http://www.flickr.com/photos/stokeshot/7187693878/" title="IMG_0535 by Jun Kaneko, on Flickr"><img src="http://farm8.staticflickr.com/7091/7187693878_4296e951a0.jpg" width="500" height="375" alt="IMG_0535"></a></p>

<p>Many of the seed come from her own nursery.</p>

<a href="http://www.flickr.com/photos/stokeshot/7187695200/" title="IMG_0538 by Jun Kaneko, on Flickr"><img src="http://farm8.staticflickr.com/7071/7187695200_efde858137.jpg" width="500" height="375" alt="IMG_0538"></a>

<p>After two hours of farm-work, it's time to thank the harvest !</p>

<p><a href="http://www.flickr.com/photos/stokeshot/7187715544/" title="IMG_0555 by Jun Kaneko, on Flickr"><img src="http://farm9.staticflickr.com/8149/7187715544_0494c189c4_n.jpg" width="240" height="320" alt="IMG_0555"></a><a href="http://www.flickr.com/photos/stokeshot/7187706528/" title="IMG_0548 by Jun Kaneko, on Flickr"><img src="http://farm9.staticflickr.com/8163/7187706528_7e73618796_n.jpg" width="240" height="320" alt="IMG_0548"></a></p>

<p>The lunch started with ふき(butterbur), エシャロット(échalote), and あしたばの天ぷら (Ashitaba Tempura). </p>

<p><a href="http://www.flickr.com/photos/stokeshot/7187723470/" title="P1030858 by Jun Kaneko, on Flickr"><img src="http://farm8.staticflickr.com/7087/7187723470_403ac6f500_m.jpg" width="240" height="180" alt="P1030858"></a><a href="http://www.flickr.com/photos/stokeshot/7187718526/" title="P1030852 by Jun Kaneko, on Flickr"><img src="http://farm8.staticflickr.com/7102/7187718526_dc9d697d60_m.jpg" width="240" height="180" alt="P1030852"></a><a href="http://www.flickr.com/photos/stokeshot/7187719232/" title="P1030853 by Jun Kaneko, on Flickr"><img src="http://farm6.staticflickr.com/5324/7187719232_8f7d21516b_m.jpg" width="240" height="180" alt="P1030853"></a><a href="http://www.flickr.com/photos/stokeshot/7187727158/" title="P1030863 by Jun Kaneko, on Flickr"><img src="http://farm8.staticflickr.com/7103/7187727158_a9f1f6548c_m.jpg" width="240" height="180" alt="P1030863"></a><a href="http://www.flickr.com/photos/stokeshot/7187720104/" title="P1030854 by Jun Kaneko, on Flickr"><img src="http://farm8.staticflickr.com/7233/7187720104_deb1e796a1_m.jpg" width="240" height="180" alt="P1030854"></a><a href="http://www.flickr.com/photos/stokeshot/7187724298/" title="P1030860 by Jun Kaneko, on Flickr"><img src="http://farm6.staticflickr.com/5236/7187724298_9497410c8a_m.jpg" width="240" height="180" alt="P1030860"></a></p>

<p>Fennel and various green leaves with a balsamic dressing was so fresh, and the pasta carbonara which used 酒粕 instead of cheese and cream was fantastic.</p>

<p><a href="http://www.flickr.com/photos/stokeshot/7187720960/" title="P1030855 by Jun Kaneko, on Flickr"><img src="http://farm8.staticflickr.com/7092/7187720960_1bcc6e3259.jpg" width="500" height="375" alt="P1030855"></a></p>

<p>Keiko-san said that a farm of 1000㎡ (300坪) is enough to produce vegetables for a family, and another 1000㎡ for the rice. Her garden is about 2000㎡ and she manages it all by herself. After having spent her career in Italian gourmet world, she said that she now gets more inspirations by growing foods with her own hands. Seasonality and freshness overcome expensive ingredients, that was exactly proved by the lunch !</p>

<p><a href="http://www.flickr.com/photos/stokeshot/7187725438/" title="P1030861 by Jun Kaneko, on Flickr"><img src="http://farm6.staticflickr.com/5347/7187725438_184b94a3f8_n.jpg" width="240" height="320" alt="P1030861"></a><a href="http://www.flickr.com/photos/stokeshot/7187721718/" title="P1030856 by Jun Kaneko, on Flickr"><img src="http://farm6.staticflickr.com/5319/7187721718_d769ebc8bf_n.jpg" width="240" height="320" alt="P1030856"></a></p>

<p>More pictures in <a href="http://www.flickr.com/photos/stokeshot/sets/72157629705447978/with/7187725438/">Nagual Garden Kamakura - a set on Flickr</a>.</p>]]>
        
    </content>
</entry>

<entry>
    <title>スタンフォードとバークレーの空気感</title>
    <link rel="alternate" type="text/html" href="http://www.goodpic.com/mt/archives2/2012/04/stanford-and-berkeley.html" />
    <id>tag:www.goodpic.com,2012:/mt//1.1704</id>

    <published>2012-04-15T08:38:13Z</published>
    <updated>2012-04-15T19:53:52Z</updated>

    <summary></summary>
    <author>
        <name>Jun Kaneko</name>
        <uri>http://www.goodpic.com/mt/</uri>
    </author>
    
        <category term="自然" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://www.goodpic.com/mt/">
        <![CDATA[
<p>今週、木曜日からサンフランシスコ、ベイエリアに来ています。これまで出張では、意外とサンフランシスコ市内しか訪れていなかったので、パロアルト、バークレーからサンタクルーズを含めて１０日間で巡る旅。３日目にして既に、それぞれの街に住む人と会って話をすることで、多くのインスピレーションを受けています。</p>
<p><a href="http://farm8.static.flickr.com/7270/6932818006_88a862cc0f_b.jpg" rel="lightbox" title="flickr6932818006"><img alt="img_0295" src="http://farm8.static.flickr.com/7270/6932818006_88a862cc0f.jpg" /></a></p>

<p>着いた初日は雨がぱらぱらふっていましたが、二日目からは青空が広がっています。最初の朝食はメキシカン。</p>

<p><a href="http://farm8.static.flickr.com/7242/6932816544_9587345e99_b.jpg" rel="lightbox" title="flickr6932816544"><img alt="img_0284" src="http://farm8.static.flickr.com/7242/6932816544_9587345e99_m.jpg" /></a><a href="http://farm6.static.flickr.com/5160/6932816688_5c882cd7d4_b.jpg" rel="lightbox" title="flickr6932816688"><img alt="img_0285" src="http://farm6.static.flickr.com/5160/6932816688_5c882cd7d4_m.jpg" /></a></p>
<p></p>

<p>木曜日と金曜日は、スタンフォード大学で過ごしました。旧友と新しい友人、密度の濃いディスカッションができて、素晴らしいスタートに。木曜夜に参加させてもらった<a href="http://www.mbamission.com/blog/2012/04/12/beyond-the-mba-classroom-enjoy-a-small-group-dinner-at-stanford/">Small Group Dinner at Stanford</a>は、目的意識をもった学生同士のネットワーキングを支援する、面白い仕組みだなと思いました。</p>

<p><a href="http://farm8.static.flickr.com/7258/6932817648_b00d5bd751_b.jpg" rel="lightbox" title="flickr6932817648"><img alt="img_0292" src="http://farm8.static.flickr.com/7258/6932817648_b00d5bd751.jpg" /></a></p>

<p>それにしても、スタンフォードのキャンパスはとにかく広大で緑があふれてれている。真っ青な大空の下を歩いていると、どこからともなく、春の花の香りが漂ってくる。そのなかを、スケボーや自転車に乗った学生が行き交っているのを見ると、なんだか根拠も無く『よし、とにかく何かやってみるか』という気分になってくるのが不思議です。</p>

<div class="photoicons"><a href="http://farm6.static.flickr.com/5039/7078894461_0d30c423a2_b.jpg" rel="lightbox" title="flickr7078894461"><img alt="img_0299" src="http://farm6.static.flickr.com/5039/7078894461_0d30c423a2_m.jpg" /></a><a href="http://farm8.static.flickr.com/7198/7078893189_079a5a562f_b.jpg" rel="lightbox" title="flickr7078893189"><img alt="img_0291" src="http://farm8.static.flickr.com/7198/7078893189_079a5a562f_m.jpg" /></a><a href="http://farm8.static.flickr.com/7186/6932818362_6e5467cb3e_b.jpg" rel="lightbox" title="flickr6932818362"><img alt="img_0297" src="http://farm8.static.flickr.com/7186/6932818362_6e5467cb3e_m.jpg" /></a><br />
<a href="http://farm6.static.flickr.com/5196/6932819654_c815d2bd31_b.jpg" rel="lightbox" title="flickr6932819654"><img alt="flickr6932819654" src="http://farm6.static.flickr.com/5196/6932819654_c815d2bd31_s.jpg" /></a><a href="http://farm8.static.flickr.com/7108/6932819312_f3093dc5e4_b.jpg" rel="lightbox" title="flickr6932819312"><img alt="flickr6932819312" src="http://farm8.static.flickr.com/7108/6932819312_f3093dc5e4_s.jpg" /></a><a href="http://farm8.static.flickr.com/7193/7078894299_9317c6ee16_b.jpg" rel="lightbox" title="flickr7078894299"><img alt="flickr7078894299" src="http://farm8.static.flickr.com/7193/7078894299_9317c6ee16_s.jpg" /></a><a href="http://farm8.static.flickr.com/7106/7078893913_17c902586f_b.jpg" rel="lightbox" title="flickr7078893913"><img alt="flickr7078893913" src="http://farm8.static.flickr.com/7106/7078893913_17c902586f_s.jpg" /></a><a href="http://farm8.static.flickr.com/7068/6932817810_db2b68ab4c_b.jpg" rel="lightbox" title="flickr6932817810"><img alt="flickr6932817810" src="http://farm8.static.flickr.com/7068/6932817810_db2b68ab4c_s.jpg" /></a><a href="http://farm8.static.flickr.com/7046/7078892853_96b8f266d7_b.jpg" rel="lightbox" title="flickr7078892853"><img alt="flickr7078892853" src="http://farm8.static.flickr.com/7046/7078892853_96b8f266d7_s.jpg" /></a><a href="http://farm8.static.flickr.com/7227/6932816874_f681769a23_b.jpg" rel="lightbox" title="flickr6932816874"><img alt="flickr6932816874" src="http://farm8.static.flickr.com/7227/6932816874_f681769a23_s.jpg" /></a></div>

<p id="berkeley">木、金曜日に脳が消費したエネルギーとビタミンの補給に、土曜日は<a href="http://www.ecologycenter.org/bfm/">バークレーのFarmers' Markets</a>に出かけました。バークレーを訪れるのは、ほぼ初めてに近いのですが、すごく独特な空気感をもった街ですね。</p>

<p><a href="http://farm6.static.flickr.com/5463/7078896251_4c48a388d3_b.jpg" rel="lightbox" title="flickr7078896251"><img alt="p1030580" src="http://farm6.static.flickr.com/5463/7078896251_4c48a388d3.jpg" /></a></p>

<p>ファーマーズマーケットから歩き始めたということも大きいのかもしれないけれど、比較的コンパクトな空間に、気持ちのいい距離間で人々が暮らしている気がします。１時間半ぐらいマーケットにいるだけで、多分１５人以上の人と会話をしたかも。ちょっと興味を持って質問すると、周りの人、というか通りすがりの人が、普通に会話に入ってくる。すごく自然に、ちょっと会話をして、笑顔で去っていく、みたいな。</p>

<p><a href="http://farm8.static.flickr.com/7044/6932822884_2e7e06236f_b.jpg" rel="lightbox" title="flickr6932822884"><img alt="p1030592" src="http://farm8.static.flickr.com/7044/6932822884_2e7e06236f.jpg" /></a><br /></p>

<p>このイチゴも屋台を眺めていたら、後ろから来たご婦人が、「並んでる?　迷ってるんだったら買った方がいいわよ。この農場のイチゴは、丁度先週からシーズンが始まったところで、先週はすごい行列だったんだから。３パック買ったけど、その日の夕方には家族が全部食べちゃった。鮮度が違うから、買ったらその場でひとつ食べてみると、いいわよ。」みたいな会話になって、それではと買って食べたら、これがとんでなく美味しい。あとで調べたら、カルフォルニアで初めてオーガニックのイチゴ栽培を始めた歴史的な農場でした。</p>

<iframe width="560" height="315" src="http://www.youtube.com/embed/tLJYTzRt50w" frameborder="0" allowfullscreen></iframe>

<ul>
<li><a href="http://www.swantonberryfarm.com/pages/farm_general.html">Swanton Berry Farm</a></li>
<li><a href="http://currents.ucsc.edu/04-05/09-06/usda.html">Strawberry and vegetable producers collaborate with UCSC as methyl bromide ban looms</a></li>
</ul>

<p>お土産用のジャムも買っててよかった。</p>

<p><a href="http://farm8.static.flickr.com/7188/6932823048_25ca12d6fd_b.jpg" rel="lightbox" title="flickr6932823048"><img alt="p1030594" src="http://farm8.static.flickr.com/7188/6932823048_25ca12d6fd.jpg" /></a></p>


<p>会場の一角では、<a href="http://www.ecologycenter.org/calendar/event.php?eventID=37886">Wild, Foraged & Indigenous Foods</a> というイベントがおこなわれていました。専門家が、野生植物の生態系を説明しながら、実際にそれを料理して振舞うというという趣旨。</p>

<p><a href="http://farm8.static.flickr.com/7214/6932822670_7db40ee88d_b.jpg" rel="lightbox" title="flickr6932822670"><img alt="p1030590" src="http://farm8.static.flickr.com/7214/6932822670_7db40ee88d.jpg" /></a></p>

<p>海藻が展示してあったので、「Kombu、Nori、Wakameって日本語を使うんですね?」と聞いたら、いまから講演するから是非、聞いていきなさいよと。</p>

<p><a href="http://farm6.static.flickr.com/5322/7078896737_f983507c7c_b.jpg" rel="lightbox" title="flickr7078896737"><img alt="p1030582" src="http://farm6.static.flickr.com/5322/7078896737_f983507c7c.jpg" /></a></p>

<p>料理をしながらの講演なのですが、話している内容は、カルフォルニア沿岸の海藻の生態系や収穫時期、自分で収穫する上で気をつけることや地域の歴史、ルール、法律などを実体験を交えて話してくれるので、すごく面白かったです。T-Shirtsには<a href="http://en.wikipedia.org/wiki/Seaweed_Rebellion">Seaweed Rebellion</a>と書いてあります。他にも<a href="http://iuhoakland.com/calendar.html">色々なテーマの体験学習</a>をおこなっているそう。</p>

<p><a href="http://farm8.static.flickr.com/7265/6932821592_de7736c668_b.jpg" rel="lightbox" title="flickr6932821592"><img alt="p1030585" src="http://farm8.static.flickr.com/7265/6932821592_de7736c668.jpg" /></a></p>

<p>実際の料理も、細かく切ったりする作業を、聞いていた人が自然に手伝い始めたり、スペースも含めてかなりオープンな雰囲気。話し終わる頃に、ちょうど料理も出来上がり、みんなで食べる。</p>

<a href="http://farm8.static.flickr.com/7183/7078897665_8280d0a065_b.jpg" rel="lightbox" title="flickr7078897665"><img alt="p1030587" src="http://farm8.static.flickr.com/7183/7078897665_8280d0a065.jpg" /></a><br />

<p>レシピも全員に配られます。GOURMETマガジンに2002年に掲載されたものとのこと。わかめと醤油は日本風だけど、リンゴやコリアンダー、生姜、ごま、がミックスされると食べたことがない味で美味しかった。</p>

<a href="http://farm8.static.flickr.com/7190/6932821740_9ee06058c8_b.jpg" rel="lightbox" title="flickr6932821740"><img alt="p1030586" src="http://farm8.static.flickr.com/7190/6932821740_9ee06058c8.jpg" /></a><br />

<p>他にも４つぐらいのテーマで実演があったよう。</p>

<a href="http://farm8.static.flickr.com/7100/6932821380_0bd0e0423e_b.jpg" rel="lightbox" title="flickr6932821380"><img alt="p1030584" src="http://farm8.static.flickr.com/7100/6932821380_0bd0e0423e.jpg" /></a>

<p>すぐ近くにある、カルフォルニア料理の最高峰 <a href="http://en.wikipedia.org/wiki/Chez_Panisse">Chez Panisse</a> の創立者 <a href="http://en.wikipedia.org/wiki/Alice_Waters">Alice Waters</a>は<a href="http://en.wikipedia.org/wiki/Free_Speech_Movement">Free Speech Movement</a>のアクティビストでもあったそうで、文化と食、オーガニック、フリースピーチが一体となって草の根で浸透しているバークレーのすごさを感じた半日でした。</p>

<div class="photoicons"><a href="http://farm8.static.flickr.com/7090/7078898063_9188a28d54_b.jpg" rel="lightbox" title="flickr7078898063"><img alt="flickr7078898063" src="http://farm8.static.flickr.com/7090/7078898063_9188a28d54_s.jpg" /></a><a href="http://farm8.static.flickr.com/7140/6932822174_b138d0c6ee_b.jpg" rel="lightbox" title="flickr6932822174"><img alt="flickr6932822174" src="http://farm8.static.flickr.com/7140/6932822174_b138d0c6ee_s.jpg" /></a><a href="http://farm6.static.flickr.com/5350/7078896507_478e6859a2_b.jpg" rel="lightbox" title="flickr7078896507"><img alt="flickr7078896507" src="http://farm6.static.flickr.com/5350/7078896507_478e6859a2_s.jpg" /></a><a href="http://farm8.static.flickr.com/7260/7078895999_fe84df26a0_b.jpg" rel="lightbox" title="flickr7078895999"><img alt="flickr7078895999" src="http://farm8.static.flickr.com/7260/7078895999_fe84df26a0_s.jpg" /></a><a href="http://farm8.static.flickr.com/7280/7078895869_878d089eee_b.jpg" rel="lightbox" title="flickr7078895869"><img alt="flickr7078895869" src="http://farm8.static.flickr.com/7280/7078895869_878d089eee_s.jpg" /></a></div>]]>
        
    </content>
</entry>

<entry>
    <title>Leaving Six Apart : 退職のご挨拶</title>
    <link rel="alternate" type="text/html" href="http://www.goodpic.com/mt/archives2/2012/03/leaving_six_apart.html" />
    <id>tag:www.goodpic.com,2012:/mt//1.1703</id>

    <published>2012-03-31T14:59:59Z</published>
    <updated>2012-03-31T16:35:43Z</updated>

    <summary>シックス・アパート株式会社を退社します。所属は四月末までとなりますが、最終出社は...</summary>
    <author>
        <name>Jun Kaneko</name>
        <uri>http://www.goodpic.com/mt/</uri>
    </author>
    
        <category term="アイデア" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://www.goodpic.com/mt/">
        <![CDATA[<p>シックス・アパート株式会社を退社します。所属は四月末までとなりますが、最終出社は三月末となります。本来であれば、在職中にお世話になったすべての方に、直接ご挨拶させていただくべきところですが、こういった文面でのお知らせとなってしまうことに、お詫び申し上げます。</p>
<p>2005年の入社からは、7年となりますが、初めてMovable Typeをインストールした2003年から数えると9年、まぎれもなくブログが人生の一部となった証でもあります。よい時に、よい場所で、よい人々と出会えることが、人生の幸運であるとするならば、間違いなく最高の環境で働くことができた7年間でした。シックス・アパート、そしてブログを通じて出会うことができた、皆様に何よりも感謝したいと思います。(英語文面あとに続く)</p>

<p>I am leaving my position at Six Apart. My final day will be March 31. I can't believe it has already been 7 years, but I have decided it is time for me to look for a new adventure.</p>
<p>I won't be going away completely; my Six Apart account will be active until the end of April, and I'll be around on the Movable Type mailing lists with my private address. </p>
<p>While I am leaving Six Apart, I continue to have a positive view of the Movable Type platform. I am confident that the team will continue their energetic development, and I look forward to contributing as part of the community. It was a great pleasure working with you all. Thank you !</p>

<p>もちろん、退職後もブログは続けます。2009年から務めて来たMovable Typeのグローバル事業統括という役職からは退きますが、今後はオープンソースコミュニティの一員として、歴史と伝統のあるプラットフォームに貢献することができればと思います。</p>
<p>５月以降については、まだ未定です。折角のタイミングということもあり、尊敬する方々を訪ねながら、これからの１０年にむけて、取り組むべきことを考えている最中です。私の家庭は、日本と英国のミックスということもあり、このような時代だからこそ、日本と世界の間を、もっと自由にお互いの人が移り住み、理解し合って楽しく生活するために、何かできたらと思っています。実は、<a href="http://www.goodpic.com/mt/archives2/2005/04/post_53.html">７年前も同じようなことを書いていて</a>、まさに初心に返りつつ、ブログを書いていてよかった! と思いました。</p>
<p>2030年までに、日本の人口は1000万人減りますが、世界の人口は13億人増えます。数年以内に、40億人以上がスマートフォンでネットに常時接続し、日常生活の出会い、発見、体験をリアルタイムに共有するようになるでしょう。国境を超えたプラットフォーム上で、物や仕事が共通の価格で取引され、必要とする人に、必要なときに届く。フラット化する世界で、より多くの人が魅力的な場所を求めて移動するようになるに違いない。新しい土地、変化する環境に適応するには、モノ以上に知恵が必要です。知恵の共有に、ブログは大きな進歩をもたらしたけれど、今再び、国境や言語の壁を越える、新しいイノベーションが世界で巻き起こりつつある予感がしています。さて、それでは西に漕ぎ出そうが、あるいは東に帆を向けようか。。</p>

]]>
        
    </content>
</entry>

<entry>
    <title>OSX 10.7.3 Lion 環境で perlbrewとDBD::mysql、RVMを導入後に発生したエラーの解決法</title>
    <link rel="alternate" type="text/html" href="http://www.goodpic.com/mt/archives2/2012/02/osx_perlbrew__dbdmysql_rvm_error.html" />
    <id>tag:www.goodpic.com,2012:/mt//1.1702</id>

    <published>2012-02-28T11:03:41Z</published>
    <updated>2012-02-28T11:09:22Z</updated>

    <summary> Mac OSX 10.7.3 Lion に、perlbrewとRVMをインスト...</summary>
    <author>
        <name>Jun Kaneko</name>
        <uri>http://www.goodpic.com/mt/</uri>
    </author>
    
        <category term="Mac" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://www.goodpic.com/mt/">
        <![CDATA[
<p>Mac OSX 10.7.3 Lion に、perlbrewとRVMをインストールしたときに発生したエラーと解決方法のメモです。</p>

<p>何かのCPANモジュール(多分、SSLかSHA的な)をアップデートしたのを切っ掛けに、ターミナルで特定のディレクトリに移動すると、以下のようなエラーが出るようになってしまった。</p>

<pre class="prettyprint"><code class="language-bsh">perl version 5.12.3 can't run /usr/bin/shasum.  Try the alternative(s):
(Error: no alternatives found)

Run "man perl" for more information about multiple version support in Mac OS X.
</code></pre>

<p>検索してもあまり情報がないので、原因となっているモジュールがPerl 5.12 では動かないのだろうと想定して、遅ればせながら <a href="http://search.cpan.org/dist/App-perlbrew/bin/perlbrew">perlbrew - search.cpan.org</a> でPerl環境をつくり直すことにした。 perlbrew のインストールガイドの通りにインストールを完了。</p>

<p>.zshrc には以下を追記。</p>

<pre class="prettyprint"><code class="language-bsh">
source $HOME/perl5/perlbrew/etc/bashrc
</code></pre>

<p>perlbrew で、Perl 5.14.2 をインストールして切り換え。</p>

<pre class="prettyprint"><code class="language-bsh">% perlbrew install perl-5.14.2
% perlbrew switch perl-5.14.2    
</code></pre>

<p>MAMP用に、/usr/bin/perl をシンボリックリンクで置き換え</p>

<pre class="prettyprint"><code class="language-bsh">sudo ln -s /Users/kaneko/perl5/perlbrew/perls/perl-5.14.2/bin/perl /usr/bin/perl
</code></pre>

<h3>CPANコマンドでDBD::mysql をインストールするとエラー</h3>

<p>あとは cpanm で地道にモジュールを再インストール。すると、DBD::mysql のインストールがうまくいかなかったので、以下の記事を参考に手動インストール。</p>

<ul>
  <li><a href="http://blog.iss.ms/2010/09/02/142201">[mac][macports][perl] cpanmで失敗したDBD::mysqlを（半）手動でインストールする « いわぶろ（ろてん）</a></li>
</ul>

<p>macports でインストールした mysql_config5 へのフルパスを指定して手動コンパイルするのが解とのこと。</p>

<pre class="prettyprint"><code class="language-bsh">% cd /Users/kaneko/.cpanm/latest-build/DBD-mysql-4.020
% perl Makefile.PL --mysql_config=/opt/local/bin/mysql_config5
% make && make test
% make install
</code></pre>

<p>Perl 5.14.2 にアップグレードしたら、冒頭の /usr/bin/shasum エラーも無事解消しました。</p>

<h3>RVMで libiconv.2.dylib エラー</h3>

<p>ついでなので、Ruby も<a href="http://beginrescueend.com/">RVM: Ruby Version Manager</a>にしてしまえ。RVMのインストールはOKだったのですが、いざ ruby をインストールするとエラーになる。</p>

<pre class="prettyprint"><code class="language-bsh">% rvm install ruby-1.9.2-p290</code></pre>

<p>こんなエラーがでる。</p>

ld: in /usr/local/lib/libiconv.2.dylib, missing required architecture x86_64 in\
 file for architecture x86_64
collect2: ld returned 1 exit status
make[1]: *** [../../.ext/x86_64-darwin11.3.0/tcltklib.bundle] Error 1
make: *** [mkmain.sh] Error 1

<p>StackOverflowなどを探して、以下の対処法を発見。</p>

<ul>
  <li><a href="http://hello.keewooi.com/ruby-1-9-3-preview-1-available-now/">» Ruby 1.9.3 Preview 1 available now hello@keewooi</a></li>
</ul>

<p>以下の修正で rvm も正しく動くようになりました。</p>

<pre class="prettyprint"><code class="language-bsh">% sudo mv /usr/local/lib/libiconv.2.dylib /usr/local/lib/libiconv.2.dylib.backup
% sudo ln -s /usr/lib/libiconv.2.dylib /usr/local/lib/libiconv.2.dylib
</code></pre>

]]>
        
    </content>
</entry>

<entry>
    <title>ソーシャルグラフ最適化の先にある、ユーザー体験とデータ解析の結合</title>
    <link rel="alternate" type="text/html" href="http://www.goodpic.com/mt/archives2/2012/01/seo_smo_sgo.html" />
    <id>tag:www.goodpic.com,2012:/mt//1.1701</id>

    <published>2012-01-31T13:31:34Z</published>
    <updated>2012-01-31T13:33:08Z</updated>

    <summary> ソーシャルとWeb、あるいは検索エンジンとの関係について、SEO(検索エンジン...</summary>
    <author>
        <name>Jun Kaneko</name>
        <uri>http://www.goodpic.com/mt/</uri>
    </author>
    
        <category term="技術" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://www.goodpic.com/mt/">
        <![CDATA[
<p><a href="http://www.goodpic.com/mt/archives2/2011/12/web_or_app_internet.html">ソーシャルとWeb</a>、あるいは<a href="http://www.goodpic.com/mt/archives2/2012/01/search-vs-social.html">検索エンジンとの関係</a>について、SEO(検索エンジン最適化)、SMO(ソーシャルメディア最適化)をへて、SGO(ソーシャルグラフ最適化)から先につながる流れが、頭の中が整理できたので、新幹線の移動時間を利用してまとめてみた。</p>

<div class="section" id="seo">
  <h3>SEO (検索エンジン最適化)</h3>

  <p>Webは検索エンジンと共に発展してきた。検索で上位に表示されるページが、よいコンテンツと見なされ、検索ロボットが見つけやすいように、ページを最適化するSEO (Search Engine Optimization) が重視された。ブログやCMSによって、構造的なHTMLとWebサイト設計が普及し、インターネットであらゆる情報が見つかるという夢が広がった。</p>
  
  <a href="http://www.goodpic.com/mt/capture/seo.png"><img alt="seo.png" src="http://www.goodpic.com/mt/assets_c/2012/01/seo-thumb-550x322-405.png" width="550" height="322" class="mt-image-center" style="text-align: center; display: block; margin: 0 auto 20px;" /></a>
  
</div> <!-- seo -->

<div class="section" id="smo">
  <h3>SMO (ソーシャルメディア最適化)</h3>

  <p>Twitterの１４０文字制約という発言のしやすさと、新鮮な情報を早く知りたいというニーズが組み合わさり、リアルタイムストリームが普及した。検索エンジンのパーソナライズではなく、情報の流れを可視化する、という発想の転換。</p>

  <a href="http://www.goodpic.com/mt/capture/smo.png"><img alt="smo.png" src="http://www.goodpic.com/mt/assets_c/2012/01/smo-thumb-550x322-407.png" width="550" height="322" class="mt-image-center" style="text-align: center; display: block; margin: 0 auto 20px;" /></a>

  <p>一人のユーザーがリアルタイムで見られる情報量は限られるので、フォローやハッシュタグ(Twitter)、実名の関係性とLike (Facebook)、サークル(Google+)など、新しいフィルタリング手法が開発された。また、情報をシェアしてもらうために、ユーザービリティやレスポンス向上に膨大な開発リソースが投入され、ソーシャルメディア上での関係性の構築 (Social Media Optimization) が重要になった。</p>

</div> <!-- smo -->

<div class="section" id="everyday-media">
  <h3>スマートフォンによる日常生活のメディア化</h3>

  <p>スマートフォンとApp Internetの普及により、日常の空間が直接インターネットにつながった。<a href="http://www.goodpic.com/mt/archives2/2011/12/post_254.html">位置情報やカメラ、マイク、センサーなどで集めた情報をスマートフォンが解析し</a>、伝えたい人と共有したり、新たな情報や出会いの機会を提案するようになった。日常生活のあらゆる行動が、メディアとなる可能性を持ち始めた。</p>

  <a href="http://www.goodpic.com/mt/capture/everyday-media.jpg"><img alt="everyday-media.jpg" src="http://www.goodpic.com/mt/assets_c/2012/01/everyday-media-thumb-550x335-415.jpg" width="550" height="335" class="mt-image-center" style="text-align: center; display: block; margin: 0 auto 20px;" /></a>
</div> <!-- everyday-media -->


<div class="section" id="sgo">
  <h3>SGO (ソーシャルグラフ最適化)</h3>

  <p>Facebookは、Open Graph Protocolによって、Web上のコンテンツやユーザーの行動を、リアルタイムにAPIから利用できるようにした。その動きをさらに進め、日常生活の様々な行動をデータとして活用できるように、<a href="https://developers.facebook.com/docs/opengraph/">タイムラインとOpen Graph アプリの連携</a>をリリースした。</p>

  <a href="http://www.goodpic.com/mt/capture/facebook-og-app.jpg"><img alt="facebook-og-app.jpg" src="http://www.goodpic.com/mt/assets_c/2012/01/facebook-og-app-thumb-550x408-411.jpg" width="550" height="408" class="mt-image-center" style="text-align: center; display: block; margin: 0 auto 20px;" /></a>

  <p>すでに数多くのWebサイトやスマートフォンアプリに、ソーシャルプラグインという形で、Facebookがユーザーを追跡可能なビーコンが埋め込まれている。Open Graph APIによって、「料理した」「買った」「訪れた」「泊まった」「学んだ」など、より具体的な行動をリアルタイムに把握できるようになる。ユーザーが行動することでデータが集まり、共有されて、自立的にソーシャルグラフが拡大する。</p>

  <a href="http://www.goodpic.com/mt/capture/sgo.png"><img alt="sgo.png" src="http://www.goodpic.com/mt/assets_c/2012/01/sgo-thumb-550x322-409.png" width="550" height="322" class="mt-image-center" style="text-align: center; display: block; margin: 0 auto 20px;" /></a>
</div> <!-- sgo -->


<div class="section" id="graph-data">
  <h3>ユーザー体験とデータ解析の結合</h3>

  <p>ソーシャルグラフの活用で先行するFacebookに、GoogleとAppleも、AndroidやiOSというプラットフォームを駆使して追従するだろう。ユーザーの関心(Interest Graph)と関係性(Social Graph)に基づいて、いつでも、どこでも(Mobile Graph)、リアルタイムにつながることで、素晴らしいユーザー体験が提供される。</p>
  
  <a href="http://www.goodpic.com/mt/capture/graphs.png"><img alt="graphs.png" src="http://www.goodpic.com/mt/assets_c/2012/01/graphs-thumb-550x390-413.png" width="550" height="390" class="mt-image-center" style="text-align: center; display: block; margin: 0 auto 20px;" /></a>

  <p>ただし、その逆もまたしかり。あなたが彼らを見つけるように、彼らもあなたを見つけることができる。ユーザー体験とデータ解析は、分ちがたく結びつき、利便性とプライバシーの間で、アイデンティティが試されることになる。法律(コード)が日常生活に大きな影響を与えることが再認識され、群衆と政治の綱引きが繰り返される。</p>

</div> <!-- graph-data -->


]]>
        
    </content>
</entry>

<entry>
    <title>emacs の js2-mode のインデント修正版やjade-mode など</title>
    <link rel="alternate" type="text/html" href="http://www.goodpic.com/mt/archives2/2012/01/emacs_js2-mode_jade-mode.html" />
    <id>tag:www.goodpic.com,2012:/mt//1.1700</id>

    <published>2012-01-30T13:33:59Z</published>
    <updated>2012-01-30T14:42:33Z</updated>

    <summary>emacsのJavaScript用のメジャーモード、js2-modeをオリジナル...</summary>
    <author>
        <name>Jun Kaneko</name>
        <uri>http://www.goodpic.com/mt/</uri>
    </author>
    
        <category term="プログラミング" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://www.goodpic.com/mt/">
        <![CDATA[<p>emacsのJavaScript用のメジャーモード、js2-modeを<a href="http://code.google.com/p/js2-mode/">オリジナルのjs2-mode</a>からフォークした、<a href="https://github.com/mooz/js2-mode/wiki/Changes-from-the-original-mode">インデントや色々と不便な点を修正</a>したバージョンに変更してみた。</p>
<p>オリジナルだと、こんな感じに間延びしたインデントが、</p>

<a href="http://www.goodpic.com/mt/capture/%05emacs-js2-before.png"><img alt="emacs JS2 mode before" src="http://www.goodpic.com/mt/assets_c/2012/01/%05emacs-js2-before-thumb-550x158-399.png" width="550" height="158" class="mt-image-center" style="text-align: center; display: block; margin: 0 auto 20px;" /></a>

<p>きっちりと詰まってくれます。</p>

<a href="http://www.goodpic.com/mt/capture/%05emacs-js2-after.png"><img alt="emacs JS2 mode after" src="http://www.goodpic.com/mt/assets_c/2012/01/%05emacs-js2-after-thumb-550x320-401.png" width="550" height="320" class="mt-image-center" style="text-align: center; display: block; margin: 0 auto 20px;" /></a>

<ul>
  <li><a href="https://github.com/mooz/js2-mode">mooz/js2-mode - GitHub</a></li>
</ul>

<p>Macのターミナルから、</p>

<pre class="prettyprint"><code class="language-bsh">
% git clone git://github.com/mooz/js2-mode.git
% cd js2-mode
% emacs --batch -f batch-byte-compile js2-mode.el
</code></pre>

<p>コンパイルされた、js2-mode.elc を emacsのsite-lispにコピー。emacs.el に以下を追記。</p>

<pre class="prettyprint"><code class="language-lisp">
(autoload 'js2-mode "js2-mode" nil t)
(add-to-list 'auto-mode-alist '("\\.\\(js\\|json\\)$" . js2-mode))
</code></pre>

<p>ついでに<a href="http://nodejs.org/">node.js</a>のWAF、<a href="http://expressjs.com/">Express</a>で標準採用されているテンプレートエンジン、<a href="http://jade-lang.com/">Jade</a>のモードも追加してみる。</p>

<ul>
  <li><a href="https://github.com/brianc/jade-mode">brianc/jade-mode - GitHub</a></li>
</ul>

<p>Githubからクローンして、</p>

<pre class="prettyprint"><code class="language-bsh">
% git clone https://github.com/brianc/jade-mode.git        
</code></pre>

<p>*.elをsite-lispにコピー。以下を.emacs.el に追記。</p>


<pre class="prettyprint"><code class="language-lisp">
(require 'sws-mode)
(require 'jade-mode)    
(add-to-list 'auto-mode-alist '("\\.jade$" . jade-mode))    
</code></pre>

<p>jadeファイルを開くとシンタックスハイライトしつつ、タブキーもよしなに動作してくれます。</p>

<a href="http://www.goodpic.com/mt/capture/emacs-jade.png"><img alt="emacs-jade.png" src="http://www.goodpic.com/mt/assets_c/2012/01/emacs-jade-thumb-550x264-403.png" width="550" height="264" class="mt-image-center" style="text-align: center; display: block; margin: 0 auto 20px;" /></a>
]]>
        
    </content>
</entry>

<entry>
    <title>localhost環境で、Facebook のJavaScript APIでOAuth認証をする</title>
    <link rel="alternate" type="text/html" href="http://www.goodpic.com/mt/archives2/2012/01/localhost-facebook-javascript-api.html" />
    <id>tag:www.goodpic.com,2012:/mt//1.1699</id>

    <published>2012-01-30T13:16:45Z</published>
    <updated>2012-01-30T13:23:58Z</updated>

    <summary> FacebookのJavaScript SDKでOAuthを使ったアプリを、l...</summary>
    <author>
        <name>Jun Kaneko</name>
        <uri>http://www.goodpic.com/mt/</uri>
    </author>
    
        <category term="プログラミング" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://www.goodpic.com/mt/">
        <![CDATA[
<p>Facebookの<a href="https://developers.facebook.com/docs/reference/javascript/">JavaScript SDK</a>でOAuthを使ったアプリを、localhost環境で開発するための設定方法です。FacebookのJavascript SDKを利用すると、ログインしているユーザーやウォールの情報を取得できます。ただし、FB.loginを呼ぶ際に、Facebookがページのドメイン名をチェックするので、localhost/test.html のようなURLだと、「The specified URL is not owned by the application」というエラーが発生する。それを防ぐために、localhost.goodpic.com というようなサブドメインを、ローカルのホストに設定します。</p>

<p>まずは、Facebookでの設定。<a href="https://developers.facebook.com/apps/">Facebook developers</a> から、アプリを選択して、<strong>[Settings] &gt; [Basic]</strong> を選択。 <strong>App Domain</strong> にサブドメイン無しのドメイン名(example.com)を入力する。ただし、その下の <strong>Website : Site URL:</strong> にhttpあるいはhttps から始まるサイトのURL(http://www.example.com) も忘れずに入力しておかないと、App Domainが正しく保存されません。</p>

<a href="http://www.goodpic.com/mt/capture/facebook-subdomain.png"><img alt="Facebookアプリをサブドメインで利用できるように" src="http://www.goodpic.com/mt/assets_c/2012/01/facebook-subdomain-thumb-550x444-397.png" width="550" height="444" class="mt-image-center" style="text-align: center; display: block; margin: 0 auto 20px;" /></a>

<p>設定を保存したら、ローカル環境のhostsを書き換える。Macの場合はターミナルから、</p>

<pre class="prettyprint"><code class="language-bsh">% sudo emacs /private/etc/hosts    
</code></pre>

<p>以下を指定。</p>

<pre class="prettyprint"><code class="language-hosts">127.0.0.1       localhost local.goodpic.com
</code></pre>

<p>ターミナルから、hostsの情報をフラッシュする。</p>

<pre class="prettyprint"><code class="language-bsh">% sudo dscacheutil -flushcache    
</code></pre>

<p>例えば、test.htmlなどのHTMLファイルに以下を記入し、</p>

<pre class="prettyprint"><code class="language-html">&lt;div id=&quot;fb-root&quot;&gt;&lt;/div&gt;
&lt;script src=&quot;./facebook.js&quot;&gt;&lt;/script&gt;
&lt;div id=&quot;fb-page&quot;&gt;&lt;/div&gt;
</code></pre>

<p>facebook.js ファイルでは、Facebook JavaScript ライブラリを非同期に読みこんでログイン処理をする。MAMPなど、ローカルでHTTPサーバを立ち上げて、http://local.goodpic.com/test.html にブラウザからアクセスすると、OAuth 認証が通った authResponse が正しく返ってきます。</p>


<pre class="prettyprint"><code class="language-js">window.fbAsyncInit = function() {
  FB.init({
    appId      : 'YOUR_APP_ID',
    channelUrl : 'YOUR_CHANNEL_URL',
    oauth      : true,
    status     : true, // check login status
    cookie     : true, // enable cookies
    xfbml      : true  // parse XFBML
  });
  // Additional initialization code here

  // Fetch facebook page infromartion
  FB.api('/215071268504237', function(res) {
    var widget = ['&lt;h3&gt;Page Information&lt;/h3&gt;&lt;ul&gt;'];

    for (var key in res) {
      widget.push('&lt;li&gt;',key,' = ',res[key],'&lt;/li&gt;');
    }
    widget.push('&lt;/ul&gt;');
    $('#fb-page').append(widget.join(''));
  });

  FB.login(function(res) {
    if (res.authResponse) {
      
      FB.api('/me', function(res) {
        console.log('Good to see you, ' + res.name + '.');
      });

      FB.api('/215071268504237/feed', function(res) {
        var widget = ['&lt;h3&gt;Page messages&lt;/h3&gt;'];
        console.log(res);

        for (var i = 0, len = res.data.length; i &lt; len; i++) {
          widget.push('&lt;textarea style=&quot;width: 500px;&quot; rows=&quot;5&quot;&gt;', res['data'][i]['message'],'&lt;/textarea&gt;&lt;br /&gt;');
        }
        widget.push('');
        $('#fb-page').append(widget.join(''));
      });

    } else {
      $('#fb-page').append('&lt;p&gt;Login required to browse page messages.&lt;/p&gt;');
    }
  });
};

// Load the SDK Asynchronously
(function(d){
  var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
  js = d.createElement('script'); js.id = id; js.async = true;
  js.src = &quot;//connect.facebook.net/ja_JP/all.js&quot;;
  d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</code></pre>
]]>
        
    </content>
</entry>

<entry>
    <title>レスポンシブWebデザインに対応したCSSフレームワーク、Twitter Bootstrap2を使ってみる</title>
    <link rel="alternate" type="text/html" href="http://www.goodpic.com/mt/archives2/2012/01/twitter-bootstrap2.html" />
    <id>tag:www.goodpic.com,2012:/mt//1.1698</id>

    <published>2012-01-28T14:56:02Z</published>
    <updated>2012-02-02T15:30:23Z</updated>

    <summary>1月31日にリリースが予定(Bootstrap 2 ready for test...</summary>
    <author>
        <name>Jun Kaneko</name>
        <uri>http://www.goodpic.com/mt/</uri>
    </author>
    
        <category term="プログラミング" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://www.goodpic.com/mt/">
        <![CDATA[<p>1月31日にリリースが予定(<a href="http://www.markdotto.com/2012/01/24/bootstrap-2-ready-for-testing-and-feedback/">Bootstrap 2 ready for testing and feedback · Deep Thoughts by Mark Otto</a>)されているTwitterのCSSフレームワーク Bootstrapの新バージョンを使ってみた。Bootstrap2で注目なのは、レスポンシブWebデザインへの対応。ナビゲーションやグリッドもレスポンシブになっていて、かなりいい感じですね。ブログの写真カテゴリのアーカイブがこんな感じに。</p>

<ul>
  <li><a href="http://www.goodpic.com/mt/wave.html">サーフィン Goodpic</a></li>
</ul>

<a href="http://www.goodpic.com/mt/wave.html"><img alt="bootstrap2-grid.png" src="http://www.goodpic.com/mt/assets_c/2012/01/bootstrap2-grid-thumb-550x488-393.png" width="550" height="488" class="mt-image-center" style="text-align: center; display: block; margin: 0 auto 20px;" /></a>

<p>Bootstrap 2の開発版はgithubで入手できます。<a href="https://github.com/twitter/bootstrap/zipball/2.0-wip">2.0のzipファイル</a>もダウンロードできますが、日々開発が進んでいるので、gitをつかってソースコードを取得。Macのターミナルから：</p>

<pre class="prettyprint"><code class="language-bsh">% git clone git://github.com/twitter/bootstrap.git
% cd bootstrap     
</code></pre>

<h4>2/3 追記 : 2.0正式版がリリースされたので以下、チェックアウト方法</h4>
<p>v2.0.0 というタグをGitレポジトリから取得します。</p>

<pre class="prettyprint"><code class="language-bsh">% git status
# On branch 2.0-wip

% git checkout master
Switched to branch 'master'

% git pull
% git tag 
v1.0.0
v1.1.0
v1.1.1
v1.2.0
v1.3.0
v1.4.0
v2.0.0

// v2.0.0 タグを v2_branch というブランチをつくってチェックアウト
% git checkout -b v2_branch v2.0.0 
Switched to a new branch 'v2_branch'

% git status
# On branch v2_branch
</code></pre>


<p>注意 : 以下は、2.0リリース前のソースコード取得方法です。Bootstrap 2のブランチ(2.0-wip)をチェックアウトする。</p>

<pre class="prettyprint"><code class="language-bsh">% git branch -r
  origin/2.0-wip
  origin/HEAD -> origin/master
  origin/gh-pages
% git checkout -b 2.0-wip origin/2.0-wip
% git branch
* 2.0-wip
  master
% git pull
Already up-to-date.    
</code></pre>

<p>bootstrap/docs のドキュメントを参考にHTMLを組んでみました。例えば、トップのナビゲーションなどはPCでは横長に表示されるけれど、</p>

<img alt="Bootstrap2 ナビゲーション" src="http://www.goodpic.com/mt/capture/%05bootstrap-nav.png" width="500" height="207" class="mt-image-center" style="text-align: center; display: block; margin: 0 auto 20px;" />

<p>iPhoneのサイズにブラウザの横幅を縮めると、プルダウンに変化したりします。</p>

<img alt="Bootstrap2 ナビゲーション プルダウン" src="http://www.goodpic.com/mt/capture/%05bootstrap-nav-narrow.png" width="434" height="188" class="mt-image-center" style="text-align: center; display: block; margin: 0 auto 20px;" />

<p>ベースとなるページのHTML構造はこんな感じかな。ただし、開発中ということで構造もガンガン変わっているので、リリース阪では異なるかもしれません。</p>

<pre class="prettyprint"><code class="language-html">
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;ja&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;    
    &lt;title&gt;&lt;/title&gt;
    &lt;meta name=&quot;description&quot; content=&quot;&quot;&gt;
    &lt;meta name=&quot;generator&quot; content=&quot;&quot;&gt;
    &lt;meta name=&quot;author&quot; content=&quot;&quot;&gt;
    &lt;link rel=&quot;start&quot; href=&quot;&quot; title=&quot;Home&quot;&gt;
    &lt;link rel=&quot;alternate&quot; type=&quot;application/atom+xml&quot; title=&quot;Recent Entries&quot; href=&quot;&quot;&gt;

    &lt;!-- Bootstrap v.2 module --&gt;      
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;!-- Le HTML5 shim, for IE6-8 support of HTML elements --&gt;
    &lt;!--[if lt IE 9]&gt;
        &lt;script src=&quot;http://html5shim.googlecode.com/svn/trunk/html5.js&quot;&gt;&lt;/script&gt;
        &lt;![endif]--&gt;

    &lt;!-- Le styles --&gt;
    &lt;link href=&quot;/bootstrap/docs/assets/css/bootstrap.css&quot; rel=&quot;stylesheet&quot;&gt;
    &lt;link href=&quot;/bootstrap/docs/assets/css/bootstrap-responsive.css&quot; rel=&quot;stylesheet&quot;&gt;
    &lt;link href=&quot;/bootstrap/docs/assets/css/docs.css&quot; rel=&quot;stylesheet&quot;&gt;
    &lt;link href=&quot;/bootstrap/docs/assets/js/google-code-prettify/prettify.css&quot; rel=&quot;stylesheet&quot;&gt;
  &lt;/head&gt;

  &lt;body data-spy=&quot;scroll&quot; data-target=&quot;.subnav&quot; data-offset=&quot;50&quot;&gt;
    
    &lt;!-- Navbar
         ================================================== --&gt;
    &lt;div class=&quot;navbar navbar-fixed-top&quot;&gt;
      &lt;div class=&quot;navbar-inner&quot;&gt;
        &lt;div class=&quot;container&quot;&gt;
          &lt;a class=&quot;brand&quot; href=&quot;/index.html&quot;&gt;Goodpic&lt;/a&gt;
          &lt;ul class=&quot;nav&quot;&gt;
            &lt;li class=&quot;&quot;&gt;
              &lt;a href=&quot;/index.html&quot;&gt;Home&lt;/a&gt;
            &lt;/li&gt;            
            &lt;li class=&quot;active&quot;&gt;
              &lt;a href=&quot;/blog/&quot;&gt;Blog&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class=&quot;&quot;&gt;
              &lt;a href=&quot;/about.html&quot;&gt;About&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class=&quot;&quot;&gt;
              &lt;a href=&quot;/contact.html&quot;&gt;Contact&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;

    &lt;div class=&quot;container&quot;&gt;

      &lt;!-- Masthead
           ================================================== --&gt;
      &lt;header class=&quot;&quot; id=&quot;overview&quot;&gt;

        &lt;MTSetVarBlock name=&quot;parent_cat&quot;&gt;&lt;mt:ParentCategory&gt;&lt;/mt:ParentCategory&gt;&lt;/MTSetVarBlock&gt;

        &lt;div class=&quot;page-header&quot;&gt;
          &lt;h1&gt;Page Title &lt;small&gt;Welcome to my homepage.&lt;/small&gt;&lt;/h1&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;subnav&quot;&gt;
          &lt;ul class=&quot;nav pills&quot;&gt;
            &lt;li class=&quot;&quot;&gt;&lt;a href=&quot;/mt/index.html&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;&quot; title=&quot;&quot;&gt;Category A&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;&quot; title=&quot;&quot;&gt;Category B&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;&quot; title=&quot;&quot;&gt;Category C&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/header&gt;

      &lt;!-- Main contents
           ================================================== --&gt;

      &lt;section id=&quot;main&quot;&gt;
        &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;span12&quot;&gt;


          &lt;/div&gt;
      &lt;/section&gt;

      &lt;!-- Footer
           ================================================== --&gt;
      &lt;footer class=&quot;footer&quot;&gt;
        &lt;p class=&quot;pull-right&quot;&gt;&lt;a href=&quot;#&quot;&gt;Back to top&lt;/a&gt;&lt;/p&gt;
        &lt;p&gt;Powered by &lt;a href=&quot;http://twitter.github.com/bootstrap/&quot;&gt;Bootstrap, from Twitter&lt;/a&gt;. &lt;/p&gt;
      &lt;/footer&gt;
      &lt;/div&gt;&lt;!-- /container --&gt;

      &lt;!-- Le javascript --&gt;
      &lt;!-- Placed at the end of the document so the pages load faster --&gt;
      &lt;!-- &lt;script src=&quot;http://code.jquery.com/jquery-1.7.min.js&quot;&gt;&lt;/script&gt; --&gt;
      &lt;script src=&quot;/bootstrap/js/tests/vendor/jquery.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;/bootstrap/docs/assets/js/google-code-prettify/prettify.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;/bootstrap/js/bootstrap-transition.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;/bootstrap/js/bootstrap-alert.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;/bootstrap/js/bootstrap-modal.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;/bootstrap/js/bootstrap-dropdown.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;/bootstrap/js/bootstrap-scrollspy.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;/bootstrap/js/bootstrap-tab.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;/bootstrap/js/bootstrap-tooltip.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;/bootstrap/js/bootstrap-popover.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;/bootstrap/js/bootstrap-button.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;/bootstrap/js/bootstrap-collapse.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;/bootstrap/js/bootstrap-carousel.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;/bootstrap/js/bootstrap-typeahead.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;/bootstrap/docs/assets/js/application.js&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>
]]>
        
    </content>
</entry>

<entry>
    <title>検索エンジンはすでに壊れている。問題はそれをどう直すのかだ。</title>
    <link rel="alternate" type="text/html" href="http://www.goodpic.com/mt/archives2/2012/01/search-vs-social.html" />
    <id>tag:www.goodpic.com,2012:/mt//1.1697</id>

    <published>2012-01-18T15:05:05Z</published>
    <updated>2012-01-18T15:05:30Z</updated>

    <summary> Googleが検索結果にGoogle+を統合すると発表したことに、Twitte...</summary>
    <author>
        <name>Jun Kaneko</name>
        <uri>http://www.goodpic.com/mt/</uri>
    </author>
    
        <category term="アイデア" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="技術" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://www.goodpic.com/mt/">
        <![CDATA[
<p>Googleが検索結果にGoogle+を統合すると発表したことに、<a href="https://twitter.com/#!/amac/status/156811166738427906">Twitterが激しく攻撃</a>したり、検索結果を巡る議論が白熱しています。</p>

<ul>
  <li><a href="http://battellemedia.com/archives/2012/01/what-might-a-facebook-search-engine-look-like.php">What Might A Facebook Search Engine Look Like? | John Battelle's Search Blog</a></li>
  <li><a href="http://battellemedia.com/archives/2012/01/google-responds-nothats-not-how-facebook-deal-went-down-oh-and-i-say-the-search-paradigm-is-broken.php">Google Responds: No,That's Not How Facebook Deal Went Down (Oh, And I Say: The Search Paradigm Is Broken) | John Battelle's Search Blog</a></li>
  <li><a href="http://battellemedia.com/archives/2012/01/its-not-about-search-anymore-its-about-deals.php">It's Not About Search Anymore, It's About Deals | John Battelle's Search Blog</a></li>
  <li><a href="http://battellemedia.com/archives/2011/09/google_google.php">Google = Google+ | John Battelle's Search Blog</a></li>
</ul>

<p>一連の<a href="http://battellemedia.com/">John Battelle's Search Blog</a>の記事を読んで、オープン対クローズド、Web対ソーシャル、<a href="http://www.goodpic.com/mt/archives2/2011/12/web_or_app_internet.html">Web対App Internet</a>という競争が、検索エンジンというWeb最大のマネタイズエンジンを、ついに主戦場に巻き込みつつある様子が理解できました。</p>
<p>以下、自分の解釈も含めておおざっぱにまとめてみます。</p>

<ul>
  <li>検索結果が正しい順番で表示されるというのは、すべてがフラットなHTMLだった過去のWeb1.0時代の話。</li>
  <li>その順番を操作する手段として、SEOや検索連動広告があったが、これもある程度は、フラットなWebを前提にしていた。</li>
  <li>Twitterは、リアルタイムという新しいパラメーターを追加した。<strong>今現在、重要なページと、１日後、１ヶ月後に重要なページは異なる。</strong>つまりリアルタイムのアップデートストリームが検索結果に反映されるかどうかで、順位が変動するようになった。</li>
  <li>Facebookは、ソーシャルという新しいパラメータを追加した。知り合いや、ネットワークで交流のある人など、<strong>ソーシャルグラフ上での評価が反映されると、最適な順番は人それぞれ変わってくる</strong>。</li>
  <li>Facebookなどで、一般に公開されている写真やコンテンツを検索結果に含めた場合、例えばユーザーが削除した場合に、どれぐらいリアルタイムで検索エンジンのインデックスも削除するか？できるのか？ という検索結果の整合性の問題が現れる。</li>
  <li>検索エンジンがWebをクロールするだけでは情報の鮮度は保てない。<strong>パブリックなコンテンツであっても、情報をリアルタイムに体系的、かつ網羅的にAPIで利用できなければ、価値は大きく下がってしまう</strong>(it's near impossible to "organize them and make them universally available" without Facebook's secret sauce (its social graph and related logged in data).)。そこでは、オープンかクローズドかが問題ではなく、データを利用するための契約条件がクリティカルになる。</li>
  <li>Instagram, Path, Appストアの大量のアプリが生み出すコンテンツは、どう検索結果に表示されるべきなのか？</li>
  <li>情報の流れをコントロールする検索エンジンはGoogleの最大の収益源。しかし検索エンジンではたどり着けないコンテンツが増えてきたので、とりあえずの代替戦略として、その先まで所有してしまうことを選んだ。Googlemaps, pages, Google+, 自社サービスから自社サービスへ送客することで、ひとまず領土を拡大することはできた。</li>
  <li>では『本当に望ましい検索結果』とは何か？ その答えはまだ無い。<strong>一つの答えはすべてがFacebookプラットフォーム上に集約されること。Webに埋め込まれたOpen Graph Protocol(Likeボタン)や、アプリに組み込まれたソーシャル認証機能を通じて、Facebookが集めたデータをインデックス化し、何らかの形で検索できるようにする。</strong>ただし、それが唯一の回答でも無いだろう。</li>
</ul>

<p>以上、記事を読んだ個人的な理解ですが、『Our Cherished Search Paradigm Is Broken (But We Will Fix It....Eventually)』という結論は、何か非常に合点がいくものでした。結局のところ、<strong>正しい検索のありかたは、今は誰も分からなくなっている</strong>。例えば、Pinterestは、TwitterやFacebookが火をつけたリアルタイムストリームとはまったく違うアプローチ、むしろ逆にリアルタイムじゃないがゆえに、ビジュアルで感覚的に心地よい情報の発見方法を見つけた。</p>
<p>パブリックなWebとソーシャルを比較するときに、プライベート、プライバシーという面に目がいきがちだけれど、<strong>基本的にビジネスの源泉はパブリックなコンテンツにある</strong>ことを忘れてはいけない。Webでコンテンツを保護するためにお金を払う人はいない。より多くの人に、沢山のコンテンツを見てもらいたい人が、広告としてお金を払うのがWebのビジネスモデル。プライバシー情報も、公開されたコンテンツに対するターゲティング広告に結びつかないと利益を生まない。</p>
<p>こういった様々な要素から、『新しい検索』を創れるかどうかに競争はシフトしてきているのではないだろうか。</p>
]]>
        
    </content>
</entry>

<entry>
    <title>日用品のスマートショッピングは、データの連携が重要に</title>
    <link rel="alternate" type="text/html" href="http://www.goodpic.com/mt/archives2/2012/01/smart-shopping.html" />
    <id>tag:www.goodpic.com,2012:/mt//1.1696</id>

    <published>2012-01-15T14:14:37Z</published>
    <updated>2012-01-15T14:17:17Z</updated>

    <summary> 『近未来のファッション: Pinterest, Etsy, Kinect Sh...</summary>
    <author>
        <name>Jun Kaneko</name>
        <uri>http://www.goodpic.com/mt/</uri>
    </author>
    
        <category term="Webサービス" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="アイデア" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://www.goodpic.com/mt/">
        <![CDATA[
<p>『<a href="http://www.goodpic.com/mt/archives2/2012/01/kinect_shop_pinterest_etsy.html">近未来のファッション: Pinterest, Etsy, Kinect Shop</a>』に続いて、今度は日用品のショッピングについて。全世界の家庭で、１日に数時間を、日用品の買い物に費やしていることを考えると、スマートなショッピング方法が広まることで、時間という最も貴重な資源を増やせるのかもしれません。</p>

<div class="section" id="shop-in-the-subway">
  <h3>地下鉄のホームの壁がスーパーマーケットに</h3>

  <p>国際的なスーパーマーケットチェーン、TESCOの韓国での広告キャンペーン。地下鉄の壁に再現されたスーパーマーケットの棚から、商品をスマートフォンで購入して、自宅に帰る頃に配達してくれる。期間限定のキャンペーンですが、オンラインストアの登録ユーザ数、売り上げ共に大きく伸びたそうです。</p>
  <iframe width="550" height="403" src="http://www.youtube.com/embed/nJVoYsBym88?rel=0" frameborder="0" allowfullscreen></iframe>
  <ul>
    <li><a href="http://www.techi.com/2011/07/augmented-grocery-shopping/">Augmented Grocery Shopping: How a Korean grocer moved virtual shopping to the subway | Techi.com</a></li>
  </ul>
</div> <!-- shop-in-the-subway -->

<div class="section" id="amazon-flow">
  <h3>カメラでリアルタイムに商品を認識</h3>

  <p>Amazon A9が2011年11月に公開したiPhoneアプリをつかえば、もっと簡単にリアルとバーチャルのeコマースをつなげられます。カメラでリアルタイムに商品を識別して、アマゾンの商品データベースから検索、レビューを見たり、もちろん購入も可能。</p>
  
  <iframe width="550" height="309" src="http://www.youtube.com/embed/ThUQyi0BO_k?rel=0" frameborder="0" allowfullscreen></iframe>
  <ul>
    <li><a href="http://jp.techcrunch.com/archives/20111102amazons-flow-iphone-app-brings-augmented-reality-to-barcode-scanning/">AmazonのiPhoneアプリ「Flow」は、バーコード商品検索と拡張現実を合体</a></li>
  </ul>
</div> <!-- amazon-flow -->

<div class="section" id="Blippar">
  <h3>町中にスマートフォンで仮想広告を表示する</h3>

  <p>同様な技術で、QRコードなどを必要とせず、カメラで町中や新聞などの広告をリアルタイムに解析して、仮想広告をオーバーレイ表示するアプリ。UKの会社で、すでに数多く利用されているようです。</p>
  <iframe width="550" height="309" src="http://www.youtube.com/embed/d6irc0jwKC8?rel=0" frameborder="0" allowfullscreen></iframe>
  <ul>
    <li><a href="http://blippar.com/">Mobile Augmented Reality Advertising | blippar.com</a></li>
  </ul>
</div> <!-- Blippar -->

<div class="section" id="shopkick">
  <h3>客の来店を自動で認識するアプリ</h3>
  <p>あるいは、ユーザーが探すのではなく、店舗がユーザーを認識する方法。店に入ったユーザーのアプリが発するシグナルを自動で検知してクーポンやポイントを提供する。2010年8月のローンチから１年で、全米3250店舗で採用され200万回以上のビジターをカウントしているそうです。</p>
  <iframe width="550" height="309" src="http://www.youtube.com/embed/2uixneqbqkI?rel=0" frameborder="0" allowfullscreen></iframe>
  <ul>
    <li><a href="http://shopkick.com/">shopkick</a></li>
    <li><a href="http://jp.techcrunch.com/archives/20111121visa-teams-up-with-shopkick-to-dole-out-retailer-reward-points-at-the-point-of-sale/">店に入るだけでポイントが―VisaとShopkickが画期的ポイントカード・サービスを開始</a></li>
  </ul>
</div> <!-- shopkick -->


<div class="section" id="ziplist">
  <h3>Ziplist</h3>
  <p><a href="http://get.ziplist.com/">ZipList</a>は、PCやモバイルでショッピングリストを管理するサービスです。レシピをクリップすると、自然言語解析で材料を抽出してリストに追加、米国内150,000件のショップへの道案内をしてくれる。Martha StewartやThe Daily Mealなどのライフスタイルメディア、有名シェフ、クッキンングブロガーなど外部のレシピサイトと連携して、レシピをコレクションする機能もあります。逆にショッピング中に食材からレシピを検索することもできる。</p>

  <iframe width="550" height="309" src="http://www.youtube.com/embed/Yss2WWBhbpA?rel=0" frameborder="0" allowfullscreen></iframe>
  <ul>
    <li><a href="http://get.ziplist.com/">Welcome to ZipList - The Only Shopping List and Recipe Box You Need.</a></li>
    <li><a href="http://jp.techcrunch.com/archives/20111026ziplists-grocery-list-recipe-search-app-gets-overhauled/">レシピに基づく買い物を人工知能的に手助けしてくれるZipListがアップデート</a></li>
  </ul>
  <p>iPhoneアプリは、Siriにも対応しています。</p>

  <iframe width="560" height="410" src="http://www.youtube.com/embed/eScbAcgM758" frameborder="0" allowfullscreen></iframe>

</div> <!-- ziplist -->

<div class="section" id="supermarket-api">
  <h3>スーパーマーケットのAPI化</h3>

  <p>日用品や食品をデータベース化して、APIとして公開する取り組みもあります。食品に含まれる成分、売っている店舗の棚の位置など、様々な情報をAPI経由で取得できるようにするというもの。データ自体は、メーカーや流通業者がすでに持っているので、あとはそれをどう統合して、プログラム可能なAPIとして提供できるか？</p>

  <a href="http://www.goodpic.com/mt/capture/simpleupc_homepage.png"><img alt="simpleupc_homepage.png" src="http://www.goodpic.com/mt/assets_c/2012/01/simpleupc_homepage-thumb-550x349-391.png" width="550" height="349" class="mt-image-center" style="text-align: center; display: block; margin: 0 auto 20px;" /></a>
  <ul>
    <li><a href="http://jp.techcrunch.com/archives/20111013aislefinder-launches-supermarket-api-an-open-source-api-for-groceries/">AisleFinderがSupermarket APIを公開―オープンソースの食料品雑貨情報</a></li>
    <li><a href="http://techcrunch.com/2011/08/31/pushpins-launches-simpleupc-product-information-as-a-service/">Pushpins Launches SimpleUPC: Product Information-As-A-Service | TechCrunch</a></li>
    <li><a href="http://www.pushpinsapp.com/">Pushpins App | Instant Grocery Coupons for iPhone | Lists, Nutrition, & Digital Coupons</a></li>
  </ul>

  <p>日本でもクックパッドと小売店の会員ID連携が始まっているようです。</p>
  <ul>
  <li><a href="http://www.advertimes.com/20111202/article43053/">全国462店舗の「お買い物カード」会員とクックパッド会員のIDが連携、 購買履歴を活用した販促が可能に #販促会議 | AdverTimes（アドタイ）</a></li>
</ul>
</div> <!-- supermarket-api -->

  <p>レシピ、買い物リスト、店舗情報、生産者、成分表記などのデータが連携して、いつでも、どこでも、本当に必要な買い物ができるようになると、日常生活のかなりの時間が節約できそうですね。</p>



]]>
        
    </content>
</entry>

<entry>
    <title>近未来のファッション: Pinterest, Etsy, Kinect Shop</title>
    <link rel="alternate" type="text/html" href="http://www.goodpic.com/mt/archives2/2012/01/kinect_shop_pinterest_etsy.html" />
    <id>tag:www.goodpic.com,2012:/mt//1.1695</id>

    <published>2012-01-14T14:40:32Z</published>
    <updated>2012-01-14T14:40:11Z</updated>

    <summary> 『知能を持ったセンサーが、日常とインターネットをつなぐアプリケーション１０選』...</summary>
    <author>
        <name>Jun Kaneko</name>
        <uri>http://www.goodpic.com/mt/</uri>
    </author>
    
        <category term="Webサービス" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://www.goodpic.com/mt/">
        <![CDATA[
<p>『<a href="http://www.goodpic.com/mt/archives2/2011/12/post_254.html">知能を持ったセンサーが、日常とインターネットをつなぐアプリケーション１０選』</a>に続いて、新しいインターフェースやサービスが、どのように日常を変えうるのかを考えてみたいと思います。まずはファッションとショッピングについて。</p>

<div class="section" id="kinect-shop">
  <h3>Kinectでファッションアイテムを試着</h3>

  <p>こちらは、Razorfish社が作成したコンセプトビデオで、Kinectをつかって商品を試着、購入しています。<a href="http://japanese.engadget.com/2012/01/09/pc-kinect-12-2-1-250-150/">2012年2月にはPC版が250ドルで発売</a>されたりと、いよいよ現実味を帯びて来ました。</p>
  <iframe src="http://player.vimeo.com/video/24880458?title=0&amp;byline=0&amp;portrait=0" width="550" height="309" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
  <ul>
    <li><a href="http://emergingexperiences.com/2011/06/kinectshop/">KinectShop - The Next Generation of Shopping - Razorfish + Emerging Experiences</a></li>
  </ul>
</div> <!-- kinnect-shop -->

<div class="section" id="etsy-pintarest">
  <h3>EtsyとPinterest</h3>

  <p>2011年に急成長を遂げた、ビジュアルなクリッピングサービスの<a href="http://pinterest.com/">Pinterest</a>。</p>
  <a href="http://www.goodpic.com/mt/capture/etsy-pinterest.jpg"><img alt="Pinterest" src="http://www.goodpic.com/mt/assets_c/2012/01/etsy-pinterest-thumb-550x422-386.jpg" width="550" height="422" class="mt-image-center" style="text-align: center; display: block; margin: 0 auto 20px;" /></a>
  <ul>
    <li><a href="http://techcrunch.com/2011/11/22/pinterest-pageviews-etsy-grew-2000/">Pinterest Is Now Pulling In More Pageviews Than Etsy; Grew 2,000% Since June | TechCrunch</a></li>
  </ul>

  <p>他のソーシャルサイトと何が違うのか? <a href="http://www.arikhanson.com/2011/12/13/whats-behind-the-pinterest-craze-15-super-users-share-their-thoughts/">Pintarestヘビーユーザー15名のインタビュー</a>では、Visual, Inspirationというキーワードが強調されています。人をフォローするのではなく、趣味やスタイルをフォローして、ビジュアルだけを見ていると癒されるし、インスピレーションがわいてくると。ソーシャル上でのテキストのコミュニケーションより疲れない、雑誌をめくるように気楽に楽しめる。</p>
  <blockquote>
    <ul>
      <li>To me, twitter is words, Facebook is family, Linked-in is professional, Foursquare is for stalking, Google + is worthless, Instagram is photographs, and Pinterest is a magazine with no words that can appeal to every type of person because you can tailor it to be exactly what you want.</li>
      <li>it's primarily "visual snacking" in much the way that Twitter is "information snacking."</li>
      <li>Because it's not like any of the other networks out there. It's visual, it's style, it's inspiration, it's creative. You don't hurt anyone's feelings if you follow or don't follow. For me, it's like thumbing through magazines and ripping out all the pages that inspire me-x 1000! It's a great way to relax and get inspired.</li>
    </ul>
  </blockquote>
  <p><a href="http://pinterest.com/goodpic/">試しに使ってみましたが</a>、興味を引かれたボードをいくつかフォローして、リピンするだで、なんだか自分だけの雑誌を作っているような気がしてくる。満足感を得るまでの手間がすごく少ないですね。</p>
  <p><a href="http://blog.eladgil.com/2011/12/how-pinterest-will-transform-web-in.html">Elad Blog: How Pinterest Will Transform the Web in 2012: Social Content Curation As The Next Big Thing</a> では、FacebookやTumblrと比較して、PinterestやFab.comなどの流行を『2012 Will Be The Year of Curated Sets』と表現しています。EtsyをPinterest風にブラウザするマッシュアップも現れました。</p>
  
  <a href="http://www.goodpic.com/mt/capture/scrollzy.jpg"><img alt="scrollzy.jpg" src="http://www.goodpic.com/mt/assets_c/2012/01/scrollzy-thumb-550x334-388.jpg" width="550" height="334" class="mt-image-center" style="text-align: center; display: block; margin: 0 auto 20px;" /></a>
  <ul>
    <li><a href="http://www.scrollsy.com/">Scrollsy.com - Scroll Etsy.com</a></li>
  </ul>
  
</div> <!-- etsy-pintarest -->

<div class="section" id="kickstarter">
  <h3>Kick Starter で制作費を集める</h3>

  <p>Pinterestでキュレーションされるアイテムは、ファッションやリビング、ウェディング、クッキングレシピなどが多いようです。ソーシャルファンディングの<a href="http://www.kickstarter.com/">Kickstarter</a>は、単に資金を集めるというよりは、モノを作る前に魅力を伝えて買ってもらう、という側面が強いのかなと思います。</p>

  <iframe frameborder="0" height="410px" src="http://www.kickstarter.com/projects/473802318/epaulettes/widget/video.html" width="480px"></iframe>
</div> <!-- kickstarter -->

 <p>実際にいくつかのプロジェクトにファンドしてみましたが、作者の人から制作の過程を伝えるメールが来たりして、完成品を買うのとは違う楽しみがあります。</p>
<p>ハンドメイドのファッションアイテムの制作資金をKick Starterで集めて、Etsyで販売する。Pinterestで雑誌風にキュレーションされて、Kinect Shopでバーチャルに試着、購入できたりしたら、なんだかすごい世界になりそうです。</p>]]>
        
    </content>
</entry>

<entry>
    <title>Fbootstrapp を使って、ブログの新着記事をFacebookページに表示するFacebook App を作ってみた</title>
    <link rel="alternate" type="text/html" href="http://www.goodpic.com/mt/archives2/2012/01/fbootstrapp_facebook_app.html" />
    <id>tag:www.goodpic.com,2012:/mt//1.1694</id>

    <published>2012-01-10T15:32:05Z</published>
    <updated>2012-01-18T06:43:30Z</updated>

    <summary> CSSフレームワークのTwitter Bootstrap をベースに、Face...</summary>
    <author>
        <name>Jun Kaneko</name>
        <uri>http://www.goodpic.com/mt/</uri>
    </author>
    
        <category term="プログラミング" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://www.goodpic.com/mt/">
        <![CDATA[
<p>CSSフレームワークのTwitter Bootstrap をベースに、Facebookっぽいデザインを簡単に実現する<a href="http://ckrack.github.com/fbootstrapp/">Fbootstrapp by Clemens Krack</a> を使ってみた。</p>

<img alt="facebook-goodpic-1.jpg" src="http://www.goodpic.com/mt/capture/facebook-goodpic-1.jpg" width="550" height="382" class="mt-image-center" style="text-align: center; display: block; margin: 0 auto 20px;" />

<ul>
  <li><a href="https://www.facebook.com/pages/Goodpic/215071268504237?sk=app_208859919142384">FacebookページにAppとして表示した例</a></li>
  <li><a href="http://www.goodpic.com/mt/facebook/index.php">Movable Typeで出力したFacebook Application用のphp</a></li>
</ul>

<p>Movable Typeでfacebook App用にテンプレートを出力して、fbootstrappのCSSを読み込むだけで、それっぽいデザインになりました。Facebookのサイトは以外とHTML構造が複雑で、Facebookページに馴染むデザインにするのが結構手間なので、これは助かりますね。Twitter Bootstrapのグリッドレイアウトやナビゲーションなどもそのまま使える。とりあえずブログの新着記事の一覧に、はてブやTweet数、Facebookコメントを表示するだけの簡単なアプリですが、時間をみつけてもうちょっとテーマっぽくみせたら面白いかも?</p>
]]>
        
    </content>
</entry>

<entry>
    <title>Macbook Air のSSDをOWC 256GBに交換して、Parallels+Windows7をインストール</title>
    <link rel="alternate" type="text/html" href="http://www.goodpic.com/mt/archives2/2012/01/macbook_air-ssd_owc.html" />
    <id>tag:www.goodpic.com,2012:/mt//1.1693</id>

    <published>2012-01-09T15:50:50Z</published>
    <updated>2012-01-09T16:02:58Z</updated>

    <summary> Macbook Air（Late 2010）のSSDを256GBに交換した。自...</summary>
    <author>
        <name>Jun Kaneko</name>
        <uri>http://www.goodpic.com/mt/</uri>
    </author>
    
        <category term="Mac" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://www.goodpic.com/mt/">
        <![CDATA[
<p>Macbook Air（Late 2010）のSSDを256GBに交換した。自宅のiMacが古くなってきたこともあり、Airに集約しようと思ったのですが、Parallels + Windowsをインストールするには、標準の128GBだとちょっと容量が足りない。本体を買い替るには早いので、評判のいいOWCのSSDをUSサイトで注文してみました。Apple純正よりも68%早いとのふれこみ。</p>

<ul>
  <li><a href="http://eshop.macsales.com/item/Other%20World%20Computing/SSDAPAE240/">OWC OWCSSDAPAE240 240GB Mercury Aura Pro Express</a></li>
</ul>

<p>240GBのSSDが$399。その他にも、使わなくなるSSDを外付けUSBドライブにする<a href="http://eshop.macsales.com/item/OWC/SSDAPOTGU3/">OWC OWCSSDAPOTGU3 Mercury On-The-Go USB 3.0/2.0</a>（セット割りで$35.99）、Parallels Desktop 7 + Windows 7 Premium 64bit OEM（$164）、iPadスタンド（$15）の総額$603.99に送料が$63.21加わって、トータルは$667.2でした。オーダーしてから年末年始をはさんで２週間ぐらいで到着。関税は着払いで1500円でした。</p>

<p><a href="http://farm8.static.flickr.com/7019/6667098261_a1e3c10308_b.jpg" rel="lightbox" title="flickr6667098261"><img alt="p1020918" src="http://farm8.static.flickr.com/7019/6667098261_a1e3c10308.jpg" /></a></p>

<p>パッケージには、Macbook Airの背面ビスとSSD固定ビスを外すためのドライバが、２種類含まれています。具体的な手順を解説したビデオもあるので（<a href="http://eshop.macsales.com/installvideos/macbook_air_2010/">MacBook Installation Video at OtherWorldComputing.com</a>）、iPadで見ながら作業すれば迷う心配もありません。</p>

<p><a href="http://farm8.static.flickr.com/7001/6667103263_a4cd0f63b1_b.jpg" rel="lightbox" title="flickr6667103263"><img alt="p1020919" src="http://farm8.static.flickr.com/7001/6667103263_a4cd0f63b1.jpg" /></a><br /><a href="http://farm8.static.flickr.com/7146/6667108083_bb9b1b5f76_b.jpg" rel="lightbox" title="flickr6667108083"><img alt="p1020920" src="http://farm8.static.flickr.com/7146/6667108083_bb9b1b5f76.jpg" /></a></p>

<p>裏蓋をはずすと、SSDモジュールはネジ一本外すだけで、簡単に交換できました。</p>

<p><a href="http://farm8.static.flickr.com/7173/6667113305_8a1a35cb40_b.jpg" rel="lightbox" title="flickr6667113305"><img alt="p1020921" src="http://farm8.static.flickr.com/7173/6667113305_8a1a35cb40.jpg" /></a></p>

<p>SSDを交換したら、Macbook Airに付属の起動用USBを挿してブートする。SSDも240GBと正しく認識されているので、パーティションを作成。</p>

<p><a href="http://farm8.static.flickr.com/7141/6667117671_215fae33d5_b.jpg" rel="lightbox" title="flickr6667117671"><img alt="p1020923" src="http://farm8.static.flickr.com/7141/6667117671_215fae33d5.jpg" /></a><br /><a href="http://farm8.static.flickr.com/7156/6667131097_cff6bcddcf_b.jpg" rel="lightbox" title="flickr6667131097"><img alt="p1020926" src="http://farm8.static.flickr.com/7156/6667131097_cff6bcddcf.jpg" /></a></p>

<p>作成したパーティションに起動用USBからMac OSXをインストール。あとでTime Machineから環境を移行する場合は、新しい環境と古い環境で違うユーザー名でないとTime Machineからの復元ができないので、旧環境とは別のユーザ名でアカウントを作成しておいた方がよいです。起動USBからSnow Leopardをインストールしてアップデート、App StoreにサインインしてLionに再度アップグレードしました。</p>

<p><a href="http://farm8.static.flickr.com/7168/6667138359_c66e3ab467_b.jpg" rel="lightbox" title="flickr6667138359"><img alt="installin mac osx" src="http://farm8.static.flickr.com/7168/6667138359_c66e3ab467.jpg" /></a></p>

<p>Lionにアップグレードしたら、Time Machine のバックアップから環境を復元。AirはWifi経由なので８時間ぐらいかかったけど、ほぼ完全に環境を復元できました。ただし、Macports でインストールしたPerl環境は、改めて /usr/bin/perl から /opt/local/bin/perl にシンボリックリンクを張る必要があった。</p>

<p><a href="http://farm8.static.flickr.com/7023/6666310273_a532b3bfa6_b.jpg" rel="lightbox" title="flickr6666310273"><img alt="macbook airに、windows 7をparallels（v.7）でインストール" src="http://farm8.static.flickr.com/7023/6666310273_a532b3bfa6.jpg" /></a></p>

<p>Parallels v.7 をインストール。Windows 7のインストールにはDVDドライブが必要なので、Macbook Air SuperDriveがあったほうがよいようです。</p>

<p><a href="http://farm8.static.flickr.com/7015/6667144199_7817e9f27c_b.jpg" rel="lightbox" title="flickr6667144199"><img alt="owc on-the-go usb3 kit" src="http://farm8.static.flickr.com/7015/6667144199_7817e9f27c.jpg" /></a></p>
<p>取り外したApple標準のSSDを外付けUSBにするキット、Mercury On-The-Go Pro。</p>
<p><a href="http://farm8.static.flickr.com/7142/6667149955_4c7852f0ea_b.jpg" rel="lightbox" title="flickr6667149955"><img alt="owc on-the-go usb3 kit" src="http://farm8.static.flickr.com/7142/6667149955_4c7852f0ea.jpg" /></a></p>
<p>こんな風に取り外したSSDをボードに差し込むと、128GBのSSDが外部USBメモリとして利用できます。しばらく使って問題なければ、フォーマットしてiPhotoのデータ置き場にしようかな。</p>
<p><a href="http://farm8.static.flickr.com/7027/6667155567_d585d09b47_b.jpg" rel="lightbox" title="flickr6667155567"><img alt="owc on-the-go usb3 kit" src="http://farm8.static.flickr.com/7027/6667155567_d585d09b47.jpg" /></a></p>
<p>本体240GB+外付け128GBがあれば、かなり余裕をもって高速SSD生活を堪能できそうです。</p>
]]>
        
    </content>
</entry>

<entry>
    <title>知能を持ったセンサーが、日常とインターネットをつなぐアプリケーション１０選</title>
    <link rel="alternate" type="text/html" href="http://www.goodpic.com/mt/archives2/2011/12/post_254.html" />
    <id>tag:www.goodpic.com,2011:/mt//1.1690</id>

    <published>2011-12-27T13:16:02Z</published>
    <updated>2011-12-27T13:19:19Z</updated>

    <summary> 日常とインターネットが、知能を持ったセンサーによって本格的につながり始めていま...</summary>
    <author>
        <name>Jun Kaneko</name>
        <uri>http://www.goodpic.com/mt/</uri>
    </author>
    
        <category term="技術" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://www.goodpic.com/mt/">
        <![CDATA[

<p>日常とインターネットが、知能を持ったセンサーによって本格的につながり始めています。個人的には、2011年はインテリジェントセンサー元年、そして2012年にカンブリア爆発をむかえると予測しています。</p>
<p>iPhoneが登場してすぐに、GPSやモーション、タッチセンサーを利用したアプリは次々とリリースされてきました。最近では、単に記録したり検索するだけでなく、センサーが集めたデータをスマートフォンのアプリでリアルタイムに解析して、ユーザーに提案する知能を持ち始めている。また、用途に特化した安価なセンサーデバイスの開発も進んでいます。</p>
<p>『<a href="http://www.goodpic.com/mt/archives2/2011/12/web_or_app_internet.html">Webは（繰り返し）死に、インターネットが進化する</a>』で、App InternetではWebとは異なるハイパーリンクが生まれている、と書きましたが、知能をもったセンサーが、日常生活の中で、人間とインターネットを緻密にリンクさせつつあるような気がしています。2011年に個人的に印象に残ったサービス、デバイスを以下に集めてみました。</p>

<div class="section" id="intonow">
  <h3>INTO_NOW</h3>

  <p>TVとネットをつなぐiPadアプリ。見ているTV番組の音声を、iPadのマイクで識別して番組の関連情報を表示したり、ソーシャルネットワークにつなぐ。放送済みの番組のサウンドプリントを検索するプラットフォームサービスも提供している。Yahoo!に買収された。</p>
  <ul>
    <li><a href="http://www.intonow.com/ci">IntoNow ― Connect with your friends around the shows you love</a></li>
  </ul>
  <iframe width="550" height="403" src="http://www.youtube.com/embed/GmEiE4qcV3k?rel=0" frameborder="0" allowfullscreen></iframe>
</div> <!-- intonow -->

<div class="section" id="jowbone">
  <h3>Jawbone Up : 生活を記録、改善するブレスレット</h3>

  <p>センサーとシグナル(振動)が組み込まれたブレスレット。身につけているだけで、一日の運動や睡眠を記録する。iPhoneと連携して、食事を写真で記録したり、友達と共有したり。Nike+と同じ<a href="http://www.motionx.com/">MotionX</a>社の技術を採用している。</p>
  <ul>
    <li><a href="http://jawbone.com/up/product">Up by Jawbone | Band + App Inspires Healthy Living</a></li>
    <li><a href="http://www.motionx.com/">MotionX</a></li>
  </ul>
  <iframe width="560" height="315" src="http://www.youtube.com/embed/GiC8QR_oHhk" frameborder="0" allowfullscreen></iframe>
</div> <!-- jowbone -->

<div class="section" id="nest">
  <h3>nest : 家庭の行動パターンを学習するサーモスタット</h3>

  <p>元のiPod開発責任者が作った家庭用のサーモスタット。ユーザーの家庭の行動パターンを学習して、部屋の温度調整を自動でおこなう。高性能画像プロセッサやZigBee通信モジュールも組み込まれている。</p>
  <ul>
    <li><a href="http://www.nest.com/">Nest | The Learning Thermostat</a></li>
    <li><a href="http://techcrunch.com/2011/10/24/ipod-godfather-tony-fadell-finally-reveals-his-new-product-a-thermostat-no-really/">iPod Godfather Tony Fadell Finally Reveals His New Product: A Thermostat. No, Really. | TechCrunch</a></li>
  </ul>
  <iframe width="560" height="315" src="http://www.youtube.com/embed/QCJ1PnVlzIE?rel=0" frameborder="0" allowfullscreen></iframe>
</div> <!-- nest -->

<div class="section" id="Twine">
  <h3>Twine : Wifi対応の手のひらサイズのセンサー</h3>

  <p>電池で動作する手のひらサイズのセンサー。温度センサー、加速度計が標準装備され、磁力スイッチ、湿度センサーなども追加可能。Wifiを内蔵して、Webブラウザから指定した条件を検知すると、SMS、Twitter、メール、HTTPなどのアクションを発動する。MITメディアラボ出身のSupermechanicalが開発。2011年12月時点で、<a href="http://www.kickstarter.com/projects/supermechanical/twine-listen-to-your-world-talk-to-the-internet">Kickstartで40万ドルを調達（2000台以上を事前販売）</a>している。</p>
  <ul>
    <li><a href="http://www.kickstarter.com/projects/supermechanical/twine-listen-to-your-world-talk-to-the-internet">Twine : Listen to your world, talk to the Internet by Supermechanical ― Kickstarter</a></li>
    <li><a href="http://jp.techcrunch.com/archives/20111125twine-foreshadows-a-future-where-all-objects-talk-to-the-internet/">ついに「物」がインターネットアカウントを持ってコミュニケーションする-Twineはその前兆</a></li>
  </ul>
  <iframe frameborder="0" height="410px" src="http://www.kickstarter.com/projects/supermechanical/twine-listen-to-your-world-talk-to-the-internet/widget/video.html" width="480px"></iframe>
</div> <!-- Twine -->


<div class="section" id="wildchords">
  <h3>WildChords : ギターのコードを識別する学習アプリ</h3>
  
  <p>実際のギターを引きながら、初心者が学習できるiPadアプリ。画面に出てくるキャラクター、例えばCコードだったらクロコダイル（Crocodile）にあわせてギターを弾くと、iPadのマイク経由でWildChordsアプリがリアルタイムに正しいか間違っているかを表示する。Best European Learning Game 2011 に選ばれた。以下のピッチ動画も楽しそうでいいです。</p>
  <ul>
    <li><a href="http://www.ovelin.com/">Ovelin | Developer of Wildchords</a></li>
  </ul>
  <iframe width="560" height="315" src="http://www.youtube.com/embed/lSivD-G0nQI" frameborder="0" allowfullscreen></iframe>
</div> <!-- wildchords -->

<div class="section" id="TableDrum">
  <h3>TableDrum : 周囲のものをドラムに変える</h3>
  <p>身の回りの物を叩くと、その音をiPhoneのマイクで検知して、リアルなドラムの音に変えてくれるアプリ『テーブル・ドラム』。机をトムトムに、コーヒーポットをスネアに、受皿をシンバルになど、自由に設定できる。(<a href="http://wired.jp/2011/08/19/%E3%81%AA%E3%82%93%E3%81%A7%E3%82%82%E3%83%89%E3%83%A9%E3%83%A0%E3%81%AB%E3%81%A7%E3%81%8D%E3%82%8Biphone%E3%82%A2%E3%83%97%E3%83%AA/">なんでもドラムにできるiPhoneアプリ « WIRED.jp</a>)</p>
  <ul>
    <li><a href="http://www.tabledrum.com/">Tabledrum</a></li>
  </ul>
  <iframe width="560" height="315" src="http://www.youtube.com/embed/67wYoefHqug" frameborder="0" allowfullscreen></iframe>
</div> <!-- TableDrum -->


<div class="section" id="soneru">
  <h3>LiveCycling : ANT+対応のサイクルコンピューター</h3>
  <p>iPhoneを、自転車に乗る人用の高性能サイクルコンピューターにするアプリ。ANT+という低消費電力無線通信用の規格に対応していて、ANT+に対応しているセンサーを自転車に設置。スピード、ケイデンス、心拍数のリアルタイム表示、GPS記録する。</p>
  <ul>
    <li><a href="http://www.soneru.com/rek-iphone-cyclecomputer-app">soneru / LiveCycling,LiveLocation</a></li>
    <li><a href="http://www.nikkei.com/tech/business/article/g=96958A9C93819499E0E0E2E1E48DE0E0E3E3E0E2E3E3E2E2E2E2E2E2;dg=1;p=9694E3EAE3E0E0E2E2EBE0E4E2E2">ｉＰｈｏｎｅアプリの先駆者２人、自転車を駆って岐阜から世界へ　　：日本経済新聞</a></li>
  </ul>
  <iframe width="560" height="315" src="http://www.youtube.com/embed/B4qcyRy8wQI?rel=0" frameborder="0" allowfullscreen></iframe>
</div> <!-- soneru -->

<div class="section" id="siri">
  <h3>Siri と iCloud</h3>

  <p>これは外す訳にはいきませんね。iPhone 4Sに搭載された音声認識エージェント。</p>

  <ul>
    <li><a href="http://www.apple.com/iphone/features/siri.html">iPhone 4S - Ask Siri to help you get things done.</a></li>
    <li><a href="http://wired.jp/2011/10/14/%E6%96%B0iphone%E3%81%AE%E3%80%8Esiri%E3%80%8F%EF%BC%9A%E8%B3%A2%E3%81%84%E7%AD%94%E3%81%88%E3%81%AE%E6%95%B0%E3%80%85/">新iPhoneの『Siri』：賢い答えの数々 « WIRED.jp</a></li>
  </ul>
  <iframe width="560" height="315" src="http://www.youtube.com/embed/rNsrl86inpo?rel=0" frameborder="0" allowfullscreen></iframe>

  <p>日本では利用できませんが、iTunes Matchも興味深いアプローチです。Macに保存してある音楽を、波形データで音楽データベースと照合し、いつでもどこでも再生できるようにクラウドからiPhone、iPadなどに配信してくれる。</p>
  <ul>
    <li><a href="http://www.apple.com/itunes/itunes-match/">Apple - iTunes - Match</a></li>
    <li><a href="http://internet.watch.impress.co.jp/docs/special/20111227_501082.html">日本未上陸、Appleのクラウド音楽サービス「iTunes Match」を試す -INTERNET Watch</a></li>
  </ul>
</div> <!-- siri -->


<div class="section" id="sphero">
  <h3>Sphero</h3>

  <p>スマートフォンのセンサーを利用して、ボールをコントロールして遊ぶ。</p>
  <ul>
    <li><a href="http://www.gosphero.com/sphero/overview">Sphero</a></li>
    <li>  <a href="http://wired.jp/2011/12/22/%E3%82%B9%E3%83%9E%E3%83%9B%E3%81%A7%E6%93%8D%E4%BD%9C%E3%81%97%E3%81%A6%E9%81%8A%E3%81%B6%E3%83%9C%E3%83%BC%E3%83%AB%E3%80%8Esphero%E3%80%8F/">スマホで操作して遊ぶボール『Sphero』 « WIRED.jp</a></li>
  </ul>

  <iframe src="http://player.vimeo.com/video/30467368?title=0&amp;byline=0&amp;portrait=0" width="550" height="309" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe><p><a href="http://vimeo.com/30467368">The Ball. Evolved.</a> from <a href="http://vimeo.com/gosphero">GoSphero</a> on <a href="http://vimeo.com">Vimeo</a>.</p>
</div> <!-- sphero -->

<div class="section" id="summly">
  <h3>Summly : 世界中のコンテンツをアルゴリズムで要約</h3>
  
  <p>アルゴリズムで文章を要約し、Webのブラウジングを効率化する。アルゴリズムは言語に依存しないので、現在はラテン系の１２カ国語に対応、アジア言語にも対応可能。ロンドン在住の16歳のアプリ開発者がiPhone Appとして開発。</p>
  
  <iframe width="560" height="315" src="http://www.youtube.com/embed/GgTcwn05etI" frameborder="0" allowfullscreen></iframe>
  <ul>
    <li><a href="http://www.summly.com/en/introduction.html">Summly.com</a></li>
    <li><a href="http://wired.jp/2011/12/15/%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%82%92%E8%A6%81%E7%B4%84%E3%81%99%E3%82%8B%E7%94%BB%E6%9C%9F%E7%9A%84%E3%81%AAios%E3%82%A2%E3%83%97%E3%83%AA%E3%80%8116%E6%AD%B3%E3%81%8C%E9%96%8B/">コンテンツを要約する画期的なiOSアプリ、16歳が開発 « WIRED.jp</a></li>
  </ul>
</div> <!-- summly -->


<div class="section" id="kinect-projector">
  <h3>現実に仮想空間を投影するプロジェクタ</h3>

  <p>kinectで識別した部屋の空間に、リアルタイムで仮想オブジェクトを投影する。言葉だと表現しず来ので、以下の動画を見るのが速いです。</p>
  <ul>
    <li><a href="http://jp.techcrunch.com/archives/20111101more-mind-blowing-real-world-kinect-interaction-from-microsoft-research/">Kinectで拡張現実するとこんなにすごい-Microsoft Researchとイギリスの大学の共作</a></li>
  </ul>
  <iframe width="480" height="360" src="http://www.youtube.com/embed/frGEzlrhve0?rel=0" frameborder="0" allowfullscreen></iframe>
</div> <!-- kinect-projector -->

<div class="section" id="ibm-predict">
  <h3>IBMが予想する5年先の技術</h3>

  <p>IBMが毎年発表する5年先の未来予想『<a href="http://asmarterplanet.com/blog/2011/12/the-next-5-in-5-our-forecast-of-five-innovations-that-will-alter-the-landscape-within-five-years.html">The IBM 5 in 5</a>』。2011年版から二つピックアップ。</p>

  <p>生体認証が普及して、パスワードが一切いらなくなる。</p>
  <ul>
    <li><a href="http://asmarterplanet.com/blog/2011/12/the-next-5-in-5-you-will-never-need-a-password-again.html">The IBM 5 in 5: You will never need a password again</a></li>
  </ul>

  <iframe width="560" height="315" src="http://www.youtube.com/embed/px2Nq-0X_oY?rel=0" frameborder="0" allowfullscreen></iframe>

  <p>日常生活における、人間の活動から、電力を発電するようになる。</p>
  <ul>
    <li><a href="http://asmarterplanet.com/blog/2011/12/ibm-5-in-5-people-power-will-come-to-life.html">IBM 5 in 5: People power will come to life</a></li>
  </ul>
  <iframe width="560" height="315" src="http://www.youtube.com/embed/KBAGAgFVjO4" frameborder="0" allowfullscreen></iframe>
</div> <!-- ibm-predict -->

<p>こうして見ると、文章では伝わらない、ビデオを見て始めて理解できるアプリケーションばかりですね。2011年は、iPhone、iPad、Android端末などの汎用的な端末ばかりが目立って、ガジェットは死滅したような印象を受けていました。しかし、スマートフォンのアプリとして知能をもち、近距離無線で自立的にネットワークを形成するインテリジェントセンサーは、まさに離陸寸前ではないかと思います。</p>
<p>最後に、Nike+やJawboneで使われているMotionX社のミッションステートメントが刺激的だったので引用させていただきます。</p>

<p>『<a href="http://www.motionx.com/home/the-art-of-motion/">MotionX | Accelerometrics - The art of motion sensing. Because motion is life.</a>』より。</p>
<ul>
  <li>We look around, everything is in motion. When motion slows, life pauses. Motion shapes our lives and gravity defines motion. We want to use gestures to control mobile devices: ShakeShake® to roll virtual dice in the iPhone™, TapTap™ to adjust the volume on the headset, Tilt 'n Roll™ to navigate Google maps. We use motion to control our favorite devices and interpret motion to improve our sports performance and our health.</li>
  <li>Gravity keeps us grounded. It's our blessing and our curse. Gravity is the key force that shaped evolution. Accelerometers sense gravity, giving us the signals to understand motion.</li>
  <li>We still don't understand the nature of that force. But we know that gravity is everywhere, keeping the universe in balance.</li>
  <li>Walking is so natural to humans that we forget the millions of years of evolution that allowed us to defy gravity by standing up and running on our hind legs consistently. Something that most children learn to do before they are two years old essentially defines us as a species. Our head, brain, intellect above all. </li>
  <li>Thanks to Newton and Galileo, we know that we can understand motion by measuring acceleration. Kinematics, the science that studies motion, uses high-school calculus to relate acceleration, speed and position. In a mobile device, when we do this in real time we don't really integrate acceleration to get speed and speed to get position. We interpret the signals of the sensors and recognize motion patterns. </li>
  <li>On mobiles, in the palm of our hands, it's a different experience. TapTap, ShakeShake, Tilt 'n Roll are naturals. Motion now controls a whole virtual mobile world. The motion-aware mobile platform is the new media. It is going to be by far the most popular platform in the world as it is just a matter of time before everyone of our billions of motion-enabled co-humans wants one. Because life is motion.</li>
</ul>


]]>
        
    </content>
</entry>

<entry>
    <title>Webの情報流通を加速するAppインターネット</title>
    <link rel="alternate" type="text/html" href="http://www.goodpic.com/mt/archives2/2011/12/webapp.html" />
    <id>tag:www.goodpic.com,2011:/mt//1.1689</id>

    <published>2011-12-23T15:00:01Z</published>
    <updated>2011-12-23T15:02:54Z</updated>

    <summary>『Webは（繰り返し）死に、インターネットが進化する』でAppインターネットの広...</summary>
    <author>
        <name>Jun Kaneko</name>
        <uri>http://www.goodpic.com/mt/</uri>
    </author>
    
        <category term="Webサービス" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://www.goodpic.com/mt/">
        <![CDATA[<p>『<a href="http://www.goodpic.com/mt/archives2/2011/12/web_or_app_internet.html">Webは（繰り返し）死に、インターネットが進化する</a>』でAppインターネットの広がりを認識しましたが、特に『あとで読む』系のサービスとKindle、iPhone、iPadのアプリを組み合わせることで、ウォッチできるWebコンテンツの量が飛躍的に増えているのを実感します。個人的には、『あとで読もう』と思いつつ、読んでいなかった英語の記事を、実際に読むようになってきた。利用するサービスは、宮川さんの解説『<a href="http://weblog.bulknews.net/post/13811211811">快適に「あとで読む」ための環境 - Tatsuhiko Miyagawa's blog</a>』の通りですが、流れをざっと図に書き出してみた。</p>

<a href="http://www.goodpic.com/mt/images/xmlrpc/read-anytime.007.jpg"><img alt="" src="http://www.goodpic.com/mt/assets_c/2011/12/read-anytime.007-thumb-550x412-376.jpg" width="550" height="412" class="mt-image-center" style="text-align: center; display: block; margin: 0 auto 20px;" /></a>

<p>やたらと複雑に見える(笑)。ただ、実際にやってみると、とても快適なのです。サービスやアプリの役割を色分けしてみると、こんな流れでしょうか。</p>

<a href="http://www.goodpic.com/mt/images/xmlrpc/read-anytime-read.png"><img alt="" src="http://www.goodpic.com/mt/assets_c/2011/12/read-anytime-read-thumb-400x275-381.png" width="400" height="275" class="mt-image-center" style="text-align: center; display: block; margin: 0 auto 20px;" /></a>

<p>情報源としては、長年蓄積してきた数百サイトのRSSフィードに加えて、最近、よく読むようになったのが<a href="http://news.ycombinator.com/">Hacker News</a>。リーンスタートアップの大手、<a href="http://ycombinator.com/">Y Combinator</a>が運営しているDiggみたいなサイトです。</p>

<table width="500px" cellspacing="0" cellpadding="5px" border="0">
  <tr>
    <td width="70px">
      <img src="http://www.goodpic.com/mt/capture/graph-20111221-235034.png" alt="Hacker news" />
    </td>
    <td><a href="http://news.ycombinator.com/">Hacker News</a></td>
  </tr>
  <tr>
    <td width="70px">
      <img src="http://www.goodpic.com/mt/capture/graph-20111221-232634.png" alt="google reader" />      </td>
    <td>
      <a href="http://www.google.co.jp/reader/">Google リーダー</a>
    </td>
  </tr>    
</table>

<p>Hacker News のiPhoneアプリはいくつかありますが、コメントとかはしないリードオンリーなので、フィードをそのままGoogle Readerに登録しています。ただ、１日に２００件ぐらい記事が配信されてくるので、普通のRSSの感覚で読もうとすると確実に破綻する。そこで、スクリーニング作業に役立つのが、iPhoneのReederアプリと、Instapaperの連携。</p>

<table width="500px" cellspacing="0" cellpadding="5px" border="0">
  <tr>
    <td width="70px"><img src="http://www.goodpic.com/mt/capture/graph-20111221-235300.png" alt="reeder" /></td>
    <td><a href="http://reederapp.com/">Reeder</a></td>
  </tr>    
  <tr>
    <td width="70px"><img src="http://www.goodpic.com/mt/capture/graph-20111221-235516.png" alt="Instapaper" /></td>
    <td><a href="http://www.instapaper.com/">Instapaper</a></td>
  </tr>
</table>

<p>通勤電車の中でiPhoneのReederアプリを開き、未読記事のタイトル一覧を新着順にザーと流して見て、面白そうな予感がする記事を、片っ端からInstapaperに転送します。慣れてくると、Instapaperの転送待ち時間をいれても、１０分で１００件ぐらい処理できる。</p>
<p>Google Readerに記事がたまっていない時には、最近リリースされた<a href="http://flipboard.com/">Flipboard</a>のiPhoneアプリで、TwitterとFacebookのストリームを眺めつつ、Cover StoriesやDesign, Technology などのおすすめ記事をチェックすると、普段巡回しないサイトの情報に出会えます。Flipboardは、アプリで記事本文の抽出をしてくれるので、だいたいその場で読んで、保存したい記事だけSafari経由でInstapaperに送ります。</p>

<table width="500px" cellspacing="0" cellpadding="5px" border="0">
  <tr>
    <td width="70px"><img src="http://www.goodpic.com/mt/capture/graph-20111221-235204.png" alt="flipboard" /></td>
    <td><a href="http://flipboard.com/">Flipboard</a></td>
  </tr>      
  <tr>
    <td width="70px"><img src="http://www.goodpic.com/mt/capture/graph-20111221-235348.png" alt="Readability" /></td>
    <td><a href="http://www.readability.com/">Reading List -- Readability</a></td>
  </tr>
</table>

<p>英語の記事は、今までは『結局あとで読まない』ことが多かったけれど、InstapaperのKindle転送機能で、定期的送られてくると、かなり読むようになりました。これは電子インクというデバイスの効果がかなり大きい。iPadだと、他のことをやってしまって、あまり読まない気がする。実は、持っているKindleが第二世代で、日本語が読めないせいかもしれませんが、、、早くKindle Touch 日本に来い!</p>
<p>最後は、Instapaperの機能を使って、Likeした記事を、自動でEvernoteに転送して保存。Evernonteの強力な検索機能で、過去に気になった記事を一瞬で探せます。情報をまとめてブログ記事を書き、フィードで配信されて、他の誰かが読んでくれれば、コンテンツ流通のサイクルが一周して今ココ、って感じでしょうか?</p>
<p>次は、Webではなく、Appならではの情報の流れについて考えてみる予定。</p>]]>
        
    </content>
</entry>

</feed>

