Google Fromに自動返信機能を付ける

webサイト制作



Googleスプレットシートにはスクリプトを埋め込む機能が付いています。今回はこの機能を使って、自動返信メールを送ってみます。


 

function sendMailGoogleForm() {
 Logger.log('sendMailGoogleForm() debug start');

 //------------------------------------------------------------
 // 設定エリアここから
 //------------------------------------------------------------

 
 // 件名、本文、フッター
 var subject = "[メールの件名]"; 
 var body
 = "お問い合わせありがとうございます。\n\n"
 + "---------------------------------------\n";
 var footer
 = "---------------------------------------\n\n"
 + "お問い合わせありがとうございます。\n"
 + "内容を確認させて頂き、後日担当より\n"
 + "ご入力頂きましたメールアドレス宛に返信致しますので\n"
 + "よろしくお願いいたします。\n"
 + "\n"
 + "株式会社ふぇりか\n\n"


 // 入力カラム名の指定
 var NAME_COL_NAME = 'お名前';
 var MAIL_COL_NAME = 'メールアドレス';


 // メール送信先
 var admin_name ="クライアントの名前";//送信メールの名前 
 var admin = "クライアントのメールアドレス"; // 先程作成したアドレスに書換
 var bcc = admin;// bccがいらない場合は、adminを""に書換
 var reply = admin;
 var to = ""; // To: （入力者のアドレスが自動で入ります）

 

 // 送信先オプション
 var options = {};
 if ( admin_name ) options.name = admin_name;
 if ( bcc ) options.bcc = bcc;
 if ( reply ) options.replyTo = reply;
 
 
 //------------------------------------------------------------
 // 設定エリアここまで
 //------------------------------------------------------------

 try{
 // スプレッドシートの操作
 var sheet = SpreadsheetApp.getActiveSheet();
 var rows = sheet.getLastRow();
 var cols = sheet.getLastColumn();
 var rg = sheet.getDataRange();
 Logger.log("rows="+rows+" cols="+cols);

 // メール件名・本文作成と送信先メールアドレス取得
 for (var i = 1; i <= cols; i++ ) {
 var col_name = rg.getCell(1, i).getValue(); // カラム名
 var col_value = rg.getCell(rows, i).getValue(); // 入力値
 
////////////タイムスタンプを消す////////////////
if (col_name === "タイムスタンプ"){
  continue;
}
////////////////上記を入れる////////////

 body += "【"+col_name+"】\n";
 body += col_value + "\n\n";
 if ( col_name === NAME_COL_NAME ) {
 body = col_value+" 様\n\n"+body;
 }
 if ( col_name === MAIL_COL_NAME ) {
 to = col_value;
 }
 }
 body += footer;


 // メール送信
 if ( to ) {
 /* メールを送信 */
 GmailApp.sendEmail(
 to, //toアドレス
 subject, //表題
 body,　//本文
 {
 from: admin,　//fromアドレス
 name: admin_name　//差出人
 }
 ); 
}else{
 MailApp.sendEmail(admin, "【失敗】Googleフォームにメールアドレスが指定されていません", body);
 }
 }catch(e){
 MailApp.sendEmail(admin, "【失敗】Googleフォームからメール送信中にエラーが発生", e.message);
 } 
}
 

GoogleサーチコンソールとGoogle アナリティクス

webサイト制作

Google Search Consoleとは

Search ConsoleとはWebサイトの検索結果の状況とそれに付随する情報（Webサイトの改善案・被リンク数・キーワードなど）やGoogleが認識しているページ数、Googleクローラーのクロール状況が把握できるツールです。
Search Consoleを導入する事で、どういった検索ワードでそのサイトに来たか、Googleクローラーを呼び寄せたり（Fetch as Google）など、いわば「サイトへの流入前のユーザーのデータ」がわかります。
そう言ったデータを元にサイトを改善して、サイトの集客を増やしたり、クリック数を増やしたりしていきます。



https://www.google.com/webmasters/tools/home?hl=ja




www.waca.associates




 

サイトマップの作成


cluster-seo.com



基本的にはサーチコンソールを入れればgoogleのクローラーはほぼ全てのページをクロールしてくれます。ただ、ページの作りや品質によってはクロールされない場合があります。


・サイトのサイズが非常に大きい。
・サイトにどこからも リンクされていない、または適切にリンクされていない コンテンツ ページのアーカイブが大量にある。
・サイトが新しく、外部からのリンクが少ない。


その場合、サイトマップを作成する事でGoogleクローラーにどんなページがあるのかを通知する事が出来ます。

最終更新日:lastmodの自動取得

「する」を選択すると、更新したページのURLを優先的にクロールしてくれます。

サイトの更新頻度

普段の更新頻度を選びましょう。たとえばサイトの更新が週に一度であれば「一週間ごと」です。これによってクロールの頻度が変わる可能性があるので、自分のサイトに合わせて適切な選択をしましょう。

優先度の自動設定

サイト内のページの優先順位を、自動で設定するかどうかの選択です。「する」を選択すると、トップページは1.0、下層ページはそれより小さい値が、サイトマップに自動で記載されます。値は0.1~1.0まであり、大きいほど優先度が高いということになります。

除外ディレクトリ

サイトマップに載せたくないページ(使っていないページなど)のURLを記入しましょう。

同一タイトルURLの除外

「する」を選択すると、タイトルや内容が同一のページがある場合に、それらのURLが重複して表示されるのを防ぐことができます。



www.sitemapxml.jp


上記のようなジェネレーターで作る事も出来ますし、手書きで作る事も出来ます。作成した「sitemap.xml」をクロールさせたいサイトのルートディレクトリにアップロードし、Search Consoleに登録します。


wordpressの場合

webst8.com



https://kinsta.com/jp/blog/yoast-seo/



goworkship.com



 

Google アナリティクス

一方、Google アナリティクスはユーザーがサイトに流入後のサイト内での行動を把握するためのツールです。


www.google.com



wacul-ai.com

フォーム-ラジオボタンが選ばれた状態でページ遷移させる

webサイト制作

今回のフォームは、商品紹介ページに「商品A」「商品B」「商品C」の3つのコンテンツがあり、それぞれの購入ボタンをクリックして申し込みページに遷移した時、それぞれの商品のラジオボタンにチェックがはいっている状態にしたい。
申し込みページ以降は基本的には前回のフォームと一緒ですが、セキュリティやリダイレクトなど細かい機能を付けていきます。

ページ構成

1.商品紹介ページ「item.html」
2.申し込みページ「input.php」
3.確認ページ「confirm.php」
4.完了ページ「thanks.html」

今回の ポイント

  • 「購入ボタン」をクリックしてページ遷移した時にJavaScriptの「location.hash 」を使って、選んだ商品のラジオボタンがcheckedの設定になっているようにする
  • 確認、完了ページにアクセス出来ないように申し込みページに戻るリダイレクトを設定
  • 文字列を入力する項目にはプログラムを入れられないようにセキュリティをかける
商品紹介ページ「item.html」

商品紹介ページにボタンを設置

<p><a href="out.php#item_01">商品Aはこちら</a></p>
<p><a href="out.php#item_02">商品Bはこちら</a></p>
<p><a href="out.php#item_03">商品Cはこちら</a></p>
2.申し込みページ「input.php」
<p><input name="itemname" value="商品A" id="item_01" type="radio">商品A</p>
<p><input name="itemname" value="商品B" id="item_02" type="radio">商品B</p>
<p><input name="itemname" value="商品C" id="item_03" type="radio">商品C</p>

 

さらにJavaScriptでcheckedの値を取得

window.addEventListener('DOMContentLoaded', function(e){
document.querySelector(location.hash).checked=true;
});
リダイレクトの設定

issetを使う事で変数がセットされているか確認する事が出来ます。
あたまに「!」を付ける事で逆の意味になるので、以下の記述で「$_POST['name']」に値がセットされていなかったら、という意味になります。

//$_POST["name"]の値が空だったらLocationで指定しているファイルに強制移動（リダイレクト）させる
if(!(isset($_POST['name']))){
 header('Location:index.html');
 exit;
}
入力画面に戻るボタン

確認画面に入力画面に戻るボタンを設置

<button type="button" onclick=history.back()>戻る</button>
文字列を入力する項目にセキュリティ
$name = htmlspecialchars($_POST["onamae"],ENT_QUOTES);
自身の完了画面ページに遷移する

サンクスページを作成し、送信ボタンを押した後に自作したサンクスページへajaxでページ遷移させましょう。

$(function(){
$('#g-form').submit(function (event) {
var formData = $('#g-form').serialize();
$.ajax({
  url: "google FormのURL",
  data: formData,
  type: "POST",
  dataType: "xml",
  statusCode: {
    0: function(){
      window.location.href = "thanks.html";
      },
    200: function(){
     //失敗したときの処理
      }
    }
  });
//googleformへのページ遷移をキャンセル
event.preventDefault();
});
});

※formタグに#g-formを付ける

pushStateとajaxを使ってSEOに強い無限スクロールページを作成する

webサイト制作

SEOに適した無限スクロールの導入

FacebookやTwitter、Pinterestなどのソーシャルメディアサイトが使っている事で一躍有名になった無限スクロール（英: Infinite Scrolling）ですが、今でもシングルページを利用したウェブサイト、特にコンテンツの量が豊富なギャラリー的なサイトではよく見かけます。
しかし、よく見られるjQueryを使ったシンプルな無限スクロールはコンテンツをすべて１つのHTMLファイル上に記述しておいて、スクロールするたびに「display:block」と「display:none」を使って表示させていく、というものです。人が見る分にはこの形でも良いでしょうが、Googlebot に対してとなると話が変わってきます。

ご自身のサイトのニュース フィードやピンボードで、ユーザーの利便性を考えて無限スクロール（英語）を使用している方もいらっしゃるでしょう。しかし、Googlebot に対してとなると話が変わってきます。無限スクロールでは、クローラーがユーザーの行動（スクロールやボタンを押してさらにアイテムを読み込むなど）を常にエミュレートできるとは限らないため、フィードやギャラリー内のすべてのアイテムにアクセスできないことがあります。クローラーがアクセスできないコンテンツは、検索結果に表示されることもないでしょう。

無限スクロール ページからリンクされている個別のアイテムを検索エンジンがクロールできるようにするには、無限スクロールを分割した一連のページ群を生成するようにしましょう。

作例

felica29.starfree.jp



Google ウェブマスター向け公式ブログ [JA] : 検索エンジンとの相性を考慮した無限スクロールのベストプラクティス


 

pushStateによるブラウザの履歴の更新

pushStateとは？

pushStateとは、HTML5でサポートされるAPIです。
ページを遷移せずHTML（の一部）を変えた場合でもブラウザに履歴を残し、また一意のURLを割り当てることが可能です。
HTMLの中身が変わってもAjaxはページを遷移しないのでURLが同じままです（#以下が入れ替わるだけで一意のURLとして処理しない）。
ブラウザの戻るボタンを押しても前のコンテンツを再び表示させることはできません。本当に前のページに戻ってしまいます。なのでGoogleは、クロール・インデックスできるように特殊な仕様をサポートしてくれたわけです。しかしpushStateを使えば、Ajaxで変化させたそれぞれのコンテンツに対してユニークなURLを割り当てられるのです。
つまり検索エンジンにとってクロール・インデックスしやすくなります。

 



JavaScriptが切れている状態でも手動でページ遷移出来るような設定も取り入れ、検索エンジンとの相性を考慮した無限スクロールにカスタマイズしましょう。


www.suzukikenichi.com


さらに簡易的なリダイレクト機能を使って、下層ページから入った時にトップページに戻るよう設定しましょう。

<meta http-equiv="refresh" content="0;URL='index.html'" />

 

以上の内容を踏まえて、今回は検索エンジンが処理しやすい無限スクロールを作っていきましょう。

今回のポイント

  • ajaxを使ったシームレスなページ遷移
  • HTML5のAPIを使い、各ページにユニークなURLやタイトルを最適化する事が出来る
  • 無限スクロールページを、JavaScript が無効でもアクセス可能な形にする。
  • 各コンテンツページにはトップページに自動的に戻るリダイレクト機能を実装
  • 相対パスはNGなのでルートパス、もしくは絶対パスを使用すること
  • SPA(Single Page Application)の基本的な考え方を理解する

今回の注意点

  • パスは全てルートパス
  • タイトルは必ずページ毎に設定する
  • トップページに「トップに戻るボタン」を設置
  • footerは最後のページに設置

 


※特にページのタイトルの最適化は非常に大事です。通常の無限スクロールは1枚のhtmlファイルに無数のコンテンツが記述されていますが、今回のようにhtmlファイルを細分化する事で、コンテンツに応じたより細かいタイトルやURLの設定が可能になります。


ajax

pikawaka.com


 

API

APIとは「Application Programming Interface（アプリケーション・プログラミング・インターフェイス）」の略語であり、「ある1つの機能に特化したプログラムで共有可能なもの」や「ソフトウェアの機能を共有する仕組み」のことです。よく使う機能がAPIとして用意されていれば、わざわざ一からプログラムを組む必要はありません。必要に応じてAPIを利用し、効率的に開発を進められます。


SPA(Single Page Application)

ブラウザによるページ遷移を行うことなく、単一のWebページでコンテンツの切り替えを行うことで、ユーザーのUXが向上します。JavaScriptフレームワーク（Angular、Vue.js、Reactなど）で作成される事が多いです。



github.com

 

<script>
		$('#container').cleverInfiniteScroll({
			contentsWrapperSelector: '#container',
			contentSelector: '.wrapper',
			nextSelector: '#next',
		});
	</script>

 

デモページ
felica29.starfree.jp



 

Javascriptによるリダイレクト

Javascriptによるリダイレクトの方法もあるので、試してみましょう。

setTimeout("redirect()", 0);
function redirect(){
    location.href='../index.html';
}

 


トップページ

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pushstateとajaxを使った無限スクロール</title>
<link rel="stylesheet" href="/infinite-scroll/css/style.css">
</head>
<body id="top">
<div id="container">
<div class="wrapper">

<h1>これだけは呼んでおけ！厳選6冊</h1>
<p class="lead">歴史大河小説から近未来SF作品まで網羅した、厳選6冊を紹介</p>
<div class="main-visual">
<img src="/infinite-scroll/img/main.jpg" alt="">
</div>

</div><!-- /.wrapper -->
<a href="/infinite-scroll/content01/" id="next">次のページへ</a>

</div><!-- /#container -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="/infinite-scroll/js/jquery.clever-infinite-scroll.js"></script>
<script>
$(function(){
$('#container').cleverInfiniteScroll({
			contentsWrapperSelector: '#container',
			contentSelector: '.wrapper',
			nextSelector: '#next',
		});
});
</script>
</body>
</html>

 

下層ページ

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="refresh" content="0;URL='/infinite-scroll/'" />
<title>新・平家物語</title>
<link rel="stylesheet" href="/infinite-scroll/css/style.css">
</head>
<body id="contents">
<div id="container">

<div class="wrapper">
<h1>Contents-01</h1>
<div class="content-box">
<p class="photo"><img src="https://placehold.jp/3d4070/ffffff/500x500.jpg" alt=""></p>
<div class="txt-box">
</div>
</div><!-- /.content-box -->
</div><!-- /.wrapper -->
<a href="/infinite-scroll/content02/" id="next">次のページへ</a>

</div><!-- /#container -->
</body>
</html>

 





digitalidentity.co.jp


note.com




 

面接について考える

note.com

新しいcssを使ってみる

CSS基礎

ユーザーのアンケート結果からその年のCSSの流行りや動向がわかるThe State of CSS 2020というサイトの中で、今後さらに利用頻度が増していくであろう、新しいプロパティをいくつか試してみましょう。
ただ、新しいプロパティはブラウザごとに対応状況が違うので、必ずcan I use 等で対応状況を確認しましょう。


backdrop-filter

backdrop-filterは要素の背景をぼかす事が出来ます。filterプロパティと似ていますが、filterは適用した要素自体がボケますが、backdrop-filterは適用した要素の背後の領域の色味やぼけ具合が変化します。なので、基本的にはRBGAとセットで使う事がほとんどです。

使用例

monomode.co.jp


 

対応ブラウザ状況

Edge：OK
Firefox：要設定変更
Chrome：OK
Safari：要ベンダープレフィックス



scroll-snap

scroll-snapを使うと、画面をスクロールしたときに特定の画面領域で止まるように制御できます。縦スクロールだけでなく横スクロールにも対応しています。

対応ブラウザ

scroll-snapはすべてのモダンブラウザで対応しています。


alvarotrigo.com

 

aspect-ratio

例えば、要素の幅に対してアスペクト比を使って高さを設定したい場合、今までは1:1ならpadding-top: 100%、16:9ならpadding-top: 56.25%というようにpaddingを使う方法が一般的でした。その計算や記述が不要になり、CSSで基準のwidthを指定し、aspect-ratioに比率を指定するだけでheightが自動的に算出され、アスペクト比を保つことができます。


 

 


 

対応ブラウザ状況

Edge：OK
Firefox：OK
Chrome：OK
Safari：OK

主要ブラウザーが全て対応しているので、今後は積極的に使っていきましょう。


2020.stateofcss.com


www.mitsue.co.jp