駅すぱあとWebサービス for Unityを使った 交通機関情報の活用 竹田龍介 株式会社ヴァル研究所 1
本日の発表内容 自己紹介 駅すぱあとWebサービス for Unity初級編 駅すぱあとWebサービス for Unity応用編 2
本日の発表内容 自己紹介 駅すぱあとWebサービス for Unity初級編 駅すぱあとWebサービス for Unity応用編 3
自己紹介 名前 竹田 龍介 役職 ソフトウェアエンジニア 仕事内容 駅すぱあとWebサービスを作ったり メンテナン スしたりサポートを行ったりしつつ 駅すぱあと Webサービスがより使いやすいものになるように プラグインやサンプルコードを提供したりしていま す 4
会社紹介 会社名 代表取締役 太田 信夫 設立 1976年7月26日 従業員数 155名 2015年10月1日現在 所在地 東京都杉並区高円寺北 5
まずはこちらの画像をご覧下さい 6
Unityを利用した新たなサービス オキュラスリフトと全天球ライブカメラで 新たな体験を提供したい 7
プラレールを用意して 8
スリルを味わってみたり 9
無茶してみたりしています 10
ヴァル研究所とは 思考の一歩先を提供する 熱狂的イノベーションカンパニー 11
そんなことより 交通機関情報の活用を紹介しろ ってなりますよね すみません 12
主なサービス 大手ポータルサイトが採用 各種大手ポータルサイトの経路検索サービス のエンジンとして採用されています http://transit.yahoo.co.jp/ http://www.bing.com/maps/ 13
駅すぱあとアプリ iphone Androidアプリ 駅すぱあと も 累計500万ダウンロードを突破しました 14
導入事例 転載 https://ekiworld.net/case/c002 15
駅すぱあとをより身近に 交通期間情報を活用したアプリケーションや ゲームが誰でも簡単に作ることが出来るを目 指しています 駅すぱあとWebサービスを利用することで サーバーを用意せずに開発が出来ます 本日はそういった駅すぱあとを利用した開発 を紹介します 16
キーワード 世の中の当たり前を変えることで 人々の可能性をひろげ 活力に満ちあふれた社会を実現する 17
本日の発表内容 自己紹介 駅すぱあとWebサービス for Unity初級編 駅すぱあとWebサービス for Unity応用編 18
駅すぱあとをUnityで使う 大手も採用している駅すぱあとをUnityで 簡単に使えるようになるプラグインが 駅すぱ あとWeb Service for Unity です 19
入手方法 駅すぱあとWeb Service for Unity はGitHub から無料でダウンロードが可能です 個人利用はもちろん 商用OKです http://ekispertwebservice.github.io/gui-for-unity/ 20
使い方 ページにアクセスして Download を選択 21
Unityにインポート ダウンロードしたスクリプトをインポート 22
読み込み シーンを読み込み 23
インスペクターで使う アクセスキーをセット 24
アクセスキーとは ユーザー登録をしていただくと アクセスキー が発行されます アクセスキーは登録ごとに異なります YfQUafKd9******* のような文字列で構成さ れています 駅すぱあと for Unityをご利用の際はアクセス キーをセットしてください 25
アクセスキーの取得はこちら 路線図や運行情報など 全ての機能がご利 用いただける有償版はこちらから https://ekiworld.net/service/sier/webservice/index.html 路線 駅情報の取得 エディタ拡張での駅す ぱあとの経路表示のみ利用の場合は無償版 のこちら https://ekiworld.net/service/sier/webservice/free_provision.html 26
無償版でも利用可能 エディタ拡張による経路表示 サンプルゲームNandoku 27
エディタ拡張による経路表示 28
Nandokuの紹介 29
サンプルゲーム このサンプルゲームはオープンソースなの で オリジナルのパーティクル付けたり マテリ アル追加したり ゲーム内容をアレンジしてリ リースすることも出来ます Unity使い始めて良く分からないという方もオ ススメです 30
気になった方は まずは無償版を使ってみてください 有償版も無料の試用版がありますので 法人の方はぜひご検討ください 学校など 研究目的に提供出来る場合が ございますので 弊社営業にお問合わせ ください 31
本日の発表内容 自己紹介 駅すぱあとWebサービス for Unity初級編 駅すぱあとWebサービス for Unity応用編 32
応用編 終電を確認するアプリを作る 33
ステップ1 下記のuGUIコンポーネントを シーンに追加します テキスト入力ボックス 出発駅入力用 ボタン 終電の経路取得実行用 テキスト出力エリア 経路出力用 空のゲームオブジェクト スクリプト用 34
エディタの画面構成 35
ステップ2 次にスクリプトを新規作成して public設定追記 36
ステップ3 先ほど作った空のゲームオブジェクトに スクリプトを追加 37
インスペクターの設定 目的地(自宅の最寄り駅等)やURL アクセスキー テキストのリンクを行う 38
ポイント URLとアクセスキーは駅すぱあとWebサービ ス登録時にメールで送付されますので まず は登録を行う必要があります 39
ステップ4 スクリプトに非同期通信部分を追記 駅すぱあとWebサービスとの通信部 40
ステップ5 ＸＭＬを解析する部分を実装 41
ステップ5 ＸＭＬを解析する部分その2 42
ステップ6 結果をテキストで出力する部分を追加 43
ポイント ArrayListを文字列の配列に変換することで インスペクターで確認できるようになって デバッグが楽になります 出発時間はDateTimeのparseを使えば簡単 に変換できます 駅 路線 駅 という構成のため 必ず 路線数+1=駅数 となります 44
ステップ7 uguiのボタンからスクリプトを 呼び出す設定 45
ステップ8 ビルドして出来上がり 46
動かしてみよう 47
アプリ作成 このくらいの規模であれば3時間くらいで完成 します スクリプトは少なめで 出来る限りエディタを利 用するようにしました ios/androidアプリとしてもビルド出来るので オリジナルのスマートフォンアプリを作って リリースすることが可能です 48
応用編 路線図を使ってみる 49
路線図を利用する場合 路線図は画像+駅情報で構成しています 動かし方はいろいろ 予め画像をダウンロードしてテクスチャとしてリソー スフォルダに入れる WWWクラスを利用してサーバーから動的に読み 込む WebViewを利用してJavaScriptで実装する 50
一番簡単な方法で 路線図は画像+駅情報で構成しています 動かし方はいろいろ 予め画像をダウンロードしてテクスチャとしてリソー スフォルダに入れる 今日は一番簡単なこれで実装 WWWクラスを利用してサーバーから動的に読み 込む WebViewを利用してJavaScriptで実装する 51
WebViewのメリット Webとソースコードが共有できて簡単 Unityを使っていないデザイナーと一緒に開発 できる JavaScriptを利用したサンプルコードも用意し ています http://ekispertwebservice.github.io/gui/ 52
WebViewで実装 Unity WebView で検索してスクリプトをイン ポートします 対応OSやライセンスに応じて選択してくださ い 先ほどのGitHubから路線図のサンプルを持っ てきます Unity上で路線図のURLを指定します 53
路線図のサンプルはこちら 54
Unityのサンプルコード コードもあっさりです 55
いろいろな使い方を 駅の座標と画像が取得できるので 地図連携 やオリジナルのキャラクタを差し込むことも出 来ます 56
もっと知りたいという方 気軽にお問い合わせください 本日発表に利用したサンプルコードは お問い合わせいいただくと お送り出来ます 57
最後に Unity開発者がより良い製品を出すことが出来 るよう 駅すぱあとWebサービスは進化してい きます 58