すべてのカテゴリ

Electronの仕組みに迫る！？Vue のフレームワークを利用して、拡張機能を追加すると Electron のアプリも簡単に作成できます。この記事ではそうした拡張機能を利用しないで Electron の設定は行う例を紹介します。少し面倒ですが、それほど難しい物ではありません。自分で設定すると Electron の仕組みの一部が見えてきます！基本設定の手順Electron の設定は難しくありません。基本要素は、Web ページの作成とほぼ同じです。＊　Javascript / Typescript の設定＊　基本の Web ページの準備＊　Electron のエントリーポイント（初期化）ファイルの作成＊　スクリプトの設定　という感じです。Javascript でプログラムを記述する場合には事前のコンパイルは不要なので特別な設定は不要です。しかし、Typescript で記述したい場合には、Web ブラウザで実行できるように、Javascript に変換する必要があります。従って、Typescript をコンパイルするための設定が必要になります。プロジェクトフォルダの作成最初にやることは、Electron のアプリのプロジェクトのフォルダを作成してその設定を行います。 フォルダを作成して、そのフォルダに移動します。その上で、npm のパッケージ管理機能を利用できるように、「npm init -y」を実行してフォルダを初期化します。$ mkdir xxxx$ cd xxxx$ npm init -y　基本パッケージのインストールElectron アプリの基本パッケージをインストールし

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

Firebase を使ったサービスの管理アプリを Electron で作る！Firebase のストレージとデータベースの機能を利用して Web サイトを利用する際に必要になる管理用のアプリを Electron を利用して作成する方法を紹介します。どうて Electron を使うのか？Firebase の機能を利用したサービスを作る場合、管理用の機能が必要になる場合がたくさんあります。 管理用のためのアクセスと一般の利用者のアクセスは違う場合が多く、管理用のアクセスではサイトに記事を投稿したり、投稿の変更（修正）をしたり、不要な記事を削除するなど、通常の利用者とは違う操作が必要になります。これを行うのは限られた利用者（ユーザー）のみで、この権限を悪用されるとサイトの内容が改変されたりしてセキュリティ上の問題となります。もちろん特定のユーザーとしてユーザー認証（ログイン）したユーザのみの利用にすることは言うまでもありません。しかし、パスワードが破られるとアクセスが可能になってしまいます。完全なセキュリティ対策は無いものの、もう少し高いセキュリティを考えると、管理用の機能はインターネットに公開しないと言う対策は一つの方法です。つまり、インターネットではなく管理用の PC にアプリを入れて管理するという方法の方がより安全ということになります。インターネットから管理できる方が便利ですが、安全を優先する場合にはデスクトップアプリの方が良いということになります。そこで、デスクトップアプリを Electron を利用して作る方法を取り上げてみました。Electron の正体は何か？ここで E

Electron - なぜ色々なOSで動く？Electron アプリは、Windows/Mac/Linux で動作させることが出来ます。とても便利ですが、どうして簡単にそんな事ができるのでしょうか？この記事では、その謎に迫ってみようと思います。Electron の中身を知るElectron 自体は、GitHub が開発したフレームワークです。基本コンセプトは Web 開発の技術を使ってデスクトップのアプリを作ろうという物です。 中身はというと、「Chromium」と「Node.js」を使ってデスクトップのアプリを実現しています。実は、この「Chromium」に Electron の秘密があります。「Chromium」自体は、Google の Chrome ブラウザの基になっているオープンソースです。つまり、簡単に一言で言うならば Electron は Web ブラウザ上で動いているアプリと言うことになります。実際には、アプリ限定の機能だけを表示できる Web ブラウザと言う方がわかりやすいかもしれません。デスクトップアプリ専用のブラウザを作ってその中で実行していると言うのが Chromium を使った Electron アプリの原理です。エントリーポイントはブラウザを作るための仕組みElectron アプリのエントリーポイントのコードは簡単に言うとアプリ専用のブラウザを準備するための仕組みです。通常の Web アプリの場合は、既存の Web ブラウザを使うために、この部分は必要ありません。URL を指定すれば、その場所からデータを取ってきて表示してくれます。 Electron

ElectronアプリでReact/Vue Routerを使うには？前回は、Electron アプリでメニューバーをカスタマイズする方法をお伝えしました。 Web アプリを React や Vue のフレームワークを使って作る場合、ページの切り替えに「Router」を使う場合が多くなります。Vue の場合は Vue Router、React の場合、React Router（react-router-dom）を使う場合が多いと思います。Web ベースのアプリを Electron でデスクトップのアプリにする場合は、この方法でページ（表示）を切り替える方が便利な場合があります。この記事は、React/Vue を使ってアプリを作る際に、React Router を使って表示を切り替える方法について解説します。React Router はハッシュヒストリを使う通常の Web 開発で React Router を使う場合は、「BrowserRouter」をインポートして使う場合が多いと思いますが、Electron と併用して利用する場合は、この使い方では動作しません。対策としては、ハッシュヒストリモード(Hash History)を使います。 Web アプリのトップレベルの記述例は以下のような感じで、「BrowserRouter」を「HashRouter」に置き換えるだけです。import React from "react";import { HashRouter, Route, Switch } from "react-router-dom";import Analyze from

Electronアプリのカスタムメニューの設定Electron フレームワークを使って、デスクトップアプリを作る方法についてお届けしています。 前回までに、基本的な Electron アプリの作成方法を、シンプルな方法から、Vue/React などのフレームワークを利用して作るやり方や、Windows/Mac/Linux 向けの配布パッケージを作る方法をお届けしてきました。今回は、カスタムでメニューを作るやり方について解説します。何も設定しないと標準設定のメニュが自動で設定されます。これまで紹介した Electron のアプリは、シンプルなもので特にメニューの設定はしていません。 何も設定しないと、File／Edit/View/Window/Help のメニューがメインウインドウに挿入されます。しかし、実際にアプリを開発する場合、メニューの内容や処理方法が違うのでカスタマイズしたい部分です。ここでは、メインウインドウのメニューバーのカスタマイズを例にそのやり方を説明して行きます！シンプルなアプリの場合、エントリーポイントになるコードでメニューの設定をします。 まずは、メニューのテンプレートを作ります。簡単のためにファイル（File）メニューの下に、アプリを終了する「Quit」だけを入れることにします。const menuTemplate: Menu = Menu.buildFromTemplate([  {    label: "File",    submenu: [      {        label: "Quit",        accelerator: "Cont

ReactでElectronアプリを作る前回は、Web 開発でよく利用される Vue のフレームワークを使って、Electron のアプリケーションを作成する方法を解説しました。 この記事では、Vue と並んで Web 開発でよく利用される「React」を使って Electron アプリを作る方法を解説します。React で Electron のアプリを作る場合は面倒です！Vue の場合は拡張機能（プラグイン）をインストールして利用することでとても簡単に Electron のアプリを作成する事ができました。React の場合、Vue の拡張機能に相当する物が今のところありません。従って、Electron アプリに必要な設定を自分で行う必要があります。面倒と言っても慣れてしまえば簡単なので、React の方が慣れているという方はやり方を覚えてください。いずれにせよ、React のアプリが必要です。最初に Vue の場合と同様に React アプリのテンプレートのプロジェクトを作成します。$ npx create-react-app [アプリの名前]　でテンプレートのアプリのプロジェクトを作成します。基本の Electron の設定を行います基本の Electron の設定は、React のプロジェクトフォルダに移動して行います。electron のパッケージのインストールElectron のアプリを作るのに必要なパッケージをインストールします。これは、Vue の場合と同じです。$ npm install --save-dev electron　electron-builder の

VueでElectronのアプリを作るElectron のフレームワークを使うと、複数のプラットフォーム（Windows/Mac/Linux）で動作するデスクトップアプリを開発できるのは、既に紹介してきた通りです。 今日は、Electron のフレームワークと Web 開発でよく利用される Vue を組み合わせて利用する例を紹介します。Vue を取り込むとさらに簡単にデスクトップアプリを作る事ができます。Vue を使うと便利な理由Vue を使うと簡単に Electron アプリが作れるのには理由があります。 これは、Vue でよく利用する「VUE CLI」が拡張機能で Electron のアプリ作成に必要な処理をやってくれる機能をサポートしているからです。この拡張機能（プラグイン）は簡単に追加できます。 その前に、最初に Vue のプロジェクトを作成します。VUE UI(vue ui)を利用しても良いですし、コマンドライン（CLI）を利用しても良いので Vue のプロジェクトを作成してください。 コマンドラインの場合は以下のコマンドを実行します。$ vue create [プロジェクト名]　UI でもコマンドラインでも必要な情報を入力してまずは、Vue のプロジェクトを作成します。 これで、Vue のプロジェクトのテンプレートが作成されます。 まずは、このテンプレートのプロジェクトをそのまま Elecron のアプリにしてみます。ここで拡張機能（プラグイン）をインストールします。$ vue add electron-builder　実はこれだけで、Electron アプリの開発

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 &&

Javascriptで簡単に作れるデスクトップアプリを作る〜ElectronJavascript（Typescript）を使って Web 開発が出来るスキルを身につけると、デスクトップアプリも簡単に作れるようになります。この記事では、複数のプラットフォーム（Windows/Mac/Linux）のアプリを簡単に開発できる、Electron フレームワークについて解説しています。Electron とは？既にご存知の方も多いかと思いますが、Electron はプログラミングで良く使われているエディタの VSCODE や Atom の開発に使われている他、Slack などの開発にも使われています。これらのアプリが、Mac/Windows/Linux をサポートできるのも Electron の恩恵を受けているからです。しかも、Web 開発の知識があれば、新たに別のプログラミング言語を学習しなくても、デスクトップのアプリの開発もできてしまうというのが最大の魅力です。Electron アプリは、React や Vue などの Web 開発のフレームワークと組み合わせて利用できるので、Web アプリをほぼそのままデスクトップアプリとして変換する事も簡単にできますが、この記事ではまずは、Electron の概念を理解するために、簡単にできる「Hello World!」を表示するだけの Electron アプリの作り方を紹介します。Electron アプリの簡単な作り方今回は、「Hello World!」を表示させるだけのシンプルなアプリを作成する流れを紹介します。 まずは、何が必要かを理解するの

こんにちは。最近？FPSゲームのApexLegendsにハマっていて、業務終了後や空き時間にチョコチョコやっているのですが、とても楽しいですね。しかしこのゲーム・・・まじで難しいキャラの移動速度がとても速いので、近距離戦でキャラの動きにあわせてエイムするのがめちゃくちゃ難易度が高いんですよね近距離戦だとスコープを覗かずに腰撃ちで戦うので、自分の照準が敵に合っているのかどうもわかりにくい・・・そこで閃いたのが「画面の真ん中にレティクルを表示させるアプリ作ったらいいんじゃね！？」腰撃ち中でもレティクルが表示されれば、狙いやすさは上がるはず・・・思い立ってから即行動ということで、いざ開発に入りました。前置きが長くなりましたが、これから開発した手法を説明していきます。環境OS：Widows10使用ライブラリ：Electron「Electronとはなにか」軽く説明をすると、HTML/CSS/JSの技術でデスクトップアプリが作れるアツいライブラリです。（代表的なデスクトップアプリでは、AtomやSlack等がElectronで作成されています）私みたいなバックエンド苦手なWeb開発者にとっては、これほど嬉しいツールはないので、早速使って見ることにしました。出来上がったモノこんな感じで、画面の中央に薄緑色のドットが表示されるようになりましたこれはElectronで作成したデスクトップアプリを、windowフレームを非表示にし、常に最前面に固定させ、かつ、クリックしてもそのアプリに判定がいかないように調整したものになります。（細かいコードは今度書きます）「いい感じにうまくできた！！！」と喜んだ