AESは電子政府推奨暗号リストに載ってる共通鍵暗号方式

前回の勉強内容

ponsuke-tarou.hatenablog.com

AESは、暗号化の規格です。

  • 正式名称 : Advanced(高度な) Encryption(暗号化) Standard(標準)

アメリカで標準規格として採用されていたDESにとって変わって登場した暗号化方式です。

暗号化と復号で同じ鍵を使う共通鍵暗号方式です。

暗号方式に関する記述のうち,適切なものはどれか。

  1. AESは公開鍵暗号方式RSA共通鍵暗号方式の一種である。
  2. 共通鍵暗号方式では,暗号化及び復号に同一の鍵を使用する。
  3. 公開鍵暗号方式を通信内容の秘匿に使用する場合は,暗号化に使用する鍵を秘密にして,復号に使用する鍵を公開する。
  4. ディジタル署名公開鍵暗号方式が使用されることはなく,共通鍵暗号方式が使用される。

平成29年秋期問41 暗号方式に関する記述|応用情報技術者試験.com

使う鍵の組み合わせはこんな感じです。

使う鍵 共通鍵暗号方式 公開鍵暗号方式
暗号化 共通鍵 公開鍵
復号 共通鍵 秘密鍵

f:id:ponsuke_tarou:20210413225125j:plain

暗号方式のうち,共通鍵暗号方式はどれか。

  1. AES
  2. ElGamal暗号
  3. RSA
  4. 楕円曲線暗号

平成28年春期問37 共通鍵暗号方式はどれか|応用情報技術者試験.com

データベースで管理されるデータの暗号化に用いることができ,かつ,暗号化と復号とで同じ鍵を使用する暗号化方式はどれか。

  1. AES
  2. PKI
  3. RSA
  4. SHA-256

平成27年春期問39 同じ鍵を使用する暗号化方式|基本情報技術者試験.com

上記過去問の選択肢を分類するとこんな感じです。

問題の選択肢 共通鍵
暗号方式
公開鍵
暗号方式
暗号方式じゃない
AES o
ElGamal暗号 o
RSA o
楕円曲線暗号 o
PKI PKIは、暗号化技術と電子署名で世の中の安全を守る仕組みです。
SHA-256 ハッシュ関数です。

データを決まった長さに区切って暗号化するブロック暗号です。

ブロック暗号は、元のデータを決まった長さに区切って、その区切った単位ごとに暗号化します。
この区切ったデータをブロックと言います。
AESでは、このブロックの長さ(ブロック長)を128bitで分けています。
f:id:ponsuke_tarou:20210413225305j:plain
もう一つストリーム暗号という方式があります。
ストリーム暗号は、元のデータを端から1bitまたは1byte単位で次々に暗号化します。
端からバンバン暗号化するのでデータを全部受信していなくてもさくさく暗号化できちゃいます。
だから、早い!

が、ブロック暗号の方が研究が進んでいて安全だそうです。
研究が進んでいるおかげかAESは、早いそうです。

ブロック暗号 ストリーム暗号
暗号化の単位 ブロック 1bitまたは1byte
逐次生 o
安全性 o
暗号方式 DES, AES RC4

f:id:ponsuke_tarou:20210415202903j:plain
荒川区の藤の湯

電子政府推奨暗号リストは、安全性及び実装性能が確認された暗号方式を載せたリストです。

暗号化技術の安全性を評価したりしている、CRYPTRECというプロジェクトがあります。

  • 正式名称 : Cryptography(暗号技術) Research(調査) and Evaluation(評価) Committees(委員会)

CRYPTREC とはCryptography Research and Evaluation Committees の略であり、電子政府推奨暗号の安全性を評価・監視し、暗号技術の適切な実装法・運用法を調査・検討するプロジェクトである。
CRYPTREC | CRYPTRECとは

このCRYPTRECから「電子政府推奨暗号リスト」というものが出されています。

電子政府推奨暗号リストとは,CRYPTRECによって安全性及び実装性能が確認された暗号技術のうち,市場における利用実績が十分であるか今後の普及が見込まれると判断され,当該技術の利用を推奨するもののリストである。
平成27年春期問8 CRYPTREC 暗号リスト|情報処理安全確保支援士.com

AESは、安全性及び実装性能が確認された暗号方式です。

CRYPTREC | CRYPTREC暗号リスト(電子政府推奨暗号リスト)にあるPDFで「電子政府推奨暗号リスト」を確認すると(2021-04-13時点)
共通鍵暗号」の「128ビットブロック暗号」のところにAESが載っています。

ということで、「CRYPTRECにより安全性及び実装性能が確認された暗号方式」ということですね。

AESは、鍵長が長いほど暗号文は解読されにくくなります。

鍵長は、そのままの意味で鍵の長さ(単位はbit)です。
AESでは、暗号化で使う共通鍵の鍵長が「128bit」「192bit」「256bit」から選べます。
悪い人が共通鍵を総当たりで割り出そうとした時に「0」「1」の組み合わせといえど長くなれば長くなるほど大変になるわけですね。

AES-256で暗号化されていることが分かっている暗号文が与えられているとき,ブルートフォース攻撃で鍵と解読した平文を得るまでに必要な試行回数の最大値はどれか。

  1. 256
  2. 2^{128}
  3. 2^{255}
  4. 2^{256}

平成30年秋期問37 ブルートフォース攻撃の試行回数|基本情報技術者試験.com

ブルートフォース攻撃は、根性で不正ログインを頑張る総当たり攻撃です。
ブルートフォース攻撃をする悪い人は、復号する共通鍵をどんどん変えて復号を頑張ります。
鍵長が「256bit」の「0」「1」の組み合わせパターンを頑張って鍵を見つけるために最大2^{256}回鍵を変えて復号を試し続けることになるのです。
頑張りますね。

AESの特徴は、「鍵長によって段数が決まる」です。

AESの特徴はどれか。

  1. 鍵長によって,段数が決まる。
  2. 段数は,6回以内の範囲で選択できる。
  3. データの暗号化,復号,暗号化の順に3回繰り返す。
  4. 同一の公開鍵を用いて暗号化を3回繰り返す。

平成29年春期問1 AESの特徴はどれか|情報処理安全確保支援士.com

暗号化では、ラウンド関数という関数を繰り返し処理します。
その関数を処理する回数を段数とかラウンド数といい、この数が多いほど強度の高い暗号文になります。

鍵長と段数の組み合わせ

鍵長 段数
128bit 10
192bit 12
256bit 14

というわけで、「使う共通鍵の鍵長が大きい」->「暗号化の段数が多い」->「解読されにくい暗号文ができる」ということになります。

f:id:ponsuke_tarou:20210415203026j:plain
豊島区の前田湯はお花屋さんと一緒になっている

最後にAESで暗号化と復号をしてみます。

参考 : コマンドラインで簡単にAES暗号化、または Java での AES 暗号化 - 理系学生日記

# Macに入っているopensslコマンドを使います。
$ openssl version
LibreSSL 2.8.3

# 使えるAESの暗号方式をみてみます。
$ openssl list-cipher-commands | grep aes
aes-128-cbc
aes-128-ecb
aes-192-cbc
aes-192-ecb
aes-256-cbc
aes-256-ecb

# 鍵長256bitの共通鍵を使ったAESで暗号化します。
$ echo "ponsuke" | openssl aes-256-cbc -e -base64 -p -pass pass:password
salt=1CD83F097F07009C
key=8E71364EB09F97B6BACAC68B1EB944FC416CE8EBBF81E8B2681667AEE7991D63  # << 共通鍵
iv =68F150FA9F95D8590F8FE50002A1571E
U2FsdGVkX18c2D8JfwcAnEg69cNx1g30btqEdInz7TQ=   # << 暗号化された暗号文

# 暗号文を復号します。
$ echo "U2FsdGVkX18c2D8JfwcAnEg69cNx1g30btqEdInz7TQ=" | openssl aes-256-cbc -d -base64 -pass pass:password
ponsuke

f:id:ponsuke_tarou:20210415203128j:plain
板橋区大和町の愛染湯

次回の勉強内容

勉強中・・・

いろんなMacがある

すぐ忘れちゃう。 同じようなアルファベットの並びがあるとなんだかわからなくなる。 フルスペルなんて1mmも覚えられない。そんな自分への記録です。

MacintoshMac

Appleが作ってるりんごマークのついたパソコンです。

f:id:ponsuke_tarou:20210404220246j:plain
私はステッカーを貼るセンスと器用さがありません。が貼ります。

Media Access ControlのMACアドレス

ネットワーク上でパソコンとかスマホとか機械を識別するための番号です。

f:id:ponsuke_tarou:20210404222428p:plain
MacMACアドレスを確認しました。
機械の個人番号のようなもので、基本的には世界で1つの番号です。

# コマンドだとこんな感じで確認できます。
$ ifconfig en0 ether
en0: flags=8863<UP,BROADCAST,SMART,RUNNING,SIMPLEX,MULTICAST> mtu 1500
        options=400<CHANNEL_IO>
        ether 12:34:56:ab:cd:ef #<<< ここがMACアドレス

このMACアドレスがあるので広い広いネットワークの中でもどの器械(パソコンとか)にどの器械から通信しているかわかるようになります。

ponsuke-tarou.hatenablog.com

f:id:ponsuke_tarou:20210409212912j:plain
台東区の日の出湯

Message Authentication CodeのMAC

メッセージ認証をする時にデータと一緒に送られてくる検証用のデータです。

ponsuke-tarou.hatenablog.com

悪い人が送ったデータじゃないことを確かめるために使うデータです。

例えば、GitHubのWebhookを使うと送られてくる情報にこんな感じでくっついてきます。

{
    ...省略...
    "headers": {
        ...省略...
        "x-hub-signature": "sha1=sha1のHMAC値",
        "x-hub-signature-256": "sha256=sha256のHMAC値"
    },
    ...省略...
    "body": "データの本体",
    ...省略...
}

f:id:ponsuke_tarou:20210409213312j:plain
荒川区の藤の湯

LambdaのPythonでGitHubのWebhookから送られてくるHAMC値をチェックする

LambdaのPythonGitHubのWebhookから送られてくるHAMC値をチェックするコード

# -*- coding: utf-8 -*-
from __future__ import print_function
import json, hmac, hashlib, base64, urllib

def checkHmac(event) -> bool:
    """GitHubのWebhookから送られてくるHAMC値をチェックする"""
    # 送信者と受信者で秘密情報であるSecretの値
    secret = 'GitHubのWebhookで設定したSecretの値(直書きしないで環境変数とかSecrets Managerから取得すべし)'
    # GitHubから送られてきた情報にあったHMAC値
    sent_hmac = event['headers']['x-hub-signature-256']
    print('SHA-256ハッシュ関数用のHMAC値:' + sent_hmac)

    # Secretの値をbytes型に変換する
    secret_bytes = bytes(secret, 'utf-8')
    if (event['isBase64Encoded']):
        # bodyをbase64でデコードしてbytes型にする
        body_bytes = base64.b64decode(event['body'])
    else:
        # bodyをbytes型に変換する
        body_bytes = bytes(event['body'], 'utf-8')

    # 「Secret + メッセージ + ハッシュ関数」でHMAC値を作る
    created_hmac = 'sha256=' + hmac.new(secret_bytes, body_bytes, hashlib.sha256).hexdigest()
    print('自分で作ったHMAC値:' + created_hmac)

    # 2つのHMAC値が同じであったら改竄されていないと判断する
    return hmac.compare_digest(created_hmac, sent_hmac)

def lambda_handler(event, context):
    if checkHmac(event):
        print('HMAC値で認証できた!')
        # base64デコードした上で文字列にする
        b64decd = base64.b64decode(event['body']).decode()
        # URLデコードして「payload=」を削除する
        urldecd = urllib.parse.unquote(b64decd).lstrip('payload=')
        # 辞書型にする
        body = json.loads(urldecd)
        # そして処理で使う
        print(body)
    else:
        print('へんなHMAC値がGitHubから送られてきた!')

f:id:ponsuke_tarou:20210407234526j:plain
東京都あきる野市今熊山のすみれ

ことの発端は試験勉強

  1. じみに続けている情報処理試験の勉強でメッセージ認証を勉強していた。
  2. そういえば以前Backlogの課題にGitHubのコミットを連携するをやった時にGitHubのWebhookでHMAC値を使ったのを思い出して、今一度やってみようと思った。
  3. 手頃にGitHubでWebhookを設定
  4. AWSAPI GatewayとLambdaをノリで作ってみた。
  5. WebhookからきたHMAC値と自作したHMAC値が一致しない!

f:id:ponsuke_tarou:20210407234800j:plain
金剛の滝

GitHubのWebhookが送ってくるbodyがへんだ

print(event)してCloudWatch Logsをみたら・・・bodyが・・・肉眼で読めない・・・。

{
   "version": "2.0",
...
  "body": "cGF5bG9hZD0lN0IlMjJ...=",
  "isBase64Encoded": true
}

アルファベットと数字と最後にある=からBase64エンコードされてるっぽい・・・前にやった時は普通に読めたのに・・・・。

ペイロードがBase 64でエンコードされている

じっと見つめると "isBase64Encoded": true と最後に書いてある・・・なにこれ?

Lambda プロキシ統合の場合、API Gateway は、次のようにクライアントリクエスト全体をバックエンド Lambda 関数の入力 event パラメータにマッピングします。

...省略...

"isBase64Encoded": "A boolean flag to indicate if the applicable request payload is Base64-encoded"

API Gateway で Lambda プロキシ統合を設定する - Amazon API Gateway

訳すと「適用可能なリクエスト・ペイロードがBase 64でエンコードされているかどうかを示す真偽フラグ」。

えっ?Base64エンコードやっぱされている

f:id:ponsuke_tarou:20210407234849j:plain
今熊神社の三つ葉つつじ

HMAC値を作るにはbodyをBase64デコードします。

# 「cGF5bG9hZD0lN0IlMjJ...=」なbodyをBase64デコードしてbytes型にしてあげる
body_bytes = base64.b64decode(event['body'])
# bytes型にしたbodyを使ってHMAC値を作ろう
created_hmac = 'sha256=' + hmac.new(secret_bytes, b64decd, hashlib.sha256).hexdigest()

WebhookからきたHMAC値は X-Hub-SignatureではなくX-Hub-Signature-256 を使うのがお勧めです。

{
    ...省略...
    "headers": {
        ...省略...
        "x-hub-signature": "sha1=sha1のHMAC値",
        "x-hub-signature-256": "sha256=sha256のHMAC値"
    },
    ...省略...
}
ヘッダ 説明
X-Hub-Signature このヘッダは、webhook が secret で設定されている場合に送信されます。 これはリクエスト本文の HMAC hex digest であり、SHA-1 ハッシュ関数と HMAC keyとしての secret を使用して生成されます。 X-Hub-Signature は、既存の統合との互換性のために提供されているため、より安全な X-Hub-Signature-256 を代わりに使用することをお勧めします。
X-Hub-Signature-256 ​このヘッダは、webhook が secret で設定されている場合に送信されます。 これはリクエスト本文の HMAC hex digest であり、SHA-256 ハッシュ関数と HMAC key としての secret を使用して生成されます。

表の出典 : webhook イベントとペイロード - GitHub Docs

isBase64EncodedがFalseの時も考えておきます。

isBase64EncodedFalseだとBase64エンコードはされなさそうなので処理の分岐を作っておきます。

    if (event['isBase64Encoded']):
        # bodyをbase64でデコードしてbytes型にする
        body_bytes = base64.b64decode(event['body'])
    else:
        # bodyをbytes型に変換する
        body_bytes = bytes(event['body'], 'utf-8')

処理でBodyの内容を使う時はさらに加工して使うといいでしょう。

        # base64デコードした上で文字列にする
        b64decd = base64.b64decode(event['body']).decode()
        # こんな感じになる >>> payload=%7B%22ref%22%3A%22refs%2Fheads%2Fmaster%22%2C%22before...
        print(b64decd)
        # URLデコードして「payload=」を削除する
        urldecd = urllib.parse.unquote(b64decd).lstrip('payload=')
        # こんな感じになる >>> {'ref': 'refs/heads/master', 'before...
        print(urldecd)
        # 辞書型にすると使いやすい(と思う)
        body = json.loads(urldecd)

f:id:ponsuke_tarou:20210407234635j:plain
今熊山の名前のわからない花

付加データを付き合わせてなりすましを見破るHMAC

前回の勉強内容

ponsuke-tarou.hatenablog.com

勉強のきっかけになった問題

令和2年度秋(2020-10)の情報処理安全確保支援士試験午後1の問題にHMACについての問題が出題されました。

そして、大敗を喫しました・・・ので勉強します。

なりすまし対策としてデータが改竄されていないかを検証します。

「勉強のきっかけになった問題」では、「会員番号をバーコードで表示するアプリのなりすまし対策」にメッセージ認証を用いることになっています。

「他人のバーコードを会員番号から推測して表示」「他人の会員番号を盗んでバーコードを生成」しちゃってなりすしできちゃうので対策をするわけです。

メッセージ認証は、検証用のデータをメッセージに添付する方法です。

ネットワークを伝わっている間にデータが改竄されても検出できるように以下の流れで検証を行います。

  1. メッセージをやりとりする送信者と受信者で秘密情報(共有鍵など)を共有する
  2. 送信者がメッセージ本文から秘密情報などをごにょごにょ使って検証用のデータを作る
  3. 送信者は、メッセージ本文と検証用のデータを受信者に送る
  4. 受信者がメッセージ本文から秘密情報などをごにょごにょ使って検証用のデータを作る
  5. 受信者は、送られてきた検証用のデータと自分で作った検証用のデータを比較する
  6. 2つの検証用のデータが同じであったら改竄されていないと判断する

https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/MAC.svg/1322px-MAC.svg.png

メッセージ認証符号 - Wikipedia

検証用のデータのことをMACといいます。

  • 英語 : Message Authentication Code
  • 日本語 : メッセージ認証符号

送信者Aが,受信者Bと共有している鍵を用いて,メッセージからメッセージ認証符号を生成し,そのメッセージ認証符号とメッセージを受信者Bに送信する。このとき,メッセージとメッセージ認証符号を用いて,受信者Bができることはどれか。

答. メッセージの改ざんがないことを判定できる。

平成27年秋期問16 メッセージ認証符号|ネットワークスペシャリスト.com

f:id:ponsuke_tarou:20210401213939j:plain
北区志茂にあるHOTランドみどり湯

HMACは、ハッシュ関数を使って作られたMACのことです。

  • 英語 : Hash-based Message Authentication Code
メッセージ本文 + 共有鍵 = MAC
メッセージ本文 + 共有鍵 + ハッシュ関数 = HMAC

みたいな感じです。

MAC(Message Authentication Code)は、通信内容の改ざんの有無を検証し、完全性を保証するために通信データから生成される固定長のビット列です。 MACの生成には、共通鍵暗号を用いたもの(DES-MACやAES-MAC)とハッシュ関数を用いたもの(HMAC)がありますが、設問ではブロック暗号を用いてMACを生成しているので共通鍵暗号を用いた方式であることがわかります。

平成18年春期問74 メッセージ認証で使用される鍵|応用情報技術者試験.com

GitHubのWebhookでもHMACを使います。

以前、Backlogの課題にGitHubのコミットを連携する方法 - ponsuke_tarou’s blogをやった時にHMACを使いました。

  1. GitHubでWebhookを登録する時に合わせて登録するSecretが「メッセージをやりとりする送信者と受信者で秘密情報」になります。
    • f:id:ponsuke_tarou:20210405172807p:plain
  2. GitHubは、情報と一緒に検証用のデータを送ってくれます。
    • (下記のjson参照)GitHubから送られてきたデータのheadersにHMAC値が設定されています。
  3. BODY部分のメッセージ本文とSecret(秘密情報)とハッシュ関数でHMAC値を作ります。
    • (下記Pythonのコード参照)Pythonでやってみました。
    • hmac.new(secret_bytes, body_bytes, hashlib.sha256).hexdigest()で「Secret + メッセージ + ハッシュ関数」からHMAC値を作っています。
  4. 2つのHMAC値が同じであったら改竄されていないと判断する(下記Pythonのコード参照)
{
    ...省略...
    "headers": {
        ...省略...
        "x-hub-signature": "sha1=検証データ",
        "x-hub-signature-256": "sha256=検証データ"
    },
    ...省略...
    "body": "BODYに送ってくれた情報がある"
    ...省略...
}
# -*- coding: utf-8 -*-
from __future__ import print_function
import json, hmac, hashlib

def lambda_handler(event, context):
    # 送信者と受信者で秘密情報であるSecretの値
    secret = '3m@6vC5Y_mNwhhA'
    # GitHubから送られてきた情報にあったHMAC値
    sent_hmac = event['headers']['x-hub-signature-256']
    print('SHA-256ハッシュ関数用のHMAC値:' + sent_hmac)

    # Secretの値をbytes型に変換する
    secret_bytes = bytes(secret, 'utf-8')
    if (event['isBase64Encoded']):
        # bodyをbase64でデコードしてbytes型にする
        body_bytes = base64.b64decode(event['body'])
    else:
        # bodyをbytes型に変換する
        body_bytes = bytes(event['body'], 'utf-8')

    # 「Secret + メッセージ + ハッシュ関数」でHMAC値を作る
    created_hmac = 'sha256=' + hmac.new(secret_bytes, body_bytes, hashlib.sha256).hexdigest()
    print('自分で作ったHMAC値:' + created_hmac)

    # 2つのHMAC値が同じであったら改竄されていないと判断する
    if created_hmac == sent_hmac:
        print('HMAC値で認証できた!')
    else:
        print('認証できないHMAC値がGitHubから送られてきた!')

上記は以下の投稿で紹介しているコードを基にしていますので、ご興味のある方はご参照ください。 ponsuke-tarou.hatenablog.com

f:id:ponsuke_tarou:20210404142105j:plain
みどり湯の前にある公楽の酢豚は絶品

次回の勉強内容

ponsuke-tarou.hatenablog.com

はじめてのGoogle Analytics Reporting APIをNode.jsでちょっとだけ使ってみる

以前の投稿でGoogle AnalyticsGoogle Cloud Platformを設定してGoogle Analytics Reporting APIを使えるようにしました。

ponsuke-tarou.hatenablog.com

今回は、自分のQiitaのページにアナリティクスを設定、Qiitaページ用のサービスアカウントを作ったので、その情報をNode.jsを使ってAPIで取得してみたいと思います。 ちなみに、Node.jsは未経験です、ずぶのど素人です。

準備する

環境 : Windows10 Pro バージョン1909

  1. Node.jsをインストールする
  2. yarnをインストールする
  3. 作業用のディレクトリを作成する(ここ以降は下記のコードを参照)
  4. yarnの初期化する
  5. GoogleAPIのNode.js用ライブラリgoogle-api-nodejs-clientをインストールする
  6. Google Cloud Platformで作成したサービスアカウントの鍵ファイル(json)を格納するためのディレクトリを作成する
  7. 鍵ファイル(json)を格納する
# 作業用のディレクトリを作成する
$ mkdir google-analytics-api
$ cd google-analytics-api/

# yarnの初期化する
$ yarn init
...省略...
Done in 93.28s.

# GoogleAPIのNode.js用ライブラリgoogle-api-nodejs-clientをインストールする
$ yarn add googleapis
yarn add v1.22.10
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 31 new dependencies.
info Direct dependencies
└─ googleapis@68.0.0
info All dependencies
├─ abort-controller@3.0.0
...省略...
Done in 7.96s.

# Google Cloud Platformで作成したサービスアカウントの鍵ファイル(json)を格納するためのディレクトリを作成する
$ mkdir config

# 鍵ファイル(json)を格納する
$ ls config/
client_secrets.json

コードを書く

Google APIでの認証については、Analytics Reporting API - 承認  |  アナリティクス Reporting API v4が参考になります。

analytics.jsというファイルを作って以下のコードを書きました。

リクエストの内容についてはメソッド: reports.batchGet  |  アナリティクス Reporting API v4  |  Google Developersを見ながらしてする値を決めました。

const { google } = require('googleapis')

const KEY_FILE = './config/client_secrets.json' // 鍵ファイルのパスを指定する
const VIEW_ID = 'GoogleアナリティクスのViewID'

/**
 * Auth2.0認証をしてクライアントを取得する
 * @returns クライアント
 */
async function getAnalyticsreportingClient() {
  const client = await google.auth.getClient({
    keyFile: KEY_FILE,
    scopes: 'https://www.googleapis.com/auth/analytics.readonly'
  })
  const analyticsreporting = google.analyticsreporting({
    version: 'v4',
    auth: client
  })
  return analyticsreporting
}

/** Google Analyticsから情報を取得する */
async function getReporting() {
  const client = await getAnalyticsreportingClient()
  // 取得期間をyyyy-MM-dd形式で指定
  let dateRanges = [{startDate: '2021-03-19', endDate: '2021-03-30'}]
  const res = await client.reports.batchGet({
    requestBody: {
      reportRequests: [
        // 指定期間でのPV数TOP3のページを取得するリクエスト
        {
          viewId: VIEW_ID,
          dateRanges: dateRanges,
          dimensions: [{name: 'ga:pagePath'}], // ページ単位の情報を取得する
          metrics: [{expression: 'ga:pageviews'}, {expression: 'ga:avgTimeOnPage'}], // PV数と平均ページ滞在時間を取得する
          orderBys: {fieldName: 'ga:pageviews', sortOrder: 'DESCENDING'}, // PV数の降順でソートする
          pageSize: 3 // 3件分取得する
        },
        // 直近1週間での平均ページ滞在時間TOP3のページを取得するリクエスト
        {
          viewId: VIEW_ID,
          dateRanges: dateRanges,
          dimensions: [{name: 'ga:sourceMedium'}], // ページ単位の情報を取得する
          metrics: [{expression: 'ga:bounceRate'}, {expression: 'ga:avgTimeOnPage'}], // 直帰率と平均ページ滞在時間を取得する
          orderBys: {fieldName: 'ga:avgTimeOnPage', sortOrder: 'DESCENDING'}, // 平均ページ滞在時間の降順でソートする
          pageSize: 3 // 3件分取得する
        }
      ]
    }
  })
  // コンソールに取得内容を表示
  console.log(JSON.stringify(res.data))
}

getReporting()

Reporting APIを呼び出す

早速、ターミナルから実行してみます。本当はレスポンスが1行なのですが、見にくいので改行などを入れています。

$ node analytics.js
{"reports":[
  {
    "columnHeader":{"dimensions":["ga:pagePath"],"metricHeader":{"metricHeaderEntries":[{"name":"ga:pageviews","type":"INTEGER"},{"name":"ga:avgTimeOnPage","type":"TIME"}]}},
    "data":{"rows":[
      {"dimensions":["/ponsuke0531/items/4629626a3e84bcd9398f"],"metrics":[{"values":["1631","387.46666666666664"]}]},
      {"dimensions":["/ponsuke0531/items/df51a784b5ff48c97ac7"],"metrics":[{"values":["1160","601.5056179775281"]}]},
      {"dimensions":["/ponsuke0531/items/edf2eee638202aa7f61f"],"metrics":[{"values":["999","401.8253968253968"]}]}
    ],
    "totals":[{"values":["35429","382.3464974141984"]}],
    "rowCount":499,
    "minimums":[{"values":["1","0.0"]}],
    "maximums":[{"values":["1631","1679.0"]}]},
    "nextPageToken":"3"
  },
  {
    "columnHeader":{"dimensions":["ga:sourceMedium"],"metricHeader":{"metricHeaderEntries":[{"name":"ga:bounceRate","type":"PERCENT"},{"name":"ga:avgTimeOnPage","type":"TIME"}]}},
    "data":{"rows":[
      {"dimensions":["27.94.140.223:8080 / referral"],"metrics":[{"values":["0.0","1335.0"]}]},
      {"dimensions":["nekorokkekun.hatenablog.com / referral"],"metrics":[{"values":["0.0","996.0"]}]},
      {"dimensions":["zenn.dev / referral"],"metrics":[{"values":["0.0","909.0"]}]}
    ],
    "totals":[{"values":["86.22115384615384","382.3464974141984"]}],
    "rowCount":69,
    "minimums":[{"values":["0.0","0.0"]}],
    "maximums":[{"values":["100.0","1335.0"]}]},
    "nextPageToken":"3"
  }
]}

はじめてのGoogle Analytics Reporting APIをPythonとCloud9でちょっとだけ使ってみる

以前の投稿でGoogle AnalyticsGoogle Cloud Platformを設定してGoogle Analytics Reporting APIを使えるようにしました。

ponsuke-tarou.hatenablog.com

そのAPIを簡単に呼び出してみたいと思います。

今回は、どんなものが取得できるかをみてみたいだけなので簡易にReporting APIのドキュメントにあるクイックスタートのコードとAWSのCloud9を使います。

Pythonをそれほど知りません、が、大丈夫。なぜなら「実装」と呼べるほどのことはしません。ちょっと設定するだけです。

準備する

  1. はじめてのアナリティクス Reporting API v4: サービス アカウント向け Python クイックスタートからPythonのコード(HelloAnalytics.py)をダウンロードする
    • f:id:ponsuke_tarou:20210319103855p:plain
      ページに表示されているコードとダウンロードされるコードはちょっと違うことがあるのでダウンロードする方をお勧めします。
  2. Google AnalyticsでView IDを確認する
    1. Google Analyticsへログインする
    2. 管理 > 対象のアカウント選択 > 対象のプロパティ選択 > [ビューの設定]で画面を開く
      • f:id:ponsuke_tarou:20210319113817p:plain
    3. [基本設定] > [ビュー ID]に表示されたView IDをメモする
  3. AWSでCloud9の環境を作成する

f:id:ponsuke_tarou:20210401203012j:plain
文京区の大黒湯

Cloud9でコードを設定する

  1. Cloud9の環境を起動して表示する
  2. [File] > [Upload Local Files...]で以下のファイルをアップロードする
    1. サービスアカウントの鍵ファイル(json)
    2. ダウンロードしたクイックスタートのコードファイル(HelloAnalytics.py)
    3. f:id:ponsuke_tarou:20210319112312p:plain
  3. HelloAnalytics.pyを開く
  4. 上のほうにある以下の値を書き換える
    • <REPLACE_WITH_JSON_FILE> : サービスアカウントの鍵ファイル名(HelloAnalytics.pyと違う場所に配置した場合はそのパス)
    • <REPLACE_WITH_VIEW_ID> : Google AnalyticsのView ID

ライブラリをインストールする

GoogleAPIを呼び出すために必要なライブラリをインストールします。

Cloud9を使っている場合は必ず--userオプションを使用して自分の使うPythonに対してインストールします。 忘れるとModuleNotFoundError: No module named 'apiclient'となることがあるので注意してください。

# 認証に使うライブラリをインストールする
$ python -m pip install --user --upgrade oauth2client

# Google APIを使うためのライブラリをインストールする
$ python -m pip install --user --upgrade google-api-python-client

Reporting APIを呼び出す

あとはコードを実行するだけです。

HelloAnalytics.pyを表示した状態で画面上部の[Run]ボタンを押下すればGoogle AnalyticsからAPIで取得した情報が表示されます。

これを基にメソッド: reports.batchGetを見ながらコードのパラメータを変えてどんな情報が取得できるかを試していきたいと思います。 f:id:ponsuke_tarou:20210319115410p:plain

f:id:ponsuke_tarou:20210401203159j:plain
文京区の白山浴場

Google Analytics Reporting APIでの発生したリクエスト数を確認する

Google APIには、リクエスト数の制限があります。

Google アナリティクスは数多くのサイトで使用されています。Google では、処理能力を超える負荷がシステムにかからないようにすること、システム リソースが均等に配分されるようにすることを目的に、API リクエストに制限と割り当てを設けています。この制限と割り当ては変更されることがあります。

API リクエストの制限と割り当て - Google Developers

Analytics Reporting APIもタダで使えますが、リクエスト数に制限があるので制限を超えるとエラーコードが返却されるようになります。

Google Cloud Platformのプロジェクトでは「割り当て(1 日あたりの API リクエスト数など)」というものが設定できます。 割り当ての詳細は、割り当ての操作  |  ドキュメント  |  Google Cloudを参照してください。

f:id:ponsuke_tarou:20210325143452p:plain
プロジェクト全体の割り当ては[IAMと管理]画面で確認できます
f:id:ponsuke_tarou:20210325143653p:plain
APIの割り当ては[APIとサービス]画面で確認できます

Analytics Reporting APIのリクエスト数制限

API リクエストの制限と割り当て - Google Developersと上記割り当て(割り当ては初期値のまま)ではリクエスト数の単位がバラバラしていてわかりにくかったのでそれぞれの情報を表にして集めてみました。

単位 リクエスト数上限 参照元
プロジェクト 50,000件/日 [APIとサービス]の割り当て & API リクエストの制限と割り当て
プロジェクト 1,200件/分 [APIとサービス]の割り当て
プロジェクト 2,000件/100秒 API リクエストの制限と割り当て
ユーザー 1 人につきプロジェクトごとで 100件/100秒(1,000 件まで引き上げ可能)
10件/秒
API リクエストの制限と割り当て
ユーザー 600件/分 [APIとサービス]の割り当て
ビュー 10,000件/日(引き下げ不可) API リクエストの制限と割り当て
プロジェクトごとのリクエストの失敗(プロファイルあたり) 10件/時 かつ 50件/日 Reporting API のリクエスト エラーについて - API リクエストの制限と割り当て

表を見ていて気が付いたのは「1日単位の制限」を守っても「1秒や100秒単位の制限」を守らないとエラーになってしまうということでした。特定の時間にどっとリクエストがくるとエラーになる可能性があるのですね。

Google Analytics Reporting APIでの発生したリクエスト数を確認します。

リクエスト数に制限があるので、APIを使うアプリケーションを作る場合にどのくらいリクエスト数が発生するかを確認したいと思いました。

Google APIのリクエスト数は[APIとサービス]の[ダッシュボード]で確認できます。

API ダッシュボードを使用する

API 指標を表示する最も簡単な方法は、Google Cloud Console の API ダッシュボードを使用することです。すべての API の使用状況の概要を表示することも、特定の API の使用状況を詳細に調べることもできます。

API 使用状況のモニタリング - Google Cloud

  1. Google Cloud Platformにログインする
  2. 左上メニュー > [APIとサービス] > [ダッシュボード]で画面遷移する
    • f:id:ponsuke_tarou:20210325091840p:plain
  3. f:id:ponsuke_tarou:20210325092540p:plain
    表示したい期間を選択すると各Google APIでのリクエスト数が表示される

APIのリクエスト数を[割り当て]で詳しく確認します。

[ダッシュボード]ではAPI毎の「任意期間での合計リクエスト数」を確認できましたが、使っている特定APIのリクエスト数をもっと詳しく確認したい、そのんな時のことです。 例えば、今回はGoogle Analytics Reporting APIについて詳しく見てみます。

  1. [ダッシュボード]画面一覧表から[Analytics Reporting API]リンクで画面遷移する
    • f:id:ponsuke_tarou:20210325093715p:plain
  2. 左メニュー > [割り当て]で画面遷移する
    • f:id:ponsuke_tarou:20210325093911p:plain
  3. [Requests]の右にある「v」で詳細を表示 > プルダウンで[Requests1分あたり]を選択 > 表示期間を選択
    • f:id:ponsuke_tarou:20210325094402p:plain
  4. 表示される「平均」の期間は「表示期間」によって変わるようなので細かく見る場合は注意する
    • f:id:ponsuke_tarou:20210325100705p:plain
      「表示期間」が[1時間]の場合は「10秒での平均」
    • f:id:ponsuke_tarou:20210325100917p:plain
      「表示期間」が[30日]の場合は「3時間での平均」

各ユーザーのリクエスト数を[指標]で確認します。

[割り当て]画面の下には制限数の一覧表があります。 f:id:ponsuke_tarou:20210325095635p:plain

「Requests 1 分あたり /ユーザー」という行がとても気になります。

f:id:ponsuke_tarou:20210325103604p:plain
ユーザーごとのリクエスト数をみたいところですが[割り当て]では見られないようです

そこで探し回っていると、[割り当て]と同じくAnalytics Reporting APIの[指標]をから各ユーザーのリクエスト数が確認できました。

  1. [ダッシュボード]画面一覧表から[Analytics Reporting API]リンクで画面遷移する
  2. 左メニュー > [指標]で画面遷移する
  3. [Credentials]プルダウンで見たいユーザーを選択 > [OK]ボタン > 表示期間を選択
    • f:id:ponsuke_tarou:20210325121854p:plain
  4. f:id:ponsuke_tarou:20210325122418p:plain
    グラフの下にある[メソッド]の一覧にリクエスト数が表示される

1回のAPI呼出しにリクエストを複数指定してもリクエストは1回?

Analytics Reporting APIでは、1回のAPI呼出しにリクエストを5つまで含めることができます。

リクエストは最大で 5 つ送信できます。すべてのリクエストには、同じ dateRanges、viewId、segments、samplingLevel、および cohortGroup が含まれている必要があります。

メソッド: reports.batchGet  |  アナリティクス Reporting API v4  |  Google Developers

1回のAPI呼出しにリクエストを複数指定するとカウントアップされるリクエスト回数は何回なのでしょうか?

試しに1回のAPI呼出しに5リクエストを指定してみました。

f:id:ponsuke_tarou:20210330165458p:plain
実行前の[指標]ページ

  let dateRanges = [{startDate: '2021-03-29', endDate: '2021-03-30'}]
  const res = await client.reports.batchGet({
    requestBody: {
      reportRequests: [
        {
          viewId: VIEW_ID,
          dateRanges: dateRanges,
          dimensions: [{name: 'ga:pagePath'}],
          metrics: [{expression: 'ga:pageviews'}, {expression: 'ga:avgTimeOnPage'}],
        },
        {
          viewId: VIEW_ID,
          dateRanges: dateRanges,
          dimensions: [{name: 'ga:sourceMedium'}],
          metrics: [{expression: 'ga:bounceRate'}, {expression: 'ga:avgTimeOnPage'}],
        },
        {
          viewId: VIEW_ID,
          dateRanges: dateRanges,
          dimensions: [{name: 'ga:source'}],
          metrics: [{expression: 'ga:pageviews'}],
        },
        {
          viewId: VIEW_ID,
          dateRanges: dateRanges,
          dimensions: [{name: 'ga:browser'}],
          metrics: [{expression: 'ga:pageviews'}],
        },
        {
          viewId: VIEW_ID,
          dateRanges: dateRanges,
          dimensions: [{name: 'ga:country'}],
          metrics: [{expression: 'ga:pageviews'}],
        }
      ]
    }
  })

なんと1件しかカウントアップされませんでした。同じ期間などを条件にするのであればまとめてAPI呼出ししたほうがお得なのかもしれません。

f:id:ponsuke_tarou:20210330170215p:plain
実行後の[指標]ページ

とはいえGoogleのドキュメントにある以下の記載は気になるところです。

★注: バッチ処理で複数の Reporting API リクエストを 1 回のリクエストにまとめても、定められた割り当て量を超えるリクエストを実行することはできません。

Reporting API | API リクエストの制限と割り当て - Google Developers

バッチ処理」のリンク先がGoogle アナリティクス Management APIのGoogle アナリティクス API リクエストのバッチ処理になっているのでManagement APIを使った時のことなのかもしれませんが、実装の時には気をつけるポイントになりそうです。(Google アナリティクス Management APIを知らないのですが・・・)

はじめてのGoogle Analytics Reporting APIをちょっとだけ使ってみる

Google AnalyticsからAPIで情報を取得することになりました。

しかし、Google AnalyticsGoogle APIも使ったことがないので全く分かりません。

ここでは、調べながらはてなブログの情報をGoogle Analytics Reporting APIで取得するまでをやってみます。

Google Analyticsの設定をする

まずは、情報の基となるGoogle Analyticsを設定します。 今回は、このponsuke_taro's blogをGoogle Analyticsに設定して情報を蓄積できるようにします。

はてなブログ用のデータ解析をユニバーサル アナリティクスプロパティで作成する

参考 : Google Analyticsを導入する - はてなブログ ヘルプ

ユニバーサル アナリティクスは前世代の Google アナリティクスです。ユニバーサル アナリティクス プロパティと Google アナリティクス 4 プロパティとでは、使用できるレポートに違いがあります。

ユニバーサル アナリティクス プロパティ - アナリティクス ヘルプ

  1. (ない場合)Google アカウントの作成でアカウントを作成する
  2. お客様のビジネスに適した分析ツールとソリューション - Google アナリティクス を表示する
  3. [無料で利用する]ボタンで次の画面へ遷移し、[測定を開始]ボタンで設定画面を表示する
    • f:id:ponsuke_tarou:20210316135110p:plainf:id:ponsuke_tarou:20210316135148p:plain
  4. 「アカウント名」に何のアクセス解析かわかる名前を設定して[次へ]ボタンで進む
    • f:id:ponsuke_tarou:20210316135344p:plain
  5. 「プロパティ名」などの入力項目を設定して登録する
  6. [プロパティの設定]の下にある[詳細オプションを表示]リンクでユニバーサル アナリティクスプロパティの設定欄を表示して以下を設定して[次へ]ボタンで進む
    • ユニバーサル アナリティクス プロパティの作成 : ON
    • ウェブサイトの URL : 登録するはてなブログのURL
    • ユニバーサル アナリティクスのプロパティのみを作成する : ON
  7. [ビジネス情報]部分は任意で入力して[作成]ボタンで作成する
  8. [プロパティ]で作成したプロパティを選択 > [トラッキング情報] > [トラッキングコード] > [トラッキングID]をメモしておく
    • f:id:ponsuke_tarou:20210317210549p:plain

はてなブログにトラッキングIDを設定する

  1. はてなブログにログインしてダッシュボード管理画面を表示する
  2. [設定] > [詳細設定] > [解析ツール] > [Google Analytics 埋め込み]にメモしたGoogle AnalyticsのトラッキングIDを入力する
  3. ページ下の[変更する]ボタンで変更を確定する
  4. f:id:ponsuke_tarou:20210317212016p:plain
    お茶しながら数時間待つとGoogle Analyticsの画面にいろいろ表示され始める

Google Cloud PlatformでAPI使えるようにする

作成したはてなブログ用のデータ解析に溜まった情報をGoogle Cloud Platform(以降GCP)のAPIで取得できるように設定していきます。

Google Analytics Reporting APIを有効化する

まずは、Google Analytics Reporting APIを使えるように設定します。

  1. Google Cloud Platformにログインする
  2. (ない場合)プロジェクトを作成する
  3. GCP画面上部でプロジェクトを選択 > [APIとサービス] > [ライブラリ]
    • f:id:ponsuke_tarou:20210317215137p:plain
  4. Google Analytics API」を検索して、「Google Analytics Reporting API」を選択する
    • f:id:ponsuke_tarou:20210317220350p:plain
  5. [有効にする]ボタンでAPIを有効化する

3つ候補に出てきたAPIの違いがいまいちわからないので頑張った概要の和訳を記録として書いておきます。

API 概要の頑張った和訳
Google Analytics API Analyticsの設定およびレポートデータへのアクセスを提供します。
Google Analytics Reporting API Google Analyticsでレポートデータにアクセスするための最も高度なプログラム的方法です。Google AnalyticsレポートAPIを使用すると、カスタムダッシュボードを構築してGoogle Analyticsデータを表示したり、複雑なレポートタスクを自動化して時間を節約したり、Google Analyticsデータを他のビジネスアプリケーションと統合したりすることができます。
Google Analytics Data API Google Analyticsのレポートデータにアクセスします。

サービスアカウントを作成する

APIを利用するサービスアカウントを作成します。

サービス アカウントは IAM によって管理されるもので、人間のユーザー以外のものを指しています。App Engine アプリの実行や Compute Engine インスタンスとのやり取りなど、アプリケーション自体がリソースにアクセスする場合や、アクションを独自に実行する必要がある場合を対象としています。

認証の概要 | Google Cloud

  1. GCP画面上部でプロジェクトを選択 > サイドメニュー[APIとサービス] > [認証情報]
    • f:id:ponsuke_tarou:20210316112228p:plain
  2. [認証情報を作成]ボタン > [サービス アカウント]
    • f:id:ponsuke_tarou:20210316112518p:plain
  3. 「サービス アカウント名」「サービス アカウント ID」に任意の値を入力して[完了]ボタンでアカウントを作成する
    • f:id:ponsuke_tarou:20210316144819p:plain
  4. 一覧にある作成したアカウントの[操作] > [詳細を管理]で詳細画面を表示
    • f:id:ponsuke_tarou:20210316144906p:plain
  5. [キー]タブ > [鍵を追加] > [新しい鍵を作成]
    • f:id:ponsuke_tarou:20210316144932p:plain
  6. [キーのタイプ]で「JSON」を選択 > [作成]ボタンで作成して鍵ファイルをダウンロードする
    • ここでダウンロードする鍵ファイルは「再作成できない」「鍵があればサービスを使えてしまう」ので超大切に保管する
    • f:id:ponsuke_tarou:20210316145010p:plain

Google Analyticsで作成したサービスアカウントに権限を設定する

作成したアカウントがGoogle Analyticsにあるはてなブログの情報を取得できるように権限を設定します。

  1. Google Analyticsにログインする
  2. 管理 > 対象のアカウント選択 > [アカウントユーザーの管理]
    • f:id:ponsuke_tarou:20210316145208p:plain
  3. 右上の[+]ボタン > [ユーザーを追加]
  4. 以下を設定して[追加]ボタンで追加する
    • メールアドレス : 作成したサービスアカウントのサービスアカウントID(@以降も入力する)
    • 権限 : 表示と分析

Google Analytics Reporting APIを呼び出す

早速、Google Analytics Reporting APIを呼び出してみます。

PythonとCloud9でちょっとだけ使ってみる

ponsuke-tarou.hatenablog.com

メトリクスとディメンションって何?

レポートの作成  |  アナリティクス Reporting API v4  |  Google Developersで基本の使い方を見ていくとまずはmetricsdimensionsなるものに引っかかりました。

Web分析をやっている人には疑問に思わないことなのでしょうが、Google AnalyticsはおろかWeb分析的なことをやったことがないので「メトリクス」「ディメンション」が何なのかわかりません。

アナリティクスのレポートは、すべてディメンションと指標の組み合わせに基づいて構成されます。

ディメンションはデータの属性です。たとえば、ディメンション「市区町村」はセッションの性質を表し、「横浜」、「川崎」などセッションが発生した市区町村を指定します。ディメンション「ページ」は、閲覧されたページの URL を表します。

指標はデータを定量化したものです。指標「セッション」はセッションの合計数です。指標「ページ/セッション」は、セッションあたりの平均閲覧ページ数です。

ディメンションと指標 - アナリティクス ヘルプ

「メトリクス=量」「ディメンション=量の単位」みたいな感じです(正確には違うけど)。

「日単位のPV数を取得したい」だと「日」がディメンションで「PV数」がメトリクス・・・的な。

HelloAnalytics.pyのget_reportメソッドにあるパラメータをこんな感じに変えると・・・

※. ここのコードははじめてのGoogle Analytics Reporting APIをPythonとCloud9でちょっとだけ使ってみる - ponsuke_tarou’s blogで使ったものを基にしています。

# ...省略...
    'reportRequests': [
    {
        'viewId': VIEW_ID,
        'dateRanges': [{'startDate': '7daysAgo', 'endDate': 'today'}],
        # メトリクスにPVを指定
        'metrics': [{'expression': 'ga:pageviews'}],
        # ディメンションに日にちを指定
        'dimensions': [{'name': 'ga:date'}]
    }]
# ...省略...

こんな感じで「日単位のPV数」が取得できました。

ga:date:  20210316
Date range: 0
ga:pageviews: 411
ga:date:  20210317
Date range: 0
ga:pageviews: 845
ga:date:  20210318
Date range: 0
ga:pageviews: 787
ga:date:  20210319
Date range: 0
ga:pageviews: 498

メトリクスとディメンションで指定する値の意味が分からなくなりそうなので使ったものはメモしていきます。

dimensions 意味 レスポンス例
ga:date 日付 20210322
ga:pagePath ページ "/ponsuke0531/items/edf2eee638202aa7f61f"
ga:sourceMedium 参照元 "zenn.dev / referral"
ga:dimension{インデックス番号} カスタム ディメンション

どこかに日本語で一覧があったらいいのに・・・。

metrics 意味 type レスポンス例
ga:pageviews ページビュー数 INTEGER 1631
ga:avgTimeOnPage 平均ページ滞在時間(秒) TIME "387.46666666666664"
ga:bounceRate 直帰率 PERCENT "0.0"

Google APIには、リクエスト数の制限がありますので気をつけましょう。

遊びで使っているだけならいいのですが、お仕事で使う場合などにはAPIへのリクエスト数の制限がありますので気をつけましょう。

ponsuke-tarou.hatenablog.com

Node.jsでちょっとだけ使ってみる

ponsuke-tarou.hatenablog.com

1回のAPI呼出しで5こまでリクエストを送信できます

各リクエストには、別々のレスポンスが返されます。リクエストは最大で 5 つ送信できます。すべてのリクエストには、同じ dateRanges、viewId、segments、samplingLevel、および cohortGroup が含まれている必要があります。

リクエストの本文 | メソッド: reports.batchGet  |  アナリティクス Reporting API v4  |  Google Developers

こんな感じで1回のAPI呼出しで2このリクエストを送信してみました。

※. ここのコードははじめてのGoogle Analytics Reporting APIをNode.jsでちょっとだけ使ってみる - ponsuke_tarou’s blogで使ったものを基にしています。

  let dateRanges = [{startDate: '2021-03-19', endDate: '2021-03-30'}]
  // 1回のAPI呼出し
  const res = await client.reports.batchGet({
    requestBody: {
      reportRequests: [
        // 1こ目のリクエスト
        {
          viewId: VIEW_ID,
          dateRanges: dateRanges,
          dimensions: [{name: 'ga:pagePath'}],
          metrics: [{expression: 'ga:pageviews'}, {expression: 'ga:avgTimeOnPage'}],
          orderBys: {fieldName: 'ga:pageviews', sortOrder: 'DESCENDING'},
          pageSize: 3
        },
        // 2こ目のリクエスト
        {
          viewId: VIEW_ID,
          dateRanges: dateRanges,
          dimensions: [{name: 'ga:sourceMedium'}],
          metrics: [{expression: 'ga:bounceRate'}, {expression: 'ga:avgTimeOnPage'}],
          orderBys: {fieldName: 'ga:avgTimeOnPage', sortOrder: 'DESCENDING'},
          pageSize: 3
        }
      ]
    }
  })

レスポンスも2こ分返ってきました。(レスポンスは手ごろに改行しています。)

{"reports":[
  {
    "columnHeader":{"dimensions":["ga:pagePath"],"metricHeader":{"metricHeaderEntries":[{"name":"ga:pageviews","type":"INTEGER"},{"name":"ga:avgTimeOnPage","type":"TIME"}]}},
    "data":{"rows":[
      {"dimensions":["/ponsuke0531/items/4629626a3e84bcd9398f"],"metrics":[{"values":["1631","387.46666666666664"]}]},
      {"dimensions":["/ponsuke0531/items/df51a784b5ff48c97ac7"],"metrics":[{"values":["1160","601.5056179775281"]}]},
      {"dimensions":["/ponsuke0531/items/edf2eee638202aa7f61f"],"metrics":[{"values":["999","401.8253968253968"]}]}
    ],
    "totals":[{"values":["35429","382.3464974141984"]}],
    "rowCount":499,
    "minimums":[{"values":["1","0.0"]}],
    "maximums":[{"values":["1631","1679.0"]}]},
    "nextPageToken":"3"
  },
  {
    "columnHeader":{"dimensions":["ga:sourceMedium"],"metricHeader":{"metricHeaderEntries":[{"name":"ga:bounceRate","type":"PERCENT"},{"name":"ga:avgTimeOnPage","type":"TIME"}]}},
    "data":{"rows":[
      {"dimensions":["27.94.140.223:8080 / referral"],"metrics":[{"values":["0.0","1335.0"]}]},
      {"dimensions":["nekorokkekun.hatenablog.com / referral"],"metrics":[{"values":["0.0","996.0"]}]},
      {"dimensions":["zenn.dev / referral"],"metrics":[{"values":["0.0","909.0"]}]}
    ],
    "totals":[{"values":["86.22115384615384","382.3464974141984"]}],
    "rowCount":69,
    "minimums":[{"values":["0.0","0.0"]}],
    "maximums":[{"values":["100.0","1335.0"]}]},
    "nextPageToken":"3"
  }
]}

試しにリクエストの部分をコピペして6こリクエストを送信したらちゃんと以下のエラーになりました。

$ node analytics.js
(node:7580) UnhandledPromiseRejectionWarning: Error: There are too many requests in the batch request. The max allowed is 5
    at Gaxios._request (C:\path\google-analytics-api\node_modules\gaxios\build\src\gaxios.js:127:23)
    at process._tickCallback (internal/process/next_tick.js:68:7)
(node:7580) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:7580) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

JavaとSpringBootでちょっとだけ使ってみる(現在奮闘中)

さて、実際に使いたい環境でもやってみようと思ったら・・・そもそもPythonは使っていない・・・本当にぽんすけですね。 ということで今度はJavaを使ってSpring Bootの環境でやってみたいと思います。

  1. Spring Bootのプロジェクトを用意する
  2. クライアント ライブラリをインストールする

SpringのRestTemplateでAPIを呼び出す時にクエリパラメータをくっつける

RestTemplateでAPIを使うのにパラメータの設定方法を試しました。

はじめてSpring BootでRestTemplateを使ってAPIを呼び出すことになりました。

public class RestTemplate extends InterceptingHttpAccessor implements RestOperations

HTTP リクエストを実行する同期クライアント。JDK HttpURLConnection、Apache HttpComponents などの基盤となる HTTP クライアントライブラリ上でシンプルなテンプレートメソッド API を公開します。 RestTemplate は、頻度の低いケースをサポートする一般化された exchange および execute メソッドに加えて、HTTP メソッドによる一般的なシナリオのテンプレートを提供します。

RestTemplate (Spring Framework 5.3.4 API) - Javadoc

クエリパラメータは、必須でない場合に設定したりしなかったりと可変になりますが、どんな方法がいいのでしょう? クエリパラメータを設定するにはどんな方法がいいのか試してみることにしました。

e-StatのAPIをサンプルに使います。

サンプルに呼び出すAPIは、政府統計の総合窓口(e-Stat)−API機能統計表情報取得を使います。

パラメータには以下の値を設定します。

パラメータ名 意味 設定する値
appId アプリケーションID e-Statのサイトで取得したアプリケーションID
openYears 公開年月 202102
statsField 統計分野 0204(人口移動)
limit データ取得件数 1

ControllerをでAPIを呼び出しちゃいます。

Serviceとかで呼ぶ方がいいと思いますが、とにかくパラメータをくっつける練習としてControllerでAPIを呼び出します。

package com.example.demo.controller;

import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.client.RestTemplate;

import com.fasterxml.jackson.databind.JsonNode;

@RestController
@RequestMapping("/estat")
public class EstatController {
    private static final String URL = "http://api.e-stat.go.jp/rest/3.0/app/json";
    /** アプリケーションID. */
    private String appId = "02b...e-Statのサイトで取得したアプリケーションID";
    /** 公開年月. */
    private String openYears = "202102";
    /** 統計分野. */
    private String statsField = "0204";
    /** データ取得件数. */
    private String limit = "1";

    @GetMapping("/getStatsList")
    public JsonNode getStatsList() {
        RestTemplate restTemplate = new RestTemplate();
        ResponseEntity<JsonNode> response = // .....ここに呼び出しの処理を書いていきます.........
        JsonNode jsonNode = response.getBody();
        return jsonNode;
    }
}

f:id:ponsuke_tarou:20210309210009j:plain
文京区の大黒湯

クエリパラメータをくっつける

  • 環境
    • macOS Big Sur バージョン11.1
    • Eclipse IDE for Enterprise Java Developers Version: 2020-12
    • spring-web 5.2.12.RELEASE
    • openjdk version "15.0.1"

パラメータを1つ1つ設定する

public <T> ResponseEntity<T> getForEntity(String url, Class<T> responseType, Object... uriVariables) throws RestClientException
指定された URL で GET を実行して、エンティティを取得します。レスポンスは変換され、ResponseEntity に保存されます。

パラメーター:
url - URL
responseType - 戻り値の型
uriVariables - テンプレートを展開する変数

上記のgetForEntityを使って書きました。

@GetMapping("/getStatsList")
public JsonNode getStatsList() {
    RestTemplate restTemplate = new RestTemplate();
    // 1. getForEntityでクエリパラメータ一つ一つを設定して、APIを呼び出す.
    ResponseEntity<JsonNode> response = restTemplate.getForEntity(
        URL + "/getStatsList?appId={appId}&openYears={openYears}&statsField={statsField}&limit={limit}",
        JsonNode.class,
        appId, openYears, statsField, limit);
    JsonNode jsonNode = response.getBody();
    return jsonNode;
}

UriComponentsBuilderでパラメータを設定する

public <T> ResponseEntity<T> exchange(RequestEntity<?> entity, Class<T> responseType) throws RestClientException
指定された RequestEntity で指定されたリクエストを実行し、レスポンスを ResponseEntity として返します。通常、たとえば RequestEntity の静的ビルダーメソッドと組み合わせて使用されます。

パラメーター:
entity - リクエストに書き込むエンティティ
responseType - 戻り値の型

UriComponentsBuilderでパラメータを設定して、上記のexchangeAPIを呼び出しました。

queryParamでパラメータ名と値を設定する

public UriComponentsBuilder queryParam(String name, Object... values)
指定されたクエリパラメーターを追加します。パラメーター名と値の両方に、後で値から展開される URI テンプレート変数を含めることができます。値が指定されていない場合、結果の URI にはクエリパラメーター名のみが含まれます。"?foo=bar" の代わりに "?foo"。

パラメーター:
name - クエリパラメーター名
values - クエリパラメーター値

UriComponentsBuilderのqueryParamを使ってクエリパラメータを設定しました。

@GetMapping("/getStatsList")
public JsonNode getStatsList() throws URISyntaxException {
    RestTemplate restTemplate = new RestTemplate();
    // 1. エンドポイントからUriComponentsBuilderを作成する.
    UriComponentsBuilder builder = UriComponentsBuilder.fromUriString(URL + "/getStatsList");
    // 2. クエリパラメータを設定して文字列化する.
    String uri = builder.queryParam("appId", appId)
            .queryParam("openYears", openYears)
            .queryParam("statsField", statsField)
            .queryParam("limit", limit)
            .toUriString();
    // 3. パラメータを設定したURLからRequestEntityを作成する.
    RequestEntity<Void> requestEntity = RequestEntity.get(new URI(uri)).build();
    // 4. exchangeでAPIを呼び出す.
    ResponseEntity<JsonNode> response = restTemplate.exchange(requestEntity, JsonNode.class);
    JsonNode jsonNode = response.getBody();
    return jsonNode;
}

queryParamsでMultiValueMapを使って設定する

public UriComponentsBuilder queryParams(@Nullable MultiValueMap<String, String> params)
複数のクエリパラメーターと値を追加します。

パラメーター:
params - パラメーター

UriComponentsBuilderのqueryParamsを使ってクエリパラメータを設定しました。

1つのキーに複数の値を設定できるMap(org.springframework.util.MultiValueMap)

6.Spring3.0から追加された新しい部品の紹介 - soracane

MultiValueMapはよく使うMapとはちょっと違うもののようです。

@GetMapping("/getStatsList")
public JsonNode getStatsList() throws URISyntaxException {
    RestTemplate restTemplate = new RestTemplate();
    // 1. エンドポイントからUriComponentsBuilderを作成する.
    UriComponentsBuilder builder = UriComponentsBuilder.fromUriString(URL + "/getStatsList");
    // 2. Mapにクエリパラメータを設定する.
    MultiValueMap<String, String> params = new LinkedMultiValueMap<>();
    params.add("appId", appId);
    params.add("openYears", openYears);
    params.add("statsField", statsField);
    params.add("limit", limit);
    // 3. Mapでクエリパラメータを設定して文字列化する.
    String uri = builder.queryParams(params).toUriString();
    // ...これ以降は「queryParamでパラメータ名と値を設定する」と同じ...

f:id:ponsuke_tarou:20210309210051j:plain
文京区の白山浴場

AWSのSecrets Managerに大切な情報を登録する

認証に使うAPIキーやWebhookに設定したSecretなどをLambda関数で使うことがあります。これらは大切な情報なのでSecrets Managerに登録して、Lambda関数から取得して使うようにします。

  1. AWSのコンソール > [Secrets Manager]
  2. f:id:ponsuke_tarou:20210227080634p:plain
    [新しいシークレットを保存する]ボタンから作成画面を表示
  3. f:id:ponsuke_tarou:20210227081037p:plain
    各値を設定して[次へ]ボタン
    • シークレットの種類: APIキーや各種ユーザ情報などは「その他のシークレット」を選択
    • シークレットのペア: 大切な情報の名前(シークレットキー)と大切な情報の値を設定、複数設定してもOK
      • f:id:ponsuke_tarou:20201130160504p:plain
        例えばこんな感じです
    • 暗号化キー: DefaultEncryptionKey
  4. f:id:ponsuke_tarou:20210227082453p:plain
    「シークレットの名前」「説明とタグ(任意)」を設定して[次]ボタン
  5. f:id:ponsuke_tarou:20210227082652p:plain
    [自動ローテーションを無効にする]を設定して[次]ボタン
  6. [保存]ボタンでシークレットを作成する
    • f:id:ponsuke_tarou:20210227083015p:plain
      Secrets Managerからシークレットを取得するサンプルコードが表示されて超ありがたいです

f:id:ponsuke_tarou:20210227083225j:plain
板橋区の清水湯

AWSのSecrets Managerを使った事例

ponsuke-tarou.hatenablog.com

Lambdaの実行権限とAPI Gatewayを作成する

ポリシーがよくわからないのでちょっと勉強します。

f:id:ponsuke_tarou:20210222184408j:plain
板橋区赤塚の岩乃湯

IAMのポリシーを作成する

  1. AWSマネジメントコンソールにある[IAM] > サイドメニューの[ポリシー]
  2. [ポリシーの作成]ボタンで作成画面を開きます。
  3. [JSON]タブを開いて権限の設定内容を入力します。
  4. [次のステップ:タグ]ボタンから次の画面でタグを設定(設定しなくてもOK) > [次のステップ:確認]ボタン
  5. 確認画面へ遷移して[名前(必須)]と[説明(任意)]を入力します。
    • f:id:ponsuke_tarou:20191121094418p:plain
      確認画面
  6. [ポリシーの作成]ボタンでポリシーを作成して一覧画面に戻ります。

IAMのロールを作成する

  1. AWSマネジメントコンソールにある[IAM] > サイドメニューの[ロール]
  2. [ロールの作成]ボタンで作成画面を開きます。
  3. [AWSサービス] > [Lambda]を選択後に[次のステップ: アクセス権限]ボタンで次の画面を開きます。
    • f:id:ponsuke_tarou:20210222183543p:plain
  4. [Attach アクセス権限ポリシー]の[ポリシーのフィルタ]で作成したポリシーを検索して選択後に[次のステップ: タグ]ボタンで次の画面を開きます。
    • f:id:ponsuke_tarou:20210222183711p:plain
  5. [タグの追加 (オプション)]は任意なので設定せずに[次のステップ: 確認]ボタンで確認画面を開きます。
  6. [ロール名]を入力して[ロールの作成]ボタンでロールを作成して一覧画面に戻ります。

f:id:ponsuke_tarou:20210222184640j:plain
板橋区常盤台の岩の湯

Lambda関数を作る

実装を後回しにして関数だけ作ります。

  1. [AWS マネジメントコンソール]から[Lambda]の画面を開く
  2. [関数の作成]ボタンで作成画面を表示する
  3. [一から作成]を選択して以下を設定して[関数の作成]ボタンで関数を作成する
    • 関数名 : 任意の名前
    • ランタイム : 使いたいもの
    • 実行ロール : 既存のロールを使用する
    • 既存のロール : 作成したロールを選択

f:id:ponsuke_tarou:20210222190036p:plain

コードには初期コードがあるのでそのまま。実装はAPI Gateway作成後にやります。

import json

def lambda_handler(event, context):
    # TODO implement
    return {
        'statusCode': 200,
        'body': json.dumps('Hello from Lambda!')
    }

API Gatewayを作成する

作成する種類は上記の参考リンクを読んで決めました。

  1. [AWS マネジメントコンソール]から[API Gateway]の画面を開く
  2. [APIを作成]ボタンで[APIの作成]画面を表示する
    • f:id:ponsuke_tarou:20210222190405p:plain

HTTP APIで作成する

  1. [HTTP API]の[構築]ボタンで次の画面へ
    • f:id:ponsuke_tarou:20210222190727p:plain
  2. [統合を追加] > [Lambda] > [Lambda 関数]で作成したLambda関数を選択
  3. [API 名]に任意の名前を設定して[次へ]ボタンで[ルートを設定]画面へ
    • f:id:ponsuke_tarou:20210222190849p:plain
  4. 以下を設定して[次へ]ボタンで[ステージを定義]画面へ
    • メソッド : POST
    • リソースパス : /{Lambda関数名}
    • 統合ターゲット : {Lambda関数名}
    • f:id:ponsuke_tarou:20201119161434p:plain
  5. [ステージを追加]ボタンで以下を追加して[次へ]ボタンで[確認して作成]画面へ
    • ステージ名 : $default
    • 自動デプロイ : ON
    • f:id:ponsuke_tarou:20201119161459p:plain
  6. [作成]ボタンで作成する
    • f:id:ponsuke_tarou:20201119161603p:plain
  7. 「{Lambda関数名}のステージ」一覧の[URLを呼び出す]列に「呼び出しURL」が表示される
  8. curlコマンドを使ってAPI Gatewayを呼び出してAPI GatewayがLambda関数を呼び出せることを確認する
curlコマンドのオプション 意味
-X HTTPメソッドを指定する
-H HTTPヘッダを指定する
# Lambda関数の初期コードに書いてある「Hello from Lambda!」が返却される
$ curl -X POST -H 'Content-Type:application/json' {呼び出しURL}/{リソースパス}
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
}
100    20  100    20    0     0     50      0 --:--:-- --:--:-- --:--:--    50"Hello from Lambda!"

# 失敗例) 「リソースパス」をくっつけ忘れると「Not Found」になるので注意
$ curl -X POST -H 'Content-Type:application/json' {呼び出しURL}
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100    23  100    23    0     0    287      0 --:--:-- --:--:-- --:--:--   291{"message":"Not Found"}

Cloud9のPython環境を作る

最初「Cloud9を作成する」と書いて思いました。Cloud9を作っているのはAWSでぽんすけにそんな能力は塵ほどもありません。作るのは「Cloud9の環境」です。

Cloud9の環境を作る

  1. AWSのマネジメントコンソール > [Cloud9] > [Create enviroment]ボタン
    • f:id:ponsuke_tarou:20210220083300p:plain
  2. [Name]に環境名を入力 > [Next step]ボタン
  3. 設定項目を選択(VPCやSubnetも設定できる) > [Next step]ボタン
  4. 内容を確認 > [Create enviroment]ボタン > しばし待つ
    • f:id:ponsuke_tarou:20210220084539p:plain
  5. できた!
    • f:id:ponsuke_tarou:20210220084832p:plain

設定項目例

設定項目 設定値 参考になりそうなサイト
Environment type Create a new EC2 instance for environment (direct access)
Instance type t2.micro (1 GiB RAM + 1 vCPU)
Platform Amazon Linux 2
下の表を参考に決める
Amazon Linux は何系のディストリビューションに該当するのか – Amazon Web Service(AWS)導入開発支援
Cost-saving setting After 30 minutes(default) 【AWS Cloud9 の使い方】最初に覚えておくべき機能まとめ | 初心者向け完全無料プログラミング入門
Platform 似たようなOS デフォルトのPython
Amazon Linux RHEL5-6 / CentOS5-6 Python3.6
Amazon Linux 2 RHEL7 / CentOS7 Python3.7
Ubuntu Server Ubuntu わかったら書く

f:id:ponsuke_tarou:20210222174017j:plain
豊島区の山の湯

Pythonとpipのバージョンを設定する

Cloud9の環境によってPythonやpipのバージョンは違うので、使いたいバージョンに設定していきます。

f:id:ponsuke_tarou:20201207222034p:plain
右上歯車マークで設定を見られる

# Pythonのバージョンは3.8がいいな
$ python -V
Python 3.7.9

# pipも古いな・・・・
$ python -m pip -V
pip 9.0.3 from /usr/lib/python3.7/site-packages (python 3.7)

pyenv使ってバージョンをPython3.8にする

参考 : pyenvのインストール、使い方、pythonのバージョン切り替えできない時の対処法 - Qiita

# pyenvをGitHubからCloneする
$ git clone https://github.com/pyenv/pyenv.git ~/.pyenv
Cloning into '/home/ec2-user/.pyenv'...
remote: Enumerating objects: 67, done.
remote: Counting objects: 100% (67/67), done.
remote: Compressing objects: 100% (54/54), done.
remote: Total 18814 (delta 26), reused 20 (delta 7), pack-reused 18747
Receiving objects: 100% (18814/18814), 3.80 MiB | 16.20 MiB/s, done.
Resolving deltas: 100% (12760/12760), done.

# バージョンを確認する
$ ~/.pyenv/bin/pyenv --version
pyenv 1.2.23

# .bashrcに
$ vi ~/.bashrc
# PATHを通す & pythonの実行パスの差し替えられるように設定して、
$ cat ~/.bashrc | grep pyenv
export PATH="$HOME/.pyenv/bin:$PATH"
eval "$(pyenv init -)"
# 反映する
$ source ~/.bashrc

# PATHを確認して
$ printenv PATH | sed -e 's/:/:\n/g' | grep pyenv
/home/ec2-user/.pyenv/shims:
/home/ec2-user/.pyenv/bin:
# バージョンを確認する
$ pyenv --version
pyenv 1.2.23

# インストールできるPython3.8を確認する
$ pyenv install -l | grep 3.8.
  3.8.0
  3.8-dev
  3.8.1
  3.8.2
  3.8.3
  3.8.4
  3.8.5
  3.8.6
  3.8.7
  miniconda-3.8.3
  miniconda3-3.8.3
  miniconda3-3.8-4.8.2
  miniconda3-3.8-4.8.3
  miniconda3-3.8-4.9.2

# Python3.8.7をインストールする
$ pyenv install 3.8.7
Downloading Python-3.8.7.tar.xz...
-> https://www.python.org/ftp/python/3.8.7/Python-3.8.7.tar.xz
Installing Python-3.8.7...
WARNING: The Python bz2 extension was not compiled. Missing the bzip2 lib?
Installed Python-3.8.7 to /home/ec2-user/.pyenv/versions/3.8.7

# Yumをアップデートして、
$ sudo yum -y update
...省略...
Complete!
# PythonのインストールでWARNINGになった不足なものをインストールする
$ sudo yum -y install bzip2
Loaded plugins: extras_suggestions, langpacks, priorities, update-motd
229 packages excluded due to repository priority protections
Package bzip2-1.0.6-13.amzn2.0.2.x86_64 already installed and latest version
Nothing to do

# Python3.8に切り替える
$ pyenv versions
* system (set by /home/ec2-user/.pyenv/version)
  3.8.7
$ pyenv global 3.8.7

# 使いたいバージョンに設定できた!
$ python -V
Python 3.8.7
$ python -m pip -V
pip 20.2.3 from /home/ec2-user/.pyenv/versions/3.8.7/lib/python3.8/site-packages/pip (python 3.8)

f:id:ponsuke_tarou:20210222174238j:plain
北区滝野川の万理ラーメン

プロジェクト設定をする

  1. 歯車マーク > [Preferences] > [Project Settings]
    • f:id:ponsuke_tarou:20210223222945p:plain
  2. [Code Editor (Ace)]
    • [Soft Tabs]:ONにするとタブキーで指定された数のスペースが挿入される
    • [On Save, Strip Whitespace]:ONにすると保存でファイルから不要なスペースとタブを削除する
  3. [Python Support]
    • [Enable advanced (jedi) Python code completion]:ONにするとコードが補完を有効になる

基本のライブラリをインストールする

どこでも使いそうな以下をインストールしておきます。

ライブラリ 概要 参考になるサイト
wheel Pythonのパッケージの形式であるwheel(ホイール) Wheel vs Egg — Python Packaging User Guide ドキュメント
ikp3db Python3でデバックするのに使う ikp3db · PyPI
$ python -m pip install wheel
Collecting wheel
  Downloading wheel-0.36.2-py2.py3-none-any.whl (35 kB)
Installing collected packages: wheel
Successfully installed wheel-0.36.2

$ python -m pip install ikp3db
Collecting ikp3db
  Using cached ikp3db-1.4.1.tar.gz (24 kB)
Building wheels for collected packages: ikp3db
  Building wheel for ikp3db (setup.py) ... done
  Created wheel for ikp3db: filename=ikp3db-1.4.1-cp38-cp38-linux_x86_64.whl size=40854 sha256=ce8b91f29f673387c3b155c9c0d519803df67e34d7eaec552d11038c401203d2
  Stored in directory: /home/ec2-user/.cache/pip/wheels/32/db/4b/66c26f1ee8960dc38bf6d62a4d79eb91d8e360e7b1a7ca2137
Successfully built ikp3db
Installing collected packages: ikp3db
Successfully installed ikp3db-1.4.1

$ python -m pip list
Package    Version
---------- -------
ikp3db     1.4.1
pip        20.2.3
setuptools 49.2.1
wheel      0.36.2

Lambda関数をインポートする

Lambda関数をCloud9で実装していくためにCloud9の外部で作ったLambda関数をインポートします。

AWS Resourcesを使う場合

[AWS Resources]が表示されない場合は、設定をすることで表示することができます。Cloud9からAWS Resources消失 - Qiitaでやり方を確認してください。

  1. [AWS Resources] > [Lambda] > [Remote Functions] > 対象のLambda関数を選択して右クリック > [import...]
    • f:id:ponsuke_tarou:20210225085156p:plain
  2. f:id:ponsuke_tarou:20210225085459p:plain
    [Local Functions]に追加されました
  3. f:id:ponsuke_tarou:20210225085613p:plain
    [Enviroment]にも追加されました

AWS Toolkitを使う場合

  1. [AWS] > 対象のリージョン > [Lambda]
  2. f:id:ponsuke_tarou:20210223125857p:plain
    対象の関数を右クリックして[import...]でLambda関数をインポートする
  3. f:id:ponsuke_tarou:20210223215059p:plain
    [Enviroment]のビューを表示するとLambda関数名のディレクトリができている

Lambda関数用にモジュールをインストールする

Lambda関数用にモジュールをインストールする場合は、関数のディレクトリないにインストールします。そうすれば、インストールしたモジュールもろともLambda関数をデプロイすることができます。

# Lambdaのディレクトリに移動する
$ cd backlog_none_assignee/

# 場所を指定してパッケージをインストールする(ここではrequests)
$ python -m pip install --target=./ requests

# 仮想環境にインストールされているパッケージを確認する
$ pip freeze
certifi==2020.12.5
chardet==4.0.0
idna==2.10
requests==2.25.1
urllib3==1.26.3

とにかくやってみる!Vue.jsに突入し隊

※.このページの内容はとにかく急いで勉強しているので、正確でないことが多々あります。こんな奴いるんだ程度に見てください。

何が何だかわからないので、とにかくやってみます。

初めてすぎて何が何だかわかんない!から公式サイトの説明をそのまま実行してみます。

まずは、さっと基本情報をみておきます。

Node.jsは、JavaScriptをサーバでも動かせるすごい環境です。

Node.js はスケーラブルなネットワークアプリケーションを構築するために設計された非同期型のイベント駆動の JavaScript 環境です。

Node.js とは | Node.js

Vue.jsは、ユーザーインターフェイスを構築するためのフレームワークです。

Vue (発音は /vju:/、view と同様) は、ユーザーインターフェイスを構築するためのプログレッシブフレームワークです。他のモノリシックなフレームワークとは異なり、Vue は少しずつ適用していけるように設計されています。中核となるライブラリはビュー層だけに焦点を当てており、使い始めるのも、他のライブラリや既存のプロジェクトに統合することも容易です。

はじめに | Vue.js

プログレッシブフレームワークは、必要な時に必要な分だけ使えるようにしたフレームワークです。

プログレッシブフレームワークは,必要になった時に問題解決するライブラリを適宜導入して問題を解決するという姿勢を持っています。最初に始めるときは小さく,大規模になるにつれて適切なライブラリやツールを導入することで大きく対応できる柔軟性を持ちます。不必要な学習コストが発生することもありません。

第1回 プログレッシブフレームワーク Vue.js:Vue.js入門 ―最速で作るシンプルなWebアプリケーション|gihyo.jp … 技術評論社

f:id:ponsuke_tarou:20210131230209j:plain
豊島区の山の湯

Vue.jsをとにかくやってみる

とにかく突貫でやるので、Vue.jsはインストールせずにCDNを使います。

CDN

プロトタイピングや学習を目的とする場合は、以下のようにして最新バージョンを利用できます:

<script src="https://unpkg.com/vue@next"></script>

インストール | Vue.js

はじめに

はじめに | Vue.jsをやってみます。

ここで新しい属性が出てきました。v-bind 属性はディレクティブと呼ばれます。ディレクティブは Vue によって提供された特別な属性であることを示すために v- 接頭辞がついています。

はじめに | Vue.js

ひたすら読んで書き写して実行して各ディレクティブを体感しました。

ディレクディブ 意味 参考サイト
v-bind レンダリングされた DOM に特定のリアクティブな振る舞いを与える
v-on イベントリスナをアタッチしてインスタンスのメソッドを呼び出す
v-model フォームの入力とアプリケーションの状態を双方向にバインディングする
v-if ブロックを条件に応じて描画 条件付きレンダリング — Vue.js
v-for="要素 in 配列" 配列に基づいて、アイテムのリストを描画 リストレンダリング — Vue.j

アプリケーションインスタンス

dataのプロパティは、インスタンスが作成時に存在した場合にのみ リアクティブ (reactive) です。次のように新しいプロパティを代入すると:

vm.b = 'hi'

bへの変更はビューへの更新を引き起こしません。あるプロパティがのちに必要であることがわかっているが、最初は空または存在しない場合は、なんらかの初期値を設定する必要があります。

アプリケーションインスタンス | Vue.js

インスタンスのライフサイクル表がありました。頑張って覚えていきます。

https://v3.ja.vuejs.org/images/lifecycle.png

アプリケーションインスタンス | Vue.js

初めてPostmanを使ってみた記録

Postmanをインストールする

qiita.com

リクエストを整理するためのCollectionsを作成する

これからPostmanを使っていくといろんなリクエストを作ることになります。そんなたくさんのリクエストを整理するためのフォルダのようなものがCollectionです。

Postman's collection folders make it easy to keep your API requests and elements organized.

Postman Collections: Organize API Development and Testing

  1. [Cllections] > [+New Collection] > [Name]にAPIがわかるような名前を指定 > [Create]ボタンでCollectionを作成する
  2. 作成したCollectionの右にある[...] > [Add Folder] > [Name]にローカル環境がわかるような名前を指定 > [Create]ボタンでフォルダを作成する
    • f:id:ponsuke_tarou:20210119183924p:plain

f:id:ponsuke_tarou:20210124170932j:plain
栃木県下都賀郡壬生町のストロベリーガーデンロイヤルからお取り寄せ、1パック2400円なだけあって激ウマ!

Collectionsにリクエストを追加する

  • 環境
    • Windows10 Pro バージョン1909
    • Postmat v7.36.1

APIにつなぐには認証が必要です。認証に何を使うかAPIによって異なります。初めてのリクエストのサンプルとして、認証してトークンを取得します。

  1. 作成したフォルダの右にある[...] > [Add Request] > [Name]にやることがわかるような名前を指定 > [Save to {フォルダ名}]ボタンで作成する
    • f:id:ponsuke_tarou:20210119184456p:plain
  2. f:id:ponsuke_tarou:20210119185709p:plain
    HTTPメソッドで「POST」を選択 > APIトークンを取得するエンドポイントを入力する
  3. APIに合わせて[Parameters]や[Headers]を設定する
  4. [Send]ボタンでリクエストをおくると[Body]にレスポンスが表示される

環境変数を作成する

APIのURLやらユーザ名やらリクエストにはよく使うものがあります。そんなものは環境変数にして便利に使えるようにします。

  1. f:id:ponsuke_tarou:20210120132904p:plain
    画面右上のマークから環境設定ダイアログを表示する
  2. f:id:ponsuke_tarou:20210120132921p:plain
    [Add]ボタンから環境変数セットを追加できる
  3. f:id:ponsuke_tarou:20210120133303p:plain
    環境変数セットの名前と変数名と値を設定して[Add]ボタンで追加
  4. f:id:ponsuke_tarou:20210120133450p:plain
    環境変数セットの一覧が表示される
  5. f:id:ponsuke_tarou:20210120133902p:plain
    画面右上のプルダウンから作成した環境変数セットの名前を選択する
  6. URLやパラメータの値などで{{変数名}}の形式で記載すると設定した値が利用される
    • f:id:ponsuke_tarou:20210120134246p:plain
      変数名を途中まで入力すると候補が表示されるので便利

なお、INITIAL VALUE と CURRENT VALUE の違いですが、Postman のサーバに情報が送られるか否かになります。

チームでテストしていたり、複数台の PC でテストするときは INITIAL VALUE を使うと便利なのかもしれません。 ですが、検証用 PC は 1台しかないですし、私はボッチですしおすし。(・ω・) セキュリティを高めるためにもっ!CURRENT VALUE を使っています!!! セキュリティを高めるためだからねっ!(大事なことは二度言うスタイル)

Postman の環境変数を設定する - Qiita

任意のCllection専用に環境変数を設定できます。

Postman は変数を使うことができます。変数には Global/Collection/Environment 変数があり、Global は Postman 全体で利用できる変数。Collection は Collection レベルで参照できる変数。Environment は各 Environment(タブ)で利用できる変数です。

RESTサービスを触る際の必須ツールPostmanを使ってみました | エクセルソフト ブログ

  1. 作成したCollectionの右にある[...] > [Edit]でCollectionの設定ダイアログを開く
  2. [Variables]タブでCollection専用の環境変数を設定する
    • f:id:ponsuke_tarou:20210124153213p:plain
      接続する環境(サーバとかローカルとか)やAPI毎にCollectionを作っておくと接続先のURLを環境変数に入れて使えて便利です。

認証情報をリクエストにくっつける

APIにつなぐときに毎回認証情報が必要となることはよくあります。その認証情報をリクエストに自動でくっつけられるようにします。

リクエスト単位で認証を設定することもできますが、API単位でCollectionを作って、API単位で設定することもできます。どちらも[Authorization]タブで設定します。

ヘッダーにBearerトークンをくっつける

先ほどのように取得したトークンをリクエストに設定して認証できるようにします。

Postman を複数環境で使う場合にアクセストークン取得方法を簡略化する | Developers.IOを参考に設定していきます。

  1. トークンを取得した時と同じようにリクエストを追加する
  2. [Authorization]タブで設定する
  3. f:id:ponsuke_tarou:20210120135855p:plain
    [Type]ではトークンを取得する認証方法を選択する
  4. f:id:ponsuke_tarou:20210120142349p:plain
    トークンを取得するのに必要な情報やトークンを設定するヘッダ情報などを入力する
  5. f:id:ponsuke_tarou:20210120142534p:plain
    [Get New Access Token]ボタンでトークンを取得して[Proceed]ボタンで進む
  6. f:id:ponsuke_tarou:20210120142635p:plain
    [Use Token]ボタンでリクエストの設定に反映する
  7. f:id:ponsuke_tarou:20210120142712p:plain
    取得したトークンが[Access Token]に反映される

Bearerトークンを直接設定することもできるようですが、トークンの期限切れとなった時に手動で再設定するのは面倒くさいのでOAuth2.0で設定しました。

f:id:ponsuke_tarou:20210219120207p:plain
[Type]で「Bearer Token」を選択すれば直接トークンを設定できるようです

リクエスト単位ではなくCollection単位で認証を設定した場合は、各リクエストの[Authorization]タブの[Type]には「Inherit auth from parent」を設定します。

パラメータにAPIキーをくっつける

  • 環境
    • macOS BigSurバージョン11.1
    • Postman for Mac Version 8.0.5

認証情報によってはパラメータにくっつけることもあります。

例えば政府統計の総合窓口(e-Stat)APIではアプリケーションIDをappIdリクエストパラメータに毎回指定する必要があります。

APIを利用するには、アプリケーションIDを必ず指定する必要があります。利用登録を行い、アプリケーションIDを取得して下さい。

政府統計の総合窓口(e-Stat)のAPI 仕様 3.0版 | 政府統計の総合窓口(e-Stat)−API機能

Collection共通の認証設定としてe-StatのAPIへのリクエストにアプリケーションIDをくっつけます。

  1. f:id:ponsuke_tarou:20210212063720p:plain
    Collectionを選択して設定を開く
  2. f:id:ponsuke_tarou:20210212064124p:plain
    [Variables]で環境変数にアプリケーションIDを設定する
  3. f:id:ponsuke_tarou:20210212065832p:plain
    [Authorization]で[Type]に「API Key」を選択する
  4. 以下を設定して保存する
    • Key : appId(アプリケーションID用のパラメータ名)
    • Value : {{appId}}(設定した環境変数名)
    • Add to : Query Params
  5. f:id:ponsuke_tarou:20210212071023p:plain
    このCollectionのリクエストには自動でアプリケーションIDが設定されるようになった

f:id:ponsuke_tarou:20210124170009j:plain
板橋区の竹の湯

リクエストをAPIにおくる

ここまでで覚えたことを使っていろんなAPIを使ってみます。

パスパラメータを指定する

  • 環境 : macOS BigSurバージョン11.1 / Postman for Mac Version 8.0.5

ここではBacklogAPIのプロジェクトの状態一覧の取得 | Backlog Developer API | Nulabをやってみます。

パスパラメータはAPIのエンドポイントのパスに設定されるパラメータです。

URL /api/v2/projects/:projectIdOrKey/statuses

プロジェクトの状態一覧の取得 | Backlog Developer API | Nulab

「プロジェクトの状態一覧の取得」の場合はprojectIdOrKeyがパスパラメータになります。

Parameter Name Type Description
projectIdOrKey String Project ID or Project Key
  1. (事前準備)使っているBacklogでAPIキーを発行する
  2. Postmanを起動する
  3. Backlog用にCollectionsを作成する
    1. 環境変数を設定する
    2. API Key方式の認証を設定する(Backlogには他にも認証方法はあります。参考 : 認証と認可 | Backlog Developer API | Nulab)
      • TYPE : API Key
      • Key : apiKey
      • Value : {{API_KEY}}
      • Add to : Query Params
  4. URLとして{{URL}}/projects/:projectIdOrKey/statusesを入力するとパスパラメータの入力欄が表示される
    • f:id:ponsuke_tarou:20210219092258p:plain
  5. パスパラメータに取得したいプロジェクトIDを指定する
  6. [Send]ボタンでプロジェクトの状態一覧の取得 | Backlog Developer API | Nulabの「レスポンスボディ」みたいなのが取れるか確認する

配列形式のクエリパラメータを設定する

  • 環境 : macOS BigSurバージョン11.1 / Postman for Mac Version 8.0.5

Backlog APIを使って課題一覧の取得 | Backlog Developer API | Nulabをやってみます。

パラメータで配列を指定することがあります。例えばプロジェクトIDの配列する場合にはパラメータ名がprojectIdではなくprojectId[]となり[]がくっ付きます。

今回使ってみる「課題一覧の取得」ではクエリパラメータのに配列を指定します。

以下は「課題一覧の取得」クエリパラメータの一部です(出典 : 課題一覧の取得 | Backlog Developer API | Nulab)。[]がついているのが配列で、[]がついてないのが配列でないものです。

パラメーター名 内容
projectId[] 数値 プロジェクトのID
issueTypeId[] 数値 種別のID
...省略... ...省略... ...省略...
keyword 文字列 検索キーワード
  1. 使っているBacklogでAPIキーを発行する
  2. Postmanを起動し、Backlog用にCollectionsを作成して環境変数や認証情報を設定する
  3. 「課題一覧の取得」用のGETリクエストをCollectionに作成する
    • f:id:ponsuke_tarou:20210219083548p:plain
      URLは「{{URL}}/issues」にするだけでOK
  4. Query Paramsの[KEY]にprojectId[]を、[VALUE]に1つ目のプロジェクトIDを入力する
  5. 次の行に[KEY]にprojectId[]を、[VALUE]に2つ目のプロジェクトIDを入力する
    • f:id:ponsuke_tarou:20210219223307p:plain
  6. 他のクエリパラメータを設定する
  7. [Send]ボタンで課題一覧の取得 | Backlog Developer API | Nulabの「レスポンスボディ」みたいなのが取れるか確認する

 

セッションを設定する(ここは結果としてうまくいきませんでした、またいつか挑戦したいです。)

呼び出すAPIによっては、画面でログインしてそのセッションを設定て呼び出さねばならないことがあります。そんなときのやり方をやってみました。

Postman InterceptorをChromeに追加する

4. Interceptor(https://www.getpostman.com/docs/capture

Interceptor機能はChromeを利用して、ブラウザ内で発生したリクエストを自動でPostman Historyに登録する機能です。

Postman概要/インストール/使用方法 | TOAST Meetup

  1. Postman Interceptor - Chrome ウェブストアを表示する
  2. f:id:ponsuke_tarou:20210121120415p:plain
    [Chromeに追加]ボタンを押下
  3. f:id:ponsuke_tarou:20210121120552p:plain
    [拡張機能を追加]ボタンで追加する
  4. f:id:ponsuke_tarou:20210121120759p:plain
    拡張機能として追加される
  5. ピンマークを押下するChromeツールバーにアイコンが表示される
    • f:id:ponsuke_tarou:20210121143152p:plain

PostmanでリクエストとCookieをキャプチャする

  1. 右上にある衛星アイコンでダイアログを表示 > [Cokies] > [Install Interceptor Bridge]でInterceptor Bridgeをインストールする
    • f:id:ponsuke_tarou:20210121143944p:plain
  2. [Request] > [Source] > 「Interceptor」選択 > [Capture Requests] > ON > [Save Requests to] > 設定対象にしたいCollectionなどを設定
    • f:id:ponsuke_tarou:20210121144425p:plain
  3. [Cokies] > [Capture cookies] > ON > [Domains] > 対象のドメインを入力 > [Add Domain]ボタンで追加
    • f:id:ponsuke_tarou:20210121152016p:plain
  4. f:id:ponsuke_tarou:20210121152314p:plain
    Postmanで設定したらChromeのPostman Interceptorアイコンが連動して青くなる

https://assets.postman.com/postman-docs/Interceptor-ex1.gif Using Postman Interceptor | Postman Learning Center

画面からログインしてリクエストを送る

  1. 画面からログインする
  2. Postmanでリクエストを送る > APIには到達したが、うまくセッションを取得できず・・・

f:id:ponsuke_tarou:20210124170428j:plain
板橋区仲宿にある「かさま」

Sublime TextにターミナルとGit環境を作る

Windows

近いうちにやってみよう

f:id:ponsuke_tarou:20210121084324j:plain
世田谷区の駒の湯

Mac

Sublime Textでターミナルを使えるようにする

候補のプラグイン 難点 紹介しているサイト
TerminalView clearコマンドが使えない SublimeText3でターミナルを扱うプラグイン「TerminalView」 | プログラマーを目指す 「中卒」 男のブロ
Terminal 外部でターミナルを開く
WindowsPowerShellになる・・・GitBashがいい
Sublime Textから手軽にターミナルを開くことができるパッケージ「Terminal」の使い方

TerminalViewをインストールする

Sublime Textで完結したいのでTerminalViewをインストールしてみます。

  1. Command + Shift + P > 「install」を入力すると候補が出る > [Package Control: Install Package]選択
  2. 「TerminalView」を入力すると候補が出る > [TerminalView]選択してインストールするf:id:ponsuke_tarou:20210120085101p:plain
  3. ターミナルタブを起動する
  4. Command + Shift + P > 「terminal」を入力すると候補が出る > [Terminal View: Open Bash Terminal]選択f:id:ponsuke_tarou:20210120085113p:plain
  5. ターミナルタブが起動するf:id:ponsuke_tarou:20210120085409p:plain
    f:id:ponsuke_tarou:20210120204535p:plain
    ディレクトリを開いているとその場所をカレントディレクトリとして起動します

ショートカットキーを設定する

デフォルトのままだとコピペのショートカットが使えないのでCommand + CCommand + Vのように設定します。

  1. [Sublime Text] > [Preferences] > [Package Setting] > [TerminalView] > [Keybindings]
  2. Userに以下を貼り付けて保存する
[
    {"keys": ["command+n"], "command": "new_file", "context": [{"key": "setting.terminal_view"}]},
    {"keys": ["command+v"], "command": "terminal_view_paste", "context": [{"key": "setting.terminal_view"}]},
    {"keys": ["command+c"], "command": "terminal_view_copy", "context": [{"key": "setting.terminal_view"}]},
]

f:id:ponsuke_tarou:20210121081400p:plain ターミナル上でのショートカットが以下表のように変更されます。

ショートカット 意味
Command + N 新規ファイルを開く
Command + V 貼り付け
Command + C コピー

シェルをBashからZshに変える

TerminalViewのデフォルトはシェルがBashになっています。

使っているMacのターミナルはZshになっているので、合わせてZshにすることで設定(.zshrc)も同じものを読み込めます。

  1. Zshの場所を確認する
  2. Sublime TextでCommand + Shift + P > 「terminal」を入力すると候補が出る > [Terminal View: Palette Commands]選択
  3. User側に以下を記載 > 保存
  4. Command + Shift + P > 「zsh」を入力すると候補が出る > [Terminal View: Open Zsh Terminal]選択
  5. ターミナルタブがZshで起動するようになる
[
  {
    "caption": "Terminal View: Open Zsh Terminal",
    "command": "terminal_view_open",
    "args"   : {"title": "Terminal (zsh)", "cmd": "/bin/zsh -l"},
  },
]

f:id:ponsuke_tarou:20210120221428p:plain

ターミナルにGitのブランチを表示できるようにする

【macOS Catalina】MacのターミナルにGitブランチ名を表示させる | とむじそブログを参考にGitのブランチを表示できるようにします。

今回、こんな感じにしてみました。

# Gitのブランチをターミナルに表示する
autoload -Uz vcs_info
setopt prompt_subst
zstyle ':vcs_info:git:*' check-for-changes true
zstyle ':vcs_info:git:*' stagedstr "%F{magenta}!"
zstyle ':vcs_info:git:*' unstagedstr "%F{yellow}+"
zstyle ':vcs_info:*' formats "%F{cyan}%c%u[%b]%f"
zstyle ':vcs_info:*' actionformats '[%b|%a]'
precmd () { vcs_info }

# ターミナルの表示形式設定
PROMPT='
%F{green}%~%f:%B$vcs_info_msg_0_%b
$%f '

f:id:ponsuke_tarou:20210120222055p:plain

f:id:ponsuke_tarou:20210121083556p:plain
早速、リポジトリをクローンしてみました。

解決したい問題

  1. 実行した内容が画面からはみ出したら見られない・・・スクロールとかできない・・・不便。
  2. 全角文字が見えない入力できない・・・不便

f:id:ponsuke_tarou:20210121084229j:plain
世田谷区の藤の湯