ElectronならWebデザイナーでも業務アプリが作れる!(2)


ElectronならWebデザイナーでも業務アプリが作れる!(1)の続きです。

無事、パッケージングまでできたので、今回はMonacaで制作した符計算練習100本ノックを移植してみたいと思います!

MonacaアプリからElectronへの移植

まずは、前回の記事で作ったappディレクトリにあたる、プロジェクトのディレクトリを「suzume100」という名前で用意しました。
Monacaのプロジェクトをエクスポートして、html/css/jsファイルをそのディレクトリに入れます。
package.jsonとかはとりあえず前回のを流用します。
index.htmlのみかぶっているので上書きしちゃいますね。

Electron移植

とりあえずこの状態で、いったん実行してみますか。

そうすると・・・

ふふっ

ちょろい( *´艸`)

あっさり画面が表示できてしまいました!

もちろんこのままでは使えないのでさらに調整していきます。

タッチイベントとクリックイベントを共存させたい

Monacaで制作しているときはAndroidアプリとして、スマホでの使用しか想定していませんでした。
そのためタッチイベントしか取得していないので、マウスでクリックしても何も動きません。

すべてをonClickにしてしまうとWindows8のタッチパネルはどうなるんだ?と思ったので、タッチイベントでもクリックイベントでも使えるような設定をします。

こちらを参考にして、下記のようなコードを追加します。

まず最初にタッチイベントが扱えるかどうかを判定します。
扱える場合はタッチイベント、扱えない場合はマウスイベント、というふうに条件によってイベントを設定します。
あとはこの「EVENTNAME_○○」を、対応するイベント名のところと差し替えるだけ!

こんな感じですね。
もともと’touchstart’ってなっていたところを、EVENTNAME_TOUCHSTARTにしました。

こうすることによって、たとえばsuzume100の画面右上にあるヘルプボタンをクリックすると

ちゃ~んと反応してヘルプが開きました!

もちろんアコーディオンリストも開けますよ。

このとおり!(*´∀`*)

このヘルプの下の方に、お問い合わせ先としてメールアドレスとTwitterアカウントの記載があるのですが、それぞれどうなるかクリックしてみました。
アプリ版だと「どのアプリケーションで開きますか」っていうのが出てきて、メールならメール系のアプリ、TwitterならブラウザやTwitterアプリなどが選択できるようになっています。

まず、メールは…

お、おお(;´∀`)

白い画面が急に開くうえに、_systemとかいう武骨なタイトルがついたウィンドウでちょっとビビりましたが、だいたい意図した挙動にはなっていますね。
ちなみにこれはもともと立ち上がっていたsuzume100とは別ウィンドウなので、こいつを閉じても問題なくそのままアプリに戻ることができます。

そして、Twitterの方はというと

お、おおー(゚д゚)!

なにこのWebView感!

いや、まて、もともとこいつHTML5なんだよな。
しかもChromium内臓してるんだよな。
じゃあ、こんなことくらいできるよなぁ…
たしかに。なるほど。おもしろい。

さて、トップに戻って・・・

・・・

・・・

( ゚д゚)ハッ!

ぶ、ブラウザバックが・・・ない!!

あ、当たり前だけど・・・ブラウザじゃないから・・・ブラウザバックにあたる機能が・・・ない!!

UNDOとかREDOってのがあるんだけど、これはたとえばコードエディタみたいなアプリケーションを作ったときに使える感じのやつかな?
カットとかペーストとかもあるもんな!

ヒィー(((゚Д゚)))ガタガタ

デスクトップアプリって・・・そういうことも考えておかないといけないんですね(´・ω・`)

それともうひとつ、今回ヘルプ画面は見ることができましたが、肝心の「はじめる」ボタンから100本ノックをはじめることができませんΣ(´∀`;)
これはMilkcocoaとの連携なんかが絡んでいそう。

次回はこのへんも見ながらさらに調整していきます(`・ω・´)ゞ