webサイト制作の勉強|2019年10月クラス用ブログ

ファリカテクニカルアカデミーのwebサイト制作科の授業解説ブログです。フェリカテクニカルアカデミーは池袋にある求職者支援訓練の学校です。

Google Formにオリジナルのcssを適用させてカスタマイズと自動返信機能を追加

以前授業でも使ったGoogleフォームですが、設置も簡単でスプレットシートと紐付けする事でお問い合わせ内容をデータベース化する事も簡単に出来てしまう、とても便利なツールですが、唯一の問題が「自分でCSSをいじれない」事です。特にレスポンシブサイトにGoogleフォームを設置する場合「自分でCSSをいじれない」事が大きなデメリットになってしまいます。

しかし、Googleフォームに「自身のcssを適応させる」事でレスポンシブサイトに最適なレイアウトで作る事が出来るため、唯一のデメリットも無くなります。

Googleフォームを作成する

www.google.com


HTMLで同じ項目のフォームを作成する

Chromeの検証機能を使ってGoogleフォームの「Action」と「name」の値を取得し、HTMLフォームに挿入する

f:id:yachin29:20200330115334p:plain





これでCSSだけでGoogleフォームが自由にカスタマイズ出来るようになります。スニペットなどを使ってリッチなフォームを作ってみましょう。

copypet.jp



自動返信機能をつける

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

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

 // 件名、本文、フッター
 var subject = "[お問い合わせありがとうございます。]"; 
 var body
 = "お問い合わせありがとうございます。\n\n"
 + "------------------------------------------------------------\n";
 var footer
 = "------------------------------------------------------------\n\n"
 + "後ほど担当者よりご連絡させていただきます。";

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


 // メール送信先
 var admin = "admin@example.com"; // 管理者(必須)
 var sendername = "管理者名もしくは会社名";//送信者名(必須)
 var cc = ""; // Cc:
 var bcc = admin; // Bcc:
 var reply = admin; // Reply-To:
 var to = ""; // To: (入力者のアドレスが自動で入ります)


 //------------------------------------------------------------
 // 設定エリアここまで
 //------------------------------------------------------------

 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(); // 入力値
 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;

 // 送信先オプション
 var options = {name: sendername};
 if ( cc ) options.cc = cc;
 if ( bcc ) options.bcc = bcc;
 if ( reply ) options.replyTo = reply;

 // メール送信
 if ( to ) {
 MailApp.sendEmail(to, subject, body, options);
 }else{
 MailApp.sendEmail(admin, "【失敗】Googleフォームにメールアドレスが指定されていません", body);
 }
 }catch(e){
 MailApp.sendEmail(admin, "【失敗】Googleフォームからメール送信中にエラーが発生", e.message);
 } 
}

vs code でEmmet機能を使う

EmmetというのはHTMLやCSSを効率よくコーディングするためのプラグインで、SublimeText、Dreamweaver、Bracket、vs codeなど様々なエディターやIDE統合開発環境)で利用することができます。もともとはZen-Codingというものでしたが、その次期バージョンがEmmetです。
Emmetを使う事でコーディング作業が効率化され、締めタグや必要最低限の属性を自動的に展開してくれるのでミス防止にも繋がります。


通常のHTMLタグ

h1やp、imgタグを入力して展開

classやidを付ける

「.」や「#」を付けて展開

要素を何も指定しないでclassかidだけを付けて展開すると自動的にdivタグになります。

タグを入れ子で展開する

header>nav.g-nav>ul>li*4>a
<header>
  <nav class="g-nav">
    <ul>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
    </ul>
  </nav>
</header>

タグを隣接で展開する

header+.main+footer
<header></header>
<div class="main"></div>
<footer></footer>

仮テキストを挿入する

lorem
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab deleniti fuga quis vitae velit consectetur reiciendis iusto sint exercitationem corrupti eaque magnam adipisci officia, minus dolorum iure aspernatur sequi placeat!

挿入したテキストにタグを展開する

授業などでもテキストデータを先にhtmlファイルにコピペしてから、コーディング作業をする事がよくあります。
その時に便利なのがこの方法です。ただ他のEmmet機能に比べ、少し面倒なので、ショートカットキーに登録しておきましょう。


1、 まず「control」+「shift」+「p」でコマンドパレットを開き、「キーボードショートカット」を開きます。
f:id:yachin29:20200327124425p:plain



2、次にemmetの項目を参照し、「ラップ変換」の項目に好きなキーをバインドしましょう。
f:id:yachin29:20200327124720p:plain

3、最後にhtml上のテキストをドラッグした状態で、バインドいたキーを押し、「ラップ変換」パレットを呼び出し、任意のタグを入力してenterキーを押して決定させます。

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




webbu.jp


サイトマップの作成

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


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


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



www.sitemapxml.jp


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


Google アナリティクス

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


www.google.com



wacul-ai.com

cssのdisplay:grid を使ってグリッドレイアウトを作ってみる

CSS グリッドレイアウトは、 表と同様に簡単に段組等が作れ、グリッドレイアウトによって要素を列と行に整列させることができます。 CSS グリッドを使用する事で表で実現するよりもより複雑なレイアウトが可能で簡単に実現できます。またflexboxの場合、多段組が苦手なので多段組の時にすごく便利です。


結論

レイアウトする際に授業では「float」「flex」「grid」の3種類を使用してきましたが「どれが一番優れているか」では無く、各プロパティの特徴を理解し、上手に使い分ける事が重要です。

float

写真にテキストを回り込ませたい時
f:id:yachin29:20181005094107j:plain

flexbox

1行もしくは1列のレイアウトの時
f:id:yachin29:20200325042443p:plain

display:grid

多段組の時


htmlの4つの箱を作成します

<div class="container">
<div class="left-top"></div>
<div class="left-bottom"></div>
<div class="right-top"></div>
<div class="right-bottom"></div>
</div>

css
1、まずはコンテナに

.container {
  display: grid;
}


2、次に中身(テンプレート)を作成。

.container {
  display: grid;

grid-template:
  "left-top right-top" 50%
  "left-bottom right-bottom" 50% /
  50% 50%;
}

.left-top{
grid-area: left-top;
background: #eb8787;
}
.left-bottom{
grid-area: left-bottom;
background: #d3c7c7;
}
.right-top{
grid-area: right-top;
background: #728cd4;
}
.right-bottom{
grid-area: right-bottom;
background: #8ae070;
}

3、最後にboxの余白の設定

.container {
  display: grid;

grid-template:
  "left-top right-top" 50%
  "left-bottom right-bottom" 50% /
  50% 50%;

gap:10px;
}
  • repeat() … repeat()関数で繰り返しパターンを指定出来ます。
  • 「auto-fit」と「auto-fill」の違い

auto-fillでは、親要素にスペースが余る場合、空のグリッドが作られます
auto-fitでは、親要素にスペースが余る場合、グリッド・アイテムの幅が変わってスペースが埋められます

  • minmax()

minmax()ではグリッドアイテムの最小幅と最大幅を指定しています。この記述だと最小幅が200px、最大幅が1fr(可変のフラクション)です。

fr

frとは「display: grid;」が指定された要素に対して有効な単位で、要素内の可用領域のうち占める割合を表す。Flexboxのflex-growと同じような振る舞いをすると理解してもらえれば良いでしょう。



.container{
max-width: 1220px;
margin: 0 auto;
display: grid;
gap: 10px;

/* 3x3のままフルードの場合 */
grid-template-columns: repeat(3,auto);

/* boxの幅の最小サイズを指定したい場合 */
/* grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); */
}

.box{
background: #eb8787;
height: 300px;
}

</style>
</head>
<body>
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
</div>
</body>


www.webprofessional.jp


ics.media

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

年表や沿革などで使うタイムラインを作ってみましょう。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 -->