search
LoginSignup
29
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

Organization

Android&iOS&Win&Macが同じコードで動く!超マルチアプリを作ろう[Monaca × Electron]

背景

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に、以下のように1行書き加えてください。
(※ new BrowserWindowの中のカンマ区切りを間違えないように書いてください。)

app.js
app.on('ready', function() {
  mainWindow = new BrowserWindow(
    {
      width: 800, 
      height: 580,
      //★ここを追加★
      webPreferences: {nodeIntegration: false}
    }
  );  
  //以下~略~
});

以上。


この系統の投稿を拡充させてほしいかたは「いいね」をお願いします。
(反応の多いニーズのある話から記載するため)

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
29
Help us understand the problem. What are the problem?