【第3話】パソコンでは動くのに、スマホでは保存できなかった本当の理由

Webアプリ開発記録

404地獄を抜けて、
ついにPHPで保存できるようになりました。

パソコンでは、ちゃんと動く。

入力して保存 → 記録が残る。

完璧。

「ついに完成した…!」

そう思って、スマホで開いてみました。

そして、保存を押しました。

消えました。

記録は残りません。


パソコンでは成功。スマホでは全滅。

何回やってもダメ。

  • 入力 → 保存 → 消える
  • 写真を入れる → 保存できない
  • エラーも出ない
  • 何も表示されない

もう意味が分かりません。

PHPも置いた。
保存もできた。
なのにスマホだけダメ。


原因は、JavaScriptの「保存方法」だった

最初、私はこういう仕組みで作っていました。

ブラウザの中(JavaScript)に記録を保存する方法

これ、パソコンでは動きます。

なぜなら、パソコンのブラウザは
この保存方法にちゃんと対応しているから。

でも、スマホは違いました。


スマホは、その保存方法を信用していなかった

スマホのブラウザは、

  • 容量制限が厳しい
  • セキュリティが厳しい
  • データを簡単に消す

つまり、

ブラウザ内だけに保存する方法は、すぐ消える

これが起きていました。

だから、

保存を押す
→ 一瞬保存される
→ すぐ消える

という謎の現象が起きていました。


そこで初めて知った「PHPの本当の役割」

ChatGPTに聞き続けて、やっと分かったこと。

  • JavaScriptは「その場の動き」
  • PHPは「サーバーに記録を残す役割」

つまり、

スマホでも確実に残すには

サーバー側に保存するしかない

ということでした。


保存の流れをこう変えた

それまで:

入力 → JavaScriptの中に保存 → 消える

変更後:

入力 → PHPに送る → サーバーに保存 → data.jsonに残る

この仕組みに変えた瞬間。

スマホで保存が成功しました。


このとき初めて理解したこと

私はこのとき、初めて分かりました。

「保存」と言っても、どこに保存しているかが重要

ブラウザの中なのか
サーバーの中なのか

ここが全然違う。


あとから知ったこと

最初に私がやっていた「保存」は、
LocalStorage(ローカルストレージ) という仕組みだったようです。

これは、サーバーではなく
そのスマホやパソコンの中だけにデータを保存する方法です。

例えるなら、

ブラウザ保存は、
「自分しか見られない日記帳」に書いている状態

PHPでサーバーに保存するのは、
「みんなが見られる掲示板」に書いている状態です。

日記帳は、

・その端末にしかない
・消えることもある
・別のスマホやパソコンからは見られない

掲示板は、

・どの端末からでも見られる
・消えない
・ちゃんと記録が残る

私はずっと「日記帳」に保存していました。

だから、

パソコンでは成功するのに、
スマホでは保存が消える、という謎の現象が起きていたんです。

このとき初めて分かりました。

「保存」と言っても、
どこに保存しているのかが一番重要だということ。

ブラウザの中なのか。
サーバーの中なのか。

ここが、まったく別物でした。

スマホで保存できた瞬間

何度も失敗して、
もうダメかもと思っていたとき。

スマホで保存を押したら、
ちゃんと記録が残りました。

本当に声が出ました。

「うわ、できた……」

理解はしていないのに、
確実に前に進んでいる感覚がありました。


もし今、スマホだけ保存できない人がいたら

たぶんこれです。

JavaScriptだけで保存していませんか?

スマホは、それを消します。

サーバー(PHP)に送って保存しないと、残りません。

コメント

タイトルとURLをコピーしました