はじめに

74187b0edd2ef83c50b9ca61a79d5a59

今回は OpenStreetMap に Airtable でつくったデータを配置してみましょう。

OpenStreetMap とは

https://openstreetmap.jp/

OpenStreetMap(OSM)は、誰でも自由に地図を使えるよう、みんなでオープンデータの地理情報を作るプロジェクトです。 プロジェクトには、誰でも自由に参加して、誰でも自由に地図を編集して、誰でも自由に地図を利用することが出来ます。

Larflet https://leafletjs.com/ という地図データを扱うための JavaScript ライブラリから OpenStreetMap の地図データを読み込んで今回の地図表示を実現しています。

56c7856b740d7fd435aeba18e7eacf88

このような地図です。

enebular とは

1933b866e71ff621867ccaaa0de75082

enebular（エネブラー）は、IoT製品・サービスづくりを包括的に支援する、開発・運用サービスです。エッジとクラウドにまたがるIoTアプリケーションを開発し、様々なデバイスへ迅速にデプロイ、さらに膨大な量のデータを可視化やAIにより利活用することで、IoTアプリケーションの最適な運用を支援します。 enebularの名前は、星の数（nebular）ほどあるデバイスを、アップデートにより賢くし（enable）、分散しながら協調するアプリケーションの開発から由来しています。

こちらにあるとおりで、今回のハンズオンでは、直感的なインターフェースにより簡単にプログラミングができ、仕組み作りをすぐにはじめられ、Node-REDのオープンソースの資産を活用して開発できるところを活かして進めていきます。

Airtable とは

0281a625b858b46f89b648cd4f728ae7

Google スプレッドシートのような操作感でデータを管理できるサービスで、API も使いやすくデータの読み書きもしやすいです。

今回は、こちらに OpenStreetMap で表示している地図に、さらに追加でピンで位置情報を表示します。

今日体験する仕組み

ea259d537cf686f1b229c5652c995a91

大まかな仕組みとしては、Airtable で設定した地点データを enebular が読み込んで、さらに enebular が OpenStreetMap に配置して表示します。

960240ef87daf1ece21dc768aec9bdc1

こちらの Airtable のエリアでは以下を進めます。

  • Airtable の Base の準備
    • Airtable でデータのかたまり Base 準備をします
  • Airtable の Base Id を把握
    • enebular から読み取れるように Base Id 把握します

ddf4c4b510b0887e5909fd4db6b0fbef

こちらの enebular のエリアでは以下を進めます。

  • enebular のプロジェクトを準備
    • enebular で作業を進めるための器（プロジェクト）を準備します
  • Discover Flow からフローをインポート
    • プロジェクトに、Discover Flow というひな形がインポートできる enebular に仕組みで、今回の仕組みをインポートします

a9dc71ade7b202df77946772e88a759e

こちらの OpenStreetMap のエリアでは以下を進みます。実際は enebular で仕組みが準備できているので、Airtable からデータを取得して OpenStreetMap までデータを届ける設定を行います。

  • フローの設定
    • Airtable からデータを取得する設定
      • 事前準備の API Key を手元に準備
      • さきほどの地点データを集めた　Airtable の Base Id を準備

ここまでできたら、動かしてみます。

42c31ae9b213b1c74879710e08ef9027

はじめに動かす方式は、Web エディタ起動時のみサッと試せる方式です。enebular の Web エディタは最近 1 時間よりも長く起動できるので、ひとまずハッカソンで仕組みをデモしたり、プロトタイプで何か作っていることに向いています。

56c7856b740d7fd435aeba18e7eacf88

このように、地図が表示できます！

5cd81e151913c5e8e7184b384dfa89f4

ここまで動かせたら、エクストラでより高度ないつでも動かせるクラウド実行環境方式を試してみます。

Discover Flow からクラウド実行環境用の仕組みをインポートしますが、設定内容は同じなので、Web エディタ起動時のみサッと試せる方式が成功していれば、うまく動かせるはずです。

ddf4c4b510b0887e5909fd4db6b0fbef

enebular で準備する設定が、クラウド実行環境を準備するため以下の手順が Web エディタ方式より増えます。

  • クラウド実行環境の作成
  • HTTP トリガー設定
  • lcdp ノードインストール
  • クラウド実行環境用にフロー変更
  • クラウド実行環境にデプロイ
  • クラウド実行環境の動作確認

こちらも、順を追って一緒に進めていきますので、ご安心ください。

それではスタートしていきましょう！

results matching ""

    No results matching ""