おいのりさん™ 開発日誌 その2

GitHubがまだよくわからない〜。でも、エックスサーバーからGitHub Pagesへ

「おいのりさん™」の開発を進めています。

今回は、公開する場所を少し見直しました。

これまでは、普段使っているエックスサーバー上に置けばいいかな、と考えていました。
でも、開発を進めるうちに、ひとつ気になってきたことがあります。

エックスサーバーは、私個人が契約しているサーバーだということ。

当然といえば当然なのですが、私が契約をやめれば、その場所に置いてあるものも消えてしまう可能性があります。

個人の契約には、どうしても寿命があります。

「おいのりさん™」は、できればもう少し長く残るものにしたい。

そこで、GitHub Pagesを使って公開してみることにしました。

もちろん、GitHubも“永久”ではありません。
いつかサービスの形が変わるかもしれないし、GitHubそのものがなくなる可能性だってゼロではありません。

それでも、私個人が毎年契約を更新して使っているレンタルサーバーよりは、長く残る可能性があるかもしれない。

エックスサーバーは、

「私が契約を続けているあいだの場所」

GitHub Pagesは、

「GitHubが存在し、リポジトリが残っているあいだの場所」

と考えると、少し性格が違います。

それに、GitHubにソースそのものが残っていれば、将来もし公開先を変えることになっても、別の場所へ移しやすい。

「公開している場所」と「作ったものそのもの」を少し分けて考えられる。

そこも、GitHubを使ってみようと思った理由のひとつです。

とはいえ、GitHubがまだよくわからない〜

GitHubは名前こそ知っていましたが、自分でちゃんと使うのは、ほぼ初めてです。

正直に言うと、

GitHubがまだよくわからない〜。

Repository？
Commit？
Branch？
Pages？

画面に出てくる言葉をひとつずつ確認しながら、とりあえず「おいのりさん™を公開する」ところまで進めてみることにしました。

たぶん、GitHubそのものをきちんと勉強してから始めようと思っていたら、なかなか先へ進まなかったと思います。

今回は、

わからないままでも、必要なところだけひとつずつ触ってみる。

そんな感じです。

まずは index.html を置いてみた

GitHubにアカウントを作って、oinorisan というリポジトリを作成。

そこに、まずはシンプルな index.html を置いてみました。

そしてGitHub Pagesを有効にすると、

https://oinorisan.github.io/oinorisan

で公開できました。

スマートフォンからも、ちゃんと表示されました。

「あ、本当に公開できた」

という、最初の小さな感動です。

PWAにしてみる

今回は、ただのWebページではなく、PWAとして動かせるようにもしてみました。

追加したのは、

• manifest.webmanifest
• service-worker.js
• 192×192のアイコン
• 512×512のアイコン

などです。

スマートフォンで「ホーム画面に追加」すると、ブラウザで見るWebページというより、かなりアプリに近い感覚で起動できるようになりました。

このあたりも、まだ完全に理解できているわけではありません。

でも、

index.html を直す
→ Commitする
→ 少し待つ
→ 公開ページが更新される

という流れは、だんだんわかってきました。

Service Workerのキャッシュに悩む

途中で、

「パソコンでは更新されているのに、スマートフォンでは古い画面のまま」

ということも起きました。

最初は「GitHub Pagesへの反映が遅いのかな」と思いましたが、プライベートタブで開くと最新版が表示されました。

どうやら原因は、Service Workerのキャッシュ。

そこで、開発中はネット上の最新版を優先して読み込むように変更しました。

こういうところも、実際に動かしてみないとわからないものですね。

気がつけば、かなり動くようになった

そこから少しずつ機能を追加していきました。

現在は、

• 大切な人の登録
• 表示名
• プロフィール写真
• 祈りの言葉
• 複数の記念日
• 年月日／月日だけの登録
• 毎年／その日だけ
• 通知日の設定
• 人物の編集・削除
• 記念日の編集・削除
• 「今日のおいのり」
• 「もうすぐのおいのり」
• おいのり専用画面
• テーマ曲の再生

まで動くようになりました。

最初は「まずPWAで表示できればいい」くらいだったのですが、気がつけば、かなり「おいのりさん™」らしい形になってきました。

おいのり時間は25秒

「おいのりする」を押すと、おいのり専用画面に切り替わり、テーマ曲 oinorisan.mp3 が流れます。

最初は60秒のおいのり時間を考えていました。

でも、テーマ曲が約25秒。

実際に試してみると、60秒は少し長い。

そこで、おいのり時間も25秒にしてみました。

これが、思っていた以上にちょうどいい。

長すぎず、短すぎず。

ほんの少し立ち止まって、大切な誰かを思う時間。

「おいのりさん™」には、このくらいが合っているような気がしています。

まだ完成ではない

もちろん、まだ完成ではありません。

画面デザインは仮の状態です。

これから、

• 画面全体のデザイン
• おいのり画面の演出
• おいのりログ
• 何回おいのりしたか
• 最後においのりした日
• 通知機能

なども考えていきたいと思っています。

でも、

GitHub Pages上で公開されて、
スマートフォンのホーム画面から起動して、
実際に「おいのりする」ところまで動く。

ここまで来ると、頭の中にあったものが、少しずつ「使えるもの」に変わってきた感じがします。

GitHubについては、まだまだよくわかっていません。

でも、それでいいのかもしれません。

「おいのりさん™」を育てながら、GitHubのことも少しずつ覚えていこうと思います。

大切な人に、祈りを捧げる。
おいのりさん™