目的
最近の仕事では、ネットと切り離された環境で動くシステムばかり担当しており開発環境もネットに繋がらないため、最近のソフトウェアを動かすことが難しい。
そこで、無料で使える以下のサービスやOSSを使い、簡単なアプリの作成1を行ってみた。
- PaizaCloud：Webブラウザだけで開発環境が用意できるサービス。
- Electron：ブラウザ技術だけで、どんな環境でも動くアプリケーションが作成可能。
- openlayers：ブラウザ上で地図などを扱うライブラリ。
なお、ここで使っているソースは、過去に私が投稿した「Webで地球地図データ(標高第1.1版)を使う」で作ったタイルデータを使ったものです。
手順
1.使用準備（登録からサーバ作成まで）
1.1 PaizaCloudから登録し、ログインする。
特に難しいことは無く、メールアドレスさえ登録すれば良いので省略します。
（GitHubやGoogleのIDを持っていればクリックだけです）
1.2 新規サーバ作成
「新規サーバ作成」をクリックするだけです。
最初にサーバ作成する際に料金プランを選びますが「無料プラン」2で問題ありません。
なおPaizaCloudのサーバは、Dockerのコンテナで動いており、具体的なOSはUbuntuになります。
サーバ名だけ適当に設定3したら「新規サーバ作成」をクリックすると、数秒でサーバが動き出します。
（初期インストールやSSH利用も必要なら利用可能ですが、今回は不要なので省略します。）
2.IDEの使用
サーバが動き出すとブラウザ上にPaizaCloudのCloud IDE（開発環境）が表示され、すべての操作がここから可能になります。
左端にアイコン、その右にファイル構成が表示され、右の大きな空白部分が作業領域になるイメージです。
（本来エディタやブラウザを使用した作業も行えますが、今回は過去に作成したソースを使用するため使いません）
2.1 ソースとelectronのインストール
左端の「ターミナル」をクリックすると、お馴染みの黒い画面（ターミナル）が開き各種作業が行えます。
ここでは手っ取り早く、過去に作ってGitHubに登録していたソースを持ってきます。
~$ git clone https://github.com/HelicobacterPylori/MapSample MapSample
Cloning into 'MapSample'...
remote: Counting objects: 16, done.
remote: Total 16 (delta 0), reused 0 (delta 0), pack-reused 16
Unpacking objects: 100% (16/16), done.
Checking connectivity... done.
~$
これで、MapSampleの中にsrcが取り込まれました。
今回はこれをelectronでpackageできるようにします。
まずはelectronをMapSampleの中にインストールしたいので、以下のように実行。
~$ cd MapSample/
~/MapSample$ npm i -D electron
> electron@1.8.4 postinstall /home/ubuntu/MapSample/node_modules/electron
> node install.js
Downloading SHASUMS256.txt
[============================================>] 100.0% of 3.43 kB (3.43 kB/s)
npm WARN saveError ENOENT: no such file or directory, open '/home/ubuntu/MapSample/package.json'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open '/home/ubuntu/MapSample/package.json'
npm WARN MapSample No description
npm WARN MapSample No repository field.
npm WARN MapSample No README data
npm WARN MapSample No license field.
+ electron@1.8.4
added 153 packages in 35.426s
~/MapSample$
2.2 electronのpackage作成
packageの作成に必要なelectron-packagerを以下のとおりインストールします。
~/MapSample$ npm i -D electron-packager
npm WARN saveError ENOENT: no such file or directory, open '/home/ubuntu/MapSample/package.json'
npm WARN enoent ENOENT: no such file or directory, open '/home/ubuntu/MapSample/package.json'
npm WARN MapSample No description
npm WARN MapSample No repository field.
npm WARN MapSample No README data
npm WARN MapSample No license field.
+ electron-packager@11.2.0
added 74 packages in 3.801s
~/MapSample$
ここで、これまでのメッセージの中でpackage.jsonが無いと言われていますので、npm initで再作成しました。
（質問に全てエンターで回答するだけで、作成されます）
なお、Linux環境でWindows向けのパッケージを作る場合、Wineが必要なのですがインストールが面倒です。
なので今回は必要なファイルをまとめてくれているelectron-packager-dummy-wineを入れます。
~/MapSample$ npm i -D electron-packager-dummy-wine
+ electron-packager-dummy-wine@1.0.2
added 1 package in 2.584s
~/MapSample$
後は、以下のようにパッケージ作成を実行します。
~/MapSample$ npx electron-packager src MapSample --platform=win32 --arch=x64 --overwrite
Packaging app for platform win32 x64 using electron v1.8.4
Wrote new app to /home/ubuntu/MapSample/MapSample-win32-x64
~/MapSample$ ls
LICENSE node_modules package-lock.json src
MapSample-win32-x64 package.json README.md
~/MapSample$
これでMapSample-win32-x64の中に、Windows向けパッケージが作成されましたので、次のような感じでzipに圧縮します。
~/MapSample$ zip MapSample-win32-x64.zip -r MapSample-win32-x64/
adding: MapSample-win32-x64/ (stored 0%)
adding: MapSample-win32-x64/api-ms-win-core-debug-l1-1-0.dll (deflated 45%)
:
:
adding: MapSample-win32-x64/MapSample.exe (deflated 56%)
adding: MapSample-win32-x64/LICENSE (deflated 41%)
~/MapSample$
ここまでで作成が終わったファイル一覧はこんな感じです。
後は、このzipファイルを右クリックで「ダウンロード」して、Windowsで実行確認してみます。
3.Windowsで実行確認
ダウンロードしたzipを解凍し、中にあるMapSample.exeを実行した結果が以下の画像になります。
このアプリは自前で日本全土の地形データを持っていますので、ネットに繋がらなくても地形を扱うことができます。
最後に
最近はハードウェアの性能進歩も目覚しく、無償でこれだけのことができるサービスが存在しますので、学習等には便利かと思います。
環境の違いも、仮想化や高度なラッピングでカバーされるため、よほどシビアな要求のあるソフトウェア以外は環境を気にせず動かせるようになっています。
また、各種の高機能なライブラリ等が多く、やりたいことを一から作るのではなく、あるものを探す方が早い場合が多くなっています。
世の中には未だにネットと隔離された環境のソフトウェアも多く、そうした環境ではこうした最新のライブラリ等も導入が難しいですが、利用すれば効果は大きいため、機会を見つけては提案を行っています。
その提案のためにも、こうしたサービスを使い、出来るだけ新しい技術を使って置こうと思います。