ここまで来たとき、私はこう思っていました。
「もう十分すごいものができた」
保存できる。
削除できる。
編集できる。
写真も残せる。
見た目も、もう完全にアプリ。
でも、ChatGPTにこう言われます。
「これ、ホーム画面に出せますよ」
正直、意味が分かりませんでした。
「ホーム画面に出せる」ってどういうこと？
アプリって、
App Storeから入れるもの
Google Playから入れるもの
そう思っていました。
でもこれは違いました。
今作っているのは Webアプリ。
それを、スマホに「アプリのように」置けるらしい。
これが PWA（プログレッシブ・ウェブ・アプリ） というもの。
もちろん、初めて聞きました。
言われた通りに、ファイルを置いただけ
また、見たことのないコードが出てきました。
- manifest.json
- service-worker.js
「また知らない単語きた…」
と思いながら、言われた通りに
ファイルを作って
サーバーに置いて
index.htmlに少し追記。
このとき置いた2つのファイルには、ちゃんと役割がありました。
manifest.json は、
スマホに対して
「このサイトはアプリです。名前はこれ、アイコンはこれです」
と伝える名札のようなもの。
service-worker.js は、
「このページのことを覚えておいてください」
とスマホにお願いするメモのようなもの。
この2つをサーバーに置くだけで、
ただのWebページが、スマホから「アプリ」として認められるようになるそうです。
もちろん、そのときの私は、そんなことは知りません。
言われた通りに置いただけでした。
やっていることは、相変わらずコピペだけです。
そして、その瞬間が来ました
スマホでページを開くと、
「ホーム画面に追加」
という表示が出ました。
言われた通りに追加。
スマホのホーム画面を見る。
そこに――
自分のアプリアイコンがありました。
一瞬、意味が分かりませんでした。
タップして、鳥肌が立つ
タップすると、
いつもの記録画面が開く。
でも、見た目が違う。
ブラウザのバーが無い。
完全にアプリの見た目。
このとき、思わず声が出ました。
「え、これ本当に自分で作ったの…？」
HTMLも知らなかった人が、
スマホにアプリを入れている。
ちょっと信じられない光景でした。
ここで、初めて気づいたこと
最初は、
「記録できればいい」
それだけでした。
でも気づいたら、
削除ができて
編集ができて
写真が残せて
デザインも整えて
ついにホーム画面に出た。
もうこれは、
ただのページじゃない。本当にアプリ。
PWA化は、気持ちのゴールだった
技術的なことは、正直よく分かっていません。
でも、ホーム画面に並んだ瞬間、
「完成した」
と心から思えました。
これが一番うれしかったです。
知識ゼロでも、ここまで来れた理由
やったことは、ずっと同じでした。
分からない → ChatGPTに聞く
出てきたコードを貼る
動かす
詰まる
また聞く
これだけ。
でも、それを続けたら、
スマホにアプリが入りました。
このあと、
「このアプリがどうやって保存しているのか？」
「PHPって何をしているのか？」
その仕組みが、ようやく少し分かってきます。
次の記事では、
PHPでデータが残る仕組み
を、初心者目線で書いていきます。
コメント