WEBサイト制作の勉強

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

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

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

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


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

2 「無題のプロジェクト」をクリックし、プロジェクト名をつけて「OK」をクリック。

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

function autoreply() {


 var title = "お問い合わせありがとうございます。"; 
 var body
 = "お問い合わせありがとうございます。\n"

 var footer
 = "------------------------------------------------------------\n\n"
 + "お問い合わせいただきましてありがとうございます。\n"
 + "内容を確認させて頂き、\n"
 + "こちらよりご連絡させていただきますので、\n"
 + "よろしくお願いいたします。\n\n"
 var name = 'お名前';
 var mail = 'メールアドレス';
  var address = "";
 
 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 ) {
 body = col_value+" 様\n\n"+body;
 }
 if ( col_name === mail ) {
 address = col_value;
 }
 }
 body += footer;
 

 GmailApp.sendEmail(address,title,body);
}


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

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


ascii.jp


qiita.com


www.m-field.biz

SVGを使ったアニメーション

carlphilippebrenner.com

tympanus.net

gardenstudio.com.br

jakearchibald.com

SVGとは?

SVG【 Scalable Vector Graphics 】とは、XMLベースの2Dベクター画像記述言語。2001年9月にW3C勧告として公開された。
ベクター画像は画像をビットマップ形式ではなく、線や面などの図形の集合体として扱うため、見る環境に応じて最適な表示が可能となる。
SVGではアニメーション機能などもサポートしており、Flashで行えるような簡単なインタラクティブコンテンツの作成が可能となっている。
SVGファイルはAdobe社のIllustratorに代表される画像編集アプリケーションで扱うことができるほか、HTMLとの連携を意識して、Webブラウザでも対応が進められている。
ちなみに、SVGXMLベースで策定された言語のため、テキスト形式のファイルで画像を表現するという珍しい形態を取っている。

SVGに対応しているブラウザー


blog.codecamp.jp




今回の授業ではSVGを単独で使用するだけでなく、HTMLファイルの中に記述し、css3アニメーションを併用します。
こうする事でブラウザー上で色々な表現方法が可能になります。
※ただしIEOperaは、全てのSVG要素でCSSアニメーションを受け入れないという問題があります。


変化させる方法は主に以下の3つがあります。

CSSプロパティ(transitionやanimation)を使う→簡単だけどIE未対応
setTimeout()を使う→IEも動くけど面倒
JavaScriptライブラリを使う→簡単&IEでも動くけどサイズが膨大
それぞれ、長所・短所があるので、状況に応じて使い分けると良いかと思います(ちなみにjQuerySVGの要素を扱えないので使えません)。


SVGのパスは、以下のようなプロパティを使って、スタイルを指定出来ます。

stroke:線の色
stroke-width:線の太さ
fill:塗りつぶしの色
stroke-dasharray:破線の間隔
stroke-dashoffset:破線の開始位置


今回は破線のプロパティである、stroke-dasharraystroke-dashoffsetを使い、線を引くアニメーションを作成します。





また、今回新たに出てきた「animation-fill-mode」プロパティもしっかり覚えましょう。
none(初期値)

キーフレームで指定されたスタイルは、アニメーションの前後には適用されません。

forwards

アニメーションの実行後にキーフレームの最後の指定が適用されます。

backwards

アニメーションの実行後、即座にキーフレームの最初のスタイル指定を適用します。

both

forwards と backwards の両方が適用されます。アニメーション実行前には backwards が、実行後には forwards があると考えると分かりやすいと思います。



<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>丸を別々に動かす</title>
<style>
#box {
  width:800px;
  margin:50px auto;
}
.st0{
  fill:none;
  stroke:#E72C28;
  stroke-width:10;
  stroke-miterlimit:10;
  stroke-dasharray:1000px;/*破線の間隔*/
  stroke-dashoffset:1000px;
  animation:circle-line0 1s linear forwards;
}
@keyframes circle-line0 {
  0%{stroke-dashoffset:1000px;}
  100%{stroke-dashoffset:0;}
}
.st1{
  fill:none;
  stroke:#3669B3;
  stroke-width:10;
  stroke-miterlimit:10;
  stroke-dasharray:1000px;/*破線の間隔*/
  stroke-dashoffset:1000px;
  animation:circle-line1 1s 0.7s  linear forwards;
}
@keyframes circle-line1 {
  0%{stroke-dashoffset:1000px;}
  100%{stroke-dashoffset:0;}
}
.st2{
  fill:none;
  stroke:#7DBE31;
  stroke-width:10;
  stroke-miterlimit:10;
  stroke-dasharray:1000px;/*破線の間隔*/
  stroke-dashoffset:1000px;
  animation:circle-line2 1s 1.4s linear forwards;
}
@keyframes circle-line2 {
  0%{stroke-dashoffset:1000px;}
  100%{stroke-dashoffset:0;}
}
</style>
</head>

<body>
<div id="box">
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
	 y="0px" viewBox="0 0 459.8 200" style="enable-background:new 0 0 459.8 200;" xml:space="preserve">

<circle id="XMLID_1_" class="st0" cx="100" cy="100" r="95"/>
<circle id="XMLID_3_" class="st1" cx="228" cy="100" r="95"/>
<circle id="XMLID_4_" class="st2" cx="359.8" cy="100" r="95"/>
</svg>
</div>
</body>
</html>

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


Googleカレンダー

Googleカレンダーもフォームと同様に特別なプログラミングスキルが無くてもwebサイトに簡単に導入出来ます。またスケジュールの差し替えや追加などもGoogleカレンダーの編集画面で変更出来、導入したwebサイト側のカレンダーと同期させる事でリアルタイムで情報を更新させる事が出来ます。



Google カレンダー スタートガイド - パソコン - カレンダー ヘルプ



Google フォーム - アンケートを作成、分析できる無料サービス

GoogleMapの導入

liginc.co.jp

1カラムレイアウトの作成

f:id:yachin29:20160203184948p:plain

divタグ  ・・ひとかたまりの範囲として定義する

divタグはそれ自身は特に意味を持っていませんが、DIVで囲んだ範囲をひとかたまりとして、スタイルシートを適用するのに用います。


今回はh1やpをdivの中に入れ、カラムレイアウトを作っていきます。
カラムとは段を組むこと(段組)を指します。今回は1つのカラムを組んでレイアウトしていきます。
また画像も自身で選び、Photoshopで適切なサイズにトリミングして使用しましょう。

使用するテキスト

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
Net Smart

よりスマートなインターネットライフを。

Concept

すべてのインターネットユーザーに快適でよりスマートさを。ネットスマートはデジタルのチカラを持って、皆様とそんな未来を創造していきます。

Service

低価格&高機能なCMS導入。充実の管理画面でサイト運用を効率的に。

Copyright 2017 Net Smart All Rights Reserved.

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>1カラムレイアウトの練習</title>
<style>
html,body,h1,h2,p {
  margin:0;
  padding:0;
  line-height:1.0;
}
.container {
  width:800px;
  margin:0 auto;
}
.header {
  height:400px;
  background: url(img/header.jpg) no-repeat;
}
.concept {
  height:300px;
  background:#EFFFF6;
}
.service {
  height: 300px;
  background:#626262;
}
.footer {
  height:100px;
  background:#9ADBEC;
}
h1 {
  padding-top:20px;
  margin:0 0 20px 30px;
}
h2 {
  width:260px;
  border-bottom:4px solid #444444;
  margin: 0 auto 40px;
  text-align:center;
  padding:20px 0 10px;
}
.concept h2 {
  color:#5C5C5C;
}
.service h2 {
  color:#FFFFFF;
  border-bottom:4px solid #FFFFFF;
}
.concept p {
  width:540px;
  margin: 0 auto;
  text-align:center;
  line-height:1.5;
}
.service p {
  width:540px;
  margin: 0 auto;
  text-align:center;
  line-height:1.5;
  color:#FFFFFF;
}
.footer p {
  text-align:center;
  line-height:100px;
}
</style>
</head>

<body>
<div class="container">
<div class="header">
<h1>Net Smart</h1>
<p>よりスマートなインターネットライフを。</p>
</div>
<div class="concept">
<h2>Concept</h2>

<p>すべてのインターネットユーザーに快適でよりスマートさを。ネットスマートはデジタルのチカラを持って、皆様とそんな未来を創造していきます。</p>
</div>
<div class="service">
<h2>Service</h2>

<p>低価格・高機能なCMS導入。充実の管理画面でサイト運用を効率的に。</p>
</div>
<div class="footer">
<p>Copyright 2017 Net Smart All Rights Reserved.</p>
</div>
</div>
</body>
</html>

画像の補正

トーンカーブを使った補正

トーンカーブはデータの劣化をおこさずに細やかな補正ができます。
トーンカーブを使えば「明るさ・コントラスト」、「レベル補正」でできることはもちろん、最大で14個のポイント(制御点)を作成しより微妙な部分の調整をおこなうことができます。
例えば、各階調ごとの調整やRGBごとの成分調整が可能です。


f:id:yachin29:20171017013418p:plain




使用素材
http://yachin29.com/school/photoshop-hosei.zip



作業効率を上げる為にはショートカットキーを覚える事が非常に大事です。
ただ、よく使うショートカットキーは自然と覚えるものの、普段余り使わない物は忘れがちです。その都度調べていてはそれこそ時間のムダになってしまうので、こういった早見表をPCの隣に置いておくのも非常に良いと思います。

Photoshopショートカットキー早見表 2015年版

f:id:yachin29:20160929124446j:plain

helpx.adobe.com


Illustratorのショートカットキー早見表 2015年版

f:id:yachin29:20160929125206j:plain

helpx.adobe.com

広告を非表示にする

Photoshopでのマスク処理

画像のマスク処理

f:id:yachin29:20151002001709j:plain
マスク処理とは、特定の部分のみを表示し、それ以外の部分を表示しないようにする画像処理のことをいいます。



Photoshopには、クリッピングマスクとレイヤーマスクという2つの「マスク機能」があります。この2つのマスク機能を使い分けることによって、より効率的にデザインをすることが可能です。


クリッピングマスク

f:id:yachin29:20151002002549j:plain

クリッピングマスクは、切り抜きをしたいレイヤーのすぐ下にあるレイヤーの形に切り抜くことができます。
切り抜きは、文字でも図形でも手書きの図形でも可能です。
クリッピングマスクを作る場合は、レイヤーの順番に注意が必要です。

  • 切り抜きたいレイヤーが上
  • 切り抜きたい形が下のレイヤー

レイヤーマスク

選択範囲からマスクを作成します。
ブラシ・消しゴムなどでマスクの形を変更できるため、細かい微調整をしたい場合に向いています。
また、グラデーションツールを使う事で、徐々に変わる画像合成などが可能です。


f:id:yachin29:20151002010808p:plain



liginc.co.jp

Webサイトを見る、知る、そして作る

Webサイトを見る

Webの勉強を始めるうえで大事な事はまず数多くのWebサイトを見る事です。
もちろん見ているだけで作れるようにはなりませんが、画家を志している人が名画を見るように、建築家を志している人が建築物を見るように、音楽家を志している人が音楽を聞くように、サッカー選手を志している人がサッカーを見るように、web制作を志している人はとにかく色々なwebサイトを見ましょう。100個のサイトを見れば何か判る事があるはずです。

Webサイトを知る

ある程度Webサイトを見ていくと、それぞれのWebサイトの共通点や相違点が見えてきます。
例えば居酒屋サイトによく使われている色やフォント、不動産サイトでよく使われている色、ECサイトでよく使われている動き、などなど。
サイトを見る事で色々な事が解ります。
Webサイトが不特定多数の人に使ってもらう道具だとしたら、多くの人が持つ共通認識、ここでは「◯◯っぽさ」といった方が解りやすいかもしれませんが、その業種ごとの「◯◯っぽさ」を取り入れる事で使い易さがぐっと良くなります。
見る、の次のステップとして、色やレイアウト、なんでも良いので共通項を見つけてグループ化してみましょう。


既存のギャラリーサイトを使えば、それぞれのテーマに沿ったサイトを簡単に探す事が出来るので、積極的に活用しましょう。

bm.s5-style.com



io3000.com


81-web.com


www.ikesai.com



onepagelove.com

アニメーションを使ったWEBサイト

www.teamgeek.co.za


mintdesigncompany.com


既存のサイトを真似して作る

一番最後の段階として、既存のサイトを真似して作ってみましょう。既存サイトの文章構造やレイアウトをトレースする事でそのサイトの設計思想や工夫しているポイントなどがより具体的に解ってきます。
なので、積極的に既存のサイトを真似しましょう。初学者にとってデザインとはとにかく良いサイトを真似る事です。
さらにポートフォリオの事を考えると、画像などは既存サイトのものをそのまま使うのではなく、自身でテーマを決めて、テーマに沿った内容に差し替えてみましょう。



www.bloomingville.com



http://yachin29.webcrow.jp/bloom/