すべてのカテゴリ

Electronの配布パッケージの作成Firebase のストレージとデータベース（Cloud Firestore）を利用してブログサービスを開発する例を紹介しています。 基本的な機能の実装とそれに関連した部分は概ね紹介してきました。今回は、ブログサービスの管理アプリを作成するフレームワークとして、 Electron を使って管理用のデスクトップアプリを作るという方針で進めています。 Electron を利用すると、Windows、Linux、MacOS のアプリが簡単に作成できます。この記事では、各 OS 用の配布パッケージの作成例を紹介します。　Electron の実態は Web ブラウザ！既に紹介していますが、Electron の実態は Web ブラウザです。アプリ専用のウインドウにするために、URL を指定する部分などは取り除かれていますが、基本的な物は Web ブラウザ（Chronium）です。つまり、中身は通常の Web アプリと同じなので、React や Vue のフレームワークを利用して作成したアプリをデスクトップのアプリとして仕上げる事ができるという仕組みです。オープンソースの Web ブラウザの Chornium は各 OS（Windows/Linux/MacOS）をサポートしているので、各 OS 用のモジュールをダウンロードして最終的な配布用のパッケージを作成しています。これが、簡単に各 OS で動作するデスクトップアプリが作れる理由です。 従って、React や Vue で作成した公開用のイメージをローカルの Web サーバーで動作させて、その URL

Electronアプリのビルドのやり方前回は、Electron アプリを作成する「流れ」について解説しました。 開発用の PC 上で、デスクトップアプリを動かすところまでをカバーしています。 この記事では、実際に配布するパッケージをどのように作るかを解説していきます。Electron アプリは複数のプラットフォームで実行可能Electron アプリの最大の魅力は２つです：＊　Windows/Mac/Linux で共通のソースコードで対応可能＊　Web 技術（Javascript/HTML）で開発可能　複数のプラットフォームで実行可能というのは事実ですが、実は制限もあります。この記事ではその辺を含めて配布パッケージを生成する方法を解説していきます。配布パッケージ生成のモジュールElectron アプリの配布パッケージを生成するためのモジュールを使って各プラットフォームの配布パッケージを作ります。最初にやる事はこのパッケージのインストールです。$ npm install electron-builder --save-dev　でインストールができます。実際はアプリのアイコンを指定したりなど細かい事がありますが、今回は標準設定のアイコンを使う事にして、各プラットフォームの配布イメージを作る方法を中心にお届けします。配布パッケージ作成のツールのインストールが済んだら、作成のためのスクリプトの設定を行います。 「package.json」に追記します。例として以下のような記述を追加します。"scripts": {   "start": "npm run build &&