Casual Developers Note

エンジニアやデザイナー向けの技術情報・英語学習情報・海外留学情報・海外旅行情報を提供中。世界を旅して人生を楽しもう。

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • お問い合わせ
現在の場所:ホーム / 技術 Tips & Tutorials / [Tutorial][Electron] Electronで文章を話すアプリを作ってみよう #4 メニューバー実装編

2017年10月1日 By KD コメントを書く

[Tutorial][Electron] Electronで文章を話すアプリを作ってみよう #4 メニューバー実装編

[Tutorial][Electron] Electronで文章を話すアプリを作ってみよう #4 メニューバー実装編

最近はITの情報は全て英語で仕入れるようになりました。英語ができるからではありません。単純に新しいことをやろうとすると日本語の情報が少なすぎるからです。なので毎日英語の勉強を必ずしています。英語の勉強は時間のかかる戦いです。一度でも立ち止まってしまったら終わりです。「継続は力なり」という古い言葉を噛み締めています。皆さんはペラペラですか?

前回までで「文章を話すデスクトップアプリ」の機能は全て作り終えました。ただ、まだこのデスクトップアプリを世の中に出すには問題がいくつかあります。今回はその一つであるメニューバーをカスタマイズしてみましょう。

見出し

  • 1 前回のおさらい
  • 2 1. メニューバーのカスタマイズ
    • 2.1 1-1. メニューバーとは?
    • 2.2 1-2. ドキュメントを読んでみよう
  • 3 2. コーディングしよう!
    • 3.1 2-1. 独自メニューバーを作る
    • 3.2 2-2. 開発者用メニューバーを作る
    • 3.3 2-3. 必要に応じてメニューバーを調整する
    • 3.4 2-4. 開発者版とプロダクション版でコマンドを分ける
    • 3.5 2-5. 全体のソースコード(今回編集分)
  • 4 3. 動かして確認しよう!
    • 4.1 3-1. 開発者版として実行
    • 4.2 3-2. プロダクト版として実行
  • 5 宿題
  • 6 最後に
    • 6.1 環境
    • 6.2 関連記事

前回のおさらい

  • インスタントコーヒーのような味気ない人生より選択を楽む人生にしよう
  • Web Speech APIを使えば文章を読み上げる機能が作れる
  • WebのライブラリやAPIはElectronでは大抵使える

1. メニューバーのカスタマイズ

1-1. メニューバーとは?

デスクトップアプリのメニューバーと言ってイメージできますか?そうです、アプリを起動している時に左上にあるメニューのことです。

前回までのアプリを起動していみると、メニューバーはデフォルトのままなので、以下のようになっています。

これじゃ、いくらなんでも誰かにアプリを提供できません。なので、メニューバーをカスタマイズする必要があるわけです。

1-2. ドキュメントを読んでみよう

ElectronではMenuオブジェクトを使ってメニューバーのカスタマイズを行います。以下のドキュメントに軽く目を通して下さい。

  • Menu

2. コーディングしよう!

それではメニューバーをカスタマイズしていきましょう。

2-1. 独自メニューバーを作る

今回はデフォルトのメニューバーを無効化した上で、簡単にアプリが終了できるようにQuitのメニューをメニューバーに追加してみましょう。

いつも通りまずはフォルダ構成を確認します。

$ cd speak-sentences
$ ls
index.html         index.js           input.html         node_modules/      package-lock.json  package.json

変更するファイルはindex.jsだけです。以下のコードを追加しましょう。

index.jsに変更・追加する部分

const { app, BrowserWindow, ipcMain, Menu } = electron;

app.on("ready", () => {
  mainWindow = new BrowserWindow({
    width: 500,
    height: 500
  });
  mainWindow.loadURL(`file://${__dirname}/index.html`);
  mainWindow.on("closed", () => app.quit());
  // Menu
  const mainMenu = Menu.buildFromTemplate(menuTemplate);
  Menu.setApplicationMenu(mainMenu);
});

// Menu
const menuTemplate = [
  {
    label: "Menu",
    submenu: [
      {
        label: "Quit",
        accelerator: process.platform === "darwin" ? "Command+Q" : "Ctrl+Q",
        click() {
          app.quit();
        }
      }
    ]
  }
];

MenuオブジェクトのbuildFromTemplateを使い、Javascriptオブジェクトの配列として書いたメニューから、カスタマイズされたメニューバーを生成して登録しています。Command+Qで終了するようにショートカットも設定しています。

2-2. 開発者用メニューバーを作る

先程の独自メニューバーには開発する上で問題があります。Webデザイナかフロントエンジニアならすぐに気づいたと思いますが、Command+Alt+Iが効かないのです。プロダクションとしてはそれで良いですが、開発する場合は困ってしまいます。ということで、Developメニューを追加しましょう。

以下をindex.jsに追記します。

// Show Developer Tools
if (process.env.NODE_ENV === "development") {
  menuTemplate.push({
    label: "Develop",
    submenu: [
      {
        label: "Developer Tools",
        accelerator:
          process.platform === "darwin" ? "Command+Alt+I" : "Ctrl+Shift+I",
        click(item, focusedWindow) {
          focusedWindow.toggleDevTools();
        }
      }
    ]
  });
}

NodeJSの環境変数であるprocess.env.NODE_ENVに応じて、プロダクション版か開発者版かを切り替えるようにしています。

2-3. 必要に応じてメニューバーを調整する

ここまででメニューのカスタマイズは完成しています。あとは好みの問題だとは思いますが、Macの場合はメニューテンプレートの一番最初のラベルがアプリケーションのラベルと重なってしまい見えません。これをわかった上で今回は作っているので問題ありませんが、ズラして表示したい場合は以下のコードを追加しましょう。

同様にindex.jsに以下を追加するとメニューバーのラベルが全て見えるようになります。

if (process.platform === "darwin") {
  menuTemplate.unshift({});
}

これを設定すると、以下になっていたものが。

以下のようになります。

Macの場合、だいたいアプリ名の下にメニューがありますから、この動きを前提に作った方が個人的には自然な気がします。これはお好みで。

2-4. 開発者版とプロダクション版でコマンドを分ける

NodeJSでは当たり前ですが、process.env.NODE_ENVによって動きを分けているので、コマンドも分けます。

以下のようにpackage.jsonのscriptsを変更しましょう。

  "scripts": {
    "electron": "NODE_ENV=development electron .",
    "production": "NODE_ENV=production electron ."
  },

2-5. 全体のソースコード(今回編集分)

今回編集したソースコードの全体は以下です。

index.js

const electron = require("electron");

const { app, BrowserWindow, ipcMain, Menu } = electron;

let mainWindow;
let inputWindow;

app.on("ready", () => {
  mainWindow = new BrowserWindow({
    width: 500,
    height: 500
  });
  mainWindow.loadURL(`file://${__dirname}/index.html`);
  mainWindow.on("closed", () => app.quit());
  // Menu
  const mainMenu = Menu.buildFromTemplate(menuTemplate);
  Menu.setApplicationMenu(mainMenu);
});

function createInputWindow() {
  inputWindow = new BrowserWindow({
    width: 300,
    height: 300
  });
  inputWindow.loadURL(`file://${__dirname}/input.html`);
  inputWindow.on("closed", () => (inputWindow = null));
}

// Create a input window.
ipcMain.on("inputWindow:create", event => {
  createInputWindow();
});

// Send a sentence to a main window.
ipcMain.on("sentence:insert", (event, sentence) => {
  mainWindow.webContents.send("sentence:insert", sentence);
  inputWindow.close();
});

// Menu
const menuTemplate = [
  {
    label: "Menu",
    submenu: [
      {
        label: "Quit",
        accelerator: process.platform === "darwin" ? "Command+Q" : "Ctrl+Q",
        click() {
          app.quit();
        }
      }
    ]
  }
];

// Show Developer Tools
if (process.env.NODE_ENV === "development") {
  menuTemplate.push({
    label: "Develop",
    submenu: [
      {
        label: "Developer Tools",
        accelerator:
          process.platform === "darwin" ? "Command+Alt+I" : "Ctrl+Shift+I",
        click(item, focusedWindow) {
          focusedWindow.toggleDevTools();
        }
      }
    ]
  });
}

package.json

{
  "name": "speak-sentences",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "electron": "NODE_ENV=development electron .",
    "production": "NODE_ENV=production electron ."
  },
  "keywords": [],
  "author": "Keid",
  "license": "MIT",
  "dependencies": {
    "electron": "^1.7.6"
  }
}

3. 動かして確認しよう!

では起動してみます。プロダクト版と開発者版でメニューバーが変わるか確認していきましょう。

3-1. 開発者版として実行

$ npm run electron

以下のようにメニューバーが表示され、メニューやショートカットが動けば成功です。

ショートカットもちゃんと動きますか?

3-2. プロダクト版として実行

$ npm run production

以下のようにメニューバーからDevelopメニューが消えていれば成功です。

これでメニューバーを他人に見せても恥ずかしくないですね。

宿題

次回はこのデスクトップアプリをビルドします。なので、アイコンが必要です。次回までにicnsのアイコン画像の準備をお願いします。まあ、無い場合はアイコン無しで進められますが、若干物足りなさがありますので、準備することをお薦めします。

最後に

今回でアプリ作成としては終了です。必要に応じてCSSなどでデザインを飾っていくとオシャレになっていきますよ。次回はこのシリーズの最後の、Electronのビルドです。ここまでくればそれなりのものを作って配布できるようになります。ではお楽しみに。

環境

  • OS: macOS Sierra 10.12.6
  • NodeJS: v8.4.0
  • NPM: 5.4.0
  • Electron: 1.7.6
The following two tabs change content below.
  • この記事を書いた人
  • 最新の記事
KD
Twitter のプロフィール

KD

世界を旅し日本を愛するエンジニア。大学でコンピュータサイエンスの楽しさを学び、日本の大手IT企業で働く中で、新しい技術やスケールするビジネスが北米にある事に気づく。世界に挑戦するための最大の壁が英語であったため、フィリピン留学およびカナダ留学を経て英語を上達させた。現在は日本在住でエンジニアとして働きつつ、次の挑戦に備えて世界の動向を注視している。挑戦に終わりはない。このブログでは、エンジニアやデザイナー向けの技術情報から、海外に留学したい人向けの留学情報、海外に興味がある人向けの海外旅行情報など、有益な情報を提供しています。
KD
Twitter のプロフィール

最新記事 by KD (全て見る)

  • 2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介 - 2020年1月13日
  • 今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~ - 2019年11月4日
  • ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~ - 2019年10月30日

関連記事

  • [Tutorial][Electron] Electronで文章を話すアプリを作ってみよう #2 基本機能実装編

    アメリカの友人と初めて職業について話していた時のことです。自分がエンジニアであることを言うと「Oh, you are p…

  • [Tutorial][Electron] Electronで文章を話すアプリを作ってみよう #3 Web Speech APIを使った音声機能実装編

    コーヒー豆が尽きた時にインスタントにするのですが味気ない。。。自分はそんなにコーヒーの味にうるさい方では無いのですが、ド…

  • [Tutorial][Electron] Electronで文章を話すアプリを作ってみよう #1 開発環境準備編

    最近Electronが面白くて仕方がないです。なんてったって、Webの標準技術でデスクトップアプリが作れちゃうんですから…

カテゴリ : 技術 Tips & Tutorials タグ : electron, menu, tumblr-imported, tutorial

コメントを残す コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

ブログ更新情報や海外の関連情報などを配信する無料メルマガ

Sponsored Links

About Author

KD

世界を旅し日本を愛するエンジニア。大学でコンピュータサイエンスの楽しさを学び、日本の大手IT企業で働く中で、新しい技術やスケールするビジネスが北米にある事に気づく。世界に挑戦するための最大の壁が英語であったため、フィリピン留学およびカナダ留学を経て英語を上達させた。現在は日本在住でエンジニアとして働きつつ、次の挑戦に備えて世界の動向を注視している。挑戦に終わりはない。このブログでは、エンジニアやデザイナー向けの技術情報から、海外に留学したい人向けの留学情報、海外に興味がある人向けの海外旅行情報など、有益な情報を提供しています。

https://casualdevelopers.com/

最近の投稿

  • 2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

    2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

    2020年1月13日
  • 今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~

    今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~

    2019年11月4日
  • ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~

    ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~

    2019年10月30日
  • BashからZshに移行する方法(Mac編)

    BashからZshに移行する方法(Mac編)

    2019年10月21日
  • Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)

    Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)

    2019年9月30日

カテゴリ

  • 技術 Tips & Tutorials (100)
  • 技術塾 (6)
  • ライフハック (26)
  • 海外留学 (12)
  • 英語学習 (3)
  • コラム (6)

アーカイブ

最高の学習のために

人気記事ランキング

  • MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
    MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
  • SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
    SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
  • Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
    Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
  • Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
    Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
  • Amazon EC2インスタンスにSSHできなくなった時の対処法
    Amazon EC2インスタンスにSSHできなくなった時の対処法
  • [tips][perl] Perlで文字コードをいい感じに処理する方法
    [tips][perl] Perlで文字コードをいい感じに処理する方法
  • SLF4JとLogbackによるJavaのロギング入門(SLF4J + Logback + Lombok)
    SLF4JとLogbackによるJavaのロギング入門(SLF4J + Logback + Lombok)
  • AWS ECRとECSの入門(EC2編) ~ ECSのEC2版を使ってReactのDockerアプリケーションをAWS上で稼働させる方法 ~
    AWS ECRとECSの入門(EC2編) ~ ECSのEC2版を使ってReactのDockerアプリケーションをAWS上で稼働させる方法 ~
  • PythonでWebスクレイピング入門(Scrapy+Selenium編)
    PythonでWebスクレイピング入門(Scrapy+Selenium編)
  • [tips][Sublime Text] Sublime Text 3で文字化けしない方法
    [tips][Sublime Text] Sublime Text 3で文字化けしない方法

Bitcoin寄付 / BTC Donation

Bitcoinを寄付しよう

BTC
Select Payment Method
Personal Info

Donation Total: BTC 0.0010

このブログの運営のためにBitcoinでの寄付を募集しています。お気持ち程度の寄付を頂けると管理者の励みになります。

Bitcoin寄付について知りたい方はこちらの記事へ

The following two tabs change content below.
  • この記事を書いた人
  • 最新の記事
KD
Twitter のプロフィール

KD

世界を旅し日本を愛するエンジニア。大学でコンピュータサイエンスの楽しさを学び、日本の大手IT企業で働く中で、新しい技術やスケールするビジネスが北米にある事に気づく。世界に挑戦するための最大の壁が英語であったため、フィリピン留学およびカナダ留学を経て英語を上達させた。現在は日本在住でエンジニアとして働きつつ、次の挑戦に備えて世界の動向を注視している。挑戦に終わりはない。このブログでは、エンジニアやデザイナー向けの技術情報から、海外に留学したい人向けの留学情報、海外に興味がある人向けの海外旅行情報など、有益な情報を提供しています。
KD
Twitter のプロフィール

最新記事 by KD (全て見る)

  • 2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介 - 2020年1月13日
  • 今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~ - 2019年11月4日
  • ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~ - 2019年10月30日

関連記事

  • [Tutorial][Electron] Electronで文章を話すアプリを作ってみよう #2 基本機能実装編

    アメリカの友人と初めて職業について話していた時のことです。自分がエンジニアであることを言うと「Oh, you are p…

  • [Tutorial][Electron] Electronで文章を話すアプリを作ってみよう #3 Web Speech APIを使った音声機能実装編

    コーヒー豆が尽きた時にインスタントにするのですが味気ない。。。自分はそんなにコーヒーの味にうるさい方では無いのですが、ド…

  • [Tutorial][Electron] Electronで文章を話すアプリを作ってみよう #1 開発環境準備編

    最近Electronが面白くて仕方がないです。なんてったって、Webの標準技術でデスクトップアプリが作れちゃうんですから…

ビットコイン取引ならここ

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • サイトマップ
  • タグ一覧
  • プライバシーポリシー
  • お問い合わせ

Copyright © 2023 KD - Casual Developers Notes