利用APIs

ホットペッパーWebサービス
ルビ振りAPI
Microsoft Translator
Google Maps JavaScript API v3

担当分野

Programming & Writing … ショコシス姉
Design & Testing … ショコシス妹(design maf)

特徴

言葉や環境が違う国に旅行したり、住んだりした時に、食べ物で困るという話はよく聞きます。ショコシス姉妹も長期海外在住、また、日本以外の国を旅した経験も多く、未知の食べ物に遭遇するワクワク感と、99％を勘に頼ってチョイスしたメニューを口にする際のドキドキ感を、何度も体験しています。そこで、長期、短期にかかわらず、日本に滞在中の外国人の人たちに役立ててもらおうと、この英語のメニューを置いている日本国内にあるレストランを検索出来るアプリを作成しました。(JApanese Menu In Englishの頭文字をとって、JAMIEと名づけました。)

日本語にも日本の地理にも地名にも慣れていない人たちにとって便利な様にと、地図と、テキストによる検索結果一覧を連動させています。(下記、使い方参照)また、現在地を初期画面でディフォルト表示するのは勿論、情報を得ているだろうと思われる目的地の地名や最寄り駅の英語名(ローマ字名)からも、簡単に、その場所を地図上に表示出来る様にしました。
地図をドラッグして(手動で)移動させる等、日本語能力に左右されない検索対象の微調整も可能です。そして、地図に表示した場所という文字ではなく「ビジュアルに確認出来る検索対象」を使用して、英語のメニューがある周辺レストランを検索出来るようになっています。経度や緯度が分かっている場合には、その数値を直接入力して、地図を移動させることも出来ます。

検索結果は、レストラン名の読み仮名をローマ字化した部分以外は、Microsoft Translatorにより、英語に翻訳されますが、ページ上部に表示されるMicrosoft Translatorのツールバーを使って、ユーザーアクションによる他言語への翻訳も可能です。日本語読みにもチャレンジしてもらいたいと、結果に含めた読み仮名は、翻訳には適さない為、ルビ振りAPIにてローマ字化を実現しています。
検索結果初期画面では、複数のレストラン位置を示すマーカーを地図上に表示していますが、特定のレストランのMAPボタンをクリックすると、そのレストランのマーカーのみを表示し、場所の確認がし易くなっています。

この作品も、PCやタブレット、スマートフォンといった、画面サイズの異なるデバイスに一つのデザインで対応させる、レスポンシブデザインで作成しています。

使い方

基本のステップは二つです：
　１．地図上に検索対象エリアを表示する。
　２．サーチボタンをクリックする。
この二つのステップ及び、検索結果を利用する上で、いろいろと便利な機能を加えてあります。

地図上に検索対象エリアを表示する為のサポート機能:
- 初期画面で、現在地を表示。
- 外国人に人気のある都市のボタン、又は、シティリストから選択。
- 新幹線の駅及び、その他の駅リストから選択。
- 地図の位置が変更された場合も含め、常に現在の緯度経度を表示。
- 緯度経度の数値を変更し、「Update」をクリックすると、入力した緯度経位置へ地図を移動。
　※リストは、JavaScriptプラグインのChosen導入により、検索可能なドロップダウンリストにしてあります。また、ローマ字では同音の名前の区別が困難な為、都道府県名や新幹線の路線名を併せて表示しています。

検索結果と地図の連動機能:
- 検索結果に含まれるレストラン位置を、地図上にマーカー表示します。各マーカーをクリックすると、検索結果内のレストラン情報詳細へのリンクが表示されます。
- 検索結果内の各レストラン情報に含まれるMapボタンをクリックすると、そのレストランのみのマーカーを表示した地図へとジャンプします。また、その地図上のマーカーをクリックすると表示されるリンクを使って、レストラン情報へと戻ることが出来ます。

拡張機能

Yahoo! Open Local Platform（YOLP）のYahoo!ローカルサーチAPIを利用することにより、駅、郵便局、銀行、病院、警察等を、レストラン同様、地図上にマーカー表示する機能を加えることも出来ます。検索結果は、Ajaxを取り入れて、数件ごと、「もっと見る」ボタンをクリックする度に、検索結果が下に追加表示されていくバージョンもあります。また、レストランの検索結果に、絞込み機能を追加することも可能です。

今後の課題

ＯＳやブラウザ、インターネットへの接続環境によって、動作が遅くなったり、ぎこちなくなったりする様なので、全デバイスで快適に動作するようなアプリへと成長させることが課題です。また、姉妹で基本となるベースを作成後、姉の各機能追加作業が、応募締め切り直前まで掛かってしまった為、妹によるデザインの最終調整が出来ないままになってしまっており、デザインの再調整による視覚的デザイン及び操作性の向上を図る必要があります。(ロゴのサブタイトルにフランス語？と思わせるスペルミスがありますが、これは、姉のタイプミスを妹がそのままコピペしたものです。(汗)妹の名誉の為に言っておかなきゃ。原因となる姉のタイプミスがあったHTML内のページタイトルは、しっかりちゃっかり、修正した姉です。笑。追記:妹も、ロゴをこっそり修正した模様。11月1日の姉妹便り参照。)