読者です 読者をやめる 読者になる 読者になる

WEBサイト制作の勉強|フェリカテクニカルアカデミー

WEBサイト制作の勉強の為の解説ブログ。東京池袋のフェリカテクニカルアカデミーでは求職者支援訓練の一環として、WEBサイト制作を学ぶことができます。

PHPでの配列

配列はJavascriptでも出て来ましたが、まずは配列の特性を復習しましょう。
通常、変数は1つの値しか入れる事が出来ず、新しい値を入れると上書きされてしまいます。

一方、配列ではひとつの箱に複数の値を入れることができます。データベースと連動させる事の多いPHPではこの配列の使い方が非常に重要になってきます。

arrayを使った配列
<?php
$color = array('red', 'blue', 'green');
echo $color[0];
?>
arrayを使わないやり方
<?php
$color[0] = 'red';
$color[1] = 'blue';
$color[2] = 'green';
echo $color[1];
?>

配列に入っている値をすべて表示させる

配列に入っている値をすべて表示させたい場合、1つ1つ「echo文」で表示させる事は可能ですが、プログラム的には正しくありません。
配列の値を「あるだけすべて表示させたい」場合、便利なのが「foreach文」です。
foreach文は、配列の要素がある分だけ繰り返し処理するという内容の文です。

<?php
$color = array('red', 'blue', 'green');
foreach($color as $value){
echo $value .<br>”;
?>

count関数

count関数を使っても、同じ事が出来ます。count関数を使うと、配列に入っている値の数が$countに代入されます。

<?php
$color = array('red', 'blue', 'green');
$count = count($color);

for ($i = 0; $i < $count; $i++) {
  echo "$color[$i]<br>";
}
?>

連想配列

配列には、変数の箱の中身に 0,1,2……と背番号のように番号を振り、その番号を指定することでデータを指定するという性質がありましたが、連想配列では、番号のかわりに名前をつけて管理することができます。
簡単に言うと配列は背番号(ID)でしか管理出来ないのに比べて、連想配列は好きに名前を付けて管理出来る利点があります。

配列変数名 = array( キー=>値1, キー=>値2, キー=>値3・・・);
<?php
$color = array('red' => '真っ赤', 'blue' => '真っ青', 'green' => '新緑');
echo $color['blue'];
?>
<?php

  $present = array ( '長崎' => 'チャンポン', '名古屋' => '手羽先', '沖縄' => '泡盛' );

  // キーを指定して、値を取得します
  echo $present['長崎'];
  echo '<br>';
  
  // キーを指定して、値を取得します
  echo $present['名古屋'];
  echo '<br>';
  
  // キーを指定して、値を取得します
  echo $present['沖縄'];
  echo '<br>';

連想配列を使う事でフォームのチェックボックスのように複数の解答があるような場合にも対応が出来ます。

<form action="sample.php" method="post">
    <p>好きな色(複数回答可): 
        <input type="checkbox" name="color[]" value="black"><input type="checkbox" name="color[]" value="red"><input type="checkbox" name="color[]" value="blue"><input type="checkbox" name="color[]" value="green"></p>
    <p><input type="submit" value="送信"></p>
</form>

データを受け取る側のPHP

<?php
echo '<p>好きな色: ';
foreach( $_POST['color'] as $value ){
    echo "{$value}, ";
}
echo '</p>';
?>
広告を非表示にする

Facebookのページ・プラグインをレスポンシブ対応(可変)にする

基本的にFacebookのページプラグインは作成する際にプラグインの幅を決めなければいけません。(最小値は180、最大値は500です)空白にしてもデフォルト値である340pxが指定されます。
指定したwidthの値はコードの中にエンベッドで「data-width=""」と記述されているため、Facebookのページ・プラグインをレスポンシブ対応(可変)にするには少し工夫が必要です。

今回はjQueryを使って、サイズが変更する度に読み込み直しその都度最適な幅で表示できるようにします。



まずはFacebookのページプラグインを表示させる為に必要なコードを自分が作った「div」の中に入れます。

HTML

<div id="pageplugin">
<div class="fb-page" data-href="https://www.facebook.com/felica.ta/" data-tabs="timeline" data-width="500" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false"><blockquote cite="https://www.facebook.com/felica.ta/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/felica.ta/">フェリカテクニカルアカデミー</a></blockquote></div>
</div>


上で作ったdivに対して、レイアウト上必要なスタイルを指定する。今回は横幅が最大500pxで親要素がそれ以下の幅になると可変していく仕様です。
CSS

#pageplugin {
margin: 0 auto;
max-width: 500px;
}

.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe[style]{
    width: 100% !important;
}


jQuery

$(function () {
    var windowWidth = $(window).width();
    var htmlStr = $('#pageplugin').html();
    var timer = null;
    $(window).on('resize',function() {
        var resizedWidth = $(window).width();
        if(windowWidth != resizedWidth && resizedWidth < 500) {
            clearTimeout(timer);
            timer = setTimeout(function() {
                $('#pageplugin').html(htmlStr);
                window.FB.XFBML.parse();
           //window.FB.XFBML.parse()で再レンダリングします。
                var windowWidth = $(window).width();
            }, 500);
        }
    });
});

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


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

blog.cloud9works.net

学生症候群(がくせいしょうこうぐん) 英:student syndrome

納期のある作業を行う際に、余裕時間があればあるほど、実際に作業を開始する時期を遅らせてしまうという、多くの人間に見られる心理的行動特性のこと。

 人間は、やるべき仕事に時間的な余裕を感じると、「後でやっても間に合う」と考えてしまい、すぐに着手しないことがよくある。TOCの提唱者であるエリヤフ・ゴールドラット(Dr. Eliyahu M. Goldratt)は著書『Critical Chain』の中で、これが余裕時間(セーフティ)があるにもかかわらずプロジェクトが遅れる要因の1つだと指摘した。学生症候群という名は、同書でこのような着手の先延ばし現象を「期間が足りないと主張して提出期限を延ばしてもらったのに、すぐには宿題を始めない学生」になぞらえて説明したことに由来する。

 学生症候群が発生すると、計画上は余裕時間が十分に取られていても、実際の作業は余裕のない状態で行うことになるので、何らかの突発事態が発生した場合、納期遅延に直結する。また、余裕時間を十分に取ったスケジュールでは、納期確度(納期が守られる確率)も高く見積もられていることが一般的であるため、後工程でも遅れを想定していないことも多く、プロジェクト全体に甚大な被害を与えることになりがちである。


www.itmedia.co.jp

ヒーローヘッダーを使ったサイト制作

f:id:yachin29:20170209004414j:plain


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

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


最近、よく見かける「1枚画像」を画面全体に表示させているようなフルスクリーンレイアウト。
「ヒーローヘッダー」と呼ばれています。

ヒーローヘッダー(Hero Header)とは、ウェブサイトのファーストビューに全画面の画像を使用するなど、巨大なイメージで構成されたウェブサイトのことを指します。

2014年頃から海外のウェブデザインにてトレンド的にかなり増えてきている手法です。
巨大な画像により、イメージを強く植えつけることができる反面、写真のクオリティ次第でウェブサイト全体の印象を悪くすることも有りますので、フラットデザイン同様簡単そうでデザインセンスの問われるデザイン要素となっています。


参考サイト
http://racines-park.com/



ferret-plus.com


こういったレイアウトを作る際の1番のポイントは、用意する画像の大きさです。
自分のPCでは綺麗にフルスクリーンで表示されるけど、別のPCでは写真が見切れてしまっていたり、逆に余白が出てしまったり、という事が起こります。

ビットマップのデータをすべてのディスプレイでピッタリの大きさに合わせるという事は基本的に無理なので、ある大きさで書き出した画像をCSSで拡大・縮小していきます。

img要素の場合は前回やったようにフルードイメージ化する事で画像を可変にしましたが、background画像の場合は「background-size」というプロパティを使って、拡大・縮小していきます。

画像を可変にする方法は二通りのみ

img要素ならフルードイメージ

  • フルードイメージの場合、基本的に拡大はさせない為、想定される範囲の中で最大サイズで書き出す。
  • 拡大はNGなので、綺麗に見せたい商品画像などに使用

background画像なら「background-size」

  • 「background-size」の場合、拡大・縮小ともに自由に出来る為、想定される範囲の中間付近のサイズで書き出す。
  • 拡大・縮小を自由に出来る為、ディテールに拘らない、背景などの画像に使用

今回のようにフルスクリーンで画像を表示したい場合、絶対的に決まった大きさはありませんが、一番シェアの多いモニターの解像度で作るのが無難です。
モニター解像度のシェア(2017年1月現在)
f:id:yachin29:20170512100245p:plain

画面のアスペクト比も、以前の「4 : 3」のスクエア型から「16:9」と「16:10」といったワイド型が大半を占めているのが解ります。
f:id:yachin29:20170512112150p:plain




さらにフルスクリーンのように大きなサイズの画像をwebで使う時は必ず下記のようなサービスを使ってデータを軽くし、ユーザビリティーの向上に努めましょう。
tinypng.com




background-sizeプロパティの指定方法

background-sizeプロパティは、背景画像のサイズを指定する際に使用します。これまで使ってきたようなピクセルやパーセンテージの他に「contain」「cover」といった値でも設定出来ます。


「contain」

縦横比は保持して、背景領域に収まる最大サイズになるように背景画像を拡大縮小する

「cover」

縦横比は保持して、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小する

background-sizeのサンプル


background-sizeプロパティは、スマホサイト制作でよく使用されるプロパティなので、各値の違いをしっかり覚えて使えるようにしていきましょう。

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 フォーム - アンケートを作成、分析できる無料サービス