おいのりさん™ 開発日誌 その１
WebアプリMVPをエックスサーバーで公開するまで
「大切な人やことを、忘れずに想うための仕組み」をつくりたい。
そんな考えから進めてきた「おいのりさん™」を、実際に触って試せるWebアプリとして公開しました。
今回つくったのは、完成版ではなくMVPです。MVPとは、サービスの中心となる体験を試すための、実用最小限の製品を意味します。
いきなりスマートフォン用のネイティブアプリをつくるのではなく、まずはスマートフォンのブラウザで使えるWebアプリとしてスタートしました。
「記録」ではなく「祈ること」が主役
おいのりさん™では、大切な人や出来事に関する日を登録できます。
たとえば、誕生日、結婚記念日、試験の日、合格発表の日などです。
これらを「メモリアルデイ」として記録し、その人に対する願いや祈りも複数登録できるようにしました。
ただし、主役は記録ではありません。
過去の出来事を保存するだけではなく、現在その人を想い、未来に向けて祈ること。それがおいのりさん™の中心にある体験です。
最初につくった4つの画面
MVPでは、主に次の画面をつくりました。
- この先の予定を表示するトップ画面
- 大切な人やことの個別ページ
- メモリアルデイや祈願の登録・編集画面
- おいのりを行うサポート画面
トップ画面には、これから訪れるメモリアルデイや祈願の関連日が、日付の近い順に表示されます。
対象ごとに名前、表示タイトル、丸型写真を登録できます。1人に対して複数のメモリアルデイや祈願を持たせることもできます。
祈願には日付がなくても構いません。また、試験日と合格発表日のように、複数の関連日を登録できる構造にしました。
「おいのり」の時間を体験にする
個別ページの「おいのり」ボタンを押すと、おいのりサポート画面へ移動します。
ここでは、おいのりする時間、画面のカラー、メロディを選べます。
60秒を選んだ場合は、音を鳴らさない「黙祷モード」になります。時間が終了すると、「想いをとどけました」という画面が表示され、トップ画面へ戻ります。
最初の試作では、おいのりが終わったあとに戻れなくなる問題も発生しました。自動的に戻る動作に加えて、「この先の予定へ」というボタンを設け、手動でも確実に戻れるように修正しました。
こうした実際に触ってみなければ分からない問題を見つけられることが、動くMVPを早めにつくる利点だと感じました。
登録機能で分かったこと
登録機能を試している途中で、誕生日の扱いについても重要な発見がありました。
生年月日が分かる場合もあれば、誕生日の月日だけが分かる場合もあります。
当初は年月日として入力すると一覧に表示されましたが、月日だけで登録した場合にうまく表示されないことがありました。また、入力形式によっては「Invalid Date」というエラーも発生しました。
そこで、「9月21日」「09-21」「9/21」などの入力を受け付け、正しい日付として処理できない場合でもアプリ全体が停止しないように修正しました。
今後は、誕生日の月日を基本項目とし、生まれた年は分かる場合だけ追加できる形にすると、より自然に使えそうです。
ロゴとメインテーマを組み込む
おいのりさん™には、すでに制作していたロゴマークがあります。
今回は元のSVGデータを使い、Webアプリ内のロゴ、ブラウザのアイコン、スマートフォンのホーム画面に追加したときのアプリアイコンを用意しました。
ロゴの曲線には、おいのりさん™らしい独自の存在感があります。単に飾りとして配置するのではなく、祈りが完了した画面にも使用し、体験の一部として組み込みました。
さらに、以前から制作していた「おいのりさん」のメインテーマも追加しました。
おいのりサポート画面で「メインテーマ」を選ぶと、祈っている間に音楽が流れます。60秒の黙祷モードでは、メインテーマを選んでいても無音になります。
視覚だけでなく、色と音も含めておいのりの時間を設計できるようになりました。
最初はブラウザ内に保存
現在のMVPでは、登録内容をサーバーのデータベースではなく、使用しているブラウザ内に保存しています。
そのため、登録した内容は同じ端末とブラウザでは残りますが、スマートフォンとパソコンの間では共有されません。ブラウザのデータを削除すると、登録内容が消える可能性もあります。
本格的なサービスにする場合は、ログイン機能やデータベースを追加し、複数端末で同じ情報を利用できるようにする必要があります。
ただし、今回の目的は、おいのりさん™の中心となる体験が実際に使えるかを確認することです。その段階では、ブラウザ内への保存でも十分に試せます。
既存のWordPressを残して公開
すでに oinorisan.com ではWordPressサイトを運営しています。
そこで、WordPressを別のシステムへ置き換えるのではなく、既存サイトをそのまま残し、MVP専用のフォルダを追加する方法を選びました。
公開先は次のURLです。
Webアプリをエックスサーバーで公開できる形式に変換し、ロゴ、画像、音楽、アプリアイコン、画面を動かすプログラムを、すべて mvp フォルダの中にまとめました。
そのフォルダをエックスサーバーの public_html 内へアップロードすることで、既存のWordPressに影響を与えずに公開できました。
開発環境で動かすために必要なファイルを全部サーバーへ置くのではなく、公開に必要な完成ファイルだけをアップロードする方式です。
途中で起きたこともMVPの一部
今回の制作では、最初からすべてが順調に動いたわけではありません。
開発を始めようとすると、必要なコマンドが見つからないというエラーが出ました。
おいのりが終了してもトップ画面へ戻れない問題もありました。
入力した日付によってアプリが停止したり、登録した誕生日がトップ画面に表示されなかったりすることもありました。
しかし、それらを一つずつ確認し、修正しながら進めたことで、単なる画面イメージではなく、実際に登録して、おいのりまで行えるWebアプリになりました。
MVPをつくるということは、最初から完璧なものをつくることではありません。
中心となる体験を早く形にし、使ってみて、そこで分かったことを次の設計に反映していくことなのだと思います。
これから考えたいこと
ここからは、それぞれの画面のデザインと、使い続けるための仕組みを整えていきます。
今後検討したいのは、次のような項目です。
- 誕生日を年月日でも月日だけでも登録できる仕組み
- 登録データの書き出しと読み込み
- 複数端末で利用するためのログインとデータ同期
- 実際の通知機能
- 社会的な祈りや黙祷のプリセット
- 各画面のデザインと操作性の改善
- ホーム画面へ追加して使うPWAとしての調整
機能を増やすことだけではなく、「祈ることを邪魔しない静かな操作感」を大切にしたいと思っています。
まずは、動くところまで来ました
アイデアとして考えていたおいのりさん™が、スマートフォンから実際に開き、登録し、祈ることのできるWebアプリになりました。
まだ小さなMVPですが、サービスの核になる部分は触れる状態になっています。
ここから自分でも使いながら、必要なものと、そうでないものを見極めていきます。
記録するためだけではなく、大切な人やことを想う時間をつくる。
おいのりさん™の最初の一歩です。
Follow me!
