JavaScriptライブラリやプラグインを使わずにシンタックスハイライトする方法
2016-03-28
ブログやWebサイトのコンテンツを作成する際、プログラムのソースコードを記載するような場面も、エンジニアならあるかと思います。
そんなとき、記載するソースコードの可読性が少しでも向上するように、プログラミング言語の変数名や予約語などを色分けする、いわゆる「シンタックスハイライト（Syntax highlighting）」を施したい場面も多いかと思います。
そこで、大多数の筆者の方々が採用しているのが、JavaScriptベースのフロントエンド側によるシンタックスハイライトライブラリの導入です。WordPressのプラグインなどで導入する際も、多くがその手法を用いたものです。フロントエンドではなくサーバーサイドでハイライトしてくれるWordPressプラグインにはまだ出会ったことがありません。少なくとも今現在メジャーではないはずです。
JavaScriptライブラリでは、下記のようなものが一般的です。
しかし、これらのフロントエンド側で処理するJavaScriptライブラリの欠点は、表示がもたつくという点です。ブラウザでソースコードを読み込んだ直後には、ハイライトされていないソースコードが表示されてしまい、その後しばらくしてガクッガクッとレイアウトが変わることもあります。できればそういった挙動は避けたいところです。
そういった問題を避けるため、今回は、あらかじめシンタックスハイライトされたHTMLを生成する方法をご紹介します。
注意点
世の中には、様々なコマンドラインツールやサービスがありますが、今回紹介する方法は、下記の道具さえあれば誰でもできる、ローテクなものです。過度な期待は勘弁ください。
必要なもの
- Mac (Windowsでも同様のツールがあればできるとは思いますが、Windows持ってないのでやりたい方は本記事を参考に自分でなんとかしてください)
- IDE (リッチテキスト形式でのコピーに対応しているもの。本記事ではIntelliJ IDEAを使用)
やり方
原理は至極簡単です。IDEにソースコードを記述し、IDEによるシンタックスハイライトごとクリップボードにコピーして（リッチテキスト形式）、それをHTMLとして出力するというものです。
では、手元にあるIntelliJ IDEAで実際にやってみます。
いつも通り、IDE上にソースコードを記述します。画像のとおり、いつも見慣れた形でシンタックスハイライトされています。フォーマットを変更したい場合は、IDEの設定などで、予め文字色やインデント幅などを決めておきます。
ソースコードの表示設定と記述が終わったら、Macに標準でインストールされている「テキストエディット」アプリを開きます（多くの場合、Launchpad -> その他 -> テキストエディットの手順）。「新規書籍」ボタンをクリックし、空のウィンドウを開きます。
そして、IDE上のソースコードを全てクリップボードへコピーし（command + A -> command + C）、開いたテキストエディットへ貼り付けます。
リッチテキスト形式で、文字色ごとコピーできているかと思います。後は、メニューからHTMLを出力するだけなのですが、出力前に設定を見ておきましょう。「テキストエディット -> 環境設定 -> 開く/保存」から、HTML保存オプションを変更できます。
スタイルは「インラインCSS」にしておくが吉です。
こうして、メニューから「ファイル -> 保存」で、「フォーマット」欄を「Webページ（.html）」として保存してやれば、できあがりです。
出力されたHTMLの<body>タグ内の<p>要素を丸々コピーして、ブログの記事などに埋め込めば、装飾されたコードが表示できると思います。うまく表示できない場合は、<p>タグを<pre>に変更すると、多くのブログでそのまま綺麗に表示できるかもしれません。
以下のようになります。
<pre style="font: 12.0px Menlo; color: #929292"><span style="color: #000000">define([<br>
<span class="Apple-tab-span" style="white-space:pre"> </span></span><span style="color: #008f00"><b>"./core"</b></span><span style="color: #000000">,<br>
<span class="Apple-tab-span" style="white-space:pre"> </span></span><span style="color: #008f00"><b>"./core/access"</b></span><span style="color: #000000">,<br>
<span class="Apple-tab-span" style="white-space:pre"> </span></span><span style="color: #008f00"><b>"./data/var/dataPriv"</b></span><span style="color: #000000">,<br>
<span class="Apple-tab-span" style="white-space:pre"> </span></span><span style="color: #008f00"><b>"./data/var/dataUser"<br>
</b></span><span style="color: #000000">], </span><span style="color: #011993"><b>function </b></span><span style="color: #000000">(jQuery, access, dataPriv, dataUser) {<br>
<br>
</span><i>//<span class="Apple-tab-span" style="white-space:pre"> </span>Implementation Summary<br>
//<br>
//<span class="Apple-tab-span" style="white-space:pre"> </span>1. Enforce API surface and semantic compatibility with 1.9.x branch<br>
//<span class="Apple-tab-span" style="white-space:pre"> </span>2. Improve the module's maintainability by reducing the storage<br>
//<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>paths to a single mechanism.<br>
//<span class="Apple-tab-span" style="white-space:pre"> </span>3. Use the same single mechanism to support "private" and "user" data.<br>
//<span class="Apple-tab-span" style="white-space:pre"> </span>4. _Never_ expose "private" data to user code (</i><span style="color: #0088cb"><b><i>TODO: Drop _data, _removeData)<br>
</i></b></span><i>//<span class="Apple-tab-span" style="white-space:pre"> </span>5. Avoid exposing implementation details on user objects (eg. expando properties)<br>
//<span class="Apple-tab-span" style="white-space:pre"> </span>6. Provide a clear path for implementation upgrade to WeakMap in 2014<br>
<br>
<span class="Apple-tab-span" style="white-space:pre"> </span></i><span style="color: #011993"><b>var </b></span><span style="color: #559495">rbrace </span><span style="color: #000000">= </span><span style="color: #0433ff">/^(?:\{[\w\W]*\}|\[[\w\W]*\])$/</span><span style="color: #000000">,<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span></span><span style="color: #559495">rmultiDash </span><span style="color: #000000">= </span><span style="color: #0433ff">/[A-Z]/g</span><span style="color: #000000">;<br>
<br>
<span class="Apple-tab-span" style="white-space:pre"> </span></span><span style="color: #011993"><b>function </b></span><span style="color: #000000"><i>dataAttr</i>(elem, key, data) {<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span></span><span style="color: #011993"><b>var </b></span><span style="color: #559495">name</span><span style="color: #000000">;<br>
<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span></span><i>// If nothing was found internally, try to fetch any<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>// data from the HTML5 data-* attribute<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span></i><span style="color: #011993"><b>if </b></span><span style="color: #000000">(data === </span><span style="color: #7b248d"><b>undefined </b></span><span style="color: #000000">&& elem.</span><span style="color: #7b248d"><b>nodeType </b></span><span style="color: #000000">=== </span><span style="color: #0433ff">1</span><span style="color: #000000">) {<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span></span><span style="color: #559495">name </span><span style="color: #000000">= </span><span style="color: #008f00"><b>"data-" </b></span><span style="color: #000000">+ key.</span><span style="color: #8d8b54">replace</span><span style="color: #000000">(</span><span style="color: #559495">rmultiDash</span><span style="color: #000000">, </span><span style="color: #008f00"><b>"-$&"</b></span><span style="color: #000000">).</span><span style="color: #8d8b54">toLowerCase</span><span style="color: #000000">();<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>data = elem.</span><span style="color: #8d8b54">getAttribute</span><span style="color: #000000">(</span><span style="color: #559495">name</span><span style="color: #000000">);<br>
<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span></span><span style="color: #011993"><b>if </b></span><span style="color: #000000">(</span><span style="color: #011993"><b>typeof </b></span><span style="color: #000000">data === </span><span style="color: #008f00"><b>"string"</b></span><span style="color: #000000">) {<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span></span><span style="color: #011993"><b>try </b></span><span style="color: #000000">{<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>data = data === </span><span style="color: #008f00"><b>"true" </b></span><span style="color: #000000">? </span><span style="color: #011993"><b>true </b></span><span style="color: #000000">:<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>data === </span><span style="color: #008f00"><b>"false" </b></span><span style="color: #000000">? </span><span style="color: #011993"><b>false </b></span><span style="color: #000000">:<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>data === </span><span style="color: #008f00"><b>"null" </b></span><span style="color: #000000">? </span><span style="color: #011993"><b>null </b></span><span style="color: #000000">:<br>
<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span></span><i>// Only convert to a number if it doesn't change the string<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span></i><span style="color: #000000">+data + </span><span style="color: #008f00"><b>"" </b></span><span style="color: #000000">=== data ? +data :<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span></span><span style="color: #559495">rbrace</span><span style="color: #000000">.</span><span style="color: #8d8b54">test</span><span style="color: #000000">(data) ? </span><span style="color: #7b248d"><b>JSON</b></span><span style="color: #000000">.</span><span style="color: #8d8b54">parse</span><span style="color: #000000">(data) :<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>data;<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>} </span><span style="color: #011993"><b>catch </b></span><span style="color: #000000">(e) {<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>}<br>
<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span></span><i>// Make sure we set the data so it isn't changed later<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span></i><span style="color: #000000">dataUser.</span><span style="color: #8d8b54">set</span><span style="color: #000000">(elem, key, data);<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>} </span><span style="color: #011993"><b>else </b></span><span style="color: #000000">{<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>data = </span><span style="color: #7b248d"><b>undefined</b></span><span style="color: #000000">;<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>}<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>}<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span></span><span style="color: #011993"><b>return </b></span><span style="color: #000000">data;<br>
<span class="Apple-tab-span" style="white-space:pre"> </span>}<br>
<br>
<span class="Apple-tab-span" style="white-space:pre"> </span>jQuery.</span><span style="color: #8d8b54">extend</span><span style="color: #000000">({<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span></span><span style="color: #8d8b54">hasData</span><span style="color: #000000">: </span><span style="color: #011993"><b>function </b></span><span style="color: #000000">(elem) {<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span></span><span style="color: #011993"><b>return </b></span><span style="color: #000000">dataUser.</span><span style="color: #8d8b54">hasData</span><span style="color: #000000">(elem) || dataPriv.</span><span style="color: #8d8b54">hasData</span><span style="color: #000000">(elem);<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>},<br>
<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span></span><span style="color: #8d8b54">data</span><span style="color: #000000">: </span><span style="color: #011993"><b>function </b></span><span style="color: #000000">(elem, name, data) {<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span></span><span style="color: #011993"><b>return </b></span><span style="color: #000000">dataUser.access(elem, name, data);<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>},<br>
<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span></span><span style="color: #8d8b54">removeData</span><span style="color: #000000">: </span><span style="color: #011993"><b>function </b></span><span style="color: #000000">(elem, name) {<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>dataUser.</span><span style="color: #8d8b54">remove</span><span style="color: #000000">(elem, name);<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>},<br>
<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span></span><i>// </i><span style="color: #0088cb"><b><i>TODO: Now that all calls to _data and _removeData have been replaced<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span></i></b></span><i>// with direct calls to dataPriv methods, these can be deprecated.<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span></i><span style="color: #8d8b54">_data</span><span style="color: #000000">: </span><span style="color: #011993"><b>function </b></span><span style="color: #000000">(elem, name, data) {<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span></span><span style="color: #011993"><b>return </b></span><span style="color: #000000">dataPriv.access(elem, name, data);<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>},<br>
<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span></span><span style="color: #8d8b54">_removeData</span><span style="color: #000000">: </span><span style="color: #011993"><b>function </b></span><span style="color: #000000">(elem, name) {<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>dataPriv.</span><span style="color: #8d8b54">remove</span><span style="color: #000000">(elem, name);<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>}<br>
<span class="Apple-tab-span" style="white-space:pre"> </span>});<br>
<br>
<span class="Apple-tab-span" style="white-space:pre"> </span>jQuery.fn.</span><span style="color: #8d8b54">extend</span><span style="color: #000000">({<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span></span><span style="color: #8d8b54">data</span><span style="color: #000000">: </span><span style="color: #011993"><b>function </b></span><span style="color: #000000">(key, value) {<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span></span><span style="color: #011993"><b>var </b></span><span style="color: #559495">i</span><span style="color: #000000">, </span><span style="color: #559495">name</span><span style="color: #000000">, </span><span style="color: #559495">data</span><span style="color: #000000">,<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span></span><span style="color: #559495">elem </span><span style="color: #000000">= </span><span style="color: #011993"><b>this</b></span><span style="color: #000000">[</span><span style="color: #0433ff">0</span><span style="color: #000000">],<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span></span><span style="color: #559495">attrs </span><span style="color: #000000">= </span><span style="color: #559495">elem </span><span style="color: #000000">&& </span><span style="color: #559495">elem</span><span style="color: #000000">.</span><span style="color: #8d8b54">attributes</span><span style="color: #000000">;<br>
<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span></span><i>// Gets all values<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span></i><span style="color: #011993"><b>if </b></span><span style="color: #000000">(key === </span><span style="color: #7b248d"><b>undefined</b></span><span style="color: #000000">) {<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span></span><span style="color: #011993"><b>if </b></span><span style="color: #000000">(</span><span style="color: #011993"><b>this</b></span><span style="color: #000000">.</span><span style="color: #7b248d"><b>length</b></span><span style="color: #000000">) {<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span></span><span style="color: #559495">data </span><span style="color: #000000">= dataUser.get(</span><span style="color: #559495">elem</span><span style="color: #000000">);<br>
<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span></span><span style="color: #011993"><b>if </b></span><span style="color: #000000">(</span><span style="color: #559495">elem</span><span style="color: #000000">.</span><span style="color: #7b248d"><b>nodeType </b></span><span style="color: #000000">=== </span><span style="color: #0433ff">1 </span><span style="color: #000000">&& !dataPriv.get(</span><span style="color: #559495">elem</span><span style="color: #000000">, </span><span style="color: #008f00"><b>"hasDataAttrs"</b></span><span style="color: #000000">)) {<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span></span><span style="color: #559495">i </span><span style="color: #000000">= </span><span style="color: #559495">attrs</span><span style="color: #000000">.</span><span style="color: #7b248d"><b>length</b></span><span style="color: #000000">;<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span></span><span style="color: #011993"><b>while </b></span><span style="color: #000000">(</span><span style="color: #559495">i</span><span style="color: #000000">--) {<br>
<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span></span><i>// Support: IE11+<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>// The attrs elements can be null (#14894)<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span></i><span style="color: #011993"><b>if </b></span><span style="color: #000000">(</span><span style="color: #559495">attrs</span><span style="color: #000000">[</span><span style="color: #559495">i</span><span style="color: #000000">]) {<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span></span><span style="color: #559495">name </span><span style="color: #000000">= </span><span style="color: #559495">attrs</span><span style="color: #000000">[</span><span style="color: #559495">i</span><span style="color: #000000">].</span><span style="color: #8d8b54">name</span><span style="color: #000000">;<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span></span><span style="color: #011993"><b>if </b></span><span style="color: #000000">(</span><span style="color: #559495">name</span><span style="color: #000000">.</span><span style="color: #8d8b54">indexOf</span><span style="color: #000000">(</span><span style="color: #008f00"><b>"data-"</b></span><span style="color: #000000">) === </span><span style="color: #0433ff">0</span><span style="color: #000000">) {<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span></span><span style="color: #559495">name </span><span style="color: #000000">= jQuery.camelCase(</span><span style="color: #559495">name</span><span style="color: #000000">.</span><span style="color: #8d8b54">slice</span><span style="color: #000000">(</span><span style="color: #0433ff">5</span><span style="color: #000000">));<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><i>dataAttr</i>(</span><span style="color: #559495">elem</span><span style="color: #000000">, </span><span style="color: #559495">name</span><span style="color: #000000">, </span><span style="color: #559495">data</span><span style="color: #000000">[</span><span style="color: #559495">name</span><span style="color: #000000">]);<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>}<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>}<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>}<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>dataPriv.</span><span style="color: #8d8b54">set</span><span style="color: #000000">(</span><span style="color: #559495">elem</span><span style="color: #000000">, </span><span style="color: #008f00"><b>"hasDataAttrs"</b></span><span style="color: #000000">, </span><span style="color: #011993"><b>true</b></span><span style="color: #000000">);<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>}<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>}<br>
<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span></span><span style="color: #011993"><b>return </b></span><span style="color: #559495">data</span><span style="color: #000000">;<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>}<br>
<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span></span><i>// Sets multiple values<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span></i><span style="color: #011993"><b>if </b></span><span style="color: #000000">(</span><span style="color: #011993"><b>typeof </b></span><span style="color: #000000">key === </span><span style="color: #008f00"><b>"object"</b></span><span style="color: #000000">) {<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span></span><span style="color: #011993"><b>return this</b></span><span style="color: #000000">.each(</span><span style="color: #011993"><b>function </b></span><span style="color: #000000">() {<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>dataUser.</span><span style="color: #8d8b54">set</span><span style="color: #000000">(</span><span style="color: #011993"><b>this</b></span><span style="color: #000000">, key);<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>});<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>}<br>
<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span></span><span style="color: #011993"><b>return </b></span><span style="color: #000000">access(</span><span style="color: #011993"><b>this</b></span><span style="color: #000000">, </span><span style="color: #011993"><b>function </b></span><span style="color: #000000">(value) {<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span></span><span style="color: #011993"><b>var </b></span><span style="color: #559495">data</span><span style="color: #000000">;<br>
<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span></span><i>// The calling jQuery object (element matches) is not empty<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>// (and therefore has an element appears at this[ 0 ]) and the<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>// `value` parameter was not undefined. An empty jQuery object<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>// will result in `undefined` for elem = this[ 0 ] which will<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>// throw an exception if an attempt to read a data cache is made.<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span></i><span style="color: #011993"><b>if </b></span><span style="color: #000000">(</span><span style="color: #559495">elem </span><span style="color: #000000">&& value === </span><span style="color: #7b248d"><b>undefined</b></span><span style="color: #000000">) {<br>
<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span></span><i>// Attempt to get data from the cache<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>// The key will always be camelCased in Data<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span></i><span style="color: #559495">data </span><span style="color: #000000">= dataUser.get(</span><span style="color: #559495">elem</span><span style="color: #000000">, key);<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span></span><span style="color: #011993"><b>if </b></span><span style="color: #000000">(</span><span style="color: #559495">data </span><span style="color: #000000">!== </span><span style="color: #7b248d"><b>undefined</b></span><span style="color: #000000">) {<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span></span><span style="color: #011993"><b>return </b></span><span style="color: #559495">data</span><span style="color: #000000">;<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>}<br>
<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span></span><i>// Attempt to "discover" the data in<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>// HTML5 custom data-* attrs<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span></i><span style="color: #559495">data </span><span style="color: #000000">= <i>dataAttr</i>(</span><span style="color: #559495">elem</span><span style="color: #000000">, key);<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span></span><span style="color: #011993"><b>if </b></span><span style="color: #000000">(</span><span style="color: #559495">data </span><span style="color: #000000">!== </span><span style="color: #7b248d"><b>undefined</b></span><span style="color: #000000">) {<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span></span><span style="color: #011993"><b>return </b></span><span style="color: #559495">data</span><span style="color: #000000">;<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>}<br>
<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span></span><i>// We tried really hard, but the data doesn't exist.<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span></i><span style="color: #011993"><b>return</b></span><span style="color: #000000">;<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>}<br>
<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span></span><i>// Set the data...<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span></i><span style="color: #011993"><b>this</b></span><span style="color: #000000">.each(</span><span style="color: #011993"><b>function </b></span><span style="color: #000000">() {<br>
<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span></span><i>// We always store the camelCased key<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span></i><span style="color: #000000">dataUser.</span><span style="color: #8d8b54">set</span><span style="color: #000000">(</span><span style="color: #011993"><b>this</b></span><span style="color: #000000">, key, value);<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>});<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>}, </span><span style="color: #011993"><b>null</b></span><span style="color: #000000">, value, </span><span style="color: #559495">arguments</span><span style="color: #000000">.</span><span style="color: #7b248d"><b>length </b></span><span style="color: #000000">> </span><span style="color: #0433ff">1</span><span style="color: #000000">, </span><span style="color: #011993"><b>null</b></span><span style="color: #000000">, </span><span style="color: #011993"><b>true</b></span><span style="color: #000000">);<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>},<br>
<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span></span><span style="color: #8d8b54">removeData</span><span style="color: #000000">: </span><span style="color: #011993"><b>function </b></span><span style="color: #000000">(key) {<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span></span><span style="color: #011993"><b>return this</b></span><span style="color: #000000">.each(</span><span style="color: #011993"><b>function </b></span><span style="color: #000000">() {<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>dataUser.</span><span style="color: #8d8b54">remove</span><span style="color: #000000">(</span><span style="color: #011993"><b>this</b></span><span style="color: #000000">, key);<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>});<br>
<span class="Apple-tab-span" style="white-space:pre"> </span><span class="Apple-tab-span" style="white-space:pre"> </span>}<br>
<span class="Apple-tab-span" style="white-space:pre"> </span>});<br>
<br>
<span class="Apple-tab-span" style="white-space:pre"> </span></span><span style="color: #011993"><b>return </b></span><span style="color: #000000">jQuery;<br>
});</span></pre>ブログごとの細かいデザインの調整は必要になるかもしれませんが、大体1度CSSファイルを編集してしまえば済むのでそんなに手間ではないかと思います。
慣れれば、画像を記事に貼り付けるのと同じような感覚で、チャチャッとできると思いますので、ぜひやってみてください。
まとめ
これで、重た〜いシンタックスハイライト機能とおさらばできます。
それどころか、IDEのシンタックスハイライトはJavaScriptライブラリとは比べ物にならないくらい優秀なので、より見やすいソースコードにもなりますし、IDEの設定次第で好きな文字色やインデント幅に変更することも可能です。
ローテクな方法ですが、試してみる価値ありです。ぜひ、どうぞ。