AITCシニア技術者勉強会「今さら聞けないWebサイト開発」 vol1

Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
AITCシニア技術者勉強会
「今さら聞けないWebサイト開発」
Vol.1
2016年05月21日
先端IT活用推進コンソーシアム
シニア技術者勉強会
近藤繁延
シニアと女子

はじめに
• 本勉強会の趣旨
– Web開発界隈で語られるツール、キーワードにつ
いて学ぶ
– HTML5ベースのWebサイトの開発方法を学ぶ
• 本勉強会1～2回目のゴール
– HTML5のWebサイトが作成できる
– Webサイト開発に必要なツールを使いこなせる

本日のアジェンダ
• いまどきのHTMLとその周辺
• いまどきのWeb周辺技術
• いまどきのWebシステムの構成
• ハンズオン
– ハンズオンのゴール
– 開発環境を準備する
– 開発プロジェクトを作成する
– HTML5を書いてみる
– CSS3を書いてみる
– JavaScriptを書いてみる
– さらにチャレンジ

いまどきのHTMLとその周辺
4

HTML5はWeb開発のデファクト
• 2014年10月28日に勧告されました。
• 現状HTML5がデファクトスタンダードです。
– レガシーブラウザのサポート終了、スマートフォン
の登場が追い風になっています。
5

CSS3は機能／性能共に進化
• CSS3はCSS2に比べ表現の幅が広がりました。
– 透明度を指定できる
– 角丸ブロックを表現できる
– アニメーションのサポート
• CSS3はハードウェアアクセラレータが利用で
きるようになり描画速度が格段向上しました。
6

JavaScriptが飛躍的進化
• 「Webページのスクリプト言語」の枠を超え、
様々な用途で展開されています。
– サーバシステム開発（Node.js）
– モバイルアプリ開発（Sencha Touchなど）
• 開発方法論やデザインパターンの確立、フ
レームワークの発展が盛んであり、大規模開
発での採用もあたりまえになりました。
• ECMAScript6が2015年6月17日に策定完了。
現在、 ECMAScript7の策定が進行中。
7

いまどきのWeb周辺技術
8

拡張言語の発展
• CSS、JavaScriptを直接コーディングするのでは
なく、拡張言語（メタ言語）を記述し、 CSS、
JavaScriptコードを生成する方法が主流になり
つつあります。
9
拡張言語のコード CSS、JavaScript
コンパイル
コンパイル

フレームワーク利用は必須
• JavaScript、CSSに関するフレームワーク（※1）
が急速に開発／普及しています。
10
※1 ここでは体系だった複数の機能を提供するソフトウェアを「フレームワーク」と呼称します。

シングルページとマルチページ
• 1HTMLファイル内に複数のページ情報を持つ
「シングルページ」、従来通り1HTML：1ページ
構造を「マルチページ」と呼びます。
11
HTMLファイル
Web画面
Web画面
Web画面
HTMLファイル
Web画面HTMLファイル
Web画面
HTMLファイル
Web画面

レスポンシブWebデザイン
• レスポンシブWebデザインで、マルチスクリー
ン対応をします。
• 1HTMLでPC／スマホなど複数デバイスをサ
ポートする必要がある場合に有効な方法です。
12
HTML
（PC用）
HTML
（PC/SP兼用）
HTML
（SP用）
Non Responsive Responsive

いまどきのWebシステムの構成
13

フロントエンドバックエンド
• 基本的なWebシステムの構成
基本的な構成
14
PC
Mobile
Phone
Tablet
HTML
CSS Java
Script
REST
(HTTP/S)HTTP/S
Link Link
Web API Buisiness
Logic
DataBaseFile
Other
System
module
load
REST
DB
driver
File.IO

抑えておくべきポイント
1. フロントシステムとエンドシステムは切り離す
– 役割を明確にする
– 適した技術、アプローチを突き詰める
2. フロント－サーバエンドはREST通信で繋げる
– 通信はHTTP／HTTPSに統一する
– データフォーマットはJSONに統一する
3. 端末／ブラウザを限定する設定は避ける
15

ハンズオン
16

ハンズオンのゴール
• 郵便番号検索ページを作ります。
– 郵便番号を入力すると住所を取得します。
– データはZipCloud社提供のWebAPIを使います。
• http://zipcloud.ibsnet.co.jp/doc/api
17

開発ツールをセットアップする
• HTMLエディタ
– Bracketsを使います。（http://brackets.io/）
18

開発ツールをセットアップする
• Bracketsセットアップ手順
1. 以下URLからインストーラをダウンロードする
1. Win：http://qq3q.biz/tXht
2. Mac：http://qq3q.biz/tXhl
2. インストーラを実行し、手順にしたがってセット
アップする。
Windowsの場合

開発ツールについて
• ビルドツール
– gruntを使います。（http://gruntjs.com/）
20

開発ツールについて
• ビルドツール「grunt」とは？
– 一部の作業や、昨今のWeb開発で求められる汎
用的な作業を実施するツール。以下、機能一例。
• TypeScript/CaffeScriptのビルド
• SASS/LESSのビルド
• ファイル圧縮（パフォーマンス向上）
• 難読化（セキュリティ向上）
• キャッシュ無効化
– 上記以外にも、多数の機能がプラグインとして提
供されており、作業効率の向上などに役立ちます。
21

開発環境セットアップ
• gruntのセットアップ手順（Windows版）
1. node.jsをインストールするため、NODISTダウン
ロードする。
• https://github.com/marcelklehr/nodist/releases/downl
oad/v0.7.2/NodistSetup-v0.7.2.exe
2. ダウンロードしたファイルを実行し、手順に従っ
てインストールする。
22

3. 環境変数PATHにNODISTのパスを登録する
• システムのプロパティ＞詳細設定＞環境変数
23
設定の先頭に以下を追加
%NODIST_PREFIX%bin;

4. コマンドプロンプトを起動し、以下のNODISTコマ
ンドを実行してnode.jsをインストールする。
24
> nodist + node
> nodist nodev6.2.0
> node -v
⇒nodev6.2.0
・・・ node.jsのインストール
・・・ node.jsのバージョン確認
v4.4.4と表示されれば成功

5. 以下のコマンドを実行して、gruntクライアント
ツールをインストールする。（成功すると下図の
画面になる）
25
> npm install –g grunt-cli

• gruntのセットアップ手順（Mac版）
– ターミナルで以下のコマンドを実行します。
26
>ruby -e "$(curl -fsSL
https://raw.githubusercontent.com/Homebrew/install/master
/install)“
> brew install node
> node –v
> npm install –g grunt-cli
・・・ node.jsのインストール
・・・ node.jsのバージョン確認
・・・ homebrewのインストール
・・・ gruntのインストール

• SASSのセットアップ手順
1. Rubyをダウンロードする。（Windowsのみ）
• http://rubyinstaller.org/downloads/
2. インストーラを実行し、手順にしたがってセット
アップを進める。
27
・・・ 32bitインストーラ
・・・ 64bitインストーラ

3. 下記のチェックをONにする。
28

4. コマンドプロンプトを起動し、以下のコマンドを実
行する。（Windows＆Mac）
29
> gem update --system
> gem install sass
> sudo gem update --system
> sudo gem install sass
Windows
Mac

開発プロジェクトを作成する
• HTML、JavaScript等を格納する「プロジェクト」
を作成します。
1. C:に「postal」というフォルダを作成する。
2. コマンドプロンプトで「c:postal」に移動する。
3. 「npm init」コマンドを実行する。
30
> cd c:postal
> npm init ・・・ ③
・・・ ②
> mkdir ~/postal
> cd ~/postal
> npm init

• 「npm init」のあと、「name」「version」等の入
力を求められますが、今回は初期値にします。
• 「Is this ok?」がでたら「yes」を入力してください。
31

• 開発で使用するツール、フレームワークをイ
ンストールします。
– インストールは「npm install」コマンドを使用します。
– 今回使用する「grunt（ビルドツール）」「jQuery（フ
レームワーク）」をインストールします。コマンドプ
ロンプトで、以下コマンドを実行してください。
32
> npm install grunt --save-dev
> npm install jquery --save ・・・ｊQueryのインストール
・・・ gruntのインストール

• package.jsonを参照し、下図のようになってい
れば成功です。
33
gruntのインストール設定
ｊQueryのインストール設定

HTML5を書いてみる
• 基本的にはHTML4とほぼ同じです。
• 明確に異なるのは「doctype宣言部」です。
34
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html>
HTML4
HTML5

• HTML5では、「メディア機能拡張」「セクション
要素」など、HTML4の基本機能では実現でき
なかった様々な機能が追加されています。
35
機能機能概要追加されたタグ
オーディオ再生音声を再生する <audio>
ビデオ再生動画を再生する <video>
セクション要素ドキュメントの構造を明確にする <header>,<section>,<article
>,<nav>等
ルビ表示テキストにルビを設定する <rb>
フォームの拡張 formの入力項目で、メール、日付な
どが追加（20種以上）
<input type=“email”>、
<input type=“date”>等
HTML5追加機能の一例

• BracketsでHTMLファイルを作成、プレビューを
出してみましょう。
1. Bracketsを起動し、メニューより新しいファイルを
選択する。
36
設定の先頭に以下を追加

2. ファイル名を index.html と入力する。
3. ファイル名をダブルクリックすると、編集エリアに
てindex.htmlの作成ができるようになる。
37
ファイル名を index.html
と入力する
index.htmlの編集エリア

4. 編集エリアに以下を入力する。
5. Bracketsのライブプレビューボタンをクリックし、
ブラウザでプレビューを確認する。
38
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>郵便番号検索</title>
</head>
<body>
<h1>郵便番号検索</h1>
</body>
</html>
ライブプレビュー
ボタン

HTML5を書いてみる＜演習＞
• 以下のHTMLを作成してください。
39

HTML5を書いてみる＜解答例＞
40
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"src="node_modules/jquery/dist/jquery.min.js"></script>
</head>
<body>
<h1>郵便番号検索</h1>
<section class="condition_area">
<h2>郵便番号入力</h2>
<form>
<fieldset>
<legend>検索したい郵便番号を入力してください。</legend>

郵便番号：<input id="zipcode3" type="text" maxlength="3" value="104" />-<input id="zipcode4" type="text"
maxlength="4" value="6101"/>

<a id="searchButton" href="#">検索</a>
</fieldset>
</form>
</section>

HTML5を書いてみる＜解答例＞
41
<section class="result_area">

<h2>検索結果表示</h2>
<p>都道府県：<span id="todoufuken">検索結果なし</span></p>
<p>市区町村：<span id="shikutyoson">検索結果なし</span></p>
<p>町域：<span id="tyoiki">検索結果なし</span></p>
</section>
<script type="text/javascript" src="javascript/index.js"></script>
</body>
</html>

JavaScriptを書いてみる
• JavaScriptでは以下の機能を実装します。
1. 検索をクリックしたら郵便番号検索を実施する
• 検索をクリックし、画面項目の郵便番号を取得する
• 郵便番号検索APIのリクエストパラメータを作成する
• 郵便番号検索APIにHTTPリクエストを送信する
2. 検索結果を画面へ表示する
• 郵便番号検索APIからレスポンスを受信する
• レスポンスから「都道府県」「市区町村名」「町域名」を
取得し、画面に表示する
42

• JavaScript作成では以下を前提とします。
– jQueryを使用する。
• jQueryの採用により、オブジェクトの取得等を簡素な記
述で実現できるので作業効率が良い。
– JavaScriptは外部ファイルに記述する。
• 外部ファイルにすることで、HTML、JavaScriptの保守性
を高める
43

• このようなファイル構造になります
44
オリジナルの
JavaScriptファイル
jQueryの
JavaScriptファイル
HTMLファイル

• HTMLに外部JavaScriptファイルのリンクを追
加します。
– Headタグ内に追加（jQuery）
– Bodyタグ最下部に追加（オリジナルJavaScript）
45
<head>
<script type="text/javascript"src="node_modules/jquery/dist/jquery.min.js"></script>
</head>
・
・
・
<script type="text/javascript" src="javascript/index.js"></script>
</body>
</html>

• なぜ「HEAD」「BODY」で使い分けるか？
– 最初にロードしたいファイルはHEADに記述
• 基本的なフレームワーク
• 他のJavaScriptの前提となるJavaScriptファイル
– HTMLファイルの後にロードしたいファイルは
BODYに記述
• BODYの最後にロードすることで、静的コンテンツが先
に描画され、体感速度が向上する
46
HTMLの読込
<HEAD>の読込 <BODY>の読込
ｊQueryロードオリジナルJavaScriptロード画面読込／描画

• index.jsを作成します。
– $(function(){}); を記述する。
• HTMLの読込完了後に実行することを保証する
• {}の中にプログラムを記述する
47
$(function(){
・
・
・
);
javascript/index.js

• ｊQueryの基本
– 画面項目の要素を取得する
– <input>要素から値を取得する
– 画面項目に文字を設定する
48
$('#zipcode3')
$('#zipcode3').val()
$(‘#todoufuken’).text(“あいうえお”);
# + ID名を指定

– <a>クリック時のプログラムを作成する
49
<a id="searchButton" href="#">検索</a>
index.html
javascript/index.js
# にするとページ遷移しない
$('#searchButton').on('click',function(){
・
・
・
});
プログラムを記述する
イベント名を指定する項目名を指定する

– HTTP通信をし、レスポンスを受信する
50
javascript/index.js
$.ajax({
url: "http://zipcloud.ibsnet.co.jp/api/search",
data: {
zipcode: zipcode7
},
dataType: "jsonp",
success: function(data){
・
・
・
}
});
レスポンス受信時のプログラムを記述する
data：HTTPレスポンス
Ajax通信をする
パラメータを設定

JavaScriptを書いてみる＜演習＞
• 入力した郵便番号から、住所を検索し画面表
示するJavaScriptを作成してください。
51
郵便番号を入力し、検索をクリックする
検索結果を表示する

JavaScriptを書いてみる＜解答例＞
52
$(function(){
// 郵便番号作成
var zipcode7 = $('#zipcode3').val() + $('#zipcode4').val()
// Web API実行
$.ajax({
data: {
zipcode: zipcode7
},
dataType: "jsonp",
success: function(data){
setDisplay(data.results[0])
}
});
// Web API取得結果を画面に表示
function setDisplay(result) {
$('#todoufuken').text(result.address1);
$('#shikutyoson').text(result.address2);
$('#tyoiki').text(result.address3);
}
});
});

CSSを書いてみる
• CSS作成では以下を前提とします。
– SASSを使用する。
• ファイル形式は SCSS形式とする。
– SCSS->CSS変換はgruntプラグインで変換します。
53

• このようなファイル構造になります
54
CSSファイル
（ビルド後）
SCSSファイル
（ソース）

• SCSSからCSSを生成する設定をgruntに追加し
ます。
1. npm installコマンドで、「grunt-contrib-sass」をイ
ンストールする。
55
> npm install grunt-contrib-sass --save-dev ・・・ gruntのインストール

2. Gruntfile.jsにビルド設定を追加する。
56
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
dist: {
files: {
"css/main.css": "scss/main.scss"
}
}
}
});
// プラグインのロード
grunt.loadNpmTasks('grunt-contrib-sass');
// デフォルトタスクの設定
grunt.registerTask('default', ["sass"]);
};
変換元
変換先
プラグイン読み込み
sassタスクを実行

• 環境ができたら、実際にSCSSファイルからCSS
を作成し、HTMLで表示してみましょう。
1. Bracketsで、SCSSファイルを作成します。
57
1. 右クリック「新しいフォルダーを作成」で、「scss」と
いうフォルダーを作成する。
2. scssフォルダを選択・右クリックで「新しいファイル」
を選択肢、main.scssを作成する。C

2. scss/main.scssにスタイル設定を記述する。
3. コマンドプロンプトからgruntのビルドを実行する。
58
.condition_area {
background-color: PeachPuff;
}
scss/main.scss
>grunt
CSSフォルダに、
main.cssが作成されて
いたら成功

4. HTMLにCSSの設定を追加する。
5. ブラウザで表示する。
59
<head>
<link rel="stylesheet" href="css/main.css">
index.html
CSSを指定する
背景色が変更され
たら成功

CSSを書いてみる＜演習＞
• 以下の設定をSCSSで設定しましょう。
60
①背景色を薄ピン
ク
③罫線をピンク
②文字色を赤
アンダーライン
⑥文字色を青
アンダーライン
⑧項目名のみボー
ルド
④入力欄の幅を
40px
⑤太字
⑦背景色を水色

CSSを書いてみる＜回答案＞
61
.condition_area {
background-color: PeachPuff;
h2 {
color: red;
text-decoration: underline;
}
fieldset {
border-color: deeppink;
border-style: solid;
}
input {
width: 40px;
}
}
legend {
font: {
weight: bold;
}
}
.result_area {
background-color: LightCyan;
h2 {
color: blue;
text-decoration: underline;
}
}
p {
font: {
weight: bold;
}
span {
font: {
weight: normal;
}
}
}
scss/main.scss （1/2） scss/main.scss （2/2）
・・・ ①
・・・ ②
・・・ ③
・・・ ④
・・・ ⑤
・・・ ⑥
・・・ ⑦
・・・ ⑧

さらにチャレンジする【難読化】
• 難読化とは、JavaScriptの変数名など無意味
な文字列に変換することで、プログラムの挙
動を推測を困難にします。
62
$(function(){
console.log("click!")
// 郵便番号作成
var zipcode7 =
$('#zipcode3').val() + $('#zipcode4').val()
// Web API実行
$.ajax({
data: {
zipcode: zipcode7
},
$(function(){$("#searchButton").on("click",function
(){function
a(a){$("#todoufuken").text(a.address1),$("#shikuty
oson").text(a.address2),$("#tyoiki").text(a.address
3)}console.log("click!");var
b=$("#zipcode3").val()+$("#zipcode4").val();$.ajax({
url:"http://zipcloud.ibsnet.co.jp/api/search",data:{
zipcode:b},dataType:"jsonp",success:function(b){a(
b.results[0])}})})});
javascript/index.js javascript/index.min.js
難
読
化

• 難読化は、gruntで簡単に実現できます。
1. 以下コマンドで、gruntプラグイン「grunt-contrib-
uglify」をインストールする。
63
> npm install grunt-contrib-uglify --save-dev
難読化 gruntプラグイン
「uglify」

2. Gruntfile.jsに設定を追加する。
64
grunt.initConfig({
sass: {
dist: {
files: {
}
}
},
uglify:{
my_target: {
files: {
'javascript/index.min.js': ['javascript/index.js']
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('default', ['sass','uglify']);
};
Gruntfile.js （1/2） Gruntfile.js （2/2）

3. コマンドプロンプトで grunt を実行する。
65
>grunt
Running "sass:dist" (sass) task
Running "uglify:my_target" (uglify) task
File javascript/index.min.js created: 778 B → 368 B
>> 1 file created.
Done. 難読化によりファイルサ
イズも小さくなる

さらにチャレンジする【CSS圧縮】
• CSSを圧縮することで、パフォーマンスを改善
します。
66
.condition_area {
background-color: PeachPuff; }
.condition_area h2 {
color: red;
text-decoration: underline; }
.condition_area fieldset {
border-color: deeppink;
border-style: solid; }
.condition_area input {
width: 40px; }
legend {
font-weight: bold; }
.result_area {
background-color: LightCyan; }
.result_area h2 {
legend,p{font-
weight:700}.condition_area{background-
color:#ffdab9}.condition_area h2{color:red;text-
decoration:underline}.condition_area
fieldset{border-color:#ff1493;border-
style:solid}.condition_area
input{width:40px}.result_area{background-
color:#e0ffff}.result_area h2{color:#00f;text-
decoration:underline}p span{font-weight:400}
css/main.css css/main.min.css
圧
縮

• CSS圧縮も、gruntで簡単に実現できます。
1. 以下コマンドで、gruntプラグイン「grunt-contrib-
cssmin」をインストールする。
67
> npm install grunt-contrib-cssmin --save-dev
CSS圧縮 gruntプラグイン
「cssmin」

2. Gruntfile.jsに設定を追加する。
68
grunt.initConfig({
sass: {
dist: {
files: {
}
}
},
cssmin :{
combine: {
files:{
'css/main.min.css':['css/main.css']
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.registerTask('default', ['sass','cssmin']);
};
Gruntfile.js （1/2） Gruntfile.js （2/2）

3. コマンドプロンプトで grunt を実行する。
69
>grunt
Running "sass:dist" (sass) task
Running "cssmin:combine" (cssmin) task
>> 1 file created. 536 B → 333 B
Done.
難読化によりファイルサ
イズも小さくなる

おつかれさまでした！
• 次回予告
– Gitでソースコードの構成管理を体験します。
– JenkinsでCIを体験します。
– AWSで今回作成したWebページを稼働します。
• 次回参加に向けてのお願い
– Githubのアカウントを作成しておいてください。
• https://github.com/
– AWSのアカウントを作成しておいてください。
• http://aws.amazon.com/jp/
70

http://aitc.jp
https://www.facebook.com/aitc.jp
最新情報は
こちらをご参照ください
ハルミン
AITC非公式イメージキャラクター
シニア勉強会への参加、
お待ちしてます
7/16（土）14:00～

AITCシニア技術者勉強会 「今さら聞けないWebサイト開発」 vol1

More Related Content

What's hot

Similar to AITCシニア技術者勉強会 「今さら聞けないWebサイト開発」 vol1