WEBサイト制作の勉強

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

フェリカテクニカルアカデミー

jQuery演習問題

jQuery

【問01】300pxの色違いの２の正方形を、それぞれ「表示１」ボタン、「表示２」ボタンを押したら幅・高さ共に0pxから300pxに表示するよう記述しなさい。１つは「「スローで表示」もう１つは「１秒かけて表示」と表示の仕方をわけて記述しなさい。表示中、ボタンをクリックしても命令を受け付けないように記述を追加すること。


【問02】【問01】で記述した２つの正方形をそれぞれ「表示」ボタンと「非表示」ボタンで、表示・非表示を実行させるよう記述しなさい。


【問03】【問01】で記述した2つの正方形を、それぞれ「表示・非表示」ボタン1つで、表示・非表示を繰り返し実行されるよう記述しなさい。


【問04】ボタンをクリックしたら300pxかける400pxの長方形がスライドしながら表示・非表示を繰り返すように記述しなさい。表示していなかったら表示し、表示していたら非表示になるように記述する事。最初の状態は長方形が非表示になっている事。


【問05】ボタンをクリックしたら、h1に対して文字色が赤、背景色が黒、文字の大きさが16pxになるよう記述しなさい。メソッドチェーンを利用する事（h1のテキストは適宜）


【問06】ナビボタンを以下のように3つ作り（大きさ・レイアウトは適宜）、ボタンをクリックしたらクリックしたボタンのみが背景色が変わるようにし、続けて他のボタンをクリックしても、常にクリックしたボタンのみの背景色が変わっている状態にせよ。またjQueryでは必ず「this」を使う事。

<ul>
<li><a href="#">ボタン１</a></li>
<li><a href="#">ボタン２</a></li>
<li><a href="#">ボタン３</a></li>
</ul>


【問07】「変更」ボタンを押したら、p要素内のテキストが変更されるよう記述しなさい

変更前

<p>こんにちは</p>

変更後

<p>さようなら</p>


【問08】「削除」ボタンを押したらp要素が削除されるよう記述しなさい。

変更前

<h1>大見出し</h1>
<p>テキストテキスト</p>

変更後

<h1>大見出し</h1>

webサイト制作（午後科）が7月10日より開講します

Webサイト制作 Webデザイン

東京池袋のフェリカテクニカルアカデミーでは、只今平成29年7月10日より 開講する「Webサイト制作科」の受講生を募集しています。
600時間を超える講座を無料で受講出来、プロになるために必要なスキルを身につける事が出来ます。また、職業訓練受講給付金として給付金を受け取ることが出来ます。（※受給資格がありますので、ご確認下さい。）
詳細に関してはフェリカテクニカルアカデミーに直接お問い合わせ下さい。TEL：03-3981-7201

募集期間：2017年5月25日 ～ 6月12日

訓練期間：2017年7月10日 ～ 2018年1月9日

訓練時間：15時55分 ～ 20時50分

フェリカテクニカルアカデミーでは、施設見学会を行っていきます。
施設見学会へのご予約はwebフォームでも受付けております。

ご予約フォームはこちらから

www.felica.info



求職者支援訓練とは？

求職者支援制度とは、職業訓練による能力形成を通じ、真剣に就職を目指そうとする方のための制度です。雇用保険を受給できない失業者の方に対し、無料の職業訓練（求職者支援訓練）を実施し、一定の支給要件を満たす場合は、職業訓練の受講を容易にするための給付金を支給するとともに、ハローワークにおいて強力な就職支援を実施することにより、安定した「就職」を実現するための制度です。

求職者支援訓練の受講を希望される方は、まずは求職者支援訓練を受講できる資格があるかご確認ください。不明なことがございましたら、フェリカテクニカルアカデミーに問い合わせいただくか、最寄のハローワークに直接問い合わせしてご確認ください。

 


求人依頼のある学校

WEBクラスでは、就職支援も熱心に行っています。本校の授業内容や生徒さんのレベルを把握した上で、幾つかの企業様から求人依頼も来ておりますので、授業の修了が近づいた段階で、求人依頼のあった企業に紹介させていただくことも可能です。未経験であっても「エンジニア」「デザイナー」の両分野への就職が可能です。

 

どんな授業を行うの？

デザイン

このクラスではwebサイトを「ユーザーが使う製品」と考え、その製品に伴うデザインは個人の思いつきや突然のヒラメキで作るものでは無く、ある種のガイドラインに沿った物であるべき、という考え方を元に、経験者であっても未経験者であってもAppleやGoogleなど各メーカーのデザイン・ガイドラインを参考にして、制作を進めていきます。

f:id:yachin29:20161121130447j:plain

プログラム

授業と平行して自宅でも復習してもらいます。
新しい知識を学ぶと同時にWebを利用していく楽しさも体感してもらいます。
prog-8.com

f:id:yachin29:20170524234517p:plain

mozer.io

f:id:yachin29:20170524234532j:plain




スマホサイト制作

最近では、Google検索を使用しているほとんどのユーザーは、モバイル端末から検索を行うようになっています。Googleだけでなく、多くのサイトでPCよりもスマートフォン利用者の方が多い現在、今まで以上にスマホサイトが重要になってきます。
この授業ではGoogleが推奨する「レスポンシブデザイン」や「動的な配信」でのサイト制作を学ぶ事が出来ます。
また、モバイルファーストインデックス （MFI）といった、最近の考え方やアルゴリズムも学び、よりスマートフォンに適したUI・UX設計を行っていきます。

http://thana531223.webcrow.jp/vogue/


f:id:yachin29:20161026201426p:plain



f:id:yachin29:20161027204011p:plain

PHPでの配列

PHP

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

一方、配列ではひとつの箱に複数の値を入れることができます。データベースと連動させる事の多い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のページ・プラグインをレスポンシブ対応（可変）にする

Webサイト制作

基本的に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サイト制作

Webサイト上で新着情報や更新頻度の高い情報を表示させたい時には、TwitterやFacebookなど既存の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を省略する

CSSやJavascriptを読み込むとき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

Webサイト制作 その他

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

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

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


www.itmedia.co.jp