【備忘録】Chrome のスーパーリロード方法

Control + Shift + R （Macなら Command + Shift + R）というショートカットはよく知っていたのですが、マウスでの操作は知りませんでした。
かなり昔からある機能のようなのにお恥ずかしい。

いずれにしても忘れないようにメモっておきます。
macOS High Sierra (10.13.2) の Chrome 63で試しています。

1. 右クリック（Macなら Controlを押しながらクリック）して「検証」を選択
   
2. リロードボタンをプッシュ（長押し）する
   

これで「ハード再読み込み」「キャッシュの消去とハード再読み込み」が選択できます。

ハード再読み込み

そのページから直接参照される外部ファイルのキャッシュを無視してWebサイトから直接読み込み。
Control + Shift + R （Macなら Command + Shift + R）というショートカットがある。

キャッシュの消去とハード再読み込み

ページ上で実行される JavaScript から動的に読み込まれるファイルなどのキャッシュもすべてクリアして再読み込み

という感じだそうですね。

2017年12月12日 @kimipooh

【備忘録】iOS のGmailアプリで、Google以外のメールアカウントを追加可能に！

どうやら、5日前のアップデートから可能になっていたようです。
12月10日時点からなので、12月5日あたりから使えるようになっていたのかな。

• Gmailアプリ 5.0.171119

これは結構便利ですね！

2017年12月10日 @kimipooh

【備忘録】Chrome 63 がリリース

Chrome 63がリリースされましたね！日本語の関連情報をみると、大した変化なしと書かれているところも多いようですが、UI絡みで結構いろいろと変更があるように思います。

そのため備忘録として纏めておきます。

関連情報

• Chrome 63 Release Date and Features（insightportal.io）
• Chrome 63 adds new flags page, prepares Chrome Home UI for wide rollout, and more [APK Download]（androidpolice.com）
• Stable Channel Update for Desktop（Chrome Release Blog）
• 「Google Chrome 63」安定版公開　サイトごとの自動ミュートは見送り（ITMedia）

ブックマークのUIの変更

左サイドメニューでフォルダの階層表示ができるようになりました。

フラグのUI

chrome://flags 

の試験機能について見た目が随分変わりました。

Chrome Home UI に正式対応？（Android スマホのみ？）

下記のような記事や英語ではちらほらとスクリーンショットの画面が出ていたりしているのですが、残念ながら手持ちにAndroid スマホがないので試すことが出来ません。
ので導入されているかどうかは不明です。

• Google、Android用Chrome 63 BetaでChrome Homeを正式リリースか？ 新たなフラグやプロモ画面が見つかる（juggly.cn）

などいくつかのブログをみると、アドレスバーを下部に配置したスマートフォン向けの新しいレイアウトらしいですね。本当のところはどうなんだろう。

2017年12月8日 @kimipooh

【備忘録】PHPMailer 6.0 ライブラリを使って GmailのSMTPからメール送信（PHP編）

PHPMailer 6.0 以降では、その書き方が大きく変わったようで、従来の方法は使えません。

• 【備忘録】PHPMailer ライブラリを使って GmailのSMTPからメール送信（PHP編）（PHPMailer 5.2系）

そのためどうしたらよいかを書き出しておきます。
なお Gmail以外でも同様に利用できます（手持ちのさくらインターネットのアカウント（SMTPサーバー）でも試しました）。

参考情報

• https://github.com/PHPMailer/PHPMailer
• https://github.com/PHPMailer/PHPMailer/blob/master/examples/gmail.phps

検証環境

• macOS High Sierra (10.13.1)
• PHP 7.1.7 (cli) (built: Jul 15 2017 18:08:09) ( NTS )

※以下、ターミナルアプリ（アプリケーション > ユーティリティ）を起動してからのお話です。

1. 作業場所の確保と PHPMailer ライブラリの取得

composer を利用する方法もありますが、あえて GitHub からソースをダウンロードして利用する方法を書き出しておきます。composer を利用する場合には、https://github.com/PHPMailer/PHPMailer を参考にしてみてください。


ターミナルアプリより、

mkdir php_send_test
cd php_send_test
git clone https://github.com/Synchro/PHPMailer

として PHPMailer ライブラリを、php_send_test （ユーザーフォルダ直下の php_send_test）フォルダ内の PHPMailer フォルダにダウロードします。

これで

php_send_test
┗ PHPMailer

というフォルダが出来ているはず。

2. コーディング「php_send_test.php」

名前はなんでもいいですが、説明の便宜上「php_send_test.php」として保存します。

<?php

use PHPMailer\PHPMailer\PHPMailer;

use PHPMailer\PHPMailer\Exception;

require 'PHPMailer/src/Exception.php';

require 'PHPMailer/src/PHPMailer.php';

require 'PHPMailer/src/SMTP.php';

mb_language("japanese"); 

mb_internal_encoding("UTF-8");

$mail = new PHPMailer();

$mail->isSMTP();

$mail->Encoding = "7bit";

$mail->CharSet = '"UTF-8"';

$mail->Host = 'smtp.gmail.com';

$mail->Port = 587;

$mail->SMTPAuth = true;

$mail->SMTPSecure = "tls";

$mail->Username = 'Gmailアドレス（差出人）';

$mail->Password = 'パスワード';

 // ※１は、２段階認証有効なら「アプリ固有のパスワード」を生成してそれをいれる

 // 無効なら「安全性の低いアプリからのアクセスを許可」しておく

$mail->From     = 'Gmailアドレス（差出人）'; 

$mail->FromName = mb_encode_mimeheader("表示名","ISO-2022-JP","UTF-8"); // "表示名" <メールアドレス>

$mail->Subject  = mb_encode_mimeheader("件名","ISO-2022-JP", "UTF-8");

$mail->Body     = mb_convert_encoding("本文","UTF-8","auto");

$mail->AddAddress('宛先');

if (!$mail->send()) {

    echo "送信エラー " . $mail->ErrorInfo;

} else {

    echo "送信しました" . "\n";

}

のコードがベースになります。
赤文字の部分を修正してください。

※$mail->Body の本文は、php_send_test.php 自体の文字コードが UTF-8 なら文字エンコードは不要です。つまりは

• $mail->Body     ="本文";

でもいけます。
ただしヘッダ部分（件名や表示名）については、ISO-2022-JP の文字コードでMIMEエンコードしてあげないと文字化けするので注意。そのため上記コードでは明示的に、文字エンコード変換をしてます。

3. 送信テスト

ターミナルより

php  php_send_test.php

とタイプして、
「送信しました」
と出たら送信できています。

Could not open input file: php_send_test.php

と出てきたら、今いる場所が、php_send_test フォルダじゃないのでしょう。

cd $HOME/php_send_test
php  php_send_test.php

として php_send_test.php のあるフォルダに移動してから実行してみてください。

Appendix A. 本文について改行をしたい

$mail->Body     = mb_convert_encoding("本文

改行２

改行３

改行４

","UTF-8","auto");

とすれば

----

本文

改行2

改行3

改行4

-----

がメールの本文になります。

Appendix B. HTMLメールにしたい！

https://github.com/PHPMailer/PHPMailer/blob/master/examples/gmail.phps

を参考に、$mail->Body の代わりに、

• $mail->msgHTML(file_get_contents('HTML ファイル名（パス含む）'), __DIR__);
    HTML部分を読み込む
• $mail->AltBody     = mb_convert_encoding("本文","UTF-8","auto");
    テキスト部分を読み込む
   

を利用してみてください。

Appendix C. 添付ファイルをつけたい！

if (!$mail->send()) {

より前に、

$mail->addAttachment('ファイル名（パス含む）');
を追加してみてください。

Appendix D. Google OAuth2 認証を使いたい！

Google OAuth2 認証を使えば、アプリ固有のパスワード（２段階認証有効時）や安全性の低いアプリからのアクセスを許可する（２段階認証無効時）をせずに、Gmailアドレスとパスワードを使うことができ、もっとも安全な方法といえます。

Google Developer Console で キーの発行が必要になります。
詳しくは

• https://github.com/PHPMailer/PHPMailer/wiki/Using-Gmail-with-XOAUTH2

に丁寧に説明されているので参照にしてみるとよいです。

2017年11月24日 @kimipooh

【備忘録】メールを受信フォルダの送信者全員に一斉送信する方法

メールを受信フォルダの送信者全員に一斉送信する方法（Gmail ヘルプフォーラム）をみて、なるほどそういう需要もあるのかと思ったので出来るか試してみました。Gmail の機能では出来ないことはわかっていたので、他のツールの力を借りることになります。

Thunderbird + EmailPicky 4 アドオンを使う

とまぁ大体思ったことができたのでメモしておきます。

1. 電子メール Thunderbird で Gmail を IMAP接続で設定
2. 「EmailPicky 4」アドオンのインストール
3. 新規アドレス帳を作成
4. ラベル（フォルダ）内のメールからメールアドレスを抽出し、作成したアドレス帳に保存
5. 作成したアドレス帳のメールアドレスを全選択して、メール作成する

という流れです。

以下、macOS High Sierra (10.13.1）と Thunderbird 52.4.0 (64ビット）で検証しましたが、Windows でも参考になるかと思います。

1. 電子メール Thunderbird で Gmail を IMAP接続で設定

Thunderbird をインストールした上で、

https://info.cseas.kyoto-u.ac.jp/services-ja/email-service_ja

あたりを参考に設定してみてください。

2．「EmailPicky 4」アドオンのインストール

1. https://addons.mozilla.org/ja/thunderbird/addon/emailpicky-4/ にアクセスして「今すぐダウンロード」を選択
     がダウンロードされます。
2. Thunderbird の「ツール」> 「アドオン」からアドオンを開きます。
   
3. 歯車アイコン > 「ファイルからアドオンをインストールします」を選択して、先程ダウンロードしたアドオンを選択します。
   
4. インストール画面がでるので「今すぐインストール」をクリックします。
   
5. 「今すぐ再起動」をクリックします。
   
6. うまくインストールできれば、下図のように表示されます。 

3. 新規アドレス帳を作成

1. Thunderbirdのアドレス帳を開きます。
   
2. 「ファイル」>「新規作成」 > アドレス帳 を選択します。
   
3. 新しくアドレス帳（ここでは「テスト」を作成）を作成します。
   

4. ラベル（フォルダ）内のメールからメールアドレスを抽出し、作成したアドレス帳に保存

1. 差出人メールアドレスを抽出したフォルダ（ラベル）で「右クリック」して「Pick Email IDs from this folder」を選択します。
   
2. 次に下記の設定をします。
   「Search fields」項目で「From」をチェックします。
   「Choose a addressbook as a target for the found addresses」で「テスト」（新規作成したアドレス帳）を選択
   
3. うまくいけば下図のように Successfully （成功）というメッセージが出ます。
   

5. 作成したアドレス帳のメールアドレスを全選択して、メール作成する

1. Thunderbirdのアドレス帳を開きます。
   
   
2. アドレス帳「テスト」を開きます。
   
3. インポートされたアドレス帳を全選択します（Macなら Command + a,  Windowsなら Ctrl + a）
4. 「メッセージを作成」ボタンをクリックします。

以上で To へ アドレス帳「テスト」に入った全メールアドレスを追加した状態でメールを書くことができます。一括 BCCにしたい場合などは分かりませんが、アドレス帳は「ツール」から「書き出す」こともできますので、それで書き出したメールアドレスデータを元に Gmail にそれをコピー＆ペーストして送信することも可能かと思います。

2017年11月21日 @kimipooh

Chrome の初期化方法（Windows / Macintosh 編）

Chrome が起動できなくなった、なにをしてもおかしくなったなどの場合に、Chrome の設定を初期化することで解決することがあります。Chromeは単純に削除しても設定はユーザーのプロフィールに残るためです。

前半は、Windows 編、後半に Macintosh 編を掲載しています。

Windows 編

Windows から Google Chrome を通常アンインストールするときに、「関連データも削除しますか？」のチェックをいれて削除します。基本的にこれで Chrome の設定ごと削除されます。

＊ただし Windows11では「関連データも削除」というオプションがありませんでした。



もし、「関連データも削除しますか？」 のチェックをいれずにアンインストールした場合には、再度 Google Chrome をインストールして、改めてチェックをいれてアンインストールしてみてください。

アンインストール自体できない場合 or 手動で関連データの削除をする

その場合には手動で設定ファイルを消して下さい。

1. Google Chrome を終了します。
   ※下図のように、縦の・・・から「終了」を選択してください。
   右上の☓からウィンドウを閉じても Chromeは終了していません。
   
2. フォルダを開く
3. 上部 フォルダ名の部分をクリックして、そこの文字を全て消す。
4. %USERPROFILE%¥AppData¥Local¥Google を入力して Enter
   ＊右記の場合もあり、%USERPROFILE%\AppData\Local\Google 
   
5. Chromeフォルダで「右クリック」して、「名前の変更」を選択
   Chrome2 など別の名前に変更します。
   

Macintosh 編

1. Google Chrome を終了してください。
   ※下図のように、上部の Chromeメニューから「Google Chrome を終了」を選択してください。
   左上の☓からウィンドウを閉じても Chromeは終了していません。
   
2. Finder メニューにある、「移動」より「フォルダへ移動」を選択
   
3. フォルダ名として「~/Library」を入力してください。自動的に「~/ライブラリ」と修正されます。そのまま「移動」ボタンをクリックしてください。
    ~ は、チルダ（〜の半角）です。
   
4. Application Support > Google フォルダへ移動してください。
5. Chrome フォルダをクリックで選択し、Enter を押して名前変更モードにして、Chrome2 等別の名前に変更してください。
   
6. おなじく、~/Library 以下にある、Preferences フォルダ内の「com.google.Chrome.plist」もデスクトップに移動するなど別のバージョに移動します。

以上で Chrome の初期化が完了したので、改めて Chromeを起動しなおしてみてください。

2017年11月19日 @kimipooh

【備忘録】Gmail にアドオンが追加

ふと見ると、Gmailの設定に「アドオンを取得」なるものが追加されてるじゃないですか！

どうやら「Do more from your inbox with Gmail Add-ons」を見るに、Web版と

Android の Gmailアプリにアドオンがサポートされたみたいですね。現状は下記の８つのようですが、今後より便利なアドオンが出て来るのに期待です！

現状サービスされたアドオンの説明は、下記の関連情報にあるいくつかのブログで紹介されていますので、そちらを参考にするとよいかなと思います。

タスク管理のAsana 、https://www.synergy-marketing.co.jp/blog/todo-management-tool-asana などの紹介記事をみると便利そうですよね。アドオンをインストールすると、Gmailの各メッセージの右側にアドオンアイコンがでます。これをクリックすると、必要な手続き（それぞれのサービスのアカウント作成とか）が提示されますね。

G Suite で有効にするには

G Suiteでは管理者によって管理コンソールのアプリ > Marketplace アプリからのインストールが必要なようですが、「インストール」ボタンが灰色になっていてインストールできませんね。G Suite側では Asana というアドオンもあるので、そちらを使えってことなのでしょうかねぇ。

関連情報

• Gmail「アドオン」提供開始、サードパーティのサービス/アプリ機能を追加（@nifty ニュース）
• Gmailがサードパーティー製アドオンに対応（techcrnch)

インストールしたアドオンを削除するには

Gmail 設定に「アドオン」が新設されています。
そこでインストール済みのアドオンの「管理」リンクを開き、下図のように各アドオンの設定（・・・の縦）をクリックして「削除」を選択してください。




2017年10月25日 @kimipooh

【備忘録】Google カレンダーが新しくなりましたね！

各カレンダーの内容についてポップアップで表示されるのでとても便利になりました。仕事でWordPress に組み込んでいた Googleカレンダーも非常に見やすくなっています。

関連情報

• GoogleカレンダーのWeb版がデザインを一新（techcrunch）

G Suite で有効にするには

即時リリース設定をしている場合を除いて、G Suite 管理者宛にきたアナウンス情報をみると、G Suiteの設定にてリリース時期を調整できるようです。

管理コンソール > G Suite > カレンダー > 新しいカレンダー

となります。「自動」 = 2017年11月14日〜28日に掛けて段階移行とメールでの通知には書かれていました。いずれにせよ 2018年2月28日以降は強制的に新しいカレンダーに移行するようです。

2017年10月19日 @kimipooh

【備忘録】Googleアカウントに「高度な保護機能プログラム」が到来（一般向け Googleアカウント専用）

複数のトップレベルユーザーであるバッキー氏のブログ情報で、本機能が到来していたことを知りました。どうやら、物理セキュリティキー（USB or Bluetooth）に加えて、Google公式アプリやソフト以外（そのうち対応アプリは増えるらしい）からのアクセスを禁止する（ブラウザなら Chrome以外ログイン不可とか）という超強力な保護機能のようですね。

この機能は一般向け Google アカウントのみということです。
G Suite は管理者が対応できるので不要ということでしょうね。

詳しくは 高度な保護機能プログラム（Google）をご参照あれ！

関連情報

• Google’s strongest security, for those who need it most (Google)
• 高度な保護機能プログラム（Google）
• グーグル、ハッキングを受けやすいユーザー向けの保護プログラムを開始（CNET Japan）

2017年10月19日 @kimipooh

【G Suite専用】 Google+ の制限が拡充し、内部限定アクセスが可能に・・・

9月末はバタバタしていたので見逃しておりましたが、G Suite のアカウントで Google+ にアクセスすることを制限できる機能が追加されてました！

•  Google+ コンテンツの操作、共有に制限を設ける（G Suite アップデートブログ）

これまでは制限できなかったので、自由に外部の Google+ コミュニティにユーザーが参加できていました。これを管理者が G Suite ドメイン内部のみの Google+ にしかアクセスできない（限定公開モード）ようにしたり、アクセスはできるけれども、投稿やコメント、共有ができない（ハイブリッドモード）などアクセス制御ができるようになったということかなと思います。

G Suite の管理者であれば、一度管理コンソールのその他の Googleサービスにある Google+設定をチェックしてみてはと思います。




2017年10月11日 @kimipooh

【備忘録】iPhone (iOS) で Gmail を標準表示

2024年３月6日時点で、下記の方法を発見しました。

• Knowledge for Google Products: 【まめ知識】PC版Gmailにアクセスする（iOS / Android 編） 2024年3月

以下の方法は使えなくなっています。

ちょっと面倒だったのでメモしておきます。
以前は、【まめ知識】PC版Gmailにアクセスする（iOS編） でいけていたのですが、現在はもう一手間必要になりました。

2021年版最新は、

• 【まめ知識】PC版Gmailにアクセスする（iOS編） 2021年度（Safari編）

を参考にしてみてください

2020年12月11日時点では下記の方法は使えなくなっているようです。

1. 　Chrome アプリから https://gmail.com にログイン。右上の縦・・・をタップして「PC版サイトをリクエスト」をタップ
   
2. 左側の三のアイコンをタップし、一番下にある Gmailを次のUIで表示から「デスクトップ」をタップ
   
3. PC版の簡易HTMLが表示されるので、一番下にある Gmail表示より「標準」を選択
   

これでサポートされていないブラウザとかいってきますが、とりあえず現時点ではPC版の標準Gmailを表示することができます。メールの一括処理などには使えるかな〜。

2017年10月9日 @kimipooh

【備忘録】iOS 用 Google 日本語入力が到来したよ〜

普段と同じような使い方をしつつ、 Google検索結果なども出せるという、これはもうつかてみないといけませんね！

• Googleから正式にGoogle日本語入力に対応したキーボードアプリが！（男性ハック）

を参考にインストールしてみました。

そしてキーボードを追加！！　あと音声入力はいらないので、アプリを起動し、アプリ上の設定 > キーボードの設定から「音声入力」をOFFにしておきます。

実際に使ってみる！

適当に日本語入力できるところをタップし、地球のマークを長押しして、 Gboard を選択します。すると下図のように左上にGのマークがある日本語入力が出てくるはず！

Gのマークを押したら検索画面が出てきて、どうやら YouTube やマップデータも参照できそう。また、鉛筆マークをおせばフリーハンドで絵を書いてそれをコピーできちゃいましたよ！　絵文字もあるので、これって既存の日本語入力と絵文字いらないんじゃ、、と思いました。 ので、設定 > 一般 > キーボードから、「日本語 - かな」と「絵文字」を消してみた！英語については、日本語 - かなのレイアウトでは使いづらいのでそのまま残しています。これで地球のマークを押すと、日本語 <---> 英語の切替だけになってスッキリ！

しばらくこれで人柱をしてみます。

2017年9月20日 @kimipooh

地域別 Google トップレベルユーザーサミット（シンガポール）詳細スケジュールが公開されたよ！ #tcsummit

地域別 Google トップレベルユーザーサミット（シンガポール）は、世界中の Google トップレベルユーザーが2年に１度一堂に介して、世界中の関連するGoogle社員とともに、現在・未来の様々なGoogleプロダクトについての情報共有、ディスカッション、交流を深める大きなイベントです。

より詳しい概要は、以前に書いたブログ 地域別 Google トップレベルユーザーサミット（シンガポール）をご覧ください。

さてそのサミットのスケジュールが公開されました！

• https://events.withgoogle.com/regional-tc-summit-sin-ja/

です！

いろいろ魅力的なタイトルが並んでいますし、28日にあるオフィスツアーとか楽しみです！筆者は観光を兼ねて 23日から現地入りするので、来週の今頃は観光してますね。概ねは市内をブラブラする予定ですが、方向音痴なので交通公共機関やある程度行く場所について調べておかないといけませんね！（まだ何も調べてない...）

2017年9月16日 @kimipooh

【まめ知識】WordPressでGoogle Apps認証！（2017年9月版）#wordpress #wctokyo

WordCamp Tokyo 2017 のアンカンファレンスで自身が推奨するプラグインとして出して結構好評だったので、その使い方についてのマニュアルを作成しておきます。これは 2017年9月16日に実際に試した内容です。

Google Apps Login プラグイン を使った Googleアカウントによるログインはとても便利です！ WordPressを複数管理する場合、外注先やクライアントにパスワードを逐一教えたり、アカウントを管理するのは大変ではありませんか。このアカウント認証を Google にやってもらえれば、そのあたりの管理が簡単になります！またログインページが非暗号（http://◯◯/wp-admin）だったとしても認証は暗号化（Google側の認証なので）されますから安心ですよ！まぁログイン後の通信は暗号化されませんので、管理画面は最低でも暗号化したほうがいいですけどね。

Googleアカウントでログイン

適切な設定をすれば、下図のように WordPress ログインに Googleでログインするボタンができます。あらかじめ WordPress に 登録されたユーザーのメールアドレスと Googleアカウントで認証されたメールアドレスが一致すればログインできます。そのため Googleアカウントに２段階認証を導入する等、Googleアカウントのセキュリティを強化しておけば非常に強固なログインシステムになりますし、便利です。

でも設定方法って結構分かりづらいんですよね。そこで纏めてみました。
※認証は、一般のGoogleアカウント、G Suite アカウントの両対応です。

必要なこと

1. Google Cloud Platform より、Google Apps Login で利用する クライアントID（Client ID）, クライアントシークレット（Client secret）を発行します。
2. Google Apps Login の設定（設定 > Google Apps Login）より、「１」で発行した値を入力して保存します。

これだけです。「２」はとても簡単です。「１」がちょっと初めての方は馴染みがなくとっつきにくいと思いますので、詳しく説明していきます。

Google Cloud Platform でプロジェクト作成

Google Cloud Platform に最初にログインすると、利用についての同意画面が出てきます。もし英語表示されたら、https://console.cloud.google.com/start?hl=ja からアクセスすると日本語になります。以下は英語ですが、両方共 YESを選択して、AGRESS AND CONTINUEボタンを押して下さい。押した後に、https://console.cloud.google.com/start?hl=ja にアクセスしても日本語で表示されます。
※もしG Suiteアカウントを利用してログインできない場合には、G Suite管理者に「Google Developers Console」サービスが有効になっているか確認してもらってください。



すると下図の画面になるはずです。
今回利用するのは、「Google API」ですので基本的に無料です。




では順を追って説明していきます。

1.  「Google APIを利用する」をクリックします。
   
2. 一度もプロジェクトを作成していない場合には、プロジェクト作成画面になります。
   プロジェクト名は何でもいいですが、分かりやすいものにすることをオススメします。ここでは「Google Login for WordPress」としておきます。
   
3. すると、下図のようにプロジェクトページに遷移します。
   もし遷移しなければ、再度トップページの「Google APIを利用する」をクリックして作成したプロジェクトを選択してください。
   
4. 「認証情報」のタブに移動してください。
   
5. 「認証情報を作成」ボタンをクリックし、「OAuth クライアント ID」を選択してください。
   
6. 各プロジェクトで初めて利用するときに、「同意画面」でサービス名を設定する必要があります。下図のように「同意画面を設定」ボタンをクリックしてください。
   
7. 下図のような画面になるので、「ユーザーに表示するサービス名」を設定してください。なんでも構いませんが、分かりやすい名前をオススメします。ここでは「Google Login for WordPress」にしてみます。入力したら「保存」ボタンをクリックしてください。
   
8. すると下記のようにクライアント IDの作成画面が出ます。
   下記の入力をして「作成」ボタンをクリックしてください。
    アプリケーションの種類：ウェブ アプリケーション
    名前：任意（どの WordPress でつかうか分かるような名前がオススメ）
    制限事項（特定のWordPressのみで有効にする設定）
   　承認済みの JavaScript 生成元：WordPressのURLドメイン
   　承認済みのリダイレクト URI： WordPressのURL/wp-login.php
   
   
   例１）http://◯◯/ の場合
   　承認済みの JavaScript 生成元：http://◯◯
   　承認済みのリダイレクト URI：http://◯◯/wp-login.php
   例２）サイトは、 http://◯◯/  ログインは https://◯◯/wp-admin/　承認済みの JavaScript 生成元：http://◯◯ と https://◯◯
   　承認済みのリダイレクト URI：http://◯◯/wp-login.php と https://◯◯/wp-login.php
   例３）http://◯◯/wordpress/ の場合
   　承認済みの JavaScript 生成元：http://◯◯
   　承認済みのリダイレクト URI：http://◯◯/wordpress/wp-login.php
   例4）http://◯◯/wordpressA/ や http://◯◯/wordpressB/ の２つある場合　承認済みの JavaScript 生成元：http://◯◯
   　承認済みのリダイレクト URI：http://◯◯/wordpressA/wp-login.php と http://◯◯/wordpressB/wp-login.php
   例5）SiteGuard WP Plugin プラグインなどで ログインURLを変更している場合
   SiteGuard WP Pluginの場合には、そのプラグインで「ログインページ変更（デフォルト設定）」をONにしている場合のみ、設定ある「変更後のログインページ名」のURLを設定する必要があります。OFFにしたときを想定して、その設定も追加しておきます。
   　承認済みの JavaScript 生成元：http://◯◯
   　承認済みのリダイレクト URI：http://◯◯/login_△△ と http://◯◯/wp-login.php
   
   
   以上のようにドメインごとに纏めて設定しておくと便利です。もちろん WordPress サイトごとに設定することも可能です。ここは管理者が一緒ならまとめて、そうでないなら分けるとよいのではないかと思います。
   
   さて以下は、手持ちテストサイト「https://demo.dev」で説明します。
   　承認済みの JavaScript 生成元：https://demo.dev
   　承認済みのリダイレクト URI：https://demo.dev/wp-login.php
   ということです。
   
9. するとようやく欲しかった 「クライアントID（Client ID）」「クライアントシークレット（Client secret）」が表示されましたね！これをコピー＆ペーストでメモしておきます。もしメモをし忘れても、あとからチェックできます。
   

Google Apps Login のインストールと設定

1. 公式プラグインですので、通常のプラグイン同様「Google Apps Login」で検索してインストールし、有効化してください。
   
2. 設定 > Google Apps Login を開き、先ほどメモった「クライアントID（Client ID）」「クライアントシークレット（Client secret）」を入力して「変更を保存」ボタンを押して下さい。
   
   
3. 一度ログアウトしてみてください。
   下図のように「Login with Google」ボタンが表示されているはずです。
   
4. 最後に通常ログインして、現在のアカウントでも新規アカウントでもいいので、WordPress のユーザープロフィールのメールアドレス欄に、Googleアカウントが有効なメールアドレスを入力してください。手っ取り早いのは Gmailアドレスです。
   そして「プロフィールを更新」してください。
   
   
5. 一旦ログアウトして、「Login with Google」ボタンを押してみて下さい。
   うまくいけば、Googleログイン画面が出てきます。WordPressに登録したアカウントのメールアドレスでログインしてください。
   
   もし設定がミスしていれば、 Googleのエラーが表示されます。
   大抵は、「承認済みの JavaScript 生成元」「承認済みのリダイレクト」のいずれかが間違っていると思いますのでサイトチェックしてください。
   
   もしGmailや G Suite 以外のメールアドレスの場合で、Googleアカウントを作成していない場合には、https://accounts.google.com/SignUp?hl=ja の「現在のメールアドレスを使用する」のリンクをチェックして、作成してみてください。
   
6. うまくいけばログインできるはずです！！

Applendix A. ２度目以降に、Google Cloud Platform へログインしたときに、どこにいけばいい？

Google Apps Loginプラグインのために、作成したプロジェクトにアクセスしようと思っても「どこだ？」って思った人もいるはず。



から「プロジェクト設定に移動」したら



ほら、こんなところに迷い込んでしました。

そうどこにあるかというとトップの「API」から「APIの概要に移動」を選択しなければならないのです！



すると



ようになり「認証情報」タブをクリックすると、下図のように作成した認証にアクセスできます。

Applendix B. 2つ目の認証コードを発行するのはどうする

1. 既存プロジェクト内で「認証情報を作成」する　クライアントごとに作成するのか、多くなってきたら分けるのか、それぞれで判断すればよいと思います。
2. 新規プロジェクトを作成する　下図のように「Google Cloud Platform の右側の▼ をクリックして出て来る画面の右端にある「＋」でプロジェクトを作成できます。
    ※プロジェクト数は制限があるのでうまくつかうとよいと思います。
   まぁ新たにそれ専用の Googleアカウントを作ってしまえばいいのですけどね。
   

2017年9月16日 @kimipooh