[tabiori clone]終了するサービスを救う方法
中腰愛用していた「tabiori」が2022年12月15日でサービス終了になるため、やっつけbubbleで作ってみる。
ログイン画面
新規アカウント画面
ホーム画面
新しいしおり画面（ホーム画面 ＞ ポップアップ）
スケジュール画面（スケジュールなしタブ）
スケジュール画面（スケジュールありタブ）
スケジュール画面（しおり情報タブ）
Schedule.currenttab=1のとき表示。しおり情報を押すと１にする。
設定画面
プロフィール設定
メンバー追加の仕組み
１．しおりテーブル（Bookmark）に、メンバー（User List）と招待コード（Text）を追加。招待コードはしおりのCreate後に、unique_idをハッシュ値にしてUpdate
２．メンバー追加の承認画面と確定画面を追加。機能説明は後程。
３．メンバー追加ボタンで招待用URLを作成する。招待用URLは、認証画面？s=招待コードにする。
４．承認画面のページロード時に、ログインしていて、パラメータsがあれば、しおりテーブルから抽出して、確定画面にページ遷移する。そのときにしおりデータを渡す。
５．４でログインしていなければログインを促す画面にする。パラメータなしは知らん。
６．確定画面でカレントユーザーをしおりテーブルのメンバーにAddする。
７．しおりから離脱すると、しおりテーブルのメンバーからRemoveする。
８．しおりの表示は、「作成者のみ」でなく「カレントユーザーがメンバーにいれば」に変更する。
自分が閲覧可能なしおりを他メンバーが操作したログ表示
１．ログテーブル（Log）を作成。しおり、分類、登録日をフィールドを追加。登録日はyyyymmddの数値にすることで、同じ日に複数修正しても１つ登録にする条件用。
２．スケジュール登録、更新時にログテーブルを登録する。ただし同じデータは同日登録しない。（修正がたくさんあってもログには１つにすることで見やすくするため）
３．表示はメンバーに入っているしおりでログを自分で作っていないものを表示させる
表示内容も分類＝１であれば、「新規メンバーがいます」分類＝２であれば「〇〇さんがスケジュールを更新しました」にする。
地図検索
１．LeafyMapsとOpenStreetのプラグインを使用する。
２．OpenStreetMap公式にユーザー登録してAPIを取得する。
LeafyMapsはここ
OpenStreetは誰かのが入っていて使えるけど、怖いので上書きする。ここ
ポップアップの地図検索は１画面にしておき、ポップアップ呼び出し時に、どの画面から呼び出したかの値をCustomStateでもっておく。
地図検索後に、行選択したときに、どこの画面に返すかの変数に利用する。
中腰終了しないかも？！
中腰動作確認
bubbleの14日間無料を使ってみた。
停止予定日 2022/11/30
中腰課題
レスポンシブ対応スケジュールの余白入力、表示領域の拡張アイコンのスクロールバーiphoneとandroidで表示領域が違う地図の利用- メンバー追加時の
「QRコード」「LINE招待」「SMS招待」
中腰レスポンシブ対応は、Groupを大量に作り、LayoutをRowやColumnにすることで解決できそう。
入力、表示領域の拡張は、FloatingGroupでY軸を固定したヘッダー、フッターを作成する。メインのLayoutをColumnにし、ヘッダーの高さ分をMarginでずらすことで領域がスムーズにスクロール可動する。
アイコンのスクロールバーは、ブラウザ表示とスマホ表示で違うので「iphoneとandroidで表示領域が違う」と同じ課題でよさげ。
中腰地図機能はGoogle Geocode APIと連動すればできそうだけど料金設定があるので、オープンソースのOpen Streetを使うと同様のことが実現できそうなことが分かった。
中腰QRコードはプラグインの「Colour QR Code Generator」を使って実現できた。
レイアウトのColour QR Codeはオブジェクトだけなので、利用するときは、そのエレメントから出力される画像を利用する。
URLに招待コードを付与するので、ページロード時に読み取って渡す。
中腰地図検索は公開Pluginを組み合わせるとできた。「Leafy Maps」が地図。「Open Street」が検索。
左：公式OpenStreetMap＋マーカー、右：Leafy Maps＋Add Marker処理
Googleは制約がある
OpenStreetMapは制限なし。ただし、Wikipedia的なものなので情報欠損がある。
中腰スケジュールの余白がようやく解決。
RepeatingGroup内にRepeatingGroupを入れ子にして、日付ごとに表示しようとしたが、GroupBy日付の１セル行が固定なので、その中でスクロールするため、やりたいことと違っていた。
＜失敗例＞
自分の行と前の行の日付が違っていたら表示。１セルの表示範囲オーバーしたらそのまま出すようにすることで、スクロールは全体にかかり、やりたいことが実現できた。
＜成功例＞
中腰iphoneとandroidで表示領域が違う問題は、Widthを375にするとよいとあったので、それで問題なさそう。
Popupは100%にしないとスマホでうまく表示されない。パソコン上だとおかしく見えるが・・。
中腰地図のOpenStreetMap改善の件。やっぱしnominatimの結果がほしい。
でもnominatim.openstreetmap.orgではAPI使えない。
自分のサーバーを立てて、nominatimを入れるとAPIでリクエストが取れることが分かった。
＜dockerでnominatimを動かす方法＞
githubサイトでは、データはモナコになっていたので、日本に変更してみた。
docker run -it \
-e PBF_URL=https://download.geofabrik.de/asia/japan-latest.osm.pbf \
-e REPLICATION_URL=https://download.geofabrik.de/asia/japan-updates/ \
-p 8080:8080 \
--name nominatim \
mediagis/nominatim:4.2
→失敗する
中腰１週回って、google mapに戻った。やっぱりOpenStreetMapの情報では信頼性が低いし、検索ヒットもしないことが多い。
