paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」(https://paiza.jp ギノ株式会社)の開発者が開発の事、プログラミングネタ、ITエンジニアの転職などについて書いています。

PC・スマホのブラウザから無料でIoT開発環境が使える「obniz Cloud」を使ってみた!

f:id:paiza:20180822114140j:plain
どうも、まさとらん(@0310lan)です!

今回は、手軽にIoT開発が可能な「obniz」向けに提供されている無料のWebサービスについてご紹介したいと思います!

自分の「obniz」を登録するだけで、トークンの発行やprivateなプログラムを作成したり定期実行ができるなどサーバーレスで強力な開発環境が整います。

IoTやobnizに興味のある方は、ぜひ参考にしてみてください!

obniz

f:id:paiza:20180822114204j:plain

■「obniz」の使い方

それでは、まず最初に「obniz」の基本的な使い方から見ていきましょう!

MicroUSBにコードを接続して電源を入れると、以下のような画面が表示されます。

f:id:paiza:20180822114226j:plain

「obniz」本体の左上にスイッチが搭載されているので押してみましょう。


このスイッチは以下のように押し込んだり、左右に倒してカーソルキーのような使い方もできます。

f:id:paiza:20180822114242g:plain


初回起動時のみ、WiFiに接続するためのSSID候補の一覧が表示されます。

f:id:paiza:20180822114305j:plain

自分が利用するSSIDを選択してパスワードを入力すれば準備完了です。
(次回の起動からは自動的にWiFiへ接続されるようになります)


次に、固有の「ID番号」と「QRコード」が表示されて待機状態になります。

f:id:paiza:20180822114319j:plain

このQRコードをスマホのカメラで読み取ってみましょう!


すると、スマホのブラウザから利用できる「obniz」のコードエディタ画面になります。

f:id:paiza:20180822114336j:plain

このエディタ上でHTML / CSS / JavaScriptによる一般的なWebプログラミングが可能なんですが、今回は初期サンプルコードのまま「保存&開く」ボタンをタップしてみましょう!


プログラムが実行されて、「obniz」のディスプレイに「Hello World」と表示されましたね!

f:id:paiza:20180822114348j:plain


ちなみにですが、QRコードを使わなくてもID番号を入力すればPCのブラウザからでも同じようにコードエディタを利用することが可能です!

f:id:paiza:20180822114359j:plain

このように、スマホ・PCのブラウザから手軽にプログラムを書いて即座に「obniz」で試せるというお手軽感がとても魅力的です。

■「obniz Cloud」の設定方法

「obniz」は特にユーザー登録などをしなくても利用可能ですが、無料の「obniz Cloud」に登録すれば専用のトークンを発行したり、リポジトリの作成やファームウェアを簡単に更新できるなどメリットが多いです。

さらに、自分だけがアクセスできるPrivateなプログラムの作成やコードを定期的に実行できる機能なども利用可能なので登録方法をご紹介しておきます!


まずは、「obniz」のトップページ上部にあるメニューから「クラウド」→「登録/ログインする」を選択します。

f:id:paiza:20180822114420j:plain


TwitterやGitHubなどのアカウントから簡単にログインするか、自分のメールアドレスを使って登録することができます。

f:id:paiza:20180822114431j:plain


登録が完了すると専用の「マイページ」が表示されます!

f:id:paiza:20180822114446j:plain

初期設定として、まずは自分の「obniz」を登録するために「obnizを追加」ボタンをクリックしましょう。


「obniz」の電源が入っていて、WiFiに繋がっていることを確認してボタンをクリックします。

f:id:paiza:20180822114459j:plain


「obniz」のID番号を入力しましょう。

f:id:paiza:20180822114509j:plain


すると、「obniz」のディスプレイに6桁の数字が表示されるので入力します。

f:id:paiza:20180822114520j:plain


これで登録が完了して「マイページ」が表示されます!

f:id:paiza:20180822114534j:plain

あとは、この画面からプログラミング用のエディタを起動したり、アクセストークンの発行やプログラムの定期実行などを行えるようになります。

■「アクセストークン」を使ったプログラムを作成しよう!

それでは、セキュアなプログラミングが可能になる「アクセストークン」を作成してみましょう!

まずは、「マイページ」から「設定」ボタンをクリックします。

f:id:paiza:20180822114549j:plain


「Access Control」メニューから新規作成ボタンをクリック!

f:id:paiza:20180822114559j:plain


すると、自分専用のトークンが生成されるので「SDK」の部分に記述されているコードをコピーしましょう。

f:id:paiza:20180822114609j:plain

このコードをJavaScriptプログラムに追記することで利用できるようになります。


そこで、早速プログラムを新規作成してみます!

f:id:paiza:20180822114620j:plain


せっかくトークンを利用しているので、ファイルは「非公開」にして自分だけが閲覧できるようにしておくといいでしょう!

f:id:paiza:20180822114630j:plain


JavaScriptの一番上の行に先ほどコピーしたコードを貼り付けます。

f:id:paiza:20180822114642j:plain

これで準備完了です!

プログラムが問題なく実行できることを確認しておきましょう。

これで、obniz固有のID番号が他人に知れたとしてもトークンを設定しない限りプログラムが実行されることは無いので安心ですね。

■プログラムの定期実行を設定しよう!

今度は、「obniz Cloud」の定期実行機能を見てみましょう!

まず、「マイページ」からイベントの新規作成ボタンをクリックします!

f:id:paiza:20180822114705j:plain


以下のように3種類の定期実行が可能です!

f:id:paiza:20180822114716j:plain

「①Webhook」は、IFTTTやSlackなど他のWebサービスと連携してイベント処理を実行することが可能です。

obnizの情報をSlackに通知したり、IFTTTを使ってTwitterへ投稿するような使い方も面白いでしょう。

「②毎日この時間で」は、設定した時刻になるとプログラムを自動的に実行できるようになります。

「③繰り返し」は、設定した時間の間隔で繰り返しプログラムを実行できます。30分間隔とか半日ごとに実行するような使い方ができますね。


このように定期的にプログラムが実行できることで、例えばobnizに温度センサーを接続して室内の温度を一定間隔で収集したり、SNSと連携してデータを投稿するなど…アイデアしだいで活用範囲は広がるでしょう。(定期実行のログはマイページから閲覧できます…)

■「自己診断」機能について

「obniz Cloud」には、自分のobnizに異常がないかをオンラインでチェックできる機能が用意されているのでご紹介しておきます!

トップページ上部のメニューから「obniz 自己診断」を選択します。

f:id:paiza:20180822114756j:plain

obnizに搭載されている12個のIOを同時にチェックしてくれるので、部品などは接続しないようにしておきましょう。


固有のID番号を入力します。(トークンを利用している場合はこちらも入力します…)

f:id:paiza:20180822114811j:plain


診断が始まると画面にログが出力されていきます!

f:id:paiza:20180822114822j:plain

すべてチェックして問題無ければ青いメッセージで「ALL Tests Passed!」と表示されて終了します。

このように手軽な操作で診断ができるので、定期的にチェックをしておくようにすると良いでしょう。

■動画でプログラミングが学べるpaizaラーニングPython×AI・機械学習入門編が登場!


動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。

そしてこのたび、新たに「Python×AI・機械学習入門編」が追加されました。

人気声優の上坂すみれさんによる進行役のスベトラーナ・小百合・ベレフスカヤと一緒に、実際に画像認識技術を使いながら、初心者でも機械学習を体験・学習できるレッスン内容になっています。

Python×AI・機械学習入門編は全編無料でごらんいただけます。詳しくはこちら

■まとめ

今回は、ブラウザから手軽にIoT開発環境が整う「obniz Cloud」について駆け足でご紹介しました!

「obniz」はNode.js向けのパッケージも提供されており、自分の開発環境を利用してプログラミングを行うことも可能なので上級者の方にもオススメできるでしょう。

また、12個あるIOはどこに部品を接続してもOKで、すべてJavaScriptで制御できるように工夫されている点も好印象です。

これからIoT開発に挑戦したい人は、ぜひ参考にしてみてください!


<参考>



 

paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

詳しくはこちら

paizaラーニング

そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

詳しくはこちら

paizaのスキルチェック





※このブログで紹介しているキャンペーンやイベント、およびサイト内の情報については、すべて記事公開時の情報となります。閲覧されたタイミングによっては状況が変わっている場合もございますのでご了承ください。

ITプログラマー・エンジニア転職・就活・学習のpaiza

プログラミング入門講座|paizaラーニング

PHP入門編Ruby入門編Python入門編Java入門編JavaScript入門編C言語入門編C#入門編アルゴリズム入門編

エンジニアのためのプログラミング転職サイト|paiza転職

プログラミング スキルチェックエンジニア求人一覧

未経験からエンジニアを目指す人の転職サイト|EN:TRY

プログラミング スキルチェックエンジニア未経験可求人一覧

エンジニアを目指す学生の就活サイト|paiza新卒

プログラミング スキルチェックエンジニア求人一覧

ブラウザを開くだけで エディタ、Webサーバ、DB等の開発環境が整う|PaizaCloud