旅するJAZにゃん～Azure Mapsを使った航路可視化への挑戦 by 営業マン～

旅するJAZにゃん Azure Mapsを使った 航路可視化への挑戦 by 営業マン 第7回 Azure Travelers 勉強会

もくじ 対象と目的 挑戦のキッカケ 営業マン、早速つまずくの巻 営業マン、夢にAzureが出るの巻 果たして結果は― まとめ 第7回 Azure Travelers 勉強会

自己紹介 名前 出身 仕事 運営 一言 ニシ サダオミ 大阪府大阪市 営業 at トレノケート なんでもCopilot、JAWS-UG Sales Microsoft Azure関連、初LTです!! 第7回 Azure Travelers 勉強会

対象と目的 【対象】 Azureナンモワカランな方 「Azure Mapsってなんや？」という方 【目的】 少しでもAzureに興味を持っていただく 「Azure Maps、オモろいやん」と思っていただく 第7回 Azure Travelers 勉強会

挑戦のキッカケ 『Azureの知識地図』 YonaYona Azure Club Azureもっと知りたいな… ＪＡＺＵＧの方々と仲良くなりたいな… せや！！思い切ってLT挑戦しよう!! 第7回 Azure Travelers 勉強会

• https://yonayona.connpass.com/

挑戦のキッカケ 『Ａｚｕｒｅの知識地図』にささげたい… 地図…マップ… おお、Azure Mapsってのがあるのね！! これにしよう！！！（安直） 第7回 Azure Travelers 勉強会

挑戦のキッカケ しかし、Azureの知識は極めて少ない そもそもエンジニア経験がない、ただの営業マン はるか昔にAZ-900の勉強をしただけ 『Ａｚｕｒｅの知識地図』で底上げしたが 圧倒的に実力不足である するとどうなるか… 第7回 Azure Travelers 勉強会

営業マン、つまずくの巻 現実は甘くなかった!!!!! ピエーン！！！＞ 第7回 Azure Travelers 勉強会

営業マン、つまずくの巻 つまずきポイント、大きく以下3点 ・Azure Functions関連 ・Azure Maps関連 ・スマホ連携 第7回 Azure Travelers 勉強会

営業マン、つまずくの巻 【Azure Functions関連】 そもそもJapan Eastリージョンで作れなかった VSCodeでのエラーが一向に解消されない Blob出力がうまくいかない デプロイ後にうまく動かない 用途：サーバーサイドの処理を軽量に実行するための サーバーレスAPI 第7回 Azure Travelers 勉強会

営業マン、つまずくの巻 【Azure Maps関連】 そもそも地図が出てこない いくらやっても波の情報が地図に表示されない 現在地が動かない 移動速度が実際と大きく違う 用途：地図上でリアルタイムな位置・データ・可視化を 行うためのフロントエンド地図プラットフォーム 第7回 Azure Travelers 勉強会

営業マン、つまずくの巻 【スマホ連携】 スマホから現在地を送信できない PC地図とスマホを連携できない HTTPS通信じゃないとブロックされる ngrok利用時にエラーがでる 用途：地図上の船アイコンを動かすためのデータ提供元 第7回 Azure Travelers 勉強会

営業マン、夢に Azureが出るの巻 あまりにうまくいかなすぎて… ここ数日は夢の中でも Azureに触れ合ってました（苦笑） 第7回 Azure Travelers 勉強会

営業マン、夢に Azureが出るの巻 はり治療中、夢の中でトラブルシュート 寝言で「ウー…」とうめいていたようで、 治療士の方から心配されました 第7回 Azure Travelers 勉強会

営業マン、夢に Azureが出るの巻 YuyaさんやMakiさんからエール （これは何としても成功させなアカンな…） 業務後にやる→寝る→夢でやる→業務前にやる このサイクルが3-4日続き… 第7回 Azure Travelers 勉強会

果たして結果は― なんとか!!!!! 動くものができました!!!!! やったー！！！＞ 第7回 Azure Travelers 勉強会

！ で ド イ ラ ス の 次 データの流れは、 Made By Copilot 第7回 Azure Travelers 勉強会

果たして結果は― 1. スマホが現在地を POST /position（HTTPS）で ngrok に送信 2. ngrok(※) がリクエストをAzure Functions に転送 3. Azure Functions が位置を保存し、PCからの GET /position に応答 4. PCブラウザが /position を定期取得 → JAZにゃんを地図上に移動 5. PCブラウザが /wave.geojson を取得 → 周囲の波を地図に描画 6. 航路は LineLayer で伸ばし、速度はラベルで表示6. （※)ngrok：ローカル環境で動かしているアプリやサーバを インターネット上から一時的にアクセス可能にするツール 第7回 Azure Travelers 勉強会

速度 現在地 航路 ※波の高さも 描画してくれる （…タブンネ） 第7回 Azure Travelers 勉強会

まとめ Azure Maps、色々できそう 波の高さのより良い描画（例：高さ・方向・距離） 海にのみ波の高さを表示… 今回は最低限でしたが、改良の余地は 大いにありそうです！！ 第7回 Azure Travelers 勉強会

まとめ LT駆動で実現する成長 しめ切りがあるので集中力が高まる あと進捗報告をポストすると、エールをもらえる コミュニティって、あったけぇ…!! ! ! た し ま い ざ ご う 本当にありがと 第7回 Azure Travelers 勉強会

ご清聴ありがとうございました!! 最後にデモをお見せいたします!! 旅するJAZにゃん Azure Mapsを使った 航路可視化への挑戦 by 営業マン 第7回 Azure Travelers 勉強会