Masamuneブログ

学んだ事を記録していきたいと思います

歴史検索サービス「Mapnica」をリリースしました

はじめに

FJORD BOOT CAMP（フィヨルドブートキャンプ) の "Webサービスを作って公開する" という最終プラクティスで作成した自作サービスをリリースしましたので、そのサービスのご紹介になります。

 

mapnica.herokuapp.com

github.com

Mapnicaについて

サービスの概要

Mapnicaは歴史の出来事を地図上に表示するサービスです。
年代やキーワードでの検索が可能で、検索した出来事が地図上に表示されます。

作成した理由

私は趣味で世界史の勉強をしているのですが、例えばアウステルリッツの戦いについてwikiなどで調べると、「なるほど、ナポレオンが神聖ローマ帝国とロシア帝国に勝利したのか」というところまではわかります。
しかし、日本人である私としてはヨーロッパの地名であるアウステルリッツという言葉には馴染みが薄いので、「あれ？これってフランスで起きたことなの？それともドイツ？ロシア？」という疑問が湧いてきます。（ちなみに現在の国で言うとチェコで起きた出来事です）
このような経験から、歴史の出来事が地図上のどこで起きたのかわからない問題を解決したいと思いこのサービスを作成しました。

このサービスを使うターゲット

このサービスのターゲットは世界史の勉強をしている中で、一歩踏み出して歴史の出来事が現在のどこで起きたのか知りたいと感じる、少し物好きな人に向けたサービスとなります。

欲しい機能

サービスに欲しい機能として、"Google Mapに出来事のマーカーを表示する"、"マーカーをクリックすると解説が出る"、 "年代とキーワードでの検索機能"、"これら全てがページ遷移しないで実行される"の4つを挙げました。
ユーザーログイン機能やユーザによるデータの編集機能なども考えましたが、取り扱っている情報が歴史という大抵の場合変化することほぼないと言えるものでしたので今回は見送りました。

サービス名について

Mapnicaは、Map(地図)+Chronica(年代記)の造語です。地図上に各年代の出来事を表示するサービスなので、この名前にいたしました。気に入っています。

技術スタック

使い方

歴史上の出来事を地図上にマーカーとして表示
  • 歴史上の出来事を地図上にマーカーとして表示します。
  • 表示されたマーカーをクリックすると、クリックされたマーカーの解説が表示されます。

マーカーアクション<p><span itemscope itemtype=

年代による検索
  • スライダーを操作することで年代による検索を実行し、検索結果のマーカーが地図上に表示されます。

年代による検索

キーワード検索
  • 入力したキーワードに合致した検索結果をリスト形式で表示します。
  • 表示された検索結果をクリックすると、クリックされた検索結果の解説とマーカー、同じ年代の出来事が地図上に表示されます。

キーワード検索

大変だったこと

デザイン・UI

ユーザー目線でのデザインを考えることが、慣れていなかったので大変でした。
また、レスポンシブデザインに対応させることを考えた際、使い勝手を考えた結果スマホとPCで、画面の構成をかなり変更することになったので、シンプルに作業量が倍になったような感覚でした。
ただ、書いたコードによってUIや見た目が変化する過程はやっぱり楽しいですね。

データベースの作成

歴史のデータベースの作成にDBpedia(英語版)を使用したのですが、欲しい情報を得るために一からSPARQLの勉強をしなければならず、なかなかサービス本体のコードを書くことができなかったので焦りました。
また、自分が欲しい情報というのは具体的に検索する場合どのようなものなのか、例えば歴史という言葉を構成するものは、出来事(イベント)と時間情報の組み合わせだと考えていたのですが、それだけだとスポーツの大会やコンサートの情報まで取得されてしまうので、一言に歴史と言ってもそれがどのような情報で構成されている言葉なのか定義しようとすると大変だということがわかりました。
今回データベースを作成するにあたり、私が定めた歴史という言葉の定義は、出来事(イベント)と時間情報に加えて、後世に影響を与えたという情報を有しているものといたしました。

Google Maps Apiの設定

超有名なAPIなので情報こそ調べればたくさん出てくるのですが、自分の構想している機能に合致した情報を精査することに苦労しました。
例えば、Google Mapに検索結果のマーカーを表示させたい際に、自分で作成したデータベースの情報を検索してマーカーを表示させたかったのですが、大半の情報はGoogle Maps Apiに備え付けられている検索機能についての情報でした。この場合私の検索方法が悪かったのですが、自分が欲しい情報を検索したり質問したりする際は、当然のことなのですが、その欲しい情報につい自分の中で具体的かつ詳細に絞り込む必要があるので、改めて情報を調べるという当たり前の行為の難しさを実感しました。

Vue.js

FJORD BOOT CAMPのプラクティスで学習してはいたのですが、Vue2とVue3の違いや、コンポーネント間での最適なデータの受け渡し、ページのどの領域をコンポーネント化すると恩恵を受けられるかなど悩むことが多かったです。
しかし、自分的にはVue.jsの扱いに少し自信がつきました。

感想

自分が実現したかった機能はすべて実装できたので、構想したものを実装する能力は上がったと思います。また、サービスの特性上JavaScriptをガリガリ書けたので、プラクティスではRubyに触れる機会が多かったこともあり、自分としてはいい経験ができたと思っています。
それと、サービスの構想からデプロイまで一貫して体験できた経験は今後さまざまな場面において活かせると思いました。
サービス自体は完成しましたが、完成した後からも改善点がたくさん湧いてきているので、今後も継続的にアップデートしていきたいです。