クリーム色の背景、色付き表示、高コントラスト、大きな文字のほうが読みやすいですか?配色と文字を選ぶと、すべてのページに一度で反映されます。

無料レッスン

Web アプリかネイティブアプリか

このレッスンのあとで: 要件を見て、Web アプリとネイティブアプリのどちらが向くか選べる。

60分のレッスンコマンド1件モバイルウェブのラボ:ブラウザーで作るレスポンシブでインストールできるウェブアプリ

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.html934
style.css1598
app.js1832
sw.js529
manifest.webmanifest292
合計5185

学生が入力するセルは、このプレビューでは空白です。

小さな Web アプリは、軽く届く

5つのファイルで、5 KB ほどです。回線が細くても、すぐ届きます。サービスワーカーで取っておけば、2回目からは、通信もいりません。

ただし、画像や大きな部品を足すと、すぐ重くなります。軽さは、保つ努力が要ります。

選ぶときは、要件から決める

最初に、アプリが必ず必要とする機能を調べます。ブラウザでできない機能が1つでもあれば、ネイティブアプリにします。

なければ、配りやすさや更新の速さを比べます。学食アプリのように、リンクで配り、毎週メニューが変わるものは、Web アプリが向きます。

よくある間違い

注意

どちらかが、いつも上だと考える間違いが多いです。答えは要件で決まります。ブラウザでできない機能があるかを、先に確かめます。

このラボとソースについて: モバイルウェブのラボ:ブラウザーで作るレスポンシブでインストールできるウェブアプリ

授業で使いますか?このモジュールを学生に割り当てると、教員用ガイド、自動採点つきの課題、学生ごとのラボを使えます。