MochiuWiki : SUSE, EC, PCB

「Electron - Electronの概要」の版間の差分

📢 Webサイト閉鎖と移転のお知らせ
このWebサイトは2026年9月に閉鎖いたします。
新しい記事は移転先で追加しております。（旧サイトでは記事を追加しておりません）

← 古い編集
ビジュアルウィキテキスト
 
(同じ利用者による、間の8版が非表示)
31行目: 31行目:
http://electron.atom.io/docs<br>
http://electron.atom.io/docs<br>
https://github.com/atom/electron<br>
https://github.com/atom/electron<br>
<br><br>
== 開発に必要なパッケージのインストール ==
カスタムElectronバイナリにおいて、LinuxでElectronそのものをビルドする場合は、以下に示すパッケージをインストールする。<br>
<br>
* 必須環境
*: Node.js
*: Python 3.7以降
*: Clang 3.4以降
*: GTK 3およびlibNotifyの開発用ライブラリ
*: <br>
* 必要なパッケージ
*: <code>sudo zypper install clang gperf gtk3-devel libnotify-devel dbus-1-devel \</code>
*: <code>libgnome-keyring-devel libcap-devel alsa-devel cups-devel \</code>
*: <code>libXtst-devel libXrandr-devel \</code>
*: <code>mozilla-nss-devel python3-python-dbusmock</code>
<br>
アプリケーションのソースコードをビルド済みElectronバイナリにバンドルして頒布する場合は、[https://www.electronjs.org/ja/docs/latest/tutorial/application-distribution アプリケーション頒布のガイド]を参照すること。<br>
<br><br>
<br><br>


97行目: 115行目:
     {
     {
       app.quit();
       app.quit();
    }
});
app.on('activate', function()
{
    // MacOSXでは、ウィンドウを全て閉じてもプロセスは生存し続けており、ドックアイコンをクリックすると再表示される
    if (win === null)
    {
      createWindow();
     }
     }
  });
  });
121行目: 148行目:
       mainWindow = null;
       mainWindow = null;
     });
     });
// このファイルには、アプリの他の特定のメインプロセスコードを含めることができる。
// また、別々のファイルに記述して、ここで要求することもできる。
  });
  });
  </syntaxhighlight>
  </syntaxhighlight>
144行目: 174行目:


== ソフトウェアの実行 ==
== ソフトウェアの実行 ==
ターミナルから以下のコマンドを実行して、ソフトウェアを実行する。<br>
プロジェクトのディレクトリに移動して、ターミナルまたはコマンドプロンプト(Powershell)から以下のコマンドを実行する。<br>
  electron app
* ローカルインストール時の場合
** Windows
**: .\node_modules\.bin\electron .
** Linux
**: ./node_modules/.bin/electron .
<br>
上記のコマンドを実行することが面倒な場合、操作を省略する手段として、以下のようなシェルスクリプトまたはバッチファイルを作成する。<br>
以下のファイルをプロジェクトディレクトリのルートに配置することで、1クリックでElectronソフトウェアを起動できる。<br>
<syntaxhighlight lang="sh">
# Start.shファイル(Linux)
#!/usr/bin/env bash
# ローカルインストールの場合
./node_modules/.bin/electron .
# グローバルインストールの場合
electron .
</syntaxhighlight>
<br>
<syntaxhighlight lang="powershell">
# Start.batファイル(Windows)
# ローカルインストールの場合
.\node_modules\.bin\electron .
# グローバルインストールの場合
  electron .
</syntaxhighlight>
<br>
<br>
後は通常のHTML / JavaScriptによる開発と同様である。<br>
後は通常のHTML / JavaScriptによる開発と同様である。<br>
デバッガが表示されているのは、main.jsファイルに以下の行が記述されているからである。<br>
デバッガが表示されているのは、main.jsファイルに以下の行が記述されているからである。<br>
この行をコメントアウトすることで非表示になる。<br>
この行をコメントアウトすることで非表示になる。<br>
<syntaxhighlight lang="javascript>
  main.jsファイル
  main.jsファイル
   
   
  // mainWindow.openDevTools();
  // mainWindow.openDevTools();
</syntaxhighlight>
<br><br>
<br><br>


159行目: 219行目:
# 作業ディレクトリに移動する。
# 作業ディレクトリに移動する。
# 以下のコマンドを実行して、electron-packagerをインスールする。
# 以下のコマンドを実行して、electron-packagerをインスールする。
#: <code>npm install electron-packager -g</code>
#: <code>npm install electron-packager --save-dev</code>(ローカルインストール)  <span style="color:#C00000">※推奨</span>
#: <code>npm install electron-packager -g</code>(グローバルインストール)
# パッケージングを実行する。
# パッケージングを実行する。
#: Windows x86をパッケージング
#: Electronのバージョンは、<code>npm list</code>コマンドを実行することにより確認できる。
#: <code>electron-packager ./app "hello-world" --out=dist --platform=win32 --arch=ia32 --version=0.25.3</code>
#* Linux x64
#: Windows x64 / MacOSXをパッケージング
#: <code>electron-packager ./app "hello-world" --out=dist --platform=linux --arch=x64 --electron-version=<Electronのバージョン></code>
#: <code>electron-packager ./app "hello-world" --out=dist --platform=darwin,win32 --arch=x64 --version=0.25.3</code>
#* Windows x86
#: <code>electron-packager ./app "hello-world" --out=dist --platform=win32 --arch=ia32 --electron-version=<Electronのバージョン></code>
#* Windows x64 / MacOSX
#: <code>electron-packager ./app "hello-world" --out=dist --platform=darwin,win32 --arch=x64 --electron-version=<Electronのバージョン></code>
<br>
<br>
パッケージングが完了すると、以下のディレクトリが生成される。<br>
パッケージングが完了すると、以下のディレクトリが生成される。<br>
  /dist/
  /dist/
  |-- /hello-world-darwin-x64/ (MacOSX)
  |-- /hello-world-linux-x64/ (Linux x64)
  |-- /hello-world-win32-ia32/ (Windows x86)
  |-- /hello-world-win32-ia32/ (Windows x86)
  |-- /hello-world-win32-x64/ (Windows x64)
  |-- /hello-world-win32-x64/ (Windows x64)
|-- /hello-world-darwin-x64/ (MacOSX)
<br>
<br>
このディレクトリを配布することで、他の環境でも実行可能となる。<br>
このディレクトリを配布することで、他の環境でも実行可能となる。<br>
<br>
また、ソフトウェアのソースコードを非公開にすることもできる。
非公開にするためには、まず、プロジェクトディレクトリに作成したappディレクトリの名前をapp.asarディレクトリに変更する。<br>
次に、app.asarディレクトリを、プロジェクトディレクトリ直下のresourcesディレクトリに配置する。<br>
* Linux x64
*: <code>electron-packager ./<Electronのプロジェクトディレクトリ>/resources/app.asar "hello-world" --out=dist --platform=linux --arch=x64 --electron-version=<Electronのバージョン></code>
* Windows x86
*: <code>electron-packager ./<Electronのプロジェクトディレクトリ>/resources/app.asar "hello-world" --out=dist --platform=win32 --arch=ia32 --electron-version=<Electronのバージョン></code>
* Windows x64 / MacOSX
*: <code>electron-packager ./<Electronのプロジェクトディレクトリ>/resources/app.asar "hello-world" --out=dist --platform=darwin,win32 --arch=x64 --electron-version=<Electronのバージョン></code>
<br>
詳細は、[https://github.com/electron/electron/blob/v1.7.6/docs/tutorial/application-packaging.md こちらのWebサイト]を参照すること。<br>
<br><br>
== Electronのサンプル ==
[https://github.com/electron/electron-quick-start electron-quick-startリポジトリ]を使用して、Electronのサンプルをクローンして実行できる。<br>
より多くのサンプル例においては、awesome electronコミュニティにより作成された[https://electron.atom.io/community/#boilerplates boilerplatesリスト]を参照すること。<br>
<br>
# electron-quick-startリポジトリをクローンする。
#: <code>git clone --depth 1 https://github.com/electron/electron-quick-start</code>
# クローンしたディレクトリに移動する。
#: <code>cd electron-quick-start</code>
# 依存関係をインストールする。
#: <code>npm install</code>
# ソフトウェアを実行する。
#: <code>npm start</code>
<br><br>
<br><br>


__FORCETOC__
__FORCETOC__
[[カテゴリ:Electron]]
[[カテゴリ:Electron]]
「http://mochiuwiki.e2.valueserver.jp/index.php?title=Electron_-_Electronの概要」から取得