00:00
5分で学べる、ハチコのAI実践カフェ。
おはようございます。この番組では、ママエンジニア、ハチコが、AIでできたことや、おすすめのAI活用法をお届けしています。
もし、この放送を気に入っていただけたら、いいねやフォローしていただけるととっても嬉しいです。
さて、9月11日、木曜日。皆さま、いかがお過ごしでしょうか。
今日は、一つまずはお礼をお伝えしたいです。
なんと、この5分で学べる、ハチコのAI実践カフェ、2025年8月のITエンジニア編第22位にランクインしました。
いつも聞いてくださっている皆さま、本当にありがとうございます。
たまたま、今日ここにたどり着いてくださった皆さん、もし、チラッと聞いて気に入っていただけたら、また遊びに来てくださいね。
PWAアプリの開発過程
さて、今日のテーマはこちら。PWAでアプリ完成。
ということで、塗り絵アプリの話を最近していましたが、ようやくPWAという形で動くものができました。
おととい昨日と、塗り絵が動かなくなったりとか、Gitのコミットの順番がおかしくなっちゃったりとか、
したよって話をしたんですけど、それとは別にPWAという形式でうまく動いてないなという問題がありました。
PWAというのは簡単に言うと、アプリみたいに使えるウェブサイトという感じなんですね。
これはもともと先日参加した合宿で、スマホアプリ作れたらいいなって思いながらも、時間的に多分ちょっと無理だろうなって思ってました。
どうしようかなと思っていたときに、スマホアプリとかよりはもっと簡単に作れるPWAというもので作ったらどうですかってご提案いただいたので、
それにチャレンジしたという感じですね。
PWAの何に詰まっていたかというと、スタートURLという項目でした。
PWAというのは、まず普通にデプロイしたウェブアプリがあります。
これをアプリのように使えるというものなので、まずは普通にというかウェブアプリとしてデプロイするんですよね。
今回デプロイ先はGitHubにしていました。
ブラウザでそのページを見たときは全然普通に見えてたんですよね。
のり絵機能は合宿当時は動かなかったですけど、普通にデプロイはちゃんとできてたんですけど、
PWAというのはスマホでそのページを表示して、共有ボタンみたいなところからホーム画面に追加するとすると、
ホーム画面に一般的なアプリみたいにアイコンが追加されます。
それをタップするとウェブアプリと同じ内容が開くんですけど、
ショートカットと違うのはURLが表示されないことですね。
全画面でアプリが起動するって感じになっています。
このPWA形式にするためにはGitHubに上げるときに一緒に設定ファイルをPWA用の設定ファイルを一緒にアップロードするんですけど、
この設定ファイルに入っているスタートアダバURLというのが設定が良くなかったというのが今回の理由でした。
具体的にはどうダメだったかというと、最初書いてあったのはスタートURLにスラッシュが一つ書いてあるだけでした。
こういうパスを扱うときにスラッシュだけっていうのは必ず起点となる場所、そこですみたいな絶対パスっていうんですけど、そういう書き方なんですよね。
今回起点となる場所ってどこなのかっていうと、今回私はGitHubに上げています。
GitHub Pagesっていう機能を使ってデプロイしているので、そのGitHubのURLのドメイン部分、つまりhttps://username.github.ioというのがスラッシュという一文字だけが指す場所になってしまうんですよね。
でも、そこに今回私がデプロイしたフォルダとかファイルはないわけです。
私がアップしたのは、私今回塗り絵って名前で上げているので、github.ioスラッシュ塗り絵っていうもう一個下の階層にいるんですよね。
なので、設定ファイルにgithub.ioですって書いてあるから、そこにアクセスするんだけど、そこに私が作った塗り絵のページはないので、そんなページはありませんって言ってアクセスできなかった。
設定ミスの解決
というのが今回の私が詰まっていた部分の裏側の話でした。
じゃあ、なんてスタートURLに書いたらよかったの?と言いますと、periodスラッシュと書くのが正解でした。
このperiodスラッシュという書き方をすると、今いる場所という意味になるんですよね。
今回その設定ファイルはgithub.ioスラッシュ塗り絵の直下に置いてあるので、そのファイルから見たperiodスラッシュはそのgithub.ioスラッシュ塗り絵を指すので、ちゃんとWebアプリが置いてある場所を指しているということになります。
今日はちょっと難しい言葉を使わざるを得なかったので、もしかしたら何それってなっている方もいるかもしれません。
ちょっとパスの話は近々ラジオでまたお話ししようかなって思っています。
で、できた塗り絵アプリをこう書いていたいんですけど、ちょっと直したいところがあるんですよね。
なのでもう少し手を加えてから、よかったら遊んでもらえたらいいなって思っています。
ということで、今日もここまで聞いてくださって本当にありがとうございます。
一緒にAIで毎日ちょこっと進化していきましょう。
それではまたねー。
