Casual Developers Note

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

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • お問い合わせ
現在の場所:ホーム / アーカイブtutorial

2017年9月17日 By KD コメントを書く

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

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

アメリカの友人と初めて職業について話していた時のことです。自分がエンジニアであることを言うと「Oh, you are patient.」と言われました。え?「患者」じゃなくて「我慢強い」という意味であることは知っていましたが、なぜ?という感じです。話を聞くと、彼は学生時代にプログラミングの授業を1回だけ取ったことがあるそうで、簡単なタイプミスですぐエラーになるのにうんざりして辞めたということでした。あーなるほど、だからpatientかー。ある意味本質をついている気がします。エンジニアは普通の人より我慢強くなければ仕事ができないということです。感情的に他人を批判しているエンジニアは三流でしょう。普通の人未満なわけですから。ま、この記事を見ている皆さんは一流に決まっていますね、こんな長話を読んでいるわけですから(笑)

余談はさておき、前回に引き続き、「文章を話すデスクトップアプリ」を作っていきましょう。

前回のおさらい

  • ElectronアプリはWeb標準技術で実装できる
  • Electronアプリはappオブジェクトから始まる
  • appからBrowserWindowオブジェクトを生成して画面を表示している
  • Chromeと同じデベロッパーツールが使える(なぜならElectronはChromiumでできているから)

1. Electron内のデータ通信の仕組み

今回からHello以上の機能を作っていくわけですが、その前にElectronアプリ内でのデータ通信の仕組みを簡単に説明します。

1-1. IPCシステム

IPCシステムとはinter-process communication systemの略称で、1つのメインプロセス(app)と複数のレンダラープロセス(BrowserWindow)との間のデータ通信の方法のことです。

[app]  ipcMain.on  <--------------------  ipcRenderer.send [fooWindow]
[app]  barWindow.webContents.send -------> ipcRenderer.on  [barWindow]
[app]  ipcMain.on  <--------------------  ipcRenderer.send [barWindow]
[app]  fooWindow.webContents.send -------> ipcRenderer.on  [fooWindow]

この図では、矢印はデータが行き来している方向を示しており、BrowserWindowオブジェクトであるfooWindowとbarWindowが通信している様子を示しています。ウィンドウ同士が直接やり取りするのではなく、必ずappを経由している点がポイントです。

1-2. 軽くドキュメントに目を通しておきましょう。

  • ipcMain
  • webContents
  • ipcRenderer

2. 基本機能を作ろう!

「文章を話すデスクトップアプリ」ってイメージできていますか?何かを作る時は設計が重要です。設計書を書く?データベース設計から始める?そんな時代は終わっています。今設計といえばUIデザインがメインになります。今はコンポーネント設計全盛期です。従来の設計書やデータベース設計が不要とは言っていませんよ。現実世界はコンピュータのように0と1だけでは無いのです。・・・なんてね(笑)というか、今回はそこまで複雑なものは作らないので。

2-1. このアプリの機能の定義

「文章を話すデスクトップアプリ」の機能は以下の3つとします。

  • 文章を追加する(基本機能) ※別ウィンドウにする
  • 文章を削除する(基本機能)
  • 文章を話す(次回)

メインウィンドウに3つのボタン(追加、削除、話す)を用意し、それらのボタンをクリックすることで動作させます。UIは以下のようなイメージです。

今回の記事では基本機能までを作っていきます。

2-2. 基本機能の実装

フォルダ構成の確認

前回のフォルダを開き、新しくinput.htmlを作成します。フォルダ構成が問題ないことを念のため確認してください。

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

index.jsのコーディング

それでは、メインのJavascriptをコーディングしましょう。IPCシステムを意識すると理解が深まります。また、当たり前ですがコピペはせずにタイプしてください。コピペだとこの記事で学んだことは明日には忘れていますよ。

const electron = require("electron");
const { app, BrowserWindow, ipcMain } = 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());
});

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();
});

index.htmlのコーディング

次に、メインウィンドウをコーディングしましょう。

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Speak Sentences</title>
</head>

<body>
  <h1>Speak Sentences</h1>

  <button id="input-sentence">Input</button>
  <button id="clear-sentences">Clear</button>

  <div id="sentences"></div>

  <script>
    const electron = require('electron');
    const { ipcRenderer } = electron;

    const sentences = document.getElementById('sentences');
    const insert = document.getElementById('input-sentence');
    const clear = document.getElementById('clear-sentences');

    // Request a input window.
    insert.addEventListener('click', (event) => {
      ipcRenderer.send('inputWindow:create');
    });

    // Clear sentences.
    clear.addEventListener('click', (event) => {
      sentences.innerHTML = '';
    });

    // Insert sentence.
    ipcRenderer.on('sentence:insert', (event, sentence) => {
      if (sentence.trim() === '') {
        return;
      }
      const text = document.createTextNode(sentence);
      const p = document.createElement('p');
      p.appendChild(text);
      sentences.appendChild(p);
    });
  </script>
</body>

</html>

input.htmlのコーディング

最後に、入力用のウィンドウをコーディングしましょう。

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Input Text</title>
</head>

<body>
  <form>
    <div>
      <label>Text: </label>
      <input autofocus />
    </div>
    <button type="submit">Enter</button>
  </form>

  <script>
    const electron = require('electron');
    const { ipcRenderer } = electron;

    // Insert text.
    document.querySelector('form').addEventListener('submit', (event) => {
      event.preventDefault();
      const { value } = document.querySelector('input');
      ipcRenderer.send('sentence:insert', value);
    });
  </script>
</body>

</html>

Electron実行!

$ npm run electron

以下の画面が表示され、InputボタンとClearボタンが動作すれば完成です。

新しく追加したウィンドウとメインウィンドウは問題なく連携されていますか?動かなかったらデバッグしましょう。

最後に

今回はElectronのIPCシステムを利用してアプリの基本機能を実装しました。次回はこのアプリの肝である「話す」部分を作っていきます。正直言うと、今回の記事に書いてあることを完全に理解しているのであれば余裕です。では、お楽しみに。

環境

  • OS: macOS Sierra 10.12.6
  • NodeJS: v8.4.0
  • NPM: 5.4.0
  • Electron: 1.7.6

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

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

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

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

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

今回から何回かに分けて「文章を話すデスクトップアプリ」をステップバイステップで作っていきますので、ぜひ楽しんで下さい。

Electronとは?

ElectronとはGitHub社が開発しているHTML5とNodeJSを組み合わせて、Web技術だけでデスクトップアプリが作れるというフレームワークです。

ご存知の方も多いと思いますがGitHub上にコミットされているプログラミング言語でトップはJavascriptです。それは自然な話で、コミッターがプログラマやエンジニアだけならいろいろな言語がトップになる可能性が出てきますが、Webデザイナーもコミットしていますし、最近のWeb技術はJavascriptフレームワークのオンパレードなので、相対的にJacascriptが多くなるのは当然ですね。

流行りのエディタのATOMやVisual Studio CodeはElectronで書かれていますし、チャットアプリのSlackやデスクトップ版のWordPressもElectronで書かれています。

Javascriptでフレームワークを作ってオープンにすれば流行るというGitHubの思惑は大成功していますね。あなたもこの波に乗ってみませんか?

対象

HTMLとJacascript、NodeJSの基本知識があれば誰でもOKです。ES6を知っているとなお良いです。実際は、コードは全て載せますので、何も知らなくても動くものは作れます。

1. 開発環境準備

まずはベイビーステップというこで、開発環境を作りましょう。すでに開発環境がある人は飛ばして構いません。

Macなので当然全てコマンドラインから行います。簡単なので。もしインストーラをダウンロードしている人がいたら時代遅れなので、この機会にコマンドラインからインストールする方法を学ぶことをお薦めします。黒い画面が怖い人は白い画面にすれば大丈夫です。Macの標準は白ですけどね(笑)

1-1. Homebrewのインストール

ターミナルを開いて以下のコマンドでHomebrewとHomebrew-Caskをインストールしましょう。

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
$ brew tap caskroom/cask

1-2. エディタのインストール

Jacascriptを開発するためのエディタは2択です。Visual Studio CodeかATOMの好きな方を入れて下さい。エディタ議論は趣味の問題なので、強い嗜好が無い人は基本的に新しいものから選ぶとはずれないです。お薦めはVisual Studio Codeなので、以下のコマンドでインストールできます。

$ brew cask install visual-studio-code

1-3. NodeJSのインストール

ここでは最新のNodeJSをインストールしましょう。

$ brew install node

もしバージョンを変えていろいろ管理したい場合は、nvmやnodebrew、anyenvなどを試してみて下さい。nodebrewの使い方を詳しく知りたい場合はこちらの記事へどうぞ。

1-4. Electronのインストール

チュートリアル用のプロジェクトフォルダを作って、Electronをインストールしましょう。

$ mkdir speak-sentences
$ cd speak-sentences
$ npm init -y
$ npm install electron --save
$ ls
node_modules/      package-lock.json  package.json
$ cat package.json
{
  "name": "speak-sentences",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "electron": "^1.7.6"
  }
}

これで準備は万端です。簡単ですね。

2. Hello, Electron!

それではいよいよElectronでアプリを書きましょう。エディタでプロジェクトフォルダを開いて下さい。

2-1. package.jsonにElectronコマンドを追加する

すでにあるpackage.jsonのscriptsを変更するだけです。

{
  "name": "speak-sentences",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "electron": "electron ."
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "electron": "^1.7.6"
  }
}

2-2. 表示するメインウィンドウをHTMLで作成する

プロジェクトフォルダ内で「index.html」ファイルを作成しましょう。

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Hello, Electron!</title>
</head>

<body>
  <h1>Hello, Electron!</h1>
</body>

</html>

2-3. ElectronのメインとなるJavascriptを作成する

プロジェクトフォルダ内で「index.js」ファイルを作成しましょう。

const electron = require("electron");
const { app, BrowserWindow } = electron;

let mainWindow;

app.on("ready", () => {
  mainWindow = new BrowserWindow({});
  mainWindow.loadURL(`file://${__dirname}/index.html`);
  mainWindow.on("closed", () => app.quit());
});

appがElectronのメインアプリケーションオブジェクト、BrowserWindowオブジェクトはElectronでウィンドウを作る時に使うオブジェクトです。やっていることは、BrowserWindowオブジェクトを生成して、そのウィンドウにindex.htmlを読み込んでいるのと、メインウィンドウなので、画面を閉じた時にElectronが終了するように設定しています。このindex.htmlに通常のWebデザインを施せば、オシャレなデスクトップアプリを作ることができます。

2-4. Electronを実行する

それでは最後に実行して動くことを確認してみましょう。 ターミナルを開いて以下を実行してみてください。

$ npm run electron

以下の画像が表示されれば成功です!

うまくいきましたか?ちなみに、メインウィンドウ上でOption+Command+Iを実行してみてください。Chromeと同じデベロッパーツールが使えることが分かります。デバッグ方法も同じなので、慣れたもんですね。

最後に

今回は簡単なウォーミングアップという感じで環境を準備しました。次回からは機能を作りはじめます。では。

環境

  • OS: macOS Sierra 10.12.6
  • Homebrew: 1.3.1
  • Homebrew-Cask: 1.3.1
  • NodeJS: v8.4.0
  • NPM: 5.4.0
  • Electron: 1.7.6

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

  • « 前のページ
  • 1
  • 2

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

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)

アーカイブ

最高の学習のために

人気記事ランキング

  • Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
    Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
  • MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
    MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
  • バンクーバー留学豆知識:バンクーバーのATMで日本の銀行のキャッシュカードを使ってお得にお金を引き出す方法
    バンクーバー留学豆知識:バンクーバーのATMで日本の銀行のキャッシュカードを使ってお得にお金を引き出す方法
  • Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
    Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
  • SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
    SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
  • AWS ECRとECSの入門(EC2編) ~ ECSのEC2版を使ってReactのDockerアプリケーションをAWS上で稼働させる方法 ~
    AWS ECRとECSの入門(EC2編) ~ ECSのEC2版を使ってReactのDockerアプリケーションをAWS上で稼働させる方法 ~
  • [tips][Windows] Windows Updateを一括で行う方法
    [tips][Windows] Windows Updateを一括で行う方法
  • 初級JavascriptフルスタックエンジニアのためのReactとExpressの同時開発チュートリアル(基本的なアプリ作成と同時開発環境構築編)
    初級JavascriptフルスタックエンジニアのためのReactとExpressの同時開発チュートリアル(基本的なアプリ作成と同時開発環境構築編)
  • [tips][Sublime Text] Sublime Text 3で文字化けしない方法
    [tips][Sublime Text] Sublime Text 3で文字化けしない方法
  • オブジェクト指向の基本原則「SOLID Principles」からプログラミングの基本を学ぶ
    オブジェクト指向の基本原則「SOLID Principles」からプログラミングの基本を学ぶ

Bitcoin寄付 / BTC Donation

Bitcoinを寄付しよう

BTC
Select Payment Method
Personal Info

Donation Total: BTC 0.0010

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

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

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

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

Copyright © 2023 KD - Casual Developers Notes