■目次・Google Maps API ・Google Analytics ・Google Analytics API ・Google Tag Manager ・Google Charts API ・Google Chart Tools ・Google Search Console ・Google Search Console ・Gmail ・画像からテキストを抽出 ・障害情報■Google Maps API■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日からの課金は無いみたい） 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 ■マップへの課金 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 Cloud の無料枠 | Google Cloud Platform の無料枠 https://cloud.google.com/free/docs/gcp-free-tier?hl=ja■Google Analytics■Google Analytics を導入する Googleアナリティクス導入時の設定方法について｜SEOラボ https://seolaboratory.jp/59695/ Googleアナリティクスで分析するサイトを追加する方法【簡単4ステップ】｜アクセス解析ツール「AIアナリスト」ブログ https://wacul-ai.com/blog/access-analysis/google-analytics-setting/googleanalytics-add-newsite/ ■解析されないとき 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 アナリティクス のタグを複数(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/ 業種: コンピュータ、電化製品 レポートのタイムゾーン: 日本 ■イベントトラッキング イベントトラッキングが反応しないので色々試したときのメモ 結論を書くと、以下のように「ラベルと値」だと反映されなくて「ラベルに直接値を設定」だと反映されるようになった 「ラベルと値」形式が何故反映されない理由は、現状不明なので要調査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 公式の解説 function内に書かずに、指定そのままにリンクタグ内に書いてみるか _gaq.push の書き方にしてみるか。でも http://www.myweb.jp.net/post-198/ を見ると ga() でいいみたい https://www.ja.advertisercommunity.com/t5/%E3%82%A2%E3%83%8A%E3%83%AA%E3%83%86%E3%82%A3%E3%82%AF%E3%... 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 ユニバーサルアナリティクスの場合は以下のコードでいいと書かれている onClick="ga('send', 'event', 'カテゴリ', 'アクション', 'ラベル', 値);" 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の見やすいカスタムレポートをまとめてみたよ！ - 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■Google Analytics APIサンプル https://refirio.net/google/analytics/ https://refirio.net/google/analytics/referer.php https://refirio.net/google/analytics/duration.php ■Google Analytics API を使う（2019年） 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)」などのように、イベントが発火したことが確認できる また、アナリティクスのリアルタイム解析からも、カウントを確認できる 確認できたら「プレビューモードを終了」をクリックする（終了すると、この時点ではアナリティクスにも反映されなくなる） これで確認も完了。最後に公開する 画面右上の「公開」をクリックする 「バージョンの公開と作成」が選択されていることを確認する 「バージョン名」と「バージョンの説明」に判りやすい名前と説明を入力する 今回はそれぞれ「初期設定」と「全ページにGAのPV計測タグを設定しました。」としておく 画面右上の「公開」をクリックする これで完了。アナリティクスのリアルタイム解析から確認する ■エクスポートとインポート コンテナのエクスポートとインポート - タグマネージャ ヘルプ 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": { 以下略「管理 → コンテナをインポート」 インポートするファイルを選択: いったん上でエクスポートしたファイルを選択してみる ワークスペースを選択: 既存 → ワークスペースを選択 インポート オプションを選択: 必要に応じて「上書き」か「統合」を選択。今回は「上書き」としてみる 「確認」をクリック ワークスペースに戻り、「現在編集中」という表示になる 画面右上の「公開」から公開する ■その他参考になりそうなページ 【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 Charts APIWebページ上にグラフを掲載できる 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 ToolsGoogle Charts API はJavaScriptで描画するが、 Google Chart Tools は一枚画像として結果を受け取ることができる Google Chart Tools入門 https://www.javadrive.jp/google-chart-tools/■Google Search ConsoleWordPressをもとにした、「sitemap.xml を作成して Google Search Console に登録する」手順 「Google XML Sitemaps」プラグインを使っている 【WordPress】サイトマップ作成からSearch Console登録までの全手順 https://saruwakakun.com/html-css/wordpress/sitemap■Google Search Console※未検証 ※サイト内検索を実装できる カスタム検索エンジン 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で送受信 公式の解説が詳しい 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/ 以下、実際に設定したときのメモ アプリパスワードの設定画面で2段階認証すると、「アプリ パスワード」というページに遷移した アプリ: 「その他（名前を入力）」を選択 アプリ名: Laravel と入力して「生成」ボタンを押すと、アプリパスワードが生成される この場合、以下の情報で送信できる HOST: smtp.gmail.com PORT: 465 USERNAME: Gmailのメールアドレス PASSWORD: 生成されたアプリパスワード ENCRYPTION: ssl ■外部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■画像からテキストを抽出画像を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