今日は昨年のお仕事で使った技術を紹介します。
タイトルの通りなんですがとある製品開発をすることになりまして、「デスクトップアプリにするか、Webにするか」を悩みました。私は過去にデスクトップアプリはEclipse RCP(Rich Client Platform)にて開発経験があるのですが、いかんせん大変でした。できるだけ楽をしたいからWebにしたいけどサーバを借りるとなるとお金がかかる・・・。（色んな事情から経費的なものは可能な限りゼロ円しばりw）と悩んでいた際にこんな技術があるよ！と教えていただいたので飛びつきました。
Electron
一つ目はElectronというフレームワーク。HTMLやJSを使えるところは良かったのですが、チュートリアルで「動いた〜」から後に何をどうするかの学習コストが膨大すぎて、ちょっと今回使うにはハードルが高い・・・というかEclipse RCPとメニュー等の組み方が似て居て、うん、大変！で避けることに。
Electron（公式）
NW.js
二つ目はNW.jsというフレームワーク。こちらは内部的にはGoogleChromeのエンジンが入っててそれをデスクトップアプリとして起動させるというもの。GoogleChromeで出来ること＝デスクトップアプリで出来ることになり、先のElectronよりはハードルが低い、かつ今回やりたいこともできそう！ということで、こちらを採用させていただきました！！
NW.js（公式）
参考にさせていただいた記事
どんなアプリを作ったか？
入力画面で入力した内容を元に書類を印刷できるアプリです。
用意したHTMLは以下の2種。
- データ入力用HTML
- 印刷用HTML
操作の流れは以下の通り。
- データ入力用HTMLでデータの入力を行う。
- データ入力用HTMLの印刷ボタンをクリックすると印刷用HTMLが呼び出される。
- 印刷用HTML＝印刷プレビューなので確認したら印刷する。
そう、Webの技術を使えるのでこれまでのやり方だとEXCELのAPI使ってEXCEL経由で印刷だとかしなくちゃならないか・・・と思ったんですがこのNW.jsを使うと見た目の部分は全部HTMLやCSSやJSで作成しておき、最後はwindow.print();を呼び出してChromeの印刷プレビュー機能から印刷しておしまいなんです！！素敵！！
CSSで印刷を制御する
こちらの記事を参考にさせていただきつつ、試行錯誤！印刷はなかなか大変でした。でも従来のAPI利用で四苦八苦よりかは、だいぶ楽に感じました・・・。
https://qiita.com/cognitom/items/d39d5f19054c8c8fd592
ノンデザイナーの強い味方？！Bootstrap
先述のCSSで印刷を制御するのと同時に、アプリ全体でCSSフレームワークのBootstrapを使いました。特に意識せずグリッドレイアウトが便利だから使ったのですが、後々このアプリを起動しながらExcelの画面なども見たいので画面サイズを自由にして欲しい！という要望があり、結果的にBootstrapのおかげでアプリ本体には手を入れずNW.js側のパラメータ調整だけで要望をクリアできました！！
Bootstrap(公式)
まとめ
今回、上記記載のURLを参考に一つの製品開発を実施したのですが、まず開発が圧倒的に楽でした。本体の中身がまずHTMLとCSSとJSだけという部分でそこに全てを集中できて、印刷まで実現出来たのでありがたかったです。 そしてワンコマンドでビルド完了、Mac,Windows,Linuxで起動できる。開発完了後の意見・要望・不具合への対応も一瞬で終わるものが殆どでした。メンテナンスも楽とは素晴らしい。印刷レイアウトや項目の増減にも一瞬で対応できて最高です。
さらに、開発中は気がつかなかったんですが・・・。実はあの有名なRPGツクールMVでもこのNW.jsを利用していることが判明（笑）というのもこれはどうやってクロスプラットフォームに対応したんだろ？それにMVからHTMLとJSベースになったみたいだし、と購入済みのソフトの中身見てたら構成が一緒でした（笑）というわけでメジャー製品でも利用されているお墨付き？！ライブラリなので、興味と案件が重なった時には是非試して頂きたいフレームワークです！