Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
29
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

@youwht

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}
    }
  );  
  //以下~略~
});

以上。


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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
29
Help us understand the problem. What are the problem?