はじめに
突然ですがみなさん、最後に海外旅行に行ったのはいつですか？
多くの方は1年以上海外旅行に行けていないのではないでしょうか？
申し遅れました、Yunoと申します。
【Twitterアカウント】
https://twitter.com/bosenohito
【今回作ったサービス】
https://www.tripable.jp/
少しだけ私自身の話をすると、2020年11月まではタイに住んでおり、英系金融コンサルティング会社でIFAをしておりました。しかし、コロナの影響で厳しい渡航規制が設けられたことでVISAの更新に問題が生じ、日本に帰国することを余儀なくされました。
私のように、海外で働いていた方の不本意な帰国や、これから海外で働こう、留学しようとしていた方が、渡航不可能になってしまった方は大勢いると思います。
海外旅行に限らず、海外留学や、海外赴任など、コロナの収束がみられない現状（2021年7月時点）では、ほぼ不可能なのが現実です。
そこで、渡航難易度や感染リスクを気軽に確認して、コロナが収束したら皆が行きたいところややりたいことを共有するサービスは作れないかと考えました。
作りました。
https://www.tripable.jp/
サービス概要
####1. 世界２００ヵ国以上から渡航情報を検索
直感的かつ気軽に地図から検索できるようにしました。
国名からも検索できます。
2.渡航難易度を6段階で表示
外務省が公開している危険度や感染危険度情報を元に、総合的な渡航難易度を算出し、6段階で表示しています。最初はパーセンテージで示そうかとも考えたのですが、確証のない数字を載せるのは無責任だなと思い、6段階のスターで表示することにしました。
3.現地の最新日本大使館メールを確認可能
これは私自身が海外に住んでいて感じたのですが、現地の日本大使館が発信する情報はとても優秀で、情報の速度と信憑性がとても高いのです。なので、これらの情報を在住者以外の方も気軽に確認できたらいいな、と思って見れるようにしました。一応、最新の５件を取得して表示しています。
4.いきたいところややりたいことをマイリストで管理
マイページでは、コロナ収束後に行きたい場所や、やりたいこと、過去の旅行のエピソードを、管理できます。
5. 他の方達のいきたいところなどをタイムライン形式で確認
他の方達のいきたいところややりたいことなどをタイムライン形式で確認ができます。いいねやコメントもできるようにしました。
使用技術
- Ruby 2.6.6
- Rails 6.0.3
- JavaScript
主なGem
- sorcery
- nokogiri
- oga
- selenium-webdriver
- meta-tags
- rubocop
- bullet
- better_errors
テスト
- RSpec
フロントライブラリ
- jQuery
- jqvmap
ストレージサービス
- ActiveStorage
- Amazon S3
ER図
こだわったポイント
説明不要ですぐ使える
これは個人的な意見なのですが、説明しないと使えないようなごちゃごちゃしたサービスが苦手です。多機能なサービスでもUIや導線設計で解決できると思っています。かといってデザインにこだわり説明が不十分なのもユーザーファーストではないので、そのあたりの塩梅は意識しました。
UXで離脱させない
いくら多機能でデザインが優れていても、レスポンス速度が極端に遅かったり、やたらモーダルが使われていたり、導線が不自然だったりすると、一般ユーザーはその時点でサービスを使わなくなる可能性が高いと思い、開発段階で親しい方から定期的にフィードバックをもらい、独りよがりなUX設計になっていないかを意識しました。開発していると、段々と感覚が麻痺してきて、何が正解かわからなくなるので、周囲の人に確認してもらうのはお勧めです。
今回は
地味ですが、トップページの検索画面がフレームアウトするとヘッダーに固定されるようにしたり、
スマホ表示の時のヘッダーとフッターボタン
の表示もスマホで使いやすいようにスクロールやページに応じて動的に切り替わるようにしました。
地図検索でGoogleMapを使わない
国を世界地図から検索する機能を実装するにあたり、調べると大体GooglMapを用いた実装方法が出てきます。
しかし、今回はできるだけシンプルなデザインかつ使いやすくしたいという思いと、自分の中でのある程度の完成イメージがあり、GoogleMapは選択肢から外しました。結果的に、jqvmapというjQueryのライブラリを用いました。機会があれば、使い方の記事も書こうと思います。
国画像の自動取得と動的OGP出力
今回は、200ヵ国以上の国情報にActiveStorageで国のイメージ画像を当てているのですが、一件一件最適な画像を探して添付していたら、途方もない時間がかかってしまうので、最適なフリー素材をインターネット上から取得しcountryオブジェクトと紐付ける自動スクリプトを作成しました。
またTwitterのOGPイメージも、200件以上の国の渡航情報ページを一件一件TwitterCardValidatorを通さないと画像が正しくクロールされず、これも果てしない時間がかるため、自動でTwitterにクロールさせるようなスクリプトを組みました。あと、シェアするときのOGPはすべての国の画像に対してタイトルロゴが合成されているのも小さなポイントです。
外務省情報の取得タイミング
外務省は膨大な情報を公開しており、国によっては一回のリクエストで、150,000行以上のデータが返ってきます。
なので、「いつ」「どのように」リクエストを飛ばすか、を意識しました。
（前提として、本サービスは実用的なサービスにしたいという思いがあるので、常に最新の情報を表示させています。）
最新の情報を取得するために国情報を頻繁に取得することのデメリットは大きく２つあります。
一つ目が外務省側のサーバーに負荷をかけてしまうこと、二つ目が大量のリクエストを送ることで悪意のある攻撃と認識されてしまう可能性があることです。
またユーザーが国情報を取得するときに、欲しい情報をすべて取得し表示させると、レスポンススピードが低下することで、UXが低下します。
なので今回は、比較的重い情報（危険度や感染危険度）を取得する作業は、アクセス数が低下すると思われる深夜帯の3時〜4時に1日に一回取得しています。メール情報は国情報とは別れており、比較的軽めの情報が返ってきます。なのでユーザーがページにアクセスした時点で最新の情報を取得するようにしました。
今後実装したいこと
- 渡航情報の充実化
- 渡航情報が更新されたら通知される機能
- SNSログイン機能
- 都市検索機能
- より最適な国画像の添付
- Discord連携
終わりに
最後まで目を通していただきありがとうございました！
制作過程の苦労話やこれから個人開発をする人に向けたアドバイスなどもできたらなと思うので、また続き的な感じで記事書きたいと思います。
みなさんが早く気軽に海外に行けるようになる日が来るのを願っております！
ではでは！！
【Twitterアカウント】
https://twitter.com/bosenohito
【今回作成したサービス】
https://www.tripable.jp/