Googleフォームをカスタマイズ＋reCAPTCHAv3導入 | BLOG | フロントエンド・コーディングの受託/請負制作専門フリーランス JWS
概要 先日納品した案件で、 Google フォームをカスタマイズ（オリジナルデザイン） GAS で自動メール送信 更に reCAPCHAv3 を導入 フォーム送信後はページ遷移しない という要件でフォームを作成しました。今後も実装することがあるかもしれないので、まとめます。 まずは GoogleForm を作成 GoogleForm を作成し、デベロッパーツールで必要な情報を取得します。 formからはactionの値を取得します。 以下の例だとhttps://docs.google.com/forms/u/0/d/e/1FAIpQLSdy0e3RjxHOkLv-qIXtLED3k3Fy5wZwCUAh1PSnNYNzrOJ9TQ/formResponseです。 <form action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSdy0e
Google フォームを reCaptcha 付でブログに埋め込む
name 属性 ソース内を data-params で検索しますと次のような箇所が作成した要素分見つかります。 <div jsmodel="CP1oW" data-params="%.@.[485493716,"メールアドレス",null,0,[[1736330280,[],true,[],[[2,102,[]]]]],null,null,null,[]],"i1","i2","i3",false]" 上の例で言えば 1736330280 に entry が付加され entry.1736330280 が name属性になります。 以前はこの name属性も各要素のタグの中に入力されていたのですが、いつからかその他の指定とともに配列として上位のタグの中で指定されるようになっています。また、この値は javascr
Googleカスタム検索のダサダサな検索Boxを好きなデザインにする方法｜鈴木麗子
Googleカスタム検索とはGoogleでサイト内検索ができる小窓を自分のウェブサイトに設置できるサービスです。 Googleアカウントにログインして下記ページから登録を行います https://cse.google.com/cse/all そして取得したJavascriptコードを、自サイトのHTMLソースの検索ボックスを設置したい位置に貼りつけます。 こちらが張り付けた例ペタリいまいちだ 一応テーマとかあったり、各パーツの色だけ変更できるんですが、もうそんな問題じゃないです。 Googleカスタム検索を好きなデザインに変更する！この検索ボックスはテーブル組（！）なのでCSSを上書きしても限界があります。 頑張ってCSSを駆使して何とかしているブログなどもありましたが、やだ、もっと素敵にしたいんです。 なんとやりかたは超簡単でした。 普通に好きにinputなどを設置して、パラメーターでカ
Googleアナリティクスのレポート作成ツール｜無料で使えるレポート作成ツール一覧 | 株式会社PLAN-B
データポータルは、Google公式のツールで自分が欲しい情報だけをボードにまとめることが可能です。アナリティクスは情報が多すぎて困るという方は、データスタジオを活用して自分が欲しい情報だけをまとめておくと時間短縮になります。登録も利用も無料でできるので、気になる方はチェックしてみてください。 Googleアナリティクスの機能でレポートを作るGoogleアナリティクスの中にも簡単にレポートを作っておける機能が存在します。今回はそちらの機能についても紹介していきます。以下の流れで簡単に作成できますのでぜひ試してみてください。 1.マイレポート一覧をクリック左のメニューからマイレポート一覧をクリックします。カスタムを押すと出てくるので、カスタム→マイレポート一覧の順に進めましょう。 2.ダッシュボードの「作成」をクリックすでにレポートを作成している方は、こちらに一覧が出ます。今回は新規で作ります
WordPressで制作したサイトが「モバイルフレンドリーではありません」と表示されたら
先日、Google検索結果でこのブログが表示されたときに「モバイルフレンドリーではありません」という表示が出ていることに気づきました。 気になって以下のページにURLを入力して調べたところ、WordPressのプラグインから出力されているCSSがGoogleにインデックスされないようブロックされており、それによってレイアウトが崩れてしまったようです。 モバイル フレンドリー テスト – Google Search Console この記事では、そのような場合の対処法について書いています。 対処法 最初に結論を書くと、昔から使用しているWordPressの場合、WordPressインストールしたフォルダー（ディレクトリ）にある robots.txt というファイル内に以下のように書かれている場合があります。 （最近新しくインストールしたWordPressではこの行はないはずです） Disal
Favicon そのSEOの価値とブログで注意すべき5つのポイント（辻正浩のブログSEO入門） - 週刊はてなブログ
ブログ運営で大切なことは、公開した記事がきちんと読まれることです。週刊はてなブログではSEO専門家の辻正浩さんに、現在のFavicon（ファビコン）の重要性と注意すべきポイントについて寄稿いただきました。どうぞお読みください。 SEO専門家の辻正浩( id:t-w-o )です。はてなブログのSEOをサポートしている外部スタッフとして、これまでも何度かはてなブログのSEOについてご紹介*1してきました。今年の6月から株式会社JADEを立ち上げてJADEの辻として活動しています。 今回は、はてなブログでも対応可能なFaviconの価値についてご紹介します。 モバイル検索結果にFaviconが登場 検索結果で選ばれるためのFaviconの作り方 5つのポイント サイズは48ピクセルの倍数 透過は使わない 複雑なものにはしない 正しく指定をする あなただけのFaviconに Faviconを設定す
急にカフェ始めた企業のマーケ担当必見！Google、食べログ、Yelp、Facebookほか申請方法まとめ | DevelopersIO
Developers.IO CAFE、オープン。昨秋「無人レジのシステムできた」って話が出て、イベントにデモ出展して、そろそろ冬かーって頃に「秋葉原オフィスの川向こうにカフェを」って話がまことしやかにささやかれ、年明けに具体化し、2月にオープン＆プレスリリース。まるでラブストーリーみたいに突然でしたね。昨日のことのように思い出します（忘れるものか！）。 そんなカフェはNHKをはじめ各メディアに取り上げられるなど好評です。自社のビビッドな動きをいかに露出させるかコントロールするマーケ部も、メンバー1人ひとりのがんばりによって店舗アートディレクションからWebまで手広くコミットできたと思います、嘘です。漏れましたねタスク。IT業界イチ従業員にはフィジカル店舗進出のWebマーケわからないことだらけでした。 今回はそんな反省を込めた記事として、「会社がカフェをオープンしたらWebでやるべきサービス
私が海外OTAのBooking.comやExpediaに登録していない理由～Googleマイビジネスの問題点
地方の観光業において、インバウンド対策（外国人の受け入れ）は重要です。 外国人対策と言えば、海外OTA（予約サイト）への部屋提供が必須。 海外OTAの登録は今や必須！！？ でも、私の宿はどちらにも登録していません。 ／ インバウンドやる気ないのーーーーー？ ＼ そう言われても反論できませんね。 登録したくない、できない理由は色々あるのですが、今日はその理由を一つだけお話しさせて頂きますね。これ、誰も指摘しないのですが、多くの宿泊施設が大変なことになっているのに気づいていないのです。 今、手数料の高い黒船OTAによるとんでもない侵略が始まっているのです！！ おはようございます！普段は民宿＆ダイビングショップの親父、コムサポートオフィスのアドバイザーもやっているガク（@kasumi_kadoya）です。 実は、昨日のお話の続き、Googleマイビジネスについてのお話になります。 最近、宿仲間の
検索エンジン最適化（SEO）スターター ガイド
フィードバックを送信 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 検索エンジン最適化（SEO）スターター ガイド ウェブサイトの構築時には、ユーザーを念頭に置き、見つけやすく閲覧しやすいサイトになるよう工夫するのが普通です。検索エンジンもユーザーの一種ですが、コンテンツを見つけるためにユーザーの手助けをします。SEO（検索エンジン最適化）では、検索エンジンにコンテンツを理解させることで、ユーザーが検索エンジンからサイトを見つけてアクセスすべきかどうかを判断できるようにします。 検索の基本事項では、ウェブサイトが Google 検索の表示対象となるために特に重要となる事項を説明しています。Google のインデックスに確実に登録される方法はありませんが、検索の基本事項に沿って作成したサイトは Google の検索結果に表示されやすくなります。SEO とは
Google検索結果にパンくずリストを表示し、クリックされやすくする方法
WEBサイトには、階層構造を表す「パンくずリスト」がグローバルメニューの下あたりによく設置されていますが、この「パンくずリスト」は、Google検索結果に表示することができます。検索結果のタイトルの下に表示されている無機質なURLを、階層構造を表した「パンくずリスト」を表示させて少しだけクッリクされやすくする方法を紹介します。 パンくずリストとは ウェブページの位置をツリー構造を持ったハイパーリンクの一覧として示すもの。パンくずナビ、トピックパス、フットパスとも言う。「パンくずリスト」という名前は、童話『ヘンゼルとグレーテル』で、主人公が森で迷子にならないように通り道にパンくずを置いていった、というエピソードに由来する。 ウェブディレクトリのような大規模なウェブサイト内において、利用者がサイト内での現在位置を見失わないようにし、ナビゲーションを助けるために使われる。 For example
XML サイトマップと RSS/Atom フィードのベストプラクティス
+1 ボタン 2 AMP 11 API 3 App Indexing 8 CAPTCHA 1 Chrome 2 First Click Free 1 Google アシスタント 1 Google ニュース 1 Google プレイス 2 Javascript 1 Lighthouse 4 Merchant Center 8 NoHacked 4 PageSpeed Insights 1 reCAPTCHA v3 1 Search Console 101 speed 1 イベント 25 ウェブマスターガイドライン 57 ウェブマスタークイズ 2 ウェブマスターツール 83 ウェブマスターフォーラム 10 オートコンプリート 1 お知らせ 69 クロールとインデックス 75 サイトクリニック 4 サイトマップ 15 しごと検索 1 スマートフォン 11 セーフブラウジング 5 セキュリティ 1
リッチ スニペットと構造化データについて - ウェブマスター ツール ヘルプ
フィードバックを送信 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 Google は、Google 検索がページのコンテンツを正確に理解するよう努めています。構造化データを使用してページの意図を伝えると、Google はそのページをより正確に理解できるようになります。 構造化データとは、ページに関する情報を様々なサイトで活用できるように標準化したデータ形式で、例えばレシピページでは材料、加熱時間と加熱温度などを詳細に提供できます。 構造化データをページに追加する理由 構造化データを追加することで、よりユーザーの興味をひく検索結果を表示できるようになり、ウェブサイトの利用も増えることが期待されます。これはリッチリザルトと呼ばれます。サイトに構造化データを実装しているウェブサイトの実例をいくつかご紹介します。 Rotten Tomatoes では、構造化デー
Google Maps APIのV2をV3へ移行する
Google Maps APIのv2が先月正式に非推奨になったのでwww.my-clip.netのAPIをv3へと移行した。v3になったことで大幅に変わった箇所がいくつかあるので下記に列挙しておく。 ・API Keyはいらない v2までは必須だったAPI Keyはもう必要ない。下記のようにVersionを含まないUrlをScriptタグのソースに指定すれば常に最新のライブラリが参照できるようになっている。 http://maps.google.com/maps/api/js?sensor=true_or_false ・google.maps名前空間の導入 v2まではグローバル空間にGMap2、GMarker、GPolyLineというクラスが配置されていたが、v3からはそれぞれgoogle.maps.Map, google.maps.Marker, google.maps.Polylineと
Just A Reflektor by Arcade Fire - Experiments with Google
This experiment is no longer active, but you can still learn about it on this page. “Just A Reflektor” is an interactive film directed by Vincent Morisset and featuring a new song from Arcade Fire. The film lets you cast a virtual projection on your computer screen by holding up your mobile device in front of your computer’s webcam. That way, you control all of the visual effects in the experience
Google 2013 年 上半期 話題となった検索キーワードランキング
メディア関係者向けお問い合わせ先 メールでのお問い合わせ: pr-jp@google.com メディア関係者以外からのお問い合わせにはお答えいたしかねます。 その他すべてのお問い合わせにつきましては、ヘルプセンターをご覧ください。
スマートフォン向け検索でのランキングの変更について
+1 ボタン 2 AMP 11 API 3 App Indexing 8 CAPTCHA 1 Chrome 2 First Click Free 1 Google アシスタント 1 Google ニュース 1 Google プレイス 2 Javascript 1 Lighthouse 4 Merchant Center 8 NoHacked 4 PageSpeed Insights 1 reCAPTCHA v3 1 Search Console 101 speed 1 イベント 25 ウェブマスターガイドライン 57 ウェブマスタークイズ 2 ウェブマスターツール 83 ウェブマスターフォーラム 10 オートコンプリート 1 お知らせ 69 クロールとインデックス 75 サイトクリニック 4 サイトマップ 15 しごと検索 1 スマートフォン 11 セーフブラウジング 5 セキュリティ 1
Google HTML/CSS Style Guide
Revision 2.1 This style guide contains many details that are initially hidden from view. They are marked by the triangle icon, which you see here on your left. Click it now. You should see “Hooray” appear below. Hooray! Now you know you can expand points to get more details. Alternatively, there’s a “toggle all” at the top of this document. This document defines formatting and style rules for HTML
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
Googleストリートビューで3年かけて米国を“横断”、仮想の長旅から見えてきたこと
はてなブログ | 無料ブログを作成しよう
