2009/10/31

google-code-prettifyを使えるようにしてみた

class Voila {
public:
  // Voila
  static const string VOILA = "Voila";

  // will not interfere with embedded tags.
}

はじめにgoogle-code-prettifyプロジェクトドキュメントを眺める。
レンタルサーバにgoogle-code-prettifyのファイルを置こうかと思ったけど、 Learning Log Book: Bloggerでシンタックス・ハイライト で紹介されていたHTML/JavaScriptガジェットを使う方法でやってみた。
やり方は、HTML/JavaScriptガジェットを追加して、タイトルは空欄、コンテンツにJavaScriptのソース(prettify.jsと必要ならlang-xxx.jsとかも)とCSS(prettify.css)を貼り付けるというだけ。HTML/JavaScriptガジェットをこんな風に使うのかと感心。



あとはページのHTMLの編集でbody要素にonload="prettyPrint()"を追加すると、<pre class="prettyprint">...</pre>や<code class="prettyprint">...</code>のコードが色付けされて表示される。
"<"と">"は実体参照で書かなきゃいけないことに注意(というか面倒くさい、使わないかもという気がしてくる)。

あなたのソースコードを彩る、Syntax Highlighterまとめ | Blog.37to.netgoogle-code-prettify以外にもいろいろと紹介していて参考になった。
その中でSyntaxHighlighterは対応言語が多くて良さそう。特に、Usageによるとバージョン2.1では<script type="syntaxhighlighter" class="brush: js"><![CDATA[...]]></script>というようにscript要素+CDATAを使うからコードをそのまま貼り付けることができることと、Hostingで「http://alexgorbatchev.com/pub/sh/にファイルを置いておくからこれを使っていいよ」とホストすることをはっきり書いてくれていること。

というのも、google-code-prettifyのSVNリポジトリのソースを読み込む方法を紹介しているページを見かけてそれってどうかのかなと思った。
すくなくともgoogle-code-prettifyのREADMEでは「you will need to make sure the css and js file are on your server」と書かれている。そのあたりの議論があった/あるのか知らないし、Project Hosting on Google Code がOKを出しているかもしれないけど。

SyntaxHighlighterみたいにライブラリの開発者がホストすると表明してくれると使いやすいし、よく使われるようになりやすいかも。
GoogleやYahooのAJAXライブラリのホスティング(AJAX Libraries API - Google Code, The YUI Configurator)に追加されたら最高だろうな。

2009/10/27

チャート(グラフ)の見え方と印象

tumblrですこしおもしろい見せ方をしているチャートが流れていたからいじってみた。

流れてきた経路は 独り52-いじめられるサラリーマン の「図1 男女別平均年収の推移」が 日本人は世界で4番目に貧しい国 年収200万円以下が1000万人もいる! | 無題ブログ の643に貼られて、それを the Emitter がtumblrにポストしたのが Windsock - Online trend following - theemitter: plasticdreams: 643 名前:.. 経由でdashboardに表示されていた、という感じ(たぶん)。

おもしろいと思ったのは男女の平均年収に大きな差があるけど、男性の平均年収額を左縦軸、女性の平均年収額を右縦軸にとって、両方の縦軸の目盛り間隔を合わせていたことと1995年時のプロット位置を一致させていたことの2点。
前者は、はじめは年収400万円台と200万円台では10万円前後の増減による効用は違うだろうと思ったけど、収入が200万円でも400万円でも10万円前後の金額の捉え方は同じようなものに思えたこと(平均を個々のケースにあてはめて考えるのはおかしいけど)。
後者についてはわざわざ元データの数値を合わせないで増減額か増減率を示したほうがいいんじゃないかと思ったから。

チャートを作るためにデータを探してみる。
民間給与実態統計調査結果|長期時系列データ|国税庁M03.xls の「3-1」シートの「1年勤続者」-「給料・手当(1)」が同じ数値っぽい(賞与抜きの額面の金額)。

いくつか作ってみたチャートを貼ってみる。
共通なことは、横軸は1995年から2007年まで、縦軸は金額または増減率、金額の場合の単位は千円。

そのまんまな平均年収の折れ線のチャートA。
男女ともに横ばい(差は縮まらない)。


チャートAの縦軸の下限を200万円に変更したチャートB。
男女間の差額とそれが変わらないことを強調する場合はこれがいいかも。


男性の平均年収を左軸、女性の平均年数を右軸に割り当てたチャートC。
目盛り間隔はExcel2007におまかせ。左軸の5万円が右軸の4万円に対応している。微妙な差を気付かれにくくするにはこれみたいのがいいかも。


チャートCの左右の縦軸のスケールを一致させたチャートD。
流れてきた元のチャートはこんな感じ。「1995年から2000年までは男女の平均年収が約10万円増加したけど、その後、男性の平均年収は下がって1995年と同水準に戻ったね。それに対して女性の平均年収は2000年から横ばいだね。(※左右の縦軸に注意)」。


そもそも増減額を示せばいいじゃない?ということで1995年を基準とした増減額のチャートE。
増減額は分かるけど実際の年収額が分からない。「女性の平均年収は男性と比較すると堅調です」みたいなことを伝えたい場合はいいかも。
タイトルが適切じゃないけど直すのが面倒だからこのままで。


増減額じゃなくて、1995年を1.0とした場合の増減率のチャートF。
増減率なので分母の影響が出てしまう。チャートEよりも「女性の平均年収は男性と比較すると堅調です」を強く伝えられるはずなんだけど、男性の2001年からの下落具合がチャートEよりも弱くなる点に注意。
これもタイトルが適切じゃないけど直すのが面倒だからこのままで。


チャートE/Fに実際の平均年収額をラベルで付けたのがチャートH/I。
チャートGが抜けているのはただのミス、飛ばしてしまったみたい。
これもタイトルが適切じゃないけど直すのが面倒だからこのままで。あと凡例は不要だった。



独り52-いじめられるサラリーマン日本人は世界で4番目に貧しい国 年収200万円以下が1000万人もいる! | 無題ブログ が何を伝えようとしているのか知らないし、チャートがおかしいとか言うつもりは全くない(読んでいないし読む気もない)。
単に見せ方を変えると印象が変わりそうなデータだと思ったからやってみた。

自分なら特に強い意図がなければI/H、A/Bあたりを使うと思う。

捏造棒グラフ - Google 検索 とか Amazon.co.jp: マッキンゼー流図解の技術: ジーン ゼラズニー, 数江 良一, 管野 誠二, 大崎 朋子: 本 とか思い出した。あと1冊コンサルタント系の人の本も記憶にあるけど名前が思い出せない。

一応データはbitbucketに入れておいた。
ksksts / junk / source — bitbucket.org

2009/10/09

リクナビNEXTの求人件数の推移

毎水曜日に受信するリクナビNEXTからのメールの新着求人数を集計してみた。
半分は興味でもう半分はPythonの練習。

メールを受信しているのはGmailアカウントだけどそこからfetchしてとかまでは面倒くさいから、Beckyで受信&保存されたメールをmbox形式でエクスポートしてそれを処理するというやり方。
Beckyからメールを抽出する時の条件は、検索文字列「すべての新着・更新求人: 件の求人が今週掲載開始。 ▼新着・更新求人:」の「いずれかを含む」で。

エクスポートしたmbox形式のファイルをPythonのmailbox.UnixMailboxでparseして、Messageオブジェクトのdateヘッダの値とpayloadに含まれる新着&更新件数を正規表現で取得してタブ区切りテキストで出力。
それをExcelで開いて移動平均を追加してチャートを作るとこんな感じ。


2007年から減少が始まって2008年以降はペースがちょっと加速して最近底を打ったように見える。まあ底を打ったらすぐに前と同じ水準に反発するわけじゃないし、雇用関係は遅行指標だし、しばらくはこのあたりの水準なのかな。

PythonのスクリプトとExcelブックファイルはBitBucketに入れておいた。
ksksts / junk / source — bitbucket.org