What's New Qiita

20210105のNode.jsに関する記事は3件です。

  • 投稿日：2021-01-05T20:32:59+09:00

楽天ブックスゲーム検索APIから取得した情報を元に愛らしい？キャラ達に記事を書かせてワードプレスに自動投稿する

楽天ブックスゲーム検索APIから取得した情報を元に愛らしい？キャラ達に記事を書かせてワードプレスに自動投稿する

はじめに

筆者はApple信者ならぬ

ニンテンドー信者です。
ニンテンドースイッチのソフトの発売予定は欠かさずチェックしています。
しかしながらゲームの発売日を忘れてしまうことが多々あります。

　
そこで『楽天ブックスゲーム検索API』を活用して、情報をすかさずチェックしていこうと思います。

　
しかし・・・
APIで情報を取得した後にどこかに情報をアウトプットしなければいけません。

　
そこで、以前お勉強用に構築して
すでに放置してしまっているワードプレスに情報をアウトプットしようと思います。
　
ただワードプレスにアウトプットするのであれば記事になっていないといけないので
今回はBOTに自動で記事を書かせて、ワードプレスに記事を自動で投稿していこうと思います。

　

参考用

完成品はこちら。　
自分のための自分用情報サイト
なかなか突き抜けたものができてしまった・・・。
https://gayaneko.com/
　
　

前提

・収益を目的とはしていないので、そういった設計は皆無。
・ニンテンドーが好きだ！
・WPの勉強にもなるのでとりあえずやってみよう　といったレベル。
・構築時間は2時間くらいです(記事の作成は3時間くらい)

　

必要なもの

構築済のワードプレス
https://ja.wordpress.org/

楽天ブックスゲーム検索API
https://webservice.rakuten.co.jp/api/booksgamesearch/

WP API
https://ja.wp-api.org/

BOT環境
node.js
※言語は何でも良い。RESTを叩きまくるだけなのでExcel VBAでもいいくらいだけど、日時で自動で動かしたいのでnodeにした。

　

楽天ブックスゲーム検索APIとは

楽天ブックスゲーム検索APIは、楽天ブックスで販売されているゲームの情報を取得することが可能なAPI。
APIのテストページが面白いよ！
https://webservice.rakuten.co.jp/explorer/api/BooksGame/Search/　
　
　
　

WP APIとは

ワードプレスのAPIで『https://<ドメイン>/wp-json/wp/v2/』から始まるURLにRESTでリクエストを投げて
・記事を取得したり
・記事を投稿したりできる。

　
　
　

完成イメージ

完成品は以下のような感じです。
画伯なキャラ達がかけあいをしたあとにその日に発売するゲームを淡々と紹介していく
ただそれだけです。

キャラ達の会話パターンはランダムで生成していますが
パターンが少ないので徐々に増やしていく。

あとデザインが適当すぎるのでそのうち整える。

image.png

　　
　

APIの準備

楽天APIの準備

楽天APIの準備はとても手軽です。
下記のURLからいきなり『作ろう』に行ってもいいんですが、せっかくなので『探そう』『試そう』をやってからが良いかと思います。

https://webservice.rakuten.co.jp/guide/#howToDevelop

　
楽天APIの準備はこれだけです。　

image.png

楽天APIの準備

楽天APIの準備はとても手軽です。
下記のURLからいきなり『作ろう』に行ってもいいんですが、せっかくなので『探そう』『試そう』をやってからが良いかと思います。

https://webservice.rakuten.co.jp/guide/#howToDevelop

　
『作ろう』から自分用のアプリIDを発行したら準備完了です。
楽天APIの準備はこれだけです。　 リファレンスも豊富だし、実に簡単で親切です。

image.png

WP APIの準備

これがなかなかわかりづらいんですがググると

・APIの認証の認証のやり方がいくつかある
・プラグインが必要
・Apacheの設定変更が必要
・なんか色々必要

・・・と出てくるんですが個人利用なので、今回は前準備が少ないBasic認証で進めることにしました。
自分が行った手順は以下の通り

　

BOT用のユーザーを作成（権限は投稿者）

image.png

BOT用のユーザーの設定画面から新しいアプリケーションパスワード名を設定

image.png

　
　

パスワード名を作成するとパスワードが表示されるのでこれを控えます。

※このタイミングでしか控えることができません。　控え忘れたらパスワード名を消して作り直しましょう。
image.png

　
　

BOT用ユーザーのメールアドレスとパスワードをBase64変換します。

※このタイミングでしか控えることができません。　控え忘れたらパスワード名を消して作り直しましょう。

以下は例
　メールアドレスが以下だとする
　botbotbotbotbotbotbotbot@gmail.com

　パスワードが以下だとする
　bU1l Iv1r Hku9 CJfH f4Td 46I5

　
上記のメールアドレスとパスワードを例にBase64でキーを作成します。

　メールアドレスとパスワードをコロンでつなぎます
　botbotbotbotbotbotbotbot@gmail.com:bU1l Iv1r Hku9 CJfH f4Td 46I5

　これを以下のようにBase64化します
　image.png

　今回は　@segur 様の記事を参考にキーを作成してみました。
　https://qiita.com/segur/items/80a8f2e8642aedf83ae2

　これでWP APIにアクセスするためのキーは完成しました。

　
　

WP APIにアクセスできるようにワードプレスの設定変更します

設定からパーマリンク設定にいきます

image.png

　
共通設定が基本になっているとAPIに接続できないため、API以外に変更します

image.png

これでワードプレスのAPIの準備も完了です。

BOTの作成

全量を書いていくととても長くなるので要点だけ紹介します。

requireは『sync-request』『date-utils』

RESTをとにかく投げまくるので、『sync-request』でソースが散らからないようにします。
発売日がキーワードなので『date-utils』も重要です。

const request = require('sync-request');
require('date-utils');

　
　

楽天APIでゲーム情報を取得する処理

楽天APIはめちゃくちゃ簡単です。

テスト画面でURLを自動生成できるのでそれをベースにします。
https://webservice.rakuten.co.jp/explorer/api/BooksGame/Search/

  for(var page = 1; page < 15; page++){
    if(!searchEnd){
      const URI = 'https://app.rakuten.co.jp/services/api/BooksGame/Search/20170404?format=json&hardware=Nintendo%20Switch&booksGenreId=006&sort=-releaseDate&applicationId=＊＊＊＊＊＊＊&page='+page;
      console.log(URI);

      var response = request('GET', URI);
      responseBody = JSON.parse(response.body);

今回使用したパラメータ
ページは1ページから15ページまで検索します。
image.png

JSONの中身もテストページから確認できます。
image.png

　

WPに情報をポストする処理

// WPに情報をポストする 
// dt 投稿日付
// title ブログタイトル
// content ブログの本文
//
function wpPost(dt,title,content){
    var headerJson;
    headerJson =  {"Content-Type": "Application/json","Authorization":"Basic Ym90Ym90Ym90Ym90Ym90Ym90Ym90Ym90QGdtYWlsLmNvbTpiVTFsIEl2MXIgSGt1
OSBDSmZIIGY0VGQgNDZJNSANCg0K"}; // Authorization":"Basic のあとにBase64で作成したキーをくっつける
    var bodyJson;
    bodyJson =   {
      "date":dt,
      "title":title,
      "content":content,
      "status":"publish", // すぐに公開
      "categories":"14",  // ブログのカテゴリ の環境だとカテゴリID14はニンテンドースイッチ
      "featured_media": getRimage() // ブログのイメージIDのURL 関数でいくつか用意したイメージIDをランダムで取得
    };
    var response = request(
      'POST',
      'https://********/wp-json/wp/v2/posts',{  // ****は投稿先のWPのドメイン
      headers: headerJson,
      json: bodyJson
     });
    console.log(response);

}

　
　

キャラ達の掛け合いを作成する処理の一例

// 吹き出し(右)作成
function createFukidashiR(serihu){
  var result = "";  
  result = result + '<br>';
  result = result + '<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-10 sbs-flat sbp-r sbis-cb cf block-box"><div class="speech-person"><figure class="speech-icon"><img src="/wp-content/uploads/2020/12/neko1.png" alt="ビビニャン" class="speech-icon-image"/></figure><div class="speech-name">ビビニャン</div></div><div class="speech-balloon"><!-- wp:paragraph -->';
  result = result + '<p>'+serihu+'</p>';
  result = result + '<!-- /wp:paragraph --></div></div>';
  return result;
}

　

　

ゲーム情報作成

// ゲーム情報作成
function createGameInfo(title,image,maker,price,info,url){
  var result = "";  
  result = result + '<br><br>';
  result = result + '<table>';
  result = result + '<tbody>';
  result = result + '<tr><td colspan="2"><h2>'+title+'</h2></td></tr>';
  result = result + '<tr>';
  result = result + '<td rowspan="3"><img  src="'+image+'"></td>';
  result = result + '<td>'+maker+'</td>';
  result = result + '</tr>';
  result = result + '<tr><td><span style="font-weight: bold;color: #BF0000;">'+price.toLocaleString()+'</td></tr>';
  result = result + '<tr><td><textarea rows="10" cols="20" id="text" style="overflow-y:scroll;">'+info+'</textarea></td></tr>'
  result = result + '<tr><td colspan="2"><a href="'+url+'" target="_blank" ><img style="float: right; margin: 115.8em 151 151em 551em;" src="/wp-content/uploads/2021/01/rakuten.png"></a></td></tr>';
  result = result + '</tbody></table>';
  return result;
}

　
　

ブログ記事の作成と投稿

一応過去の日付を指定して投稿もできるようにしてある。

// ブログ投稿
function startPost(){
  // 自動で日付指定する場合
  //const dateWa = dt.toFormat("YYYY年MM月DD日");
  // 日付を指定する場合
  const dateWa = '2020年12月24日'
  // WP用の日付に変換する
  var wpDate = getWPDate(dateWa);
  // コンソール出力
  console.log('start!' + dateWa +'の情報');
  // ワードプレスに送信するコンテンツ
  var wpcontent = "";
  // タイトル作成
  var blogTitle = createTitle(dateWa);
  // 見出し作成
  wpcontent += createMidashi(dateWa);
  // 右にいる人のセリフ
  wpcontent += createFukidashiR(getRTsukamiSerihu(dateWa));
  // 左にいる人のセリフ
  wpcontent += createFukidashiL(getLkaeshiihu());
  // 右にいる人のセリフ
  wpcontent += createFukidashiR('おお！　よろしく頼むよ～');
  // ゲーム情報を取得する
  const rakuteGameInfo = getRakuteGameInfo(dateWa,wpDate);
  // WPに投稿する
  if(rakuteGameInfo != undefined){
    // 投稿できる情報がある場合
    console.log('送信');
    wpcontent += rakuteGameInfo;
    wpPost(wpDate,blogTitle,wpcontent);
  } else {
    // 投稿できる情報がない場合
    console.log('未送信');    
  }
}

課題

さっきも書いたけど
・いつかデザインを整える
・キャラ達の会話の種類とパターンを増やす
・会話をマルコフ連鎖で自動生成してみるのも面白いかも。

　
　

完成品

image.png

image.png

image.png

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-01-05T15:26:53+09:00

nodebrew による Node.js の利用

はじめに

Node.js 、および、バージョン管理システムとして nodebrew を使う場合を説明します。
これまで多くの人の解説と変わりありません。ここでは、わたしなりにまとめてみます。

利用のコンピュータ環境

$ sw_vers
ProductName:    macOS
ProductVersion: 11.1
BuildVersion:   20C69
$

nodebrewのインストール前に

すでにインストール済みの node.js と npm をアンインストールする。

たとえば、インストーラーでインストールしていた場合は次の２つのコマンドでアンインストールできる。

$ lsbom -flspf /var/db/receipts/org.nodejs.*.pkg.bom \
| while read i; do
  sudo rm /${i}
done

$ sudo rm -rf \
/usr/local/lib/node \
/usr/local/lib/node_modules \
/var/db/receipts/org.nodejs.*

Homebrewのインストール

macOS（またはLinux）用パッケージマネージャー Homebrew を使えるようにする。

$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

通常は上述の１行コマンドで Homebrew を利用できるようになる。
私の場合、Homebrew を入れ直そうとしたとき、次のコマンドの実行を促されたので実行した。

$ git -C /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core fetch --unshallow
$ brew update

インストールできたか、以下のように確認できる。
もし、エラーメッセージが表示される場合は再インストール等を検討しましょう。

$ brew --version
Homebrew 2.7.1-125-gd820c9a
Homebrew/homebrew-core (git revision 8b711; last commit 2021-01-05)
Homebrew/homebrew-cask (git revision 5c3de; last commit 2021-01-04)
$ brew
Example usage:
  brew search [TEXT|/REGEX/]
  brew info [FORMULA...]
  brew install FORMULA...
  brew update
  brew upgrade [FORMULA...]
  brew uninstall FORMULA...
  brew list [FORMULA...]

Troubleshooting:
  brew config
  brew doctor
  brew install --verbose --debug FORMULA

Contributing:
  brew create [URL [--no-fetch]]
  brew edit [FORMULA...]

Further help:
  brew commands
  brew help [COMMAND]
  man brew
  https://docs.brew.sh
$

nodebrew のインストール

homebrew によって nodebrew をインストールする。
次のコマンドを実行：

$ brew install nodebrew

インストール後、セットアップコマンドを実行する必要があります。

$ nodebrew setup
Fetching nodebrew...
Installed nodebrew in $HOME/.nodebrew

========================================
Export a path to nodebrew:

export PATH=$HOME/.nodebrew/current/bin:$PATH
========================================
$

利用しているシェルに応じて、bashなら~/.bash_profile 、zshなら~/.zprofileに次を追加：

export PATH=$PATH:$HOME/.nodebrew/current/bin

zshの場合、

$ echo 'export PATH=$PATH:$HOME/.nodebrew/current/bin' >> ~/.zprofile

これを反映させる（zshの場合）

$ source ~/.zprofile

これで設定完了。

インストールできたら、nodebrew コマンドを実行してみます。

$ nodebrew

nodebrew 1.0.1

Usage:
    nodebrew help                         Show this message
    nodebrew install <version>            Download and install <version> (from binary)
    nodebrew compile <version>            Download and install <version> (from source)
    nodebrew install-binary <version>     Alias of `install` (For backword compatibility)
    nodebrew uninstall <version>          Uninstall <version>
    nodebrew use <version>                Use <version>
    nodebrew list                         List installed versions
    nodebrew ls                           Alias for `list`
    nodebrew ls-remote                    List remote versions
    nodebrew ls-all                       List remote and installed versions
    nodebrew alias <key> <value>          Set alias
    nodebrew unalias <key>                Remove alias
    nodebrew clean <version> | all        Remove source file
    nodebrew selfupdate                   Update nodebrew
    nodebrew migrate-package <version>    Install global NPM packages contained in <version> to current version
    nodebrew exec <version> -- <command>  Execute <command> using specified <version>

Example:
    # install
    nodebrew install v8.9.4

    # use a specific version number
    nodebrew use v8.9.4
$

現在の node.js インストール状態を見る。

$ nodebrew ls              
not installed

current: none
$

以上から node.js のインストールがまだされていない状態を示している。

Node.js のインストール

インストール可能なバージョン一覧を表示

$ nodebrew ls-remote
v0.0.1    v0.0.2    v0.0.3    v0.0.4    v0.0.5    v0.0.6    

・・・省略・・・

v14.14.0  v14.15.0  v14.15.1  v14.15.2  v14.15.3  v14.15.4  

v15.0.0   v15.0.1   v15.1.0   v15.2.0   v15.2.1   v15.3.0   v15.4.0   v15.5.0
v15.5.1   

・・・省略・・・

io@v3.0.0 io@v3.1.0 io@v3.2.0 io@v3.3.0 io@v3.3.1 
$

たとえば、現行のLTS版 v14.15.4 をインストールする場合は次のとおり：

$ nodebrew install v14.15.4
Fetching: https://nodejs.org/dist/v14.15.4/node-v14.15.4-darwin-x64.tar.gz
################################################################################################################################################## 100.0%
Installed successfully
Mocha:~ akinori$ nodebrew ls
v14.15.4

current: none
$ node
-bash: node: command not found
$

current: none なので、インストールしただけで、まだ使えない。

node.js のバージョン切り替え

インストールしたバージョンの node を使う

$ nodebrew use v14.15.4
use v14.15.4
$ nodebrew ls
v14.15.4

current: v14.15.4
$ node -v
v14.15.4
$ npm -v
6.14.10
$

node.js, npm のインストール完了。

install コマンドを使って、複数のバージョンをインストールし、use コマンドで今利用するバージョンを指定する、という使い方ができる。

node.jsの特定バージョンのアンインストール

v14.15.4 をアンインストールする。

$ nodebrew unsinstall v14.15.4

参考

nodebrew github
https://github.com/hokaccha/nodebrew

node.js のインストール・アップデート・バージョン切替えの手順（nodebrew、Mac）
https://qiita.com/oreo3@github/items/622fd6a09d5c1593fee4

【Mac版】node.jsのアンインストールと再インストール手順メモ
https://qiita.com/wagi0716/items/94193a80502f9d81a9e0

Homebrew
https://brew.sh/index_ja

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-01-05T00:09:03+09:00

GoogleAPIをNode.jsから叩いてみた

今更ながら、GoogleAPIをNode.jsから触ってみます。
Google Drive、Gmail、Google Calendar、Googleフォトなど、皆さんgoogleサービスにお世話になっているのではないでしょうか。
ちゃんと、APIも提供されていて、npmモジュールもあるので、今後もいろいろ使えるかもしれません。
本人認証して簡単なリスト表示をするところまでですが、後はリファレンスを見れば拡張できるかと思います。

GitHubに上げておきます。

poruruba/GoogleApiSample
　https://github.com/poruruba/GoogleApiSample

参考情報

googleapis/google-api-nodes-client
　https://github.com/googleapis/google-api-nodejs-client

Google Cloud Platform Console
　https://console.cloud.google.com/

Google CalendarのQuickStart
　https://developers.google.com/calendar/quickstart/nodejs

Google DriveのQuickStart
　https://developers.google.com/drive/api/v3/quickstart/nodejs

Google PhotoのQuickStart
　https://developers.google.com/photos/library/guides/get-started

GmailのQuickStart
　https://developers.google.com/gmail/api/quickstart/nodejs

Google SheetのQuickStart
　https://developers.google.com/sheets/api/quickstart/nodejs

GCPのプロジェクトの作成

まずは、Google Cloud Platformのプロジェクトを作成します。すでに作成済みの場合はそれを使ってもよいです。

　https://console.cloud.google.com/projectcreate

image.png

プロジェクト名は適当に「SampleProject」としておきます。
Googleアカウント認証は、GoogleのサーバとOAuth2プロトコルで認証しますので、OAuth2のクライアントIDを作成します。
左上のメニューのAPIとサービスの認証情報を選択します。

image.png

次に、上の方にある「＋認証情報を作成」をクリックし、OAuthクライアントIDを選択します。
アプリケーションの種類には、「ウェブアプリケーション」を選択します。
名前は適当に「GoogleApiSample」とでもしておきます。

image.png

そして、承認済みのJavascript生成もとには、これから立ち上げるサーバのURLを指定します。
例えば、https://hogehoge:10443 という感じです。
承認済みのリダイレクトURIには、これから立ち上げるWebページのURLを指定します。
こんな感じで作る予定です。https://hogehoge:10443/googleapisample/signin.html

作成できたら、クライアントIDとクライアントシークレットを覚えておきます。

利用するGoogleAPIを有効化

これから、先ほど作ったプロジェクトで、Google Drive、Gmail、Google Calendar、Google Photoを使えるように有効化します。
左上のメニューから、APIとサービス→ライブラリ を選択します。

image.png

検索入力のところに、driveと入力します。

image.png

そうすると、Google Drive APIが見つかりますので選択し、「有効にする」ボタンを押下します。

image.png

同様に、Gmail、Google Calendar、Google Photoも有効にします。

サーバを立ち上げる

とりあえず、GitHubにもろもろを上げておいたのでそれを展開します。

https://github.com/poruruba/GoogleApiSample

$ unzip GoogleApiSample-main.zip
$ cd GoogleApiSample-main
$ mkdir cert
$ npm install

HTTPSで立ち上げる必要があり、certフォルダにSSL証明書のファイルを配置します。
Let’s Encryptの場合は、cert.pem、chain.pem、privkey.pemです。

起動の前に、各環境に合わせて変更する必要があります。

「public/googleapisample/js/start.js」
以下の2か所を修正します。

/public/googleapisample/js/start.js
const GOOGLE_REDIRECT_URL = 'https://【サーバのホスト名】:10443/googleapisample/signin.html';
const AUTHORISE_URL = 'https://【サーバのホスト名】:10443/gapi/authorize';

「api/controllers/gapi/index.js」
以下の3か所です。

/api/controllers/gapi/index.js
const GOOGLE_CLIENT_ID = process.env.GOOGLE_CLIENT_ID || '【クライアントID】';
const GOOGLE_CLIENT_SECRET = process.env.GOOGLE_CLIENT_SECRET || '【クライアントシークレット】';
const GOOGLE_REDIRECT_URL = process.env.GOOGLE_REDIRECT_URL || 'https://【サーバのホスト名】:10443/googleapisample/signin.html';

起動は、以下です。

$ npm app.js

何も指定しなければ、HTTPSが10443ポートで立ち上がるかと思います。

さっそく動かしてみる

以下のURLをブラウザから開きます。

　https://【サーバのホスト名】:10443/googleapisample/index.html

サーバのホスト名は、GCPプロジェクトのOAuth2クライアントを作成したときのサーバのホスト名と同じである必要があります。

image.png

Authorizeボタンを押下します。

image.png

Googleアカウントのログイン選択画面が表示されます。
アカウントを選択すると以下の画面が表示されます。この画面は、アプリがテスト用であるために表示されています。（本番にしたい場合はhttps://support.google.com/cloud/answer/7454865）

image.png

詳細リンクをクリックし、【サーバのホスト名】（安全ではないページ）に移動 のリンクをクリックします。

image.png

これから触るGoogle Drive、Gmail、Google Calendar、Google Photoへのアクセス権を許可するかの確認が表示されます。許可ボタンを押下します。

そうすると、GoogleアカウントのもろもろのGoogle Drive、Gmail、Google Calendar、Google Photoの情報を取得したのち以下のように各テキストエリアに表示されて終了です。

image.png

流れを見てみる

まず、ログインから。Authorizeボタン押下から始まりました。
以下の部分が呼ばれます。子ウィンドウを作成し、/public/googleapisample/signin.htmlを開いています。Googleアカウントのログイン処理(の前半部分)は、signin.htmlに実装しています。

/public/googleapisample/js/start.js
        do_authorize: function(){
            this.new_win = open(GOOGLE_REDIRECT_URL, null, 'width=500,height=750');
        },

一方、signin.htmlでは、ページが表示されてすぐに、以下を呼び出しています。

/public/googleapisample/signin.html
    window.location = window.opener.vue.make_authorize_url();

親ページのmake_authorize_url()を呼び出して戻り値のURLにページ遷移しています。

/public/googleapisample/js/start.js
        make_authorize_url: function(){
            return AUTHORISE_URL + '?state=abcd&prompt=true';
        }

Googleアカウントログイン用のURLを生成しています。URLはサーバ側で生成しています。

以下の部分です。
GOOGLE_SCOPEには、取得したい対象サービスをリストアップしています。(OAuth 2.0 Scopes for Google APIs)

/api/controllers/gapi/index.js
    if( event.path == '/api/authorize' ){
        var params = {
            scope: GOOGLE_SCOPE,
            access_type: 'offline'
        };
        if( event.queryStringParameters.state )
            params.state = event.queryStringParameters.state;
        if( event.queryStringParameters.prompt )
            params.prompt = 'consent';
        const auth = new google.auth.OAuth2(GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET, GOOGLE_REDIRECT_URL);
        var url = auth.generateAuthUrl(params);
        return new Redirect(url);
    }else

実は、URLは固定なので毎回取得する必要はないのですが、今回は手順に沿って生成しています。
見ての通り、リダイレクトを返していまして、やっとGoogleアカウント認証ページに遷移します。

ログインが完了すると、またこのページ(/public/googleapisample/signin.html)に戻ってきます。その時に、codeがパラメータとして戻ってきますのでそれを処理します。

/public/googleapisample/siginin.html
        if( searchs.code ){
            try{
                if( window.opener )
                  window.opener.vue.callback_authorization_code(null, searchs.code, searchs.state);
            }finally{
                window.close();
            }

取得されたcodeは認可コードと呼ばれており、以降で利用するアクセストークンの生成に必要なパラメータです。

この認可コードを親ページにcallback_authorization_code()関数を介して戻しています。

/public/googleapisample/js/start.js
        callback_authorization_code: async function(err, code, state){
            if( err ){
                alert(err);
                return;
            }

            this.progress_open();
            try{
                var params = {
                    code: code
                };
                var json = await do_post("/gapi/token", params);
                console.log(json);

認可コードの処理は実はサーバ側で実施しますので、サーバ側に転送しています。

/api/controllers/gapi/index.js
    if( event.path == '/gapi/token'){
        try{
            const auth = new google.auth.OAuth2(GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET, GOOGLE_REDIRECT_URL);
            var token = await auth.getToken(body.code);
            console.log(token);
            auth.setCredentials(token.tokens);

これで、token.tokensにもろもろのトークンが取得できました。

後はこれを使って、Google Drive、Gmail、Google Calendar、Google Photoの情報を取得する処理をして、クライアントに返しています。

/api/controllers/gapi/index.js
    const drive = google.drive({version: 'v3', auth: auth});
    var drive_list = await drive.files.list({
        pageSize: 10,
        fields: 'nextPageToken, files(id, name)',
    });
    var image_list = await do_get_image_list({ pageSize: 100 }, token.tokens.access_token);
    const calendar = google.calendar({version: 'v3', auth});
    var calendar_list = await calendar.events.list({
        calendarId: 'primary',
        maxResults: 10,
        singleEvents: true,
        orderBy: 'updated'
    });
    const gmail = google.gmail({version: 'v1', auth});
    var mail_list = await gmail.users.labels.list({
        userId: 'me',
    });

    return new Response({ drive_list, image_list, calendar_list, mail_list });

クライアント側では受け取ったレスポンスをテキストエリアに表示しています。

/public/googleapisample/js/start.js
            this.drive_list = JSON.stringify(json.drive_list.data.files, null , "\t");
            this.image_list = JSON.stringify(json.image_list.mediaItems, null , "\t");
            this.mail_list = JSON.stringify(json.mail_list.data.labels, null , "\t");
            this.calendar_list = JSON.stringify(json.calendar_list.data.items, null , "\t");
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧