編集履歴一覧に戻る
airpocketのアイコン画像

airpocket が 2022年09月28日17時30分10秒 に編集

コメント無し

本文の変更

# はじめに [Spresenseコンテスト](https://elchika.com/promotion/spresense2022/)で、[ウェブアプリっぽいこと](https://elchika.com/article/7055b4e0-b2ba-43f2-9994-85aa40dd16c7/)に手を出してみたんですが、もう少し使えるととても便利そうだなーと感じていました。でもって先日[お詳しい方](https://elchika.com/user/siroitori0413/?page=0)とお話しする機会があり、GASでHTTPのPOSTを受けると便利だよー、と教えていただいたのでM5Stackで集めたデータをgoogleスプレッドシートに送信・保存する方法を試してみた覚書です。 # 作ったもの M5Stackで作ったデータをスプレッドシートに追記していく最小構成のプログラムです。 M5Stackのボタンを押したら1から6の乱数を生成 ↓ 作った乱数をHttp Request の POSTメソッドでGASに送信 ↓ GASのウェブアプリでデータ受信 ↓ 受信時刻とデータをスプレッドシートに追記する GAS側のコードと設定方法は[@siroitori0413](https://twitter.com/siroitori0413)さんの[この記事](https://siroitori.hatenablog.com/entry/2020/04/13/115538)を、M5StackのUIFlowは[@tatsuya1970](https://twitter.com/tatsuya1970)さんの[この記事](https://qiita.com/tatsuya1970/items/737b9af78191846d4556)を参考にさせていただきました。ありがとうございます(というかほぼそのままですmm)。 # M5Stack + UIFlow とりあえず、送信側をUIFlowでサクッと作ってしまいます。 ボタンAを押すとHttp RequestをPOSTします。 POST部分の処理をメインループに入れてるのは、ボタンAの割り込み処理内で実行すると画面表示のタイミングが遅くなってしまうから。(なんで?) UIFlowのプログラムは次の通りです。赤枠の中には、GASで作ったウェブアプリのアドレスを入力します。 ![キャプションを入力できます](https://camo.elchika.com/e1118c7db608738d1f1be0584306c184aecb2fdd/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f38666662353561372d373433312d346234382d383832642d3565323665663534343465652f38616332313537372d353830372d343266332d623366322d373730323132646138313562/) # google スプレッドシート + GAS ## google スプレッドシート google スプレッドシートで、受信したデータを保存するスプレッドシートを作成します。 ファイル名は「受信テスト」としました。1行目にはデータタイトルを記入しておきます。 「時間」にはGASの受信時間、「受信データ」にはPOSTで受けたデータ部分、「ステータス」には受信データから乱数値だけを抜き出して記録します。 ![キャプションを入力できます](https://camo.elchika.com/c56ace206a08a806641735fc5c88bb64aea9b2e4/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f38666662353561372d373433312d346234382d383832642d3565323665663534343465652f66313966333630632d316263662d346336372d623235312d633566613037303534646239/) ## GAS GASを使うには、スプレッドシートの上部メニューから、拡張機能>App Scriptを選択します。 ![キャプションを入力できます](https://camo.elchika.com/ba3e783260374a6d7c2e123987a0470fa0247e4f/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f38666662353561372d373433312d346234382d383832642d3565323665663534343465652f36643237663666392d303639392d343939322d613562612d353132356165616666613537/) プロジェクトが立ち上がるとこのような画面になります。 ![キャプションを入力できます](https://camo.elchika.com/dc99d3dc46850ed4552da3cbb79da4f2995b288c/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f38666662353561372d373433312d346234382d383832642d3565323665663534343465652f37626331396364372d366230612d343835352d386562362d633165356462356538383231/) プロジェクト名を書き換えてコードを書きます。 ![キャプションを入力できます](https://camo.elchika.com/1f6802f4f306907f363daecc355a9bc5b04d95cb/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f38666662353561372d373433312d346234382d383832642d3565323665663534343465652f66346530663963612d666135382d343037382d623665632d336165333436623330663736/) ```js function doPost(e) { console.log('catch post') var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('シート1'); var params = JSON.parse(e.postData.getDataAsString()); var status = params.status; // データをシートに追加 sheet.insertRows(2,1); sheet.getRange(2, 1).setValue(new Date()); // 受信日時を記録 sheet.getRange(2, 2).setValue(params); // 受信データを記録 sheet.getRange(2, 3).setValue(status); // 乱数値を抜き出してを記録 } ``` プログラムが書けたら、プログラムをデプロイして使える状態にします。 デプロイ>新しいデプロイ を選択。 ![キャプションを入力できます](https://camo.elchika.com/c85e98a199510ac255ff09232ec1560e8c5fe6f9/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f38666662353561372d373433312d346234382d383832642d3565323665663534343465652f32663936376266622d313336622d346564372d383233302d353235373937363735343337/) 種類の選択>ウェブアプリ を選択。 ![キャプションを入力できます](https://camo.elchika.com/d1fd764a82f899721b9ee1a13dced22c9e455b3b/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f38666662353561372d373433312d346234382d383832642d3565323665663534343465652f63393866613666362d323830322d343761642d613533342d613337613732316363386435/) 「新しい説明文」に任意のコメントを記入、「アクセスできるユーザー」を「全員」にして「デプロイ」を押す。 ![キャプションを入力できます](https://camo.elchika.com/082aeb52241d78d4e598b47e5f45b4d3bfbef92f/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f38666662353561372d373433312d346234382d383832642d3565323665663534343465652f32303362313237642d333930642d343034382d626165652d323537613938663563336331/) 「アクセスを承認」する ![キャプションを入力できます](https://camo.elchika.com/50f0a038eee0f2da3546b3e48e8fef642519b17f/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f38666662353561372d373433312d346234382d383832642d3565323665663534343465652f37613262363437322d333637352d343964652d383930382d636165396235333135653163/) グーグルスプレッドシートを作っているアカウントにログインする。 ![キャプションを入力できます](https://camo.elchika.com/9458ebee07002467b60cb74b542ea0f1babe9f33/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f38666662353561372d373433312d346234382d383832642d3565323665663534343465652f62396230633130372d326464332d346536612d386465382d386134306362656464303131/) 「Advanced」をクリック ![キャプションを入力できます](https://camo.elchika.com/b4c02d6564d771eb3251eddb5abce6edf922a318/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f38666662353561372d373433312d346234382d383832642d3565323665663534343465652f64653432313762332d323562372d343434332d613037322d393232313965363264636338/) 「Go to POSTの受信テスト(unsafe)」をクリック ![キャプションを入力できます](https://camo.elchika.com/f0dd2b1d67561adbf1402612ea2d502e1dd8d82e/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f38666662353561372d373433312d346234382d383832642d3565323665663534343465652f30343130376139342d343566312d343237652d616537612d663661333137333266383336/) 「Allow」をクリック ![キャプションを入力できます](https://camo.elchika.com/47aad793f4c307df8dbd39aea1df27ad6f691996/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f38666662353561372d373433312d346234382d383832642d3565323665663534343465652f36376632323839312d636130302d346533632d383135342d613035626539643931316338/) ウェブアプリのアドレスをコピーして「完了」 ![キャプションを入力できます](https://camo.elchika.com/343fe42d865ee68191e7be151112701b2707b0b8/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f38666662353561372d373433312d346234382d383832642d3565323665663534343465652f36613165346639662d333961302d343432622d626662632d323831663562633636316536/) コピーしたウェブアプリのURLをUIFlowのHttp RequestブロックのURL欄に入力 ![キャプションを入力できます](https://camo.elchika.com/cb43dda9baa2583513e520ee3d1ce74520fdd455/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f38666662353561372d373433312d346234382d383832642d3565323665663534343465652f65376331363864352d366632372d343133392d396134332d373731616166333533356138/) # 動作テスト M5StackのAボタンを押すと、数秒後にスプレッドシートにデータが追記されました! ![キャプションを入力できます](https://camo.elchika.com/58efcabb4a23ca858a8282cba3bd576d37de9ee7/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f38666662353561372d373433312d346234382d383832642d3565323665663534343465652f31366535316134352d366532332d346332302d396536332d626138313338346161346463/) 表示形式を変えると秒単位まで記録されていますね。 ![キャプションを入力できます](https://camo.elchika.com/593a9cff11f34ab3b33e7a672d2353c0a654850a/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f38666662353561372d373433312d346234382d383832642d3565323665663534343465652f35356261336266302d613361392d343763632d626633612d353836613162366334393763/) # おまけ Node-REDから投げてみる Node-REDからも GAS 宛てに POST してみます。 フローはこれだけ。 ![キャプションを入力できます](https://camo.elchika.com/2927f7b95c0b77daf2704839cee3e46402ad1ba2/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f38666662353561372d373433312d346234382d383832642d3565323665663534343465652f37363637383333652d303464612d346230312d393537392d656361353964383564613538/) injectノードの中身 msg.payload をJSON形式にして {"status":"from Node-RED"} とします。 ![キャプションを入力できます](https://camo.elchika.com/30532039e08c1cffc10a75b30e567ee0b633c894/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f38666662353561372d373433312d346234382d383832642d3565323665663534343465652f35396533646138322d393332312d343664332d623162612d323364643237663134653836/) http requestノードの中身 「メソッド」は「POST」、「URL」にGAS のウェブアプリの URL を記入します。 ![キャプションを入力できます](https://camo.elchika.com/1f14b38ad2b16abf0467049e307ba76de2607e77/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f38666662353561372d373433312d346234382d383832642d3565323665663534343465652f39376334333666612d623231642d346165382d383632352d303266653064316639303364/) デバッグコンソールには「お返事がこないよ~」ってメッセージがでてますが、 ![キャプションを入力できます](https://camo.elchika.com/e68f34ad9d3e371e5731774e9a757aafbde6e2f6/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f38666662353561372d373433312d346234382d383832642d3565323665663534343465652f33326666633165302d343036362d346634302d383361372d636136353966356166653238/) スプレッドシートには Node-RED からのデータが追記されてます。 ![キャプションを入力できます](https://camo.elchika.com/ede13765cbda85d7a5d44cb85fa16b8fb6aed0a4/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f38666662353561372d373433312d346234382d383832642d3565323665663534343465652f37666136616663352d363336362d343636342d383537362d646563336261383132353837/) # まとめ IoTするとき、データの保存先をどこにしようか悩むこともあるかと思いますが、これくらい簡単ならグーグルスプレッドシートもアリな気がしました。

-

JavaScriptは知らないのでGASは敬遠していましたが、これくらいならなんとかなりそうです。

+

JavaScriptは知らないのでGASは敬遠していましたが、これくらいならなんとかなりそうです。 Node-REDからも簡単にデータを送れましたので、なるべくローコードで済ませたい人はNode-REDで処理フローを作って結果をスプレッドシートに保存することもできますね。