<仙台高専広瀬有志 advent calendar><GAS>slack bot作成にチャレンジ

はじめに

このエントリは 仙台高専広瀬 Advent Calendar 2018 - Adventar 1日目の記事です。 //初っ端からネタに困ってたなんて言えない //一日目から間に合ってないとか言わないで、書いた文章も一晩寝かせて熟成してると思って許して。。。

天気予報って見なくね

普通の人はみるんですって言わないで。 朝とかの時間ないときに天気予報まともに見る余裕なくねって人が少しくらいいてくれると思うんですよ、うん。 それで思った、slackのbot作って送ればよくねって。 複数人のとこに送れば天気予報を共通して把握できるから、外の作業とかある人達のとこに流しとくとかなり便利じゃないかなって。 じゃあ作ろうよってことで作ったマン。

目次

  • 使用したAPI
  • 構成
  • 作成したプログラム
  • 実際の動作

使用したAPI

今回はAIを使った天気よ、、じゃなくてWEBに公開されてるところから気象情報はもらってきます フリーで気象情報をとってこれるAPIをいろいろ探した結果、Weather Hacksさんからとってくるのがいい感じになりそうだったのでそこを使います。

weather.livedoor.com

その中でも、jsonでデータを取得できる機能を使って行きます。

構成

開発したやつの大まかな構成図を以下に示します。

f:id:poolbooyer:20181202011734j:plain
開発したbotの構成図
図に書いてあることがほぼすべてなのですが。 1.GASを使ってweather hacksに気象情報をリクエスト 2.取得した情報を元に必要となる情報を抽出 3.情報を元に提供する文章を生成 4.生成した文章をslackに流す。 こんな感じ

作成したプログラム

今回はfunctionでいうと3つに別れてるのでそれぞれ書きます。

情報取得機能

webAPIにリクエストを投げてデータを取得するのをGASだと一行でできます。

var response=UrlFetchApp.fetch("http://weather.livedoor.com/forecast/webservice/json/v1?city=040010");

この記述でresponseにAPIからのレスポンスが保存されます。 保存されたレスポンスを元にしてjson形式のパーサに通して実際の文章を作っていきます。 この辺はあんまり詳しく書く必要のある目新しいことは自分的になかったので全体のコードに行きます。

/*
postUrl:送信するアプリケーションのURL
username:通知アカウントの名称
icon:通知アカウントのアイコン
announce:通知するテキスト
*/
var postUrl = 'https://hooks.slack.com/services/***';
var username = 'Weatherbot';
var icon = ':hatching_chick:';
var announce=" ";

function getWether() {
  //気象情報をリクエスト
  var response=UrlFetchApp.fetch("http://weather.livedoor.com/forecast/webservice/json/v1?city=040010");
  //json形式で読み込み
  var json=JSON.parse(response.getContentText());
  //取得情報を管理
  /*
  date:日時
  location:場所の情報
  telop:天気
  temp_max,min:最高気温、最低気温
  */
  var date=json["forecasts"][0]["date"];
  var location=json["location"]["city"];
  var telop=json["forecasts"][0]["telop"];
  var temp_max=json["forecasts"][0]["temperature"]["max"]["celsius"];
  var temp_min=json["forecasts"][0]["temperature"]["min"]["celsius"];
  //送信用テキストを作成
  announce=date+"の"+location+"の天気\n";
  announce=announce+telop+"\n";
  announce=announce+"最高気温: "+temp_max+"℃\n";
  announce=announce+"最低気温: "+temp_min+"℃\n";
}

slackに送るところ

slackに送る前準備

slackに送るための準備としてIncoming Webhooksっていうのを追加します。

f:id:poolbooyer:20181202014703p:plain
Incoming Webhooks
どういうのかっていうとjson使ってメッセージの制御できるよってやつです

実際に送ってみよう

実際に送ってみます。

/*
postUrl:送信するアプリケーションのURL
username:通知アカウントの名称
icon:通知アカウントのアイコン
announce:通知するテキスト
*/
var postUrl = 'https://hooks.slack.com/services/***';
var username = 'Weatherbot';
var icon = ':hatching_chick:';
var announce=" ";
function sendWether() {
  //送信に必要な情報を配列で記述
  var jsonData =
  {
     "username" : username,
     "icon_emoji": icon,
     "text" : announce
  };
  //payloadに送信に必要な情報をjson形式で保存
  var payload = JSON.stringify(jsonData);
  
  //送信に関するオプションを記述
  var options =
  {
    "method" : "post",
    "contentType" : "application/json",
    "payload" : payload
  };
  //送信
  UrlFetchApp.fetch(postUrl, options);
}

全体の管理

とは言ってみたもののそれぞれの関数を呼び出す関数を一個作った 特にば得るものじゃないので挙げない 後はgas側の設定でトリガをつけると完成

実際の動作

こんな感じ

f:id:poolbooyer:20181202032814p:plain
bot post

追記

2019/1/18

weather hacksのAPIが最低気温を返してくれなくなったので最低気温通知機能は凍結中です。 凍えているのでしょう。

f:id:poolbooyer:20190118131518p:plain
APIのレスポンスを見てみた図

<Javascript><google Map API>地図出して遊んでみた

今回はgoogle map APIを触ってみたのでメモ あんまり詳しいこと書いてるとこが見当たらなかったので自分で詰まったところを細かく書いていきたいと思ってます。

目次

  1. APIを使う前の準備
  2. APIを使って地図を出してみる
  3. APIを使って緯度経度を取得してみる

1.APIを使う前の準備

使う前にやらなきゃいけないこと

何をするにも準備は必要です。 大まかにはこんな感じのものがあります

  • googleアカウントの準備(大抵の人は持ってると思うけど)
  • google Cloud Platformへアクセス
  • 支払い方法の登録(してもしなくてもいいけど)
  • APIキーの発行

前2つは省略します。

支払い方法の登録

基本的にgoogle Cloud Platform(このあとはCGPって書きます)のコンソールボードへアクセスして作業します。
google Cloud Platform からアクセスします。
コンソールボードのメニューの支払い情報の画面に行きます f:id:poolbooyer:20181023132319p:plain
ここで支払設定の画面に入れるのでそこで設定をすると1年間有効のトライアルクレジットがもらえます。34000円分くらいのクレジットがもらえました。 無料で十分使えますが実験的な意味で使ってたらいきなり課金されるみたいなことはないのでしとくと安心かもしれないです。 しかもしないとアカウントへの制限がそこそこ多いのでそういう意味でもしておくといいかもしれないです。

APIキーの発行

終わったら始めましょう。 まずはプロジェクトを作ります。 今回はMapのAPIを使うときの例で書いていきます。 まずはgoogle Maps Platformへアクセスします。 その画面の使ってみるのボタンを押して、使い始めます。

一番最初の画面で、どの機能を使うか以下の中から選びます。

  • Maps
  • Routes
  • Places 今回は地図を出すだけなのでMapsを選びました。 次の画面に行くとプロジェクトを選択する画面になります。 その画面でプロジェクトを選択するか、新しいプロジェクトを作ります。 その後にポチポチするとプロジェクトができます。

次にconsoleに行きます。 そうするとプロジェクトの詳細を見ることができます。 その後はAPIキーのセキュリティに係る部分の設定を行います。

キーセキュリティの設定

まずは認証情報画面に行きます f:id:poolbooyer:20181027002916p:plain そうするとAPIキーを選択する画面に行きます。 生成してすぐの状態は警告表示が出た状態です。

生成されたキーを選択するとキーの詳細設定ができる画面に行きます。 キーの名前は環境とかに合わせてつけるのがい良いのかと思ってます。

その上でセキュリティに関する設定をしていきます。 APIキーの制限の設定をします。 開くとこんな感じの画面がでます。 初期状態だとアプリケーションの制限欄がなしになっています。 f:id:poolbooyer:20181027021306p:plain ここを設定しないといつまでも警告表示が出るのでそこを直します。 今回はJavascriptで使うのでhttpリファラーを選択します。 また、リクエストを受け付けるアドレスの設定はオプションなのでしなくてもいいですが、しとくほうが安心です。自分はlocal host用キーと公開環境用キーとで分けてます。 次にAPIの制限をします。 必要なAPIを選んでおきます、それ以外のものは選択しないでおきます。 今回はMaps Javascript APIとGeocoding API、Maps Elevation APIの3つを選びました。(今回はMapのみ) f:id:poolbooyer:20181027022413p:plain ここまでやると準備完了です。

2. APIを使って地図を出してみる

ここからは実際にコードを書いていきます。

htmlのコード

まずは地図を出してみましょう。 こんなコードを準備しました。

<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>google map</title>
    <script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key={ API_KEY }&callback=initMap" async></script>
  </head>
  <body>
    <h1>google map</h1>
    <div id="map" style="height: 400px;"></div>
    <div id="locate"></div>
    <script src="./map.js" type="text/javascript"></script>
  </body>
</html>

2つ目のscriptタグの{API_KEY}に実際に作成したAPIキーを記述します。 id="map"のところに地図を表示します。 表示に関するスクリプトは次の通りです。

Javascriptのコード

Javascriptを使って実際にMapを表示するコードはこんな感じ

function initMap() {
      //表示時のマップの中心地指定
      var mapPosition = {lat: XXXXXXX, lng: YYYYYYYY}
      //表示先の指定
      var mapArea = document.getElementById('map');
      var mapOptions = {
        center: mapPosition,
        zoom: 12,
      };
      //マップを表示するオブジェクトを作成
      var map = new google.maps.Map(mapArea, mapOptions);
}

mapPositionに表示するときの中心地を指定しています。緯度経度を入れて実際に表示することができます。 mapOpstionsには中心地とzoom値(1~21)を入れます。zoom値はform使って調整したりして見たいところが収まる値を見つけて実際の値を決めたりするのもいいかもしれないです。 そうすると画像のように表示されます。 f:id:poolbooyer:20181027025851p:plain

<Javascript>グラフ書いてみようかと思った

書き出し一行目で言うことじゃないと思うけどめちゃめちゃ眠い

JavaScriptでグラフを書く

今回はこんなことをやるのでメモを書きます。
このネタは多分複数回に分けて書いていきます。

目次

  1. 使うもの
  2. どうやって使うか
  3. 折れ線でのサンプル
  4. 今後の予定

1.使うもの

今回はchart.jsというフレームワークを使ってグラフを作っていきます。
chart.js
日本語ドキュメントはこちら

このフレームワークでできること

もちろんグラフが書けます。

  • 棒グラフ
  • 線グラフ
  • レーダーチャート
  • ドーナツ、円グラフ
  • 鶏頭図
  • バブルチャート
  • 散布図
  • 面グラフ

このぐらいいろいろグラフが書けます。
複数をただかけるだけじゃなく、そのグラフを組み合わせることも可能です。

2.どうやって使うか

ダウンロードしたやつを使う方法もあるんですが今回はCDNを引いて使いました。

<script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>

あとはこれを使って実際にグラフを書いていきます。
書くときには描写するエリアを指定する必要があります。

<canvas id="hogehoge" width="" height=""></canvas>

この2つを使いつつ次はまず折れ線グラフを作ってみます。

3.折れ線グラフでのサンプル

ここまでやったならとりあえず実際にグラフ出したくねってなるので出してみます。
今回はサンプルコードを調べてみて、その上でデータとか大きさとかをちょっといじってみたくらいのコードを載せます。
(詳しいことは今後書きます。chart.jsは研究で今後使うと思ってるので自分のためにも書くと思ってます。hi)

htmlのコード

htmlに関してはさっき上で書いたcanvas要素を書くだけです。

<canvas id="myChart" width="5" height="2.5"></canvas>

シンプル
width,heightはpx単位ではなくchart.js独自のものっぽいです。
詳細はいろいろいじってみればいい感じになるって感じです。

JavaScriptのコード

JavaScriptのコードについてはコメントに色々書いてるのでまずはコードから。

//対象のidを指定してchartオブジェクトを作る
new Chart(document.getElementById("myChart"), {
  //折れ線グラフを指定
  "type": "line",
  //使用するデータを記述
  "data": {
    //横軸ラベルの指定
    "labels": ["00", "10", "20", "30", "40", "50", "60"],
    //データの情報
    "datasets": [{
        //データのラベル
        "label": "data sample",
        //実際のデータ(jsonデータ等に入れ替え)
        "data": [5, 6, 8, 20, 21, 30, 27],
        //塗りつぶし(しない)
        "fill": false,
        //線の色を指定(RGB)
        "borderColor": "rgb(75, 192, 192)",
        //線の湾曲を指定
        "lineTension": 0.0
      }]
    },
  "options": {}
});

実際に作成されるグラフ

それをやるとこんなグラフができます f:id:poolbooyer:20181017103622p:plain 実際に表示できるアニメーションとかもいろいろいじれるので面白いです。

4.今後の予定

  • 大きさに関する詳細を調べる
  • 複数表示のテスト
  • サーバの情報を持ってきてグラフ書く

を中心に色々いじってみようかなと思っています。

参考

chart.js
日本語ドキュメント