■Google Maps
■Google Maps API を使う
【2018年度版】Google Maps の APIキー を簡単に取得する - ねんでぶろぐ
https://nendeb.com/276
※2018年7月16日から、APIキーの取得にはクレジットカードの登録が必須になっているので注意
既存プロジェクトがある場合も、上の手順中でプロジェクトを選択すれば大丈夫だった
Google Maps ApiからGoogle Maps Platformへの移行方法〜無料プランでもクレジットカードの登録が必須に
https://www.beginnerweb.net/googlemapplatform.html
価格とプラン | Google Maps Platform | Google Cloud | Google Maps Platform | Google Cloud
https://cloud.google.com/maps-platform/pricing/
単に地図を表示するだけなら、iframeでの埋め込みで十分(2018年7月16日からの課金は無いみたい)
他のユーザーとマップやルートを共有する - パソコン - マップ ヘルプ
https://support.google.com/maps/answer/144361
WebサイトにGoogle マップを表示しよう!Google Maps APIの始め方 | 株式会社グランフェアズ
https://www.granfairs.com/blog/staff/google-maps-api-01
【Google Maps JavaScript API v3】すべてのマーカーを地図の中に収める【LatLngBounds】 - Qiita
https://qiita.com/mo49/items/61c7aa15591a2a8ca260
Googleマップのホームページ埋め込み!ルート付き・複数店舗同時表示もできる | Googleストリートビュー認定フォトグラファー コールフォース株式会社のブログ
https://c-force-streetviewer.com/blogs/googlemap-hp-umekomi/
Google APIメモ | refirio.org
http://refirio.org/page/memo/google
■IE11のサポート終了
Googleマップを埋め込んだページにIEで以下にアクセスすると、
「Google Maps JavaScript API でサポートされていないブラウザを使用しています。ブラウザの変更をご検討ください。 詳細 表示しない」
とマップ上に警告が表示される
「詳細」をクリックすると以下のページが表示される
https://developers.google.com/maps/documentation/javascript/error-messages#unsupported-browsers
以下が公式の説明
Googleマップに関係なく、IE11自体のサポートが2022年6月に終了するため、素直にEDGEなど他のブラウザを使うように案内する必要がある
Google Maps Platform に関するよくある質問 | Google Developers
https://developers.google.com/maps/faq?hl=ja#browsersupport
2021 年 8 月より、Internet Explorer 11 のユーザーに対して地図の上部に警告メッセージが表示されます。
Internet Explorer 11 をサポートする Maps JavaScript API の最後のバージョンは v3.47 です。
Internet Explorer 11 のサポートは 2022 年 8 月に完全に終了します。
これは、Edge の IE モードにも当てはまります。
■マップへの課金
2020年6月現在、過去に組み込んだマップが急に表示されなくなった
APIキーは埋め込んである。開発者ツールで確認すると以下が表示されている
You must enable Billing on the Google Cloud Project at
https://console.cloud.google.com/project/_/billing/enable Learn more at
https://developers.google.com/maps/gmp-get-started
・12ヶ月もしくは300ドルを超えると有料となるみたい?
・上記リンク先から課金画面へ遷移できるみたい
・放置しておくとキーの再発行から必要みたい
・これまでは無料プランでカードを登録していたが、これからは有料プランになるみたい
・課金はプロジェクトごとになるみたい
・費用など改めて確認しておきたい
Google Maps Platform の料金 | Google Developers
https://developers.google.com/maps/billing/gmp-billing?hl=ja
Google Cloud の無料枠 | Google Cloud Platform の無料枠
https://cloud.google.com/free/docs/gcp-free-tier?hl=ja
突然のアクセス増加や不正アクセスにより、課金額が跳ね上がる可能性がある
以下などを参考に、不正利用対策と課金アラートを設定しておく
Google Maps Platformの料金上限を設定する方法 - doudemo.info
https://doudemo.info/google-maps-platform%E3%81%AE%E6%96%99%E9%87%91%E4%B8%8A%E9%99%90%E3%82%92%E8%A...
【要確認】Google Maps Platform APIキーの取得方法と注意点 | ワードプレステーマTCD
https://tcd-theme.com/2018/08/google-maps-platform-api.html
google-maps-api-3 - IPアドレスによるGoogleマップのキー制限が機能しない
https://www.it-mure.jp.net/ja/google-maps-api-3/ip%E3%82%A2%E3%83%89%E3%83%AC%E3%82%B9%E3%81%AB%E3%8...
以下でIPアドレスでの制限について「指定したウェブサーバーの IP アドレスのリストからのリクエストを受け入れます。」となっている
Webサーバが複数台構成の環境なら、WebサーバのIPアドレスをすべて登録すれば良さそう
API キーに関するベスト プラクティス | Google Maps Platform | Google Developers
https://developers.google.com/maps/api-key-best-practices?hl=ja
■Google Analytics 4
※要検証
Google Analytics 4 ガイド - アクセス解析ツール「Google Analytics 4」の実装・設定・活用のための情報サイト
https://www.ga4.guide/
「GAのUA終了ってまだ先でしょ」がヤバい理由と、早め対応に役立つ完全マニュアル【SEO情報まとめ】 | 海外&国内SEO情報ウォッチ | Web担当者Forum
https://webtan.impress.co.jp/e/2022/05/06/42722
Googleアナリティクスのユニバーサルアナリティクス廃止とGA4への移行がなぜ話題なのかを説明します | さくらのホームページ教室
https://rs.sakura.ad.jp/column/rs/ga4-transfer/
Googleアナリティクス4プロパティ【GA4】は何が変わったのか?新旧アナリティクスの違い | デジタルマーケティング専門家ジュンイチのデジマ研究所
https://junichi-manga.com/about-ga4-gaiyou/
GA4がよくわからん。となってしまう5つの理由。 ‐ GA4 | 運営堂
https://www.uneidou.com/20795.php
■ページの表示回数を確認
「エンゲージメント → ページとスクリーン」から確認できる
■ユニバーサルアナリティクスからの移行
自サイトにGA4を導入し、最低限の設定を行なったときのメモが以下にある
Dropbox\技術\Google\GA4.txt
■Google Analytics(ユニバーサルアナリティクス)
■ユニバーサルアナリティクスの終了
・2023年7月1日に、計測が停止される
・2023年7月1日以降は、新しいデータ収集はできないものの、以前に収集されたデータに少なくとも6か月間はアクセス可能
ユニバーサル アナリティクスのサポートは終了します - アナリティクス ヘルプ
https://support.google.com/analytics/answer/11583528?hl=ja
2023年7月1日にGA(ユニバーサルアナリティクス)が計測終了とのアナウンスと所感 - Real Analytics (リアルアナリティクス)
https://analytics.hatenadiary.com/entry/end-of-ga
Googleアナリティクスが2023年に旧バージョンを廃止すると発表、「GA4」への移行方法はこんな感じ - GIGAZINE
https://gigazine.net/news/20220317-prepare-with-google-analytics-4/
Googleアナリティクス終了のアナウンス…阿鼻叫喚の嵐「あぁ、また学び直しかぁ…」 | Web担当者Forum
https://webtan.impress.co.jp/e/2022/03/22/42509
Google Analytics(UA)が使えなくなるのはどのくらいヤバくて、いつまでに何をしたら良いのかの話。 - フジイユウジ::ドットネット
https://fujii-yuji.net/2022/04/18/153533
■Google Analytics を導入する
※アナリティクスの解析タグをそのまま導入してもいいが、GTMを使うと管理がしやすくなる
詳細は後述の「Google Tag Manager」を参照
Googleアナリティクス導入時の設定方法について|SEOラボ
https://seolaboratory.jp/59695/
Googleアナリティクスで分析するサイトを追加する方法【簡単4ステップ】|アクセス解析ツール「AIアナリスト」ブログ
https://wacul-ai.com/blog/access-analysis/google-analytics-setting/googleanalytics-add-newsite/
【初心者必見!】覚えておくと便利なGoogleアナリティクスの基本機能5選 | 生産性向上のためのお役立ちブログ|株式会社プロフェッサ
https://www.pro-s.co.jp/blog/webmarketing/googleanalytics/1198
エンジニアも知っておくと便利なGoogle Analyticsの設定ポイント | さくらのナレッジ
https://knowledge.sakura.ad.jp/22729/
■解析されないとき
Googleアナリティクス基礎:設定してるのに動かない時の対応
http://www.kagua.biz/help/config/dousakakunin.html
その他、導入直後に「解析期間が7日だと何も表示されないが、1日にすると表示された」ということがある
翌日から、解析期間が7日のままでも表示されたが、前日のデータは正しく表示されなかった
期間にかかわらず、完全に反映されるまで数日かかる可能性があるかも
以下の Tag Assistant をChromeにインストールすれば、アナリティクスを設置できているかどうかを確認できる
Tag Assistant (by Google) - Chrome ウェブストア
https://chrome.google.com/webstore/detail/tag-assistant-by-google/kejbdjndbnbjgmefkgdddjlbokphdefk
ただし、例えば以下の部分を外部jsファイル化していると、ツールが正しく認識できないようなので注意
- - - - - - - - - - - - - - - - - - - -
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
- - - - - - - - - - - - - - - - - - - -
■アカウント・プロパティ・ビュー
アカウント・プロパティ・ビューは、以下のような関係となっている
アカウント ... 企業・会社・事業部・組織単位
プロパティ ... 計測対象サイトのデータの収集単位
ビュー ... レポートとその設定
Googleアナリティクスのビューの作り方・基本設定(前編) | Analytics Times
https://analytics-times.com/google-analytics-view_01
■IP除外
設定 → (設定対象) → ファイル他を追加
から、自身のIPアドレスを設定しておくといい
ただし、リアルタイム解析も含めて反応は無くなるので注意
(4G回線経由などなら動作確認はできる)
GoogleアナリティクスのIP除外設定|自分のアクセスを取得しないために必須 | PINTO! by PLAN-B
https://service.plan-b.co.jp/blog/seo/11504/
■目標の設定
設定 → (対象のアカウント) → (対象のプロパティ) → (対象のビュー) → 目標
「問い合わせ完了画面が表示された」など、特定のページに到達したことを判断基準に目標設定をするといい
詳細は要勉強
■複数のトラッキングコードを埋め込む
Google アナリティクス のタグを複数(2つ以上)設置する方法 | プライマリーテキスト
https://primarytext.jp/blog/1412
2019年5月31日現在、トラッキングコードの取得画面には以下のように表示されている
- - - - - - - - - - - - - - - - - - - -
グローバル サイトタグ(gtag.js)
このプロパティで使用できる Global Site Tag(gtag.js)トラッキング コードです。
このコードをコピーして、トラッキングするすべてのウェブページの <HEAD> 内の最初の要素として貼り付けてください。
ページにすでに Global Site Tag が配置されている場合は、以下のスニペットの config 行のみを既存の Global Site Tag に追加してください。
- - - - - - - - - - - - - - - - - - - -
取得できるコードは以下のようになっているので、「gtag('config', 'UA-12345667-2');」部分を並べれば良さそう
- - - - - - - - - - - - - - - - - - - -
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-12345667-2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-12345667-2');
</script>
- - - - - - - - - - - - - - - - - - - -
https://refirio.org/ 用に UA-47874057-2 を取得し、後から
https://refirio.org/wordpress/ 用に UA-47874057-3 を取得し、
以下のように設定するとどちらのアナリティクスにも反映された
「js?id=UA-47874057-2」部分のIDはこのままに、gtagを追加すれば大丈夫みたい
- - - - - - - - - - - - - - - - - - - -
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-47874057-2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-47874057-2');
gtag('config', 'UA-47874057-3');
</script>
- - - - - - - - - - - - - - - - - - - -
まったく違うアカウントで同じサイトを解析したい場合、単純に以下のように解析タグを並べれば両方に反映された
(同一アカウントでこの方法をとると、二重に計測されたりするみたい?要検証)
サイト内の特定のページのみ解析したい場合でも、サイト全体用に解析タグを発行して、特定のページのみに解析タグが埋め込まれるようにすると良さそう
- - - - - - - - - - - - - - - - - - - -
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-47874057-2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-47874057-2');
</script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-142156179-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-142156179-1');
</script>
- - - - - - - - - - - - - - - - - - - -
具体的にはアナリティクスのまったく別々のアカウントで、以下のように設定してトラッキングIDを取得している
アカウント名: refirio.org
ウェブサイトの名前: refirio.org
ウェブサイトの URL:
http://refirio.org/
業種: コンピュータ、電化製品
レポートのタイムゾーン: 日本
■イベントトラッキング
イベントトラッキングが反応しないので色々試したときのメモ
以下の形式で記述するとあるので設定したが、反映されなかった
onClick="ga('send', 'event', 'カテゴリ', 'アクション', 'ラベル', 値);"
結論を書くと、以下のように「ラベルと値」だと反映されなくて「ラベルに直接値を設定」だと反映されるようになった
「ラベルと値」が反映されない理由は、「値は数値しか受け付けない」という仕様を見落としていたためだった
よって数値なら値も反映された
ga('send', 'event', 'link', 'click', 'shop', 'M001');
↓
ga('send', 'event', 'link', 'click', 'M001');
イベント測定 | ウェブ向けアナリティクス(analytics.js) | Google Developers
https://developers.google.com/analytics/devguides/collection/analyticsjs/events?hl=ja
Google アナリティクスのイベントを測定する | ウェブ向けユニバーサル アナリティクス(gtag.js)
https://developers.google.com/analytics/devguides/collection/gtagjs/events?hl=ja
analytics.js なのか gtag.js なのかによって、設定すべき形式が変わるようなので注意
また、ページ遷移を伴っていいのならクエリに文字列を指定する方法もある
Googleアナリティクスで「ページ内でどのリンクがクリックされたか」を計測するための主要手法まとめ|パワー・インタラクティブ
https://www.powerweb.co.jp/column/ga-linkclick.html
以下参考
GoogleアナリティクスのイベントトラッキングはonclickよりonMouseDownとonTouchStartで計測 | ウェブマスターがウェブのことを書いたら
https://tuono034s.com/web-entry/1526/
ユニバーサルアナリティクスと従来のGoogleアナリティクスの見分け方 | コスモブレインズ
https://www.webplus-listing.com/blog-webplus/2347/
Google Analyticsイベントトラッキングの設定から確認方法まで | モリアツ.com
https://moriatsu.com/ga-event-tracking
Googleアナリティクス(Google Analytics) イベントトラッキングの設定方法について | デジ研
https://digital-marketing.jp/seo/how-to-setvup-event-tracking/
GoogleAnalytics イベントトラッキングの設定 (ユニバーサルアナリティクス向け) - Qiita
https://qiita.com/miupink/items/6e7ed490b2fb93effb0c
【Googleアナリティクス】10分で出来るイベントトラッキングの設定 | 株式会社バズったー
https://buzztter.co.jp/bazzlog/event-tracking-set-up/
GoogleAnalyticsでのイベント トラッキングを実装する方法と取得できない場合の対処 | MY@web
http://www.myweb.jp.net/post-198/
■カスタムレポート
【保存版】GoogleAnalyticsの見やすいカスタムレポートをまとめてみたよ! - SEOカフェ
http://seo-cafe.hatenadiary.com/entry/google-analytics-reports
上記本文中の
ブログ向けの全体レポートを入手する
https://analytics.google.com/analytics/web/template?uid=OFQ-hZDEQpKY4tga8T7Jfw
をクリック
マイレポートの設定が共有されました。
この設定をインポートするには、Google アナリティクスのアカウントからビューを選択してください。
という画面が表示される
今回は「ビューを選択」から「refirio → refirio.org → すべてのウェブサイトのデータ」を選択して「作成」ボタンをクリック
レポートが表示される
(このときにレポート名を任意のものに変更できるが、後からアナリティクス側で変更することもできる)
次回表示したければ、Googleアナリティクスにアクセスして
カスタム → マイレポート一覧 → ソーシャル&検索&その他
を選択すると表示できる
同様に
ページパフォーマンスレポートを入手する
http://bit.ly/customreport02
時系列レポート(月別)を入手する
https://www.google.com/analytics/web/template?uid=LueMKEQ9TpeGPDA1YXOtzA
時系列レポート(日別)を入手する
http://bit.ly/customreport04
時間別分析レポートを入手する
https://www.google.com/analytics/web/template?uid=YNxOikQOTBqv1vC13Q7sZw
曜日別分析レポートを入手する
https://www.google.com/analytics/web/template?uid=VvTuS7uaQk-280wiz-jUJw
地域別分析レポートを入手する
https://www.google.com/analytics/web/template?uid=4W5d1ZCKR2eLDpnPotnjKA
もインポートしておく
最後にある「企業向けの全体レポートを入手する」は以下にリンクされていて、
定点観測に便利なGoogle Analyticsのおすすめマイレポート設定 | 6666666
https://www.6666666.jp/conversion/20150623/
以下からインポートできる
https://www.google.com/analytics/web/template?uid=yCiKrEAwSXCE-yDO4XqMgQ
■特定のサブドメインのみの解析内容を取得(ビューの作成)
実際に設定した時のメモ
設定 → (対象のアカウント) → (対象のプロパティ)
と選択するとビューの選択が表示されるが、ここで「ビューを作成」をクリックする
遷移した画面で以下を入力
レポートビューの名前: (サイト名など)
レポートのタイムゾーン: 日本
「ビューを作成」をクリック
ビューが作成されたので、さらにフィルタを設定する
フィルタ → フィルタを追加
遷移した画面で以下のように入力
ビューにフィルタを適用する方法を選択: 新しいフィルタを作成
フィルタ名: taskサブドメインのみ(判りやすい名前)
フィルタの種類: 定義済み > 右のみを含む > ホスト名へのトラフィック > 等しい
ホスト名: task.refirio.net(解析したいサブドメインのホスト)
「フィルタの確認」で、必要なアクセスのみ表示されることを確認する
「保存」をクリックして完了
「ビューのアクセス管理」でアカウントを追加すると、特定サブドメインのみ表示できるようになっている
なお、このビューに対してGoogleアカウントを追加して「表示と分析」の権限を付与すると、
特定のサブドメイン内のデータのみ閲覧させることができる
ただしアナリティクスの仕様上、ビューを作成した時点以降のデータしか確認できないので注意が必要
Googleアナリティクスのビューの作り方・基本設定(前編) | Analytics Times
https://analytics-times.com/google-analytics-view_01
ビューの設定を工夫して、Googleアナリティクスの複雑なデータをシンプルに! - faro-biz
https://faro-biz.com/archives/gatips_view01/
サブドメインサイトはどうするべき?Google Analyticsのプロパティ設定方法 | Good Things, Inc. - Web development,web production company
https://good-things.jp/note/google-analytics-subdomain/
ユニバーサルアナリティクスで複数のサブドメインを一括で管理する方法
https://hep.eiz.jp/analytics-cross-domain-tracking/#i-5
特定のビューで過去のデータが見れない原因 | Googleアナリティクス | アナトミーBLOG
https://blog.siteanatomy.com/new-view-does-not-preserve-history-data/
■Search Console 連携
集客 → Search Console → 検索クエリ
「Search Console のデータ共有を設定」ボタンをクリックすると、「プロパティの設定」画面になる
「Search Console」の項目にある「Search Console を調整」をクリック
「追加」をクリックし、追加したいプロパティを選択する
■別アカウントにデータを移行
Analyticsデータを別Gmailアカウントに移行する方法 - HPcode(えいちぴーこーど)
https://haniwaman.com/move-analytics/
大まかに、以下の手順となる
1. 新しいユーザをアカウントに招待する
2. 新しいユーザが所持しているアカウントにプロパティを移行する
3. 新しいユーザをアカウントから削除する(新アカウントのプロパティに移行済みなので、削除しても問題ない)
■その他メモ
成果を出す人がGoogleアナリティクスで使う機能は10個だけ。アクセス解析の実態調査|WACUL TECHNOLOGY & MARKETING LAB | 株式会社WACUL
https://wacul.co.jp/lab/google-analytics-important-10-points/
■Google Analytics(ユニバーサルアナリティクス)
■Google Analytics API を使う(2019年)
サンプル
https://refirio.net/google/analytics/
https://refirio.net/google/analytics/referer.php
https://refirio.net/google/analytics/duration.php
Google Analytics APIをphpで使ってみる - Qiita
https://qiita.com/_hmsk_/items/0dff43424614eeb1e705
【2019年版】Google Analytics API v4 の使い方(PHP) | あぱーブログ
https://blog.apar.jp/web/11573/
はじめてのアナリティクス Reporting API v4: サービス アカウント向け PHP クイックスタート | アナリティクス Reporting API v4 | Google Developers
https://developers.google.com/analytics/devguides/reporting/core/v4/quickstart/service-php
これらを参考に、データを取得できた
ただし最初実行したときは以下のようなエラーになった
# php test.php
PHP Fatal error: Uncaught Google_Service_Exception: {
"error": {
"code": 403,
"message": "Analytics Reporting API has not been used in project 361661326884 before or it is disabled. Enable it by visiting
https://console.developers.google.com/apis/api/analyticsreporting.googleapis.com/overview?project=36... then retry. If you enabled this API recently, wait a few minutes for the action to propagate to our systems and retry.",
"errors": [
{
"message": "Analytics Reporting API has not been used in project 361661326884 before or it is disabled. Enable it by visiting
https://console.developers.google.com/apis/api/analyticsreporting.googleapis.com/overview?project=36... then retry. If you enabled this API recently, wait a few minutes for the action to propagate to our systems and retry.",
"domain": "usageLimits",
"reason": "accessNotConfigured",
"extendedHelp": "https://console.developers.google.com"
}
],
"status": "PERMISSION_DENIED"
}
}
in /var/www in /var/www/html/google/analytics/vendor/google/apiclient/src/Google/Http/REST.php on line 118
エラーメッセージに従ってURLにアクセスすると「Google Analytics Reporting API」の有効化を促されたので有効にした
そうするとデータを取得できるようになった
データ取得の際に以下は参考になりそう
グーグルアナリティクスの解析データを利用したアクセスランキングを表示する :: ホームページ集客支援ならレスキューワーク株式会社
https://rescuework.nagoya/blog/accessranking
高度な分析に役立つ! GoogleアナリティクスAPIでよく使う軸・指標、セグメントを紹介(第2回) | Web担当者Forum
https://webtan.impress.co.jp/e/2015/12/15/21593
アナリティクスAPIのマトリクスとディメンションの項目を試してみる | cly7796.net
http://cly7796.net/wp/seo/try-out-analytics-api-metrics-and-dimensions/
どのような処理ができるか、以下で検証中
https://refirio.net/google/analytics/
■Google Analytics API を使う(2015年)
初心者でも分かる!なGoogle Analytics APIの使い方
https://syncer.jp/google-analytics-api-tutorial
[PHP]Google Analytics API v3.0 使い方〜データ取得編 - Qiita
https://qiita.com/ichikawa_0829/items/74a6f1e62816cf3bf900
Google APIメモ | refirio.org
http://refirio.org/page/memo/google
spl_autoload_registerで無名関数を使うため、PHP5.3以降でないと動かないみたい
キーをjsonにすると駄目だったけど、素直にp12にすると大丈夫だった
refirio.orgにも置いておく
同じアカウントでrefirio.orgも解析しておく
■クライアント ID の作成(Embed API を使う準備 / 2019年)
はじめてのアナリティクス API: ウェブ アプリケーション向け JavaScript クイックスタート
https://developers.google.com/analytics/devguides/reporting/core/v3/quickstart/web-js?hl=ja
上記ページの「ステップ 1: アナリティクス API を有効にする」の「クライアント ID の作成」を参考に作業
https://console.developers.google.com/
にアクセスして「認証情報」をクリック
「認証情報を作成」をクリック
表示された選択肢から「OAuth クライアント ID」をクリック
「OAuth クライアント ID を作成するには、まず同意画面でサービス名を設定する必要があります。」
と表示されたら「同意画面を設定」をクリック
アプリケーション名: refirio.org
「保存」をクリックすると前の画面へ戻る
以下のように入力する「承認済みの JavaScript 生成元」と「承認済みのリダイレクト URI」はこの時点で正式なURLが判っていればそれを入力する
アプリケーションの種類: ウェブ アプリケーション
名前: アナリティクスAPIテスト
承認済みの JavaScript 生成元:
http://localhost:8080
承認済みのリダイレクト URI:
http://localhost:8080/oauth2callback
「作成」をクリックすると、以下が表示された
クライアント ID: 361661326884-q2piflpm64cfplcrd79d6ugqj2er27ma.apps.googleusercontent.com
クライアント シークレット: IxoAJ3bJFqg-RQLIzToeXvhU
■Embed API を使う(2019年)
はじめに | アナリティクス Embed API | Google Developers
https://developers.google.com/analytics/devguides/reporting/embed/v1/getting-started?hl=ja
上記ページのコードを貼り付け、「Insert your client ID here」部分を取得した「クライアント ID」に変更した
ブラウザからアクセス
https://refirio.net/google/embed/ すると、JavaScriptのコンソールに
details: "Not a valid origin for the client:
https://refirio.net has not been whitelisted for client ID 361661326884-q2piflpm64cfplcrd79d6ugqj2er27ma.apps.googleusercontent.com. Please go to
https://console.developers.google.com/ and whitelist this origin for your project's client ID."
error: "idpiframe_initialization_failed"
と表示された
エラーメッセージに従って
https://console.developers.google.com/ にアクセス
「OAuth同意画面」タブで「承認済みドメイン」に「refirio.net」を登録
承認済みドメイン: refirio.net
さらに「認証情報」タブの「OAuth 2.0 クライアント ID」から、対象のIDに「refirio.net」を登録
今回に関しては「承認済みのリダイレクト URI」は適当なパスで問題なかった
承認済みの JavaScript 生成元:
https://refirio.net
承認済みのリダイレクト URI:
https://refirio.net/google/embed/oauth2callback
コードを貼り付けたページを表示すると「Access Google Analytics」というボタンが表示されている
クリックすると、サブウインドウで認証画面が表示される
「このアプリは確認されていません
このアプリは、Google による確認が済んでいません。よく知っている信頼できるデベロッパーの場合に限り続行してください。」
と表示される
「詳細」をクリックして「refirio.net(安全ではないページ)に移動」をクリック
refirio.net への権限の付与
Google アナリティクス データの表示
と表示されるので「許可」をクリック
さらに、下の方に「refirio.net を信頼できることを確認」と表示されているので「許可」をクリック
https://refirio.net/google/embed/ にグラフが表示される
ただしグラフの表示を確認するには、対象のGoogleアカウントでログインしておく必要がある
プログラムをサイト内の別ディレクトリに移動させるのは大丈夫と思われるが、
別ドメインのサイトに設置する場合は新規に認証作業が必要になると思われる
コード内の
'metrics': 'ga:sessions',
を以下のように変更すると、セッションではなくページビューが表示される
他グラフの表示方法については要調査
'metrics': 'ga:pageviews',
■Google Tag Manager
その名の通り、タグ(解析タグや広告タグ)をマネジメント(管理)できるツール
最初に Google Tag Manager 用のタグを全ページに埋め込んでおけば、
あとは Google Tag Manager の画面から「この画面にこの解析タグを埋め込む」を操作できる
Google Analyticsも含めて、専用画面からタグを管理できる
GTM(Googleタグマネージャー)とは?基礎知識と導入・初期設定 - マーケティングオートメーションツール SATORI | 上戸彩さんTVCM公開中
https://satori.marketing/marketing-blog/what-is-marketing/gtm-basic/
■導入
https://marketingplatform.google.com/about/tag-manager/
にアクセス
「無料で利用する」をクリック
「アカウントを作成」から設定を始める
アカウントの設定で以下を入力
アカウント名: refirio
国: 日本
コンテナの設定で以下を入力
コンテナ名: refirio.net
ターゲットプラットフォーム: ウェブ
「作成」ボタンをクリック
利用規約が表示されるので、画面右上にある「はい」をクリック
「Google タグ マネージャーをインストール」というダイアログが表示され、GTM導入のためのコードが表示される
このコードをサイト内の全ページに組み込んでおく
ダイアログの「OK」をクリックすると閉じるが、このコードはダッシュボード上部にある「GTM-XXXXXXX」をクリックすると再表示できる
ただし、このコードを追加しただけでは何も行われないみたい
■「Google タグ マネージャーをインストール」ダイアログの内容(参考)
下のコードをコピーして、ウェブサイトのすべてのページに貼り付けてください。
このコードは、次のようにページの <head> 内のなるべく上のほうに貼り付けてください。
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->
また、開始タグ <body> の直後にこのコードを次のように貼り付けてください。
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
■タグマネージャーでGoogleアナリティクスを導入する
あらかじめ、Googleアナリティクスでトラッキングコードを取得しておく
また、もともとGoogleアナリティクスを組み込んでいる場合は削除しておく(2重にカウントされてしまわないように)
今回は以下のようなトラッキングコードを取得済みとする
UA-111111111-1
左メニューから「変数」をクリックする
画面下部に「ユーザー定義変数」の枠があるので、ここから「新規」をクリックする
「変数の設定」エリアをクリックする
「ユーティリティ」にある「Google アナリティクス設定」をクリックする
「トラッキング ID」に、取得済みのGoogleアナリティクスのトラッキングコードを入力する
画面右上の「保存」をクリックする
「変数名の変更」が表示されるが、今回は変更せずに「Googleアナリティクス設定」のまま「保存」をクリック
これで変数を用意できたので、引き続きPV計測タグを登録する
左メニューから「タグ」をクリックする
「タグ」の枠があるので、ここから「新規」をクリックする
「タグの設定」エリアをクリックする
「おすすめ」にある「Google アナリティクス: ユニバーサル アナリティクス」をクリックする
「トラッキングタイプ」が「ページビュー」になっていることを確認する。「Googleアナリティクス設定」で先程作成した設定である「{{Googleアナリティクス設定}}」を選択
次に画面下部「トリガー」エリアをクリックする
「All Pages」をクリックして選択する(すべてのページで発火させる)
画面右上の「保存」をクリックする
「タグ名の変更」が表示されるが、今回は変更せずに「Google アナリティクス ユニバーサル アナリティクス」のまま「保存」をクリック
これで設定できたので、プレビューモードで確認する
(プレビューモードでアクセスしている人にだけ設定を反映できる)
画面右上の「プレビュー」をクリックする
GTMを埋め込んだページを別のタブで開くと、ページ下部に計測用ウインドウが表示される
「○○ Fired 1 time(s)」などのように、イベントが発火したことが確認できる
また、アナリティクスのリアルタイム解析からも、カウントを確認できる
確認できたら「プレビューモードを終了」をクリックする(終了すると、この時点ではアナリティクスにも反映されなくなる)
これで確認も完了。最後に公開する
画面右上の「公開」をクリックする
「バージョンの公開と作成」が選択されていることを確認する
「バージョン名」と「バージョンの説明」に判りやすい名前と説明を入力する
今回はそれぞれ「初期設定」と「全ページにGoogleアナリティクスのトラッキングコードを設定。」としておく
画面右上の「公開」をクリックする
これで完了。アナリティクスのリアルタイム解析から確認する
■エクスポートとインポート
コンテナのエクスポートとインポート - タグマネージャ ヘルプ
https://support.google.com/tagmanager/answer/6106997?hl=ja
「管理 → コンテナをエクスポート → バージョンまたはワークスペースを選択」
今回は「バージョンの「ID」が「1」の「初期設定」をクリック
プレビューにJSONが表示されるので、「エクスポート」をクリック
以下のようなファイルをダウンロードできる
{
"exportFormatVersion": 2,
"exportTime": "2020-07-01 06:27:16",
"containerVersion": {
"path": "accounts/6666666666/containers/33333333/versions/1",
"accountId": "6666666666",
"containerId": "33333333",
"containerVersionId": "1",
"name": "初期設定",
"description": "全ページにGAのPV計測タグを設定しました。",
"container": {
以下略
「管理 → コンテナをインポート」
インポートするファイルを選択: いったん上でエクスポートしたファイルを選択してみる
ワークスペースを選択: 既存 → ワークスペースを選択
インポート オプションを選択: 必要に応じて「上書き」か「統合」を選択。今回は「上書き」としてみる
「確認」をクリック
ワークスペースに戻り、「現在編集中」という表示になる
画面右上の「公開」から公開する
■複数のタグマネージャーを埋め込む
※未検証
公式の解説によると、単純に複数のタグを並べて埋め込めばいいみたい
以下ページの「1 つのページで複数のコンテナを使用する」を参照
デベロッパー ガイド | ウェブ トラッキング向け Google タグ マネージャー | Google Developers
https://developers.google.com/tag-manager/devguide
以下のページでも説明されている
同じページにGoogleタグマネージャを複数設置する方法 | WEB担当者の備忘録
https://liapoc.com/same-page-more-gtm.html
以前はややこしい手順が必要だったようだが、
2016年ごろに現在のように簡単に導入できるようになったみたい
1サイトで複数のGoogle Tag Managerを使う方法 | SEM Technology
https://sem-technology.info/ja/google-tag-manager/1site-multi-gtm
■その他参考になりそうなページ
【GTM活用】最初に設定しておきたい3つのGA計測テクニック - マーケティングオートメーションツール SATORI | 上戸彩さんTVCM公開中
https://satori.marketing/marketing-blog/contents-marketing/gtm-ga/
【GTM活用】設定しておきたい5つのトリガー - マーケティングオートメーションツール SATORI | 上戸彩さんTVCM公開中
https://satori.marketing/marketing-blog/contents-marketing/gtm-advanced-trigger/
■Google Search Console
※Googleがサイトをどのように評価しているかを確認できる
それをもとに最適化を行うことができる
■サイトの登録
Googleサーチコンソールの登録・設定方法│クロール対策│テクニカルSEO BLOG
https://cluster-seo.com/blog/register-search-console.html
最初にプロパティタイプを選択する
「ドメイン」だと所有者の確認にDNS設定が必要だが、
「URLプレフィックス」だと複数の確認方法に対応している
なお、GTMなどでサイトの所有者を確認できている場合、自動で所有者の確認が完了するみたい
後述の「所有者の確認」も参照
■所有権の確認
サーチコンソールに権限を付与する方法や注意点について紹介
https://digitalidentity.co.jp/blog/seo/google-search-console/search-console-authorization.html
所有者、ユーザー、権限の管理 - Search Console ヘルプ
https://support.google.com/webmasters/answer/7687615?hl=ja
サーチコンソールの管理者には
・確認済みの所有者
・委任された所有者
がある
「委任された所有者」の場合、「確認済みの所有者」が権限を失った場合、同時に権限を失うの注意が必要
また「委任された所有者」の場合、新たにユーザを追加することができない
以下、「委任された所有者」が「確認済みの所有者」になるための手順
サーチコンソールで対象のサイトを表示する
設定 → 所有権の確認
に「あなたは委任された所有者です」と表示されている場合、「委任された所有者」の状態
クリックすると「おすすめの確認方法」と「その他の確認方法」が表示されるので、いずれの方法で確認する
完了すると「あなたは確認済みの所有者です」と表示される
■サイトマップ登録
WordPressをもとにした、「sitemap.xml を作成して Google Search Console に登録する」手順
「Google XML Sitemaps」プラグインを使っている
【WordPress】サイトマップ作成からSearch Console登録までの全手順
https://saruwakakun.com/html-css/wordpress/sitemap
■インデックス削除申請
Googleの検索結果からページを削除したい場合、サーチコンソールから削除申請をするといい
Googleインデックスからページを削除する方法│クロール対策│テクニカルSEO BLOG
https://cluster-seo.com/blog/index-removals.html
■Google 広告(旧 Google AdWords)
※未検証
気軽に利用できるオンライン広告で顧客を増やしましょう | Google 広告
https://ads.google.com/intl/ja_jp/home/
■Google広告の基本
気軽に利用できるオンライン広告で顧客を増やしましょう | Google 広告
https://ads.google.com/intl/ja_jp/home/
【2022年最新版】Google 広告の基本的な設定方法を解説
https://blog.hubspot.jp/google-ads-setting
・Google広告は、Googleでの検索結果に対してキーワードに応じて広告を表示するもの
・文言やリンク先などは、Googleの管理画面であらかじめ設定しておく
・広告を配信する前に審査がある。審査には1時間〜1日程度かかる
・何をもって目標達成となるかはあらかじめ決めておき、それを計測するためのコンバージョンタグを発行できる
コンバージョンタグはサイト内に直接埋め込んでもいいが、基本的にはGTMを使って管理するといい
Google広告とGoogleアナリティクスを連携させると、Googleアナリティクス上でコンバージョンを計測できる
コンバージョンタグによる効果計測については、以下も参考になりそう
初心者必見!コンバージョンタグの発行から設置の方法まで徹底解説 | LISKUL
https://liskul.com/ad_conversiontagfoundation-5577
リスティング広告のタグをGTMで設定する方法を解説 | デジマール株式会社|デジタルマーケティングエージェンシー
https://digimarl.com/syllabus/listing-ads-how-to-set-up-tags/
【2020年最新版】GTMを使った、Google、Yahoo!、Facebook、LINEの広告コンバージョン計測方法|株式会社キーワードマーケティング
https://www.kwm.co.jp/blog/cv_tag_setting2019/
■Googleショッピング広告の基本
ショッピング キャンペーンとショッピング広告について - Google 広告 ヘルプ
https://support.google.com/google-ads/answer/2454022?hl=ja
Googleショッピング広告とは?成功事例とフィード作成方法&運用で守りたい4つのポイント|株式会社キーワードマーケティング
https://www.kwm.co.jp/blog/shopping-ads/
・ショッピング広告は検索広告よりも上部に画像とともに表示される
Google検索結果の「ショッピング」タブ内の商品一覧にも表示される
・商品情報の管理には、Google Merchant Centerを使用する
これはGoogleが提供している、自社の商品情報を管理するためのデータベースツール。ここからGoogleの各サービスに商品情報を連携させる
複数のGoogleサービスを利用していても、個別に大量の商品データを登録する必要がなくなる
・広告文の代わりに商品データを一覧にまとめ、Google Merchant Centerにアップロードする必要がある。よって、商品の数が多ければ多いほど手間がかかる
またGoogle Merchant Centerには、サイトURLや送料などの基本情報をあらかじめ登録しておく必要がある
商品データはExcelやスプレッドシートで作成できる(商品画像はURLを指定する)
アップロードすると審査が行われる。Googleがサイト内をクロールして情報の照らし合わせを行う。審査には最長3日ほどかかる
・Google広告とGoogle Merchant Centerを紐づけることで、Google広告からショッピングの広告を作成できる
■Googleショッピング広告の商品評価の基本
商品評価の基本 - Google Merchant Center ヘルプ
https://support.google.com/merchants/answer/6059553?hl=ja
商品レビュー フィード | Google Developers
https://developers.google.com/product-review-feeds
・Googleショッピング広告にレビュー(星アイコンと評価数)を表示できる
・利用するには、すべての商品全体で50件以上のレビューが投稿されている必要がある
・評価の情報はXMLで作成する必要がある(ファイルサイズは4GB以内に収める)
XMLの仕様は以下に掲載されている
XML スキーマ リファレンス | 商品レビュー フィード | Google Developers
https://developers.google.com/product-review-feeds/schema
サンプル フィード ファイル | 商品レビュー フィード | Google Developers
https://developers.google.com/product-review-feeds/sample
フィードをアップロードする - Google Merchant Center ヘルプ
https://support.google.com/merchants/answer/188477?hl=ja
作成したXMLは、Google Merchant Centerにアップロードする必要がある
アップロードする方法は以下の4つがある
・Google Merchant Centerにログインして手動でアップロードする
・FTPもしくはSFTPでアップロードする(接続情報はGoogle Merchant Centerで発行できる)
・スケジュールに基づき取得させる(XMLを特定のURLで参照できるようにしておき、自動取得の設定をGoogle Merchant Centerで行なう)
・Google Cloud Storage からフィードを送信する(AWSでいうS3のような場所にXMLを置き、それをGoogle Merchant Centerに取得させる)
FTP/SFTPでアップロードする場合、以下などが参考になるか
recole検収環境からテラポート管理のサーバに、FTPアップロードできることは確認できた
PHPでFTP/FTPS/SFTPを使ってアップロードする例
https://blog.ver001.com/php_ftps_sftp/
実際に実装する際は、league/flysystem などを利用することになるか
php ライブラリ「league/flysystem」を使ってファイルの読み込みや書き込みを行う | mebee
https://mebee.info/2020/07/29/post-13454/
■Google AdSense
※再検証中
【2021年版】Googleアドセンス審査の合格ポイント!申請方法を詳しく解説 | 初心者のためのブログ始め方講座
https://www.xserver.ne.jp/blog/adsense-examination/
ブログにGoogleアドセンスを設置するまでの手順【審査のポイントと申請方法も詳しく解説します】│教えて!レンタルサーバーのこと - ロリポップ!レンタルサーバー
https://lolipop.jp/media/google-adsense/
AdSenseにユーザーを追加して管理者権限を設定する | アドミンウェブ
https://www.adminweb.jp/blog/2021052901/
Google AdSenseを管理するGoogleアカウントを変更(移行)する方法_100085 - geekmama
https://geekmama.jp/100085
■アカウントの開設
Google AdSense - ウェブサイトを収益化
https://www.google.com/intl/ja_jp/adsense/start/
「ご利用開始」をクリック
あなたのサイト: refirio.net
AdSense がさらに便利に: はい、個々の状況に合わせたヘルプ情報や掲載結果の最適化案に関する情報配信を希望します
お支払先の国または地域: 日本
利用規約: 利用規約を確認し、内容に同意します
「AdSense のご利用を開始」をクリック
「さあ始めましょう」の画面になるので、引き続きの設定を行う
■広告の掲載
広告 → サマリー → 広告ユニットごと
などから広告表示用のコードを発行できる
■アカウントの招待
「アカウント → アクセスと認証 → ユーザー管理」からGoogleアカウントを招待する
ただし
「AdSense にアクセスするには、他の AdSense アカウントと関連付けられていない確認済みの Google アカウントが必要です。」
と書かれているように、すでにAdSenseアカウントを利用しているアカウントは招待できない
どうしても招待したければ、利用中のアカウントを閉鎖する必要がある
■SSLへの対応
Google提供のJavaScriptをhttpで読み込んでいる場合、httpsに変更しておく必要はある
ただし古いコードでなければ、特に作業は不要のはず
SSLのURLでアクセスすると、広告が表示されたりされなかったりになった
1〜2日ほどその状態だったが、徐々に表示されるようになった
【常時SSL化】Google AdSenseの設定方法。広告クローラのエラー
https://zbnr-hp.com/ssl-google-adsense
■Google Charts API
Webページ上にグラフを掲載できる
Charts | Google Developers
https://developers.google.com/chart/
公式からコードを取得できる
以下は最近の紹介記事
WordPressの記事ページ (それ以外でも多分OK) に、Google Charts を使って生成したグラフを表示する方法 | ラボラジアン
https://laboradian.com/display-google-charts-graph-in-wp-article/
以下のようにすると、Webページ内に円グラフを表示できる
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div_sample"></div>
<script>
document.addEventListener("DOMContentLoaded", (event) => {
// Load the Visualization API and the corechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(() => {
// Create the data table.
const data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['便利と感じる', 0.107],
['便利と感じるが、不快に感じることもある', 0.355],
['便利と感じないし、不快に感じることが多い', 0.259],
['不快なのでやめてほしい', 0.256],
['その他', 0.023]
]);
// Set chart options
const options = {
'title':'Web閲覧履歴などをもとにカスタマイズされた広告が配信されていると認識している人の感想',
'width': '100%',
'height':300
};
// Instantiate and draw our chart, passing in some options.
const chart = new google.visualization.PieChart(document.getElementById('chart_div_sample'));
chart.draw(data, options);
});
});
</script>
以下は色々なグラフを表示する例
<html>
<head>
<meta charset="utf-8">
<title>Google Charts</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<h1>Google Charts</h1>
<p>Google Charts のテスト。</p>
<article>
<h2>Pie Chart</h2>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities',
colors:[
'#4E79A7',
'#E15759',
'#F28E2B',
'#59A14F',
'#B07AA1',
'#EDC948',
'#76B7B2',
'#FF9DA7',
]
};
var chart = new google.visualization.PieChart(document.getElementById('pie_chart'));
chart.draw(data, options);
}
</script>
<div id="pie_chart" style="width: 500px; height: 300px;"></div>
</article>
<article>
<h2>Line Chart</h2>
<script type="text/javascript">
google.charts.load('current', {'packages':['line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Day');
data.addColumn('number', 'Guardians of the Galaxy');
data.addColumn('number', 'The Avengers');
data.addColumn('number', 'Transformers: Age of Extinction');
data.addRows([
[1, 37.8, 80.8, 41.8],
[2, 30.9, 69.5, 32.4],
[3, 25.4, 57, 25.7],
[4, 11.7, 18.8, 10.5],
[5, 11.9, 17.6, 10.4],
[6, 8.8, 13.6, 7.7],
[7, 7.6, 12.3, 9.6],
[8, 12.3, 29.2, 10.6],
[9, 16.9, 42.9, 14.8],
[10, 12.8, 30.9, 11.6],
[11, 5.3, 7.9, 4.7],
[12, 6.6, 8.4, 5.2],
[13, 4.8, 6.3, 3.6],
[14, 4.2, 6.2, 3.4]
]);
var options = {
chart: {
title: 'Box Office Earnings in First Two Weeks of Opening',
subtitle: 'in millions of dollars (USD)'
},
colors:[
'#4E79A7',
'#E15759',
'#F28E2B',
'#59A14F',
'#B07AA1',
'#EDC948',
'#76B7B2',
'#FF9DA7',
]
};
var chart = new google.charts.Line(document.getElementById('line_chart'));
chart.draw(data, google.charts.Line.convertOptions(options));
}
</script>
<div id="line_chart" style="width: 500px; height: 300px;"></div>
</article>
<article>
<h2>Column Chart</h2>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawDualY);
function drawDualY() {
var data = new google.visualization.DataTable();
data.addColumn('timeofday', 'Time of Day');
data.addColumn('number', 'Motivation Level');
data.addColumn('number', 'Energy Level');
data.addRows([
[{v: [8, 0, 0], f: '8 am'}, 1, .25],
[{v: [9, 0, 0], f: '9 am'}, 2, .5],
[{v: [10, 0, 0], f:'10 am'}, 3, 1],
[{v: [11, 0, 0], f: '11 am'}, 4, 2.25],
[{v: [12, 0, 0], f: '12 pm'}, 5, 2.25],
[{v: [13, 0, 0], f: '1 pm'}, 6, 3],
[{v: [14, 0, 0], f: '2 pm'}, 7, 4],
[{v: [15, 0, 0], f: '3 pm'}, 8, 5.25],
[{v: [16, 0, 0], f: '4 pm'}, 9, 7.5],
[{v: [17, 0, 0], f: '5 pm'}, 10, 10],
]);
var options = {
chart: {
title: 'Motivation and Energy Level Throughout the Day',
subtitle: 'Based on a scale of 1 to 10'
},
series: {
0: {axis: 'MotivationLevel'},
1: {axis: 'EnergyLevel'}
},
axes: {
y: {
MotivationLevel: {label: 'Motivation Level (1-10)'},
EnergyLevel: {label: 'Energy Level (1-100)'}
}
},
hAxis: {
title: 'Time of Day',
format: 'h:mm a',
viewWindow: {
min: [7, 30, 0],
max: [17, 30, 0]
}
},
vAxis: {
title: 'Rating (scale of 1-10)'
},
colors:[
'#4E79A7',
'#E15759',
'#F28E2B',
'#59A14F',
'#B07AA1',
'#EDC948',
'#76B7B2',
'#FF9DA7',
]
};
var materialChart = new google.charts.Bar(document.getElementById('column_chart'));
materialChart.draw(data, options);
}
</script>
<div id="column_chart" style="width: 500px; height: 300px;"></div>
</article>
<article>
<h2>Area Chart</h2>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
]);
var options = {
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: '#333'}},
vAxis: {minValue: 0},
colors:[
'#4E79A7',
'#E15759',
'#F28E2B',
'#59A14F',
'#B07AA1',
'#EDC948',
'#76B7B2',
'#FF9DA7',
]
};
var chart = new google.visualization.AreaChart(document.getElementById('area_chart'));
chart.draw(data, options);
}
</script>
<div id="area_chart" style="width: 500px; height: 300px;"></div>
</article>
</body>
</html>
■Google Chart Tools
Google Charts API はJavaScriptで描画するが、
Google Chart Tools は一枚画像として結果を受け取ることができる
Google Chart Tools入門
https://www.javadrive.jp/google-chart-tools/
■Google Form
※未検証
※アンケートフォームを作成できる
Google フォーム - アンケートを作成、分析できる無料サービス
https://www.google.com/intl/ja_jp/forms/about/
【初心者でも分かる】Googleフォームの基本を徹底解説!無料で簡単にアンケートフォームを作成しよう | formLab
https://form.run/media/contents/enquete/googleform/
■Google reCAPTCHA
※ロボットによるアクセスを弾くことができる
※今新規に導入するならV3で良さそう
ただし1ヶ月間に100万回を超えたり、1秒間に1000回を超えるようなキーのリクエストがある場合、有料のEnterprise版にする必要がある
reCAPTCHA
https://www.google.com/recaptcha/about/
reCAPTCHAとは?どんなツールで何ができるのかをご紹介します! | MarkeTRUNK
https://www.profuture.co.jp/mk/column/33599
「reCAPTCHA」って?スパム対策に効果的なreCAPTCHAをフォームに入れてみた | BLOG | シナジーマーケティング株式会社
https://www.synergy-marketing.co.jp/blog/using_recaptcha_on_form
フォームの迷惑メール対策で有効なGoogle「reCAPTCHA」の導入方法とEnterpriseの違い【2021年版】 | ビギブ
https://www.beginnerweb.net/recaptcha-form.html
(新) Google reCAPTCHA V3 リキャプチャ設置、設定方法 - Blog | Samurai Web Works サムライウェブワークス -ロサンゼルスのウェブデザイン会社-
https://samurai-web-works.com/info/usefultools/how-to-set-up-google-recaptcha-v3/
(新) Google reCAPTCHA V2 リキャプチャ設置、設定方法 - Blog | Samurai Web Works サムライウェブワークス -ロサンゼルスのウェブデザイン会社-
https://samurai-web-works.com/info/usefultools/how-to-set-up-google-recaptcha-v2/
■reCAPTCHA導入用のフォームメールを作成
以下のフォームメールを作成し、これにreCAPTCHAを導入するものとする
index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>フォームメール</title>
</head>
<body>
<h1>フォームメール</h1>
<form action="send.php" method="post">
<dl>
<dt>件名</dt>
<dd><input type="text" name="subject" size="30" value=""></dd>
<dt>送信者名</dt>
<dd><input type="text" name="name" size="30" value=""></dd>
<dt>メールアドレス</dt>
<dd><input type="text" name="mail" size="30" value=""></dd>
<dt>本文</dt>
<dd><textarea name="message" cols="30" rows="5"></textarea></dd>
</dl>
<p><input type="submit" value="送信する"></p>
</form>
</body>
</html>
send.php
<?php
mb_language('Japanese');
mb_internal_encoding('UTF-8');
$body = '件名:' . $_POST['subject'] . "\n"
. '送信者名:' . $_POST['name'] . "\n"
. 'メールアドレス:' . $_POST['name'] . "\n"
. '本文:' . $_POST['message'];
if (mb_send_mail(
'refirio@gmail.com',
'フォームからメールが送信されました',
$body,
'From: info@refirio.org'
)) {
exit('Complete!');
} else {
exit('Error!');
}
■reCAPTCHA v3を導入
以下にアクセスする
reCAPTCHA
https://www.google.com/recaptcha/admin/create
ラベル: refirio.org v3検証
reCAPTCHA タイプ: reCAPTCHA v3
ドメイン: refirio.org
オーナー: (自身のGmailアドレスが、はじめから設定済みになっていた)
「reCAPTCHA 利用条件に同意する」と「アラートをオーナーに送信する」にチェックを入れ、「送信」ボタンを押す
以下が表示される。シークレットキーは外部に漏らさないように注意
「refirio.org v3検証」が登録されました。
このサイトキーは、ユーザーに表示するサイトの HTML コードで使用します。
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
このシークレットキーは、サイトと reCAPTCHA 間の通信で使用します。
YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY
これで完了
この後「v3 Admin Console」にアクセスすると、合計リクエスト数や不審なリクエストのパーセンテージが表示されるようになった
フォームメールを以下のように調整
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX と YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY の部分は、
それぞれ自身のサイトキーとシークレットキーにする
index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>フォームメール</title>
<!-- headタグの最後に追加ここから -->
<script src="https://www.google.com/recaptcha/api.js?render=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"></script>
<script>
grecaptcha.ready(function() {
grecaptcha.execute('XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX', {action: 'homepage'}).then(function(token) {
var recaptchaResponse = document.getElementById('g-recaptcha-response');
recaptchaResponse.value = token;
});
});
</script>
<!-- headタグの最後に追加ここまで -->
</head>
<body>
<h1>フォームメール</h1>
<form action="send.php" method="post">
<dl>
<dt>件名</dt>
<dd><input type="text" name="subject" size="30" value=""></dd>
<dt>送信者名</dt>
<dd><input type="text" name="name" size="30" value=""></dd>
<dt>メールアドレス</dt>
<dd><input type="text" name="mail" size="30" value=""></dd>
<dt>本文</dt>
<dd><textarea name="message" cols="30" rows="5"></textarea></dd>
</dl>
<!-- 確認ボタンや送信ボタンの上に追加ここから -->
<input type="hidden" name="g-recaptcha-response" id="g-recaptcha-response">
<!-- 確認ボタンや送信ボタンの上に追加ここまで -->
<p><input type="submit" value="送信する"></p>
</form>
</body>
</html>
send.php
<?php
mb_language('Japanese');
mb_internal_encoding('UTF-8');
/* メール送信の前に追加ここから */
$recaptcha = isset($_POST['g-recaptcha-response']) ? $_POST['g-recaptcha-response'] : null;
if (!$recaptcha){
exit('reCAPTCHAにチェックを入れてください。');
}
$response = json_decode(file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret=YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY&response=' . $recaptcha), true);
if (intval($response['success']) === 1) {
echo 'reCAPTCHAでの認証に成功しました。';
} else {
exit('reCAPTCHAでの認証に失敗しました。');
}
/* メール送信の前に追加ここまで */
$body = '件名:' . $_POST['subject'] . "\n"
. '送信者名:' . $_POST['name'] . "\n"
. 'メールアドレス:' . $_POST['name'] . "\n"
. '本文:' . $_POST['message'];
if (mb_send_mail(
'refirio@gmail.com',
'フォームからメールが送信されました',
$body,
'From: info@refirio.org'
)) {
exit('Complete!');
} else {
exit('Error!');
}
■reCAPTCHA v2を導入
以下にアクセスする
reCAPTCHA
https://www.google.com/recaptcha/admin/create
ラベル: refirio.org v2検証
reCAPTCHA タイプ: reCAPTCHA v2
「私はロボットではありません」チェックボックス
ドメイン: refirio.org
オーナー: (自身のGmailアドレスが、はじめから設定済みになっていた)
「reCAPTCHA 利用条件に同意する」と「アラートをオーナーに送信する」にチェックを入れ、「送信」ボタンを押す
以下が表示される。シークレットキーは外部に漏らさないように注意
「refirio.org v2検証」が登録されました。
このサイトキーは、ユーザーに表示するサイトの HTML コードで使用します。
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
このシークレットキーは、サイトと reCAPTCHA 間の通信で使用します。
YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY
これで完了
この後「v3 Admin Console」にアクセスすると、合計リクエスト数や不審なリクエストのパーセンテージが表示されるようになった
(実装したのはv2だが表示された)
フォームメールを以下のように調整
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX と YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY の部分は、
それぞれ自身のサイトキーとシークレットキーにする
index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>フォームメール</title>
<!-- headタグの最後に追加ここから -->
<script src='https://www.google.com/recaptcha/api.js'></script>
<!-- headタグの最後に追加ここまで -->
</head>
<body>
<h1>フォームメール</h1>
<form action="send.php" method="post">
<dl>
<dt>件名</dt>
<dd><input type="text" name="subject" size="30" value=""></dd>
<dt>送信者名</dt>
<dd><input type="text" name="name" size="30" value=""></dd>
<dt>メールアドレス</dt>
<dd><input type="text" name="mail" size="30" value=""></dd>
<dt>本文</dt>
<dd><textarea name="message" cols="30" rows="5"></textarea></dd>
</dl>
<!-- 確認ボタンや送信ボタンの上に追加ここから -->
<div class="g-recaptcha" data-sitekey="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"></div>
<!-- 確認ボタンや送信ボタンの上に追加ここまで -->
<p><input type="submit" value="送信する"></p>
</form>
</body>
</html>
send.php
※v3と同じ実装を行う
■Googleカスタム検索エンジン
※未検証
※サイト内検索を実装できる
カスタム検索エンジン
https://cse.google.com/cse/?hl=ja
Googleカスタム検索の設置方法。自分のホームページに検索窓と検索結果ページを分けて設置。|及川WEB室
https://www.oikawa-sekkei.com/web/design/google/google-custom-search-box.html
Google カスタム検索(サイト内検索)の設置方法や使い方/Web Design Leaves
http://www.webdesignleaves.com/pr/plugins/googleCustomSearch_01.html
■Gmail
■一つのGmailアドレスから複数のアドレス(エイリアス)を作る
example@gmail.com というメールアドレスがあった場合、
example+test1@gmail.com
example+test2@gmail.com
のようなアドレス(アカウント名の末尾に「+」と任意の英数字を追加)でもメールを受信できる
何かしらのWebサービスにメールを登録する場合、エイリアスのアドレスを登録すれば、万が一メールアドレスが流出したときに流出元が判る
また、テストのために複数のメールアドレスが必要な場合などにも使える
Gmailのエイリアス機能とは──複数アドレスを設定する方法と注意点 | アプリオ
https://appllio.com/gmail-alias
■ロリポップのメールをGmailで送受信
公式の解説が詳しい
Gmailの設定について / メール / マニュアル - レンタルサーバーならロリポップ!
https://lolipop.jp/manual/mail/gmail/
■GmailのSMTPでメール送信
Homestead+Laravel環境で、GmailのSMTPでメールを送信したときのメモ
専用のアプリパスワードを発行し、それを使ってメールを送信できる
Laravel側の設定は Laravel.txt も参照
[Laravel5]gmailが送信できない? : ラブサファリ
http://lovesafari.blog.jp/archives/21272100.html
以下はアプリパスワードについては触れられていないが、プログラムは参考になる
Laravelでメール送信機能を実装する方法【Gmailを利用】
https://manablog.org/laravel-send-email/
以下、実際に設定したときのメモ
アプリパスワードは、二段階認証を設定していないと「お探しの設定はお使いのアカウントでは利用できません。」となって設定できない
まずは、以下のページから二段階認証を設定する
https://support.google.com/accounts/answer/185839?hl=ja
その後、以下のページからアプリパスワードを設定する
https://security.google.com/settings/security/apppasswords
アプリパスワードの設定画面で2段階認証すると、「アプリ パスワード」というページに遷移した
アプリ: 「その他(名前を入力)」を選択
アプリ名: Laravel
と入力して「生成」ボタンを押すとアプリパスワードが生成されるので、この値を使用する
なお、使い方の文章も以下のように表示される
使い方
設定しようとしているアプリケーションまたはデバイスの Google アカウントの設定画面を開きます。
パスワードを上に表示されている 16 文字のパスワードに置き換えます。
このアプリ パスワードは、通常のパスワードと同様に Google アカウントへの完全なアクセス権が付与されます。
このパスワードを覚えておく必要はないので、メモしたり誰かと共有したりしないでください。
この場合、以下の情報で送信できる
HOST: smtp.gmail.com
PORT: 465
USERNAME: Gmailのメールアドレス
PASSWORD: 生成されたアプリパスワード
ENCRYPTION: ssl
■GmailのAPIでメール取得
PHPとGmail APIでメールを取得する - ハマログ
https://blog.e2info.co.jp/2019/06/14/php-gmail-api-mail/
以下のページから開始
PHP Quickstart | Gmail API | Google Developers
https://developers.google.com/gmail/api/quickstart/php
ページの中ほどにある「Enable the Gmail API」ボタンをクリック
任意のプロジェクト名を入力し、規約に同意して「NEXT」ボタンをクリック
「Configure your OAuth client」ボタンが表示される
「Web server」を選択する
「Authorized redirect URIs」は
http://localhost/~test/mail/google_api/oauth2callback.php とした(手元の環境に合わせて入力する)
登録すると「You're all set!」と表示される
「DOWNLOAD CLIENT CONFIGURATION」ボタンをクリックすると credentials.json をダウンロードできるので、ローカルに保存しておく
また以下のように「Client ID」と「Client Secret」も表示されているので確認する
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Client ID
1234567890-xxxxxxxxxx.apps.googleusercontent.com
Client Secret
XXXXXXXXXX
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Composerを導入し、以下を実行する
composer require google/apiclient:^2.0
quickstart.php を作成し、紹介されているプログラムを入力する
また、同じ場所に oauth2callback.php も作成する。内容は以下にしておく
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<?php
echo 'code = ' . $_GET['code'] . '<br>';
echo 'scope = ' . $_GET['scope'] . '<br>';
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
以下を実行する
>php quickstart.php
Open the following link in your browser:
https://accounts.google.com/o/oauth2/auth?response_type=code&access_type=offline&client_id=1...
Enter verification code:
コードの入力待ちになるので、表示されたURLにアクセスする
Googleにログインしていない場合、ログイン画面が表示されるのでログインする
二段階認証後に表示されるコードを入力して進む
「このアプリは Google で確認されていません」
と表示された
「詳細」リンクをクリックし、表示される「Quickstart(安全ではないページ)に移動」リンクをクリック
「Quickstart への権限の付与」というダイアログが表示され、以下が表示されている
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
メール メッセージと設定の表示
メール メッセージの表示
メール メッセージの検索
設定(フィルタ、ラベルなど)の表示
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
「許可」ボタンをクリック
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Quickstart に以下を許可しています。
・メール メッセージと設定の表示
Quickstart を信頼できることを確認
お客様の情報をこのサイトやアプリと共有する場合があります。
Quickstart の利用規約とプライバシー ポリシーで、ユーザーのデータがどのように取り扱われるかをご確認ください。
アクセス権の確認、削除は、Google アカウント
https://myaccount.google.com/permissions でいつでも行えます。
リスクの詳細
https://support.google.com/accounts?p=oauth_consent
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
内容を確認されるので、再度「許可」ボタンをクリック
http://localhost/~test/mail/google_api/oauth2callback.php?code=YYYYYYYYYY&scope=https://www.goog...
に遷移し、先に作成したプログラムによって画面に以下が表示される
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
code = YYYYYYYYYY
scope =
https://www.googleapis.com/auth/gmail.readonly
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
コードの入力待ちになっているプロンプトで、codeの値を入力する
以下が表示される
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PHP Warning: count(): Parameter must be an array or an object that implements Countable in C:\localhost\home\test\public_html\mail\google_api\vendor\guzzlehttp\guzzle\src\Handler\CurlFactory.php on line 67
Warning: count(): Parameter must be an array or an object that implements Countable in C:\localhost\home\test\public_html\mail\google_api\vendor\guzzlehttp\guzzle\src\Handler\CurlFactory.php on line 67
Labels:
- CHAT
- SENT
- INBOX
- IMPORTANT
- TRASH
- DRAFT
- SPAM
- CATEGORY_FORUMS
- CATEGORY_UPDATES
- CATEGORY_PERSONAL
- CATEGORY_PROMOTIONS
- CATEGORY_SOCIAL
- STARRED
- UNREAD
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
メールのラベルが一覧表示されているみたい
認証した情報は「token.json」というファイルが作成されて保存されている(アクセストークンや有効期限が保存されている)
よって次回は、認証なしにメールのラベルが一覧表示される
※アクセストークンには有効期限が設けられている(1時間くらい?)
期限が切れたら再度「php quickstart.php」を実行する必要がある
すんなりトークンが更新されることもあるが、再度Googleへのログインと二段階認証を求められることもある
よってプログラムのみで完全自動更新するのは難しそう
一例だが、以下のプログラムによって、ブラウザにGmailのラベルを一覧表示できる
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<?php
if (version_compare(PHP_VERSION, '7.2.0', '>=')) {
error_reporting(E_ALL ^ E_NOTICE ^ E_WARNING);
}
require __DIR__ . '/vendor/autoload.php';
$client = getClient();
$service = new Google_Service_Gmail($client);
$user = 'me';
$results = $service->users_labels->listUsersLabels($user);
echo "<!DOCTYPE html>\n";
echo "<html>\n";
echo "<head>\n";
echo "<meta charset=\"utf-8\">\n";
echo "<title>Gmail</title>\n";
echo "</head>\n";
echo "<body>\n";
echo "<h1>Gmail</h1>\n";
echo "<h2>Labels</h2>\n";
echo "<p>ラベルは以下のとおりです。</p>\n";
echo "<ul>\n";
foreach ($results->getLabels() as $label) {
echo "<li>" . $label->getId() . ' ... ' . $label->getName() . "</li>\n";
}
echo "</ul>\n";
echo "</body>\n";
echo "</html>\n";
exit;
function getClient()
{
$client = new Google_Client();
$client->setApplicationName('Gmail API PHP Quickstart');
$client->setScopes(Google_Service_Gmail::GMAIL_READONLY);
$client->setAuthConfig('credentials.json');
$client->setAccessType('offline');
$client->setPrompt('select_account consent');
$tokenPath = 'token.json';
if (file_exists($tokenPath)) {
$accessToken = json_decode(file_get_contents($tokenPath), true);
$client->setAccessToken($accessToken);
}
if ($client->isAccessTokenExpired()) {
exit('Access token is expired!');
}
return $client;
}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
error_reporting の指定があるのは、PHP Warning の対策
本筋の対応では無いかもしれないが、詳細は以下
Laravel 5.5 + PHP 7.2 で count のエラー (Warning) が発生
https://mseeeen.msen.jp/warning-with-count-in-laravel-55-on-php-72/
ライブラリ内で出力されるが、「google/apiclient:^2.0」とバージョンを指定しているのが問題か(公式の解説が更新されていない?)
また一例だが、以下のプログラムによって、ブラウザにGmailのメッセージを一覧表示できる
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<?php
if (version_compare(PHP_VERSION, '7.2.0', '>=')) {
error_reporting(E_ALL ^ E_NOTICE ^ E_WARNING);
}
require __DIR__ . '/vendor/autoload.php';
$client = getClient();
$service = new Google_Service_Gmail($client);
$user = 'me';
$optParams = array(
'maxResults' => '10',
'labelIds' => 'INBOX', // ラベルのidはlistUsersLabels()で取得できる
//'pageToken' => 'ページトークン',
//'q' => 'is:unread', // Gmailのメール検索時の形式で条件を指定できる
//'q' => 'from:someuser@example.com after:2018-02-20',
);
$messages = $service->users_messages->listUsersMessages($user, $optParams);
echo "<!DOCTYPE html>\n";
echo "<html>\n";
echo "<head>\n";
echo "<meta charset=\"utf-8\">\n";
echo "<title>Gmail</title>\n";
echo "</head>\n";
echo "<body>\n";
echo "<h1>Gmail</h1>\n";
echo "<h2>Messages</h2>\n";
echo "<p>メッセージは以下のとおりです。</p>\n";
foreach ($messages->getMessages() as $message) {
$message_id = $message->getID();
$message_contents = $service->users_messages->get($user, $message_id);
$snippet = $message_contents['snippet'];
if (mb_strlen($snippet, 'UTF-8') > 40) {
$snippet = mb_substr($snippet, 0, 40, 'UTF-8') . '...';
}
echo "<div=\"message_" . $message_id . "\">\n";
echo "<h3>" . $snippet . "</h3>\n";
echo "<dl>\n";
foreach ($message_contents['payload']['headers'] as $header) {
if (!preg_match('/^(From|Date|Subject|To)$/', $header['name'])) {
continue;
}
echo "<dt>" . $header['name'] . "</dt><dd>" . $header['value'] . "</dd>\n";
}
echo "</dl>\n";
if (!empty($message_contents['payload']['body']['data'])) {
$body = $message_contents['payload']['body']['data'];
$body = str_replace(array('-', '_'), array('+', '/'), $body);
$body = base64_decode($body);
echo "<pre>" . $body . "</pre>\n";
}
echo "</div>\n";
}
echo "</body>\n";
echo "</html>\n";
exit;
function getClient()
{
$client = new Google_Client();
$client->setApplicationName('Gmail API PHP Quickstart');
$client->setScopes(Google_Service_Gmail::GMAIL_READONLY);
$client->setAuthConfig('credentials.json');
$client->setAccessType('offline');
$client->setPrompt('select_account consent');
$tokenPath = 'token.json';
if (file_exists($tokenPath)) {
$accessToken = json_decode(file_get_contents($tokenPath), true);
$client->setAccessToken($accessToken);
}
if ($client->isAccessTokenExpired()) {
exit('Access token is expired!');
}
return $client;
}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
■外部POP3の受信遅延を短くする
設定 → アカウントとインポート → 他のアカウントでメールを確認 → メールを今すぐ確認する
とすれば即座に確認されるみたい
ただし毎回クリックするのは大変
GMail POP3 Checker で対応できるみたい(未検証)
ただしTampermonkeyでサードパーティー製プラグインを入れる必要があり、
また寄付しないと12分までくらいしか短くならないらしい
少し様子見したい
Gmailの異常に遅い外部POP3受信のストレスを解消する方法 | オランダで生きていく
https://nldot.info/how-to-speed-up-gmail-external-pop3/
Gmailの外部アカウントのPOP3受信の遅延を無くす最強の方法 - 余白の書きなぐり
http://auewe.hatenablog.com/entry/2014/05/18/024715
■Gmailの容量を確保する
Gmailの容量は15GBだが、仕事アカウントで13GB近く消費していたので作業
以下、仕事メールで実際にメールを削除した時のメモ
作業前
12.82 GB/15 GB(85%)を使用中
不要な通知メールを大量に削除(思ったより容量削減にはならなかった)
11.12 GB/15 GB(74%)を使用中
【Gmailの使用容量を減らす】一括削除の大掃除をする方法
https://www.sho-design.net/gmail-cleanup/
上記を参考に、重いファイルが添付されているメールを削除する
size:30m older_than:1y
の結果に表示されたメールを削除
10.96 GB/15 GB(73%)を使用中
size:20m older_than:1y
の結果に表示されたメールを削除
10.74 GB/15 GB(71%)を使用中
size:10m older_than:1y
の結果に表示されたメールを削除
9.17 GB/15 GB を使用中
それなりに削減された
テキストメールを削除するよりは、こちらの方が効果がありそう
また容量が少なくなってきたら、同様に重いファイルが添付されているメールを削除する
■メールを送信できなくなった
Gmailを使用していると、メール送信後に
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
example@example.com にアクセスできなくなりました。
このメールを送信するには、別の「送信元」アドレスを選択してからもう一度お試しください。
詳しくは、
https://support.google.com/mail/answer/22370?hl=ja をご覧ください
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
と届くようになった
特に前触れなどは無く突然
どうやらメールの送信ができなくなっている
別のアドレスやエイリアスからメールを送信する - Gmail ヘルプ
https://support.google.com/mail/answer/22370?hl=ja
Gmail上で独自ドメインなどの別メールアドレスから突然送信できなくなる現象と、その解決法 | しらこのナレッジ
https://tecchan.jp/entry/211019-gmailsmtp/
突如、gmailで送信ができなくなりました。受信は問題なくできます。 - Gmail コミュニティ
https://support.google.com/mail/thread/130942160/%E7%AA%81%E5%A6%82%E3%80%81gmail%E3%81%A7%E9%80%81%...
上記にあるとおり、メールの送信設定を削除して再設定すれば解消した
署名は再設定が必要だった
ただし原因は不明のまま
■Googleカレンダー
Google カレンダーをウェブサイトに追加する - カレンダー ヘルプ
https://support.google.com/calendar/answer/41207?hl=ja
埋め込み式のGoogleカレンダーのパラメーターをカスタマイズする | ホームページ制作 大阪 SmileVision
https://www.smilevision.co.jp/blog/gcalendarcustom2/
■API
PHPでGoogleカレンダーから日本の祝日一覧を取得する - ブログ|Web・ホームページ制作の株式会社アウラ(大阪)
https://www.aura-office.co.jp/blog/php-get-holiday/
■Google日本語入力
開発終了の可能性があるみたい
素直にWindows標準のIMEを使う方がいいかもしれない
Google日本語入力はGboardに統合されるので乗り換えを、という通知が出ている模様 | orefolder.net
https://www.orefolder.net/blog/2020/08/google-to-gboard/
■Chromeリモートデスクトップ
Windowsのリモートデスクトップは、Windows.txt の「リモートデスクトップ」を参照。ただし敷居が高い
ChromeリモートデスクトップならHomeでも使えるうえに、ネットワークの知識もなしに利用できる
Chrome リモート デスクトップを使って他のパソコンにアクセスする - パソコン - Google Chrome ヘルプ
https://support.google.com/chrome/answer/1649523
【2021年版】Chromeリモートデスクトップの使い方。職場や自宅のパソコンを遠隔操作できる | できるネット
https://dekiru.net/article/21959/
【2020年版】Chromeリモートデスクトップで外出先から自宅や会社のPCを遠隔操作してみる : ビジネスとIT活用に役立つ情報
https://www.asobou.co.jp/blog/bussiness/chrome-remote
外出先からPCをWebブラウザで遠隔操作、「Chromeリモートデスクトップ」入門 (1/2):Google Chrome完全ガイド - @IT
https://www.atmarkit.co.jp/ait/articles/1301/30/news060.html
間違っても見られたくないChromeリモートデスクトップ中の画面を隠す方法:Google Chrome完全ガイド - @IT
https://atmarkit.itmedia.co.jp/ait/articles/2109/29/news029.html
「リモートで会社のPCを操作したい!! 最強のリモートデスクトップ環境への道(総集編)」――急遽テレワークを導入した中小企業の顛末記(76)【テレワーク顛末記】 - INTERNET Watch
https://internet.watch.impress.co.jp/docs/column/teleworkstory/1365460.html
「もうパソコンを持ち歩かなくてもいい」自宅から職場PCを遠隔操作する方法 職場のPCにあるソフトを家で使える | PRESIDENT Online(プレジデントオンライン)
https://president.jp/articles/-/53848
■準備
・操作される側のPC(ホストPC)
・操作する側のPC(クライアントPC)
・両方のPCに「Chrome」ブラウザのインストール
・両方のPCの「Chrome」ブラウザに、共通のGoogleアカウントでログイン
※リモート操作のために使用するGoogleアカウントは、操作される側のアカウントを使うといい
もしくはリモート操作のために、専用のGoogleアカウントを用意しておいてもいいかもしれない
※操作する側とされる側で別々のGoogleアカウントにログインして操作すると、
パソコンの共有を続行するかどうか、30分ごとに確認されるらしい。操作される側で続行ボタンを毎回押さないと、操作は中断されるらしい
長時間の操作が必要になる場合、操作する側とされる側で同じパソコンにログインしておくと無難
※デバイスを登録することにより、PINの入力を省略できるらしい
頻繁に接続することがあるなら検討する
■ホストPC
Googleアカウントにログインした状態で、
Chromeのアドレスバーに「remotedesktop.google.com/access」と入力する
「リモートアクセスの設定」画面が表示されるので、ダウンロードアイコンをクリックする
Chromeウェブストアの画面が立ち上がり、Chromeリモートデスクトップのページが開く
画面右上の「Chromeに追加」をクリックする
「「Chromeリモートデスクトップ」を追加しますか?」というダイアログが表示されるので「拡張機能を追加」をクリックする
「インストールの準備完了」が表示されたら「同意してインストール」をクリックする
「ダウンロードしたファイルを開く」というダイアログが表示されるので「はい」をクリックする
「名前の選択」画面が表示されるので、任意の名前を入力して「次へ」をクリックする
この名前は、操作する側のPC(クライアントPC)に表示されする
アカウントをもとにした名前などではなく、そのPCをもとにした名前にする方が良さそう
「PINの入力」画面が表示されるので、任意のPINを入力して「起動」をクリックする
設定したデバイス名が「オンライン」と表示されればOK
■クライアントPC
Chromeのアドレスバーに「remotedesktop.google.com/access」と入力する
Googleアカウントのログインを求められるので、ホストPCと同じアカウントでログインする
(ログイン済みの場合、右上のアイコンから必要に応じてユーザを切り替える)
ホストのデバイスが表示されることを確認し、クリックする
(ホストPCがスリープ状態になっていると、接続できないので注意)
PINコードの入力を求められるので、ホストPCで設定したPINコードを入力する
接続が完了し、ブラウザ内にホストPCの画面が表示される
ブラウザ内で操作を行うとホストPCでも同じ動きをする
右端にマウスを持っていくとメニューが評できるので、そこから「切断」をクリックする
もしくは、タブを閉じると接続が終了する
■操作メモ
ホストPCを操作するためのホストPC用のGoogleアカウントにログインしても、
他のタブではクライアントPC用のGoogleアカウントでのログインが保持される
クライアントPCで右端にマウスを持っていくとメニューを表示できる
そこから「全画面」をクリックすると全画面表示になる
■画像からテキストを抽出
画像をGoogleドライブにアップロード
右クリック → アプリで開く → Googleドキュメント
とすると、画像からテキストを抽出してくれる
■障害情報
以下でGmailとGoogleドライブなどの障害情報を確認できる
G Suite Status Dashboard
https://www.google.com/appsstatus#hl=ja
GmailとGoogleドライブで障害 メールの送受信や添付ファイルのダウンロードなどが安定せず - ITmedia NEWS
https://www.itmedia.co.jp/news/articles/1903/13/news074.html