翻訳のまとめです。翻訳してみたのはこのblogのこの記事です。Slashdot、Slashdot-jpで記事になってました。
あと、本文はこんなにファンキーじゃありません。
読み始める前に一度、Google Suggestを試してみると話がわかりやすいと思います。
解読！！Google Suggest。
結構多くの人が「Google Suggestがどんな風に動くか」ってことには意見を交わしているけど、俺はこのものすげー凝り固まったJava Scriptを解体してやったぜ。
んなわけで、ちょっとしたweb developperならどんな風にGoogle Suggestが動いているか一目瞭然ってわけだ、、、そのソースの最終バージョンはここに置いといた。
俺はMozilla グループがwsdl-enabled SOAP clientをMozillaにぶち込んだ以来のクールなものを見ちまったよ。Google Suggestはあんたがなんか打ち込んだ文字に従ってその後の推測結果を返すんだけど、これがまたものすげーんだ。まぁ、大きく分けるとその理由は二つだ。
１、推測がめちゃくちゃはえーんだ。俺が、相当早く打ってみても、その一文字、一文字ごとにきっちり反応しやがる。
２、インターフェースもクールだ。俺は昔はサーバー側でのweb更新処理に賛成派で、JavaScriptなんてものには見向きもしなかったんだけどよ、gmailといい、Google Suggestといい、そいつらのスゲーインターフェースを見ちまったら、一気にクライアント処理側にお蔵替えしたよ。
おめーらみんなも、きっと、これみたらそうなるよ。俺はこのナイスなインターフェースの奥義を見てさらにぶっ飛んだんだぜ。
１、予測ワード達が検索ワードを入れるフィールドにきっちりおさまりやがる。
２、推測した部分をきっちり強調しやがる。（俺が"fa"っていれたら、こいつは"fast bugtrack"を推測するんだけど、この"st bugtrack"の部分が強調されてるんだ。っで、俺が次のワードを入れたらこいつらは消えやがる。、、すげーよ）
３、キーボード操作に対してもスゲー反応を返すしよ。
４、こいつらは、もし、おめーがバックスケープおしてもわざわざGoogleのサーバに戻らねーんだ、ちゃんとJavaScriptがキャッシュしてるわけよ。
５、あんたが結果をどのくらい早くゲットできるかってことに根ざしたメイン・ドリブン・ループをそのコードは動的に適応するんだぜ。
だからさー、おれはこのインターフェースがどうなってんのかしりたいわけよ。Googleの中のすげー人たちが書いたものを、みんなで今夜調べようぜ、で、俺はまだ書いてないけどよ、あんたと少しずつ理解してーんだ。んで、その結果が俺達みーんなの理解の助けになるってわけだ。
じゃぁ、まず、おれがどういう風に中身を解析したかってことをちょっくらまとめるぜ。
１、まず、おれはGoogle SuggestのhtmlとJavaScriptを保存し、、、で、なんとかそれを俺のコンピュータ上でも動くようにした。次に、わかりにくい変数名とか関数名を改名し、それがちゃんとはじめと同じように動いているかどうかを調べるため、いくつかalartを組み込んだんだ。
２、Google Suggestのコードでは、Googleにコールバックをかけるときに、XMLHttpオブジェクトを使って、結果を取得してるんだけどよ、完全にこのコードを理解するためには、俺はGoogleがコールバックをかけたときに一体何をを送り返してくるのか、理解する必要があったんだ。
だけどだ、おれが、コールバックをかけてくれるはずのurlを直接打ち込んでも、Googleは何にも返してくんねえ、あの404が返ってくるだけだ。（まぁ、これは後で俺が間違ったurlを打ってたってことがわかったんだけど、、、）で、俺は愛用のブラウザーをProxyを通して、アクセスをするように設定しなおした。でも、XMLHttpオブジェクトはプロキシーを通してる場合はつかえーねーこともわかった。（でもこれは、おまえらがプロキシーを通していても、Google Suggestが働かなくなるってことだろ、、、この話、本当にあってんのか？）まぁ、結局、俺はパケットをモニターするなんてことを始める前にurlのスペルミスに気づいたってわけだ。
じゃ、まぁ、とりあえず、Google Suggestのメインコードを見てくれ、、、そうすりゃ、このソースコードの最後らへんにあのダイナミックなインターフェースを提供してるJavaScriptの場所がわかるだろう（まぁ、これだよ）。
まったくGoogleのなかの素敵なやつらは、このコードを、それが自分たちの仕事かのようにくそったれに圧縮してくれたので、、、まず、最初にそれを理解するため、俺はこんな感じでインデントを入れたわけだ。そっから、何のためのグローバル変数なのか、それぞれ関数は何をしてんのかを解明するっていう、おもしれー作業を初めて、、、んで、そいつらをもっとわかりやすい名前に変えたわけだ。おれは、なんとかそいつらをプリチーにしてやったぜ。書き換えた、最終バージョンがこれだ。
この課程を通して、俺は以前には知らなかったいくつかのことを学んだよ：
１、俺らはブラウザの自動補完機能をautocomplete="off"こんな感じで、検索キーを打ち込む領域のautocomplete属性をoffにしてやれば、切ることができるんだ、、、まぁ、これをどうやってこの作業する前に知るかって話だけどよ。
２、通信のためのXMLHTTP,XMLHttpRequestオブジェクトは、サーバーに戻って、その後で、新しい情報とかを取得してくるんだけど、これはページを更新しなくてもできるんだぜ、、、まぁ、Web開発の基本だけどよ、、、これに関しては、いくらでも情報はころがってるよ。
３、どうやってこのパワフルなキーハンドリングを実現してるかってこと（keyup/keydownとかeventsとかcursor key eventsの状態変化とかを補足してるんだけどよ。）
４、んで、例のどうやってJavaScriptで検索キー入力箇所の文字を強調するかってこと。
最後にどういう風に動いてるのかをみてみよう。
まずhtmｌがInstallAC関数を呼び、システムを初期化する、、、これは興味深いコードだぜ、
var Jb="zh-CN|zh-TW|ja|ko|vi|";
Google SuggestはEnglishしかサポートしないっていってる一方で、しっかりJapanとかKoreaとかChinaとかを認識し、リクエストをハンドルしてるんだ。
installAC関数はもう一つのinstallACPart2って俺が名付けた関数を呼ぶ。この関数は俺たちが使っているブラウザがXMLHttpをサポートしているかを確認し、俺が"_completeDiv"って呼んでる変数を作るんだ。こいつは俺らがgoogleからデータを取得したときの、その推測した結果を持ってるんだけど、こいつは検索キー入力フィールドに完璧に収まる形でそいつらを並べるんだ、最初は表示されないけどな。
installACPart2関数はいくつかのKey downとかresizeとかのイベントハンドラもセットする。こいつが、動的にGooglに対してリクエストを行い、URLが生成されるってわけだ。
俺がmainLoopって呼んでる関数は、繰り返しJavaScriptで書かれたsetTimeout関数を呼ぶんだ、おもしれーことに、設計者はキーボードのイベントをハンドルするよりも、タイムアウトを設定する機構を組み込んだ。これがおせー通信環境でも、はえータイプを何とかするメカニズムってワケよ。（例えばよ、おれがタイムアウトが起きることなく、すばやく３文字を打ち込んだら、その後で、一回だけ、googleからデータを取得するわけよ。）
このmainLoopは検索キー入力フィールドが何か書き込まれたかどうかを常にチェックしてる、んで、もし書き込みがあったらまずそこに同じ文字が書き込まれていないか結果を調べて、そのあと、googleからデータを取得するわけだ。Google Suggestのコードでは、XMLHttpオブジェクトをサポートしていない古いブラウザでもクッキーとフレームレローディングを駆使して、このへんのことをうまくやるらしいぜ。（このへんはおれもまだ試してないけどな、、、）
callGoogle関数の実装は率直で簡単だ。俺でも、その流れを書けるぜ。
（例えば、俺がEnglish圏で、"fast bug"ってタイプしてたらよ）
http://www.google.com/complete/search?hl=en&js=true&qu=fast%20bug
その時、URLはこうなるだろ。で、イベント駆動型のcallback _xmlHttp.onchangeファンクションを呼ばれて、こいつは、googleからデータを取得するために、最初から最後までJavaScriptでかけちまうような単純な処理をする、で、こんな感じのものをよぶわけだ。
sendRPCDone(frameElement, "fast bug", new Array("fast bug track", "fast bugs", "fast bug", "fast bugtrack"), new Array("793,000 results", "2,040,000 results", "6,000,000 results", "7,910 results"), new Array(""));
このsendRPCDoneって関数はac.jsのファイルの中で定義されてるんだけどよ、こいつがmainLoopの中でうまく同期を行い、受け取った結果をキャッシュにぶち込み、_completeDivを作る、、、DIVは結果の配列であり、最終的に表示されるものなわけだ。
displaySuggestedList関数は、その結果を受け取って、表示のためのワンセットのDOM構造のDIVとSPANを動的に生成する、で、こいつが推測結果を表示する最終的な形ってわけだ。さっき場合だと、listの要素やデータ構造はこんな感じになる。（ここでは(x)がコード内での変数な。）
<![CDATA[<br />
<DIV (u) - mousedown/mouseover/mouseout class="aAutoComplete"><br />
<SPAN (ka) class="lAutoComplete"><br />
<SPAN (ua) class="cAutoComplete"><br />
bug tracking<br />
</SPAN (ua)><br />
<SPAN (ea) class="dAutoComplete"><br />
500,000 results<br />
</SPAN (ea)><br />
</SPAN><br />
</DIV (u)><br />
</plaintext></p><p>んで、最後にPa関数（こいつは満足できる名前じゃねーな）は推測結果をうけとったり、なんかキーが押されたりしたら（たぶんマウス関連のイベントも補足してると思うよ）まだ、打たれてねー文字に対して強調をかけるってわけだ。</p><p>いままで書いたものをみたら、あんたらは自分自身で完璧にコードを解読しようと思うかもしんない、、、そん時に、なんか質問でもコメントでもあったら教えてくれ。俺がタイプミスをなおしたり、変数とか関数の名前を変えるいい機会になるからよ。<br />
</p>
<ul>
<li>
<ul>
<li>
<ul>
<li>翻訳終わり---</li>
</ul></li>
</ul></li>
</ul><p>インターフェース的にはおもしろい内容でしたが、リクエストに対してどんな形でGoogleの中の人がデータベースを処理しているかの内部的な実装も知りたいです。でもGoogle Suggestの内部は公開されないだろうなぁ。</p>
</div>
<footer class="entry-footer">
<div class="entry-tags-wrapper">
<div class="entry-tags"> </div>
</div>
<p class="entry-footer-section track-inview-by-gtm" data-gtm-track-json="{"area": "finish_reading"}">
<span class="author vcard"><span class="fn" data-load-nickname="1" data-user-name="gamella" >gamella</span></span>
<span class="entry-footer-time"><a href="https://futureinsight.info/entry/20041227/1104115995"><time data-relative datetime="2004-12-27T02:53:15Z" title="2004-12-27T02:53:15Z" class="updated">2004-12-27 11:53</time></a></span>
</p>
<div
class="hatena-star-container"
data-hatena-star-container
data-hatena-star-url="https://futureinsight.info/entry/20041227/1104115995"
data-hatena-star-title="Google Suggestの動作原理 まとめ"
data-hatena-star-variant="profile-icon"
data-hatena-star-profile-url-template="https://blog.hatena.ne.jp/{username}/"
></div>
<div class="social-buttons">
<div class="social-button-item">
<a href="https://b.hatena.ne.jp/entry/s/futureinsight.info/entry/20041227/1104115995" class="hatena-bookmark-button" data-hatena-bookmark-url="https://futureinsight.info/entry/20041227/1104115995" data-hatena-bookmark-layout="vertical-balloon" data-hatena-bookmark-lang="ja" title="この記事をはてなブックマークに追加"><img src="https://b.st-hatena.com/images/entry-button/button-only.gif" alt="この記事をはてなブックマークに追加" width="20" height="20" style="border: none;" /></a>
</div>
<div class="social-button-item">
<div class="fb-share-button" data-layout="box_count" data-href="https://futureinsight.info/entry/20041227/1104115995"></div>
</div>
<div class="social-button-item">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="https://futureinsight.info/entry/20041227/1104115995" data-count="vertical" data-text="Google Suggestの動作原理 まとめ - FutureInsight.info" data-lang="ja">Tweet</a>
</div>
<span>
<div class="line-it-button" style="display: none;" data-type="share-e" data-lang="ja" ></div>
<script src="//scdn.line-apps.com/n/line_it/thirdparty/loader.min.js" async="async" defer="defer" ></script>
</span>
<div class="social-button-item">
<a data-pocket-label="pocket" data-save-url="https://futureinsight.info/entry/20041227/1104115995" data-pocket-count="vertical" class="pocket-btn" data-lang="en"></a>
</div>
</div>
<div class="customized-footer">
<div class="entry-footer-modules" id="entry-footer-secondary-modules">
<div class="hatena-module hatena-module-related-entries" >
<!-- Hatena-Epic-has-related-entries-with-elasticsearch:true -->
<div class="hatena-module-title">
関連記事
</div>
<div class="hatena-module-body">
<ul class="related-entries hatena-urllist urllist-with-thumbnails">
<li class="urllist-item related-entries-item">
<div class="urllist-item-inner related-entries-item-inner">
<a class="urllist-image-link related-entries-image-link" href="https://futureinsight.info/entry/20110514/1305343981">
<img alt=" Chrome版Angry Birdの全ステージをアンロックするハックへの対策について" src="https://cdn.image.st-hatena.com/image/square/17449e29e7624a0c3fac7a7aa67e65695685664a/backend=imagemagick;height=100;version=1;width=100/http%3A%2F%2Fsi0.twimg.com%2Fimages%2Fdev%2Fcms%2Fintents%2Ficons%2Ffavorite.png" class="urllist-image related-entries-image" title=" Chrome版Angry Birdの全ステージをアンロックするハックへの対策について" width="100">
</a>
<div class="urllist-date-link related-entries-date-link">
<a href="https://futureinsight.info/archive/2011/05/14" rel="nofollow">
<time datetime="2011-05-14T03:33:01Z" title="2011-05-14T03:33:01Z">
2011-05-14
</time>
</a>
</div>
<a href="https://futureinsight.info/entry/20110514/1305343981" class="urllist-title-link related-entries-title-link urllist-title related-entries-title"> Chrome版Angry Birdの全ステージをアンロックするハックへの対策について</a>
<div class="urllist-entry-body related-entries-entry-body">Google I/OでリリースされたChrome版Angry Birdに関して全ステ…</div>
</div>
</li>
<li class="urllist-item related-entries-item">
<div class="urllist-item-inner related-entries-item-inner">
<a class="urllist-image-link related-entries-image-link" href="https://futureinsight.info/entry/20100320/1269066368">
<img alt=" Google App Engine + Pythonプログラミング環境としてPeggy" src="https://cdn.image.st-hatena.com/image/square/ce7af6ae585eae4bb3462628e682489a159d306a/backend=imagemagick;height=100;version=1;width=100/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fg%2Fgamella%2F20100320%2F20100320152147.png" class="urllist-image related-entries-image" title=" Google App Engine + Pythonプログラミング環境としてPeggy" width="100">
</a>
<div class="urllist-date-link related-entries-date-link">
<a href="https://futureinsight.info/archive/2010/03/20" rel="nofollow">
<time datetime="2010-03-20T06:26:08Z" title="2010-03-20T06:26:08Z">
2010-03-20
</time>
</a>
</div>
<a href="https://futureinsight.info/entry/20100320/1269066368" class="urllist-title-link related-entries-title-link urllist-title related-entries-title"> Google App Engine + Pythonプログラミング環境としてPeggy</a>
<div class="urllist-entry-body related-entries-entry-body">Peggyというプログラミング用エディタをご存知でしょうか？ 岐…</div>
</div>
</li>
<li class="urllist-item related-entries-item">
<div class="urllist-item-inner related-entries-item-inner">
<div class="urllist-date-link related-entries-date-link">
<a href="https://futureinsight.info/archive/2008/12/04" rel="nofollow">
<time datetime="2008-12-03T15:43:38Z" title="2008-12-03T15:43:38Z">
2008-12-04
</time>
</a>
</div>
<a href="https://futureinsight.info/entry/20081204/1228319018" class="urllist-title-link related-entries-title-link urllist-title related-entries-title"> CUDAやLarrabeeに何を計算させるのか</a>
<div class="urllist-entry-body related-entries-entry-body">GPUを用いてデータ処理を行うCUDAや、CPU自体がソフトウェアパ…</div>
</div>
</li>
<li class="urllist-item related-entries-item">
<div class="urllist-item-inner related-entries-item-inner">
<div class="urllist-date-link related-entries-date-link">
<a href="https://futureinsight.info/archive/2008/11/11" rel="nofollow">
<time datetime="2008-11-11T00:52:04Z" title="2008-11-11T00:52:04Z">
2008-11-11
</time>
</a>
</div>
<a href="https://futureinsight.info/entry/20081111/1226364724" class="urllist-title-link related-entries-title-link urllist-title related-entries-title"> 日経エレクトロニクスのGoogle特集「爆走するGoogleマシン」</a>
<div class="urllist-entry-body related-entries-entry-body">愛読している雑誌の一つである日経エレクトロニクスの2008/11/3…</div>
</div>
</li>
<li class="urllist-item related-entries-item">
<div class="urllist-item-inner related-entries-item-inner">
<div class="urllist-date-link related-entries-date-link">
<a href="https://futureinsight.info/archive/2008/07/02" rel="nofollow">
<time datetime="2008-07-02T00:22:26Z" title="2008-07-02T00:22:26Z">
2008-07-02
</time>
</a>
</div>
<a href="https://futureinsight.info/entry/20080702/1214958146" class="urllist-title-link related-entries-title-link urllist-title related-entries-title"> Google C++スタイルガイドのエッセンス</a>
<div class="urllist-entry-body related-entries-entry-body">最近、ゴロゴロしていたらブログを全く更新していなかった。最…</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="entry-footer-html"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- hatena-bottom2 -->
<ins class="adsbygoogle"
style="display:inline-block;width:336px;height:280px"
data-ad-client="ca-pub-8316025729440240"
data-ad-slot="8180944571"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- hatena-bottom3 -->
<ins class="adsbygoogle"
style="display:inline-block;width:336px;height:280px"
data-ad-client="ca-pub-8316025729440240"
data-ad-slot="9657677773"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
</div>
</footer>
</div>
</article>
<!-- rakuten_ad_target_end -->
<!-- google_ad_section_end -->
<div class="pager pager-permalink permalink">
<span class="pager-prev">
<a href="https://futureinsight.info/entry/20041228/1104163596" rel="prev">
<span class="pager-arrow">« </span>
電車男の落としどころ
</a>
</span>
<span class="pager-next">
<a href="https://futureinsight.info/entry/20041227/1104114000" rel="next">
Google Suggestの動作原理 3
<span class="pager-arrow"> »</span>
</a>
</span>
</div>
</div>
</div>
<aside id="box1">
<div id="box1-inner">
</div>
</aside>
</div><!-- #wrapper -->
<aside id="box2">
<div id="box2-inner">
<div class="hatena-module hatena-module-recent-entries ">
<div class="hatena-module-title">
<a href="https://futureinsight.info/archive">
最新記事
</a>
</div>
<div class="hatena-module-body">
<ul class="recent-entries hatena-urllist urllist-with-thumbnails">
<li class="urllist-item recent-entries-item">
<div class="urllist-item-inner recent-entries-item-inner">
<a href="https://futureinsight.info/entry/2018/11/12/213916" class="urllist-title-link recent-entries-title-link urllist-title recent-entries-title">MarketTech Meetup #01 (2018/12/19 19:00〜)開催予定</a>
<a href="https://b.hatena.ne.jp/entry/s/futureinsight.info/entry/2018/11/12/213916" class="bookmark-widget-counter">
<img src="https://b.hatena.ne.jp/entry/image/https://futureinsight.info/entry/2018/11/12/213916" alt="はてなブックマーク - MarketTech Meetup #01 (2018/12/19 19:00〜)開催予定" />
</a>
</div>
</li>
<li class="urllist-item recent-entries-item">
<div class="urllist-item-inner recent-entries-item-inner">
<a href="https://futureinsight.info/entry/2018/09/22/163157" class="urllist-title-link recent-entries-title-link urllist-title recent-entries-title">「AlpacaJapanが、三菱UFJ銀行等から総額約7.5億円の資金調達を実施」のTwitterメモ</a>
<a href="https://b.hatena.ne.jp/entry/s/futureinsight.info/entry/2018/09/22/163157" class="bookmark-widget-counter">
<img src="https://b.hatena.ne.jp/entry/image/https://futureinsight.info/entry/2018/09/22/163157" alt="はてなブックマーク - 「AlpacaJapanが、三菱UFJ銀行等から総額約7.5億円の資金調達を実施」のTwitterメモ" />
</a>
</div>
</li>
<li class="urllist-item recent-entries-item">
<div class="urllist-item-inner recent-entries-item-inner">
<a href="https://futureinsight.info/entry/2018/09/02/214020" class="urllist-title-link recent-entries-title-link urllist-title recent-entries-title">Chainer Meetup #07 Chainer 3歳記念イベント発表資料「Chainerを使って本気でマーケットの予測システムを作ったらこうなった」</a>
<a href="https://b.hatena.ne.jp/entry/s/futureinsight.info/entry/2018/09/02/214020" class="bookmark-widget-counter">
<img src="https://b.hatena.ne.jp/entry/image/https://futureinsight.info/entry/2018/09/02/214020" alt="はてなブックマーク - Chainer Meetup #07 Chainer 3歳記念イベント発表資料「Chainerを使って本気でマーケットの予測システムを作ったらこうなった」" />
</a>
</div>
</li>
<li class="urllist-item recent-entries-item">
<div class="urllist-item-inner recent-entries-item-inner">
<a href="https://futureinsight.info/entry/2018/06/18/202621" class="urllist-title-link recent-entries-title-link urllist-title recent-entries-title">Alpacaの採用イベントのお知らせ: AI Startups Meetup vol.1『大手企業からAIベンチャーへ転職したエンジニア』</a>
<a href="https://b.hatena.ne.jp/entry/s/futureinsight.info/entry/2018/06/18/202621" class="bookmark-widget-counter">
<img src="https://b.hatena.ne.jp/entry/image/https://futureinsight.info/entry/2018/06/18/202621" alt="はてなブックマーク - Alpacaの採用イベントのお知らせ: AI Startups Meetup vol.1『大手企業からAIベンチャーへ転職したエンジニア』" />
</a>
</div>
</li>
<li class="urllist-item recent-entries-item">
<div class="urllist-item-inner recent-entries-item-inner">
<a class="urllist-image-link recent-entries-image-link" href="https://futureinsight.info/entry/2018/04/07/170432">
<img alt="Amazon echo dot を購入してみた" src="https://cdn.image.st-hatena.com/image/square/fca535b1fd34a3f2a502a44d3269f064691f0fae/backend=imagemagick;height=40;version=1;width=40/https%3A%2F%2Fimages-fe.ssl-images-amazon.com%2Fimages%2FI%2F41tQsL-K3dL._SL160_.jpg" class="urllist-image recent-entries-image" title="Amazon echo dot を購入してみた" width="40">
</a>
<a href="https://futureinsight.info/entry/2018/04/07/170432" class="urllist-title-link recent-entries-title-link urllist-title recent-entries-title">Amazon echo dot を購入してみた</a>
<a href="https://b.hatena.ne.jp/entry/s/futureinsight.info/entry/2018/04/07/170432" class="bookmark-widget-counter">
<img src="https://b.hatena.ne.jp/entry/image/https://futureinsight.info/entry/2018/04/07/170432" alt="はてなブックマーク - Amazon echo dot を購入してみた" />
</a>
</div>
</li>
</ul>
</div>
</div>
<div class="hatena-module hatena-module-html">
<div class="hatena-module-body">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- -->
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:600px"
data-ad-client="ca-pub-8316025729440240"
data-ad-slot="1151589378"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
<div class="hatena-module hatena-module-html">
<div class="hatena-module-title">このブログについて</div>
<div class="hatena-module-body">
<p>Tomoya Kitayama(@gamella)が運営している物欲系ブログ。書評からガジェット、テクノロジーからライフハックまでなんでもネタにします。書評・ガジェットレビューなどのご依頼はtkitayama(at)gmail.comまで。ただし、お受けできないこともあります。献本はご連絡のうえ、電子書籍でお願いいたします。</p>
</div>
</div>
<div class="hatena-module hatena-module-html">
<div class="hatena-module-body">
Facebookページもやってます！
<div class="fb-like-box" data-href="https://www.facebook.com/futureinsight.info" data-width="300" data-height="400" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true"></div>
</div>
</div>
<div class="hatena-module hatena-module-html">
<div class="hatena-module-body">
<a href="https://plus.google.com/110814829100595115485" rel="publisher">Google+</a>もやってます！
<!-- -->
<div class="g-page" data-href="//plus.google.com/u/0/110814829100595115485" data-rel="publisher"></div>
</div>
</div>
<div class="hatena-module hatena-module-html">
<div class="hatena-module-body">
<a class="twitter-timeline" href="https://twitter.com/gamella" data-widget-id="461484675626586112">@gamella からのツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
</div>
<div class="hatena-module hatena-module-entries-access-ranking"
data-count="10"
data-source="access"
data-enable_customize_format="0"
data-display_entry_category="0"
data-display_entry_image="1"
data-display_entry_image_size_width="50"
data-display_entry_image_size_height="50"
data-display_entry_body_length="0"
data-display_entry_date="0"
data-display_entry_title_length="20"
data-restrict_entry_title_length="0"
data-display_bookmark_count="1"
>
<div class="hatena-module-title">
注目記事
</div>
<div class="hatena-module-body">
</div>
</div>
<div class="hatena-module hatena-module-html">
<div class="hatena-module-title">ブログ内検索</div>
<div class="hatena-module-body">
<form action="http://www.google.co.jp/cse" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="partner-pub-8316025729440240:5858639779" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="30" />
<input type="submit" name="sa" value="検索" />
</div>
</form>
<script type="text/javascript" src="http://www.google.co.jp/coop/cse/brand?form=cse-search-box&lang=ja"></script>
</div>
</div>
<div class="hatena-module hatena-module-archive" data-archive-type="default" data-archive-url="https://futureinsight.info/archive">
<div class="hatena-module-title">
<a href="https://futureinsight.info/archive">月別アーカイブ</a>
</div>
<div class="hatena-module-body">
<ul class="hatena-urllist">
<li class="archive-module-year archive-module-year-hidden" data-year="2018">
<div class="archive-module-button">
<span class="archive-module-hide-button">▼</span>
<span class="archive-module-show-button">▶</span>
</div>
<a href="https://futureinsight.info/archive/2018" class="archive-module-year-title archive-module-year-2018">
2018
</a>
<ul class="archive-module-months">
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2018/11" class="archive-module-month-title archive-module-month-2018-11">
2018 / 11
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2018/9" class="archive-module-month-title archive-module-month-2018-9">
2018 / 9
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2018/6" class="archive-module-month-title archive-module-month-2018-6">
2018 / 6
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2018/4" class="archive-module-month-title archive-module-month-2018-4">
2018 / 4
</a>
</li>
</ul>
</li>
<li class="archive-module-year archive-module-year-hidden" data-year="2017">
<div class="archive-module-button">
<span class="archive-module-hide-button">▼</span>
<span class="archive-module-show-button">▶</span>
</div>
<a href="https://futureinsight.info/archive/2017" class="archive-module-year-title archive-module-year-2017">
2017
</a>
<ul class="archive-module-months">
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2017/6" class="archive-module-month-title archive-module-month-2017-6">
2017 / 6
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2017/5" class="archive-module-month-title archive-module-month-2017-5">
2017 / 5
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2017/2" class="archive-module-month-title archive-module-month-2017-2">
2017 / 2
</a>
</li>
</ul>
</li>
<li class="archive-module-year archive-module-year-hidden" data-year="2016">
<div class="archive-module-button">
<span class="archive-module-hide-button">▼</span>
<span class="archive-module-show-button">▶</span>
</div>
<a href="https://futureinsight.info/archive/2016" class="archive-module-year-title archive-module-year-2016">
2016
</a>
<ul class="archive-module-months">
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2016/12" class="archive-module-month-title archive-module-month-2016-12">
2016 / 12
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2016/11" class="archive-module-month-title archive-module-month-2016-11">
2016 / 11
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2016/6" class="archive-module-month-title archive-module-month-2016-6">
2016 / 6
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2016/5" class="archive-module-month-title archive-module-month-2016-5">
2016 / 5
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2016/3" class="archive-module-month-title archive-module-month-2016-3">
2016 / 3
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2016/2" class="archive-module-month-title archive-module-month-2016-2">
2016 / 2
</a>
</li>
</ul>
</li>
<li class="archive-module-year archive-module-year-hidden" data-year="2015">
<div class="archive-module-button">
<span class="archive-module-hide-button">▼</span>
<span class="archive-module-show-button">▶</span>
</div>
<a href="https://futureinsight.info/archive/2015" class="archive-module-year-title archive-module-year-2015">
2015
</a>
<ul class="archive-module-months">
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2015/10" class="archive-module-month-title archive-module-month-2015-10">
2015 / 10
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2015/7" class="archive-module-month-title archive-module-month-2015-7">
2015 / 7
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2015/6" class="archive-module-month-title archive-module-month-2015-6">
2015 / 6
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2015/5" class="archive-module-month-title archive-module-month-2015-5">
2015 / 5
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2015/3" class="archive-module-month-title archive-module-month-2015-3">
2015 / 3
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2015/2" class="archive-module-month-title archive-module-month-2015-2">
2015 / 2
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2015/1" class="archive-module-month-title archive-module-month-2015-1">
2015 / 1
</a>
</li>
</ul>
</li>
<li class="archive-module-year archive-module-year-hidden" data-year="2014">
<div class="archive-module-button">
<span class="archive-module-hide-button">▼</span>
<span class="archive-module-show-button">▶</span>
</div>
<a href="https://futureinsight.info/archive/2014" class="archive-module-year-title archive-module-year-2014">
2014
</a>
<ul class="archive-module-months">
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2014/12" class="archive-module-month-title archive-module-month-2014-12">
2014 / 12
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2014/11" class="archive-module-month-title archive-module-month-2014-11">
2014 / 11
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2014/10" class="archive-module-month-title archive-module-month-2014-10">
2014 / 10
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2014/9" class="archive-module-month-title archive-module-month-2014-9">
2014 / 9
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2014/8" class="archive-module-month-title archive-module-month-2014-8">
2014 / 8
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2014/7" class="archive-module-month-title archive-module-month-2014-7">
2014 / 7
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2014/6" class="archive-module-month-title archive-module-month-2014-6">
2014 / 6
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2014/5" class="archive-module-month-title archive-module-month-2014-5">
2014 / 5
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2014/4" class="archive-module-month-title archive-module-month-2014-4">
2014 / 4
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2014/3" class="archive-module-month-title archive-module-month-2014-3">
2014 / 3
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2014/2" class="archive-module-month-title archive-module-month-2014-2">
2014 / 2
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2014/1" class="archive-module-month-title archive-module-month-2014-1">
2014 / 1
</a>
</li>
</ul>
</li>
<li class="archive-module-year archive-module-year-hidden" data-year="2013">
<div class="archive-module-button">
<span class="archive-module-hide-button">▼</span>
<span class="archive-module-show-button">▶</span>
</div>
<a href="https://futureinsight.info/archive/2013" class="archive-module-year-title archive-module-year-2013">
2013
</a>
<ul class="archive-module-months">
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2013/12" class="archive-module-month-title archive-module-month-2013-12">
2013 / 12
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2013/11" class="archive-module-month-title archive-module-month-2013-11">
2013 / 11
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2013/10" class="archive-module-month-title archive-module-month-2013-10">
2013 / 10
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2013/9" class="archive-module-month-title archive-module-month-2013-9">
2013 / 9
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2013/8" class="archive-module-month-title archive-module-month-2013-8">
2013 / 8
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2013/7" class="archive-module-month-title archive-module-month-2013-7">
2013 / 7
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2013/6" class="archive-module-month-title archive-module-month-2013-6">
2013 / 6
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2013/5" class="archive-module-month-title archive-module-month-2013-5">
2013 / 5
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2013/4" class="archive-module-month-title archive-module-month-2013-4">
2013 / 4
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2013/3" class="archive-module-month-title archive-module-month-2013-3">
2013 / 3
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2013/2" class="archive-module-month-title archive-module-month-2013-2">
2013 / 2
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2013/1" class="archive-module-month-title archive-module-month-2013-1">
2013 / 1
</a>
</li>
</ul>
</li>
<li class="archive-module-year archive-module-year-hidden" data-year="2012">
<div class="archive-module-button">
<span class="archive-module-hide-button">▼</span>
<span class="archive-module-show-button">▶</span>
</div>
<a href="https://futureinsight.info/archive/2012" class="archive-module-year-title archive-module-year-2012">
2012
</a>
<ul class="archive-module-months">
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2012/12" class="archive-module-month-title archive-module-month-2012-12">
2012 / 12
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2012/11" class="archive-module-month-title archive-module-month-2012-11">
2012 / 11
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2012/9" class="archive-module-month-title archive-module-month-2012-9">
2012 / 9
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2012/8" class="archive-module-month-title archive-module-month-2012-8">
2012 / 8
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2012/7" class="archive-module-month-title archive-module-month-2012-7">
2012 / 7
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2012/6" class="archive-module-month-title archive-module-month-2012-6">
2012 / 6
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2012/5" class="archive-module-month-title archive-module-month-2012-5">
2012 / 5
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2012/4" class="archive-module-month-title archive-module-month-2012-4">
2012 / 4
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2012/3" class="archive-module-month-title archive-module-month-2012-3">
2012 / 3
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2012/2" class="archive-module-month-title archive-module-month-2012-2">
2012 / 2
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2012/1" class="archive-module-month-title archive-module-month-2012-1">
2012 / 1
</a>
</li>
</ul>
</li>
<li class="archive-module-year archive-module-year-hidden" data-year="2011">
<div class="archive-module-button">
<span class="archive-module-hide-button">▼</span>
<span class="archive-module-show-button">▶</span>
</div>
<a href="https://futureinsight.info/archive/2011" class="archive-module-year-title archive-module-year-2011">
2011
</a>
<ul class="archive-module-months">
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2011/12" class="archive-module-month-title archive-module-month-2011-12">
2011 / 12
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2011/11" class="archive-module-month-title archive-module-month-2011-11">
2011 / 11
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2011/10" class="archive-module-month-title archive-module-month-2011-10">
2011 / 10
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2011/9" class="archive-module-month-title archive-module-month-2011-9">
2011 / 9
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2011/8" class="archive-module-month-title archive-module-month-2011-8">
2011 / 8
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2011/7" class="archive-module-month-title archive-module-month-2011-7">
2011 / 7
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2011/6" class="archive-module-month-title archive-module-month-2011-6">
2011 / 6
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2011/5" class="archive-module-month-title archive-module-month-2011-5">
2011 / 5
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2011/4" class="archive-module-month-title archive-module-month-2011-4">
2011 / 4
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2011/3" class="archive-module-month-title archive-module-month-2011-3">
2011 / 3
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2011/2" class="archive-module-month-title archive-module-month-2011-2">
2011 / 2
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2011/1" class="archive-module-month-title archive-module-month-2011-1">
2011 / 1
</a>
</li>
</ul>
</li>
<li class="archive-module-year archive-module-year-hidden" data-year="2010">
<div class="archive-module-button">
<span class="archive-module-hide-button">▼</span>
<span class="archive-module-show-button">▶</span>
</div>
<a href="https://futureinsight.info/archive/2010" class="archive-module-year-title archive-module-year-2010">
2010
</a>
<ul class="archive-module-months">
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2010/12" class="archive-module-month-title archive-module-month-2010-12">
2010 / 12
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2010/11" class="archive-module-month-title archive-module-month-2010-11">
2010 / 11
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2010/10" class="archive-module-month-title archive-module-month-2010-10">
2010 / 10
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2010/9" class="archive-module-month-title archive-module-month-2010-9">
2010 / 9
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2010/8" class="archive-module-month-title archive-module-month-2010-8">
2010 / 8
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2010/7" class="archive-module-month-title archive-module-month-2010-7">
2010 / 7
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2010/6" class="archive-module-month-title archive-module-month-2010-6">
2010 / 6
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2010/5" class="archive-module-month-title archive-module-month-2010-5">
2010 / 5
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2010/4" class="archive-module-month-title archive-module-month-2010-4">
2010 / 4
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2010/3" class="archive-module-month-title archive-module-month-2010-3">
2010 / 3
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2010/2" class="archive-module-month-title archive-module-month-2010-2">
2010 / 2
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2010/1" class="archive-module-month-title archive-module-month-2010-1">
2010 / 1
</a>
</li>
</ul>
</li>
<li class="archive-module-year archive-module-year-hidden" data-year="2009">
<div class="archive-module-button">
<span class="archive-module-hide-button">▼</span>
<span class="archive-module-show-button">▶</span>
</div>
<a href="https://futureinsight.info/archive/2009" class="archive-module-year-title archive-module-year-2009">
2009
</a>
<ul class="archive-module-months">
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2009/12" class="archive-module-month-title archive-module-month-2009-12">
2009 / 12
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2009/11" class="archive-module-month-title archive-module-month-2009-11">
2009 / 11
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2009/10" class="archive-module-month-title archive-module-month-2009-10">
2009 / 10
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2009/9" class="archive-module-month-title archive-module-month-2009-9">
2009 / 9
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2009/8" class="archive-module-month-title archive-module-month-2009-8">
2009 / 8
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2009/7" class="archive-module-month-title archive-module-month-2009-7">
2009 / 7
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2009/6" class="archive-module-month-title archive-module-month-2009-6">
2009 / 6
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2009/5" class="archive-module-month-title archive-module-month-2009-5">
2009 / 5
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2009/4" class="archive-module-month-title archive-module-month-2009-4">
2009 / 4
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2009/3" class="archive-module-month-title archive-module-month-2009-3">
2009 / 3
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2009/2" class="archive-module-month-title archive-module-month-2009-2">
2009 / 2
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2009/1" class="archive-module-month-title archive-module-month-2009-1">
2009 / 1
</a>
</li>
</ul>
</li>
<li class="archive-module-year archive-module-year-hidden" data-year="2008">
<div class="archive-module-button">
<span class="archive-module-hide-button">▼</span>
<span class="archive-module-show-button">▶</span>
</div>
<a href="https://futureinsight.info/archive/2008" class="archive-module-year-title archive-module-year-2008">
2008
</a>
<ul class="archive-module-months">
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2008/12" class="archive-module-month-title archive-module-month-2008-12">
2008 / 12
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2008/11" class="archive-module-month-title archive-module-month-2008-11">
2008 / 11
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2008/10" class="archive-module-month-title archive-module-month-2008-10">
2008 / 10
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2008/9" class="archive-module-month-title archive-module-month-2008-9">
2008 / 9
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2008/8" class="archive-module-month-title archive-module-month-2008-8">
2008 / 8
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2008/7" class="archive-module-month-title archive-module-month-2008-7">
2008 / 7
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2008/6" class="archive-module-month-title archive-module-month-2008-6">
2008 / 6
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2008/5" class="archive-module-month-title archive-module-month-2008-5">
2008 / 5
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2008/4" class="archive-module-month-title archive-module-month-2008-4">
2008 / 4
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2008/3" class="archive-module-month-title archive-module-month-2008-3">
2008 / 3
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2008/2" class="archive-module-month-title archive-module-month-2008-2">
2008 / 2
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2008/1" class="archive-module-month-title archive-module-month-2008-1">
2008 / 1
</a>
</li>
</ul>
</li>
<li class="archive-module-year archive-module-year-hidden" data-year="2007">
<div class="archive-module-button">
<span class="archive-module-hide-button">▼</span>
<span class="archive-module-show-button">▶</span>
</div>
<a href="https://futureinsight.info/archive/2007" class="archive-module-year-title archive-module-year-2007">
2007
</a>
<ul class="archive-module-months">
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2007/12" class="archive-module-month-title archive-module-month-2007-12">
2007 / 12
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2007/11" class="archive-module-month-title archive-module-month-2007-11">
2007 / 11
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2007/10" class="archive-module-month-title archive-module-month-2007-10">
2007 / 10
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2007/9" class="archive-module-month-title archive-module-month-2007-9">
2007 / 9
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2007/8" class="archive-module-month-title archive-module-month-2007-8">
2007 / 8
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2007/7" class="archive-module-month-title archive-module-month-2007-7">
2007 / 7
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2007/6" class="archive-module-month-title archive-module-month-2007-6">
2007 / 6
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2007/5" class="archive-module-month-title archive-module-month-2007-5">
2007 / 5
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2007/4" class="archive-module-month-title archive-module-month-2007-4">
2007 / 4
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2007/3" class="archive-module-month-title archive-module-month-2007-3">
2007 / 3
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2007/2" class="archive-module-month-title archive-module-month-2007-2">
2007 / 2
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2007/1" class="archive-module-month-title archive-module-month-2007-1">
2007 / 1
</a>
</li>
</ul>
</li>
<li class="archive-module-year archive-module-year-hidden" data-year="2006">
<div class="archive-module-button">
<span class="archive-module-hide-button">▼</span>
<span class="archive-module-show-button">▶</span>
</div>
<a href="https://futureinsight.info/archive/2006" class="archive-module-year-title archive-module-year-2006">
2006
</a>
<ul class="archive-module-months">
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2006/12" class="archive-module-month-title archive-module-month-2006-12">
2006 / 12
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2006/11" class="archive-module-month-title archive-module-month-2006-11">
2006 / 11
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2006/10" class="archive-module-month-title archive-module-month-2006-10">
2006 / 10
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2006/9" class="archive-module-month-title archive-module-month-2006-9">
2006 / 9
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2006/8" class="archive-module-month-title archive-module-month-2006-8">
2006 / 8
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2006/7" class="archive-module-month-title archive-module-month-2006-7">
2006 / 7
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2006/6" class="archive-module-month-title archive-module-month-2006-6">
2006 / 6
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2006/5" class="archive-module-month-title archive-module-month-2006-5">
2006 / 5
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2006/4" class="archive-module-month-title archive-module-month-2006-4">
2006 / 4
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2006/3" class="archive-module-month-title archive-module-month-2006-3">
2006 / 3
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2006/2" class="archive-module-month-title archive-module-month-2006-2">
2006 / 2
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2006/1" class="archive-module-month-title archive-module-month-2006-1">
2006 / 1
</a>
</li>
</ul>
</li>
<li class="archive-module-year archive-module-year-hidden" data-year="2005">
<div class="archive-module-button">
<span class="archive-module-hide-button">▼</span>
<span class="archive-module-show-button">▶</span>
</div>
<a href="https://futureinsight.info/archive/2005" class="archive-module-year-title archive-module-year-2005">
2005
</a>
<ul class="archive-module-months">
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2005/12" class="archive-module-month-title archive-module-month-2005-12">
2005 / 12
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2005/11" class="archive-module-month-title archive-module-month-2005-11">
2005 / 11
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2005/10" class="archive-module-month-title archive-module-month-2005-10">
2005 / 10
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2005/9" class="archive-module-month-title archive-module-month-2005-9">
2005 / 9
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2005/8" class="archive-module-month-title archive-module-month-2005-8">
2005 / 8
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2005/7" class="archive-module-month-title archive-module-month-2005-7">
2005 / 7
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2005/6" class="archive-module-month-title archive-module-month-2005-6">
2005 / 6
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2005/5" class="archive-module-month-title archive-module-month-2005-5">
2005 / 5
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2005/4" class="archive-module-month-title archive-module-month-2005-4">
2005 / 4
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2005/3" class="archive-module-month-title archive-module-month-2005-3">
2005 / 3
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2005/2" class="archive-module-month-title archive-module-month-2005-2">
2005 / 2
</a>
</li>
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2005/1" class="archive-module-month-title archive-module-month-2005-1">
2005 / 1
</a>
</li>
</ul>
</li>
<li class="archive-module-year archive-module-year-hidden" data-year="2004">
<div class="archive-module-button">
<span class="archive-module-hide-button">▼</span>
<span class="archive-module-show-button">▶</span>
</div>
<a href="https://futureinsight.info/archive/2004" class="archive-module-year-title archive-module-year-2004">
2004
</a>
<ul class="archive-module-months">
<li class="archive-module-month">
<a href="https://futureinsight.info/archive/2004/12" class="archive-module-month-title archive-module-month-2004-12">
2004 / 12
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</aside>
</div>
</div>
</div>
</div>
<script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>
<script async src="https://s.hatena.ne.jp/js/widget/star.js"></script>
<script>
if (typeof window.Hatena === 'undefined') {
window.Hatena = {};
}
if (!Hatena.hasOwnProperty('Star')) {
Hatena.Star = {
VERSION: 2,
};
}
</script>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&appId=719729204785177&version=v2.7";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="quote-box">
<div class="tooltip-quote tooltip-quote-stock">
<i class="blogicon-quote" title="引用をストック"></i>
</div>
<div class="tooltip-quote tooltip-quote-tweet js-tooltip-quote-tweet">
<a class="js-tweet-quote" target="_blank" data-track-name="quote-tweet" data-track-once><i class="blogicon-twitter" title="引用してツイートする"></i></a>
</div>
</div>
<div class="quote-stock-panel" id="quote-stock-message-box" style="position: absolute; z-index: 3000">
<div class="message-box" id="quote-stock-succeeded-message" style="display: none">
<p>引用をストックしました</p>
<button class="btn btn-primary" id="quote-stock-show-editor-button" data-track-name="curation-quote-edit-button">ストック一覧を見る</button>
<button class="btn quote-stock-close-message-button">閉じる</button>
</div>
<div class="message-box" id="quote-login-required-message" style="display: none">
<p>引用するにはまずログインしてください</p>
<button class="btn btn-primary" id="quote-login-button">ログイン</button>
<button class="btn quote-stock-close-message-button">閉じる</button>
</div>
<div class="error-box" id="quote-stock-failed-message" style="display: none">
<p>引用をストックできませんでした。再度お試しください</p>
<button class="btn quote-stock-close-message-button">閉じる</button>
</div>
<div class="error-box" id="unstockable-quote-message-box" style="display: none; position: absolute; z-index: 3000;">
<p>限定公開記事のため引用できません。</p>
</div>
</div>
<script type="x-underscore-template" id="js-requote-button-template">
<div class="requote-button js-requote-button">
<button class="requote-button-btn tipsy-top" title="引用する"><i class="blogicon-quote"></i></button>
</div>
</script>
<div id="hidden-subscribe-button" style="display: none;">
<div class="hatena-follow-button-box btn-subscribe js-hatena-follow-button-box"
>
<a href="#" class="hatena-follow-button js-hatena-follow-button">
<span class="subscribing">
<span class="foreground">読者です</span>
<span class="background">読者をやめる</span>
</span>
<span class="unsubscribing" data-track-name="profile-widget-subscribe-button" data-track-once>
<span class="foreground">読者になる</span>
<span class="background">読者になる</span>
</span>
</a>
<div class="subscription-count-box js-subscription-count-box">
<i></i>
<u></u>
<span class="subscription-count js-subscription-count">
</span>
</div>
</div>
</div>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
<script type="text/javascript" src="https://cdn.blog.st-hatena.com/js/external/jquery.min.js?v=1.12.4&version=2257c3cef835d5ff2179a046010bda"></script>
<script id="vendor-js" data-env="production" type="text/javascript" src="https://cdn.blog.st-hatena.com/js/vendor.js?version=2257c3cef835d5ff2179a046010bda" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.blog.st-hatena.com/js/texts-ja.js?version=2257c3cef835d5ff2179a046010bda"></script>
<script id="hatenablog-js" data-env="production"
type="text/javascript" src="https://cdn.blog.st-hatena.com/js/hatenablog.js?version=2257c3cef835d5ff2179a046010bda" crossorigin="anonymous"></script>
<script type="text/javascript">Hatena.Diary.GlobalHeader.init()</script>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</body>
</html>
]]></plaintext></p></div></div>