<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Liner Note &#187; ツールの制作</title>
	<atom:link href="http://note.openvista.jp/tag/creating-tool/feed/" rel="self" type="application/rss+xml" />
	<link>http://note.openvista.jp</link>
	<description>情報（ユーザー中心デザイン・ユーザビリティ）と技術（ウェブプログラミング・ウェブサービス）についてのメモ書き</description>
	<lastBuildDate>Mon, 12 Sep 2011 15:12:52 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1</generator>
		<item>
		<title>RDBMSが扱いづらいのでSQliteを簡易XMLデータベースぽく使えるようにしてみた</title>
		<link>http://note.openvista.jp/2008/xml-like-database-using-sqlite/</link>
		<comments>http://note.openvista.jp/2008/xml-like-database-using-sqlite/#comments</comments>
		<pubDate>Mon, 22 Sep 2008 20:43:18 +0000</pubDate>
		<dc:creator>hash</dc:creator>
				<category><![CDATA[ツールの制作]]></category>
		<category><![CDATA[プログラミング技術絡み]]></category>

		<guid isPermaLink="false">http://note.openvista.jp/?p=793</guid>
		<description><![CDATA[伝統的なRDBMSのレコードにXMLファイルを突っ込んで、XMLデータベースチックに扱えるようなライブラリを使って楽してみます]]></description>
			<content:encoded><![CDATA[<p>最近大量の情報を扱うようになってから、MySQLやらSQLiteなどのRDBMSを触っているのですが、どうにも慣れません。</p>
<p>以前から小規模な設定は、SimpleXMLで書いたり読んだりしていまして、データベースなぞに触らなかったものですから、その直感的な操作性に味を占めてしまうと、前時代的なSQLのクエリをちくちく発行する気にはどうにもなりません<sup><a href="http://note.openvista.jp/2008/xml-like-database-using-sqlite/#footnote_0_793" id="identifier_0_793" class="footnote-link footnote-identifier-link" title="なにしろPHP5だと simplexml_load_file で設定を読み込んで、目的の項目を選ぶという2行のコードですむわけですから。RDBMSもフレームワーク附属のライブラリを使えば楽になるのかもしれませんけどフレームワークを使わない場合もあるわけで">1</a></sup> 。それにバイナリで中身が見られないというのは、全てがテキストエディタで覗けてなんとかなるというのに慣れた身にはどうにも不安すぎます。</p>
<p>何年か前からXMLでデータを管理する<a href="http://ja.wikipedia.org/wiki/%E3%83%8D%E3%82%A4%E3%83%86%E3%82%A3%E3%83%96XML%E3%83%87%E3%83%BC%E3%82%BF%E3%83%99%E3%83%BC%E3%82%B9">XMLデータベース</a>というのも出ていて、<a href="http://xml.apache.org/xindice/">Apache Xindice</a>なんかはオープンソースでの開発が進んでいるそうですが、一般的なレンタルサーバにおいてPHPで扱えるとなると、選択肢はどうもないようです。</p>
<p>そこで、SQLiteを使ってXMLデータベース的な事をやってみました<sup><a href="http://note.openvista.jp/2008/xml-like-database-using-sqlite/#footnote_1_793" id="identifier_1_793" class="footnote-link footnote-identifier-link" title="SQliteにしたのは必要なファイルが1つにまとめられていて環境移行がやりやすいためです">2</a></sup> 。方法はまぁ誰もが思い<br />
つくとは思いますが、BLOB型のレコードにXMLファイル文字列をそのまま突っ込んでIDつけてるだけです。それをクラスライブラリを介して、透過的に扱おうという案配です。</p>
<h3 id="t5cac26">パフォーマンステスト</h3>
<p>で、とりあえず、パフォーマンステストとして定番らしい郵便番号→住所変換で実行時間を測定してみます（元データは<a href="http://www.post.japanpost.jp/zipcode/download.html">郵便事業会社で公開</a>されています）</p>
<dl>
<dt>実験内容</dt>
<dd>Aにはデータを郵便番号、地名、番地名など細かい住所をそのままRDBの構造として格納、BにはこれらをXMLとして表現したものをそのまま挿入したものを挿入します。それぞれ郵便番号を指定して住所に変換する時間を測定します<span class="weaken">（レコード数は118,576件）</span></dd>
<dt>Aの方法</dt>
<dd>実行時間：0.04671秒<span class="weaken">（5回実行平均）</span></dd>
<dd>メモリ最大使用量：約995KB</dd>
<dt>Bの方法</dt>
<dd>実行時間：0.17422秒<span class="weaken">（5回実行平均）</span></dd>
<dd>メモリ最大使用量：約1009KB</dd>
</dl>
<p>標準的なRDBに比べ4倍遅いという結果になりましたが、個人的には許容量なので今後はこれで開発していこうかなと思います。今のところは10万件レベルのデータを扱うことはそんなにないですし、数千件程度の小規模な場合ならBの方法でも0.01秒程度で実行できます。</p>
<p>生のXMLファイルをずらっと並べた上で、ファイル読み込み→SimpleXMLを使って検索なんかすると、メモリをバンバン食う上にスケーラビリティが皆無に等しいのですが、この方法だとある程度は持ちこたえられます。パフォーマンスやスケーラビリティを気にする人は間違っても使ってはいけません。加えてテーブルを1個しか持てませんが、増やしたい場合はデータベースファイルを増やせば良いだけなので特に気にしてません。</p>
<h3 id="t540a05">取扱説明書</h3>
<dl>
<dt>初期データ入力</dt>
<dd>コントローラ側で、データ元のXMLがあるフォルダとDBのファイル名を指定します。DBファイルは事前に空ファイルを&#8221;ファイル名.db&#8221;という名前で作っておき、XMLがあるフォルダと共に書き込み可能にしておきます。コントローラのURIに construct というクエリを付けて実行するとデータ入力が始まります。</dd>
<dt>データ取得</dt>
<dd>
<p>searchメソッドで検索結果を取得を取得できます。引数は3つあり、順に&#8221;検索語&#8221;, &#8220;検索方法&#8221;, &#8220;検索対象の要素がある場所&#8221;です。</p>
<p>検索方法が取る値はall（全文検索）, parts（部分一致）, full（完全一致）, prefix（前方一致）, suffix（後方一致）の4つです。検索対象の要素がある場所はSimpleXMLを使うときのようにノードのパスを指定します、全文検索の際はこの引数は無視されます。</p>
<p>正常にデータが取得できれば、XMLの配列でデータが帰ってきます<span class="weaken">（SimpleXMLElement Object型になってます）</span></p>
</dd>
<dd>
<p><em>サンプルコード</em>（郵便番号→住所の変換）</p>
<div class="source-code"><div><img src="http://note.openvista.jp/wp-content/plugins/coolcode/code.png" width="16" height="16" alt="" /> <em>PHPソースコード</em></div><pre class="source-code"><code><span class="codes-inlinetags">&lt;?php</span>
<span class="codes-var">$db</span><span class="codes-code"> = </span><span class="codes-reserved">new</span><span class="codes-code"> </span><span class="codes-identifier">XSQLiteManager</span><span class="codes-code">;</span>
<span class="codes-code"> </span>
<span class="codes-comment">// データベースのファイル名とXMLがあるフォルダを指定して読み込む</span>
<span class="codes-var">$db</span><span class="codes-code">-&gt;</span><span class="codes-identifier">simplexml_load_db</span><span class="codes-brackets">(</span><span class="codes-quotes">&quot;</span><span class="codes-string">zipcode</span><span class="codes-quotes">&quot;</span><span class="codes-code">, </span><span class="codes-quotes">&quot;</span><span class="codes-string">./data</span><span class="codes-quotes">&quot;</span><span class="codes-brackets">)</span><span class="codes-code">;</span>
<span class="codes-code"> </span>
<span class="codes-reserved">if</span><span class="codes-code"> </span><span class="codes-brackets">(</span><span class="codes-var">$_GET</span><span class="codes-brackets">[</span><span class="codes-quotes">&quot;</span><span class="codes-string">zip</span><span class="codes-quotes">&quot;</span><span class="codes-brackets">]){</span>
<span class="codes-code">  </span><span class="codes-var">$zip</span><span class="codes-code"> = </span><span class="codes-identifier">mb_convert_kana</span><span class="codes-brackets">(</span><span class="codes-var">$_GET</span><span class="codes-brackets">[</span><span class="codes-quotes">&quot;</span><span class="codes-string">zip</span><span class="codes-quotes">&quot;</span><span class="codes-brackets">]</span><span class="codes-code">, </span><span class="codes-quotes">&quot;</span><span class="codes-string">a</span><span class="codes-quotes">&quot;</span><span class="codes-brackets">)</span><span class="codes-code">;</span>
<span class="codes-code">  </span><span class="codes-reserved">if</span><span class="codes-code"> </span><span class="codes-brackets">(</span><span class="codes-identifier">preg_match</span><span class="codes-brackets">(</span><span class="codes-quotes">&quot;</span><span class="codes-string">/(\d{3})\-?(\d{4})/</span><span class="codes-quotes">&quot;</span><span class="codes-code">, </span><span class="codes-var">$zip</span><span class="codes-code">, </span><span class="codes-var">$q</span><span class="codes-brackets">)){</span>
<span class="codes-code">    </span><span class="codes-comment">// 検索を実行してXMLの配列形式で結果を受け取る</span>
<span class="codes-code">    </span><span class="codes-var">$results</span><span class="codes-code"> = </span><span class="codes-var">$db</span><span class="codes-code">-&gt;</span><span class="codes-identifier">search</span><span class="codes-brackets">(</span><span class="codes-var">$q</span><span class="codes-brackets">[</span><span class="codes-number">1</span><span class="codes-brackets">]</span><span class="codes-code">.</span><span class="codes-var">$q</span><span class="codes-brackets">[</span><span class="codes-number">2</span><span class="codes-brackets">]</span><span class="codes-code">, </span><span class="codes-quotes">&quot;</span><span class="codes-string">full</span><span class="codes-quotes">&quot;</span><span class="codes-code">, </span><span class="codes-quotes">&quot;</span><span class="codes-string">zip</span><span class="codes-quotes">&quot;</span><span class="codes-brackets">)</span><span class="codes-code">;</span>
<span class="codes-code">    </span><span class="codes-reserved">if</span><span class="codes-code"> </span><span class="codes-brackets">(</span><span class="codes-var">$results</span><span class="codes-brackets">){</span>
<span class="codes-code">      </span><span class="codes-var">$address</span><span class="codes-code"> = </span><span class="codes-var">$results</span><span class="codes-brackets">[</span><span class="codes-number">0</span><span class="codes-brackets">]</span><span class="codes-code">-&gt;</span><span class="codes-identifier">name</span><span class="codes-code">. </span><span class="codes-var">$results</span><span class="codes-brackets">[</span><span class="codes-number">0</span><span class="codes-brackets">]</span><span class="codes-code">-&gt;</span><span class="codes-identifier">local</span><span class="codes-code">;</span>
<span class="codes-code">      </span><span class="codes-reserved">echo</span><span class="codes-code"> </span><span class="codes-quotes">&quot;</span><span class="codes-string">郵便番号（</span><span class="codes-quotes">&quot;</span><span class="codes-code">. </span><span class="codes-identifier">htmlspecialchars</span><span class="codes-brackets">(</span><span class="codes-var">$zip</span><span class="codes-brackets">)</span><span class="codes-code"> .</span><span class="codes-quotes">&quot;</span><span class="codes-string">）の住所は</span><span class="codes-quotes">&quot;</span><span class="codes-code">. </span><span class="codes-var">$address</span><span class="codes-code"> .</span><span class="codes-quotes">&quot;</span><span class="codes-string">です</span><span class="codes-quotes">&quot;</span><span class="codes-code">;</span>
<span class="codes-code">    </span><span class="codes-brackets">}</span><span class="codes-code"> </span><span class="codes-reserved">else</span><span class="codes-brackets">{</span>
<span class="codes-code">      </span><span class="codes-reserved">echo</span><span class="codes-code"> </span><span class="codes-quotes">&quot;</span><span class="codes-string">検索語に当てはまる検索結果が見つかりません</span><span class="codes-quotes">&quot;</span><span class="codes-code">;</span>
<span class="codes-code">    </span><span class="codes-brackets">}</span>
<span class="codes-code">  </span><span class="codes-brackets">}</span><span class="codes-code"> </span><span class="codes-reserved">else</span><span class="codes-brackets">{</span>
<span class="codes-code">    </span><span class="codes-reserved">echo</span><span class="codes-code"> </span><span class="codes-quotes">&quot;</span><span class="codes-string">正しい郵便番号（数字7桁）を入力してください</span><span class="codes-quotes">&quot;</span><span class="codes-code">;</span>
<span class="codes-code">  </span><span class="codes-brackets">}</span>
<span class="codes-brackets">}</span>
<span class="codes-code"> </span>
<span class="codes-code"> </span>
<span class="codes-inlinetags">?&gt;</span></code></pre></div>
</dd>
<dt>データ追加</dt>
<dd>XMLデータ文字列を引数にして insertXML メソッドを実行してください。データベースの最後尾に追加されます。</dd>
<dt>データ更新</dt>
<dd>IDとXMLデータ文字列を引数にして updateXML メソッドを実行してください。IDはデータベース上のレコード番号のことで search メソッドを実行したときに帰ってくる結果の配列のキーに書いてあります。</dd>
<dt>データ削除</dt>
<dd>IDを引数にして deleteXML メソッドを実行してください。</dd>
</dl>
<h3 id="t3fded1">デモとダウンロード</h3>
<p><a href="http://tech.openvista.jp/tmp/zip/">郵便番号検索デモサイト</a></p>
<dl class="download">
<dt>ダウンロード</dt>
<dd><a href="http://tech.openvista.jp/tmp/zip/zip.zip">データベース一式</a> (20MB)</dd>
<dt>ライセンス</dt>
<dd><a rel="license" href="http://ja.wikipedia.org/wiki/GNU_General_Public_License">GNU General Public License</a><span class="weaken">（郵便番号データの著作権は郵便事業会社にあると思うので除外）</span></dd>
</dl>
<ol class="footnotes"><li id="footnote_0_793" class="footnote">なにしろPHP5だと simplexml_load_file で設定を読み込んで、目的の項目を選ぶという2行のコードですむわけですから。RDBMSもフレームワーク附属のライブラリを使えば楽になるのかもしれませんけどフレームワークを使わない場合もあるわけで</li><li id="footnote_1_793" class="footnote">SQliteにしたのは必要なファイルが1つにまとめられていて環境移行がやりやすいためです</li></ol><img src="http://note.openvista.jp/?ak_action=api_record_view&id=793&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://note.openvista.jp/2008/xml-like-database-using-sqlite/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>このサイト上で使っているWordPress用テーマ &#8220;cielo&#8221; を公開するよ</title>
		<link>http://note.openvista.jp/2008/wordpress-theme-cielo/</link>
		<comments>http://note.openvista.jp/2008/wordpress-theme-cielo/#comments</comments>
		<pubDate>Sat, 13 Sep 2008 18:28:18 +0000</pubDate>
		<dc:creator>hash</dc:creator>
				<category><![CDATA[ウェブサービス論]]></category>
		<category><![CDATA[ウェブデザイン]]></category>
		<category><![CDATA[ウェブログツール]]></category>
		<category><![CDATA[ツールの制作]]></category>
		<category><![CDATA[ビジネス]]></category>
		<category><![CDATA[プログラミング技術絡み]]></category>
		<category><![CDATA[情報の設計]]></category>

		<guid isPermaLink="false">http://note.openvista.jp/?p=626</guid>
		<description><![CDATA[このサイト上で使用しているブログツール「WordPress」用の1カラムのテーマ "cielo" を公開します]]></description>
			<content:encoded><![CDATA[<p>前々からこのサイトのテーマの配布準備作業を進めていましたが、ようやく形になったので一般公開します。ちなみに &#8220;cielo&#8221; とはイタリア語で空という意味です。</p>
<dl>
<dt>デモサイト</dt>
<dd>
<p><a href="http://tech.openvista.jp/demo/wordpress/"><img src="http://note.openvista.jp/download/2008/09/screenshot.png" alt="スクリーンショット" title="スクリーンショット" /></a></p>
</dd>
</dl>
<dl class="download">
<dt>ダウンロード</dt>
<dd><a href="http://tech.openvista.jp/demo/wordpress/wp-content/themes/cielo.zip">cieloテーマ</a>(約1.2MB)</dd>
<dt>最終更新日</dt>
<dd>2011年9月13日 08時05分 </dd>
<dt>動作環境</dt>
<dd>PHP5.2.0以上、WordPress 2.5以上</dd>
<dt>ライセンス</dt>
<dd><a href="#copyright">ライセンスが設定されているリソース</a>はそのライセンスに従ってください。その他は<a rel="license" href="http://tech.openvista.jp/demo/wordpress/wp-content/themes/cielo/COPYRIGHT.txt">修正BSDライセンス</a>とします</dd>
</dl>
<div class="toc">
<ol>
<li><a href="http://note.openvista.jp/2008/wordpress-theme-cielo/#ta6a9ed">使い方</a></li>
<li><a href="http://note.openvista.jp/2008/wordpress-theme-cielo/#t39b886">特徴</a>
<ol>
<li><a href="http://note.openvista.jp/2008/wordpress-theme-cielo/#t0db1e1">快適に読むための環境</a></li>
<li><a href="http://note.openvista.jp/2008/wordpress-theme-cielo/#t0ad310">各種ウェブサービスとの連携</a></li>
<li><a href="http://note.openvista.jp/2008/wordpress-theme-cielo/#t0d2dcc">ウェブアプリケーションを簡単に使える内蔵機能</a></li>
<li><a href="http://note.openvista.jp/2008/wordpress-theme-cielo/#tc9af8c">モバイルにも対応</a></li>
<li><a href="http://note.openvista.jp/2008/wordpress-theme-cielo/#t69462c">その他にも</a></li>
<li><a href="http://note.openvista.jp/2008/wordpress-theme-cielo/#tdd43ee">サポートしないもの</a></li>
</ol>
</li>
<li><a href="http://note.openvista.jp/2008/wordpress-theme-cielo/#tf3fb28">導入を推奨するプラグイン</a>
<ol>
<li><a href="http://note.openvista.jp/2008/wordpress-theme-cielo/#t8cb654">依存しているプラグイン</a></li>
<li><a href="http://note.openvista.jp/2008/wordpress-theme-cielo/#tfe6807">入れたら便利なプラグイン</a></li>
<li><a href="http://note.openvista.jp/2008/wordpress-theme-cielo/#td00e26">スパム防止に役立つプラグイン</a></li>
</ol>
</li>
<li><a href="http://note.openvista.jp/2008/wordpress-theme-cielo/#t2be41b">仕様・技術情報</a></li>
<li><a href="http://note.openvista.jp/2008/wordpress-theme-cielo/#ta2bb6a">謝辞 &amp; 著作権表記</a></li>
<li><a href="http://note.openvista.jp/2008/wordpress-theme-cielo/#t5edd4e">更新履歴</a></li>
</ol>
</div>
<h3 id="ta6a9ed">使い方</h3>
<ol>
<li>ファイルをダウンロードしたら解凍してください</li>
<li>中に入っている<var>/module/config.php</var>ファイルがテーマの設定ファイルですので、指示に従って設定してください</li>
<li>サーバの<var>/wp-content/themes/</var>フォルダに(2)をアップロードしてください</li>
<li>サーバの<var>/wp-content/themes/cielo/cache/</var>フォルダを書き込み可能な状態<span class="weaken">(パーミッションを0777&lt;rwxrwxrwx&gt;)</span>にしてください</li>
<li><a href="#required-plugin">必須プラグイン一式</a>をダウンロードし、解凍します</li>
<li>サーバの<var>/wp-content/plugins/</var>フォルダに(4)をアップロードしてください</li>
<li>管理画面からプラグインを有効化します</li>
<li>管理画面からテーマを有効化します</li>
<li>記事一覧ページなど特殊なページを作成します。投稿 → ページ から以下のページを作成してください。中身はテンプレートから自動的に読み込まれます
<ul>
<li>ポストスラグ名:<em>webmemo</em>のページを作成。タイトルはご自由に、中身は空でOK</li>
<li>ポストスラグ名:<em>archives</em>のページを作成。タイトルはご自由に、中身は空でOK</li>
<li>ポストスラグ名:<em>all</em>のページを作成。タイトルはご自由に、中身は空でOK</li>
<li>ポストスラグ名:<em>readmore</em>のページを作成。タイトルはご自由に、中身は空でOK</li>
</ul>
</li>
</ol>
<h3 id="t39b886">特徴</h3>
<h4 id="t0db1e1">快適に読むための環境</h4>
<p><img src="http://note.openvista.jp/download/2008/09/cielo-webdesign.png" alt="ウェブデザイン" title="ウェブデザイン" /></p>
<p>ブログは読者あってこそ。できるだけ多くの人に快適にブログを見てもらえるよう、多すぎず、少なすぎず必要な機能を配置しました</p>
<dl>
<dt>1カラム</dt>
<dd><a href="http://note.openvista.jp/2007/side-bar-skeptics/">本文のレイアウトが崩れにくく、本文を一番読んでもらえる1カラム</a>を採用しました</dd>
<dt>本文検索機能</dt>
<dd>並び替え機能、<a href="http://note.openvista.jp/2008/autopagerize-without-greasemonkey/">検索結果の自動継ぎ足し</a>をサポート</dd>
<dt>次の記事へ</dt>
<dd>関連記事、人気の記事(自動取得&amp;手動設定)で次の記事へ読者を案内します</dd>
</dl>
<h4 id="t0ad310">各種ウェブサービスとの連携</h4>
<p><img src="http://note.openvista.jp/download/2008/09/cielo-webmemo.png" alt="ウェブメモ" title="ウェブメモ" /></p>
<p>ブログサイトを運営する上で欠かせないネット上のサービスも簡単に利用できます。</p>
<dl>
<dt>Google Analytics</dt>
<dd>Googleのアクセス解析サービスも設定画面から認証キーを入力すれば利用できます</dd>
<dt>はてなブックマーク</dt>
<dd>エントリーページにはてなブックマークへのリンクを自動的に表示します</dd>
<dd>コメント欄には、はてなブックマークのコメントがシームレスに表示されるよう組み込みました</dd>
<dt>ウェブメモ機能</dt>
<dd>twitter, tumblr, はてなブックマーク上での最新の更新をウェブメモコーナーとして表示できます。表示した各記事には、はてなスターをつけることができます<span class="weaken">(はてなスターのトークンの発行が必要です)</span></dd>
</dl>
<h4 id="t0d2dcc">ウェブアプリケーションを簡単に使える内蔵機能</h4>
<p><img src="http://note.openvista.jp/download/2008/09/cielo-built-in-function.png" alt="内蔵機能" title="内蔵機能" /></p>
<p>便利なウェブアプリケーションが記事中で簡単に呼び出せます</p>
<dl>
<dt>Googleマップを1行で</dt>
<dd>住所を指定するだけでその周辺の2D地図や風景を表示できます(Googleマップ APIの発行が必要です)</dd>
<dt>動画の貼り付けも1行で</dt>
<dd>動画共有サイト(Youtube, Googleビデオ)上の動画や自作動画をコードを考えることなく簡単に公開できます</dd>
</dl>
<h4 id="tc9af8c">モバイルにも対応</h4>
<p><img src="http://note.openvista.jp/download/2008/09/cielo-formobile.png" alt="モバイル向けの表示" title="モバイル向けの表示" /></p>
<p>もちろん、携帯電話やiPhoneなどのモバイル機器にも対応します</p>
<dl>
<dt>携帯電話にもプラグイン使用で対応</dt>
<dd>餅は餅屋…ということで動きの速い携帯電話向けの最適化は<a href="http://wppluginsj.sourceforge.jp/ktai_style/">Ktai Style</a>を使うことで対応することにしました</dd>
<dt>iPhone / iPod touchに標準対応</dt>
<dd>ビジュアルデザインはiPhoneのSafariでも読みやすくなるよう最適化しています</dd>
<dd>呼び出した動画や地図は、iPhone / iPod touch内蔵アプリでも再生できるように工夫しています</dd>
</dl>
<h4 id="t69462c">その他にも</h4>
<dl>
<dt>XHTML1.1 + CSSで書いています</dt>
<dd>Web標準に準拠した、できるだけシンプルな文書構造を心がけました。現在使われているほとんどのウェブブラウザに対応しています。</dd>
<dt>SEOにも配慮</dt>
<dd>metaタグの自動生成、XHTMLでの構造化、わかりやすいページタイトルとテーマ側で出来ることはやっておきました。</dd>
<dt>間違ってると思ったらすぐ編集</dt>
<dd>ログインしている間は記事画面からワンクリックで編集画面に移動できます。</dd>
<dt>エフェクトでおめかし</dt>
<dd><a href="http://www.remus.dti.ne.jp/~a-satomi/bunsyorou/ArekorePopup.html">あれこれポップアップ</a><span class="weaken">(リンク先・引用元のタイトルなどをちょっとリッチにポップアップするスクリプト)</span>や<a href="http://leandrovieira.com/projects/jquery/lightbox/">jQuery lightbox プラグイン</a><span class="weaken">(写真のポップアップをエフェクトを付けて表示するスクリプト)</span>を標準で導入しています</dd>
<dt>ページ毎のCSSデザインも簡単に</dt>
<dd><a href="http://ideasilo.wordpress.com/2006/08/17/sandbox-theme/">Sandbox テーマ</a>は主要な要素に現在の状態を示すクラス名をつける機能がありますが、cieloはこの機能を取り込んでいます</dd>
<dt>ダウンロードは高速に</dt>
<dd>一部のファイルをGZIPという形式で圧縮しており、サーバとブラウザが対応していれば落とすファイルサイズが小さくなり、高速にページが表示できるようになります(<a href="http://tech.openvista.jp/demo/wordpress/2008/faq/#t674e6e">方法</a>)</dd>
<dt>続き物の記事はまとめよう</dt>
<dd>記事は独立したものだけではなく、何回かに分けて書いた続き物の記事もあるでしょう。cieloテーマではそうした記事を半自動的にまとめあげ、シリーズのRSSフィードを発行することも出来ます(<a href="http://tech.openvista.jp/demo/wordpress/2008/faq/#t5b9ec7">方法</a>)</dd>
</dl>
<h4 id="tdd43ee">サポートしないもの</h4>
<p>このテーマは次の機能をサポートしません</p>
<ul>
<li>可変1カラムデザイン以外の表示方法</li>
<li>コメント欄でのアバターの表示</li>
<li>UTF-8以外の文字コードでの運用</li>
</ul>
<h3 id="tf3fb28">導入を推奨するプラグイン<a id="required-plugin"></a></h3>
<h4 id="t8cb654">依存しているプラグイン</h4>
<p>推奨というより、このプラグインを入れていないと動かないので必ず入れておいてください</p>
<dl class="download">
<dt>ダウンロード</dt>
<dd><a href="http://note.openvista.jp/download/2008/09/wp-plugins-required.zip">必須プラグイン一式をダウンロード</a></dd>
<dt>ライセンス</dt>
<dd><a rel="license" href="http://ja.wikipedia.org/wiki/GNU_General_Public_License">GNU General Public License</a></dd>
</dl>
<dl>
<dt><a href="http://bono.s201.xrea.com/2006/03/112-runphp/">runPHP</a></dt>
<dd>記事中でPHPコードを使うプラグインです。内蔵の動画共有サイトのコード呼び出し機能などを使ったり、記事一覧ページ中で記述しているPHPコードを実行するのに必要です。<q>「ビジュアルリッチエディタ」「XHTML 構文の自動修正」とは同時使用できない</q>ようですが、同種のプラグインは多くあるようなのでそちらを使っていただいても構いません。</dd>
<dt><a href="http://wordpress.org/extend/plugins/similar-posts/">Similar Posts</a></dt>
<dd>関連記事を表示させるためのプラグイン</dd>
<dt><a href="http://wordpress.org/extend/plugins/post-plugin-library/">Post-Plugin Library</a></dt>
<dd>上記プラグインを利用するために必要なプラグイン。これを利用したプラグインとして、上記意外にも人気記事を表示する<a href="http://wordpress.org/extend/plugins/popular-posts-plugin/">Popular Posts</a>などがあるので、余裕があれば試してみては。</dd>
</dl>
<h4 id="tfe6807">入れたら便利なプラグイン<a id="optional-plugin"></a></h4>
<p>入れなくても良いけど、実害はあまりないし便利なので入れておくことをオススメするプラグインです。</p>
<dl>
<dt><a href="http://elvery.net/drzax/more-things/wordpress-footnotes-plugin/">WP-Footnotes</a></dt>
<dd>本文中に<code>&#x28;&#x28;脚注の内容&#x29;&#x29;</code>と書くだけで脚注を生成してくれるプラグインです、ちょっとした余談で話の腰を折らずにすみます</dd>
<dt><a href="http://scott.yang.id.au/code/toc-generator/">Table of Contents Generator</a></dt>
<dd>本文中に<code>&lt;!--TOC--%gt;</code>と書くだけで見出しを拾って、目次を生成してくれるプラグインです、長めの記事を書くときは読者のことを考えてできるだけ使った方がよいでしょう</dd>
<dt><a href="http://note.openvista.jp/2007/amazon-linkage-plugin/">Amazon Linkage</a></dt>
<dd>本文中に<code>&lt;amazon&gt;ASIN&lt;/amazon&gt;</code>と書くだけで<span class="weaken">(ワンパターンですいません)</span>、ジャケット画像付きでAmazonへのリンクを貼れるプラグインです。</dd>
<dt><a href="http://wppluginsj.sourceforge.jp/ktai_style/">Ktai Style</a></dt>
<dd>携帯電話のアクセス時にコンテンツを読みやすいように最適化してくれるプラグインです。</dd>
</dl>
<h4 id="td00e26">スパム防止に役立つプラグイン</h4>
<p>入れておくと、スパム対策にてきめんの効果を発揮するプラグインです</p>
<dl>
<dt><a href="http://wp.somy.jp/spam-block-jp/">SOMY SpamBlock JP スパム対策プラグイン</a></dt>
<dd>コメントやトラックバックの内容にひらがなやカタカナが指定回数以上ない場合、該当のコメント等をスパム扱いするか、あるいは削除してくれるプラグインです。このプラグインを使って以来、半年に一回スパムが来るか来ないかという程度になりました。<ins><a href="http://note.openvista.jp/2008/wordpress-theme-cielo/comment-page-1/#comment-4853">セキュリティ上の懸念が残る</a>とご指摘を頂きました（今すぐに危険なわけではないようですが）。利用にあたっては、</ins></dd>
<dt><a href="http://sw-guide.de/wordpress/plugins/simple-trackback-validation/">Simple Trackback Validation</a></dt>
<dd>トラックバックが指定した条件に沿っていない場合、スパム扱いするか削除できるプラグインです。<a href="http://note.openvista.jp/profile/#trackback-policy">トラックバックポリシー</a>にも書いてありますが、記事のURLを含まないトラックバックは拒否するようにしています。</dd>
</dl>
<h3 id="t2be41b">仕様・技術情報</h3>
<p><a href="http://tech.openvista.jp/demo/wordpress/">デモサイト</a>にて技術情報を公開しています。</p>
<ul>
<li><a href="http://tech.openvista.jp/demo/wordpress/2008/html-expression/">cieloテーマで使えるHTMLコードの一覧</a></li>
<li><a href="http://tech.openvista.jp/demo/wordpress/2008/built-in-function/">cieloテーマ内蔵機能について</a></li>
<li><a href="http://tech.openvista.jp/demo/wordpress/2008/xhtml/">cieloテーマのXHTML構造について</a></li>
<li><a href="http://tech.openvista.jp/demo/wordpress/2008/faq/">cieloテーマのその他よくある質問</a></li>
</ul>
<h3 id="ta2bb6a">謝辞 &amp; 著作権表記<a id="copyright"></a></h3>
<p>このテーマは以下のリソースが無ければできていません。オープンなライセンスでいいものづくりをしてくれた皆さんに感謝。We&#8217;re standing on the shoulders of Giants!<span class="weaken">(お名前の敬称は略しています)</span></p>
<dl class="links">
<dt>Javascriptライブラリ</dt>
<dd><a href="http://jquery.com/">jQuery</a> by John Resig and the jQuery Team(GPL &amp; MIT License)</dd>
<dd><a href="http://leandrovieira.com/projects/jquery/lightbox/">jQuery lightbox plugin</a>(クリエイティブコモンズ 2.5 ブラジル 表示・改変禁止)</dd>
<dd><a href="http://webfx.eae.net/">WebFX</a> by Erik Arvidsson &amp; Emil A Eklund(Apache Software License 2.0)</dd>
<dd><a href="http://www.remus.dti.ne.jp/~a-satomi/bunsyorou/ArekorePopup.html">あれこれポップアップ</a> by ありみかさとみ(BSD License)</dd>
<dd><a href="http://www.twinhelix.com/css/iepngfix/">IE PNG Fix</a> by Angus Turnbull(GNU LGPL)</dd>
<dd><a href="http://www.xs4all.nl/~peterned/csshover.html">Whatever:hover</a> by Peter Nederiof(GNU LGPL)</dd>
<dt>アイコン</dt>
<dd><a href="http://www.famfamfam.com/lab/icons/silk/" title="famfamfam.com: Silk Icons">famfamfam.com: Silk Icons</a> by Mark James(クリエイティブコモンズ 2.5 表示)</dd>
<dd><a href="http://mayosoft.deviantart.com/art/AeroVista-for-Mac-28788188">AeroVista for Mac</a> by Mayosoft(クリエイティブコモンズ 3.0 表示・非営利・改変禁止)</dd>
<dd><a href="http://www.iconarchive.com/category/folder/aqua-blend-icons-by-laurent-baumann.html">Aqua Blend Icons</a> by Laurent Baumann(クリエイティブコモンズ 3.0 表示・非営利・継承)</dd>
<dd><a href="http://susumu.seph.ws/?page_id=11">McDo DESIGN &#8211; Icons</a> by Susumu Yoshida(クリエイティブコモンズ 2.5 日本 表示・改変禁止)</dd>
<dt>Flashプレイヤー</dt>
<dd><a href="http://www.jeroenwijering.com/?item=JW_FLV_Player">JW FLV Media Player</a> by Jeroen Wijering(クリエイティブコモンズ 3.0 表示・非営利・継承)</dd>
<dt>WordPressテーマ</dt>
<dd><a href="http://www.plaintxt.org/themes/sandbox/">Sandbox</a> by Scott Allan Wallick(GNU GPL)</dd>
</dl>
<p>ライセンスとかあまり関係ないけどこちらの方々にも感謝。</p>
<ul class="links">
<li>株式会社はてな<span class="weaken">(はてなブックマークAPIの提供元)</span></li>
<li>WordPress開発者の皆さん</li>
</ul>
<h3 id="t5edd4e">更新履歴</h3>
<div class="update">
<dl>
<dt>最終更新日</dt>
<dd>2011年9月13日 08時05分 </dd>
<dt>2008-10-28</dt>
<dd>検索結果の処理を修正</dd>
<dd>ボックスシャドウの生成順序を変更して、体感速度を向上させた</dd>
<dt>2008-10-26</dt>
<dd>一部ページで編集リンクが正常に機能していなかった問題を解消しました</dd>
<dd>脚注の表示方法を変更しました</dd>
<dt>2008-10-19</dt>
<dd>記事一覧ページの表示方法を変更しました</dd>
<dd>WordPress標準の回り込みの記述をサポートしました</dd>
<dd>ソーシャルブックマークのキャッシュを扱いを変更して、読み込み失敗を減らしました</dd>
<dd>関連URLの表示を変更しました</dd>
<dd>その他いくつかの細かい問題を解消しました</dd>
<dt>2008-10-11</dt>
<dd><a href="http://note.openvista.jp/2008/online-pdf-reader/">オンラインPDFリーダ</a>のリリースにあわせて、PDFと思われるリンクをそちらに向けて書き換えるようにしました</dd>
</dl>
<input type="button" value="全ての更新履歴を表示する" onclick="hideShow('more_updates', this);" onkeypress="hideShow('more_updates', this);" />
<dl id="more_updates" style="display:none;">
<dt>2008-09-23</dt>
<dd>mp4動画も再生できるのにshowFLVメソッド名はどうかと思うので、showMovieメソッドに変更</dd>
<dd>自作動画がフルスクリーン表示できなかった問題を解消</dd>
<dt>2008-09-22</dt>
<dd>サイト外関連記事が少ないときの表示上の問題を解消</dd>
<dt>2008-09-21</dt>
<dd>ウェブメモでのはてなブックマークデータはキャッシュしないようにした</dd>
<dt>2008-09-20</dt>
<dd>付随サービスのURL変更に伴う更新</dd>
<dd>検索結果や時期別・カテゴリ別・タグ別など場面に合わせたフィードを追加しました</dd>
<dt>2008-09-19</dt>
<dd>iPhone向けにYoutube動画を提供する際、YoutubeアプリではなくSafari内蔵動画プレイヤーで見てもらうことにした<span class="weaken">(Youtubeアプリは縦画面での閲覧が出来ないなど使い勝手に問題があるため)</span></dd>
<dd>著者別記事一覧が正常に表示されない問題を解消</dd>
<dd>地図が表示されない問題を解消</dd>
<dd>重複コードを削除</dd>
<dt>2008-09-18</dt>
<dd>IE6/7以外のブラウザ向けのスタイルを更新</dd>
<dd>ウェブメモにおける表示の問題を解消</dd>
<dd>トップページに表示した記事の続きを非同期で読み込めるようにした</dd>
<dd>必須プラグインのインストールやキャッシュフォルダのパーミッションなど動作要件のチェックを厳しく行うようにした</dd>
<dt>2008-09-17</dt>
<dd>関連記事表示の位置を変更した</dd>
<dd>記事一覧ページの表示内容を変更した</dd>
<dd>はてなブックマークのデータをキャッシュし、はてなのサーバにあんまり話しかけすぎないようにした</dd>
<dd>依存しているプラグインを1つ減らした<span class="weaken">(正確には3つ減らして2つ増やした)</span></dd>
<dd>PEARパッケージを使わないようにした</dd>
<dd>その他細々とした修正</dd>
<dt>2008-09-16</dt>
<dd>記事中でカテゴリおよびタグを両方表示できるようにした</dd>
<dd>カテゴリおよびタグ一覧がうまく表示されなかった問題を修正</dd>
<dd>記事の一覧表示時、うまく表示されなかった問題を修正</dd>
<dt>2008-09-15</dt>
<dd>PEARファイルに依存せず、自前のファイルで処理を行うように修正</dd>
<dt>2008-09-14</dt>
<dd>初回リリース</dd>
</dl>
</div>
<p><amazon>4839929548</amazon></p>
<img src="http://note.openvista.jp/?ak_action=api_record_view&id=626&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://note.openvista.jp/2008/wordpress-theme-cielo/feed/</wfw:commentRss>
		<slash:comments>21</slash:comments>
		</item>
		<item>
		<title>Googleストリートビューで道案内</title>
		<link>http://note.openvista.jp/2008/directions-by-google-street-view/</link>
		<comments>http://note.openvista.jp/2008/directions-by-google-street-view/#comments</comments>
		<pubDate>Fri, 15 Aug 2008 17:29:08 +0000</pubDate>
		<dc:creator>hash</dc:creator>
				<category><![CDATA[ツールの制作]]></category>
		<category><![CDATA[プログラミング技術絡み]]></category>

		<guid isPermaLink="false">http://note.openvista.jp/?p=598</guid>
		<description><![CDATA[Googleストリートビューで決められた経路を自動で案内するプログラムを書いてみました]]></description>
			<content:encoded><![CDATA[<p><a href="http://note.openvista.jp/2008/streetview-maps-for-real-estate-rental-website/">前</a>に続いて、今回はGoogleストリートビューを道案内に使ってみようと思います。あらかじめ指定した経路をボタン操作で行ったり来たりします、自動案内（3秒ごとに移動）も可能です。<a href="http://video.alpslab.jp/">ALPSLAB video</a>に少し似ているかも。</p>
<p>あまりJavascriptに理解していないところもあるので、ちょっとレガシーなブラウザだと動作速度が気になるくらいの出来です。画像を読み込まないうちにずんずん先に行っちゃうと、ブラウザがたまに固まっちゃいます…。</p>
<p>ではとりあえず、例として京都の烏丸御池駅から（株）はてな京都本社までの道案内を。徒歩2-3分くらいでしょうか。</p>
<p class="maps-wide"><object data="http://note.openvista.jp/wp-content/themes/cielo/module/map.php?type=navigation&amp;fName=map/hatena.json" type="text/html" width="100%" height="350"><a href="http://note.openvista.jp/wp-content/themes/cielo/module/map.php?type=navigation&amp;fName=map/hatena.json">拡大地図を表示</a></object></p>
<p>こちらは東京。西新宿駅から（株）ミツエーリンクスまで。徒歩8分くらいですが、かなり長く感じます。移動速度がそれほど速くないので、徒歩6分くらいまでが使っていて耐えられるくらいの時間でしょうか。</p>
<p class="maps-wide"><object data="http://note.openvista.jp/wp-content/themes/cielo/module/map.php?type=navigation&amp;fName=map/mitsue.json" type="text/html" width="100%" height="350"><a href="http://note.openvista.jp/wp-content/themes/cielo/module/map.php?type=navigation&amp;fName=map/mitsue.json">拡大地図を表示</a></object></p>
<h3 id="t709fcf">技術的な話</h3>
<p>前回とほぼ同じ感じで全画面ストリートビューをobject要素<sup><a href="http://note.openvista.jp/2008/directions-by-google-street-view/#footnote_0_598" id="identifier_0_598" class="footnote-link footnote-identifier-link" title="iframe要素にしないのはXHTML1.1に適合させるため">1</a></sup> で読み込んでいます。</p>
<p>経路データはJSONで記述していて、fNameというクエリで指定します<span class="weaken">（はてなの例だと<a href="http://note.openvista.jp/wp-content/themes/cielo/module/map.php?type=navigation&amp;fName=map/hatena.json">http://note.openvista.jp/..（中略）..&amp;fName=map/hatena.json</a>）</span>。</p>
<p>JSON経路データは大きくstart, goal, pointsと3つのキー群があって、それぞれ始点の緯度経度、終点の緯度経度、そして行動になります。行動には5つのパラメータがあり、それぞれ行動の種類（type）・進行方向（dir）・左右向き（yaw）・上下向き（pit）、コメント（com）が指定できます。行動の種類は視点の変更のみ（pan）と移動（walk）が指定できます。</p>
<p>移動の場合、進行方向が必須オプションになっており、0～360度<sup><a href="http://note.openvista.jp/2008/directions-by-google-street-view/#footnote_1_598" id="identifier_1_598" class="footnote-link footnote-identifier-link" title="北:0, 東:90, 南:180, 西:270">2</a></sup> で指定します。視点変更の場合は、左右・上下の向きが必須で左右向きは0～360度で、上下向きは-90～90度<sup><a href="http://note.openvista.jp/2008/directions-by-google-street-view/#footnote_2_598" id="identifier_2_598" class="footnote-link footnote-identifier-link" title="真上が-90, 水平が0, 地上が90">3</a></sup> で指定が必須になります。</p>
<p>debugクエリをつけると、緯度・経度、向きが出るようになっているので、始点位置を探す場合などはこれを利用すると探しやすいです。</p>
<p>やっていて困った点はinitializedイベントで呼び出すGmap#panToイベントがかなり重いのか、画像が読み込まないうちに次々と移動された場合、panToイベントがブラウザを固まらせてしまうところです。結局毎回の移動時に呼ぶのではなく、5回に1回呼ぶようにしています。</p>
<p>あー、しかし、つくづくiPhoneがFlashに対応していないのが悔やまれます。</p>
<dl class="download">
<dt>ダウンロード</dt>
<dd><a href="http://note.openvista.jp/download/2008/08/map.zip">ストリートビュー道案内作成スクリプト</a></dd>
<dt>ライセンス</dt>
<dd><a rel="license" href="http://ja.wikipedia.org/wiki/GNU_General_Public_License">GNU General Public License</a></dd>
</dl>
<p>以下、参考にしたリンク先です。</p>
<ul class="links">
<li>Google
<ul>
<li><a href="http://code.google.com/apis/maps/documentation/services.html#Streetview">Services &#8211; Google Maps API &#8211; Google Code</a></li>
<li><a href="http://code.google.com/intl/en/apis/maps/documentation/reference.html#GStreetviewLocation">Google Maps API Reference &#8211; Google Maps API &#8211; Google Code</a></li>
</ul>
</li>
<li><a href="http://d.hatena.ne.jp/Kappuccino/20080807/1218110189">ストリートビューのAPI（京都散策のサンプル） &#8211; プログラマはサイコロを振らない</a></li>
<li><a href="http://d.hatena.ne.jp/tek_koc/20080808/1218181787">Google Map APIを使ったことがない人でもわかるストリートビューの使い方 &#8211; 遥か彼方の彼方から</a></li>
<li>AjaxTower
<ul>
<li><a href="http://www.ajaxtower.jp/googlemaps/gstreetviewpanorama/index.html">ストリートビュー(GStreetviewPanorama) &#8211; Google Maps入門</a></li>
<li><a href="http://www.ajaxtower.jp/googlemaps/gdownloadurl/index4.html">JSON形式のファイルの取得 &#8211; 外部ファイルの読み込み &#8211; Google Maps入門</a></li>
</ul>
</li>
<li>parpue.net
<ul>
<li><a href="http://parpue.net/?p=249">parpue.net &#8211; ストリートビューと地図の連携</a></li>
<li><a href="http://parpue.net/?p=196">parpue.net &#8211; Googleストリートビューで勝手に下北沢周辺を散歩するやつ作ってみた</a></li>
</ul>
</li>
</ul>
<p><ins datetime="2008-08-16T13:00:07+09:00" class="block"><br />
Internet Explorer で表示されなかった問題を解消しました<br />
</ins></p>
<ol class="footnotes"><li id="footnote_0_598" class="footnote">iframe要素にしないのはXHTML1.1に適合させるため</li><li id="footnote_1_598" class="footnote">北:0, 東:90, 南:180, 西:270</li><li id="footnote_2_598" class="footnote">真上が-90, 水平が0, 地上が90</li></ol><img src="http://note.openvista.jp/?ak_action=api_record_view&id=598&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://note.openvista.jp/2008/directions-by-google-street-view/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>不動産情報サイトにGoogleマップストリートビューの近隣地図を追加するGreaseMonkeyスクリプト</title>
		<link>http://note.openvista.jp/2008/streetview-maps-for-real-estate-rental-website/</link>
		<comments>http://note.openvista.jp/2008/streetview-maps-for-real-estate-rental-website/#comments</comments>
		<pubDate>Mon, 11 Aug 2008 19:18:33 +0000</pubDate>
		<dc:creator>hash</dc:creator>
				<category><![CDATA[ウェブサービス論]]></category>
		<category><![CDATA[ツールの制作]]></category>

		<guid isPermaLink="false">http://note.openvista.jp/?p=569</guid>
		<description><![CDATA[不動産賃貸情報サイトの物件ページにGoogle マップ ストリートビューで取得できる風景を勝手に追加するGreaseMonkeyスクリプトを書きました]]></description>
			<content:encoded><![CDATA[<p>巷では<a href="http://maps.google.co.jp/">Google Maps StreetView</a>についていろいろ議論されているようです。試しに<a href="http://b.hatena.ne.jp/keyword/%e3%82%b9%e3%83%88%e3%83%aa%e3%83%bc%e3%83%88%e3%83%93%e3%83%a5%e3%83%bc">はてなブックマークの「ストリートビュー」タグがついた記事</a>を見てもそうしたものばかりで、テクニカルな記事はあまり見あたりません。</p>
<p>その議論自体を否定するわけではなくて、もちろんそうした問いに答えを出した上でテクニカルにというのが望ましいかと思いますけど、議論し続けるのもどうなのかなと。技術の悪用シーンをクローズアップしてその技術の潜在価値を殺すのはなく、それを<em>どう社会的に有用なことに活かしていくか</em>を考えて試していきたいと思っています。</p>
<p>ということで<span class="weaken">（ストリートビューを使う上で必要な）</span>Javascriptにはからきしダメな私ですが、ちょっと頑張って試しに何か作ってみようかと思います。その第1弾は不動産賃貸情報サイト<span class="weaken">（以下、不動産サイト）</span>にユーザスクリプトで路上の地図を追加してみるというものです。つまり、FirefoxのGreaseMonkey向けのスクリプトです。</p>
<p>既にできあがったものがこちらにございます。</p>
<p><a href="http://note.openvista.jp/download/2008/08/streetview.png" rel="lightbox"><img src="http://note.openvista.jp/download/2008/08/streetview-300x257.png" alt="ある物件詳細ページでストリートビューを載せてみた例" title="ある物件詳細ページでストリートビューを載せてみた例" /></a></p>
<dl class="video flv" id="video-googlesv4homes_demo" style="width: 480px;">
<dt style="width:368px;"><a href="#video-googlesv4homes_demo">デモ動画</a></dt>
<dd style="height:320px;"><object data="http://note.openvista.jp/wp-content/themes/cielo/module/flvplayer.swf?file=http://note.openvista.jp/download/movie/googlesv4homes_demo.mp4" type="application/x-shockwave-flash" width="480" height="320"><param name="movie" value="http://note.openvista.jp/wp-content/themes/cielo/module/flvplayer.swf?file=http://note.openvista.jp/download/movie/googlesv4homes_demo.mp4" /><param name="allowfullscreen" value="true" /></object></dd>
</dl>
<dl class="download">
<dt>ダウンロード</dt>
<dd><a href="http://note.openvista.jp/download/2008/08/google_streetview_for_homes.user.js">ストリートビュー追加 GreaseMonkey スクリプト</a></dd>
<dt>ライセンス</dt>
<dd><a href="http://ja.wikipedia.org/wiki/GNU_General_Public_License" rel="license">GNU General Public License</a></dd>
</dl>
<p>不動産サイト全部に対応することは無理なので、今回は<a href="http://realestate.homes.co.jp/">HOME&#8217;S賃貸</a>というサイトを対象にしています。個別に対応しようとすれば（所在地情報を取得できれば）どのサイトでも可能でしょうけど、今回はこのサイトということで。</p>
<p>で、実際に便利かというと現時点ではたまに使い物になるというレベルですかね。というのは、どの不動産サイトも「～丁目」レベルまででしか所在地情報を提供していない<span class="weaken">（なぜなんでしょう？）</span>ゆえに、正確な風景を<em>ピンポイントで提供出来ない</em>ため、しばらく物件がどこにあるか探し回る必要があるからです<span class="weaken">（2Dマップをわざわざつけたのはそのためです）</span>。まぁ、家の概観を確認するよりも周りの環境を確認する用途に向いているかもしれませんといっておきましょうか。</p>
<p>例えば、物件の周りの雰囲気を確かめたり、駅までの経路を辿ってみたり、自転車で走りやすいか道路を眺めたり、近くのスーパーの大きさを調べてみたり<span class="weaken">（せせこましい）</span>とそんなところでしょうか。得られる情報は視覚の一部を使っただけのものなので、実際にはちゃんと足を運ぶ必要がありますけどね。</p>
<p>技術的な話をメモっておくと、まずクエリで指定した場所のストリートビューを全画面で表示するページを作りました。次に<abbr title="GreaseMonkey">GM</abbr>側で、サイトから抽出した所在地情報をクエリとしてくっつけた先のページのURLにくっつけます。そしてそのURLをiframe要素に指定して追加するという寸法です。</p>
<p>制作にあたっては<a href="http://yamanoue.sakura.ne.jp/blog/coding/68">私製版、GreasemonkeyでXPathを楽に使う関数 @蕪浅録奏</a>を使わせていただきました、ありがとう。その他、参考にさせていただいたサイトを列挙しておきます、どうも。</p>
<ul class="links">
<li><a href="http://code.google.com/apis/maps/documentation/services.html#Streetview">Services &#8211; Google Maps API &#8211; Google Code</a></li>
<li><a href="http://d.hatena.ne.jp/toku-hiro/20080807">Google Maps API でストリートビューを表示する方法 &#8211; 真夜中のプログラミングTips</a></li>
<li><a href="http://groups.google.co.jp/group/Google-Maps-API/browse_thread/thread/67726c9906da7fbb/26de606969fcf7a4?show_docid=26de606969fcf7a4">Calculating Street View POV for a given address &#8211; Google Maps API | Google グループ</a>（<a href="http://econym2.googlepages.com/temp_geocodeview.htm">Google Maps Sample</a>）</li>
<li><a href="http://www.openspc2.org/reibun/Google/Maps/API/">逆引きGoogle Maps APIリファレンス</a></li>
<li><a href="http://www008.upp.so-net.ne.jp/getback/">Googleマップ　チュートリアル　「Google Maps API活用方法」</a>（API v.1がベースなのでちょっと古い情報も）</li>
<li>おまけ：<a href="http://q.hatena.ne.jp/1218384961#a848100">米国でGoogle Maps StreetViewがどのように応用されて使われているか具体的なURLと内容を挙げて教えてください。 &#8211; 人力検索はてな</a></li>
</ul>
<img src="http://note.openvista.jp/?ak_action=api_record_view&id=569&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://note.openvista.jp/2008/streetview-maps-for-real-estate-rental-website/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>そろそろウェブサイト側からもAutoPagerizeを導入していったらどうか</title>
		<link>http://note.openvista.jp/2008/autopagerize-without-greasemonkey/</link>
		<comments>http://note.openvista.jp/2008/autopagerize-without-greasemonkey/#comments</comments>
		<pubDate>Thu, 31 Jul 2008 21:43:22 +0000</pubDate>
		<dc:creator>hash</dc:creator>
				<category><![CDATA[ウェブはこうあってほしい論]]></category>
		<category><![CDATA[ツールの制作]]></category>

		<guid isPermaLink="false">http://note.openvista.jp/?p=518</guid>
		<description><![CDATA[ページ分けされている時にページの下部まで来たときに次のページを自動で読み込んで加えるスクリプトを特別な用意無しでも使えるようにして、導入してみました]]></description>
			<content:encoded><![CDATA[<p class="right-box"><a rel="lightbox" href="http://note.openvista.jp/download/2008/08/pagination.png"><img src="http://note.openvista.jp/download/2008/08/pagination-200x111.png" alt="次のページを自動で読み込んでみた例" width="200" height="111" /></a></p>
<p>このサイトを見ている人なら聞き飽きたことかもしれませんが、<a href="http://www.forest.impress.co.jp/article/2008/01/16/autopagerize.html" title="窓の杜 - 【NEWS】複数ページにわたるWebページをスクロールだけで次々と表示「AutoPagerize」">Firefox用GreaseMonkeyスクリプトのAutoPagerize</a><sup><a href="http://note.openvista.jp/2008/autopagerize-without-greasemonkey/#footnote_0_518" id="identifier_0_518" class="footnote-link footnote-identifier-link" title="ページの下まで来ると、次のページの内容を自動で読み込んで加えてくれるスクリプトです">1</a></sup> は超便利です。</p>
<p>もともとページ分けというのは、</p>
<ul>
<li>ページをコンパクトにして、ブラウザ側の動作速度を優先するため</li>
<li>ページをコンパクトにして、人間が読みやすい分量に収めるため</li>
<li>ページ全体を一覧し、好みの位置に移動しやすくするため</li>
</ul>
<p>などの意義があるために、UIとして多く使われているのだと思います。コンテンツをちょっとずつ足していくというAutoPagerizeのアプローチはこの利点を損なわず、かつページ切り替え時のストレスを減らしてくれる点で便利だなと。</p>
<p>ただ、最近はGreaseMonkeyスクリプトが動作する環境も増えてきたとはいえ、事前にインストールする必要があるのは変わらないわけです。こういう有用なテクノロジーを閉じこめておくのはもったいないですから、今回はAutoPagerizeをインストールしていない人にも使えるように工夫してみました<span class="weaken">（制作者のmalaさんに感謝）</span></p>
<p>とはいえ、<a href="http://userscripts.org/scripts/show/8551" title="AutoPagerize – Userscripts.org">AutoPagerize</a>はかなりのサイズになっていますし、GreaseMonkey専用の命令も含まれていますので、ウェブサイトで使うのには適していません。ということで、今回はこのネタ元的存在の<a href="http://la.ma.la/blog/diary_200506231749.htm" title="最速インターフェース研究会 :: GoogleAutoPagerというのを作りました">GoogleAutoPager</a>を利用してみることにしました。</p>
<p>いかんせん、Javascriptに疎いですので苦労もしましたが、なんとかこのサイトの検索結果画面・タグアーカイブ画面で使えるようにしました。<a href="http://note.openvista.jp/page/1/?s=%E6%83%85%E5%A0%B1" title="「情報」のサイト内検索結果">「情報」のサイト内検索結果ページ</a>で、動作を確認してみてください。</p>
<p>私の知っている限りでは、AutoPagerize的な動作をしてくれるのは<a href="http://www.live.com/?scope=images" title="Live Search">Microsoft Live 画像検索</a>と<a href="http://kanpeki.inucara.net/" title="完璧画像検索">完璧画像検索</a>くらいしか知らないのですが、そろそろこういったインターフェイスをウェブでも標準的に使っていった方がいいのではないかなと。</p>
<p>あと、動作の細かな話ですが、オリジナルのAutoPagerizeとかぶってしまう<span class="weaken">（二重に読み込まれてしまう）</span>ため、あえてa要素のrel属性（rel=&#8221;next&#8221;）を外して対処しています。もっとも、こんなアホでセマンティックレスな解決策では満足できていないので、何か良い方法があったら教えてください。</p>
<dl class="download">
<dt>ダウンロード</dt>
<dd><a href="http://note.openvista.jp/wp-content/themes/cielo/js/cielo/cielo.js" title="http://note.openvista.jp/wp-content/themes/cielo/js/cielo/cielo.js">cielo.js</a><span class="weaken">（最初の無名関数が今回のスクリプトの部分です）</span></dd>
<dt>ライセンス</dt>
<dd><a rel="license" href="http://ja.wikipedia.org/wiki/GNU_General_Public_License" title="GNU General Public License - Wikipedia">GNU General Public License</a></dd>
</dl>
<h3 id="tbf4b9a">作る上で参考にしたページ</h3>
<ul class="links">
<li><a href="http://la.ma.la/blog/diary_200506231749.htm" title="最速インターフェース研究会 :: GoogleAutoPagerというのを作りました">最速インターフェース研究会 :: GoogleAutoPagerというのを作りました</a></li>
<li><a href="http://d.hatena.ne.jp/onozaty/20060802/p1" title="ブラウザの表示領域のサイズを取得する方法。 - Enjoy*Study">ブラウザの表示領域のサイズを取得する方法。 &#8211; Enjoy*Study</a></li>
<li><a href="http://archiva.jp/web/javascript/get_page-size.html" title="ページサイズやスクロール位置を取得する - Archiva">ページサイズやスクロール位置を取得する &#8211; Archiva</a></li>
</ul>
<h3 id="tfbae89">反応に対する返信</h3>
<p><ins datetime="2008-08-02T00:34:15+09:00" class="block"><br />
<blockquote cite="http://b.hatena.ne.jp/typewhite/20080801#bookmark-9505637" title="id:typewhiteさんのブックマーク">
<p>スクロールが完全に下に行く前に読み込んでおいてもうちょっとスムーズに次ページへ進めると嬉しいなと思いました</p>
<p class="citation"><a href="http://b.hatena.ne.jp/typewhite/20080801#bookmark-9505637"><cite>id:typewhiteさんのブックマーク</cite></a></p>
</blockquote>
<p>御意。少し反応する位置を上方に修正してみました。</p>
<p></ins><br />
<ins datetime="2008-08-02T03:46:48+09:00" class="block"></p>
<blockquote cite="http://nanto.asablo.jp/blog/2008/08/02/3668606" title="ユーザースクリプトと製作者スクリプト: Days on the Moon">
<p>ユーザースクリプトはブラウザの機能を補うものであり、ブラウザがもともと持っている機能と同一視できます。ある機能を (一般の Web ページを対象とした) ユーザースクリプトで実現するということは、それをブラウザの機能として、すなわち統一された操作感の下で提供するということです。同じ機能は同じ操作で実現できることを第一とするなら、ユーザースクリプトと製作者スクリプトとではユーザースクリプトのほうを優先させるべきです。</p>
<p class="weaken">（略）</p>
<p>ある機能に関するスクリプトにも <abbr title="Cascading Style Sheets">CSS</abbr> のように、重要指定付きユーザースクリプト、製作者スクリプト、通常のユーザースクリプトと排他的な優先順位を設定する仕組みが整っていればいいんですけどね。</p>
<p class="citation"><a href="http://nanto.asablo.jp/blog/2008/08/02/3668606" title="ユーザースクリプトと製作者スクリプト: Days on the Moon"><cite>ユーザースクリプトと製作者スクリプト: Days on the Moon</cite></a></p>
</blockquote>
<p>機能衝突が起こる場合にユーザスクリプトの動作を優先するという前提は私も同じです。というのはまず、現在主流になっているブラウザのほぼ全てに、フォント・色彩設定やユーザスタイルシートなどのコントロール機能が実装されている以上、ウェブではユーザ側にコントロール権を持たせるという考えがあると思います。そして当然、この考えをスクリプトの動作にも適用できるからです。</p>
<p>それで、nanto_viさんに提示していただいた解決策は技術に疎い私からするとなかなかスマートに思えるのですが、</p>
<ul>
<li>AutoPagerize的な機能を持つユーザスクリプトが、単独のアドオンとして提供されているものを除いても複数存在すること<span class="weaken">（<a href="http://userscripts.org/scripts/show/7623" title="Pagerization – Userscripts.org">Pagerization</a>, <a href="http://userscripts.org/scripts/show/28473" title="AutoPageLoader – Userscripts.org">AutoPageLoader</a>, <a href="http://userscripts.org/scripts/show/14666" title="jAutoPagerize – Userscripts.org">jAutoPagerize</a>など）</span></li>
<li>ユーザスクリプト製作者とサイトスクリプト製作者の両者に対応が求められること</li>
</ul>
<p>の双方を考慮すると、現実的には回避しきれずに衝突してしまうケースを危惧してしまいます<sup><a href="http://note.openvista.jp/2008/autopagerize-without-greasemonkey/#footnote_1_518" id="identifier_1_518" class="footnote-link footnote-identifier-link" title="nanto_viさんは双方がどうあったらよいかという話をしているので、こういう答え方はかみあってないかもしれませんが">2</a></sup> 。</p>
<p>ということもあって、やはり個別的にではなく、仰るようにCSSの優先順位付けのようにGM側から構造的に解決できるとよいんですけどね…。</ins><br />
<ins datetime="2008-08-11T01:47:53+09:00" class="block"><br />
上記、「教えて」と言っておきながら、後出し的に「～はできないですよね」と応答するのはすごく失礼な気がしてきた。nanto_viさん、お気を悪くされたらごめんなさい。<br />
</ins><br />
<ins datetime="2008-08-02T15:24:51+09:00" class="block"></p>
<blockquote cite="http://b.hatena.ne.jp/faultier/20080802#bookmark-9505637" title="id:faultierさんのブックマーク">
<p>最初から勝手に読み込むんだったらそもそもページングしなくていいのではただの分割読み込みでは。俺はあれ「ユーザスクリプトであることに意味がある」と思うけど。</p>
<p class="citation"><a href="http://b.hatena.ne.jp/faultier/20080802#bookmark-9505637"><cite>id:faultierさんのブックマーク</cite></a></p>
</blockquote>
<p>ページングして分割読み込みする意味は上記に記しました。その「ユーザスクリプトであることに意味がある」理由を教えてもらえれば、どこで食い違ってるのかわかると思うんですが。</ins></p>
<ol class="footnotes"><li id="footnote_0_518" class="footnote">ページの下まで来ると、次のページの内容を自動で読み込んで加えてくれるスクリプトです</li><li id="footnote_1_518" class="footnote">nanto_viさんは双方がどうあったらよいかという話をしているので、こういう答え方はかみあってないかもしれませんが</li></ol><img src="http://note.openvista.jp/?ak_action=api_record_view&id=518&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://note.openvista.jp/2008/autopagerize-without-greasemonkey/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>「あとで読む」アドオンを翻訳してみた</title>
		<link>http://note.openvista.jp/2008/read-it-later-localized/</link>
		<comments>http://note.openvista.jp/2008/read-it-later-localized/#comments</comments>
		<pubDate>Fri, 20 Jun 2008 19:29:04 +0000</pubDate>
		<dc:creator>hash</dc:creator>
				<category><![CDATA[ウェブブラウザ]]></category>
		<category><![CDATA[ツールの制作]]></category>
		<category><![CDATA[モバイル]]></category>

		<guid isPermaLink="false">http://note.openvista.jp/?p=488</guid>
		<description><![CDATA[完成度の高い「あとで読む」アドオン、Read It Laterを日本の環境にあわせて翻訳・改変してみました]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.ideashower.com/ideas/launched/read-it-later/" title="the Idea Shower » » Read it Later - Firefox Extension BETA">Read It Later</a>という「あとで読みたい」ページを保存して管理できるFirefox用のアドオンが公開されてました。公式サイトに書いてあった機能をざっと訳すとこんな感じ。</p>
<dl>
<dt>ページの保存</dt>
<dd>時間ができた時読めるように、「読むリスト」にページを保存することが出来ます</dd>
<dt>オフラインモード</dt>
<dd>ページを保存しておいて機内や電車などどこでも読めるようにできます</dd>
<dt>RSSフィードの出力</dt>
<dd>あとで読むページを自動的にRSSフィードにして、どこにいてもリストが読めるようになります</dd>
<dt>コンピュータ間で同期</dt>
<dd>仕事用PC、家庭用PCなど何台のコンピュータとも読むリストを同期することが出来ます</dd>
<dt>ソーシャルブックマークに投稿</dt>
<dd>読んだ後はお好きなブックマークサービスにページをブックマークしておきましょう</dd>
<dt>クリック保存モード</dt>
<dd>面白そうなリンクをクリックするだけで、あっという間に読むリストの出来上がり</dd>
</dl>
<p>実際、使ってみた感想は<a href="http://netafull.net/firefox-addon/026330.html" title="[N] 高機能な“あとで読む”Firefoxアドオン「Read It Later」">ネタフルさん</a>にて取り上げ済みなので、ここでは割愛しますがなかなか良い感じです。とりあえずざっと見したいという人に向けてYoutubeでデモ動画も公開されています。</p>
<dl class="video" id="video-mLNfsLpM8zo">
<dt style="width:348px;"><a href="http://www.youtube.com/watch?v=mLNfsLpM8zo&amp;fmt=18">Read It Later Firefox Extension</a></dt>
<dd style="height:378px;"><object data="http://www.youtube.com/v/mLNfsLpM8zo&amp;hl&amp;ap=%2526fmt%3D18" type="application/x-shockwave-flash" width="460" height="378"><param name="movie" value="http://www.youtube.com/v/mLNfsLpM8zo&amp;hl&amp;ap=%2526fmt%3D18" /><param name="allowfullscreen" value="true" /></object></dd>
</dl>
<p>今回はこのアドオンを勝手ながら日本語化させていただきました<sup><a href="http://note.openvista.jp/2008/read-it-later-localized/#footnote_0_488" id="identifier_0_488" class="footnote-link footnote-identifier-link" title="ライセンスが明記されていないので、少しやましい感じがしますが">1</a></sup> 。単に日本語化するだけではなく、以下のソーシャルブックマークサービス・ミニブログサービスに投稿できるようにしてみました。文字化けも解消しています。</p>
<ul class="links">
<li><a href="http://b.hatena.ne.jp/" title="はてなブックマーク - ソーシャルブックマーク">はてなブックマーク</a></li>
<li><a href="http://clip.livedoor.com/" title="livedoor クリップ - ソーシャルブックマーク">livedoor クリップ</a></li>
<li><a href="http://bookmarks.yahoo.co.jp/all" title="人気ブックマーク - Yahoo!ブックマーク">Yahoo!ブックマーク</a></li>
<li><a href="http://clip.nifty.com/" title="@nifty クリップ">@nifty クリップ</a></li>
<li><a href="http://www.tumblr.com/" title="Tumblr">Tumblr</a></li>
</ul>
<p>ダウンロード・インストールは以下から。ちなみに、今バージョンはFirefox3以上でしか使用することが出来ません。</p>
<dl class="download">
<dt>ダウンロード</dt>
<dd><a href="http://note.openvista.jp/download/2008/06/isreaditlater.xpi">Read It Later（あとで読む）日本版</a></dd>
<dt>ライセンス</dt>
<dd>著作権は制作者のNate Weiner氏に全て帰属します</dd>
</dl>
<div class="update">
<h3 id="t3a77db">更新履歴</h3>
<dl>
<dt>2008/08/03</dt>
<dd>バージョン0.9811の日本語版をリリース</dd>
<dt>2008/06/21</dt>
<dd>初版リリース</dd>
</dl>
</div>
<h3 id="t2ae8f0">スクリーンショット</h3>
<p><img src="http://note.openvista.jp/download/2008/06/read-it-later-config1.png" alt="「あとで読む」ページの既読化" title="「あとで読む」ページの既読化" width="272" height="232" /></p>
<p><img src="http://note.openvista.jp/download/2008/06/read-it-later-config2.png" alt="「あとで読む」読むリスト" title="「あとで読む」読むリスト" width="353" height="349" /></p>
<p><a href="http://note.openvista.jp/download/2008/06/read-it-later-config3.png" rel="lightbox"><img src="http://note.openvista.jp/download/2008/06/read-it-later-config3-300x299.png" alt="「あとで読む」設定画面" title="「あとで読む」設定画面" width="300" height="299" /></a></p>
<p><ins datetime="2008-06-23T01:20:51+09:00" class="block"><br />
「あとで読む」フォルダはブックマークツールバーのフォルダを指定できないですが、代替方法として「読むリスト」のRSSフィードをスマートブックマークとしてブックマークツールバーに置く方法があります。</p>
<p>しかし、RSSの日本語部分が変な感じにエンコードされちゃって、イマイチ使えないです。そこで、きちんと日本語へ変換するゲートウェイを用意しましたので、ご自由にどうぞ。RSSフィードのURLを以下の<code>?url=</code>の後に入れてご使用ください。</p>
<dl>
<dt>RSSフィードのアドレスの例</dt>
<dd>https://readitlaterlist.com/users/123abc/feed/unread</dd>
<dt>変換後のRSSフィードのアドレスの例</dt>
<dd><em>http://tech.openvista.jp/tmp/rss_unescape/?url=</em>https://readitlaterlist.com/users/123abc/feed/unread</dd>
</dl>
<p>日本語タイトルはどうやら変換の途中で短くちょん切られるらしく全部入らないようです…。<br />
</ins></p>
<ol class="footnotes"><li id="footnote_0_488" class="footnote">ライセンスが明記されていないので、少しやましい感じがしますが</li></ol><img src="http://note.openvista.jp/?ak_action=api_record_view&id=488&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://note.openvista.jp/2008/read-it-later-localized/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Google検索を少し見やすくするユーザースタイルシート</title>
		<link>http://note.openvista.jp/2008/customizing-google-with-user-css/</link>
		<comments>http://note.openvista.jp/2008/customizing-google-with-user-css/#comments</comments>
		<pubDate>Thu, 05 Jun 2008 17:28:30 +0000</pubDate>
		<dc:creator>hash</dc:creator>
				<category><![CDATA[ウェブブラウザ]]></category>
		<category><![CDATA[ウェブ標準技術絡み]]></category>
		<category><![CDATA[ツールの制作]]></category>
		<category><![CDATA[モバイル]]></category>

		<guid isPermaLink="false">http://note.openvista.jp/?p=469</guid>
		<description><![CDATA[Google検索結果をユーザスタイルシートを使って、もう少し見やすくしてみようという試み]]></description>
			<content:encoded><![CDATA[<p>小ネタですが、少し前から使っているGoogle検索向けユーザスタイルシートを公開してみます。どのような表示結果が万人にとって見やすいかはわかりませんが、個人的にはそこそこ見やすくなったと感じています。</p>
<dl>
<dt>適用前</dt>
<dd>
<p><a href="http://note.openvista.jp/download/2008/06/usercss_before.png" rel="lightbox"><img src="http://note.openvista.jp/download/2008/06/usercss_before-200x122.png" alt="ユーザCSS適用前" title="ユーザCSS適用前" width="200" height="122" /></a></p>
</dd>
<dt>適用後</dt>
<dd>
<p><a href="http://note.openvista.jp/download/2008/06/usercss_after.png" rel="lightbox"><img src="http://note.openvista.jp/download/2008/06/usercss_after-200x121.png" alt="ユーザCSS適用後" title="ユーザCSS適用後" width="200" height="121" /></a></p>
</dd>
</dl>
<p>変更点は以下の通り。</p>
<ul>
<li>横幅を40文字程度に設定</li>
<li>検索結果に番号を振った</li>
<li>検索フォームを右下に貼り付けるようにして、フォーカスがある場合以外は半透明状態にした</li>
<li>関連ページやメモを取るなどのリンクは削除</li>
<li>一部のサイトへアイコンを追加（Wikipedia, amazon.co.jp, .go.jp, .ac.jp）</li>
<li>ファイルタイプが特殊な物にアイコンを追加(PDF, Microsoft Word）</li>
<li>検索行動にあまり関係のない情報を削除</li>
</ul>
<p>なお、<a href="http://userscripts.org/scripts/show/8551" title="AutoPagerize – Userscripts.org">AutoPagerize</a>と併用すると、より快適になるかと思います。</p>
<h3 id="t1295e5">適用方法</h3>
<p>特定のサイトにCSSを適用するための<a href="http://www.akatsukinishisu.net/wiki.cgi?%40-moz-document" title="@-moz-document - 徒委記">@-moz-document</a>ルールを使っているので、現時点ではMozilla FirefoxやFlockなどのブラウザ以外では使用できません。</p>
<p>適用については<a href="http://www.mozilla-japan.org/support/firefox/edit#content" title="Firefox Help: 設定ファイルの編集">ユーザスタイルシートの作成方法</a>に沿って、以下の内容をuserContent.cssとしてプロファイルフォルダに保存してください。<a href="https://addons.mozilla.org/ja/firefox/addon/2108" title="Stylish :: Firefox Add-ons">Stylish</a>というFirefox用アドオンは、ユーザCSSを一元管理できるのでとても便利です。</p>
<div class="source-code"><div><img src="http://note.openvista.jp/wp-content/plugins/coolcode/code.png" width="16" height="16" alt="" /> <em>CSSソースコード</em></div><pre class="source-code"><code><span class="codes-var">@namespace</span><span class="codes-code"> </span><span class="codes-identifier">url</span><span class="codes-code">(</span><span class="codes-identifier">http</span><span class="codes-code">://</span><span class="codes-identifier">www.w3.org</span><span class="codes-code">/1999/</span><span class="codes-identifier">xhtml</span><span class="codes-code">);</span>
<span class="codes-code"> </span>
<span class="codes-code">@-</span><span class="codes-identifier">moz-document</span><span class="codes-code"> </span><span class="codes-identifier">url-prefix</span><span class="codes-code">(&quot;</span><span class="codes-identifier">http</span><span class="codes-code">://</span><span class="codes-identifier">www.google.co.jp</span><span class="codes-code">/</span><span class="codes-identifier">search</span><span class="codes-code">&quot;),</span>
<span class="codes-identifier">url-prefix</span><span class="codes-code">(&quot;</span><span class="codes-identifier">http</span><span class="codes-code">://</span><span class="codes-identifier">www.google.com</span><span class="codes-code">/</span><span class="codes-identifier">search</span><span class="codes-code">&quot;)</span><span class="codes-brackets">{</span>
<span class="codes-code"> </span>
<span class="codes-identifier">div#tads</span><span class="codes-code">, /</span><span class="codes-identifier">*</span><span class="codes-code"> </span><span class="codes-identifier">Ad</span><span class="codes-code"> </span><span class="codes-identifier">*</span><span class="codes-code">/</span>
<span class="codes-identifier">table#mbEnd</span><span class="codes-code">, /</span><span class="codes-identifier">*</span><span class="codes-code"> </span><span class="codes-identifier">Ad</span><span class="codes-code"> </span><span class="codes-identifier">*</span><span class="codes-code">/</span>
<span class="codes-identifier">table#sft</span><span class="codes-code"> </span><span class="codes-identifier">h1</span><span class="codes-code">,</span>
<span class="codes-identifier">table#sft</span><span class="codes-code"> </span><span class="codes-identifier">td.xsm</span><span class="codes-code">,</span>
<span class="codes-identifier">span.xsm</span><span class="codes-brackets">{</span>
<span class="codes-code">    </span><span class="codes-reserved">display:</span><span class="codes-string">none</span><span class="codes-code"> !important</span><span class="codes-code">;</span>
<span class="codes-brackets">}</span>
<span class="codes-code"> </span>
<span class="codes-identifier">body</span><span class="codes-code"> </span><span class="codes-brackets">{</span>
<span class="codes-code">    </span><span class="codes-reserved">margin:</span><span class="codes-code"> </span><span class="codes-number">0</span><span class="codes-string">px</span><span class="codes-code"> !important</span><span class="codes-code">;</span>
<span class="codes-code">    </span><span class="codes-reserved">padding:</span><span class="codes-code"> </span><span class="codes-number">7</span><span class="codes-string">px</span><span class="codes-code"> </span><span class="codes-number">20</span><span class="codes-string">px</span><span class="codes-code"> </span><span class="codes-number">0</span><span class="codes-string">px</span><span class="codes-code"> </span><span class="codes-number">20</span><span class="codes-string">px</span><span class="codes-code"> !important</span><span class="codes-code">;</span>
<span class="codes-brackets">}</span>
<span class="codes-code"> </span>
<span class="codes-code">/</span><span class="codes-identifier">*</span><span class="codes-code"> グローバルナビゲーションの枠線 </span><span class="codes-identifier">*</span><span class="codes-code">/</span>
<span class="codes-code"> </span>
<span class="codes-identifier">body</span><span class="codes-code"> &gt; </span><span class="codes-identifier">div</span><span class="codes-code"> &gt; </span><span class="codes-identifier">div#gbar</span><span class="codes-brackets">{</span>
<span class="codes-code">    </span><span class="codes-reserved">padding-bottom:</span><span class="codes-code"> </span><span class="codes-number">15</span><span class="codes-string">px</span><span class="codes-code"> !important</span><span class="codes-code">;</span>
<span class="codes-brackets">}</span>
<span class="codes-code"> </span>
<span class="codes-identifier">body</span><span class="codes-code"> &gt; </span><span class="codes-identifier">div</span><span class="codes-code"> &gt; </span><span class="codes-identifier">div.gbh</span><span class="codes-brackets">{</span>
<span class="codes-code">    </span><span class="codes-reserved">border:</span><span class="codes-code"> </span><span class="codes-string">none</span><span class="codes-code"> !important</span><span class="codes-code">;</span>
<span class="codes-code">    </span><span class="codes-reserved">padding-bottom:</span><span class="codes-code"> </span><span class="codes-number">10</span><span class="codes-string">px</span><span class="codes-code"> !important</span><span class="codes-code">; </span>
<span class="codes-brackets">}</span>
<span class="codes-code"> </span>
<span class="codes-code">/</span><span class="codes-identifier">*</span><span class="codes-code"> 検索ボックステーブル周りの調整 </span><span class="codes-identifier">*</span><span class="codes-code">/</span>
<span class="codes-code"> </span>
<span class="codes-identifier">table#sft</span><span class="codes-brackets">{</span>
<span class="codes-code">    </span><span class="codes-reserved">width:</span><span class="codes-code"> </span><span class="codes-number">100</span><span class="codes-string">%</span><span class="codes-code"> !important</span><span class="codes-code">;</span>
<span class="codes-brackets">}</span>
<span class="codes-code"> </span>
<span class="codes-identifier">table#sft</span><span class="codes-code"> </span><span class="codes-identifier">tr</span><span class="codes-code">[</span><span class="codes-identifier">valign</span><span class="codes-code">=&quot;</span><span class="codes-identifier">top</span><span class="codes-code">&quot;] &gt; </span><span class="codes-identifier">td</span><span class="codes-code"> + </span><span class="codes-identifier">td</span><span class="codes-brackets">{</span>
<span class="codes-code">    </span><span class="codes-reserved">width:</span><span class="codes-code"> </span><span class="codes-number">450</span><span class="codes-string">px</span><span class="codes-code"> !important</span><span class="codes-code">;</span>
<span class="codes-brackets">}</span>
<span class="codes-code"> </span>
<span class="codes-identifier">table#sft</span><span class="codes-code"> </span><span class="codes-identifier">tr</span><span class="codes-code">[</span><span class="codes-identifier">valign</span><span class="codes-code">=&quot;</span><span class="codes-identifier">top</span><span class="codes-code">&quot;] &gt; </span><span class="codes-identifier">td</span><span class="codes-code"> + </span><span class="codes-identifier">td</span><span class="codes-code">,</span>
<span class="codes-identifier">table#sft</span><span class="codes-code"> </span><span class="codes-identifier">tr</span><span class="codes-code">[</span><span class="codes-identifier">valign</span><span class="codes-code">=&quot;</span><span class="codes-identifier">top</span><span class="codes-code">&quot;] &gt; </span><span class="codes-identifier">td</span><span class="codes-code"> + </span><span class="codes-identifier">td</span><span class="codes-code"> </span><span class="codes-identifier">table</span><span class="codes-brackets">{</span>
<span class="codes-code">    </span><span class="codes-reserved">padding:</span><span class="codes-code"> </span><span class="codes-number">0</span><span class="codes-string">px</span><span class="codes-code"> !important</span><span class="codes-code">;</span>
<span class="codes-code">    </span><span class="codes-reserved">margin:</span><span class="codes-code"> </span><span class="codes-number">0</span><span class="codes-string">px</span><span class="codes-code"> !important</span><span class="codes-code">;</span>
<span class="codes-brackets">}</span>
<span class="codes-code"> </span>
<span class="codes-identifier">table#sft</span><span class="codes-code"> </span><span class="codes-identifier">tr</span><span class="codes-code">[</span><span class="codes-identifier">valign</span><span class="codes-code">=&quot;</span><span class="codes-identifier">top</span><span class="codes-code">&quot;] &gt; </span><span class="codes-identifier">td</span><span class="codes-code"> + </span><span class="codes-identifier">td</span><span class="codes-brackets">{</span>
<span class="codes-code">    </span><span class="codes-reserved">padding-bottom:</span><span class="codes-code"> </span><span class="codes-number">6</span><span class="codes-string">px</span><span class="codes-code"> !important</span><span class="codes-code">;</span>
<span class="codes-code">    </span><span class="codes-reserved">position:</span><span class="codes-code"> </span><span class="codes-string">fixed</span><span class="codes-code"> !important</span><span class="codes-code">;</span>
<span class="codes-code">    </span><span class="codes-reserved">bottom:</span><span class="codes-code"> </span><span class="codes-number">0</span><span class="codes-string">px</span><span class="codes-code"> !important</span><span class="codes-code">;</span>
<span class="codes-code">    </span><span class="codes-reserved">right:</span><span class="codes-code"> </span><span class="codes-number">0</span><span class="codes-string">px</span><span class="codes-code"> !important</span><span class="codes-code">;</span>
<span class="codes-brackets">}</span>
<span class="codes-code"> </span>
<span class="codes-identifier">table#sft</span><span class="codes-code"> </span><span class="codes-identifier">tr</span><span class="codes-code">[</span><span class="codes-identifier">valign</span><span class="codes-code">=&quot;</span><span class="codes-identifier">top</span><span class="codes-code">&quot;] &gt; </span><span class="codes-identifier">td</span><span class="codes-code"> + </span><span class="codes-identifier">td</span><span class="codes-code"> </span><span class="codes-identifier">table</span><span class="codes-brackets">{</span>
<span class="codes-code">    </span><span class="codes-reserved">padding-bottom:</span><span class="codes-code"> </span><span class="codes-number">6</span><span class="codes-string">px</span><span class="codes-code"> !important</span><span class="codes-code">;</span>
<span class="codes-brackets">}</span>
<span class="codes-code"> </span>
<span class="codes-identifier">table#sft</span><span class="codes-code"> </span><span class="codes-identifier">tr</span><span class="codes-code">[</span><span class="codes-identifier">valign</span><span class="codes-code">=&quot;</span><span class="codes-identifier">top</span><span class="codes-code">&quot;] &gt; </span><span class="codes-identifier">td</span><span class="codes-code"> + </span><span class="codes-identifier">td</span><span class="codes-code"> </span><span class="codes-identifier">table</span><span class="codes-code"> </span><span class="codes-identifier">tr</span><span class="codes-brackets">{</span>
<span class="codes-code">    </span><span class="codes-reserved">display:</span><span class="codes-code"> </span><span class="codes-string">block</span><span class="codes-code"> !important</span><span class="codes-code">;</span>
<span class="codes-code">    </span><span class="codes-reserved">float:</span><span class="codes-code"> </span><span class="codes-string">left</span><span class="codes-code"> !important</span><span class="codes-code">;</span>
<span class="codes-code">    </span><span class="codes-reserved">padding-top:</span><span class="codes-code"> </span><span class="codes-number">7</span><span class="codes-string">px</span><span class="codes-code"> !important</span><span class="codes-code">;</span>
<span class="codes-brackets">}</span>
<span class="codes-code"> </span>
<span class="codes-identifier">table#sft</span><span class="codes-code">:</span><span class="codes-identifier">hover</span><span class="codes-code"> </span><span class="codes-identifier">tr</span><span class="codes-code">[</span><span class="codes-identifier">valign</span><span class="codes-code">=&quot;</span><span class="codes-identifier">top</span><span class="codes-code">&quot;] &gt; </span><span class="codes-identifier">td</span><span class="codes-code"> + </span><span class="codes-identifier">td</span><span class="codes-brackets">{</span>
<span class="codes-code">    </span><span class="codes-reserved">background-color:</span><span class="codes-code"> </span><span class="codes-var">white</span><span class="codes-code"> !important</span><span class="codes-code">;</span>
<span class="codes-brackets">}</span>
<span class="codes-code"> </span>
<span class="codes-identifier">table#sft</span><span class="codes-code"> </span><span class="codes-identifier">tr</span><span class="codes-code">[</span><span class="codes-identifier">valign</span><span class="codes-code">=&quot;</span><span class="codes-identifier">top</span><span class="codes-code">&quot;] &gt; </span><span class="codes-identifier">td</span><span class="codes-code"> + </span><span class="codes-identifier">td</span><span class="codes-code"> </span><span class="codes-identifier">input</span><span class="codes-brackets">{</span>
<span class="codes-code">    </span><span class="codes-reserved">font-size:</span><span class="codes-code"> </span><span class="codes-number">90</span><span class="codes-string">%</span><span class="codes-code"> !important</span><span class="codes-code">;</span>
<span class="codes-code">    </span><span class="codes-reserved">opacity:</span><span class="codes-code"> </span><span class="codes-number">0.6</span><span class="codes-code"> !important</span><span class="codes-code">;</span>
<span class="codes-brackets">}</span>
<span class="codes-code"> </span>
<span class="codes-identifier">table#sft</span><span class="codes-code"> </span><span class="codes-identifier">tr</span><span class="codes-code">[</span><span class="codes-identifier">valign</span><span class="codes-code">=&quot;</span><span class="codes-identifier">top</span><span class="codes-code">&quot;] &gt; </span><span class="codes-identifier">td</span><span class="codes-code"> + </span><span class="codes-identifier">td</span><span class="codes-code"> </span><span class="codes-identifier">input</span><span class="codes-code">[</span><span class="codes-identifier">name</span><span class="codes-code">=&quot;</span><span class="codes-identifier">q</span><span class="codes-code">&quot;]</span><span class="codes-brackets">{</span>
<span class="codes-code">    </span><span class="codes-reserved">display:</span><span class="codes-code"> </span><span class="codes-string">block</span><span class="codes-code"> !important</span><span class="codes-code">;</span>
<span class="codes-code">    </span><span class="codes-reserved">background-color:</span><span class="codes-code"> </span><span class="codes-var">white</span><span class="codes-code"> !important</span><span class="codes-code">;</span>
<span class="codes-code">    </span><span class="codes-reserved">border:</span><span class="codes-code"> </span><span class="codes-number">1</span><span class="codes-string">px</span><span class="codes-code"> </span><span class="codes-string">inset</span><span class="codes-code"> </span><span class="codes-var">#666</span><span class="codes-code"> !important</span><span class="codes-code">;</span>
<span class="codes-code">    </span><span class="codes-reserved">float:</span><span class="codes-code"> </span><span class="codes-string">left</span><span class="codes-code"> !important</span><span class="codes-code">;</span>
<span class="codes-code">    </span><span class="codes-reserved">width:</span><span class="codes-code"> </span><span class="codes-number">350</span><span class="codes-string">px</span><span class="codes-code"> !important</span><span class="codes-code">;</span>
<span class="codes-code">    </span><span class="codes-reserved">padding:</span><span class="codes-code"> </span><span class="codes-number">4</span><span class="codes-string">px</span><span class="codes-code"> </span><span class="codes-number">6</span><span class="codes-string">px</span><span class="codes-code"> !important</span><span class="codes-code">;</span>
<span class="codes-brackets">}</span>
<span class="codes-code"> </span>
<span class="codes-identifier">table#sft</span><span class="codes-code"> </span><span class="codes-identifier">tr</span><span class="codes-code">[</span><span class="codes-identifier">valign</span><span class="codes-code">=&quot;</span><span class="codes-identifier">top</span><span class="codes-code">&quot;] &gt; </span><span class="codes-identifier">td</span><span class="codes-code"> + </span><span class="codes-identifier">td</span><span class="codes-code"> </span><span class="codes-identifier">input</span><span class="codes-code">[</span><span class="codes-identifier">name</span><span class="codes-code">=&quot;</span><span class="codes-identifier">q</span><span class="codes-code">&quot;]:</span><span class="codes-identifier">focus</span><span class="codes-brackets">{</span>
<span class="codes-code">    </span><span class="codes-reserved">border:</span><span class="codes-code"> </span><span class="codes-number">1</span><span class="codes-string">px</span><span class="codes-code"> </span><span class="codes-string">solid</span><span class="codes-code"> </span><span class="codes-var">#94bbdf</span><span class="codes-code"> !important</span><span class="codes-code">;</span>
<span class="codes-code">    </span><span class="codes-reserved">outline:</span><span class="codes-code"> </span><span class="codes-number">1</span><span class="codes-string">px</span><span class="codes-code"> </span><span class="codes-string">solid</span><span class="codes-code"> </span><span class="codes-var">#b3cfe8</span><span class="codes-code"> !important</span><span class="codes-code">;</span>
<span class="codes-brackets">}</span>
<span class="codes-code"> </span>
<span class="codes-identifier">table#sft</span><span class="codes-code"> </span><span class="codes-identifier">tr</span><span class="codes-code">[</span><span class="codes-identifier">valign</span><span class="codes-code">=&quot;</span><span class="codes-identifier">top</span><span class="codes-code">&quot;] &gt; </span><span class="codes-identifier">td</span><span class="codes-code"> + </span><span class="codes-identifier">td</span><span class="codes-code"> </span><span class="codes-identifier">input</span><span class="codes-code">[</span><span class="codes-identifier">name</span><span class="codes-code">=&quot;</span><span class="codes-identifier">q</span><span class="codes-code">&quot;]:</span><span class="codes-identifier">focus</span><span class="codes-code">,</span>
<span class="codes-identifier">table#sft</span><span class="codes-code"> </span><span class="codes-identifier">tr</span><span class="codes-code">[</span><span class="codes-identifier">valign</span><span class="codes-code">=&quot;</span><span class="codes-identifier">top</span><span class="codes-code">&quot;] &gt; </span><span class="codes-identifier">td</span><span class="codes-code"> + </span><span class="codes-identifier">td</span><span class="codes-code"> </span><span class="codes-identifier">input</span><span class="codes-code">[</span><span class="codes-identifier">name</span><span class="codes-code">=&quot;</span><span class="codes-identifier">q</span><span class="codes-code">&quot;]:</span><span class="codes-identifier">focus</span><span class="codes-code"> + </span><span class="codes-identifier">input</span><span class="codes-code">[</span><span class="codes-identifier">name</span><span class="codes-code">=&quot;</span><span class="codes-identifier">btnG</span><span class="codes-code">&quot;],</span>
<span class="codes-identifier">table#sft</span><span class="codes-code"> </span><span class="codes-identifier">tr</span><span class="codes-code">[</span><span class="codes-identifier">valign</span><span class="codes-code">=&quot;</span><span class="codes-identifier">top</span><span class="codes-code">&quot;] &gt; </span><span class="codes-identifier">td</span><span class="codes-code"> + </span><span class="codes-identifier">td</span><span class="codes-code"> </span><span class="codes-identifier">input</span><span class="codes-code">[</span><span class="codes-identifier">name</span><span class="codes-code">=&quot;</span><span class="codes-identifier">q</span><span class="codes-code">&quot;] + </span><span class="codes-identifier">input</span><span class="codes-code">[</span><span class="codes-identifier">name</span><span class="codes-code">=&quot;</span><span class="codes-identifier">btnG</span><span class="codes-code">&quot;]:</span><span class="codes-identifier">active</span><span class="codes-brackets">{</span>
<span class="codes-code">    </span><span class="codes-reserved">opacity:</span><span class="codes-code"> </span><span class="codes-number">1.0</span><span class="codes-code"> !important</span><span class="codes-code">;</span>
<span class="codes-brackets">}</span>
<span class="codes-code"> </span>
<span class="codes-identifier">table#sft</span><span class="codes-code"> </span><span class="codes-identifier">tr</span><span class="codes-code">[</span><span class="codes-identifier">valign</span><span class="codes-code">=&quot;</span><span class="codes-identifier">top</span><span class="codes-code">&quot;] &gt; </span><span class="codes-identifier">td</span><span class="codes-code"> + </span><span class="codes-identifier">td</span><span class="codes-code"> </span><span class="codes-identifier">input</span><span class="codes-code">[</span><span class="codes-identifier">name</span><span class="codes-code">=&quot;</span><span class="codes-identifier">btnG</span><span class="codes-code">&quot;]</span><span class="codes-brackets">{</span>
<span class="codes-code">    </span><span class="codes-reserved">margin-left:</span><span class="codes-code"> </span><span class="codes-number">10</span><span class="codes-string">px</span><span class="codes-code"> !important</span><span class="codes-code">;</span>
<span class="codes-code">    </span><span class="codes-reserved">padding:</span><span class="codes-code"> </span><span class="codes-number">3</span><span class="codes-string">px</span><span class="codes-code"> !important</span><span class="codes-code">;</span>
<span class="codes-brackets">}</span>
<span class="codes-code"> </span>
<span class="codes-code">/</span><span class="codes-identifier">*</span><span class="codes-code"> 関連ページ、メモへのリンクを削除 </span><span class="codes-identifier">*</span><span class="codes-code">/</span>
<span class="codes-code"> </span>
<span class="codes-identifier">a</span><span class="codes-code">[</span><span class="codes-identifier">href*</span><span class="codes-code">=&quot;</span><span class="codes-identifier">q</span><span class="codes-code">=</span><span class="codes-identifier">related</span><span class="codes-code">&quot;],</span>
<span class="codes-identifier">span.bl</span><span class="codes-brackets">{</span>
<span class="codes-code">    </span><span class="codes-reserved">display:</span><span class="codes-code"> </span><span class="codes-string">none</span><span class="codes-code"> !important</span><span class="codes-code">;</span>
<span class="codes-brackets">}</span>
<span class="codes-code"> </span>
<span class="codes-code">/</span><span class="codes-identifier">*</span><span class="codes-code"> 検索結果の幅 </span><span class="codes-identifier">*</span><span class="codes-code">/</span>
<span class="codes-code"> </span>
<span class="codes-identifier">div#res</span><span class="codes-code"> </span><span class="codes-identifier">table</span><span class="codes-brackets">{</span>
<span class="codes-code">    </span><span class="codes-reserved">width:</span><span class="codes-code"> </span><span class="codes-number">100</span><span class="codes-string">%</span><span class="codes-code"> !important</span><span class="codes-code">;</span>
<span class="codes-code">    </span><span class="codes-reserved">max-width:</span><span class="codes-code"> </span><span class="codes-number">40</span><span class="codes-string">em</span><span class="codes-code"> !important</span><span class="codes-code">;</span>
<span class="codes-brackets">}</span>
<span class="codes-code"> </span>
<span class="codes-code">/</span><span class="codes-identifier">*</span><span class="codes-code"> 各検索結果を下げ </span><span class="codes-identifier">*</span><span class="codes-code">/</span>
<span class="codes-code"> </span>
<span class="codes-identifier">.s</span><span class="codes-brackets">{</span>
<span class="codes-code">    </span><span class="codes-reserved">margin-top:</span><span class="codes-code"> </span><span class="codes-number">0.3</span><span class="codes-string">em</span><span class="codes-code"> !important</span><span class="codes-code">;</span>
<span class="codes-code">    </span><span class="codes-reserved">margin-left:</span><span class="codes-code"> </span><span class="codes-number">2</span><span class="codes-string">em</span><span class="codes-code"> !important</span><span class="codes-code">;</span>
<span class="codes-brackets">}</span>
<span class="codes-code"> </span>
<span class="codes-code">/</span><span class="codes-identifier">*</span><span class="codes-code"> カウンタを生成 </span><span class="codes-identifier">*</span><span class="codes-code">/</span>
<span class="codes-code"> </span>
<span class="codes-identifier">div#res</span><span class="codes-brackets">{</span>
<span class="codes-code">    </span><span class="codes-reserved">counter-reset:</span><span class="codes-code"> head !important</span><span class="codes-code">;</span>
<span class="codes-brackets">}</span>
<span class="codes-code"> </span>
<span class="codes-identifier">.g</span><span class="codes-code"> &gt; </span><span class="codes-identifier">.r</span><span class="codes-code">:</span><span class="codes-identifier">before</span><span class="codes-brackets">{</span>
<span class="codes-code">    </span><span class="codes-reserved">counter-increment:</span><span class="codes-code"> head !important</span><span class="codes-code">;</span>
<span class="codes-code">    </span><span class="codes-reserved">content:</span><span class="codes-code"> &quot;#&quot; counter(head) !important</span><span class="codes-code">;</span>
<span class="codes-code">    </span><span class="codes-reserved">font-size:</span><span class="codes-code"> </span><span class="codes-number">18</span><span class="codes-string">px</span><span class="codes-code"> !important</span><span class="codes-code">;</span>
<span class="codes-code">    </span><span class="codes-reserved">font-weight:</span><span class="codes-code"> </span><span class="codes-string">bold</span><span class="codes-code"> !important</span><span class="codes-code">;</span>
<span class="codes-code">    </span><span class="codes-reserved">margin-right:</span><span class="codes-code"> </span><span class="codes-number">5</span><span class="codes-string">px</span><span class="codes-code"> !important</span><span class="codes-code">;</span>
<span class="codes-code">    </span><span class="codes-reserved">padding:</span><span class="codes-code"> </span><span class="codes-number">0</span><span class="codes-string">px</span><span class="codes-code"> </span><span class="codes-number">4</span><span class="codes-string">px</span><span class="codes-code"> !important</span><span class="codes-code">;</span>
<span class="codes-code">    </span><span class="codes-reserved">background:</span><span class="codes-code"> </span><span class="codes-var">white</span><span class="codes-code"> url(&quot;data:image/png</span><span class="codes-code">;</span><span class="codes-identifier">base64</span><span class="codes-code">,</span><span class="codes-identifier">iVBORw0KGgoAAAANSUhEUgAAAAoAAAAeCAMAAAAiq38CAAAAA3NCSVQICAjb4U</span><span class="codes-code">/</span><span class="codes-identifier">gAAAAYFBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADu7u7v7</span><span class="codes-code">+/</span><span class="codes-identifier">w8PDx8fHy8vLz8</span><span class="codes-code">/</span><span class="codes-identifier">P09PT19fX29vb39</span><span class="codes-code">/</span><span class="codes-identifier">f4</span><span class="codes-code">+</span><span class="codes-identifier">Pj5</span><span class="codes-code">+</span><span class="codes-identifier">fn6</span><span class="codes-code">+</span><span class="codes-identifier">vr7</span><span class="codes-code">+/</span><span class="codes-identifier">v8</span><span class="codes-code">/</span><span class="codes-identifier">Pz9</span><span class="codes-code">/</span><span class="codes-identifier">f3</span><span class="codes-code">+/</span><span class="codes-identifier">v7</span><span class="codes-code">///9</span><span class="codes-identifier">uR0UGAAAAQUlEQVQYlXXGtwGAMAAEsZ8ATHIk7L</span><span class="codes-code">+</span><span class="codes-identifier">lK5</span><span class="codes-code">+/</span><span class="codes-identifier">QZX0QdYX3ge64W1Qq4PqbIE3QwneCF346QnvAe3wbpgNCtAK74IOWSsakaslG2kAAAAASUVORK5CYII</span><span class="codes-code">=&quot;) </span><span class="codes-identifier">left</span><span class="codes-code"> </span><span class="codes-identifier">top</span><span class="codes-code"> !</span><span class="codes-identifier">important</span><span class="codes-code">;</span>
<span class="codes-code">    </span><span class="codes-reserved">color:</span><span class="codes-code"> </span><span class="codes-var">#bbb</span><span class="codes-code"> !important</span><span class="codes-code">;</span>
<span class="codes-code">    </span><span class="codes-reserved">border:</span><span class="codes-code"> </span><span class="codes-number">1</span><span class="codes-string">px</span><span class="codes-code"> </span><span class="codes-string">solid</span><span class="codes-code"> </span><span class="codes-var">#bfbfbf</span><span class="codes-code"> !important</span><span class="codes-code">;</span>
<span class="codes-code">    -</span><span class="codes-reserved">moz-border-radius:</span><span class="codes-code"> </span><span class="codes-number">3</span><span class="codes-string">px</span><span class="codes-code"> !important</span><span class="codes-code">;</span>
<span class="codes-brackets">}</span>
<span class="codes-code"> </span>
<span class="codes-code">/</span><span class="codes-identifier">*</span><span class="codes-code"> 関連検索 </span><span class="codes-identifier">*</span><span class="codes-code">/</span>
<span class="codes-code"> </span>
<span class="codes-identifier">div.e</span><span class="codes-code">,</span>
<span class="codes-identifier">div#res</span><span class="codes-code"> &gt; </span><span class="codes-reserved">div:</span><span class="codes-code">first-child{</span>
<span class="codes-code">    border: </span><span class="codes-number">1</span><span class="codes-string">px</span><span class="codes-code"> </span><span class="codes-string">solid</span><span class="codes-code"> </span><span class="codes-var">#4d7032</span><span class="codes-code"> !important</span><span class="codes-code">;</span>
<span class="codes-code">    </span><span class="codes-reserved">padding:</span><span class="codes-code"> </span><span class="codes-number">0</span><span class="codes-string">px</span><span class="codes-code"> !important</span><span class="codes-code">;</span>
<span class="codes-brackets">}</span>
<span class="codes-code"> </span>
<span class="codes-identifier">div#res.med</span><span class="codes-code"> &gt; </span><span class="codes-identifier">div.med</span><span class="codes-brackets">{</span>
<span class="codes-code">    </span><span class="codes-reserved">border:</span><span class="codes-code"> </span><span class="codes-string">none</span><span class="codes-code"> !important</span><span class="codes-code">;</span>
<span class="codes-brackets">}</span>
<span class="codes-code"> </span>
<span class="codes-identifier">div.e</span><span class="codes-code"> </span><span class="codes-identifier">table#brs</span><span class="codes-brackets">{</span>
<span class="codes-code">    </span><span class="codes-reserved">width:</span><span class="codes-code"> </span><span class="codes-number">100</span><span class="codes-string">%</span><span class="codes-code"> !important</span><span class="codes-code">;</span>
<span class="codes-code">    </span><span class="codes-reserved">max-width:</span><span class="codes-code"> </span><span class="codes-number">100</span><span class="codes-string">%</span><span class="codes-code"> !important</span><span class="codes-code">;</span>
<span class="codes-code">    </span><span class="codes-reserved">padding:</span><span class="codes-code"> </span><span class="codes-number">0</span><span class="codes-string">px</span><span class="codes-code"> !important</span><span class="codes-code">;</span>
<span class="codes-brackets">}</span>
<span class="codes-code"> </span>
<span class="codes-identifier">div#res</span><span class="codes-code"> &gt; </span><span class="codes-identifier">div</span><span class="codes-special">:first-child</span><span class="codes-code"> </span><span class="codes-identifier">td.nobr</span><span class="codes-code">,</span>
<span class="codes-identifier">div.e</span><span class="codes-code"> </span><span class="codes-identifier">table#brs</span><span class="codes-code"> </span><span class="codes-identifier">caption</span><span class="codes-brackets">{</span>
<span class="codes-code">    </span><span class="codes-reserved">min-width:</span><span class="codes-code"> </span><span class="codes-number">100</span><span class="codes-string">px</span><span class="codes-code"> !important</span><span class="codes-code">;</span>
<span class="codes-code">    </span><span class="codes-reserved">background-color:</span><span class="codes-code"> </span><span class="codes-var">#6d9f52</span><span class="codes-code"> !important</span><span class="codes-code">;</span>
<span class="codes-code">    </span><span class="codes-reserved">color:</span><span class="codes-code"> </span><span class="codes-var">white</span><span class="codes-code"> !important</span><span class="codes-code">;</span>
<span class="codes-code">    </span><span class="codes-reserved">padding:</span><span class="codes-code"> </span><span class="codes-number">0</span><span class="codes-string">px</span><span class="codes-code"> !important</span><span class="codes-code">;</span>
<span class="codes-code">    </span><span class="codes-reserved">vertical-align:</span><span class="codes-code"> </span><span class="codes-string">middle</span><span class="codes-code"> !important</span><span class="codes-code">;</span>
<span class="codes-code">    </span><span class="codes-reserved">text-align:</span><span class="codes-code"> </span><span class="codes-string">center</span><span class="codes-code"> !important</span><span class="codes-code">;</span>
<span class="codes-code">    </span><span class="codes-reserved">font-weight:</span><span class="codes-code"> </span><span class="codes-string">bold</span><span class="codes-code"> !important</span><span class="codes-code">;</span>
<span class="codes-brackets">}</span>
<span class="codes-code"> </span>
<span class="codes-identifier">div#res</span><span class="codes-code"> &gt; </span><span class="codes-identifier">div</span><span class="codes-special">:first-child</span><span class="codes-code"> </span><span class="codes-identifier">td</span><span class="codes-code">,</span>
<span class="codes-identifier">div.e</span><span class="codes-code"> </span><span class="codes-identifier">table#brs</span><span class="codes-code"> </span><span class="codes-identifier">caption</span><span class="codes-brackets">{</span>
<span class="codes-code">    </span><span class="codes-reserved">padding:</span><span class="codes-code"> </span><span class="codes-number">10</span><span class="codes-string">px</span><span class="codes-code"> !important</span><span class="codes-code">;</span>
<span class="codes-brackets">}</span>
<span class="codes-code"> </span>
<span class="codes-identifier">div.e</span><span class="codes-code"> </span><span class="codes-identifier">table#brs</span><span class="codes-code"> </span><span class="codes-identifier">tr</span><span class="codes-code"> </span><span class="codes-identifier">td</span><span class="codes-brackets">{</span>
<span class="codes-code">    </span><span class="codes-reserved">border:</span><span class="codes-code"> </span><span class="codes-number">1</span><span class="codes-string">px</span><span class="codes-code"> </span><span class="codes-string">solid</span><span class="codes-code"> </span><span class="codes-var">#ccc</span><span class="codes-code"> !important</span><span class="codes-code">;</span>
<span class="codes-code">    </span><span class="codes-reserved">padding:</span><span class="codes-code"> </span><span class="codes-number">10</span><span class="codes-string">px</span><span class="codes-code"> !important</span><span class="codes-code">;</span>
<span class="codes-brackets">}</span>
<span class="codes-code"> </span>
<span class="codes-code">/</span><span class="codes-identifier">*</span><span class="codes-code"> ファイルタイプ関連 </span><span class="codes-identifier">*</span><span class="codes-code">/</span>
<span class="codes-code"> </span>
<span class="codes-identifier">.g</span><span class="codes-code"> &gt; </span><span class="codes-identifier">.r</span><span class="codes-brackets">{</span>
<span class="codes-code">    </span><span class="codes-reserved">font-size:</span><span class="codes-code"> </span><span class="codes-number">110</span><span class="codes-string">%</span><span class="codes-code"> !important</span><span class="codes-code">;</span>
<span class="codes-brackets">}</span>
<span class="codes-code"> </span>
<span class="codes-identifier">.g</span><span class="codes-code"> &gt; </span><span class="codes-identifier">.r</span><span class="codes-code"> &gt; </span><span class="codes-identifier">a.l</span><span class="codes-brackets">[</span><span class="codes-var">href</span><span class="codes-code">*=</span><span class="codes-quotes">&quot;</span><span class="codes-string">.ac.jp/</span><span class="codes-quotes">&quot;</span><span class="codes-brackets">]</span><span class="codes-special">:before</span><span class="codes-brackets">{</span>
<span class="codes-code">    </span><span class="codes-reserved">content:</span><span class="codes-code"> url(&quot;data:image/png</span><span class="codes-code">;</span><span class="codes-identifier">base64</span><span class="codes-code">,</span><span class="codes-identifier">iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAMAAADzapwJAAAAA3NCSVQICAjb4U</span><span class="codes-code">/</span><span class="codes-identifier">gAAAAYFBMVEUwMDAlTSZnaGcIoztLhlgBvEQ4qWA</span><span class="codes-code">+</span><span class="codes-identifier">uGskyWJUrXNetX0</span><span class="codes-code">/</span><span class="codes-identifier">znebnJxvu4l9wZidrqxx1ZGotLe1vL</span><span class="codes-code">+</span><span class="codes-identifier">N1qWb2q</span><span class="codes-code">+</span><span class="codes-identifier">w4r</span><span class="codes-code">/</span><span class="codes-identifier">X19u</span><span class="codes-code">+6</span><span class="codes-identifier">c7T5d7d6ejm7O3m9O7u9</span><span class="codes-code">/</span><span class="codes-identifier">b2</span><span class="codes-code">+</span><span class="codes-identifier">vj9</span><span class="codes-code">/</span><span class="codes-identifier">f3</span><span class="codes-code">///89</span><span class="codes-identifier">IAYcAAAA1ElEQVQYlWWR6Y6DMAyEXVhaoOEKR27m</span><span class="codes-code">/</span><span class="codes-identifier">d9yndBGbHb</span><span class="codes-code">+2</span><span class="codes-identifier">Bp9Go8SAnB</span><span class="codes-code">+</span><span class="codes-identifier">pP13B2UbGH70F6EM77OpxM2</span><span class="codes-code">+</span><span class="codes-identifier">Voz148h5mfa2ogklDccD1hU0zsBbVaHMdmHXJFBkny5shsw</span><span class="codes-code">/</span><span class="codes-identifier">mnMtHQWN4ELwD13QsLGJlH9p</span><span class="codes-code">+</span><span class="codes-identifier">JCmuEamLZLMhBvNEW7f1k2d8jqaaHiv5rZtmqb1Apnmcuv7He16PuLV</span><span class="codes-code">+</span><span class="codes-identifier">N7s</span><span class="codes-code">+</span><span class="codes-identifier">m1</span><span class="codes-code">+</span><span class="codes-identifier">vZ51lBLuQ8O4dej77smqx4Njrt</span><span class="codes-code">/</span><span class="codes-identifier">RUOPQd13XD6MyxK0SraVclom1LFJWpJPNEnST4JO</span><span class="codes-code">/4</span><span class="codes-identifier">bEva9NpKxAAAAAASUVORK5CYII</span><span class="codes-code">=&quot;) !</span><span class="codes-identifier">important</span><span class="codes-code">;</span>
<span class="codes-code">    </span><span class="codes-reserved">padding:</span><span class="codes-code"> </span><span class="codes-number">0</span><span class="codes-string">px</span><span class="codes-code"> </span><span class="codes-number">4</span><span class="codes-string">px</span><span class="codes-code"> !important</span><span class="codes-code">;</span>
<span class="codes-brackets">}</span>
<span class="codes-code"> </span>
<span class="codes-identifier">.g</span><span class="codes-code"> &gt; </span><span class="codes-identifier">.r</span><span class="codes-code"> &gt; </span><span class="codes-identifier">a.l</span><span class="codes-brackets">[</span><span class="codes-var">href</span><span class="codes-code">*=</span><span class="codes-quotes">&quot;</span><span class="codes-string">.go.jp/</span><span class="codes-quotes">&quot;</span><span class="codes-brackets">]</span><span class="codes-special">:before</span><span class="codes-brackets">{</span>
<span class="codes-code">    </span><span class="codes-reserved">content:</span><span class="codes-code"> url(&quot;data:image/png</span><span class="codes-code">;</span><span class="codes-identifier">base64</span><span class="codes-code">,</span><span class="codes-identifier">iVBORw0KGgoAAAANSUhEUgAAABYAAAAUCAMAAAC</span><span class="codes-code">+</span><span class="codes-identifier">oj0CAAAAA3NCSVQICAjb4U</span><span class="codes-code">/</span><span class="codes-identifier">gAAAAYFBMVEW8AAC2CQjNAAHsAAC7FhXIERHeCgi7KCjERkXsOjnZamrPfHvdgICvr6</span><span class="codes-code">/</span><span class="codes-identifier">gqai8vLzCwsLIyMjOzs7S1tbY29zg4OHz2tnk5ebp6enu7e3x8fHz9Pb39</span><span class="codes-code">/</span><span class="codes-identifier">f7</span><span class="codes-code">+/</span><span class="codes-identifier">v9</span><span class="codes-code">/</span><span class="codes-identifier">f3</span><span class="codes-code">////</span><span class="codes-identifier">j3z0zAAAAu0lEQVQYlbWQ3W6DMAxGoTC2FhZYSBY7</span><span class="codes-code">/</span><span class="codes-identifier">nv</span><span class="codes-code">/</span><span class="codes-identifier">t6wDVS</span><span class="codes-code">+</span><span class="codes-identifier">m3lWzIkX6dHT02Z29nO7fYxFRs</span><span class="codes-code">/</span><span class="codes-identifier">aYn7GoUsmF</span><span class="codes-code">/</span><span class="codes-identifier">FfCBngs6JBCDkuojhCdtGRAVgrTpf8Mpoh0SgCATZdh</span><span class="codes-code">+</span><span class="codes-identifier">hjH3ZhQj1hSqWJhmKaxv6nVpnGJ7Lmw1qvj</span><span class="codes-code">/</span><span class="codes-identifier">RcLI4p0xvATM4j9XodLN1eyyrVJKG7eTo3DbT58hkfv8h2Tt4S0pwRkVPncMq4Z07b6bNF5fSyv697wvzcRzG8d9g6wXC54DpXxzwAAAABJRU5ErkJggg</span><span class="codes-code">==&quot;) !</span><span class="codes-identifier">important</span><span class="codes-code">;</span>
<span class="codes-code">    </span><span class="codes-reserved">padding:</span><span class="codes-code"> </span><span class="codes-number">0</span><span class="codes-string">px</span><span class="codes-code"> </span><span class="codes-number">4</span><span class="codes-string">px</span><span class="codes-code"> !important</span><span class="codes-code">;</span>
<span class="codes-brackets">}</span>
<span class="codes-code"> </span>
<span class="codes-identifier">.g</span><span class="codes-code"> &gt; </span><span class="codes-identifier">.r</span><span class="codes-code"> &gt; </span><span class="codes-identifier">a.l</span><span class="codes-brackets">[</span><span class="codes-var">href</span><span class="codes-code">*=</span><span class="codes-quotes">&quot;</span><span class="codes-string">http://www.amazon.co.jp/</span><span class="codes-quotes">&quot;</span><span class="codes-brackets">]</span><span class="codes-special">:before</span><span class="codes-brackets">{</span>
<span class="codes-code">    </span><span class="codes-reserved">content:</span><span class="codes-code"> url(&quot;data:image/png</span><span class="codes-code">;</span><span class="codes-identifier">base64</span><span class="codes-code">,</span><span class="codes-identifier">iVBORw0KGgoAAAANSUhEUgAAABYAAAATCAMAAACjpw26AAAAA3NCSVQICAjb4U</span><span class="codes-code">/</span><span class="codes-identifier">gAAAAYFBMVEUKCAYVEhEqKSc8OjlHRkVTUlFjYmJsbGt7e3qQj4</span><span class="codes-code">+</span><span class="codes-identifier">ZmZj7ji</span><span class="codes-code">+</span><span class="codes-identifier">trKz8nkL7o1O5uLj</span><span class="codes-code">+</span><span class="codes-identifier">rWP9tHHExMT8w479zJ</span><span class="codes-code">/</span><span class="codes-identifier">W1tb</span><span class="codes-code">+1</span><span class="codes-identifier">bDi4uL94Mfp6en95tH</span><span class="codes-code">+7</span><span class="codes-identifier">uLy8vL79</span><span class="codes-code">/</span><span class="codes-identifier">T9</span><span class="codes-code">+</span><span class="codes-identifier">vn</span><span class="codes-code">///9</span><span class="codes-identifier">mECSVAAAAtElEQVQYlW2RWRKEIAxEg4DgLi6AiOH</span><span class="codes-code">+</span><span class="codes-identifier">txxwprRk7K</span><span class="codes-code">/</span><span class="codes-identifier">Uo6sTEgivgqtCxD8cCfojxxi2VpaiWjO34ZBE1ycWQERbEhDPkIpLDFMBPMv261CLHIdNFlAUJMNHyp7a3B1T2Uv2ELHx4p4Qzh8bBoTSGE4q3J1L7j09TCWjrB64NFb1TcJaubSnzXhEjwGdVQnj0s37taNDKzt</span><span class="codes-code">/</span><span class="codes-identifier">W9qxGxfrnLNa9crZ5TdJtHRNUqc0ns3uMzz0AS8</span><span class="codes-code">+</span><span class="codes-identifier">JxP4ZhsWAAAAAElFTkSuQmCC</span><span class="codes-code">&quot;) !</span><span class="codes-identifier">important</span><span class="codes-code">;</span>
<span class="codes-code">    </span><span class="codes-reserved">padding:</span><span class="codes-code"> </span><span class="codes-number">0</span><span class="codes-string">px</span><span class="codes-code"> </span><span class="codes-number">4</span><span class="codes-string">px</span><span class="codes-code"> !important</span><span class="codes-code">;</span>
<span class="codes-brackets">}</span>
<span class="codes-code"> </span>
<span class="codes-identifier">.g</span><span class="codes-code"> &gt; </span><span class="codes-identifier">.r</span><span class="codes-code"> &gt; </span><span class="codes-identifier">a.l</span><span class="codes-brackets">[</span><span class="codes-var">href</span><span class="codes-code">*=</span><span class="codes-quotes">&quot;</span><span class="codes-string">wikipedia.org</span><span class="codes-quotes">&quot;</span><span class="codes-brackets">]</span><span class="codes-special">:before</span><span class="codes-brackets">{</span>
<span class="codes-code">    </span><span class="codes-reserved">content:</span><span class="codes-code"> url(&quot;data:image/png</span><span class="codes-code">;</span><span class="codes-identifier">base64</span><span class="codes-code">,</span><span class="codes-identifier">iVBORw0KGgoAAAANSUhEUgAAABYAAAATCAMAAACjpw26AAAAA3NCSVQICAjb4U</span><span class="codes-code">/</span><span class="codes-identifier">gAAAAYFBMVEU</span><span class="codes-code">/</span><span class="codes-identifier">Pz9PT09aWlpnZ2dzc3N6enqCgoKKioqRkZGYmJicnJyjo6OoqKisrKywsLC2tra6urq</span><span class="codes-code">+</span><span class="codes-identifier">vr7CwsLHx8fLy8vQ0NDV1dXY2Njd3d3i4uLm5ubp6enu7u7y8vL4</span><span class="codes-code">+</span><span class="codes-identifier">Pj</span><span class="codes-code">///9</span><span class="codes-identifier">BAaonAAABB0lEQVQYlW3RSW7EIBAFUNO0zWDmYgbD</span><span class="codes-code">/</span><span class="codes-identifier">W8ZE2dahEUhHqikX2zz37U9G0V3cSVpTH55jNddrWIi6J198zWB3Ve79Dlax</span><span class="codes-code">/</span><span class="codes-identifier">f6cBz1bfEWp0</span><span class="codes-code">/</span><span class="codes-identifier">BGbvjxWPUub1exEHO0TgNBwrrdR</span><span class="codes-code">+9</span><span class="codes-identifier">FNRnrgETr7UmdDHA3aj2EMoVA4CUbF9sVZ2W0V5ct2CMUgwtTqO1nlrLJvgC2vATLy5XKqWnnE1O5L1bwd6LY66llVg6gKVSC85fi9U5Y6KYXB48WCn4vnqPFq</span><span class="codes-code">/</span><span class="codes-identifier">QsoesrVeGcYb0Z0odYoo1hCCtPfBB0BM</span><span class="codes-code">+</span><span class="codes-identifier">EJfDHQO0VVIS5L4mmAQkxqlRQvBjO3</span><span class="codes-code">/</span><span class="codes-identifier">m3c7TgbPipBjZP98ww8kpOY5DPccPrDciMXvSGh4AAAAASUVORK5CYII</span><span class="codes-code">=&quot;) !</span><span class="codes-identifier">important</span><span class="codes-code">;</span>
<span class="codes-code">    </span><span class="codes-reserved">padding:</span><span class="codes-code"> </span><span class="codes-number">0</span><span class="codes-string">px</span><span class="codes-code"> </span><span class="codes-number">4</span><span class="codes-string">px</span><span class="codes-code"> !important</span><span class="codes-code">;</span>
<span class="codes-brackets">}</span>
<span class="codes-code"> </span>
<span class="codes-identifier">.g</span><span class="codes-code"> &gt; </span><span class="codes-identifier">.r</span><span class="codes-code"> &gt; </span><span class="codes-identifier">a.l</span><span class="codes-brackets">[</span><span class="codes-var">href</span><span class="codes-code">$=</span><span class="codes-quotes">&quot;</span><span class="codes-string">.pdf</span><span class="codes-quotes">&quot;</span><span class="codes-brackets">]</span><span class="codes-special">:before</span><span class="codes-brackets">{</span>
<span class="codes-code">    </span><span class="codes-reserved">content:</span><span class="codes-code"> url(&quot;data:image/png</span><span class="codes-code">;</span><span class="codes-identifier">base64</span><span class="codes-code">,</span><span class="codes-identifier">iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAAA3NCSVQICAjb4U</span><span class="codes-code">/</span><span class="codes-identifier">gAAAAYFBMVEW5Gg7rBADAKBvpIwfCQSrsMB</span><span class="codes-code">/</span><span class="codes-identifier">JUDHsRi6zaWH4YB7iZEm6gXL5dDjgflq</span><span class="codes-code">/</span><span class="codes-identifier">mJDviWH9nWnUqqDAwMDGyMnwubDQ0tPrycHZ2Nfe3t7z29Xk5eXs7Ozx8fH19fX6</span><span class="codes-code">+</span><span class="codes-identifier">vv</span><span class="codes-code">////</span><span class="codes-identifier">F3ylvAAAANXRFWHRDb21tZW50AE9QVFBpWCB3ZWJEZXNpZ25lciAgaHR0cDovL3d3dy53ZWJ0ZWNoLmNvLmpwL</span><span class="codes-code">/</span><span class="codes-identifier">A4MtsAAAJKSURBVDiNdZSL1rIqEIZJBAo1JOUgh</span><span class="codes-code">+</span><span class="codes-identifier">H</span><span class="codes-code">+7/</span><span class="codes-identifier">IfrL6t5H5zUcseXmYGGFJ2QarKGaB8XpRGZB9TQCy</span><span class="codes-code">+</span><span class="codes-identifier">Vb99</span><span class="codes-code">/</span><span class="codes-identifier">CHfIP5xEvjQmn7AVOy6rtbabVfcnGvm</span><span class="codes-code">/</span><span class="codes-identifier">jnSG4oy8Rh3TbNO1443KqQUdBwfo5pnJFWJ</span><span class="codes-code">+</span><span class="codes-identifier">bD8AbSlzPj78cBhHNXkSgiXjpYWWgZSFHD</span><span class="codes-code">+</span><span class="codes-identifier">GKcJJwb</span><span class="codes-code">/53</span><span class="codes-identifier">l25GW6lWl33MGS44XjJjtWl</span><span class="codes-code">+</span><span class="codes-identifier">alFzWd53O4D0</span><span class="codes-code">/</span><span class="codes-identifier">XguzGye3Gh6F</span><span class="codes-code">/6</span><span class="codes-identifier">FHVlGTf855</span><span class="codes-code">/</span><span class="codes-identifier">k</span><span class="codes-code">/8</span><span class="codes-identifier">DBeu5rJrUpNS0S3Lea3cGQdpwlvdholpbD2dwgdgoRTFDDOEERnD1MITDE7OSsAoXGkeXWkMrrBI6</span><span class="codes-code">+</span><span class="codes-identifier">ivHE1gTiym1MTo8kCl</span><span class="codes-code">+</span><span class="codes-identifier">HhxAUzZDDgjCydHngyUe9k1Qjec</span><span class="codes-code">+/</span><span class="codes-identifier">DgieFSWdIKcsvmJ0cORhJmKkHM0r19H</span><span class="codes-code">+</span><span class="codes-identifier">M8tgWVUYYDLcgXm</span><span class="codes-code">/</span><span class="codes-identifier">LmKGTBAtiXzQjD7Zgt9yR8l5BgTbtnVgBHCFwSwUrKOv7kFWsdQIL8</span><span class="codes-code">/</span><span class="codes-identifier">SqyckLu5BKsj7JVdRb88Sfd</span><span class="codes-code">/</span><span class="codes-identifier">YCra4NFympP7YtCwgpiLcT8g7</span><span class="codes-code">+/3</span><span class="codes-identifier">nhCuEeg6BJfFuyXFNusiKenvg66r4cq4dMhxiSVk18ToViF8dBiZGRCksuQFr3ULJoglSRFrRqAowzpGg</span><span class="codes-code">/</span><span class="codes-identifier">ldONa3UgCSZawg07UOF461eySmqqWsHHnu9bp0hLKyDeuOG8g6Iiu42StHXFeoL8hwDraUFozwblyzwAAQ7HrBFF5GY6BxLAFvcIjbilemttz07ftgTuDbr9Ym7W0f</span><span class="codes-code">+4</span><span class="codes-identifier">RzxmBVX</span><span class="codes-code">+</span><span class="codes-identifier">EAQn4dhZuDjHEOu0rMnwb5Dw5GmV0</span><span class="codes-code">/</span><span class="codes-identifier">r</span><span class="codes-code">+</span><span class="codes-identifier">uEAAAAAElFTkSuQmCC</span><span class="codes-code">&quot;) !</span><span class="codes-identifier">important</span><span class="codes-code">;</span>
<span class="codes-code">    </span><span class="codes-reserved">padding:</span><span class="codes-code"> </span><span class="codes-number">0</span><span class="codes-string">px</span><span class="codes-code"> </span><span class="codes-number">4</span><span class="codes-string">px</span><span class="codes-code"> !important</span><span class="codes-code">;</span>
<span class="codes-brackets">}</span>
<span class="codes-code"> </span>
<span class="codes-identifier">.g</span><span class="codes-code"> &gt; </span><span class="codes-identifier">.r</span><span class="codes-code"> &gt; </span><span class="codes-identifier">a.l</span><span class="codes-brackets">[</span><span class="codes-var">href</span><span class="codes-code">$=</span><span class="codes-quotes">&quot;</span><span class="codes-string">.doc</span><span class="codes-quotes">&quot;</span><span class="codes-brackets">]</span><span class="codes-special">:before</span><span class="codes-brackets">{</span>
<span class="codes-code">    </span><span class="codes-reserved">content:</span><span class="codes-code"> url(&quot;data:image/png</span><span class="codes-code">;</span><span class="codes-identifier">base64</span><span class="codes-code">,</span><span class="codes-identifier">iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAAA3NCSVQICAjb4U</span><span class="codes-code">/</span><span class="codes-identifier">gAAAAYFBMVEUAR7sDYMYNcNSJYTtJdKQfgtwJkfKpcTk4kN2HiIE5pPNqmcNmq96UqLu3r4Jpxfy2t7jQwlfAv77HxsXh0mbLy8rR0NDC1ebu4mfY2Nje3t</span><span class="codes-code">/</span><span class="codes-identifier">m5ubs6</span><span class="codes-code">+</span><span class="codes-identifier">vy8vL4</span><span class="codes-code">+</span><span class="codes-identifier">Pj</span><span class="codes-code">///+</span><span class="codes-identifier">VSXRiAAAANXRFWHRDb21tZW50AE9QVFBpWCB3ZWJEZXNpZ25lciAgaHR0cDovL3d3dy53ZWJ0ZWNoLmNvLmpwL</span><span class="codes-code">/</span><span class="codes-identifier">A4MtsAAAItSURBVDiNdVSLsqowEFOkioDH2tr19P3</span><span class="codes-code">/</span><span class="codes-identifier">f3myi5e5Foy2zkjIblLYQxWULCil1C84yJ5jWpFTiiF9IW4uhPiV</span><span class="codes-code">+</span><span class="codes-identifier">FoQQohACD59IR6AYwecBWo0aY</span><span class="codes-code">+</span><span class="codes-identifier">Y67EbRqXUeB9HWcNcU95VHPA78HbGAnUONcZaNoogHnQ1</span><span class="codes-code">+</span><span class="codes-identifier">ONVjrcZiq9aY9hVPNxBPIJ4ltIvzi3tKdY6Tdh6rNuo5tvtep1uvlU8dtPUY7v151FPalT3oWfo3CpyPEp1RzUOnRqGbp4noNf</span><span class="codes-code">+</span><span class="codes-identifier">U7FMhOOLkdeCJXr9CuVDsbjsAz7kifx67nzfJzEV763W2hitXehXmJwaxUrWgGbAdhGmOsXoNIiNa09M4wVFNYzDxGHuKHpnHGs6Y8I0ztfL5TrfJ5MaIhSttayIbzydLoLraVcRPC5tKP48ns</span><span class="codes-code">/</span><span class="codes-identifier">fJ</span><span class="codes-code">/</span><span class="codes-identifier">BwKbeKwUuPGsLh5</span><span class="codes-code">/</span><span class="codes-identifier">eNh22JuUYSK5qMSz8rPIiN60CGYMY6lPYLyPvcEjMTxYxjT2yM79OUyjbHxbRjlhjj5WLZKPqVRkwFl5yllsg9MkGIvDvizfq2dF6IUtxqi</span><span class="codes-code">+</span><span class="codes-identifier">NcdOO2x8gSXh5HGSvLLKo7PTqutKTLo4rHVsklFt8qJkuo7TBMyJG0Cy</span><span class="codes-code">+4</span><span class="codes-identifier">syWGhICcE8PGOYezJ</span><span class="codes-code">+</span><span class="codes-identifier">ytIsdDMIFQ2K1jOZwRbYgcOC4ThyckSdI6xNMq4qHwS1HW5e483sMU86ZHyCBKQnM</span><span class="codes-code">+0</span><span class="codes-identifier">jpzdoj</span><span class="codes-code">/</span><span class="codes-identifier">LiGYZaJLpq1rlJaoF8b</span><span class="codes-code">/</span><span class="codes-identifier">Y7</span><span class="codes-code">/</span><span class="codes-identifier">QB</span><span class="codes-code">/</span><span class="codes-identifier">E9sotoiZI8kPxofJxMkZflDYmSEA3cxHXq</span><span class="codes-code">/</span><span class="codes-identifier">gEGTplX</span><span class="codes-code">+</span><span class="codes-identifier">MrHOQAAAABJRU5ErkJggg</span><span class="codes-code">==&quot;) !</span><span class="codes-identifier">important</span><span class="codes-code">;</span>
<span class="codes-code">    </span><span class="codes-reserved">padding:</span><span class="codes-code"> </span><span class="codes-number">0</span><span class="codes-string">px</span><span class="codes-code"> </span><span class="codes-number">4</span><span class="codes-string">px</span><span class="codes-code"> !important</span><span class="codes-code">;</span>
<span class="codes-brackets">}</span>
<span class="codes-code"> </span>
<span class="codes-code">/</span><span class="codes-identifier">*</span><span class="codes-code"> </span><span class="codes-identifier">AutoPagerize</span><span class="codes-code">使用者向け（使っていない人は要削除）</span><span class="codes-identifier">*</span><span class="codes-code">/</span>
<span class="codes-code"> </span>
<span class="codes-identifier">div</span><span class="codes-code"> + </span><span class="codes-identifier">hr</span><span class="codes-code"> + </span><span class="codes-identifier">p</span><span class="codes-brackets">{</span>
<span class="codes-reserved">text-align:</span><span class="codes-code"> </span><span class="codes-string">center</span><span class="codes-code">;</span>
<span class="codes-reserved">font-size:</span><span class="codes-code"> </span><span class="codes-number">130</span><span class="codes-string">%</span><span class="codes-code">;</span>
<span class="codes-reserved">font-weight:</span><span class="codes-code"> </span><span class="codes-string">bold</span><span class="codes-code">;</span>
<span class="codes-brackets">}</span>
<span class="codes-code"> </span>
<span class="codes-identifier">div#bsf</span><span class="codes-code"> + </span><span class="codes-identifier">p</span><span class="codes-code">,</span>
<span class="codes-identifier">table#nav</span><span class="codes-brackets">{</span>
<span class="codes-code">    </span><span class="codes-reserved">display:</span><span class="codes-code"> </span><span class="codes-string">none</span><span class="codes-code"> !important</span><span class="codes-code">;</span>
<span class="codes-brackets">}</span>
<span class="codes-code"> </span>
<span class="codes-code">}</span></code></pre></div>
<p>検索テキストボックスのフォーカスが外れちゃうと、選択している状態も外れてしまうのがすこし難点ですかね。</p>
<p><ins datetime="2008-06-08T21:56:46+09:00" class="block"><br />
この問題を解消するために少し書き直しました。お困りの方は新しい方の記述に書き換えてください。<br />
</ins></p>
<p>あと、当然と言えば当然ですがもう少し踏み込んだことをしようとすると、ユーザJS（<a href="http://firefox.geckodev.org/index.php?Greasemonkey" title="Greasemonkey - Mozilla Firefox まとめサイト">Greasemonkey</a>）に手を入れざるを得ませんね。各検索結果にfaviconつけるくらいはユーザCSSでやりたい感じもしますが<sup><a href="http://note.openvista.jp/2008/customizing-google-with-user-css/#footnote_0_469" id="identifier_0_469" class="footnote-link footnote-identifier-link" title="Another side of Liner Note &amp;#8211; CSSのattr(Attribute name)を変数的に使いたい">1</a></sup> 。</p>
<div class="update">
<h3 id="t2b61fc">更新履歴</h3>
<dl>
<dt>2008/09/17</dt>
<dd>関連検索の色を修正</dd>
<dd>[PDF]などの文字を消去</dd>
<dt>2008/08/21</dt>
<dd>GoogleのHTML構造の変化に対応（加えて構造変化に強くなるよう修正）</dd>
<dd>広告ブロック機能を強化</dd>
<dt>2008/07/31</dt>
<dd>GoogleのHTML構造の変化に対応</dd>
<dt>2008/07/24</dt>
<dd>GoogleのHTML構造の変化に対応</dd>
<dt>2008/06/19</dt>
<dd>Firefox3でテキスト入力欄の背景が表示されず原因もわからないので、とりあえず背景がない状態で調整してみました。一応、この変更でテキスト入力欄に与えたフォーカスが常にテキストの一番後ろになってしまう問題も解決しました</dd>
</div>
<h3 id="t77aa44">謝辞</h3>
<p>base64でエンコードしていますが、アイコンは以下のものを使用させていただきました。</p>
<ul>
<li><a href="http://mayosoft.net/studio/" title="Mayosoft®Studios">Mayosoft®Studios</a></li>
<li><a href="http://www.iconarchive.com/category/culture/no-patriot-icons-by-mayosoft.html" title="I'm not a Patriot Icons">I&#8217;m not a Patriot Icons</a></li>
<li><a href="http://www.iconarchive.com/category/object/medical-icons-by-klukeart.html" title="Medical Icons">Medical Icons</a></li>
</ul>
<ol class="footnotes"><li id="footnote_0_469" class="footnote"><a href="http://memo.openvista.jp/post/36586218/css-attr-attribute-name" title="Another side of Liner Note - CSSのattr(Attribute name)を変数的に使いたい">Another side of Liner Note &#8211; CSSのattr(Attribute name)を変数的に使いたい</a></li></ol><img src="http://note.openvista.jp/?ak_action=api_record_view&id=469&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://note.openvista.jp/2008/customizing-google-with-user-css/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>NCID/BKIDをISBNに変換ーMaking OPAC 2.0</title>
		<link>http://note.openvista.jp/2008/ncid2isbn/</link>
		<comments>http://note.openvista.jp/2008/ncid2isbn/#comments</comments>
		<pubDate>Sun, 23 Mar 2008 12:14:36 +0000</pubDate>
		<dc:creator>hash</dc:creator>
				<category><![CDATA[ツールの制作]]></category>
		<category><![CDATA[図書館]]></category>

		<guid isPermaLink="false">http://note.openvista.jp/265/</guid>
		<description><![CDATA[国立情報学研究所のシステムで使われているNCIDをお馴染みのISBNに変換するスクリプトを作った]]></description>
			<content:encoded><![CDATA[<p>久々に図書館システムの小ネタ、そしてすごくニッチな話です。</p>
<p>そろそろ<a href="http://webcatplus.nii.ac.jp/" title="Webcat Plus">Webcat Plus</a>と各種サービスのマッシュアップを作りは滋養かと思ったのだけど、そこで壁になるのが雑誌識別子の問題。</p>
<p>というのは、書籍などを特定するための識別子を使って各書籍を特定していくわけなのだけど、それが各サービス毎に違ってくるんですよね。</p>
<dl>
<dt>ISBN（とISSN）</dt>
<dd><abbr title="International Standard Book Number">ISBN</abbr>=<a href="http://ja.wikipedia.org/wiki/ISBN" title="ISBN - Wikipedia">国際標準図書番号</a>はおそらく一番有名な書籍の識別子。各国のAmazonもISBNが付いている図書はそれを識別子として用いている（ただし旧ISBNといわれる10桁ISBN）。いわゆる書籍JANコードに同じ。</dd>
<dt>NCID</dt>
<dd><abbr title="National Center ID">NCID</abbr>は<a href="http://www.nii.ac.jp/" title="国立情報学研究所">国立情報学研究所</a>が運用している総合目録データベースにおける雑誌書誌IDのこと。ISBNがついていないものでもこれなら特定できる。</dd>
<dt>BKID</dt>
<dd><abbr title="BOOKデータベース">BKID</abbr>は日外アソシエーツ（株）など4社が著作権を持つデータベースで使われているID。</dd>
<dt>NBN</dt>
<dd><abbr title="National Bibliography Numbers">NBN</abbr>は各国の国立図書館などが書籍につけているID。日本では全国書誌番号と呼ばれ、国立国会図書館が管理している。今回、出てこないので詳しくは参考リンク先の神崎さんの説明に譲る。</dd>
</dl>
<p>一例を挙げるとこんな感じです。</p>
<p>それで、先に挙げたWebcatPlusは各書籍の詳細ページにはNCID/BKIDとISBNを使っているようなのだけど、システム標準の識別子にはNCID/BKIDを使っているらしく、検索一覧ページではこれしか取得できません（詳しくは参考リンク先で）</p>
<p>つまり、Amazonなどの民間ウェブサービスはISBNがスタンダードということもあって、WebcatPlusのサービスからAmazonなんかにバトンをつなぎたい場合はこれを変換してやらなくちゃいけないわけです。</p>
<p>ということで、指定のNCID/BKIDをISBNに変換するコンバータを仕掛けてみました。変換にはWebcatPlusに問い合わせしているため、毎回お世話になるのもなんなので、リクエストが来たNCID/BKIDはSQLiteにデータベースとしてキャッシュするようにしています<sup><a href="http://note.openvista.jp/2008/ncid2isbn/#footnote_0_388" id="identifier_0_388" class="footnote-link footnote-identifier-link" title="1万件くらいならいいけど、100万くらいになるとさすがにMySQLにリプレースした方がよいかも">1</a></sup> 。ちなみに、これは既に<a href="http://d.hatena.ne.jp/myrmecoleon/20070314" title="2007-03-14 - Myrmecoleon in Paradoxical Library. はてな新館">id:myrmecoleonさん</a>が一年前にやってらしたそうです。</p>
<dl>
<dt>使用例</dt>
<dd>
<ul>
<li><a href="http://tech.openvista.jp/webcat/conv/?NCID=BA82132798">NCID &#8220;BA82132798&#8243;をISBNに変換</a></li>
<li><a href="http://tech.openvista.jp/webcat/conv/?jBKID=B0701583">BKID &#8220;B0701583&#8243;をISBNに変換</a></li>
</ul>
</dd>
</dl>
<p>ご覧のように、引数でNCID/BKIDを指定してやると旧ISBN（10桁）と新ISBN（13桁）などを書いたXMLが返ってくると思います。</p>
<p>一応スクリプトも公開しておきます。</p>
<dl class="download">
<dt>ダウンロード</dt>
<dd><a href="http://tech.openvista.jp/webcat/conv/conv.zip">NCID/BKID⇔ISBN変換スクリプト</a></dd>
</dl>
<p class="information">ちなみに、引数の詳細はNCID, jBKID, eBKIDの3種類があります。jBKIDは上記で言うBKID、eBKIDは外国の書籍に使われるIDのようで、<a href="http://webcatplus-equal.nii.ac.jp/libportal/equalTop.html" title="Webcat Plus 一致検索">Webcat Plus</a>のクエリに使われるのと同様の物です。</p>
<p>次は<a href="http://d.hatena.ne.jp/myrmecoleon/20070701/1183259720" title="図書館がらみのWebサービスを作るためのデータリストとかって需要あるのかね？ - Myrmecoleon in Paradoxical Library. はてな新館">図書館がらみのWebサービスを作るためのデータリスト</a>かなぁ。大学図書館でのそれは<a href="http://d.hatena.ne.jp/myrmecoleon/20070305/1173104402" title="所蔵図書館マップ（仮）　欲しい本がどこの図書館にあるかが一目でわかる方法 - Myrmecoleon in Paradoxical Library. はてな新館">既にID:myrmecoleonさんがやってらっしゃる</a>ので、大丈夫かもしれないけど、公共図書館は恐ろしく手作業になりそうだな悪寒。</p>
<p><a href="http://note.openvista.jp/196/" title="Liner Note - セマンティックWikiについて">メタデータWiki</a>を立てて、図書館情報学関係ブログの人たちのお手を借りてみんなで作れば、できそうという感じもする。しかし、と言いつつ去年の秋頃からずっとメタデータWikiの実験をやっているんだけど、まともに動いてないしそろそろ手動でなんとかするかな。</p>
<h3 id="ta4f7d1">参考リンク</h3>
<ul>
<li><a href="http://webcatplus.nii.ac.jp/about/data.html" title="Webcat Plusとは／収録データについて">Webcat Plusとは／収録データについて</a></li>
<li><a href="http://d.hatena.ne.jp/myrmecoleon/20070314/1173889497" title="所蔵館マップの裏側更新とXML出力 - Myrmecoleon in Paradoxical Library. はてな新館">所蔵館マップの裏側更新とXML出力 &#8211; Myrmecoleon in Paradoxical Library. はてな新館</a></li>
<li><a href="http://alisato.web2.jp/diary/200301c.html#28_t1" title="2003年 01月 下旬：Alisato's 本買い日誌">2003年 01月 下旬：Alisato&#8217;s 本買い日誌</a></li>
<li><a href="http://private.ceek.jp/archives/003371.html" title="書籍と雑誌を特定するための方法とか - Ceekz Logs">書籍と雑誌を特定するための方法とか &#8211; Ceekz Logs</a></li>
<li><a href="http://d.hatena.ne.jp/natu_n/20070327/1174993589" title="続き物（シリーズ）の取得　その２ - natu_nの日記">続き物（シリーズ）の取得　その２ &#8211; natu_nの日記</a></li>
<li><a href="http://www.kanzaki.com/memo/2004/02/27-1" title="ちょっとしたメモ - 書籍の識別子と全国書誌番号">ちょっとしたメモ &#8211; 書籍の識別子と全国書誌番号</a></li>
<li><a href="http://www.kanzaki.com/memo/2004/03/09-1" title="ちょっとしたメモ - NBNあるいは書籍の識別">ちょっとしたメモ &#8211; NBNあるいは書籍の識別</a></li>
<li><a href="http://www.kanzaki.com/memo/2004/02/28-2" title="ちょっとしたメモ - 13桁のISBN">ちょっとしたメモ &#8211; 13桁のISBN</a></li>
</ul>
<ol class="footnotes"><li id="footnote_0_388" class="footnote">1万件くらいならいいけど、100万くらいになるとさすがにMySQLにリプレースした方がよいかも</li></ol><img src="http://note.openvista.jp/?ak_action=api_record_view&id=388&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://note.openvista.jp/2008/ncid2isbn/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>（補足）Amazonアソシエイト購入者情報の取得について</title>
		<link>http://note.openvista.jp/2008/guide-for-getting-market-data/</link>
		<comments>http://note.openvista.jp/2008/guide-for-getting-market-data/#comments</comments>
		<pubDate>Tue, 18 Mar 2008 06:07:08 +0000</pubDate>
		<dc:creator>hash</dc:creator>
				<category><![CDATA[ウェブログツール]]></category>
		<category><![CDATA[ツールの制作]]></category>

		<guid isPermaLink="false">http://note.openvista.jp/264/</guid>
		<description><![CDATA[Amazon Linakgeプラグインの導入、および購入者情報の表示をする方法があまりにも不親切だったので補足してみる]]></description>
			<content:encoded><![CDATA[<p><a href="http://note.openvista.jp/248/" title="Liner Note - Amazon.co.jpのレポートをもっと簡単にゲットできるようにした：Amazon Linkageプラグイン">Amazon.co.jpのレポートをもっと簡単にゲットできるようにした：Amazon Linkageプラグイン</a>で、以下のようなコメントをいただきました。</p>
<blockquote cite="http://note.openvista.jp/248/" title="Liner Note - Amazon.co.jpのレポートをもっと簡単にゲットできるようにした：Amazon Linkageプラグイン">
<p ap:preloaded="true" xmlns:ap="http://www.remus.dti.ne.jp/~a-satomi/ap">え～と、勉強不足なのは承知で、申し訳ないですが、akiyan.comさんのソースだけではないですよね？<br />
Amazon Linkageプラグインとの併用、という感じでしょうか？</p>
<p ap:preloaded="true" xmlns:ap="http://www.remus.dti.ne.jp/~a-satomi/ap">Amazon LinkageプラグインにもReadme.txtをと書いてあるのですが、それも見当たりませんし、<br />
どのファイルをどこにUPして利用すれば良いのか・・・混乱してしまいました。</p>
<p class="citation"><a href="http://note.openvista.jp/248/" title="Liner Note - Amazon.co.jpのレポートをもっと簡単にゲットできるようにした：Amazon Linkageプラグイン"><cite>Liner Note &#8211; Amazon.co.jpのレポートをもっと簡単にゲットできるようにした：Amazon Linkageプラグイン</cite></a></p>
</blockquote>
<p>確かにドキュメントが無い（バージョンアップの際に間違って消しちゃったのだと思うけど）‥。最初に書いたのは粗末な物で、ユーザに超不親切だったと思うので、きちんと導入に関するドキュメントを書いておこうと思います。</p>
<h3 id="tc30da3">Amazon Linkageプラグインの設置</h3>
<p>まず、購入者情報を取得するにはAmazon Linkageプラグインの導入（つまり併用）が必須です。ただし、このプラグインは最近WordPressのプラグインとしてだけでなく、単体のPHPスクリプトとしても振る舞えるように改造している<sup><a href="http://note.openvista.jp/2008/guide-for-getting-market-data/#footnote_0_385" id="identifier_0_385" class="footnote-link footnote-identifier-link" title="そのせいで、ややコードが複雑になってはいるんですが">1</a></sup> ので、WordPressを使っていない場合でもご使用いただけます。</p>
<p>今回は、Amazon Linkageプラグインを単体のPHPスクリプトとして導入していくところを書いてみます。</p>
<p>まず、<a href="http://note.openvista.jp/187/#t77ef53" title="Liner Note - Amazon LinkageプラグインーAmazonアソシエイト for WordPress">Amazon LinkageプラグインーAmazonアソシエイト for WordPress</a>からAmazon Linkageプラグインをダウンロードしてください。</p>
<p>次に初期設定です。始めに、フォルダを解答した直下にある amazon.php ファイルを開き、冒頭でAmazonアソシエイトIDとサブスクリプションIDの設定箇所があるので、記入してください。次に、report フォルダの中にある conf.inc.php ファイルをエディタで開き、Amazon アソシエイトのID/パスワードを入力してください。これで初期設定は終了です。</p>
<div class="source-code"><div><img src="http://note.openvista.jp/wp-content/plugins/coolcode/code.png" width="16" height="16" alt="" /> <em>PHPソースコード</em> <span class="weaken">（/amazon.php）</span></div><pre class="source-code"><code><span class="codes-code">// Amazon.co.jp アソシエイトID</span>
<span class="codes-code">var $AssociatesID = &quot;ASSOCIATEID-22&quot;;</span>
<span class="codes-code">// Amazon.co.jp サブスクリプションID</span>
<span class="codes-code">var $SubscriptionID = &quot;SubscritionID HERE&quot;;</span></code></pre></div>
<div class="source-code"><div><img src="http://note.openvista.jp/wp-content/plugins/coolcode/code.png" width="16" height="16" alt="" /> <em>PHPソースコード</em> <span class="weaken">（/report/conf.inc.php）</span></div><pre class="source-code"><code><span class="codes-code">// アカウントのEメールアドレス</span>
<span class="codes-code">$this-&gt;email    = &quot;mail@example.jp&quot;;</span>
<span class="codes-code"> </span>
<span class="codes-code">// アカウントのパスワード</span>
<span class="codes-code">$this-&gt;password = &quot;password&quot;;</span></code></pre></div>
<p>このプラグインの配置場所ですが、私はWordPressのプラグインとしても使っているので、今回はWordPressのプラグインのフォルダで書いていますが、別に場所を限定するわけではありません。好きな場所に配置してください。</p>
<h3 id="tc61996">サンプルアプリの導入</h3>
<p>そして、今回は購入者情報を表示するサンプルアプリとして、<a href="http://tech.openvista.jp/tmp/amazon/4873113423" title="Rasmus Lerdorf, Kevin Tatroe『プログラミングPHP 第2版』：Amazon.co.jp 商品情報（非公式）">Amazon.co.jp 商品情報表示サービス</a>の導入してみたいと思います。</p>
<p>まず、以下からスクリプトをダウンロードします。</p>
<dl class="download">
<dt>ダウンロード</dt>
<dd><a href="http://tech.openvista.jp/tmp/amazon/amazon.zip">Amazon.co.jp 商品情報表示スクリプト</a></dd>
</dl>
<p>そしてフォルダ直下の index.php を開き、以下の2行でAmazon Linkageプラグインの場所を指定してやります。まず、1行目でAmazon Linkageプラグインがあるフォルダを指定します。2行目は実際のスクリプトの場所ですが、初期設定で問題はありませんのでそのままで結構です。</p>
<div class="source-code"><div><img src="http://note.openvista.jp/wp-content/plugins/coolcode/code.png" width="16" height="16" alt="" /> <em>PHPソースコード</em> <span class="weaken">（/index.php）</span></div><pre class="source-code"><code><span class="codes-code">$path = &quot;../../../blog/wp-content/plugins/amazon_linkage/&quot;;</span>
<span class="codes-code">require_once &quot;{$path}amazon.php&quot;;</span></code></pre></div>
<p>フォルダの場所は、必ず<code>/</code>で始まらないようにし、<code>/</code>で終わるようにしてください。この辺、間違えるとうまく動作しませんのでご注意を。</p>
<p>この状態でファイル群をアップロードし、ASINをつけてアクセスすれば（例：<samp>http://example.jp/amazon/4873113423</samp>）、商品情報および購入者情報が表示されるはずです。なお、さくらインターネットなど mod_rewriteが使えないサーバでは、.htaccessファイルを削除し、<samp>http://example.jp/amazon/index.php?asin=4873113423</samp>というようなURLでアクセスしてください。</p>
<h3 id="t08fb9a">購入者情報の定期更新</h3>
<p>ところで、このスクリプトはAmazonへのサーバ負担を減らすために、購入者情報を取得した後、DBとして蓄積し、Amazon Linakgeプラグインからの要求があったときに購入者情報を返すという方法をとっています（つまり、akiyan.comさんとは違うやり方です）</p>
<p>で、この購入者情報のデータなのですが、これは手動でAmazon Linkageプラグインにある update/update.php ファイルを叩かないと更新されません。</p>
<p>しかし、それではあんまり面倒なので、うちではcronによる自動化をしてています。cron機能はXREA / CORESERVER、あるいはさくらインターネットなどのサーバでは使えるようです。</p>
<p>例えば、以下のようなシェルスクリプトを書きます。</p>
<div class="source-code"><div><img src="http://note.openvista.jp/wp-content/plugins/coolcode/code.png" width="16" height="16" alt="" /> <em>ソースコード</em></div><pre class="source-code"><code>#!/bin/sh

# レポートをゲットして出力する
/usr/local/bin/php /path/to/home/blog/wp-content/plugins/amazon_linkage/report/report.php
# ルートに作られたレポートを指定のフォルダに移動
mv /virtual/vistawalk/report.xml /path/to/home/blog/wp-content/plugins/amazon_linkage/report/report.xml
# XMLを基にデータベースをアップデートする
/usr/local/bin/php /path/to/home/blog/wp-content/plugins/amazon_linkage/report/update.php

exit</code></pre></div>
<p>これをreport.shとして保存し、コントロールパネルで毎朝8時に定期実行するように設定しています（Amazonのレポートは早朝に更新されるようなので）。</p>
<p><a href="http://note.openvista.jp/download/2008/03/cron.png" rel="lightbox" title="CRONジョブの設定"><img src="http://note.openvista.jp/download/2008/03/cron.thumbnail.png" width="250" height="55" alt="CRONジョブの設定" /></a></p>
<p>こんなもんでしょうか。もし、これで動作しないと言うようでしたら、コメントで教えていただけると助かります。</p>
<ol class="footnotes"><li id="footnote_0_385" class="footnote">そのせいで、ややコードが複雑になってはいるんですが</li></ol><img src="http://note.openvista.jp/?ak_action=api_record_view&id=385&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://note.openvista.jp/2008/guide-for-getting-market-data/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>PHP汎用スクレイピングライブラリを作ってみた</title>
		<link>http://note.openvista.jp/2008/php-scraing-library/</link>
		<comments>http://note.openvista.jp/2008/php-scraing-library/#comments</comments>
		<pubDate>Sun, 10 Feb 2008 08:50:55 +0000</pubDate>
		<dc:creator>hash</dc:creator>
				<category><![CDATA[ウェブデザイン]]></category>
		<category><![CDATA[ツールの制作]]></category>
		<category><![CDATA[プログラミング技術絡み]]></category>

		<guid isPermaLink="false">http://note.openvista.jp/251/</guid>
		<description><![CDATA[ページから必要な部分だけをXPath式で抽出するPHP製汎用スクレイピングライブラリを作った]]></description>
			<content:encoded><![CDATA[<p>いままでスクレイピングを使ったサービス（<a href="http://note.openvista.jp/249/" title="Liner Note - iPod touch専用 料理レシピ検索サービスを作った">レシピ検索</a>、<a href="http://note.openvista.jp/241/" title="Liner Note - 書籍在庫一括検索サービス ver 0.2ーMaking OPAC 2.0 (2)">書籍在庫一括検索</a>）を作ってきましたが、そこで使ったものを簡単に再利用できるように、PHP5で使える汎用スクレイピングライブラリを作ってみました。</p>
<p>スクレイピング結果の表示はHTMLとXMLとRSS 2.0に対応しています。動作させるにはPEAR::HTTP Clientが必要です。</p>
<dl>
<dt>表示サンプル</dt>
<dd><a href="http://tech.openvista.jp/scraping/PHP.html" title="PHP - Google 検索">PHPをGoogleで検索した結果</a>（HTML）</dd>
<dd><a href="http://tech.openvista.jp/scraping/PHP.xml" title="PHP - Google 検索">PHPをGoogleで検索した結果</a>（XML）</dd>
<dd><a href="http://tech.openvista.jp/scraping/PHP.rss" title="PHP - Google 検索">PHPをGoogleで検索した結果</a>（RSS 2.0）</dd>
</dl>
<p>サンプルではGoogleの検索結果のタイトルと説明を拾って表示する処理をしています。コントローラー部分はこんな感じ。</p>
<div class="source-code"><div><img src="http://note.openvista.jp/wp-content/plugins/coolcode/code.png" width="16" height="16" alt="" /> <em>PHPソースコード</em></div><pre class="source-code"><code><span class="codes-inlinetags">&lt;?php</span>
<span class="codes-reserved">require_once</span><span class="codes-code"> </span><span class="codes-quotes">&quot;</span><span class="codes-string">HTTP/Client.php</span><span class="codes-quotes">&quot;</span><span class="codes-code">;</span>
<span class="codes-reserved">require_once</span><span class="codes-code"> </span><span class="codes-quotes">&quot;</span><span class="codes-string">scraper.Class.php</span><span class="codes-quotes">&quot;</span><span class="codes-code">;</span>
<span class="codes-code"> </span>
<span class="codes-comment">// インスタンスを生成</span>
<span class="codes-var">$scraper</span><span class="codes-code"> = </span><span class="codes-reserved">new</span><span class="codes-code"> </span><span class="codes-identifier">WebScraper</span><span class="codes-brackets">(</span><span class="codes-quotes">&quot;</span><span class="codes-string">http://www.google.co.jp/search?q=</span><span class="codes-quotes">&quot;</span><span class="codes-code">, </span><span class="codes-quotes">&quot;</span><span class="codes-string">UTF-8</span><span class="codes-quotes">&quot;</span><span class="codes-brackets">)</span><span class="codes-code">;</span>
<span class="codes-code"> </span>
<span class="codes-comment">// キーワードが入力されている場合はゲット</span>
<span class="codes-reserved">if</span><span class="codes-code"> </span><span class="codes-brackets">(</span><span class="codes-code">!</span><span class="codes-reserved">empty</span><span class="codes-brackets">(</span><span class="codes-var">$_GET</span><span class="codes-brackets">[</span><span class="codes-quotes">&quot;</span><span class="codes-string">q</span><span class="codes-quotes">&quot;</span><span class="codes-brackets">])){</span>
<span class="codes-code">  </span>
<span class="codes-code">  </span><span class="codes-comment">// XMLに変換して格納</span>
<span class="codes-code">  </span><span class="codes-var">$scraper</span><span class="codes-code">-&gt;</span><span class="codes-identifier">retrieve</span><span class="codes-brackets">()</span><span class="codes-code">;</span>
<span class="codes-code">  </span><span class="codes-comment">// 要素を抽出して、変数に代入</span>
<span class="codes-code">  </span><span class="codes-var">$titles</span><span class="codes-code"> = </span><span class="codes-var">$scraper</span><span class="codes-code">-&gt;</span><span class="codes-identifier">pickUpElement</span><span class="codes-brackets">(</span><span class="codes-quotes">'</span><span class="codes-string">//a[@class=&quot;l&quot;]</span><span class="codes-quotes">'</span><span class="codes-brackets">)</span><span class="codes-code">;</span>
<span class="codes-code">  </span><span class="codes-var">$links</span><span class="codes-code">  = </span><span class="codes-var">$scraper</span><span class="codes-code">-&gt;</span><span class="codes-identifier">pickUpElement</span><span class="codes-brackets">(</span><span class="codes-quotes">'</span><span class="codes-string">//a[@class=&quot;l&quot;]/@href</span><span class="codes-quotes">'</span><span class="codes-brackets">)</span><span class="codes-code">;</span>
<span class="codes-code">  </span><span class="codes-var">$descs</span><span class="codes-code">  = </span><span class="codes-var">$scraper</span><span class="codes-code">-&gt;</span><span class="codes-identifier">pickUpElement</span><span class="codes-brackets">(</span><span class="codes-quotes">'</span><span class="codes-string">//div[@class=&quot;std&quot;]</span><span class="codes-quotes">'</span><span class="codes-brackets">)</span><span class="codes-code">;</span>
<span class="codes-code">  </span><span class="codes-var">$count</span><span class="codes-code">  = </span><span class="codes-identifier">count</span><span class="codes-brackets">(</span><span class="codes-var">$titles</span><span class="codes-brackets">)</span><span class="codes-code">;</span>
<span class="codes-code">  </span><span class="codes-comment">// キーワードをUTF-8に戻す</span>
<span class="codes-code">  </span><span class="codes-var">$scraper</span><span class="codes-code">-&gt;</span><span class="codes-identifier">keyword</span><span class="codes-code"> = </span><span class="codes-var">$scraper</span><span class="codes-code">-&gt;</span><span class="codes-identifier">convertKeyword</span><span class="codes-brackets">()</span><span class="codes-code">;</span>
<span class="codes-code">  </span>
<span class="codes-brackets">}</span>
<span class="codes-code"> </span>
<span class="codes-reserved">switch</span><span class="codes-code"> </span><span class="codes-brackets">(</span><span class="codes-var">$_GET</span><span class="codes-brackets">[</span><span class="codes-quotes">&quot;</span><span class="codes-string">type</span><span class="codes-quotes">&quot;</span><span class="codes-brackets">]){</span>
<span class="codes-code">  </span><span class="codes-reserved">case</span><span class="codes-code"> </span><span class="codes-quotes">&quot;</span><span class="codes-string">html</span><span class="codes-quotes">&quot;</span><span class="codes-code">: </span><span class="codes-reserved">require</span><span class="codes-brackets">(</span><span class="codes-quotes">&quot;</span><span class="codes-string">template.html.php</span><span class="codes-quotes">&quot;</span><span class="codes-brackets">)</span><span class="codes-code">; </span><span class="codes-reserved">break</span><span class="codes-code">;</span>
<span class="codes-code">  </span><span class="codes-reserved">case</span><span class="codes-code"> </span><span class="codes-quotes">&quot;</span><span class="codes-string">xml</span><span class="codes-quotes">&quot;</span><span class="codes-code"> : </span><span class="codes-reserved">require</span><span class="codes-brackets">(</span><span class="codes-quotes">&quot;</span><span class="codes-string">template.xml.php</span><span class="codes-quotes">&quot;</span><span class="codes-brackets">)</span><span class="codes-code">;  </span><span class="codes-reserved">break</span><span class="codes-code">;</span>
<span class="codes-code">  </span><span class="codes-reserved">case</span><span class="codes-code"> </span><span class="codes-quotes">&quot;</span><span class="codes-string">rss</span><span class="codes-quotes">&quot;</span><span class="codes-code"> : </span><span class="codes-reserved">require</span><span class="codes-brackets">(</span><span class="codes-quotes">&quot;</span><span class="codes-string">template.rss.php</span><span class="codes-quotes">&quot;</span><span class="codes-brackets">)</span><span class="codes-code">;  </span><span class="codes-reserved">break</span><span class="codes-code">;</span>
<span class="codes-code">  </span><span class="codes-reserved">default</span><span class="codes-code">    : </span><span class="codes-reserved">require</span><span class="codes-brackets">(</span><span class="codes-quotes">&quot;</span><span class="codes-string">template.html.php</span><span class="codes-quotes">&quot;</span><span class="codes-brackets">)</span><span class="codes-code">; </span><span class="codes-reserved">break</span><span class="codes-code">;</span>
<span class="codes-brackets">}</span>
<span class="codes-code"> </span>
<span class="codes-inlinetags">?&gt;</span></code></pre></div>
<p>スクレイピングするURLは動的なもの（検索語などクエリが混ざっているもの）と静的なものに分かれると思います。このライブラリでは、動的なURLの場合にフォームから検索できるようにするため、これらを別々に処理しています。</p>
<pre class="command">
// インスタンスを生成
$scraper = new WebScraper("http://www.google.co.jp/search?q=", "UTF-8");
</pre>
<p>今回はGoogleに検索語を投げる処理なので、動的なURLにあたります。もし、静的なURLであれば、インスタンスを生成する際の3番目の引数に<code>true</code>を指定してください。</p>
<p>インスタンスを生成する際に、検索語を投げるURL（もしくは静的なURL）とその文字エンコーディングを指定します。</p>
<pre class="command">
// XMLに変換して格納（その際に不必要なタグを除去）
$scraper->retrieve("<\/?b>");
</pre>
<p>指定されたURLをゲットしてSimpleXML Objectに変換します。</p>
<p><ins datetime="2008-03-12T17:26:49+09:00" class="block"><br />
以下の手順は、バージョンアップにより不要になりました。<br />
</ins></p>
<p><del datetime="2008-03-12T17:26:49+09:00" class="block"><br />
その際、タグがネストしているとうまくいかない場合があるので、不必要な要素を消去します。</p>
<p>たとえば、<code>&lt;a href="http://example.com"&gt;あれこれ&lt;em&gt;に加えて&lt;/em&gt;どれこれ&lt;/a&gt;</code>というコードだとa要素の中身を指定しても、<samp>あれこれどれこれ</samp>という風に、em要素の中身がすっ飛んでしまうため、em要素を消しておく必要があります。</p>
<p>よって、ここでHTMLから消去する要素を正規表現で指定しておきます。<br />
</del></p>
<pre class="command">
// 要素を抽出して、変数に代入
$titles = $scraper->pickUpElement('//a[@class="l"]');
$links  = $scraper->pickUpElement('//a[@class="l"]/@href');
$descs  = $scraper->pickUpElement('//div[@class="std"]');
$count  = count($titles);
</pre>
<p>さきほど、ゲットしたXMLからゲットしたい部分を抽出して変数に格納します。抽出する部分はXPath式で指定してください。ゲットに成功していれば、文字列が配列で格納されます（CSSはわかるけど、XPathシラネって人は<a href="http://piro.sakura.ne.jp/latest/blosxom/mozilla/xul/2007-09-13_selector-to-xpath.htm" title="Latest topics &gt; CSS3セレクタとXPathでの表現の対応表 - outsider reflex">Latest topics &gt; CSS3セレクタとXPathでの表現の対応表 &#8211; outsider reflex</a>を参照してみてください）。</p>
<p>格納された文字列は、ビュー部分でたとえば以下のように出力します（例はHTML）</p>
<div class="source-code"><div><img src="http://note.openvista.jp/wp-content/plugins/coolcode/code.png" width="16" height="16" alt="" /> <em>PHPソースコード</em></div><pre class="source-code"><code><span class="codes-inlinetags">&lt;?php</span>
<span class="codes-code">  </span>
<span class="codes-code">  </span><span class="codes-comment">// 設定に失敗していたら離脱</span>
<span class="codes-code">  </span><span class="codes-reserved">if</span><span class="codes-code"> </span><span class="codes-brackets">(</span><span class="codes-var">$scraper</span><span class="codes-code">-&gt;</span><span class="codes-identifier">isError</span><span class="codes-brackets">()</span><span class="codes-code"> != </span><span class="codes-reserved">false</span><span class="codes-brackets">){</span>
<span class="codes-code">    </span>
<span class="codes-code">    </span><span class="codes-var">$scraper</span><span class="codes-code">-&gt;</span><span class="codes-identifier">isError</span><span class="codes-brackets">()</span><span class="codes-code">;</span>
<span class="codes-code">    </span>
<span class="codes-code">  </span><span class="codes-brackets">}</span><span class="codes-code"> </span><span class="codes-reserved">else</span><span class="codes-brackets">{</span>
<span class="codes-code">    </span>
<span class="codes-code">    </span><span class="codes-reserved">for</span><span class="codes-code"> </span><span class="codes-brackets">(</span><span class="codes-var">$i</span><span class="codes-code">=</span><span class="codes-number">0</span><span class="codes-code">; </span><span class="codes-var">$i</span><span class="codes-code">&lt;</span><span class="codes-var">$count</span><span class="codes-code">; </span><span class="codes-var">$i</span><span class="codes-code">++</span><span class="codes-brackets">){</span>
<span class="codes-code">      </span><span class="codes-var">$msg</span><span class="codes-code"> .= </span><span class="codes-quotes">&quot;</span><span class="codes-string">&lt;dt&gt;</span><span class="codes-quotes">&quot;</span><span class="codes-code">.</span><span class="codes-var">$titles</span><span class="codes-brackets">[</span><span class="codes-var">$i</span><span class="codes-brackets">]</span><span class="codes-code">.</span><span class="codes-quotes">&quot;</span><span class="codes-string">&lt;/dt&gt;</span><span class="codes-quotes">&quot;</span><span class="codes-code">;</span>
<span class="codes-code">      </span><span class="codes-var">$msg</span><span class="codes-code"> .= </span><span class="codes-quotes">&quot;</span><span class="codes-string">&lt;dd&gt;</span><span class="codes-quotes">&quot;</span><span class="codes-code">.</span><span class="codes-var">$descs</span><span class="codes-brackets">[</span><span class="codes-var">$i</span><span class="codes-brackets">]</span><span class="codes-code">.</span><span class="codes-quotes">&quot;</span><span class="codes-string">&lt;/dd&gt;</span><span class="codes-quotes">&quot;</span><span class="codes-code">;</span>
<span class="codes-code">    </span><span class="codes-brackets">}</span>
<span class="codes-code">    </span>
<span class="codes-code">    </span><span class="codes-reserved">echo</span><span class="codes-code"> </span><span class="codes-quotes">&quot;</span><span class="codes-string">&lt;dl&gt;</span><span class="codes-quotes">&quot;</span><span class="codes-code">. </span><span class="codes-var">$msg</span><span class="codes-code"> .</span><span class="codes-quotes">&quot;</span><span class="codes-string">&lt;/dl&gt;</span><span class="codes-quotes">&quot;</span><span class="codes-code">;</span>
<span class="codes-code">    </span>
<span class="codes-code">  </span><span class="codes-brackets">}</span>
<span class="codes-inlinetags">?&gt;</span></code></pre></div>
<p>PHPフレームワーク（rhacoとか）にはスクレイピングライブラリがくっついているし、マイナーだけど<a href="http://www.gac.jp/article/index.php?stats=question&amp;category=11&amp;id=9181&amp;command=msg" title="GAC なぜなにGAC-&gt;PHP">SNOOPYというスクレイピングライブラリ</a>もありますから、車輪の再発明には違いないんですけどね。perlやrubyみたいにもうちょっとこの手のライブラリが充実していってほしいもんです。</p>
<h3 id="t63271b">ダウンロード</h3>
<dl class="download">
<dt>ダウンロード</dt>
<dd><a href="http://tech.openvista.jp/scraping/scraping.zip">汎用スクレイピングライブラリ</a></dd>
<dt>ライセンス</dt>
<dd><a href="http://ja.wikipedia.org/wiki/BSD%E3%83%A9%E3%82%A4%E3%82%BB%E3%83%B3%E3%82%B9" rel="copyright">修正BSDライセンス</a></dd>
<dd>HTMLParser.Class.php, xhtml1-transitional_dtd.inc.php, XMLフォルダ以下のファイルについてはGNU LGPLライセンス</dd>
</dl>
<h3 id="t2b61fc">更新履歴</h3>
<div class="update">
<dl>
<dt>v0.2.3 (20080322)</dt>
<dd>検索ワードが変わってしまう問題を解消</dd>
<dd>フォームページの記述ミスによりうまく検索できなくなっていた問題を解消</dd>
<dd>（ライブラリそのものとはあまり関係ないですが）Google側の仕様変更により、再度検索説明が拾えなくなっていた問題を解消</dd>
<dt>v0.2.2 (20080312)</dt>
<dd>要素がうまく拾えない問題を解決しました（Thanks! Phizeさん）</dd>
<dd>これに伴い、特定のタグを消去する作業が不要になりました</dd>
<dt>v0.2.1 (20080217)</dt>
<dd>トップ画面がうまく表示されない問題を修正しました</dd>
<dd>文字エンコーディングの処理を改善しました</dd>
<dd>XMLやRSSにおいてパースエラーが発生する可能性がある問題を修正しました</dd>
<dd><a href="http://www.rcdtokyo.com/ucb/contents/i000799.php" title="HTMLを整形式のXML文書に修正するPHPクラス : Under Construction, Baby">HTMLを整形式のXML文書に修正するPHPクラス</a>は併用した場合、処理に失敗するケースもあったので、いったん使用しないようにしました</dd>
<dt>v0.2 (20080214)</dt>
<dd>RSS 2.0での出力を加えました</dd>
<dd><a href="http://www.rcdtokyo.com/ucb/contents/i000799.php" title="HTMLを整形式のXML文書に修正するPHPクラス : Under Construction, Baby">HTMLを整形式のXML文書に修正するPHPクラス</a>での処理を挟みこむようにした</dd>
<dt>v0.1</dt>
<dd>初リリース</dd>
</div>
<h3 id="t129f04">既知の問題点</h3>
<dl>
<dt>POSTで取得するリソースを取得できない</dt>
<dd>実装自体は簡単ですが、どう実装するかという話です。あんまりオプションを増やしたくないので</dd>
<dt>認証がかかったりソースを取得できない</dt>
<dd>これも上記に同じ。このニーズも大きいと思います。</dd>
</dl>
<h3 id="t7c0384">参考にしたURL</h3>
<ul>
<li><a href="http://goungoun.dip.jp/app/fswiki/wiki.cgi/devnotebook?page=PHP5%A1%A2%CC%A4%C0%B0%B7%C1HTML%A4%F2SimpleXML%A4%D8%CA%D1%B4%B9" title="PHP5、未整形HTMLをSimpleXMLへ変換 - goungoun技術系雑記帳">PHP5、未整形HTMLをSimpleXMLへ変換 &#8211; goungoun技術系雑記帳</a></li>
</ul>
<p><ins datetime="2008-03-12T17:31:35+09:00" class="block"><br />
Phizeさんが<a href="http://dxd8.com/archives/85/" title="PHPでのスクレイピングに役立つライブラリ - (DxD)∞">このスクリプトも含めてPHPのスクレイピングに役立つライブラリをまとめてくださって</a>います。このスクリプトでできないこともありますので、参考にしてください。<br />
</ins></p>
<img src="http://note.openvista.jp/?ak_action=api_record_view&id=348&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://note.openvista.jp/2008/php-scraing-library/feed/</wfw:commentRss>
		<slash:comments>13</slash:comments>
		</item>
	</channel>
</rss>

