Upload
-
View
189
Download
1
Embed Size (px)
Citation preview
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
AITCシニア技術者勉強会「今さら聞けないWebサイト開発」
Vol.1
2016年05月21日
先端IT活用推進コンソーシアムシニア技術者勉強会
近藤 繁延
シニアと女子
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
はじめに
• 本勉強会の趣旨
– Web開発界隈で語られるツール、キーワードについて学ぶ
– HTML5ベースのWebサイトの開発方法を学ぶ
• 本勉強会1~2回目のゴール
– HTML5のWebサイトが作成できる
– Webサイト開発に必要なツールを使いこなせる
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
本日のアジェンダ
• いまどきのHTMLとその周辺
• いまどきのWeb周辺技術
• いまどきのWebシステムの構成
• ハンズオン
– ハンズオンのゴール
– 開発環境を準備する
– 開発プロジェクトを作成する
– HTML5を書いてみる
– CSS3を書いてみる
– JavaScriptを書いてみる
– さらにチャレンジ
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
いまどきのHTMLとその周辺
4
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
HTML5はWeb開発のデファクト
• 2014年10月28日に勧告されました。
• 現状HTML5がデファクトスタンダードです。
–レガシーブラウザのサポート終了、スマートフォンの登場が追い風になっています。
5
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
CSS3は機能/性能共に進化
• CSS3はCSS2に比べ表現の幅が広がりました。
–透明度を指定できる
–角丸ブロックを表現できる
–アニメーションのサポート
• CSS3はハードウェアアクセラレータが利用できるようになり描画速度が格段向上しました。
6
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
JavaScriptが飛躍的進化
• 「Webページのスクリプト言語」の枠を超え、様々な用途で展開されています。
–サーバシステム開発(Node.js)
–モバイルアプリ開発(Sencha Touchなど)
• 開発方法論やデザインパターンの確立、フレームワークの発展が盛んであり、大規模開発での採用もあたりまえになりました。
• ECMAScript6が2015年6月17日に策定完了。現在、 ECMAScript7の策定が進行中。
7
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
いまどきのWeb周辺技術
8
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
拡張言語の発展
• CSS、JavaScriptを直接コーディングするのではなく、拡張言語(メタ言語)を記述し、 CSS、JavaScriptコードを生成する方法が主流になりつつあります。
9
拡張言語のコード CSS、JavaScript
コンパイル
コンパイル
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
フレームワーク利用は必須
• JavaScript、CSSに関するフレームワーク(※1)が急速に開発/普及しています。
10※1 ここでは体系だった複数の機能を提供するソフトウェアを「フレームワーク」と呼称します。
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
シングルページとマルチページ
• 1HTMLファイル内に複数のページ情報を持つ「シングルページ」、従来通り1HTML:1ページ構造を「マルチページ」と呼びます。
11
HTMLファイル
Web画面
Web画面
Web画面
HTMLファイル
Web画面HTMLファイル
Web画面HTMLファイル
Web画面
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
レスポンシブWebデザイン
• レスポンシブWebデザインで、マルチスクリーン対応をします。
• 1HTMLでPC/スマホなど複数デバイスをサポートする必要がある場合に有効な方法です。
12
HTML(PC用)
HTML(PC/SP兼用)
HTML(SP用)
Non Responsive Responsive
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
いまどきのWebシステムの構成
13
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
フロントエンド バックエンド
• 基本的な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
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
抑えておくべきポイント
1. フロントシステムとエンドシステムは切り離す
–役割を明確にする
–適した技術、アプローチを突き詰める
2. フロント-サーバエンドはREST通信で繋げる
–通信はHTTP/HTTPSに統一する
–データフォーマットはJSONに統一する
3. 端末/ブラウザを限定する設定は避ける
15
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
ハンズオン
16
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
ハンズオンのゴール
• 郵便番号検索ページを作ります。
–郵便番号を入力すると住所を取得します。
–データはZipCloud社提供のWebAPIを使います。
• http://zipcloud.ibsnet.co.jp/doc/api
17
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
開発ツールをセットアップする
• HTMLエディタ
– Bracketsを使います。(http://brackets.io/)
18
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
開発ツールをセットアップする
• Bracketsセットアップ手順
1. 以下URLからインストーラをダウンロードする
1. Win:http://qq3q.biz/tXht
2. Mac:http://qq3q.biz/tXhl
2. インストーラを実行し、手順にしたがってセットアップする。
Windowsの場合
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
開発ツールについて
• ビルドツール
– gruntを使います。(http://gruntjs.com/)
20
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
開発ツールについて
• ビルドツール「grunt」とは?
–一部の作業や、昨今のWeb開発で求められる汎用的な作業を実施するツール。以下、機能一例。
• TypeScript/CaffeScriptのビルド
• SASS/LESSのビルド
• ファイル圧縮(パフォーマンス向上)
• 難読化(セキュリティ向上)
• キャッシュ無効化
–上記以外にも、多数の機能がプラグインとして提供されており、作業効率の向上などに役立ちます。
21
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
開発環境セットアップ
• gruntのセットアップ手順(Windows版)
1. node.jsをインストールするため、NODISTダウンロードする。
• https://github.com/marcelklehr/nodist/releases/download/v0.7.2/NodistSetup-v0.7.2.exe
2. ダウンロードしたファイルを実行し、手順に従ってインストールする。
22
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
開発環境セットアップ
3. 環境変数PATHにNODISTのパスを登録する
• システムのプロパティ>詳細設定>環境変数
23
設定の先頭に以下を追加
%NODIST_PREFIX%\bin;
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
開発環境セットアップ
4. コマンドプロンプトを起動し、以下のNODISTコマンドを実行してnode.jsをインストールする。
24
> nodist + node
> nodist nodev6.2.0
> node -v
⇒nodev6.2.0
・・・ node.jsのインストール
・・・ node.jsのバージョン確認v4.4.4と表示されれば成功
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
開発環境セットアップ
5. 以下のコマンドを実行して、gruntクライアント
ツールをインストールする。(成功すると下図の画面になる)
25
> npm install –g grunt-cli
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
開発環境セットアップ
• 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のインストール
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
開発環境セットアップ
• SASSのセットアップ手順
1. Rubyをダウンロードする。 (Windowsのみ)
• http://rubyinstaller.org/downloads/
2. インストーラを実行し、手順にしたがってセットアップを進める。
27
・・・ 32bitインストーラ・・・ 64bitインストーラ
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
開発環境セットアップ
3. 下記のチェックをONにする。
28
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
開発環境セットアップ
4. コマンドプロンプトを起動し、以下のコマンドを実行する。 (Windows&Mac)
29
> gem update --system> gem install sass
> sudo gem update --system> sudo gem install sass
Windows
Mac
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
開発プロジェクトを作成する
• HTML、JavaScript等を格納する「プロジェクト」を作成します。
1. C:\に「postal」というフォルダを作成する。
2. コマンドプロンプトで「c:\postal」に移動する。
3. 「npm init」コマンドを実行する。
30
> cd c:\postal
> npm init ・・・ ③
・・・ ②
> mkdir ~/postal> cd ~/postal> npm init
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
開発プロジェクトを作成する
• 「npm init」のあと、「name」「version」等の入力を求められますが、今回は初期値にします。
• 「Is this ok?」がでたら「yes」を入力してください。
31
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
開発プロジェクトを作成する
• 開発で使用するツール、フレームワークをインストールします。
– インストールは「npm install」コマンドを使用します。
–今回使用する「grunt(ビルドツール)」「jQuery(フ
レームワーク)」をインストールします。コマンドプロンプトで、以下コマンドを実行してください。
32
> npm install grunt --save-dev
> npm install jquery --save ・・・ jQueryのインストール
・・・ gruntのインストール
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
開発プロジェクトを作成する
• package.jsonを参照し、下図のようになっていれば成功です。
33
gruntのインストール設定
jQueryのインストール設定
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
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
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
HTML5を書いてみる
• HTML5では、「メディア機能拡張」「セクション要素」など、HTML4の基本機能では実現できなかった様々な機能が追加されています。
35
機能 機能概要 追加されたタグ
オーディオ再生 音声を再生する <audio>
ビデオ再生 動画を再生する <video>
セクション要素 ドキュメントの構造を明確にする <header>,<section>,<article>,<nav>等
ルビ表示 テキストにルビを設定する <rb>
フォームの拡張 formの入力項目で、メール、日付などが追加(20種以上)
<input type=“email”>、<input type=“date”>等
HTML5追加機能の一例
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
HTML5を書いてみる
• BracketsでHTMLファイルを作成、プレビューを出してみましょう。
1. Bracketsを起動し、メニューより新しいファイルを選択する。
36
設定の先頭に以下を追加
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
HTML5を書いてみる
2. ファイル名を index.html と入力する。
3. ファイル名をダブルクリックすると、編集エリアにてindex.htmlの作成ができるようになる。
37
ファイル名を index.html と入力する
index.htmlの編集エリア
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
HTML5を書いてみる
4. 編集エリアに以下を入力する。
5. Bracketsのライブプレビューボタンをクリックし、ブラウザでプレビューを確認する。
38
<!DOCTYPE html><html>
<head><meta charset="utf-8"/><title>郵便番号検索</title>
</head><body>
<h1>郵便番号検索</h1></body>
</html>
ライブプレビューボタン
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
HTML5を書いてみる<演習>
• 以下のHTMLを作成してください。
39
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
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>
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
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>
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
JavaScriptを書いてみる
• JavaScriptでは以下の機能を実装します。
1. 検索をクリックしたら郵便番号検索を実施する
• 検索をクリックし、画面項目の郵便番号を取得する
• 郵便番号検索APIのリクエストパラメータを作成する
• 郵便番号検索APIにHTTPリクエストを送信する
2. 検索結果を画面へ表示する
• 郵便番号検索APIからレスポンスを受信する
• レスポンスから「都道府県」「市区町村名」「町域名」を取得し、画面に表示する
42
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
JavaScriptを書いてみる
• JavaScript作成では以下を前提とします。
– jQueryを使用する。
• jQueryの採用により、オブジェクトの取得等を簡素な記述で実現できるので作業効率が良い。
– JavaScriptは外部ファイルに記述する。
• 外部ファイルにすることで、HTML、JavaScriptの保守性を高める
43
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
JavaScriptを書いてみる
• このようなファイル構造になります
44
オリジナルのJavaScriptファイル
jQueryのJavaScriptファイル
HTMLファイル
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
JavaScriptを書いてみる
• 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>
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
JavaScriptを書いてみる
• なぜ「HEAD」「BODY」で使い分けるか?
–最初にロードしたいファイルはHEADに記述
• 基本的なフレームワーク
• 他のJavaScriptの前提となるJavaScriptファイル
– HTMLファイルの後にロードしたいファイルはBODYに記述
• BODYの最後にロードすることで、静的コンテンツが先に描画され、体感速度が向上する
46
HTMLの読込
<HEAD>の読込 <BODY>の読込
jQueryロード オリジナルJavaScriptロード画面読込/描画
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
JavaScriptを書いてみる
• index.jsを作成します。
– $(function(){}); を記述する。
• HTMLの読込完了後に実行することを保証する
• {}の中にプログラムを記述する
47
$(function(){・・・
);
javascript/index.js
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
JavaScriptを書いてみる
• jQueryの基本
–画面項目の要素を取得する
– <input>要素から値を取得する
–画面項目に文字を設定する
48
$('#zipcode3')
$('#zipcode3').val()
$(‘#todoufuken’).text(“あいうえお”);
# + ID名を指定
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
JavaScriptを書いてみる
• jQueryの基本
– <a>クリック時のプログラムを作成する
49
<a id="searchButton" href="#">検索</a>
index.html
javascript/index.js
# にするとページ遷移しない
$('#searchButton').on('click',function(){・・・
});
プログラムを記述する
イベント名を指定する項目名を指定する
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
JavaScriptを書いてみる
• jQueryの基本
– 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通信をする
パラメータを設定
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
JavaScriptを書いてみる<演習>
• 入力した郵便番号から、住所を検索し画面表示するJavaScriptを作成してください。
51
郵便番号を入力し、検索をクリックする
検索結果を表示する
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
JavaScriptを書いてみる<解答例>
52
$(function(){$('#searchButton').on('click',function(){
// 郵便番号作成var zipcode7 = $('#zipcode3').val() + $('#zipcode4').val()
// Web API実行$.ajax({
url: "http://zipcloud.ibsnet.co.jp/api/search",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);
}
});});
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
CSSを書いてみる
• CSS作成では以下を前提とします。
– SASSを使用する。
• ファイル形式は SCSS形式とする。
– SCSS->CSS変換はgruntプラグインで変換します。
53
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
CSSを書いてみる
• このようなファイル構造になります
54
CSSファイル(ビルド後)
SCSSファイル(ソース)
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
CSSを書いてみる
• SCSSからCSSを生成する設定をgruntに追加します。
1. npm installコマンドで、「grunt-contrib-sass」をインストールする。
55
> npm install grunt-contrib-sass --save-dev ・・・ gruntのインストール
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
CSSを書いてみる
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タスクを実行
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
CSSを書いてみる
• 環境ができたら、実際にSCSSファイルからCSSを作成し、HTMLで表示してみましょう。
1. Bracketsで、SCSSファイルを作成します。
57
1. 右クリック「新しいフォルダーを作成」で、「scss」というフォルダーを作成する。
2. scssフォルダを選択・右クリックで「新しいファイル」を選択肢、main.scssを作成する。C
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
CSSを書いてみる
2. scss/main.scssにスタイル設定を記述する。
3. コマンドプロンプトからgruntのビルドを実行する。
58
.condition_area {background-color: PeachPuff;
}
scss/main.scss
>grunt
CSSフォルダに、main.cssが作成されていたら成功
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
CSSを書いてみる
4. HTMLにCSSの設定を追加する。
5. ブラウザで表示する。
59
<head><link rel="stylesheet" href="css/main.css">
index.html
CSSを指定する
背景色が変更されたら成功
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
CSSを書いてみる<演習>
• 以下の設定をSCSSで設定しましょう。
60
①背景色を薄ピンク
③罫線をピンク
②文字色を赤アンダーライン
⑥文字色を青アンダーライン
⑧項目名のみボールド
④入力欄の幅を40px
⑤太字
⑦背景色を水色
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
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)
・・・ ①
・・・ ②
・・・ ③
・・・ ④
・・・ ⑤
・・・ ⑥
・・・ ⑦
・・・ ⑧
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
さらにチャレンジする【難読化】
• 難読化とは、JavaScriptの変数名など無意味
な文字列に変換することで、プログラムの挙動を推測を困難にします。
62
$(function(){$('#searchButton').on('click',function(){
console.log("click!")
// 郵便番号作成var zipcode7 =
$('#zipcode3').val() + $('#zipcode4').val()
// Web API実行$.ajax({
url: "http://zipcloud.ibsnet.co.jp/api/search",data: {
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
難読化
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
さらにチャレンジする【難読化】
• 難読化は、gruntで簡単に実現できます。
1. 以下コマンドで、gruntプラグイン「grunt-contrib-uglify」をインストールする。
63
> npm install grunt-contrib-uglify --save-dev
難読化 gruntプラグイン「uglify」
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
さらにチャレンジする【難読化】
2. Gruntfile.jsに設定を追加する。
64
module.exports = function(grunt) {grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {dist: {
files: {"css/main.css": "scss/main.scss"
}}
},
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)
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
さらにチャレンジする【難読化】
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. 難読化によりファイルサイズも小さくなる
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
さらにチャレンジする【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
圧縮
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
さらにチャレンジする【CSS圧縮】
• CSS圧縮も、gruntで簡単に実現できます。
1. 以下コマンドで、gruntプラグイン「grunt-contrib-cssmin」をインストールする。
67
> npm install grunt-contrib-cssmin --save-dev
CSS圧縮 gruntプラグイン「cssmin」
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
さらにチャレンジする【CSS圧縮】
2. Gruntfile.jsに設定を追加する。
68
module.exports = function(grunt) {grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {dist: {
files: {"css/main.css": "scss/main.scss"
}}
},
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)
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
さらにチャレンジする【CSS圧縮】
3. コマンドプロンプトで grunt を実行する。
69
>gruntRunning "sass:dist" (sass) task
Running "cssmin:combine" (cssmin) task>> 1 file created. 536 B → 333 B
Done.難読化によりファイルサイズも小さくなる
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
おつかれさまでした!
• 次回予告
– Gitでソースコードの構成管理を体験します。
– JenkinsでCIを体験します。
– AWSで今回作成したWebページを稼働します。
• 次回参加に向けてのお願い
– Githubのアカウントを作成しておいてください。
• https://github.com/
– AWSのアカウントを作成しておいてください。
• http://aws.amazon.com/jp/
70
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
http://aitc.jp
https://www.facebook.com/aitc.jp
最新情報はこちらをご参照ください
ハルミンAITC非公式イメージキャラクター
シニア勉強会への参加、お待ちしてます7/16(土)14:00~