2014年11月頃から、SSLに関する統計情報を公開しているサイトSSL Pulseのデータから推移情報をブログで公開してきました。隔月で更新するようなことを言ってて、2015年12月から更新が無い状態になっており、「コラ〜〜！サボってんじゃね〜〜」的なことを思われたかたもいらっしゃるかもしれません。すみません。すみません。すみません。
新しいサイト
SSL Pulse Trends(SSL Pulseデータの推移) https://kjur.github.io/www/sslpulsetrend/index_j.htmlというサイトを作りました。今後の毎月の更新はこちらでやっていきます。サイトを移行した経緯など、、、
前は、エクセルなど駆使してグラフ描いてたんですが、そりゃもう、結構手間がかってたんですよ。自分も興味があって毎月すぐ知りたいんだけど、とても、毎月はできないなと、、、ざっくりとした流れはこんな感じ：
- 今月のデータファイル(JSON)をwgetでダウンロードする
- データの推移をTSV形式になるように変換するツールを実行する。グラフに必要なデータ列もこの時作る。
- TSVファイルをUTF-16にする(Mac Excel対策)
- Excelで読み込み
- データを細かい整形(日付フォーマットや表ヘッダなど)
- 必要なグラフを作る
- グラフをEMF(拡張メタファイル)でエクスポートする
- PowerPointに吹き出し等を貼り付け(位置調整)
- PowerPointの画面を画像キャプチャし、ブログへ
そして、一つ一つグラフを作っていくわけです。
で、Excelのグラフの凡例ではちょっと見づらいのでパワポで吹き出しをつけます。
どうです？結構面倒くさそうでしょう？
で、新しいサイトでは
とにかくExcelでグラフをつくるのはやめにしたく、JavaScriptベースでグラフを描けないもんかと、調べてみました。最初は、ccchartなんかがデザインも良いかなぁと考えていたんですが、思っていたデザインにするのは、至難の技であると知り、D3.jsという有名なライブラリも見たんですが、一つのフツーのグラフ書くのに多くのコードを書かねばならず断念。D3.jsを簡単に使うためのラッパーがあるそうで、それを幾つか見て、rickshawで何とか許せるグラフが描けたのでそれを使うことにしました。
本当は、SSL Pulseに置いてあるJSON形式のデータファイルをそのまま、表示の度に取り込んで加工してからグラフ表示しようとしたんですが、諸々CORSの壁に阻まれ断念。動的にダウンロードする必要もなくなり、スタティックな解析データをNodeで作って、SOURCEタグで普通にデータ取り込むことになりました。
ブログでたまたまSSL Pulseについて書くだけなら、特別な断りをいれなくてもいいかと思ったんですが、定常的に今後は英語でもページを公開するとなると、SSL Pulseの作者のIvan Ristićさんに仁義というか確認取っといたほうがいいかなと思いました。IvanさんはSSL/TLSの技術解説書の中では最高に良いと思うBulletproof SSL and TLSの著者であり、SSLの設定評価サイトであるssllabsの開発などもしています。
最初は、TwitterのDMで連絡取ろうとしたんですが、当然ながら私のフォローして頂いてるわけではないのでDMが送れず、メールアドレスもどこにも記載されていなので、連絡がつきませんでした。そこで、いつもJavaScriptの暗号/PKIライブラリでは情報交換などさせて頂き大変お世話になっているRyan Hurstさんに頼み込み、連絡とってくれないかと伝えました。Ryanさんは「Kenjiを紹介するよ。彼は、すげーJavaScriptの暗号/JWT/X.509ライブラリの作者だ。」と私からのお願い事項のメールを転送してくれました。2日ぐらい待ってて、「う〜〜ん」こりゃレス無しかなぁとも思ってたんですが、返事が来まして「SSL Labsは自由なコンテンツライセンスになってて、君の場合でも全く問題ないとわかると思うよ。同じようなこと(=データ推移情報)をやりたいと思ってたんだけど、時間がなくてね〜〜。」との事でした。よかった、よかった。これで安心して定常的に公開できそうです。
Rickshawの使い方は概ねこんな感じです。
同じ形式のグラフ描くのに、同じようなコード書くのも面倒なので、さらにラッパーを作りました。<div id="chart_container"><div id="grade_chart"></div></div> <script> var graph = new Rickshaw.Graph({ element: グラフを描くキャンバスが挿入されるDIVのDOM, width: グラフ幅, height: グラフ高, renderer: グラフ形式(棒グラフとか折れ線グラフとか), series: [{"color": グラフデータ色, "name": データ名(TLS1.2とかSHA256withRSAとかデータ名), "data": [{x: 値, y: 値}, {x: 値, y: 値} ...]}, : (複数のデータがあれば続く) ] }); graph.render(); </script>
これでようやく、SSL Pulseの更新があっても、make 一発でグラフデータを作れるので、毎月の更新も負担にならなくなりました。RickshawUtilGraph(グラフ描くDOM IDの共通ヘッド(グラフや凡例、XY軸など), グラフの共通テンプレート, データ(グラフデータ、データ名) [,オプションでグラフ形式を変えたい場合のパラメータ] [,オプションでグラフ色変えたい場合のパラメータ]);
というわけで、まだ素っ気ないページですが日本語ページ公開にこぎつけました。今までなかった評価グレード(A-F)の分布推移のグラフはNPNのHTTP/2サポートプロトコルの推移のグラフも付け加わっています。
しばらくしたら英語ページの作成にとりかかりたいと思います。
今後とも、よろしくお願いします。
関連記事
- SSL Pulseの統計情報でみるSSL/TLSの引越しについて (2016.04.10)
- SSL Pulseの統計情報で見るSSL/TLS (2015年12月版) (2015.12.16)
- SSL Pulseの統計情報で見るSSL/TLS (2015年10月版) (2015.10.24)
- SSL Pulseの統計情報で見るSSL/TLS (2015年8月版) (2015.08.12)
- SSL Pulseの統計情報で見るSSL/TLS (2015年6月版) (2015.06.17)
- SSL Pulseの統計情報で見るSSL/TLS (2015年5月版) (2015.05.11)
- (小ネタ)来月にはSHA2証明書の枚数がSHA1を追い越しそうな件 (2015.04.11)
- SSL Pulseの統計情報で見るSSL/TLS (2015年3月版) (2015.03.17)
- SSL Pulseの統計情報で見るSSL/TLS (2015年1月版) (2015.01.25)
- Internet Week 2014パネルで話しそびれたネタ: 統計情報でみるSSL/TLS (2014.11.22)
