ゆめの学習記録

★職業訓練校修了後の復習用★

タイムラインをサイトに埋め込む

年表や沿革などで使うタイムラインを作ってみましょう。cssのみで作れるシンプルな物のありますが、今回は「CodyHouse Framework」というフレームワークを使ったアニメーションタイムラインを作成してみます。


Vertical Timeline

codyhouse.co



さらにCodyHouse Framework 本体のデータも必要なのでgithubからダウンロードしておきましょう。

github.com




 

<div class="cd-timeline js-cd-timeline">
<div class="container max-width-lg cd-timeline__container">


<div class="cd-timeline__block">
<div class="cd-timeline__img cd-timeline__img--picture">
<img src="img/cd-icon-picture.svg" alt="Picture">
</div> <!-- cd-timeline__img -->

<div class="cd-timeline__content text-component">
<h2>Title of section 1</h2>
<p class="color-contrast-medium"></p>
<div class="flex justify-between items-center">
<span class="cd-timeline__date">2019/10</span>
</div>
</div> <!-- cd-timeline__content -->
</div> <!-- cd-timeline__block -->




<div class="cd-timeline__block">
<div class="cd-timeline__img cd-timeline__img--picture">
<img src="img/cd-icon-picture.svg" alt="Picture">
</div> <!-- cd-timeline__img -->

<div class="cd-timeline__content text-component">
<h2>Title of section 2</h2>
<p class="color-contrast-medium"></p>
<div class="flex justify-between items-center">
<span class="cd-timeline__date">2020/03</span>
</div>
</div> <!-- cd-timeline__content -->
</div> <!-- cd-timeline__block -->


</div><!-- container -->
</div><!-- cd-timeline -->

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

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 アナリティクス

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に登録します。


Google アナリティクス

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


www.google.com



wacul-ai.com