2018年3月7日TwitterShareGoogle+PocketB!HatenaLINE今日は昨年のお仕事で使った技術を紹介します。タイトルの通りなんですがとある製品開発をすることになりまして、「デスクトップアプリにするか、Webにするか」を悩みました。Platform)にて開発経験があるのですが、いかんせん大変でした。できるだけ楽をしたいからWebにしたいけどサーバを借りるとなるとお金がかかる・・・。(色んな事情から経費的なものは可能な限りゼロ円しばりw)と悩んでいた際にこんな技術があるよ!と教えていただいたので飛びつきました。Electron一つ目はElectronというフレームワーク。RCPとメニュー等の組み方が似て居て、うん、大変!で避けることに。Electron(公式)https://electronjs.org/NW.js二つ目はNW.jsというフレームワーク。こちらは内部的にはGoogleChromeのエンジンが入っててそれをデスクトップアプリとして起動させるというもの。GoogleChromeで出来ること=デスクトップアプリで出来ることになり、先のElectronよりはハードルが低い、かつ今回やりたいこともできそう!ということで、こちらを採用させていただきました!!NW.js(公式)https://nwjs.io/参考にさせていただいた記事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(公式)https://getbootstrap.com/まとめ今回、上記記載のURLを参考に一つの製品開発を実施したのですが、まず開発が圧倒的に楽でした。本体の中身がまずHTMLとCSSとJSだけという部分でそこに全てを集中できて、印刷まで実現出来たのでありがたかったです。ワンコマンドでビルド完了、Mac,Windows,Linuxで起動できる。対応も一瞬で終わるものが殆どでした。メンテナンスも楽とは素晴らしい。印刷レイアウトや項目の増減にも一瞬で対応できて最高です。開発中は気がつかなかったんですが・・・。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。物理的に接続するものを接続して組み立て。...ITNabaztagの日本語音声調査さて・・・。うちの子が息をしたのは良いけど、外国語しか喋れないのはやっぱり気になる。こないだ、アドオンの修正をするのに試行錯誤したので備忘録。アーカイブ2019年7月2019年1月2018年10月2018年9月2018年6月2018年4月2018年3月2018年2月サイト管理者紹介Harukaうさぎさんと暮らし始めたWeb系システムエンジニア。