見出し画像

ぽこピーが旅行した場所が確認できるサイトを世界地図対応したよ

この記事は「ぽこピーアドベントカレンダー2023」の11日目の作品を振り返る記事です。

あけましておめでとうございます!
本当はアドベントカレンダーの時期に出したかったのですが、色々忙しくて「まぁ、いっか」となっていたのですが、事件が起きたので記事で残しておこうと思います

とりあえず、この動画を観てくれ!

アドベントカレンダーで自分が作ったサイトが動画内で紹介されてる!!

そして、名前を間違えられてる!!

制作:かにさん

えびです!嬉しい〜〜〜!!

ぽこピーの新年一発目動画で紹介されて、めっちゃ反響を貰える年始って嬉しい〜〜〜!!

それもこれもぽこピーアドベントカレンダーがあったお陰です!!
マジで!

今年の12月にもきっと開催されると思うので、是非参加しましょう!

スペシャルサンクス:ikura18さんぽこピーアドベントカレンダー運営チーム

技術的な話

ここからは、少し難しい話が絡んでくる備忘録的な内容となります
今回のサイトの裏側を覗いてみたい人は読んでみてください
興味無い人は下の方まで飛ばしてね

実はこのサイト自体は去年のアドベントカレンダーで制作済みで今年、アップデートを行いました
アップデート内容は大きく以下の2つです

  • 大陸用のページを追加

  • 動画の管理にCMSを使用するように

大陸用のページを追加

去年時点ではアジア大陸の動画しか出ておらず、大陸情報の重要性が低いので準備中としていました

去年のサイトの様子

今年はヨーロッパ旅行動画がアップされたので、大陸情報の重要度が上がりました
あの旅行動画めっちゃ良かったね……(しみじみ)

現在のサイトの様子

都道府県側の仕様だと、1拠点につき1動画しか表示が行えません
ただ、1大陸に対して1動画しか表示できないのは流石に淋しいですよね

なので、スライダーを実装し複数動画に対応しました
例えば、アジア大陸では5つの動画が表示されます

スライダー表示対応

ちなみにめちゃくちゃ雑な実装なので、色々ボロがありますが知らん!
(Reactで動画が再生できるカルーセルスライダーのおすすめがあったら教えてください!)

この複数動画の対応は、ゆくゆく都道府県でも実装しようと思います

動画の管理にCMSを使用するように

動画の管理は、生のjsonファイルをちまちま修正することで対応を行なっていました
この方法だと、動画がアップされたらPCを起動してコードエディターを開いてjsonファイルを開いてjsonファイルから該当の行を見つけて………めんどくせぇ!!

面倒くさいなら、面倒くさくなくすれば良いだけです
そこで出てくるのがCMSです
今回、僕が利用したのはmicro CMSという国産のヘッドレスCMSです

簡単に言うと、さっき言ってたjsonファイルを別のサイトから弄れるようになるサービスです

見た目的な変化を見せると、これが…

コードエディター

こう!

micro CMS

見やすい〜〜!

特に嬉しいのが、micro CMSがスマホで編集可能である点です
これによってPCを開かず、素早くスマホでサイトの更新ができるようになりました!

実は今年のアップデートはこのCMS化がメインで、大陸の追加は見た目の変化が欲しいから対応した程度の温度感でした

もし、もっとサイトの技術的な話について知りたい方がいればXでDMで質問してみてください

まとめ

以上、アドベントカレンダー11日目の振り返りでした

色々書きましたが動画のまとめ漏れをひたすら心配しています…
もし、ぽんぽこさんがこのサイトを参考にして都道府県のカウントダウンをする事があったとして、漏れがあったら激ヤバじゃん!

実際、今回の2つ都道府県が漏れていることを指摘して貰いました……

みなさんの協力が無いと不正確な情報をアップしているサイトになってしまうので、僕のミスを見つけたら指摘しまくって貰えると嬉しいです!
非公式のサイトと言えど、動画で紹介して頂いたので正確な情報に更新し続けられるサイトを目指していきたいので!

特に、都道府県の動画を複数表示できるようになった時の集計は一人で出来る気がしていないので、みんな助けてくれ〜〜〜!と救援信号みたいな記事でした


動画の概要欄

自分は被災地から離れたところに住んでいるので、被害はありませんでした
年始はXで投稿はなるべく控えていました(不謹慎とかではなく、少しでもTLで必要な情報が必要な方に届きやすくなるように)が、これからはいつも通りに過ごそうと思います
悲観し過ぎず、自分のできる範囲でできることをしていきましょう
みんながぽこピーに元気を貰っているように、あなたが誰かに元気を与えてるはずです

いいなと思ったら応援しよう!