一回書いたの消えちゃったけど、今日は最後まで。
こんな感じで、うごいてるんだぜ：
まず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>-</li>
</ul></li>
</ul><p>うーん、俺自身にとっても興味深い内容でした。<br />
JavaScriptも一つのインターフェースの解決策として身につけたいです。</p><p>ではでは、疲れたのでこのへんで。</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/1104114000"><time data-relative datetime="2004-12-27T02:20:00Z" title="2004-12-27T02:20:00Z" class="updated">2004-12-27 11:20</time></a></span>
</p>
<div
class="hatena-star-container"
data-hatena-star-container
data-hatena-star-url="https://futureinsight.info/entry/20041227/1104114000"
data-hatena-star-title="Google Suggestの動作原理 3"
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/1104114000" class="hatena-bookmark-button" data-hatena-bookmark-url="https://futureinsight.info/entry/20041227/1104114000" 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/1104114000"></div>
</div>
<div class="social-button-item">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="https://futureinsight.info/entry/20041227/1104114000" data-count="vertical" data-text="Google Suggestの動作原理 3 - 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/1104114000" 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>
<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/20041227/1104115995" rel="prev">
<span class="pager-arrow">« </span>
Google Suggestの動作原理 まとめ
</a>
</span>
<span class="pager-next">
<a href="https://futureinsight.info/entry/20041226/1104068098" rel="next">
帰省日記
<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=252f57cf2ba26a0b255680637a4159"></script>
<script id="vendor-js" data-env="production" type="text/javascript" src="https://cdn.blog.st-hatena.com/js/vendor.js?version=252f57cf2ba26a0b255680637a4159" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.blog.st-hatena.com/js/texts-ja.js?version=252f57cf2ba26a0b255680637a4159"></script>
<script id="hatenablog-js" data-env="production"
type="text/javascript" src="https://cdn.blog.st-hatena.com/js/hatenablog.js?version=252f57cf2ba26a0b255680637a4159" 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>