Web アプリとネイティブアプリの違い
ネイティブアプリは、スマホの OS 向けに作り、アプリストアから入れるアプリです。Web アプリは、ブラウザで動き、アドレスだけで配れます。
このレッスンでは、要件を見て、どちらが向くかを選べるようになります。どちらが上、という話ではありません。
このレッスンのゴール
メモ
要件を見て、Web アプリとネイティブアプリのどちらが向くか選べる。
重要な言葉
| ことば | いみ |
|---|---|
| ネイティブアプリ | スマホの OS 向けに作り、ストアから入れるアプリ |
| 権限 | カメラや位置情報などを使う、利用者の許可 |
| アプリストア | アプリを探して入れる、配布の場所 |
| 審査 | ストアに出す前の、確認の手続き |
| 要件 | アプリがそなえるべき、大事な条件 |
学生が入力するセルは、このプレビューでは空白です。
この講座にない道具
この講座は、Web の技術で作るアプリを扱いました。ネイティブアプリの道具は、入っていません。
エミュレーター、各社の開発の道具、アプリストアへの申し込みは、別の学びです。ここでは、選ぶための考え方を学びます。
使える機能の広さが違う
近ごろの Web アプリも、位置情報やカメラを、利用者の許可があれば使えます。ただし、使える機能は、ブラウザと端末で違います。
ネイティブアプリは、OS の機能を、より広く使えます。Bluetooth の機器や、画面を閉じていても続く位置の記録などです。
観点ごとの、たいていの違い
| 観点 | Web アプリ | ネイティブアプリ |
|---|---|---|
| 配り方 | アドレスを送るだけ | ストアから入れる |
| 更新 | サーバーを直せば、すぐ届く | 審査と、利用者の更新が要る |
| 使える機能 | ブラウザが許す範囲 | OS の機能を広く使える |
| 速さと電池 | 軽い画面には十分 | 重い処理や描画に強い |
| 作る手間 | 1つのコードで、多くの端末 | OS ごとに作ることが多い |
| オフライン | サービスワーカーで作る | 標準でそろえやすい |
学生が入力するセルは、このプレビューでは空白です。
ラボのアプリの大きさを測る
Web アプリは、軽いと、読み込みが速くなります。ラボのアプリの5つのファイルの大きさを、バイトで数えます。
wc -c は、ファイルのバイト数を出します。最後の行は、合計です。
ファイルの大きさを数える
docker exec jupyter wc -c app/index.html app/style.css app/app.js app/sw.js app/manifest.webmanifestここでは表示のみで、実行されません。無料アカウントを作成すると、実行ボタンで自分のラボのターミナルに入力できます。
ラボの出力の読み方
| ファイル | バイト数 |
|---|---|
| index.html | 934 |
| style.css | 1598 |
| app.js | 1832 |
| sw.js | 529 |
| manifest.webmanifest | 292 |
| 合計 | 5185 |
学生が入力するセルは、このプレビューでは空白です。
小さな Web アプリは、軽く届く
5つのファイルで、5 KB ほどです。回線が細くても、すぐ届きます。サービスワーカーで取っておけば、2回目からは、通信もいりません。
ただし、画像や大きな部品を足すと、すぐ重くなります。軽さは、保つ努力が要ります。
選ぶときは、要件から決める
最初に、アプリが必ず必要とする機能を調べます。ブラウザでできない機能が1つでもあれば、ネイティブアプリにします。
なければ、配りやすさや更新の速さを比べます。学食アプリのように、リンクで配り、毎週メニューが変わるものは、Web アプリが向きます。
よくある間違い
注意
どちらかが、いつも上だと考える間違いが多いです。答えは要件で決まります。ブラウザでできない機能があるかを、先に確かめます。