WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

webサイトにGoogleAPIを導入する

Googleが提供しているGoogleAPIを使うことで簡単に様々な便利な機能をwebサイトに導入する事が出来ます。
Webサイトにスケジュール表やメールフォームを追加したい場合、PHPで作成する事が可能ですが、「Googleカレンダー」と「Googleフォーム」を使うのも選択肢の1つです。2つともGoogleのアカウントさえあれば、無料で特別なスキルもいらずに簡単に作成する事が出来ます。
さらにGoogleユーザー同士でドキュメントの共有や編集も出来ます。

APIとは

APIとは、アプリケーションプログラムインターフェイスの略語で、プログラミングの際に使用できる命令や規約、関数等の集合の事を指す。 ソフトウェア開発の際、いちから全てを作るより、APIを利用すればもともとあるプログラムを呼び出して、その機能を組み込んだソフトウェアを開発することができる。

Googleフォームの便利なポイント

  • HTML・PHPの知識が無くても、簡単にフォーム機能をwebサイトに導入する事が出来る。
  • 入力データをスプレットシートに自動で保存してくれる
  • Googleフォームの管理画面で編集が可能
  • セキュリティー・サーバー運用もGoogleが管理しているのでとりあえずは安心。それでも不安な人は有料のアカウントであるGoogle Apps for Workを使うと、最高度のセキュリティーが受けられる

Googleフォームを作る

f:id:yachin29:20161202102606p:plain


設問が済んだら、コードを取得してhtmlファイルにコピペするだけ!
f:id:yachin29:20161202104622p:plain







nendeb.com

jQueryでのパララックス

パララックスとは、視差効果のことです。
Webデザインにおけるパララックスはスクロールなどの動作に応じて、複数のレイヤー(層)にある要素を異なるスピードで動かすことで、「立体感や奥行きを演出」、「フェード・拡大縮小・回転などの視覚的エフェクト」を演出する手法を指します。




最近は一時期よりは減りましたが、シングルページの縦長ページではまだまだ見かけるデザインです。
シングルページはページデザインが単調になりがちなので、パララックスやスクロールアニメーションを使って、アイキャッチを作りましょう。


pogg-sweetpotatopie.com




on-ze.com


<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="js/script.js"></script>
</head>

<body>
<div class="parallax para-box" data-height="70vh" data-speed="0.8" data-mobile="false">
<div class="para_img background"></div>
</div><!--/#para-box-->

<div class="parallax para-box" data-height="70vh" data-speed="0.8" data-mobile="false">
<div class="para_img background"></div>
</div><!--/#para-box-->

<div class="parallax para-box" data-height="70vh" data-speed="0.8" data-mobile="false">
<div class="para_img background"></div>
</div><!--/#para-box-->

<div class="parallax para-box" data-height="70vh" data-speed="0.8" data-mobile="false">
<div class="para_img background"></div>
</div><!--/#para-box-->

<div class="parallax para-box" data-height="70vh" data-speed="0.8" data-mobile="false">
<div class="para_img background"></div>
</div><!--/#para-box-->
</div>

<script src="js/parlx.js"></script>
<script>
$('.parallax').Parlx({
item: '.background',
});
</script>
</body>
</html>


スタイルシート

.parallax {
	position:relative;
	height:80vh;
	overflow:hidden;
}
.background {
	position:absolute;
	background-repeat:no-repeat;
	background-size:cover;
}

jquery

/*!
* parlx.js v1.0
* Copyright 2017-2018 Jakub Biesiada
* MIT License
*/

class Parlx {
  constructor(elements, settings = {}) {
    if (elements.length > 1) {
      this.init(elements, settings);
      return;
    } else {
      this.element = elements;
    }

    this.settings = this.settings(settings);

    this.parallaxEffect();
    this.addEventListeners();
  }

  init(elements, settings) {
    for (var element = 0; element < elements.length; element++) {
      new Parlx(elements[element], settings);
    }
  }

  addEventListeners() {
    window.addEventListener('scroll', () => this.onWindowScroll());
    window.addEventListener('resize', () => this.onWindowResize());
  }

  onWindowScroll() {
    this.parallaxEffect();
  }

  onWindowResize() {
    this.parallaxEffect();
  }

  parallaxEffect() {
    if ("ontouchstart" in document.documentElement && this.settings.mobile === false) {
      this.settings.speed = 0;
    }

    if (this.settings.speed < 0 || this.settings.speed > 0.5) {
      this.settings.speed = 0.3;
    }

    this.element.style.height = this.settings.height;

    this.children = this.element.querySelector(this.settings.item);

    let scrolled = window.pageYOffset - this.element.offsetTop;

    Object.assign(this.children.style, {
      'top': '0px',
      'left': '50%',
      'min-height': `${this.element.offsetHeight * (1 + this.settings.speed * 2)}px`,
      'min-width': '100%',
      'width': 'auto',
      '-webkit-transform': `translate(-50%, ${this.settings.speed * scrolled}px)`,
      '-ms-transform': `translate(-50%, ${this.settings.speed * scrolled}px)`,
      'transform': `translate(-50%, ${this.settings.speed * scrolled}px)`
    });

    if (this.children.tagName.toLowerCase() !== 'img') {
      this.children.style.backgroundPosition = 'center center';
    }
  }

  settings(settings) {
    let defaults = {
      item: '.background',
      speed: 0.3,
      height: '400px',
      mobile: true
    }

    let custom = {};

    for (var setting in defaults) {
      if (setting in settings) {
        custom[setting] = settings[setting];
      } else if (this.element.getAttribute(`data-${setting}`)) {
        let attribute = this.element.getAttribute(`data-${setting}`);
        try {
          custom[setting] = JSON.parse(attribute);
        } catch (e) {
          custom[setting] = attribute;
        }
      } else {
        custom[setting] = defaults[setting];
      }
    }

    return custom;
  }
}

// JQUERY PLUGIN CALL IF JQUERY LOADED
if (window.jQuery) {
  let $ = window.jQuery;

  $.fn.Parlx = function (options) {
    for (var element = 0; element < this.length; element++) {
      new Parlx(this[element], options);
    }
  }
}

Googleフォームに自動返信機能を付ける

Googleフォームに自動返信機能を付ける

以前作ったフォームをカスタマイズして、フォームを記入してくれた人に自動でメール返信が出来る機能を追加します。
自動返信機能を付ける事でフォームを利用したユーザーにタスクの進行状況を伝える事が出来るので、結果としてユーザビリティの向上に繋がります。


1. お問い合わせフォームとリンクさせた「スプレットシート」の、「ツール」メニューから「スクリプトエディタ」を選んでスクリプトエディタを起動する。
f:id:yachin29:20180828022623p:plain


2. エディタ内のfunction myFunction(){}を削除し、以下のスクリプトに差し替える。

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(); // 入力値
   
 ////////////タイムスタンプを消す////////////////
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;
 
 // 送信先オプション
 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);
 } 
}


3. 編集メニューから「現在のプロジェクトのトリガー」を選びます。
f:id:yachin29:20180828022858p:plain


4.「許可のリクエスト」で「承認する」ボタンをクリックして承認しましょう。
f:id:yachin29:20150403145323j:plain


5. サンクスページの編集
f:id:yachin29:20180828023223p:plain


このままではログインしているアカウントが自動的に返信メールの差出人になってしまいます。
返信メールの差出人を変えたい場合は以下の記事を参考に設定を変える必要があります。



liapoc.com







自動返信メールを他の差出人に変えた場合のスクリプト

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_name ="差出人の名前";//送信メールの名前 
 var admin = "admin@example.com"; // 先程作成したアドレスに書換
 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);
 } 
}

株式会社 LITTLE JAPAN

株式会社 LITTLE JAPANはそれぞれの地域の資源を活かしたまちづくりをお手伝いする会社です。 空き家を活用したゲストハウス、カフェ/バー、シェアハウス、コワーキングスペース、 ショップ等の場・コミュニティづくり、移住促進・関係人口創出に係る事業を行っています。


http://littlejapan.org/




f:id:yachin29:20190315130052j:plain

TwitterやFacebookなどのSNSをサイトに埋め込む

Webサイト上で新着情報や更新頻度の高い情報を表示させたい時には、TwitterFacebookなど既存のSNSプラグインを使うのが非常に便利です。

SNSプラグインを使用すれば、わざわざHTML内のデータを触る事無く、SNSに記事を投稿するだけでWebサイト内の情報が更新されます。クライアントにHTMLの知識が無い場合でも、前回の授業で紹介したGoogleカレンダーSNSプラグインを上手く使って、更新頻度の高いサイト作りを目指しましょう。

Twitter

Twitterのタイムラインを埋め込みます。タイムラインにも数種類ありますが、今回は一番シンプルな物を埋め込んでみましょう。Twitterの場合、公開されているものであれば、どのユーザーのタイムラインでも埋め込むことができます。非常に簡単に出来るので、積極的に使っていきましょう。


f:id:yachin29:20150318191943p:plain


ウジェット制作画面
https://publish.twitter.com/#

ウジェット制作画面で生成されるコードはそのままではローカル環境で確認する事が出来ません。
ローカルでウジェットを確認する場合はエンベットされているjavascriptのアドレスの頭に「https:」を付け加えましょう。

最初にコピーしてきたコード

<a class="twitter-timeline" href="https://twitter.com/seiburailway">Tweets by seiburailway</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

                  ↓

https:」を付け加える

<a class="twitter-timeline" href="https://twitter.com/seiburailway">Tweets by seiburailway</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

httpやhttpsを省略する

CSSJavascriptを読み込むときhttpやhttpsを省略する事が出来ます。この形であれば、リンク先が「http」のページから「https」のページに変更してもリンク先へのアドレスをわざわざ書き換える必要が無くなります。最近は大規模サイトのみならず小規模サイトでも「https」になっている場合が良くあるので、省略しておくと便利です。
ただ、この場合ローカルでは表示されない為、注意が必要です


Facebook

2015年6月にFacebookプラグイン機能が大幅に仕様変更してしまい、これまでの「Like Box」も2015年6月以降使う事が出来なくなってしまいました。今後は「Page Plugin」というプラグインを「Like Box」の代わりに使っていく事になります。


yachin29.hatenablog.com



Facebookの方もTwitterと同じようにプラグインを使用するのですが注意が必要です。Facebookの場合、個人のページでは出来ず、Facebookページ(旧ファンページ)のみがWebサイトに埋め込む事が出来ます。
なのでFacebookの場合、クライアントがFacebookのアカウントを持っていない場合、Facebookページを作成する所から始まります。


https://www.facebook.com/pages/create/

f:id:yachin29:20150318193353p:plain



Facebookページを作成したら、開発者ツールから埋め込みたいウジェットを選択し、コードをコピーしHTMLに貼り付ければOKです。ただFacebookの場合、サーバー環境上で無いとデータが表示されないのでXamppなどを使って確認してみましょう。

ページプラグイン - ソーシャルプラグイン - ドキュメンテーション - 開発者向けFacebook



facebookの場合、開発者メニューが英語表記なので、判らない場合は下記のサイトなどを参考にしてみて下さい。


smmlab.jp


www.qam-web.com

cssで枠線や見出しを作る

以前は画像で作るのが一般的でしたが、現在では多くの物をCSSのみで表現出来るようになったので、積極的に使って見ましょう。



saruwakakun.com



saruwakakun.com



https://www.nxworld.net/tips/css-scroll-down-button.html



coliss.com

CSSで変数が使えるカスタムプロパティ

cssで変数というとSASSやLESSといったcssを拡張したメタ言語が一般的ですが、最近ではcssのみでも変数を使う事が出来ます。
SASSやLESSと比べると、出来る事は少ないですが、cssファイルに直接記述する事が出来、非常に簡単なので、まずはcssカスタムプロパティを使って、css内で変数を使う事に馴れて見ましょう。



カスタムプロパティ

カスタムプロパティで変数化出来るのはcss数値で指定出来る値です。css animationと同じような感じです。

CSS変数の定義

まずはjsと同じように最初に変数宣言します。その際に「:root」を用います。

:root {
--box_w:100%;
--box_h:100vh;
--bg_color: #333;
--m10:10px;
}


次に変数を呼び出したい場所で「var(--変数名);」と呼び出します。

.box {
width: var(--box_w);
height: var(--box_h);
background: var(--bg_color);
}
calc()関数と一緒に使うことで、より便利になります。
.box {
margin-bottom:calc(var(--m10)*50);
}


f:id:yachin29:20180721021425p:plain

https://caniuse.com/#feat=css-variables