webサイト制作の勉強|1月ブログ

webサイト制作の勉強に関する解説ブログです。

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

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:20150403145113j:plain


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


ascii.jp

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

背景画像をスライド(フェード)させるjQuery 「VEGAS 2 BACKGROUND SLIDESHOW」

f:id:yachin29:20170412034616p:plain


img要素をスライドさせるプラグインは沢山ありますが、今回は背景画像をスライドさせる「VEGAS 2 BACKGROUND SLIDESHOW」を使用します。

http://vegas.jaysalvat.com/

<script>
$(function(){
$('header').vegas({
  transition: 'fade', 
  slides: [
    { src:'img/01.png' },
    { src:'img/02.png' },
    { src:'img/03.jpg' }
  ]
});
});
</script>

シングルページの作成

f:id:yachin29:20170209004414j:plain

今回はクライアントワークに向けて、より実践的な内容のシングルページを作成していきます。

今回の制作のポイント
  • トップはヒーローヘッダーで複数枚をスライド(フェード)で切り替え
  • ナビゲーションはある程度スクロールしたら固定
  • SNSの埋め込み
  • googleマップの埋め込み
  • 複数のjQueryプラグインの導入

などなど

参考サイト

http://racines-park.com/


index.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>フルスクリーンレイアウトのシングルページ</title>
<link rel="stylesheet" href="css/syle.css">
<link href="https://fonts.googleapis.com/css?family=Spirax" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<header class="slide">
<h1>Cafe de felica</h1>
<p></p>
</header>
<nav>
<ul>
<li><a  href="#">FACEBOOK</a></li>
<li><a  href="#">MENU</a></li>
<li><a  href="#">PARTY</a></li>
<li><a  href="#">WEDDING</a></li>
<li><a  href="#">INFORMATION</a></li>
<li><a  href="#">RESERVATION</a></li>
</ul>
</nav>
<div id="content"></div>
<footer></footer>
</body>
</html>

スタイルシート

@charset "utf-8";
/* CSS Document */

/* reset */
html, body, div, h1, h2, h3, h4, h5, h6,p,ul, ol, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}
ul {
  list-style: none; /* マーカーを消す */
}
a {
  text-decoration: none; /* 下線を消す */
}
img {
  border: 0;
  vertical-align: bottom;
}

/*PCレイアウト*/
header {
  width:100%;
  height:90vh;
  background: url(../img/01.png) no-repeat center/cover;
}
h1 {
  font-family: 'Spirax', cursive;
  text-align:center;
  font-size:80px;
  color:#FFFFFF;
  padding-top:50px;
  text-shadow: 0 0 10px #666666;
}
nav {
  width:100%;
  height:10vh;
  background: rgba(255,255,255,1);
}
nav ul {
  width:960px;
  margin: 0 auto;
  overflow:hidden;
}
nav li {
  width:16.66%;
  float:left;
}
nav li a {
  display:block;
  width:100%;
  line-height:10vh;
  font-size:14px;
  color:#339900;
  font-weight:bold;
}
nav li a:hover {
  opacity:0.7;
}

/*ナビゲーションのスクロール*/
nav.fixed {
  position:fixed;
  left:0;
  top:0;
  background: rgba(255,255,255,0.7);
}

#content {
  width:100%;
  height:3000px;
  background:#CCCCCC;
}

Javascript

$(function() {
				$(window).scroll(function() {
					if ($(window).scrollTop() > 575) {
						$('nav').addClass('fixed');
					} else {
						$('nav').removeClass('fixed');
					}
          });
});





index.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>フルスクリーンレイアウトのシングルページ</title>
<link href="https://fonts.googleapis.com/css?family=Spirax" rel="stylesheet">
<link rel="stylesheet" href="css/syle.css">
<link rel="stylesheet" href="css/vegas.css">
<link rel="stylesheet" href="css/jquery.fancybox.css">
<style>
.fancybox-slide--video .fancybox-content {
	width  : 800px;
	height : 600px;
	max-width  : 80%;
	max-height : 80%;
}

</style>
<script src="js/jquery.min.js"></script>
<script src="js/script.js"></script>
<script src="js/vegas.js"></script>
<script src="js/jquery.fancybox.js"></script>
<script>
$(function(){
$('header').vegas({
  transition: 'fade', 
  transitionDuration: 2000,
  delay: 5000,
  animation: 'none',
  animationDuration: 20000,
  overlay:'overlays/01.png',
  slides: [
    { src:'img/01.png' },
    { src:'img/02.png' },
    { src: 'img/03.jpg' }
  ]
});
});
</script>
<script>
$(function(){
	$("[data-fancybox]").fancybox({
		
	});
});
</script>
</head>
<body>
<header class="slide">
<h1>Cafe de felica</h1>
<p></p>
</header>
<nav>
<ul>
<li><a  href="#">FACEBOOK</a></li>
<li><a  href="#">MENU</a></li>
<li><a  href="#">PARTY</a></li>
<li><a  href="#">WEDDING</a></li>
<li><a  href="#">INFORMATION</a></li>
<li><a  href="#">RESERVATION</a></li>
</ul>
</nav>
<div id="content">
<div id="map">
<h2>MAP</h2>
<iframe id="gmap" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1361.8413791520838!2d139.7137111940076!3d35.72565495438745!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188d69a1bfc623%3A0x6f829dc3047a4f7c!2z44CSMTcxLTAwMjIg5p2x5Lqs6YO96LGK5bO25Yy65Y2X5rGg6KKL77yS5LiB55uu77yR77yS4oiS77yZIO-8q--8q-ODk-ODqw!5e0!3m2!1sja!2sjp!4v1491985629352" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

<div id="calendar">
<h2>Schedule</h2>
<iframe id="gcalendar" src="https://calendar.google.com/calendar/embed?showTitle=0&amp;showCalendars=0&amp;showTz=0&amp;height=600&amp;wkst=2&amp;bgcolor=%23FFFFFF&amp;src=2ahug8ru50b9ludvqe8i8i5470%40group.calendar.google.com&amp;color=%23B1365F&amp;ctz=Asia%2FTokyo" style="border-width:0"  frameborder="0" scrolling="no"></iframe>
</div>

<div id="form">
<h2>Contact Form</h2>
<iframe id="gform" src="https://docs.google.com/forms/d/e/1FAIpQLScJLKmX0WT3LzLpUK6Y58VKFzqDtlkoI0gNeUb-ghoLfLXxbg/viewform?embedded=true" frameborder="0" marginheight="0" marginwidth="0">読み込んでいます...</iframe>
</div>

<div class="inner">
<div id="twitter">
<h2>Twitter</h2>
<a class="twitter-timeline" data-height="500" data-theme="light" data-link-color="#2B7BB9" href="https://twitter.com/seiburailway">Tweets by seiburailway</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
<div id="fb_box">
<h2>Facebook</h2>
<iframe id="fb" src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fkensetsu.metro.tokyo.jp&tabs=timeline&width=400px&height=500px&small_header=true&adapt_container_width=false&hide_cover=false&show_facepile=false&appId" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
</div>

<ul id="img_box">
<li><a href="img/box1.png" data-fancybox="group"><img src="img/box1_s.png" alt="#"></a></li>
<li><a href="img/box2.png" data-fancybox="group"><img src="img/box2_s.png" alt="#"></a></li>
<li><a href="img/box3.png" data-fancybox="group"><img src="img/box3_s.png" alt="#"></a></li>
<li><a href="img/box4.png" data-fancybox="group"><img src="img/box4_s.png" alt="#"></a></li>
<li><a href="img/box5.png" data-fancybox="group"><img src="img/box5_s.png" alt="#"></a></li>
<li><a href="img/box6.png" data-fancybox="group"><img src="img/box6_s.png" alt="#"></a></li>
</ul>

<div class="ytube">
<ul>
<li><a data-fancybox href="https://www.youtube.com/watch?v=JGwWNGJdvx8" ><img src="img/youtube01.png" alt="#"></a></li>
<li><a href="https://www.youtube.com/watch?v=UqyT8IEBkvY" data-fancybox><img src="img/youtube02.png" alt="#"></a></li>
</ul>
</div>
</div>
</div>
<footer>
<p><small>&copy; cafe de Felica</small></p>
</footer>
</body>
</html>

スタイルシート

@charset "utf-8";
/* CSS Document */

/* reset */
html, body, div, h1, h2, h3, h4, h5, h6,p,ul, ol, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}
ul {
  list-style: none; /* マーカーを消す */
}
a {
  text-decoration: none; /* 下線を消す */
}
img {
  border: 0;
  vertical-align: bottom;
}

/*PCレイアウト*/
header {
  width:100%;
  height:90vh;
  background:#ccc no-repeat center/cover;
}
h1 {
  font-family: 'Spirax', cursive;
  text-align:center;
  font-size:80px;
  color:#FFFFFF;
  padding-top:50px;
  text-shadow: 0 0 10px #666666;
}
nav {
  width:100%;
  height:10vh;
  background: rgba(255,255,255,1);
}
nav ul {
  width:960px;
  margin: 0 auto;
  overflow:hidden;
}
nav li {
  width:16.66%;
  float:left;
}
nav li a {
  display:block;
  width:100%;
  line-height:10vh;
  font-size:14px;
  color:#339900;
  font-weight:bold;
}
nav li a:hover {
  opacity:0.7;
}

/*ナビゲーションのスクロール*/
nav.fixed {
  position:fixed;
  left:0;
  top:0;
  background: rgba(255,255,255,0.7);
}

#content {
  width:100%;
}
#map {
  width:960px;
  margin: 0 auto 100px;
}
#map h2 {
   font-family: 'Spirax', cursive;
   text-align:center;
   font-size:38px;
   padding: 80px 0 20px 0;
}
#gmap {
  width:100%;
  height:400px;
}

#calendar {
  width:960px;
  margin: 0 auto;
}
#gcalendar {
  width:100%;
  height:400px;
}
#calendar h2 {
   font-family: 'Spirax', cursive;
   text-align:center;
   font-size:38px;
   padding: 80px 0 20px 0;
}
#form {
  width:960px;
  margin: 80px auto 0;
}
#form h2 {
   font-family: 'Spirax', cursive;
   text-align:center;
   font-size:38px;
   padding: 40px 0 20px 0;
}
#gform {
  width:100%;
  height:1200px;
}
.inner {
  width:960px;
  margin: 40px auto;
  overflow:hidden;
}
#twitter {
  width:400px;
  float:left;
  margin-bottom:80px;
}
#twitter h2,#fb_box h2 {
  font-family: 'Spirax', cursive;
   text-align:center;
   font-size:30px;
   padding: 40px 0 20px 0;
}
#fb_box {
  width:400px;
  float:right;
  margin-bottom:80px;
}
#fb {
  width:100%;
  height:500px;
}

#img_box {
  width:648px;
  margin: 60px auto;
  overflow:hidden;
}

#img_box li {
  float:left;
  margin:6px;
}

.ytube {
  width:648px;
  margin: 80px auto;
}
.ytube ul {
  overflow:hidden;
}
.ytube li {
  float:left;
  margin:12px;
}
footer {
  width:100%;
  height:50px;
  background: #339900;
}
footer p {
  text-align:center;
  line-height:50px;
  font-size:16px;
  color:#FFFFFF;
}