自動化厨のプログラミングメモブログ │ CODE:LIFE

Python/ExcelVBA/JavaScript/Raspberry Piなどで色んなことを自動化

APIで取得したJSONをいい感じにスプレッドシートに展開したい

SlackなどのAPIからJSONデータを取得したあとそれをスプレッドシートに展開する場合、オブジェクトのkeyを一個ずつ指定して二次元配列を作ってシートに展開...みたいなことをやっていました。

しかし、いちいちkeyを指定してやるのが面倒だしコードも見やすくはないのでkeyを全てシートの1行目に展開、対応する値を行ごとにセットする方法を考えてみました。

  • やりたいこと
  • ネストされたJSONをテーブルにするため「フラット化」する
  • 今回の肝になる flattenObj 関数
    • SlackAPIのユーザ情報をスプレッドシートに展開してみる
  • 各ステップの解説
    • 配列内のObjectをフラット化
    • 1つ目の配列のkeyをヘッダーとして定義
    • headers をループして生成した配列を body 配列にまとめる
    • headers と body を結合
    • setValues
  • あとがき

 

やりたいこと

画像左のSlackAPIで取得したユーザデータなどをスプレッドシート上にテーブルとして展開したい。

しかも もとのJSONのパターンに関わらず使い回せるように作っておきたい。

f:id:maru0014:20210621215928p:plain

しかし、単純に配列をループしてObject.keysをループしても profile 以下のデータまでループする作りではないので以下画像のとおりオブジェクトのままセットされちゃいます。

えー、じゃあObjectの中のObject.keysもループしてさらに下の...うーん。

f:id:maru0014:20210621215943p:plain

続きを読む

Node-RED×Yahoo気象情報API×Slack×Alexaで雨雲通知システムを作る

f:id:maru0014:20201223232055p:plain この記事は UG Advent Calendar 2020 24日目の記事です。

早速ですが記事タイトルの動作イメージからご紹介しましょう。

動作イメージ

Yahoo気象情報APIを15分毎に参照して自宅の座標に一定数以上の降水量予測が検知された場合、Slackのhome_speakerチャンネルに予測日時と予測降水量を投稿しつつ、Alexaに読み上げてもらうというものです。

Slack通知はこんなかんじ。実験なので過去の日時になっていますが基本は現在日時以降の予測情報からメッセージを生成します。

f:id:maru0014:20201223232223p:plain
Slackへの通知イメージ

続きを読む

LINEボットにメッセージを送ったら特定メンバーに転送する アナウンスボットをGASだけで作ってみた2(GASライブラリを使う)

codelife.cafe

前回作成したメッセージ転送LINE bot 「Message Broker」ですが、GAS用のライブラリを作ってくれている方がいたので試してみました。

最終更新が約2年前なので大丈夫かなと思いましたが使えました。

github.com

ライブラリを読み込み

リソース > ライブラリ > Add a library に M9SALMELLb5j80Xc6lwp2BSX4BxE72EjN を貼り付けて追加 > 最新バージョンを選択して保存

f:id:maru0014:20201003231153p:plain

続きを読む

GASとSlackとGoogleHomeで毎朝なにを着れば良いか教えてもらう

f:id:maru0014:20181014232943p:plain

最近は季節の変わり目で朝起きて寒いなーと思って上着を着ていくと、意外と昼間は暑くて上着が邪魔になったり。逆に意外と寒かったり。

朝どんな服装にするべきか悩ましいのですが、tenki.jpではどれくらいの服装なら体感温度が適温になるのか「服装指数」というものを表示してくれています。

これを毎朝確認すれば前述のような自体は避けられる!と思ったが自動化厨にとってそれは大変面倒くさいというもの。

今回はGASでお手軽にスクレイピング→Slackへ投稿→GoogleHomeに喋らせるという仕組みを作りました。

※今回の記事では「GASでスクレイピング→Slackへ投稿」までを紹介します。「→GoogleHomeに喋らせる」は以下の過去記事を参照ください。

code-life.hatenablog.com

Googleスプレッドシートでスクレイピング

東京地方(東京)の服装指数 - 日本気象協会 tenki.jp

https://tenki.jp/indexes/dress/3/16/4410/

東京の方はこちらのページですね。お住まいの地域に合わせてページURLをコピーしておきましょう。

このページに欲しい情報は全て載っています。

  1. 服装指数
  2. どんな服装にすべきかのコメント
  3. 天気
  4. 最高/最低気温

これらの情報をスプレッドシート上に取得・表示できるようにするのですが、Googleスプレッドシートには超便利な関数「importxml」があります。

この関数は=importxml("スクレイピング対象URL","XPathクエリ")のように記述するだけで対象要素のテキストをセルに表示することができます!

スプレッドシートの完成イメージ

f:id:maru0014:20181014234349p:plain

だいたいこんなかんじです。ぶっちゃけ3行目以下は不要なんですが、なぜかXpathのインデックス番号を指定しても全部取得されちゃってめんどくさいので諦めてこのまま使いました。

関数入力

各項目を以下のようなXpathで取得します。

※今回スクレイピング対象URLはI1セルに入力してあります。

項目 関数入力
A 日付 =today()
B 指数 =importxml(I1,"//*[@id='main-column']//*[contains(@class, 'indexes-telop-0')]")
C 天気 =importxml(I1,"//*[@id='main-column']//*[@class='weather-telop']")
D 最高気温(℃) =importxml(I1,"//*[@id='main-column']//*[@class='high-temp']")
E 最低気温(℃) =importxml(I1,"//*[@id='main-column']//*[@class='low-temp']")
F 降水確率 =importxml(I1,"//*[@id='main-column']//*[@class='precip']")
G コメント =importxml(I1,"//*[@id='main-column']//*[contains(@class, 'indexes-telop-1')]")
H 文章 =CONCATENATE("本日の天気は",C2,"、最高気温",D2,"、最低気温",E2,"、降水確率",F2,"%、服装指数は",B2,"です。",G2,"。")

H列にはSlackへ投稿させるメッセージ内容です。各項目を文章として結合しています。

以下を参考にしました

review-of-my-life.blogspot.com

qiita.com

GASでスプレッドシートのデータを取得してSlackへ投稿

Slackで事前に着信Webフックを用意しておきます。以下の過去記事を参考に設定してください。

code-life.hatenablog.com

コード.jsに以下のように記述

var postUrl = 'ここにSlackの着信WebフックURL';

function myFunction() {
  var spreadsheet = SpreadsheetApp.getActiveSpreadsheet(); //スプレッドシートを取得
  var sheet = spreadsheet.getActiveSheet(); //シートを取得
  var message = sheet.getRange("H2").getValue(); //投稿用文章が入っているセルの中身を取得
  
  var payload = JSON.stringify(
  {
     "text" : message
  });
  
  var options =
  {
    "method" : "post",
    "contentType" : "application/json",
    "payload" : payload
  };
  
  UrlFetchApp.fetch(postUrl, options); //Slackへ投稿
}

ここまでできたらテスト実行。再生ボタンを押しましょう。

f:id:maru0014:20181015000147p:plain

これでSlackへ無事投稿されればOK。

毎朝自動実行する

再生ボタン左にある時計アイコンをクリック。

以下のように設定して保存すれば毎朝教えてくれます。

f:id:maru0014:20181015000336p:plain

【2020年更新】はてなブログで書いたコードブロックに行番号を表示する方法(CSS+JavaScript)

  • この記事でできるようになること
    • 完成イメージは以下の状態
  • CSSのcontent: counterを使ってみる
  • JavaScriptで行ごとにdivで囲む
    • CSSで付け足したdivごとにカウントアップ
    • [おまけ]コードブロック左上に言語名を表示するCSS

この記事でできるようになること

  1. はてなブログのコードブロックに行番号を表示
  2. はてなブログのコードブロックの偶数行のみ背景色をつける
  3. [おまけ]はてなブログのコードブロックの左上に言語名を表示する

最初は行番号のみで考えていましたがついでに縞々もやってみました。

完成イメージは以下の状態

f:id:maru0014:20180522222246p:plain

要件

  • JavaScriptで追加する方法もあるみたいだけどCSSでやりたい
  • シンタックスハイライトははてな標準で十分
  • highlight.jsなどのライブラリは使いたくない
続きを読む