ほんじゃらねっと

遊びと学びと仕事をテクノロジーで楽しくする

「ポータブルなWebアプリ」というWebプログラマ的に完璧なアプリ配布方法

先日書いたツールのGUI化に関する記事で

blog.honjala.net

Electronやcarloを使ったデスクトップアプリ化について紹介したあとで

ちょっと考えていた時のこと。

carloのようにUI機能を持たずに

インストールされているChromeを使うのがアリならば、

もう思い切ってWebアプリをそのままexe化して配布するのもアリなのでは!

という閃きが降りてきた。

exe1つで実行できるWebアプリ、名付けて「ポータブルWebアプリ」。

わざわざ専用のGUIアプリを作るのではなく、

Webアプリとそれを実行するWebサーバをそのまま一緒にexe化して提供し、

操作はブラウザ経由で行なってもらう。

Webプログラマにとってはメリットしかない

carloと同じく、UI部分をブラウザが担ってくれるので、exeのサイズも抑えられる。

carloとちがって実行してから別途ブラウザからアクセスする必要はあるけど、

Chrome以外のブラウザでも使える。

プログラムとしては普通のWebアプリを作って、そのままパッケージングするだけ。

クラウドサーバを借りて管理する必要もなく、

exeをブログ等からダウンロードできるようにして配布する。

Webアプリは作れるけど、サーバ管理面倒、

でもGUIアプリの作り方覚えるのも面倒、そんな方にもぴったり。

ユーザーにもメリット

さらにアプリを利用する側からみても、

通常のGUIアプリと比較して大きなメリットがある。

それはLAN経由でスマホやらタブレットからもアクセスできちゃう!ということ。

言ってみれば単なるローカルWebサーバなので。

個人や家族で使いたいツールやゲームを提供するには完璧な配布方法ではなかろうか。

作ってみた

自分の思いつきに興奮した勢いでちょっとしたネットワーク対戦ゲームを作ってみた。

2〜4人のプレイヤーでそれぞれ自分の色のブロックを守りながら

他のプレイヤーのブロックを壊す、「ブロックホッケー」。

プログラムの内容としては、

Node.jsのExpress + socket.io でWebSocket対応のWebサーバを立てて、

フロントにVue.js + Vuetifyを使った、構成としては普通のWebアプリ。

それをpkgでパッケージングしてexe化したもの。

exeを実行すると、コンソールが立ち上がってアクセス可能なURLが表示される。

ブラウザからアクセスすると、名前と色を入力して人数が集まってからゲームスタート。

試す時はブラウザを2つ立ち上げてアクセスするといい感じで動くはず。

(一人でスタートすると一瞬でゲーム終了します)

https://pirosuke.github.io/games/block-hockey/socket-server-win.exe

f:id:piro_suke:20181201002422p:plain

おわり:昔からあったわ

考えてみたらローカルWebサーバを使うアプリって昔からあった。

でもそれがとても簡単に実現できて、

Webプログラマにとって楽な配布方法であることは間違いないので、

この形式で配布したら面白いアプリを考えてみたい。

はじめてのNode.js -サーバーサイドJavaScriptでWebアプリを開発する-

はじめてのNode.js -サーバーサイドJavaScriptでWebアプリを開発する-