気ままにやっていくプログラミングとかブログ

中学1年生が気ままにプログラムのことを中心に書いていくブログです。

HTML+JavaScriptでデスクトップアプリも!?ウェブ技術でアプリを作る方法

こんにちは。

kitachisukuです。

今回はHTML+JavaScriptでデスクトップアプリを作る方法を紹介します。

 


 1.HTML+JavaScriptでアプリって作れるの?

 2.作る方法

3.評価


 

 1.HTML+JavaScriptでアプリって作れるの?

ええ、できます。

なんとHTML+JavaScriptで作れます。

ちなみにCSSも使えますし、

VBScriptも使えます。

 

ただし本来はウェブ上で使う技術なため、

ネイティブでない = 動作速度が遅い

などの問題もあります。

 

まあそこはWebAssenbly使えばいいんですが、

ネイティブアプリより少し遅いという欠点があります。

 

ですが、

この方式で作られた有名なアプリもあります。

 

例えば、

Visual Studio Codeです。

恐らくこのブログを見ている人の中にも、

使っている人はいるんじゃないでしょうか(私も使っています)。

 

あのVSCodeもその技術で作られているんですから、

やってみる価値はじゅうぶんにあると考えていいでしょう。

 

 2.作る方法

いくつか種類がありますが、

代表的なものを説明していきます。

 

Electron

 よく見るやつです。

Githubが開発しました。

デスクトップアプリ(Win.Mac,Linux)が作れます。

 

作成したアプリケーションは、

内蔵されているオープンソースのブラウザ「Chromium」の上で動きます。

 

これで作られたアプリの例は、

VScode,Atomです。

 

インストールにはnpm(Node.jsが必要)を使います。

npm install electron --save-dev

 でインストールできます。

 

また、

類似したものにはNW.jsなどがあります。

 

Cordova

こちらはデスクトップ出なくスマホ用です。

どのOSでもAndroidは可能で、

MacならiPhoneも可能です。

 

これはAndroid(iPhone)のWebViewを内部的に動かして、

アプリを作れるようにしています。

 

npm install -g cordova
でインストールできます。
 
HTML Application
これは実質Windowsのみです。
内部的にInternet Explolerを動かしてアプリを動かします。
 
3.評価
Electron...サイズ重,動作良,シェア〇
Cordova...サイズ普通,動作良,シェア〇
HTML Application...サイズ小,動作悪,シェア×
 
ElectronはChromiumを仕込んでいるので重いです。
Cordovaは普通のアプリとあまり変わらないのでいい。
HTML ApplicationはIE使ってることとシェアの点で×。
 
一長一短って感じもしますが、
個人的にはElectronがHTML Applicationよりいいと思います。
多少重くても最近はあまり問題にならないので。
 
こんな感じです。
 
では。