さて、今日からはメニュー周りの解説を書いていきます。

デスクトップアプリケーションでは、ウインドウ内の操作以外にもメニューを使った操作を頻繁に使います。

ただ、アプリケーションのメニューについては、WindowsとOSXで考え方が異なります。

デスクトップアプリケーションのメニューについて考える

Windowsでは、アプリケーションのウインドウ上部にメニューがつきます。

ただOSXでは、デスクトップの上部にメニューバーが常に表示されていて、現在利用中のアプリケーションのメニューが反映されます。

また、アプリケーションのライフサイクルについても考え方が違います。

Windowsだとウインドウを閉じるとアプリケーションは終了してしまいますが、OSXではウインドウを閉じてもアプリケーションは終了しません。(まあ、終了するものもありますが)

メニューをつくる際はその辺りの違いも考えておきましょう。

まずは簡単なメニューを実装してみましょう。

今回つくるアプリケーションメニュー

今回はとりあえず、OSX用のアプリを作っていきます。

Windowsは、一旦はサポート外です(動くかもしれませんが)

機能については以下のとおりとします。

• メニューは、アプリケーション名のメニューとHelpのみ
• アプリケーション名のメニューでは、アプリケーションの終了ができる
• Helpメニューは、OSXの標準のヘルプメニューの機能と、About this app的なものがある

つまりメニューは2個です。

メニュー追加の手順

Electronにおけるアプリケーションメニューは、メニューの組み立て用のmenuモジュールと、個々のメニューを構成するmenu-itemモジュールで作成します。

個々のメニューは入れ子構造に出来、下位階層のメニューはサブメニューと呼ばれます。

Electronのmenuモジュールで扱えるメニューは、アプリケーションメニューとコンテキストメニューがあります。

今回は、アプリケーションメニューのみ作成します。

プロジェクトの作成

今まで作ってきたプロジェクトは一旦置いておいて、新しいプロジェクトを作成します。

任意のディレクトリで下記コマンドを実行します。

$ lein new descjop hello_menu +om

プロジェクトの作成が終わったので、プロジェクトディレクトリに移動しておきます。

src/hello_menu/core.cljを今回は編集していきます。

まずは、OSの判定をとっておきましょう。

OSXかどうかの判定をとっておく

デスクトップアプリのメニューに対する考え方は、OSXだけ異なるのでOSXかどうかだけ判定します。

実は判定ロジック自体は、descjopのプロジェクトテンプレートに入っているのでこれを利用して下記のようにします。

(def is-mac (= (.-platform nodejs/process) "darwin"))

これでis-macがtrueかfalseかどうかで判定できるようになりました。

各種モジュールの読み込みをする

今回新たに使うモジュールは、shellとmenuです。

shellは、ブラウザを開くのに使います。

メニュー関係のモジュールは、menuとmenu-itemがありますが、今回はメニューのテンプレートから一気に作成するので、menuしか使いません。

ということで、下記コードをis-macの下に書きます。

(def Shell (nodejs/require "shell"))
  
(def ElectronMenu (nodejs/require "menu"))

続いて、appからアプリケーション名を取得しておきましょう。

OSXのメニューのアプリケーション名として使います。

下記コードを、ElectronMenuの定義の下に書きます。

(def app-name (.getName app))

続いて、メニューの構成を記述していきます。

メニューをアプリケーションに反映させる

続いて、定義したメニューをアプリケーションに反映させましょう。

-main関数の(.on app "ready" (fn [] 処理))にあるreadyイベント内に下記を記述します。

       ;; menu build
       (.setApplicationMenu ElectronMenu
                            (.buildFromTemplate ElectronMenu (clj->js menu-template)))

その結果、-main関数は下記のようになります。

(defn -main []
  (.start crash-reporter)
 
  ;; error listener
  (.on nodejs/process "error"
    (fn [err] (.log js/console err)))
 
  ;; window all closed listener
   (.on app "window-all-closed"
     (fn [] (if (not= (.-platform nodejs/process) "darwin")
              (.quit app))))

  ;; ready listener
   (.on app "ready"
     (fn []
       (reset! *win* (BrowserWindow. (clj->js {:width 800 :height 600})))
 
       ;; when no optimize comment out
       (.loadUrl @*win* (str "file://" (.resolve path (js* "__dirname") "../index.html")))
       ;; when no optimize uncomment
       ;; (.loadUrl @*win* (str "file://" (.resolve path (js* "__dirname") "../../../index.html")))
 
       ;; menu build
       (.setApplicationMenu ElectronMenu
                            (.buildFromTemplate ElectronMenu (clj->js menu-template)))
 
       (.on @*win* "closed" (fn [] (reset! *win* nil))))))