すべてのカテゴリ

Firebaseをどうして使うか？よく質問を頂くことに、「Firebase をどうして使うのか？」という事があります。 一言で答える場合は、「便利だから」というのが一番しっくりくる答えだと思います。 しかし、多くの方はそれでは何か納得できない場合が多いようです。そこで、この記事ではもう少し詳しく Firebase の何が便利なのかを考えてまとめて見ました。Firebase でアプリに必要な基本機能がまかなえるWeb アプリだけに限らずアプリを開発する上で必要な基本機能が揃っているのが一番便利な点です。この話は何度か書いていますが、基本的に、HTML/CSS がある程度書けて、Javascript の基本がわかれば、「本格的なアプリが作れる」というのは非常に魅力的です。１ヶ月勉強すれば Web アプリに必要な技術が身に付くどんなアプリを作るかのアイディアは必要ですが、アプリを作るために必要なスキルという見方をすれば、１ヶ月も真剣に勉強すれば必要なスキルを十分に身につける事ができます。つまり、本格的なアプリが１ヶ月で作れるようになるという事です。どれくらい凄いかと言うと、Firebase を使わない場合には、１ヶ月で作るのはかなり厳しいです。理由は、幾つかありますが、Firebase がやってくれる事を実現するのに他のことを勉強する必要があるからです。＊　データベース＊　バックエンドのプログラミング例えば、データベースに MySQL などの SQL データベースを準備して、バックエンドのプログラミングに PHP を使うとします。そうすると、SQL のデータベースについて勉強しなけれ

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 アプリの開発

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!」を表示させるだけのシンプルなアプリを作成する流れを紹介します。 まずは、何が必要かを理解するの