リアルタイムの情報、公共交通システムのシナリオの変化、そしてモノのインターネット（IoT）が出会う場所がある。IoTTは、リアルタイムのデータで機能する、高度でユーザーフレンドリーな交通機関アプリと考えることができる。IBM、Moovit、Google Mapsのような大企業が「インテリジェント・トランスポーテーション」に資本投下しようとしている中、IoTTは私たちの交通手段に対する認識に革命を起こし、毎日の通勤者にとってより身近なものにする用意がある。

開発者、特にモバイルアプリ開発者であれば、この新展開が自分にどのような影響を与え、どのように関与できるのか疑問に思うかもしれない。iOSでもAndroidでも、PubNubのようなリアルタイム・データ・ストリーム・ネットワークは、この大きな変化をナビゲートするゲートウェイとなる。公共交通情報を扱うこの新しい波は、IoTTのエキサイティングな未来を現実に近づけ、デバイスがチャネルに接続して通信し、現在地や目的地などを放送することを可能にするモバイルデバイス用の交通アプリを開発する時代を想定している。このようなリアルタイムの情報がすべて、優れた効率を実現するために、この情報に基づいて交通機関をグループ化するのに役立つ未来を想像してみてほしい。

PubNubはこの進化の最前線に立つ強力なツールであり、IoT分野における最先端技術と信頼できるサービスで革新を続け、当社の有名な認定と資格に支えられています。これにより、輸送システムの仕組みを再定義しうるソフトウェア・アプリケーションを作成する有望な機会が得られます。この種のアプリケーションは、交通業界においてますます重要性を増しており、通勤者、交通機関、交通サービス・プロバイダーにとって有益であることが証明されています。

では、どうやって始めるのか？簡単な例で手を汚してみよう。この時代、公共データは豊富にあり、自由に利用できる。公共ゾーニング・データから地下鉄の時刻まで、多くの都市が簡単に利用できるAPIを通じて公共データを提供している。この記事では、BART（Bay Area Rapid Transit）APIをベースに、ベイエリア最大の鉄道システムの幅広い指標、統計、スケジュールを提供するAPIを利用し、公共交通アプリの大きな後押しとなるリアルタイム更新可能な交通スケジュール・アプリケーションを作成する。

交通アプリの作り方プログラミングの範囲

この記事では、BART APIを活用して、Google MapsやMoovit、Uberのようなリアルタイムの最新情報や運行情報をユーザーに提供する、リアルタイムの公共交通スケジュールアプリケーションを構築する方法を紹介します。これは、出発時間からサービスの中断の可能性まで、貴重な情報を提供することでユーザーエクスペリエンスを向上させることを目的としている。地下鉄の駅やバスの停留所のような）駅の位置を取得し、ジオハッシュに変換する方法を学びます。情報を収集した後、サンフランシスコにいるユーザーの位置を特定し（あるいは私たちのケースでは偽装し）、ユーザーの位置と近くの駅を照合する。

出発予定時刻を取得したら、その時刻をマップのインフォボックスに表示する。すべてのプロセスは、コードスニペットと説明を伴うステップバイステップのチュートリアルで簡素化されています。

交通スケジュールアプリを始める

リアルタイムの乗換案内アプリを作成するには、前回のJavaScriptジオハッシュのチュートリアルと同様のセットアップが必要です。効果的な旅行計画アルゴリズムの助けを借りて、リアルタイムデータの力を活用することで、公共交通機関に関連するリアルタイムの更新を効果的に管理できる、iOSやAndroid、その他のモバイルデバイス用のユニークで使いやすいモバイルアプリを作成することができます。

まず、アプリのETAモジュールには「node」と「npm」が必要です。これらの用語に馴染みがない場合は、PubNubのNode.jsの包括的な紹介をご覧ください。

使用するnodeパッケージは以下の通りです：

ブラウザでnodeパッケージを使用するためのBrowserify。
ngeohashは緯度と経度を文字列にエンコードします。
ブラウザ以外からのHTTPリクエストのためのrequest。
XMLリターンをJSONに変換するxml2js。

これらのパッケージは、APIの呼び出し、データの処理、アプリケーションに必要なタスクの実行に必要な機能を提供する。サンプルのコードを見ると、これらのパッケージが欠けていることに気づくだろう。プロジェクトのベースフォルダーに移動し、コマンドラインに npm install\ と入力するだけでよい。これで、package.json\の要件に基づいてパッケージがインストールされる。

次のセクションでは、ジオロケーションデータの取り扱い、プッシュ通知の効率的な処理、車両位置の効果的な表示、アプリケーションの優れたユーザーエクスペリエンスの作成について詳しく説明します。ご期待ください！

乗換案内アプリケーションのユーザーハッシュと地図位置情報

HTML5 Geolocation APIは、デバイスIP、RFID、WIFI、Bluetooth MACアドレス、GPS、またはユーザー入力に基づいて地理的位置（経度と緯度）にアクセスできる便利なツールです。ここでは、UberやGoogle Mapsのような交通アプリと同じように、ユーザーの位置情報を取得してリアルタイムの追跡を行う方法を紹介します：

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
  //...

このコードは、ブラウザがジオロケーションをサポートしているかどうかをチェックし、ユーザーの現在位置を取得します。このチュートリアルでは、テスト目的で、ベイエリアの位置を示す座標を設定します。

    that.lat = 37.6;
    that.lng = -122.4;
    var lat = that.lat;
    var lng = that.lng;

我々のアプリは地図上に表示するために駅データを必要とする。これらのデータを app.js\ からインポートする。

    var app = require("./app.js");

次にデータのローカル変数を設定する：

    var json_data, hash_table, hash_matches, destinations;
    …
    json_data_formatted = app.formatted_json;
    hash_table = app.hash_table;
    hash_matches = app.hash_matches;
    destinations = app.destinations;

次にPubNubとGoogle Mapsを統合します：

    pubs();
    google.maps.event.addDomListener(window, 'load', initialize());

pubs()`関数は130行目から呼び出され、PubNubを独自のpublishキーとsubscribeキーで初期化します。PubNubのキーを持っていない場合は、PubNubのアカウントにサインアップしてキーを取得してください。

js function pubs() { var pubnub = new PubNub({ publishKey: "publish_key", subscribeKey: "subscribe_key", userId: "UUID" }); },

Google Mapのロジックは以前の記事から拝借した。PubNub接続はチャンネル "mymaps "に送られる座標メッセージをリッスンし、受け取った情報に基づいてユーザーのマーカーを動かす。

Google Mapsの`initialize()関数が呼ばれ、マップにプロパティが追加される。重要なのは、それぞれの \hash_match` に対してマーカーを追加することである。

js var business_marker = new google.maps.Marker({position: {lat: match_lat, lng: match_lng}, map: map}); business_marker.setMap(map);

次に、情報ウィンドウのイベントリスナーが追加される。

js google.maps.event.addListener(business_marker, 'mouseover', function() { infowindow.open(map,business_marker); }); google.maps.event.addListener(business_marker, 'mouseout', function() { infowindow.close(map,business_marker);

乗換案内アプリで電車の時刻表を検索する

マップにアイテムを表示したら、次は出発時刻の情報を追加する。これは`app.js`に戻って、hash_matchesにそれぞれのマッチのデータを入れることで実現できる。

この例では、Millbrae駅のデータのみを保存している。MillbraeのデータをAjaxで呼び出している：

js $.ajax({ type: "GET", url: "data/MLBR.json", dataType: "json", success: function(file) { main_two(file); } });

この関数 `main_two` はデータをフォーマットし、Google Mapsとのインタラクションを準備する。

乗り換えスケジュールの表示

さて、`gmap.jsをもう一度見てみよう。ここで、様々な目的地名をループする。この場合、\Millbraeはハードコードされているが、理想的には、\hash_matchesと\destinations`の間の省略形をマッチさせる変数を使用し、関連する時刻を表示する。

js var times = destination.times; dest_string = dest_string + "" + destination.abbreviation + ":" + ""; times.forEach(function(time) { dest_string = dest_string + " " + time; });

次に、情報ウィンドウを指定する：

js var infowindow = new google.maps.InfoWindow({ content: "" + BusinessName + "" + "" + dest_string + "" });

これで完了だ！これで地図上にアイテムを表示し、出発時刻の情報を追加することができました。MapBox、MapKit、Google MapsなどのAPIを使ったリアルタイムのマッピングやジオロケーションに興味がある方は他のチュートリアルをご覧ください。

PubNubを体験する

PubNubを体験してみませんか？ライブツアーをチェックして、5分以内にすべてのPubNub搭載アプリの背後にある本質的な概念を理解してください。PubNubアカウントにサインアップしてプロジェクトを開始できます。PubNubと連携することで、リアルタイムの更新、プッシュ通知、ユーザーフレンドリーなインターフェイスでアプリに命を吹き込むことができ、交通アプリの可能性の新しい領域を開くことができます。

アップルユーザーであれアンドロイドユーザーであれ、バスや地下鉄、バイクシェアで通勤している人であれ、リアルタイムの交通アプリが手元にあることは非常に重要です。PubNubの強力なAPIと交通機関から簡単にアクセスできるGTFSデータを活用することで、公共交通機関の変革に貢献し、通勤者、交通サービス、交通機関のいずれにとっても効率的でユーザーフレンドリーなデジタルソリューションを構築できます。もう渋滞も、到着時間の不安もなく、リアルタイムの更新でシームレスな公共交通が実現します。なぜ待つのか？PubNubで交通システムを変える旅に出かけましょう。

PubNubはあなたのお役に立ちますか？

この記事はPubNub.comに掲載されたものです。

PubNubのプラットフォームは、開発者がWebアプリ、モバイルアプリ、IoTデバイス向けにリアルタイムのインタラクティブ機能を構築、提供、管理できるように支援します。

私たちのプラットフォームの基盤は、業界最大かつ最もスケーラブルなリアルタイムエッジメッセージングネットワークです。世界15か所以上で8億人の月間アクティブユーザーをサポートし、99.999%の信頼性を誇るため、停電や同時実行数の制限、トラフィックの急増による遅延の問題を心配する必要はありません。

PubNubを体験

ライブツアーをチェックして、5分以内にすべてのPubNub搭載アプリの背後にある本質的な概念を理解する

セットアップ

PubNubアカウントにサインアップすると、PubNubキーに無料ですぐにアクセスできます。

始める

PubNubのドキュメントは、ユースケースやSDKに関係なく、あなたを立ち上げ、実行することができます。

Blog

リアルタイム公共交通スケジュールアプリの作り方

PubNub Developer Relations