GoogleMapのタイムライン表示アプリ完成

前回のブログでGoogleマップのタイムラインをPCのWebブラウザで見る話を書きました。なかなか希望通りのアプリが見つからなかったのですが、その後Chat-GPTを使えば割と簡単にできそうな気がして試してみたら夢中になってしまいました。私の初めてのWebアプリ完成です。AIの手助けで自分の望む仕様を超短時間ですべて入れ込むことができました。

アプリのファイル本体と説明をこちらに置きました↓

インストールなどは不要です。MapTimelineView.htmlというファイルをダウンロードしてダブルクリックすれば動きます。(訪問地の名称も表示したい場合は別途無料のYahoo!クライアントIDを取得してコードに書き込む修正が必要です)

・Webアプリって入出力をブラウザが行って、実行はサーバー側で行ってるのかと漠然と思っていたのですが、exeファイルと同じようにローカル側で実行しているという事を今回初めて知りました。

・カレンダーの日付部分に、その日の移動距離に応じたサイズの円を表示しています。

・移動手段によりラインの色を変えています。徒歩なら黒の破線、自転車なら緑、車なら青、電車は紫、飛行機や船は赤などです。

・何でも知ってる優しい大先輩と会話してるみたい。どんな初歩的なことを聞いても丁寧に答えてくれるし。「まずは△△を読んでネットで調べて自分でやってみてそれでもわからなかったら聞こうよね～」なんてこと私だったら言うかも。

・コードを貼り付けると瞬時にそのコードが何をしているかを理解してくれていて、次に「〇〇を××したい」と送ると、やり方の説明と変更したコードを提示してくれ、しかもそれがそのまま使えるコードなんですよ。こちらが聞いてない部分のコードをスマートな手法にさりげなく修正してくれてたりします。日本語でOKだしこれで無料なんてすごすぎる！！(あんまりたくさん聞いていると次はxx時以降にね！みたいなこと言われちゃいますが)

・今回のアプリも90%以上はChat-GPTのコードだと思います。自分でやったのはデータの構造を考えたのとUIの微調整くらいです。特にUIに関してはほとんどお任せでした。何せjsonもJavascriptもCSSも知識ゼロからのスタートだったので。

・今回のアプリ、AIを使わずに自分の力だけでは1年たっても終わってなかったと思います。というか途中でやる気が失せて挫折していたかも。

・今まではHello World!を画面に表示したら言語のリファレンスやネットで解説や誰かのコードを読んで理解して自分でコードを書いてエラーをつぶしてのループをグルグル回して習得したのですが、やりたいことを文書にできれば動くコードが最初に手に入るので、そのコードを読んで言語を理解するという今までと逆の順番になるのかなと。

・知ってる人は何を今更でしょうが、インタープリターなのでビルドの時間が不要だし、修正後F5を押してブラウザにリロードすればすぐに動作確認できるし、ブラウザ自体に開発者ツールが組み込まれていてブレークポイントの設定だのステップ実行だの変数の中身の表示だの普通にデバッグができるし、WindowsだけでなくAndroidでも動くし、、、、今までこんな宝物が手元にあったことを知らなかったなんて、、、