Memo

メモ > 技術 > サービス: Google

■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 課金の手続きが完了していないと、突然以下のような表示に変わるみたい。 GoogleMapでFor development purposes onlyと表示された際の対策 | 己で解決!泣かぬなら己で鳴こうホトトギス https://onoredekaiketsu.com/for-development-purposes-only-is-displayed-on-google-map/ 突然のアクセス増加や不正アクセスにより、課金額が跳ね上がる可能性がある 以下などを参考に、不正利用対策と課金アラートを設定しておく 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/ GA4とは?GAとGA4の違いを徹底解説! https://infinity-agent.co.jp/lab/googl-analytics4/ 【基礎知識】GA4とは?旧GA(UA)との違いを具体的に解説! | 地方企業を支援するデジタルマーケティング会社「サンロフト」 https://www.sunloft.co.jp/dx/blog/ga4/ 「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 ■UAとGA4の違い 主に以下のような違いがある ・UAはセッションやページが軸となっているが、GA4はイベントを軸に計測する ・GA4はWebサイトとアプリをまたいで計測できる ・GA4はプライバシーに配慮された作りになっている ・「直帰率」という概念が無くなり、「エンゲージメント率」が追加された 「離脱率」「PV数」「ページ/セッション」も廃止された (GA4の「探索レポート」で再度追加されたらしい) ・コンバージョンのカウント方法が変わった ■ページの表示回数を確認 「エンゲージメント → ページとスクリーン」から確認できる ■コンバージョンを確認 「エンゲージメント → コンバージョン」から確認できる コンバージョンの設定は、以下のページなどを参考にあらかじめ行っておく GA4のコンバージョン設定を【はじめから丁寧に】解説!設定手順・分析方法・トラブル対処法 |インターネット広告会社・Web広告代理店|株式会社ユニークワン https://unique1.co.jp/column/analytics/4688/ 【画像付き解説】GA4のコンバージョン設定をマスターしよう! https://infinity-agent.co.jp/lab/ga4_conversionsetting/ ■イベントトラッキングを確認 「エンゲージメント → イベント」から確認できる イベントトラッキングの設定は、このファイル内の「Google Analytics(ユニバーサルアナリティクス) → イベントトラッキング」を参照 ■SNSからの流入を確認 Googleアナリティクス(GA4)で、Instagramからの流入を確認 | Houn(ほううん) https://tanomasaki.com/ga4-social-items/ GA4でSNSからの流入を確認する方法 - サンクレイオ翼株式会社 映画宣伝、歯科医院特化型ウェブマーケティング、メディア企画・編集・制作 https://sunkleio-t.com/blog/ga4-source-sns/ ■ユニバーサルアナリティクスからの移行 自サイトに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がサイトをどのように評価しているかを確認できる それをもとに最適化を行うことができる ■サイトの登録 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
■Looker Studio(旧データポータル)
※未検証 様々なデータをリアルタイムに反映させたレポートを作成できる無料のBIツール GA4、Search Console、広告、スプレッドシートなどのデータを集約して可視化できる …らしい 【図解】Looker Studioとは?使い方から活用事例・基礎を学べる本まで解説|BeMARKE(ビーマーケ) https://be-marke.jp/articles/knowhow-looker-studio 【初心者向け】図解あり!GoogleのLooker Studio(旧データポータル)使い方を解説! - 株式会社PLAN-B https://www.plan-b.co.jp/blog/seo/31762/ Looker Studioの使い方を解説!基礎から困ったときの対処法まで網羅 https://digima.cocoo.co.jp/media/dx-lookerstudio
■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 Fonts
「Web.txt」を参照
■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 && $response['score'] >= 0.5) { 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!'); }
「success」の他に「score」の値も返され、これを使うことでより精度の高いロボット判定ができるとされている ひとまず「スコアが0.5以上なら人間とみなす(0.5より小さければロボットとみなす)」の指定をしておくと良さそう 手動でGoogle reCAPTCHAを設定する https://ichikawa-webdesign.com/archives/6531 reCAPTCHA v3 に対して Autify でテスト自動化してみた - Qiita https://qiita.com/hiroxyy/items/fd5f3d5738f0fc770fc9 ■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
■Google Colaboratory
Colaboratory へようこそ - Colaboratory https://colab.research.google.com/?hl=ja 【Colab 入門】Google Colaboratory とは?使い方・メリットを徹底解説! | キカガクブログ https://blog.kikagaku.co.jp/google-colab-howto 機械学習といえばJupyter Notebook!! ColabとVS Codeを比較してみた!! - Qiita https://qiita.com/hirokisakabe/items/21992cd96e4540e0c332 ※Jupyter Notebookをベースにした開発環境 Amazon SageMaker Studio Labでも同じような環境が提供される 上記解説ページを参考に、「sample_data」と同じ階層に「click.csv」を配置 ダブルクリックすると、画面の右側にファイルの内容が表示された click.csv
x,y 235,591 216,539 148,413 35,310 85,308 204,519 49,325 25,332 173,498 191,498 134,392 99,334 117,385 112,387 162,425 272,659 159,400 159,427 59,319 198,522
コードとして以下を入力して実行
import numpy as np import matplotlib matplotlib.use('Agg') import matplotlib.pyplot as plt # 学習データを読み込む train = np.loadtxt('click.csv', delimiter=',', dtype='int', skiprows=1) train_x = train[:,0] train_y = train[:,1] # プロット plt.plot(train_x, train_y, 'o') plt.savefig('graph.png') # クリア plt.clf() plt.close()
「click.csv」と同じ階層に「graph.png」が作成された ダブルクリックすると、画面の右側にファイルの内容が表示された(グラフにプロットされた画像が表示された) 続いて、一次関数の学習データをプロットするコードを入力して実行してみる(コードは「Python.txt」を参照) 数秒待つと、コードの下部に以下の実行ログが表示された
1回目: theta0 = 8.682, theta1 = 2.127, 差分 = 76337.7477 2回目: theta0 = 17.091, theta1 = 3.954, 差分 = 73314.7729 3回目: theta0 = 25.333, theta1 = 5.745, 差分 = 70411.5079 4回目: theta0 = 33.409, theta1 = 7.499, 差分 = 67623.2122 5回目: theta0 = 41.324, theta1 = 9.219, 差分 = 64945.3330 〜中略〜 390回目: theta0 = 428.988, theta1 = 93.443, 差分 = 0.0114 391回目: theta0 = 428.991, theta1 = 93.444, 差分 = 0.0109 392回目: theta0 = 428.994, theta1 = 93.445, 差分 = 0.0105 393回目: theta0 = 428.997, theta1 = 93.446, 差分 = 0.0101 394回目: theta0 = 429.000, theta1 = 93.446, 差分 = 0.0097
また、「click.csv」と同じ階層に「graph.png」が作成された ダブルクリックすると、画面の右側にファイルの内容が表示された(グラフにプロットされた画像が表示された) ■意図しないグラフが描画される場合 当初「値の予測はできているようだが、グラフの傾きがおかしい」というものが描画された 結論としては、グラフ出力を実行したあとに以下を追加すれば解消された
plt.clf() plt.close()
明確にメモリの開放を行わないと、描画データは残り続けるようなので注意 plt.close() だけではメモリが解放されない場合がある - Qiita https://qiita.com/Masahiro_T/items/bdd0482a8efd84cdd270
■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で受け取ったメールを転送する2つの方法 https://digitor.jp/textbook/gmail-send-on/ Gmail のメールを他のアカウントに自動転送する - Gmail ヘルプ https://support.google.com/mail/answer/10957?hl=ja ■メールを複数のアドレスに転送 Gmailで特定のメールを複数のアドレスに自動転送する方法 | Free Style https://blanche-toile.com/tools/gmail-auto-forwarding ■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の値を入力する 以下が表示される
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フォト
■ストレージの容量を確保 写真と動画のバックアップの画質を選択する - Android - Google フォト ヘルプ https://support.google.com/photos/answer/6220791?hl=ja&co=GENIE.Platform%3DAndroid#zippy=hl=ja iPhoneのGoogleフォトアプリから操作した 右上のアイコン → Googleフォトの設定 → バックアップ → バックアップの画質 からで「保存容量の節約画質」を選択した
■Google日本語入力
開発終了の可能性があるみたい 素直にWindows標準のIMEを使う方がいいかもしれない Google日本語入力はGboardに統合されるので乗り換えを、という通知が出ている模様 | orefolder.net https://www.orefolder.net/blog/2020/08/google-to-gboard/
■Google PageSpeed Insights
PageSpeed Insights https://pagespeed.web.dev/?hl=ja 2023年度版 Google PageSpeed Insights(ページスピードインサイト)を使って読み込み速度を改善したら、何点になるのかチャレンジしてみた|CMA BLOG|静岡・浜松の戦略的Webマーケティング|株式会社シーエムエー https://www.akindo2000.net/blog/google-pagespeed-insights/ ■Basic認証に対応する Basic認証があると計測できない Apache2.2の場合、以下のようにするとPageSpeed Insightsからのアクセスを許可できる
Satisfy Any BrowserMatchNoCase Chrome-Lighthouse isLighthouse=1 Order Deny,Allow Deny from all Allow from env=isLighthouse
Apache2.4の場合、以下で対応できるはず(未検証)
SetEnvIf User-Agent "Chrome-Lighthouse" isLighthouse <RequireAny> Require env isLighthouse Require valid-user </RequireAny>
nginxの場合も、また改めて対応方法を調べたい (サーバメモの「Basic認証でアクセス制限」にある「Basic認証でアクセス制限」も参照)
■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

Advertisement