code-prettifyで技術ブログの可読性アップ

株式会社ジェニシス　技術開発事業部の遠藤　太志郎(Tacy)です。

今回はちょっと臨時番外編をお送ります。

サイトが見辛い

最近はQiitaという技術交流ＳＮＳが注目を集めていますよね。
私も技術調査を行っている時にQiitaに掲載されている記事にお世話になることが多いです。

それを見ていて思うのが、何かこのブログって掲載しているブログが見辛いなぁ。。。

このブログを始めた2013年当時、私はGoogleが提供してくれているコード掲載用ライブラリである「code-prettify」を導入したのですが、
今となっては明らかにQiitaとか他の技術ブログより見辛いぞ。

一体どうなってんの？？？

と言うことで、現状に甘んずることなく、ブログの品質向上を目指して見直しを行うことにしました。

何か良いライブラリ無いかな。。。

code-prettifyだった

そして調査して分かりましたが、私のやりたいことは「code-prettify」で出来るんですね。

code-prettify自身が2013年当時から進化していて、最新版を持って来れば良いんですよ。

2013年の頃はGoogle本家に置いてあったと記憶しているcode-prettifyも、今はGitHubに引っ越ししているようです。

• https://github.com/google/code-prettify

今まで使っているcode-prettifyを消して、新しいのを入れなおしてみましょう。

run_prettify

run_prettifyはAjaxライブラリの一種なので、HTMLのヘッダーで宣言が必要です。

以下のようにCDN(コンテンツデリバリネットワーク)の以下を宣言して下さい。

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

CDN……。
要するに、Googleの親サイトに直接繋いでJSファイルを読み込むわけです。

便利である一方、Googleのサイトが落ちたり、無くなっちゃったりすると死んでしまうわけですが、run_prettifyはCDNを使った方が良いと思います。

容易な変更が許されない業務システムで使うライブラリであれば、そのシステムをリリースした時のバージョンを維持する為にJSファイルをローカルにダウンロードしてシステム内部で保持する必要があります。
でも、このブログって業務システムではないですし、何より新しさが重要ですから。

CDNが無くなったり、引っ越ししたりしたら、それに合わせてブログを更新するべきだと思います。
更新が遅い技術ブログなんて役に立たないっしょ？

何年も前に取得した古いライブラリを維持するとかは業務系システムで考えるべきことで、こういうブログは目新しさを求めてCDNを呼べば良いと思います。

さて、「run_prettify.js」ですが、これで描画に必要なスタイルシートとかも全部読み込んでくれています。

ですが、読み込む際にオプションを指定することが出来ます。

• https://github.com/google/code-prettify/blob/master/docs/getting_started.md

いくつかありますが、気になった所を挙げてみましょう。

• autorun：自動実行。画面のonLoad時に自動実行することで、デフォルトはtrueです。どうも昔は自動実行が無くて、自分でonLoad実行しなきゃいけなかったようですが、今はこのとおり、自動実行でラクチンです。
• lang：プログラミング言語の指定。code-prettifyは「Java表示モード」「Python表示モード」みたいに、言語毎にグラフィックを変えてくれるというIDEみたいな凄い技をやってくれます。そのデフォルト言語ですね。デフォルト言語をPythonにしておけば、何もしなければPythonモードで表示され、その上でJavaにしたい時はHTMLの中のclassにJavaを指定すればそこだけJavaモードになります。
• skin：スキンの指定。後述。

大事なのは「skin」かな。

• https://rawgit.com/google/code-prettify/master/styles/index.html

上記のページにあるスキンからお好みのものを選ぶことは出来ます。
当ブログは長らくdefaltでしたが、今回を期に「Sons-Of-Obsidian」に変更します。

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sons-of-obsidian"></script>

これで宣言完了。

書く

ここから先の使い方は簡単です。

例えばPythonのコードを載せたい時は、以下のようにHTMLを書けばOK。

<pre class="prettyprint linenums"><code class="language-python">...コード...</code></pre>

「linenums」とは行数を表示するオプションです。
特に理由が無い限りは常につけておいた方が良いでしょう。

実際、このやり方で上記の画像の状況だったソースを掲載すると以下になります。

import os
import json

dirPath = 'C:/MyMail_result'
files = os.listdir(dirPath)

#連想配列を作成
map = {}

#ファイルを全部読み込み
for file in files:
    f = open(os.path.join(dirPath,file))
    data = json.load(f)
    f.close()

    #name毎にsalienceを集計
    for entity in data['entities']:

        name = entity['name']

        if name in map:
            map[name] = map[name] + entity['salience']

        else:

            map[name] = entity['salience']

#集計結果をソート
resultList = reversed(sorted(map.items(), key=lambda x:x[1]))

#出力
for data in resultList:
    print(data[0] + '\t' + str(data[1]))

これこれ。
これをやりたかったんですよ。

今の時代なら絶対コレしか無い！！

終わりに

よっしゃ。これで綺麗になったぞ。

やっぱね、５年も同じブログを続けていると時代遅れになっている部分があったとしても、どうしても「これでいいや」って気分になりがちなんですよね。

今までそれでやって来ているわけですから。

でも、偶にで良いので振り返って、「いやいや、今ならもっと良いやり方があるぞ」という所を見つけたら、改善を決行しなければなりません。

「今までそれでやって来た」というだけで改善を行わないという怠慢！！

ブログ運営に限らず、業務を行う上では常に気を付けていきたいものです。