Electronの入門２：デモアプリのインストールと動作確認

GitHub上のElectron公式アカウントで公開されているElectron API Demosというデモアプリは、基本的なElectron APIのを具体的にどんなことができるのかを知るのに便利だ。よく使うクラスと使い方が、デモの中で解説されているため、これを見ていけばElectronのAPIで何ができるのかが効率的に理解できる。

Electron API Demoのインストール

  • Electron API Demos：https://github.com/electron/electron-api-demos
  • そのパッケージをダウンロードして、Electron開発ソースディレクトリに置けばよいです
  • Windowsのコマンドプロンプトでデモアプリを起動します 
    //デモアプリのディレクトリ内で、以下のコマンドでアプリを起動
electron .

  • 起動途中で以下のエラーが発生するかもしれないです
    globモジュールが足りないエラー

    • Error:Cannot find module 'glob'

globモジュールが足りないエラー

  • Electron API Demoアプリがglobモジュールを要求します
  • globモジュールはファイルをパタン（例：＊、？、＋ など）でマッチング機能であります
  • Windowsのコマンドプロンプトでglobモジュールをインストールします 
    //任意のディレクトリで以下のコマンドでglobをインストール
npm install glob --save

Electronデモアプリの起動

  • 再度Windowsのコマンドプロンプトを起動して、Electronのデモアプリを起動 
    //デモアプリのディレクトリ内で、以下のコマンドでアプリを起動
electron .

    Electronデモアプリ

Electronの入門１：Winodws上でのインストールと動作確認

Electronについて

  • オーペンソースフレームワーク（Open Source Platform）、GitHubで管理されています
  • Node.jpをベースにして、クローズプラットフォーム（Windows,MacOS、Linunxなど）上のネーティブApp構築ができます
  • バックエンドはJavascript＋html＋CSSで記述（フロントエンドのエンジニアに習得するコストは高くないはず）
  • Chromiumでコンテンツを表示します

Windows上でのインストール

  • 最新バージョンのNode.jsをWindowsにインストールします
  • Node.jsの管理ツール：npm(Node Package Manager)でElectronを以下のコマンドでインストール 
    npm install electron -g

     

  • Electronのインストール状況、バージョンを以下のコマンドでチェックします 
    electron -v

     

Electronの基本情報を表示

  • Windowsのコマンドプロンプト（cmd）を起動して、以下の実行コマンドで 
    npx electron

    electronの基本情報