dronekit cloudを使ったwebサービス開発

Co

pyrig

ht © 2015 D

RO

NE.B

AR

Inc. All R

ights R

eserved. http

://dro

ne.bar

DRONEKIT CLOUDを使ったWEBサービス開発

日本ANDROIDの会ドローンWG 2015/07/20 ABC2015 SUMMER

DRONE.BAR Yuta Shiga <[email protected]>

Co

pyrig

ht © 2015 D

RO

NE.B

AR

Inc. All R

ights R

eserved. http

://dro

ne.bar

FacebookかTwitterでフォローをお願いします！ https://www.facebook.com/dronebarweb Twitter: @dronebarweb

ドローンで空撮した動画を紹介するメディアをやってます

Co

pyrig

ht © 2015 D

RO

NE.B

AR

Inc. All R

ights R

eserved.

http://d

rone.b

ar

株式会社DRONE.BAR 代表取締役

株式会社shiganet 代表取締役

株式会社未来ボックス代表取締役

３つの会社の代表をやっています。

ニコ動プレーヤーの開発者で有名な志賀雄太さんとは同性同名の別人です。

志賀雄太 @shiganet

Co

pyrig

ht © 2015 D

RO

NE.B

AR

Inc. All R

ights R

eserved. http

://dro

ne.bar

DRONEKIT CLOUD とは？

DRONEKIT CLOUDの概要

Co

pyrig

ht © 2015 D

RO

NE.B

AR

Inc. All R

ights R

eserved. http

://dro

ne.bar

国内では飛行中のドローンと直接通信することは電波法上難しいと思われるため、

国内で使用する場合は実質スマホアプリやブラウザから利用する形になる？

DRONEKIT CLOUD とは飛行中のドローン、地上のスマホアプリと連携するクラウドサービス

Co

pyrig

ht © 2015 D

RO

NE.B

AR

Inc. All R

ights R

eserved. http

://dro

ne.bar

DRONEKIT CLOUD で出来ること

DRONEKIT CLOUDの主な機能

Co

pyrig

ht © 2015 D

RO

NE.B

AR

Inc. All R

ights R

eserved.

http://d

rone.b

ar 飛行ログの保管・管理

tlog形式などの

飛行ログデータ

Co

pyrig

ht © 2015 D

RO

NE.B

AR

Inc. All R

ights R

eserved.

http://d

rone.b

ar 飛行ログの解析

CLOUDに受信した飛行ログ(tlog)を解析し、飛行データとして保管

Co

pyrig

ht © 2015 D

RO

NE.B

AR

Inc. All R

ights R

eserved.

http://d

rone.b

ar 飛行データを各種フォーマットで出力

json (飛行データ)

json (解析サマリー)

json (パラメータ)

json (geoデータ)

kmz,kml (Google Earth)

Kmz (Google Map)

tlog

Co

pyrig

ht © 2015 D

RO

NE.B

AR

Inc. All R

ights R

eserved.

http://d

rone.b

ar たとえばGoogle MapにExport

Co

pyrig

ht © 2015 D

RO

NE.B

AR

Inc. All R

ights R

eserved.

http://d

rone.b

ar たとえばGoogle EarthにExport

Co

pyrig

ht © 2015 D

RO

NE.B

AR

Inc. All R

ights R

eserved.

http://d

rone.b

ar たとえばdoaramaにExport

http://www.doarama.com

※doaramaはGPX,IGC形式対応となっているが、APIにはGPX,IGC出力の項目は無し

Co

pyrig

ht © 2015 D

RO

NE.B

AR

Inc. All R

ights R

eserved.

http://d

rone.b

ar 飛行データのリアルタイム中継

WebSocket 中継で飛行データを

リアルタイムネット配信

Co

pyrig

ht © 2015 D

RO

NE.B

AR

Inc. All R

ights R

eserved.

http://d

rone.b

ar ユーザー認証・管理

ユーザーDB

ユーザー登録

登録情報編集

認証（ログイン・ログアウト）

ユーザー情報検索

Co

pyrig

ht © 2015 D

RO

NE.B

AR

Inc. All R

ights R

eserved.

http://d

rone.b

ar 機体情報管理

機体情報DB

機体登録

飛行情報登録

機体情報参照

Co

pyrig

ht © 2015 D

RO

NE.B

AR

Inc. All R

ights R

eserved.

http://d

rone.b

ar 写真や動画の保存と配信

ドローンが撮影した写真や動画を

クラウド経由で配信 API未実装？？

Co

pyrig

ht © 2015 D

RO

NE.B

AR

Inc. All R

ights R

eserved. http

://dro

ne.bar

DRONEKIT CLOUD の始めかた

DRONEKIT CLOUDに登録してみる

Co

pyrig

ht © 2015 D

RO

NE.B

AR

Inc. All R

ights R

eserved. http

://dro

ne.bar

http://dronekit.io/

まずは開発者登録をします

Co

pyrig

ht © 2015 D

RO

NE.B

AR

Inc. All R

ights R

eserved. http

://dro

ne.bar

http://dronekit.io/libs

CLOUDを選びます

Co

pyrig

ht © 2015 D

RO

NE.B

AR

Inc. All R

ights R

eserved. http

://dro

ne.bar

https://cloud.dronekit.io/

Signupに進みます

Co

pyrig

ht © 2015 D

RO

NE.B

AR

Inc. All R

ights R

eserved. http

://dro

ne.bar

必要事項を記入して登録します

Co

pyrig

ht © 2015 D

RO

NE.B

AR

Inc. All R

ights R

eserved. http

://dro

ne.bar

確認メールが届くので、メール内のリンクをクリックして登録が完了です。

Co

pyrig

ht © 2015 D

RO

NE.B

AR

Inc. All R

ights R

eserved. http

://dro

ne.bar

先ほど登録したID,PASSでサインインしましょう https://cloud.dronekit.io/login

Co

pyrig

ht © 2015 D

RO

NE.B

AR

Inc. All R

ights R

eserved. http

://dro

ne.bar

App IDとKeyの値は後ほど使いますのでメモ！ https://cloud.dronekit.io/

Co

pyrig

ht © 2015 D

RO

NE.B

AR

Inc. All R

ights R

eserved. http

://dro

ne.bar

DRONEKIT CLOUD を使ってみる

DRONEKIT CLOUDをWEBサービスで利用する

Co

pyrig

ht © 2015 D

RO

NE.B

AR

Inc. All R

ights R

eserved.

http://d

rone.b

ar DRONEKIT CLOUDはすべてRESTアクセス

HTTP

DRONEKIT CLOUD

Webサーバー

OR HTTP

Co

pyrig

ht © 2015 D

RO

NE.B

AR

Inc. All R

ights R

eserved. http

://dro

ne.bar

http://api.3drobotics.com/swagger-ui/

RESTの仕様はここにまとまっています

Co

pyrig

ht © 2015 D

RO

NE.B

AR

Inc. All R

ights R

eserved.

http://d

rone.b

ar

CLOUDを理解するために、Droneshareというサンプルプロジェクトが提供されています

DRONEKIT CLOUD http://www.droneshare.com/

※丁寧に遷移後のアドレスバー内URLまで

書き換えていたので当初騙されかけましたが、

このプロジェクトはindex.htmlだけが実体で

残りは全てJavaScriptが画面を書き換えています。

つまり、サーバー側にDBなどは一切存在せず、

DRONEKIT CLOUDが永続データを管理しています。

Co

pyrig

ht © 2015 D

RO

NE.B

AR

Inc. All R

ights R

eserved. http

://dro

ne.bar

https://github.com/diydrones/droneshare

ソースコードはGitHubに公開されています

Co

pyrig

ht © 2015 D

RO

NE.B

AR

Inc. All R

ights R

eserved. http

://dro

ne.bar

REST APIの概要

DRONESHAREでの利用例

Co

pyrig

ht © 2015 D

RO

NE.B

AR

Inc. All R

ights R

eserved. http

://dro

ne.bar

vehicle <機体情報>

Co

pyrig

ht © 2015 D

RO

NE.B

AR

Inc. All R

ights R

eserved. http

://dro

ne.bar

mission <飛行情報>

Co

pyrig

ht © 2015 D

RO

NE.B

AR

Inc. All R

ights R

eserved. http

://dro

ne.bar

DRONESHARE をローカルで動かすまでのいくつかのTips

DRONESHAREをローカルで動かすまでにつまずきやすいポイントを解説します

Co

pyrig

ht © 2015 D

RO

NE.B

AR

Inc. All R

ights R

eserved.

http://d

rone.b

ar

Node.jsはnvm等で管理しつつ、最新のものへ

git cloneからgrunt buildまで

$ nvm install v0.xx.xx

Co

pyrig

ht © 2015 D

RO

NE.B

AR

Inc. All R

ights R

eserved.

http://d

rone.b

ar

npmも忘れず、最新のものへ


npmを最新へバージョンアップする $ npm install –g npm

Co

pyrig

ht © 2015 D

RO

NE.B

AR

Inc. All R

ights R

eserved.

http://d

rone.b

ar

gruntをインストール


gruntをグローバルにインストール $ npm install –g grunt-cli

Co

pyrig

ht © 2015 D

RO

NE.B

AR

Inc. All R

ights R

eserved.

http://d

rone.b

ar

bowerをインストール


bowerをグローバルにインストール $ npm install –g bower

Co

pyrig

ht © 2015 D

RO

NE.B

AR

Inc. All R

ights R

eserved.

http://d

rone.b

ar

README.md通りにインストール


$ npm install $ bower install $grunt bower:install

Co

pyrig

ht © 2015 D

RO

NE.B

AR

Inc. All R

ights R

eserved.

http://d

rone.b

ar

grunt buildで静的ファイル群が生成


$ grunt build プロジェクト内distフォルダがDocument Root用のファイル群になる

Co

pyrig

ht © 2015 D

RO

NE.B

AR

Inc. All R

ights R

eserved.

http://d

rone.b

ar

npm installで karma関連のエラーは最悪無視できる


$ npm install karma関連のエラーが出る場合があるが、karmaはユニットテスト用のモジュールなので、無視して生成を進めても問題はない

Co

pyrig

ht © 2015 D

RO

NE.B

AR

Inc. All R

ights R

eserved.

http://d

rone.b

ar

ローカルhostsを書き換え www.droneshare.com としてアクセスしてみる

ローカルで動かすまで

ローカルでプロジェクトを動かす場合、 apiKeyを書き換えないで動作させると怒られるので、

その場合はlocalhostではなく、www.droneshare.comでアクセスする

Co

pyrig

ht © 2015 D

RO

NE.B

AR

Inc. All R

ights R

eserved.

http://d

rone.b

ar

自分のapiKeyで動作させる場合は、 <App ID>.<Key>で apiKeyを登録する


dist/scripts/services/dapiServices.js の上部にあるapiKeyを自分のものに書き換える

Co

pyrig

ht © 2015 D

RO

NE.B

AR

Inc. All R

ights R

eserved.

http://d

rone.b

ar

自分のapiKeyで動作させた場合は、ユーザー関連の処理に制限がかかる


apiKeyを自前のものにした場合、ユーザーの追加などが行なえなくなる。これは現状の制限事項と思われる

Co

pyrig

ht © 2015 D

RO

NE.B

AR

Inc. All R

ights R

eserved.

http://d

rone.b

ar

実際のapiサーバーは api.3drobotics.com に存在する

リモートで動かすまで

src/scripts/services/dapiServices.coffee の48行目に独自ドメインでサービスする際にクッキーなどの運用のために

apiサーバーをCNAMEを利用してapi.3drobotics.comに向ける説明がある

Co

pyrig

ht © 2015 D

RO

NE.B

AR

Inc. All R

ights R

eserved. http

://dro

ne.bar

https://cloud.dronekit.io/buyer/stats

取得したapiKeyで正常にアクセスできると管理画面のSTATSに反映されます

Co

pyrig

ht © 2015 D

RO

NE.B

AR

Inc. All R

ights R

eserved. http

://dro

ne.bar

https://cloud.dronekit.io/admin/account/invoices

管理画面にはINVOICEメニューがありますので、将来的には有料化が予想されます

Co

pyrig

ht © 2015 D

RO

NE.B

AR

Inc. All R

ights R

eserved. http

://dro

ne.bar

THANK YOU!

日本ANDROIDの会ドローンWG 2015/07/20 ABC2015 SUMMER

DRONE.BAR <http://drone.bar> Yuta Shiga <[email protected]> @shiganet

dronekit cloudを使ったwebサービス開発

Technology