背景
Electronによって、WindowsとMacのマルチプラットフォームアプリが作成出来ます。
Monaca によって、AndroidとiOSのマルチプラットフォームアプリが作成出来ます。
この二つの組み合わせによって、全く同じコードで、
Windows,Mac,Android,iOSの超マルチプラットフォームアプリが作れるという話をします。
また、今回Monacaのアプリケーションは、
OnsenUI というUIコンポーネントを使った例で示しますので、
Electron上でOnsenUIを使う方法、を示すことになります。
本投稿の内容
本投稿では、 ElectronとMonacaを、
同じコード（同じプロジェクトフォルダ）から同時に動かせる状態を
チュートリアル的に示します。
① Monaca/OnsenUIのテンプレートアプリの準備
下記を参照して、同様にOnsenUIV2のテンプレートアプリを作成します。
参照：[Electron] 5分でWin&Macのクロスプラットフォームアプリを作ろう
- カテゴリを選択 ： Onsen UI
- テンプレートを選択： Onsen UI V2 JS Navigation
② Electron実行用ファイルの準備
下記を参照して、app.js と、package.json を作成します。
内容は参照に記載のものとと全く同じで問題ありません。
参照：[Electron] 5分でWin&Macのクロスプラットフォームアプリを作ろう
③ ファイルの配置
①で作成したMonaca/OnsenUIのテンプレートアプリのフォルダに、
②で作成した app.js と package.jsonを配置します。
wwwフォルダ配下、index.htmlがある場所です。
YourAPP
├─.monaca
├─platforms
├─res
└─www
├─components
├─css
├─lib
├─★ここに配置★ app.js
├─★ここに配置★ package.json
├─index.html
└─README.md
④ 実行
monacaの実行は、参照先の手順と同様です。
electronの実行も、参照先の手順と同様です。
プロジェクトフォルダの代わりに、「www」フォルダを
実行対象のフォルダ（GUIにドラッグ＆ドロップするフォルダ）としてください。
これで、OnsenUIをデスクトップアプリにも適用することが出来ました！
おつかれさまでした。
今回作成した形のテンプレートによって、
Android、iOS、Windows、Mac、全てに環境で
同一のコードで動くアプリになりました。
Windowsのファイルシステムを使う場合などや、
Macクセのあるコピー＆ペーストを使う場合などは、
Node.jsを使った実装をしなければならず、Monacaとは異なるのですが、
各OSに依存しないような、JavaScriptのフロント系のアプリならば、
超マルチ環境を維持したまま開発を進めることが出来ます。
エラーが発生する場合の解決策
Monaca×OnsenUIv1 系を、Electronの0.3系に移行した際に、
以下のエラーになって動作しない場合があります。
ReferenceError: Hammer is not defined
少し古い記事になるのですが、Monacaの開発元の人が書いた以下の記事でも、
Hammerスクリプト関連で相性の問題がある、といった趣旨の記載があります。
この問題が発生した場合は、
app.jsに、以下のように１行書き加えてください。
（※ new BrowserWindowの中のカンマ区切りを間違えないように書いてください。）
app.on('ready', function() {
mainWindow = new BrowserWindow(
{
width: 800,
height: 580,
//★ここを追加★
webPreferences: {nodeIntegration: false}
}
);
//以下～略～
});
以上。
この系統の投稿を拡充させてほしいかたは「いいね」をお願いします。
（反応の多いニーズのある話から記載するため）