保存もできる。
編集もできる。
削除もできる。
写真も入る。
見た目も、もう完全にアプリ。
でもこれは、ただのWebページ。
URLを開かないと使えない。
このとき私は、こう思っていました。
これ、ホーム画面に出せたら完璧なのに…
そこでChatGPTに聞きました。
「これ、アプリみたいにできますか？」
返ってきた言葉が、
PWA（ピー・ダブリュー・エー）
もちろん、初耳です。
PWAってなに？
簡単に言うと、
Webサイトを、アプリのようにインストールできる仕組み
らしいです。
意味は分からないけど、とにかく言われた通りにやりました。
- manifest.json というファイルを作る
- service-worker.js というファイルを置く
- HTMLにちょっとコードを足す
また出ました。
見たこともない英語のファイル名。
でも、ここまで来た私はもう慣れています。
とりあえずコピペ。
そして、スマホで開いてみる
いつものようにURLを開きます。
すると、見慣れない表示が出ました。
「ホーム画面に追加」
一瞬、意味が分かりませんでした。
押してみます。
ホーム画面に戻ると――
さっきまでWebページだったものが、
アプリのアイコンになって、そこにありました。
本当に声が出ました。
「え、これインストールできるの？」
押すと、もう完全にアプリ
アイコンをタップすると、
ブラウザ感が消えて、
完全にアプリの見た目で起動。
URLバーもない。
ただのWebページだったものが、
完全にアプリになった瞬間でした。
でも、あとから知ったことがあります。
これは「インストールしたアプリ」ではなく、
実体はサーバーの上にある、ただのWebページのまま。
だから、
サーバーを解約したり、
ファイルを消したり、
ドメインが切れたりすると、
ホーム画面のアイコンを押しても、動かなくなります。
見た目はアプリでも、
中身はちゃんとWebサイト。
PWAって、そういう仕組みなんだと、あとで知りました。
このとき思ったこと
HTMLも分からない。
CSSも分からない。
JavaScriptも分からない。
PHPも分からない。
PWAなんてもちろん初耳。
それでも、
スマホにインストールできるアプリができてしまった。
意味が分からないまま、ここまで来ました。
でも、確実に言えることがあります。
「知識がないと作れない」は、思い込みだった。
これで、ひとまず「初アプリ完成」
画質は悪いし、
コードの意味も分からないし、
まだまだ直したいところはある。
でも、
- 記録できる
- 編集できる
- 削除できる
- 写真も入る
- スマホで使える
- ホーム画面から起動できる
ここまで来たら、もう十分。
初アプリ完成でいいと思っています。
ここまでが、私がChatGPTと一緒に作った
スマホで動く記録アプリの全記録です。
次からは、この中で起きた
- 404地獄
- スマホだけ保存できなかった理由
- PHPでデータが残る仕組み
を、ひとつずつ詳しく書いていきます。
なお、実際にもらったコードも載せていきますが、セキュリティに関わる部分はダミーに置き換えて紹介します。この記事はIT完全初心者がAIに全部聞きながら実際に試した記録です。内容の理解が浅い部分もありますが、同じ初心者の参考になればと思い公開しています。
コメント