こんにちは、開発チームの日高 @hidakatsuya です。「PDF」と言うキーワードに脊髄反射してしまう今日この頃です。
さて、今回は私が開発に携わっている Thinreports という OSS で、どのような技術・ライブラリが使われているかをご紹介したいと思います。
Thinreports
Thinreports は、いわゆる帳票を作るための Ruby 向けのオープンソースソフトウェアです。Misoca の一部の PDF 生成機能にも Thinreports が使われています。
Thinreports では、帳票レイアウトを作成する Thinreports Editor と、そのレイアウトから PDF を生成する Ruby ライブラリ Thinreports Generator を使って帳票を作成します。
もう少し詳しい説明は、弊社豊吉の記事がわかりやすいのでこちらをご覧ください。
誰が使っているか
本題とは全く関係ないのですが、この Thinreports が誰に使われているかをちょっとだけご紹介します。「帳票」と聞くと、国内だけで使われていると思われるかもしれませんが、実際はそうでもありません。
これは、公式サイト http://www.thinreports.org の 2011年12月から現在までの国別のアクセス数（セッション数）です。40% が海外からのアクセスで、当初はこんなに海外ユーザが増えるとは思いもしませんでした。もちろん、この結果と実際の利用者が一致するとは限りませんが、実際に海外ユーザからの問い合わせはとても多いです。英語大事。
Thinreports Editor
さて、本題です。今回は Thinreports の中でも、Thinreports Editor で使われている技術・ライブラリを紹介します。
Thinreports Editor は、マウス操作でけい線や図形、テキストなどを描画して帳票レイアウトを作成するデザインツールです。その中身は、以下のような構成になっています。
Chrome Apps を除けば、一般的な Web アプリのフロントエンドで使われる技術で構成されており、図形描画や UI の制御、処理の全てが JavaScript で書かれています。そのため、Chrome Apps の API に依存したファイル I/O といった機能以外は、そのままブラウザで動作させることができます。
ファイル構成
locales/ assets/ |- fonts/ |- icons/ `- images/ app.html app.js background.js manifest.json
background.js と manifest.json は Chrome Apps のためのファイルなので、画像などのアセットを除けば、一つの JavaScriipt ファイルと一つの HTML ファイルだけで構成されていることになります。
Chrome Apps
What Are Chrome Apps? - Google Chrome
Chrome ブラウザをエンジンとしたデスクトップアプリを HTML5 や JavaScript/CSS 使って作ることができるプラットフォームです。Electron をイメージしていただくと良いですが、Chrome Apps の場合、OS ごとのパッケージは不要で、Chrome がサポートする OS *1 であれば、基本的にはそのまま動作させることができます。
作り方は非常に簡単ですが、GitHub で公開されているサンプルが参考になります。
Chrome Apps 以前は、Qt というライブラリでシンプルなブラウザを作り、その上で Editor を動作させるという構成でしたが、各 OS ごとのパッケージを用意することが面倒で、また OS に依存する問題なども多く発生したため、バージョン 0.8 より Chrome Apps を採用しています。
Google Closure Library
Closure Library is a powerful, low-level JavaScript library designed for building complex and scalable web applications. It is used by many Google web applications, such as Google Search, Gmail, Google Docs, Google+, Google Maps, and others.
Gmail や Google Docs といった、Google の主要プロダクトで実際に使われている JavaScript ライブラリです。array や json などの基本的なものから i18n や svg (graphics)、FileAPI といった HTML5、UI コンポーネント、テストフレームワークなど、実に多くのモジュールが含まれています。また、依存性の管理もサポートしています。
GitHub で開発が行われるようになってから特に開発スピードが速く、いつの間にか npm package も利用できるようです。
この Closure Library は、Thinreports Editor のほぼ全てを担っていると言っても良いほど、Editor にとって重要なライブラリです。Editor の図形描画は SVG によって実現していますが、Closure Library はリリース当時から SVG をサポートしており、これが採用する際の決め手となりました。
Google Closure Compiler
JavaScript 最適化ツールです。JsDoc ベースの静的型付が可能で、その名前の通りの最適化・圧縮を実現することができます。ES6 への対応など、Closure Library 同様、GitHub 上で活発に開発が進められています。
最適化の例として、例えば以下のコード。
/** * @param {string} name */ function hello(name) { alert('Hello ' + name); } hello('New User');
これを Closure Compiler (ADVANCED_OPTIMIZATION) でコンパイルすると、以下のように最適化されます。すごい。
alert('Hello New User');
その他、最近の状況は下記スライドが参考になります。 http://www.slideshare.net/teppeis/closure-compiler-updates-for-es6
Thinreports Editor では、Compiler の静的型付など、最適化のための機能をフルに活用して、数万行の JavaScript コードを 350KB 程度の一つの JavaScript ファイルへ最適化しています。この最適化のおかげで、図形描画といった重い処理のパフォーマンスを維持することができています。
Google Closure Stylesheets / Templates
その他、スタイルシートの圧縮には Closure Stylesheets を、一部の HTML 出力に Closure Templates といったライブラリも使っています。これらはいずれも、Closure Library や Compiler と同じく、Google Closure Tools の一部のライブラリです。
まとめ
今回、Thinreports の中でも Thinreports Editor についてご紹介しましたが、また別の機会に Generator の方も紹介したいと思います。ご紹介した Closure Compiler は、babel などの陰に隠れて若干存在感が薄い印象ですが、開発も活発で ES6 への対応も着々と進められていますし、最適化・圧縮を一度体験してみてはいかがでしょうか。
