# いらっしゃいませ！ 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で毎日ちょこっと進化していきましょう。 それではまたね。