趣味の電子工作などの記録。時にLinuxへ行ったり、ガジェットに浮気したりするので、なかなかまとまらない。※サイト移転しました(tomono.eleho.net ⇒ tomono.tokyo)
RSS icon
  • ESP8266からherokuにデータを送ってみる

    投稿日 2015年 7月 26日 コメントはありません

    これまでに node.js + herokuでHTTP GETコマンドを使って最低限のデータの出し入れができることを確認しました。つまりherokuで実用性はないとはいえ、サーバ側の構築ができるようになりました。ただ、セキュリティとか実用性とかそういうのは考えてないので、とにかく最低限ですし、そもそもデータベースを使っていないのでプログラムを再起動されると消えてしまいます。そしてそれは頻繁に起こります。なので、あくまで「ちゃんと作ればできることがわかる」というレベルです。

    次は、ESP8266からherokuにデータを送って、PCからそのデータを読み取れるか試してみます。簡単に済ますためにESP8266側は先に確認したようにArduino IDEで構築します。heroku側は先の「hello-heroku2」のままにします。

    Arduino側のスケッチはサンプルの「ESP8266WiFi」の下の「WiFiClient」を元にしています。一旦、WiFiClientを開いて、名前(今回は「HerokuClient」にしました)をつけて保存します。
    その後、ESSIDとWiFiのパスワードの設定、先の「hello-heroku2」に合わせたGETメソッドに合わせたURLの生成の部分を修正します。今回は、起動すると1から順にデータをheroku側にセットするだけとしました。

    修正後のソースは以下のようになりました。元のソースはdata.sparkfun.comのサービスにデータを送るようになっていたようですが、今回はそれを変更しています。(コメントは修正していませんので、そのままになっています。また、WiFiの設定関連は当然伏せてありますので、環境に合わせて修正が必要です。)

    これで、ESP8266モジュール側をGPIO0をGNDに落とした状態でリセット解除することでブートローダ状態で待機させてから、ArduinoIDEで「マイコンボードに書き込む」とするとコンパイルと書き込みが行われてプログラムが走り出します。
    事前にシリアルモニタを起動しておくと、

    Screenshot--dev-ttyUSB0

    という感じでWiFiのアクセスポイントに接続し、その後herokuへDATAを1から順にセットしている様子が確認できます。(日本語が文字化けしてますが、まあいいでしょう)
    PC側からherokuにアクセスすると、

    Screenshot-Mozilla Firefox-13

    という感じで、ESP8266からセットしたデータを確認することができました。

    これでESP8266からherokuへのデータのアップロードと、ブラウザによるherokuにアップロードされたデータの確認ができたことになります。実用にするにはheroku側はデータベース使わないとね、とか、複数のESP8266に対応しないとね、とか、セキュリティ全く無いじゃん、とか、山ほど考慮するべきことがありますが、最低限遊べるレベルには到達したのではないでしょうか。

    heroku + node.js + ESP8266 + ArduinoIDEの組み合わせでIoT環境を試すレベルであれば簡単に構築できることがわかりました。もちろん、リソースをかければ本格的な環境にアップグレードすることもできると思います。あとはこの環境をどう使うか、ということですね〜。


  • Heroku+Node.jsでHelloWorldしてみた(4)

    投稿日 2015年 7月 26日 コメントはありません

    16. クライアントによって異なる動作をさせる

    GETメソッドのパラメータが扱えることがわかったので、これで区別させてみたいと思います。まずは適当な作業用のディレクトリを作ります。

    次にソースコードを準備します。内容は下記の通りでhello2.jsという名前で保存します。

    次に、package.jsonファイルを作成します。

    これまでの例と名前の部分しか変わっていません。
    作成したら、npmで必要なパッケージをインストールします。

    次にProcfileを用意します。これはファイル名に合わせて修正します。

    ローカルでアプリを動かしてみます。

    ブラウザで「http://localhost:5000/」にまだデータがない旨、表示されます。次に「http://localhost:5000/?DATA=100」としてアクセスした後、再度「http://localhost:5000/」にアクセスすると、セットした値(100)が表示されます。

    次にherokuの作成済みのリポジトリにデプロイしてみます。

    「$ heroku open」として、動作確認してみます。

    Screenshot-Mozilla Firefox-10

    起動した直後なのでデータがない状態です。
    次に、URLを「https://whispering-basin-7319.herokuapp.com/?DATA=12345」としてみます。

    Screenshot-Mozilla Firefox-11

    データが設定できました。URLを元に戻してリロードし、記憶しているか確認してみます。

    Screenshot-Mozilla Firefox-12

    データがherokuのサーバ側に記憶されていることが確認できました。

     


  • heroku+node.jsでHello Worldしてみた(3)

    投稿日 2015年 7月 25日 コメントはありません

    さらに続きです。

    14.変数の扱いを見てみる

    プログラムを以下のように修正してみました。

    ローカルで実行してみます。

    リロードするたびに数値が増えます。

    Screenshot-Mozilla Firefox-3

    次に、デプロイしてみます。

     

    ブラウザが開いたのでリロードしてみます。

    Screenshot-Mozilla Firefox-4

    やはりリロードするたびにカウンタが増えます。しばらくは実行環境が維持されるようです。確か、何時間かで実行環境が消える(表現が適切ではないかも)と書いてあったので永続的な値はデータベースに頼るべきなのでしょうが、実験レベルであれば変数でもいいのかもしれません。

    15.GETメソッドのパラメータ渡しをみてみる

    hello.jsを以下のように改変。
    ここの記事を参考にさせてもらいました。request.param(パラメータ名)で容易に取得できるようです。他にもExpressの使い方でいろいろ参考になる記載がたくさんありますので、後でじっくり読ませてもらいたいと思います。

     

    ローカルでテスト。

     

    1回目はパラメータなし、2回目以降はパラメータ付きでテストしました。下記は2回目、3回目のスクリーンショットです。

    Screenshot-Mozilla Firefox-5

    Screenshot-Mozilla Firefox-6

     

    日本語(Unicodeでしょう)も大丈夫な感じですね。
    herokuにデプロイして試してみます。

     

    アクセスして試してみます。

    Screenshot-Mozilla Firefox-7

    Screenshot-Mozilla Firefox-8

    Screenshot-Mozilla Firefox-9

    無事にローカルと同様に動作しました。GETメソッドでのパラメータ渡しも簡単にできそうです。


  • heroku+node.jsでHello Worldしてみた(2)

    投稿日 2015年 7月 25日 コメントはありません

    続きです。

    6.Dashboardから新規アプリ作成

    ここで、herokuのDashboardを見ると、作成したサンプルアプリが見えています。今回の場合、mysterious-river-xxxxが作成したサンプルアプリです。

    screen-1003

    また、右上の「+」が新規アプリ作成に使用するボタンのようです。

    「+」を押すと新規アプリケーションの名前を聞いてきます。ただ、optionalなので、そのまま「Create App」してみます。

    Screenshot-1004

     

    whispering-lake-8767」という名前のアプリになったようです。続けてやるべきことが記載されています。これに沿って、アプリケーションのリポジトリを作成してみます。

    として、アプリケーションのリポジトリを作りました。

    7. Node.jsでアプリケーションを作成

    以下の内容のサンプルアプリを作ってみました。内容は参考にさせていただいたこちらのサイトそのままです。ファイル名はhello.jsとしました。

    8. package.jsonファイルを作成

    次に、packages.jsonファイルを作成します。

     

    これで packages.jsonファイルが作成されました。
    ・・・が、(予想通りですが)依存関係などは手動で追加のようです。

    各パッケージのバージョンを調べます。

    ということで、packages.jsonファイルを修正します。

    9. npmで必要なパッケージをインストール

    npmで必要になるパッケージをインストールします。

    10. Procfileの作成

    Procfileを作成してプロセスタイプを宣言します。

    ここまでで以下のファイルが準備できました。

    11. ローカルからアプリを動かしてみる。

    ローカルからアプリを動かしてみると・・・

    となってエラーになってしまいました。
    読んでみると、「たいていのミドルウェア(loggerのようなもの)はExpressにはもはやバンドルされてないので個別にインストールしなきゃダメよ。https://github.com/senchalabs/connect#middleware を見てね。」だそうです。

    が、リンク先を見ても特にloggerに関する記載はないので、ソースコードを

     

    として、loggerをコメントアウトして使わないようにしてみました。
    すると、

    となって、無事起動している模様。ブラウザで見てみると、

    Screenshot-Mozilla Firefox

    となり、無事に表示されました。

    12. herokuでアプリを動かす

    herokuで動かしてみます。ログが長いですが、後で見返すときのためにそのままで。

    ブラウザで見てみます。

    Screenshot-Mozilla Firefox-1

    無事に動作しているようです。

    ※1:「$ heroku create」だけを実行すると、適当な名前でアプリが作成されてしまうようです。リポジトリの名前との関係が今ひとつ理解できていません。
    ※2:上記の例ではFirefoxでURLを手打ちしましたが、「$ heroku open」でブラウザが開いてアプリを動かしてくれます。

    13. メッセージを変えてみる

    ソースファイルを以下の通り修正してみました。

    herokuにアップロードして確認します。

    ブラウザが開いて修正されたことが確認できます。

    Screenshot-Mozilla Firefox-2

     

     

     


  • heroku+node.jsでHello Worldしてみた(1)

    投稿日 2015年 7月 24日 コメントはありません

    ずいぶん前から話題になっている heroku を試してみました。今回は、herokuとnode.jsを使ってHello Worldしてみましたので、その記録です。
    JavaScriptを使うのもほぼ初めて、herokuも初めて、当然Node.jsも初めて、という初めてづくしなのでおかしなところもあるかもしれません。環境はLinuxMint17.1 32bitです。

    参考にしたのは「2013-07-07 herokuでNode.jsの動く環境構築してみた!」です。基本的には(2)まではこの記事を辿っただけです。(途中からNode.js + Express環境前提での記載になります)

    1.herokuのアカウント作成&準備

    herokuのサイトでサインアップします。お決まりのメールアドレスをIDとするタイプです。
    メールアドレスをIDとして入力すると、そのアドレスに確認用のリンクアドレス付きのメールが送られてきます。そこにアクセスしてパスワードを設定します。

    パスワード設定後、ログインすると、どの言語を使うか(Getting Started with Heroku)聞いてきます。

    Screenshot-1000

    今回はNode.jsを選択してみます。

    Screenshot-1001

    Node.jsとnpmがインストールされていることが条件のようですので、ここで一旦herokuから離れます。

    2.node.jsとnpmのインストール

    すでにnodejsコマンドとnpmコマンドはインストール済みなので割愛。
    デフォルトで入っているアマチュアパケット無線用のnodeパッケージを削除(中身はないようだけど)して、node.jsをインストールします。

    無事にインストールできたようです。

    3.heroku toolbeltのインストール

    「Getting Started with Node.js on Heroku」のSet upのところで、heroku toolbeltのインストールをします。Debian/Ubuntuを選ぶと、コマンドラインで以下を実行するよう表示されます。

    Screenshot-1002

    Rubyがインストールされている必要があるようですので、以下の通りコンソールから入力します。

    とした後、

    としてインストールします。

    4.herokuにログイン

    問題なく成功したので、Set upのところの「I have installed the Toolbelt」をクリックします。すると次の「Prepare the app」に進みます。

    5.サンプルアプリを動かす

    Getting Started with Node.js on Heroku」の「Prepare the app」「Deploy the app」「View logs」に沿って操作していけばサンプルアプリは容易に動きます。
    詳細は省略。その後の説明は、

    • ログは「$ heroku logs –tail」で確認可能
    • Procfileにはアプリを起動するためのコマンドを記述する。プロセスタイプの「web」に続いて、node.jsの場合には「node ファイル名.js」。webはherokuのHTTPルーティングスタックを使うためのもので、デプロイされた時にWebトラフィックを受信する、ということみたい。
    • package.jsonにはアプリケーションの依存関係を記述する。ファイルは「$ npm init」で作成できる。packages.jsonはアプリケーションのherokuで動かす際のNode.jsのバージョンと、アプリケーションの依存関係の両方を決定する。アプリケーションがデプロイされると、herokuはpackages.jsonを読み込んでnpm installコマンドを使って適切なバージョンのnode.jsと依存ファイルをインストールする。
    • アプリケーションをローカルで動かすためには「$ foreman start web」とするが、LinutMint17.1では「node」コマンドはアマチュアパケット無線用のNodeとなっており、node.jsは「nodejs」コマンドで起動することになっているため失敗してしまう。.bashrcに「alias node nodejs」と記述して新しいterminalで起動してもダメ。「$ sudo ln -s nodejs node」としてからだと、

      となってやはりうまくいかない。
      ぐぐるさんに聞いてみると・・・同じ課題の人がいるようです。前の方の「2.node.jsとnpmのインストール」を修正しました。
      改めて試してみましたが、

      となってうまくいきません。(気を取り直して再起動すると、Synapticがherokuとheroku-toolbeltのアップデートを要求してきましたが、その後でもやはりダメ・・・)
      「$ npm install」したあと「$ npm init」で package.json を作りなおしたらうまくいった模様。
    • その他、herokuの外のサービスとして長大なログを取るもの、コンソール起動の仕方(ワンライナーを動かすなど)、環境変数の渡し方・取得の方法、データベースの使い方などの記載があります。

    (2)へ続きます。