Casual Developers Note

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

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

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

2017年8月16日 By KD コメントを書く

TumblrとWordPressのAMP設定方法とAMPエラーの対処方法

TumblrとWordPressのAMP設定方法とAMPエラーの対処方法

TumblrでもWordPressでも、ブログを運営していると、ある日突然Google Search Console Teamから「AMPページのエラーを修正してください」というメールが送られてくることがあります。実際にGoogle Consoleを見ると同様のエラーが表示されるわけですが、皆さんは対応済みですか?自分も対応したので、その時の方法を共有します。ついでに、AMPの設定方法も紹介します。

そもそもGoogleが推奨するAMPとは?

AMPとはAccelerated Mobile Pagesの略称で、GoogleとTwitterが共同開発している、モバイル端末でブログなどの静的コンテンツを高速に表示するための仕様です。

つまり、この仕様に従ってHTMLを記述すると、GoogleによりAMPのページであると判定され、キャッシュなどによりページの表示が高速化します。さらに、Google検索の結果にAMPのマークが付き、SEO的にも有利になります。

TumblrでAMP機能を有効にするには?

AMPは仕様なので、HTMLを空で書くと準拠するのがめんどくさいですが、Tumblrには簡単にAMPに対応するためのボタンが追加されているため、以下の手順で簡単にブログをAMPに対応させられます。

「外観を編集」->「テーマの編集」->「詳細設定」から「Google AMPを有効にする」を選択する。

WordPressでAMPを有効にするには?

WordPressの場合は「AMP for WP」というそのままのネーミングのプラグインを入れれば自動的に生成されます。

AMP for WP – Accelerated Mobile Pages
AMP for WP – Accelerated Mobile Pages
Download QR-Code
AMP for WP – Accelerated Mobile Pages
Developer: Ahmed Kaludi, Mohammed Kaludi
Price: Free

GoogleからAMPエラーだと言われた時の対処方法

ここでやっと本題です。AMPを有効にした後で、そのブログがAMPの仕様に違反している場合に、Google Search Console Teamから「AMPページのエラーを修正してください」というメールが届きます。あるいは、自分でGoogle Search Consoleからエラーが無いか確認できます。エラーがあった場合はどう対処すればよいのでしょうか?順を追って説明します。

1. AMPのエラーの数を確認する

  1. Google Search Consoleを開く
  2. AMPエラーがある場合は対象のページに「AMP ページのエラーを修正してください 詳細を表示」の表示を確認し、「詳細を表示」のリンクをクリックする
  3. 「レポートを開く」のボタンをクリックする
  4. 「Accelerated Mobile Pages」が表示され、「重大な問題のある AMP ページ」の数を確認できる

2. AMPのエラーの詳細を確認する

  1. 「Accelerated Mobile Pages」から「AMP タグに無効なレイアウト プロパティがある」のリンクをクリックする
  2. エラーのあるAMPページのURLが出てくるので、選んでクリックする
  3. 「ページをテスト」をクリックし、AMPページをテストする
  4. エラーの詳細が確認できる

3. AMPのエラーに対処する

  1. エラーの詳細に沿って原因となっているHTMLを修正する
  2. 「ページをテスト」をクリックして、「有効なAMPページです」と表示されれば完了

これで対処は完了です。

自分の場合の原因と対応

対処方法は分かっていても、いざやってみるとハテナになる場合もありますよね。ということで、自分の場合のAMPエラーを説明しますので参考にしてください。

Tumblrで発生していたAMPエラーのメッセージ

暗黙的レイアウト「CONTAINER」はタグ「amp-img」ではサポートされていません。

原因と対応

このメッセージを見たTumblrユーザはこう思うはずです。「amp-img」タグなんて使ってないけど?カラクリを説明すると、TumblrのAMP機能を有効にした場合、ブログ内の「img」タグは自動的に「amp-img」タグに変換されます。この時「amp-img」タグの使い方が仕様に準拠していないとエラーになるわけです。

自分の場合は「amp-img」タグの仕様を確認した結果、要素に「width」と「height」が足りていないことが原因だったため、その「img」タグ(自分で記事を書いている時はまだ変換される前なので注意)の要素に「width」と「height」を追加することで解決しました。

WordPressで発生していたAMPエラーのメッセージ

タグ「span」の属性「id」に無効な値「AMP」が設定されています。

原因と対応

このメッセージが出たのはまさにこのページなのですが、AMPプラグインで自動生成したHTMLのspanタグに「id=”AMP”」という記述があるという意味でした。これはどういう場合に起こるかというと、h2タグなどの見出しとなるタグ内の文字にアルファベットがAMPしか含まれない場合です。例えば、「AMPとは?」という見出しにするとこのエラーが発生します。これは日本語ならではの現象で、英語で全て書いていれば起こりえません。

対処としては、AMPが含まれている見出しに他のアルファベットを入れて修正する必要があります。例えば、「AMPとは?」ではなく「Googleの推奨するAMPとは?」という風に修正すればエラーがなくなります。

最後に

ここまで辿り着いた皆さんはAMPに対応したブログを完成できましたか?これであなたのページはAMPパワーを存分に発揮してくれることでしょう。

カテゴリ : ライフハック タグ : amp, blog, google, tumblr, tumblr-imported

  • « 前のページ
  • 1
  • 2
  • 3
  • 4
  • …
  • 11
  • 次のページ »

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

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経由で送受信する方法
  • Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
    Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
  • AWS ECRとECSの入門(EC2編) ~ ECSのEC2版を使ってReactのDockerアプリケーションをAWS上で稼働させる方法 ~
    AWS ECRとECSの入門(EC2編) ~ ECSのEC2版を使ってReactのDockerアプリケーションをAWS上で稼働させる方法 ~
  • 爆速でJenkinsをマスターしよう(GitHubアカウント統合編) ~ JenkinsのGitHub Organizationの設定方法 ~
    爆速でJenkinsをマスターしよう(GitHubアカウント統合編) ~ JenkinsのGitHub Organizationの設定方法 ~
  • Amazon EC2インスタンスにSSHできなくなった時の対処法
    Amazon EC2インスタンスにSSHできなくなった時の対処法
  • バンクーバー留学豆知識:バンクーバーのATMで日本の銀行のキャッシュカードを使ってお得にお金を引き出す方法
    バンクーバー留学豆知識:バンクーバーのATMで日本の銀行のキャッシュカードを使ってお得にお金を引き出す方法
  • Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
    Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
  • [tips][bat] バッチで明日の日付を計算する。
    [tips][bat] バッチで明日の日付を計算する。
  • [tips][perl] Perlで文字コードをいい感じに処理する方法
    [tips][perl] Perlで文字コードをいい感じに処理する方法

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