アプリの見た目は、かなり早い段階で完成していました。
入力欄があって、
ボタンがあって、
スマホでも操作できる。
でも、ずっとおかしかったことがあります。
保存を押すと、消える。
何回やっても、消える。
入力したはずの記録が、どこにも残らない。
このときの私は、
「保存ボタン、ちゃんと付いてるのに、なんで？」
と、本気で混乱していました。
実は「保存」なんて、どこにもしていなかった
あとから知ったのですが、
あの時のコードは
- HTML（見た目）
- CSS（デザイン）
- JavaScript（ボタンの動き）
ここまでしかありませんでした。
つまり、
見た目と動きだけ。データを置く場所が無い。
保存ボタンを押したとき、
「保存している風の動き」をしていただけで、
実際には、どこにも記録されていなかったんです。
あのときの状態は、
砂浜にお絵描きしているようなものでした。
描いた瞬間は見えるけれど、
ページを更新する（波が来る）と、全部消えてしまう。
PHPを用意するというのは、
ノートにペンで書いて、棚にしまっておくようなことでした。
これを知ったとき、かなり衝撃でした。
そこで出てきたのが「PHP」
ChatGPTに聞き続けていると、突然出てきたのが
PHPファイル
また知らない単語です。
でも、これがすべてのカギでした。
PHPは、
サーバー側で動いて、データを保存してくれる役割
らしい。
正直、この時も意味はよく分かっていません。
でも、言われた通りに
- save.php
- data.json
というファイルをサーバーに置きました。
何が起きていたのか（あとから分かったこと）
保存ボタンを押すと、
JavaScriptが入力内容をまとめて
PHP（save.php）に送る
PHPがそれを受け取って
data.jsonというファイルに書き込む
この data.json は、いわばアプリの宝箱のようなもの。
ただ、このままだと誰でも中を見られる状態でもあります。
このあと、.htaccess で「鍵をかける方法」も知ることになります。
次にページを開いたとき、
data.jsonを読み込んで表示する
つまり、
やっと「記録を置く場所」ができた
これが、保存できるようになった理由でした。
スマホで保存できなかった最大の理由
ここも、かなりハマったポイントでした。
パソコンでは保存できるのに、
スマホでは保存できない。
原因は、
PHPファイルに正しくアクセスできていなかった
これだけ。
ファイル名、置き場所、URL。
たったこれだけのことで、
保存ができたり、できなかったりする。
初心者はここでつまずきます。
初めて、記録が残った瞬間
スマホで保存を押す。
ページを開き直す。
さっきの記録が、そこにある。
この瞬間、
「あ、本当に作ってるんだ」
と、初めて実感しました。
見た目じゃなくて、中身が動いた瞬間でした。
PHPは「裏方の主役」だった
それまで主役だと思っていたのは、
見た目（HTML/CSS）と動き（JavaScript）。
でも実は、
一番大事だったのは、見えないPHP。
PHPはサーバーの中で動くので、
私たちのブラウザからは中身のプログラムが見えません。
実はこれが、Webのセキュリティの基本（パスワード処理などをPHP側でやる理由）でもあるそうです。
これが無いと、アプリはただの飾りでした。
今なら分かる、Webアプリの正体
Webアプリって、
- 見た目を作る
- 動きを付ける
- データを保存する場所を用意する
この3つがそろって、初めて「アプリ」になる。
あのときの私は、
最後のピースがずっと無いまま戦っていました。
次の記事では、
削除ボタン、編集機能、写真保存まで
どうやって進化していったのか。
「ただ保存できるだけ」から
「ちゃんと使えるアプリ」になるまでを書いていきます。
コメント