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 JavaScript

REST

(HTTP/S)HTTP/S

Link Link

Web API BuisinessLogic

DataBaseFile

OtherSystem

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

http://zipcloud.ibsnet.co.jp/doc/api


開発ツールをセットアップする

• HTMLエディタ

– Bracketsを使います。（http://brackets.io/）

18

http://brackets.io/


開発ツールをセットアップする

• Bracketsセットアップ手順

1. 以下URLからインストーラをダウンロードする

1. Win：http://qq3q.biz/tXht

2. Mac：http://qq3q.biz/tXhl

2. インストーラを実行し、手順にしたがってセットアップする。

Windowsの場合

http://qq3q.biz/tXht

http://qq3q.biz/tXhl


開発ツールについて

• ビルドツール

– gruntを使います。（http://gruntjs.com/）

20


開発ツールについて

• ビルドツール「grunt」とは？

–一部の作業や、昨今のWeb開発で求められる汎用的な作業を実施するツール。以下、機能一例。

• TypeScript/CaffeScriptのビルド

• SASS/LESSのビルド

• ファイル圧縮（パフォーマンス向上）

• 難読化（セキュリティ向上）

• キャッシュ無効化

–上記以外にも、多数の機能がプラグインとして提供されており、作業効率の向上などに役立ちます。

21


開発環境セットアップ

• gruntのセットアップ手順（Windows版）

1. node.jsをインストールするため、NODISTダウンロードする。

• https://github.com/marcelklehr/nodist/releases/download/v0.7.2/NodistSetup-v0.7.2.exe

2. ダウンロードしたファイルを実行し、手順に従ってインストールする。

22

https://github.com/marcelklehr/nodist/releases/download/v0.7.2/NodistSetup-v0.7.2.exe



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 -fsSLhttps://raw.githubusercontent.com/Homebrew/install/master/install)“

> brew install node

> node –v

> npm install –g grunt-cli

・・・ node.jsのインストール

・・・ node.jsのバージョン確認

・・・ homebrewのインストール

・・・ gruntのインストール

https://raw.githubusercontent.com/Homebrew/install/master/install



• SASSのセットアップ手順

1. Rubyをダウンロードする。（Windowsのみ）

• http://rubyinstaller.org/downloads/

2. インストーラを実行し、手順にしたがってセットアップを進める。

27

・・・ 32bitインストーラ・・・ 64bitインストーラ

http://rubyinstaller.org/downloads/



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><meta charset="utf-8"/><title>郵便番号検索</title>

<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><meta charset="utf-8"/><title>郵便番号検索</title><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(){$('#searchButton').on('click',function(){

// 郵便番号作成var zipcode7 = $('#zipcode3').val() + $('#zipcode4').val()

// Web API実行$.ajax({


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(){$('#searchButton').on('click',function(){

console.log("click!")

// 郵便番号作成var zipcode7 =

$('#zipcode3').val() + $('#zipcode4').val()

// Web API実行$.ajax({


zipcode: zipcode7},

$(function(){$("#searchButton").on("click",function(){function a(a){$("#todoufuken").text(a.address1),$("#shikutyoson").text(a.address2),$("#tyoiki").text(a.address3)}console.log("click!");varb=$("#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



sass: {dist: {


}}

},

uglify:{my_target: {

files: {'javascript/index.min.js': ['javascript/index.js']

}}

}});

// プラグインのロードgrunt.loadNpmTasks('grunt-contrib-sass');grunt.loadNpmTasks('grunt-contrib-uglify');

// デフォルトタスクの設定grunt.registerTask('default', ['sass','uglify']);

};

Gruntfile.js （1/2） Gruntfile.js （2/2）



3. コマンドプロンプトで grunt を実行する。

65

>gruntRunning "sass:dist" (sass) task

Running "uglify:my_target" (uglify) taskFile 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



sass: {dist: {


}}

},

cssmin :{combine: {

files:{'css/main.min.css':['css/main.css']

}}

}});

// プラグインのロードgrunt.loadNpmTasks('grunt-contrib-sass');grunt.loadNpmTasks('grunt-contrib-cssmin');

// デフォルトタスクの設定grunt.registerTask('default', ['sass','cssmin']);

};

Gruntfile.js （1/2） Gruntfile.js （2/2）



3. コマンドプロンプトで grunt を実行する。

69

>gruntRunning "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

https://github.com/

http://aws.amazon.com/jp/


http://aitc.jp

https://www.facebook.com/aitc.jp

最新情報はこちらをご参照ください

ハルミンAITC非公式イメージキャラクター

シニア勉強会への参加、お待ちしてます7/16（土）14:00～

http://aitc.jp/

https://www.facebook.com/aitc.jp

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

Engineering

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

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

Engineering

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

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

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