Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
AITCシニア技術者勉強会
「今さら聞けないWebサイト開発」
...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
はじめに
• 本勉強会の趣旨
– Web開発界隈で語られるツール...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
本日のアジェンダ
• いまどきのHTMLとその周辺
• いまどき...
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日に...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
CSS3は機能/性能共に進化
• CSS3はCSS2に比べ表現の...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
JavaScriptが飛躍的進化
• 「Webページのスクリプト...
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を直接コーディン...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
フレームワーク利用は必須
• JavaScript、CSSに関す...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
シングルページとマルチページ
• 1HTMLファイル内に複数のペ...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
レスポンシブWebデザイン
• レスポンシブWebデザインで、マ...
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システムの構成
...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
抑えておくべきポイント
1. フロントシステムとエンドシステムは...
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.
ハンズオンのゴール
• 郵便番号検索ページを作ります。
– 郵便...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
開発ツールをセットアップする
• HTMLエディタ
– Brac...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
開発ツールをセットアップする
• Bracketsセットアップ手...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
開発ツールについて
• ビルドツール
– gruntを使います。...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
開発ツールについて
• ビルドツール「grunt」とは?
– 一...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
開発環境セットアップ
• gruntのセットアップ手順(Wind...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
開発環境セットアップ
3. 環境変数PATHにNODISTのパス...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
開発環境セットアップ
4. コマンドプロンプトを起動し、以下のN...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
開発環境セットアップ
5. 以下のコマンドを実行して、grunt...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
開発環境セットアップ
• gruntのセットアップ手順(Mac版...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
開発環境セットアップ
• SASSのセットアップ手順
1. Ru...
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. コマンドプロンプトを起動し、以下のコ...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
開発プロジェクトを作成する
• HTML、JavaScript等...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
開発プロジェクトを作成する
• 「npm init」のあと、「n...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
開発プロジェクトを作成する
• 開発で使用するツール、フレームワ...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
開発プロジェクトを作成する
• package.jsonを参照し...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
HTML5を書いてみる
• 基本的にはHTML4とほぼ同じです。...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
HTML5を書いてみる
• HTML5では、「メディア機能拡張」...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
HTML5を書いてみる
• BracketsでHTMLファイルを...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
HTML5を書いてみる
2. ファイル名を index.html...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
HTML5を書いてみる
4. 編集エリアに以下を入力する。
5....
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
HTML5を書いてみる<演習>
• 以下のHTMLを作成してくだ...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
HTML5を書いてみる<解答例>
40
<!DOCTYPE ht...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
HTML5を書いてみる<解答例>
41
<section cla...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
JavaScriptを書いてみる
• JavaScriptでは以...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
JavaScriptを書いてみる
• JavaScript作成で...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
JavaScriptを書いてみる
• このようなファイル構造にな...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
JavaScriptを書いてみる
• HTMLに外部JavaSc...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
JavaScriptを書いてみる
• なぜ「HEAD」「BODY...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
JavaScriptを書いてみる
• index.jsを作成しま...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
JavaScriptを書いてみる
• jQueryの基本
– 画...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
JavaScriptを書いてみる
• jQueryの基本
– <...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
JavaScriptを書いてみる
• jQueryの基本
– H...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
JavaScriptを書いてみる<演習>
• 入力した郵便番号か...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
JavaScriptを書いてみる<解答例>
52
$(funct...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
CSSを書いてみる
• CSS作成では以下を前提とします。
– ...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
CSSを書いてみる
• このようなファイル構造になります
54
...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
CSSを書いてみる
• SCSSからCSSを生成する設定をgru...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
CSSを書いてみる
2. Gruntfile.jsにビルド設定を...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
CSSを書いてみる
• 環境ができたら、実際にSCSSファイルか...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
CSSを書いてみる
2. scss/main.scssにスタイル...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
CSSを書いてみる
4. HTMLにCSSの設定を追加する。
5...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
CSSを書いてみる<演習>
• 以下の設定をSCSSで設定しまし...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
CSSを書いてみる<回答案>
61
.condition_are...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
さらにチャレンジする【難読化】
• 難読化とは、JavaScri...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
さらにチャレンジする【難読化】
• 難読化は、gruntで簡単に...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
さらにチャレンジする【難読化】
2. Gruntfile.jsに...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
さらにチャレンジする【難読化】
3. コマンドプロンプトで gr...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
さらにチャレンジする【CSS圧縮】
• CSSを圧縮することで、...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
さらにチャレンジする【CSS圧縮】
• CSS圧縮も、grunt...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
さらにチャレンジする【CSS圧縮】
2. Gruntfile.j...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
さらにチャレンジする【CSS圧縮】
3. コマンドプロンプトで ...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
おつかれさまでした!
• 次回予告
– Gitでソースコードの構...
Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.
http://aitc.jp
https://www.faceb...
Upcoming SlideShare
Loading in …5
×

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

186 views

Published on

AITCシニア技術者勉強会
「今さら聞けないWebサイト開発」シリーズ
第1回

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

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

  1. 1. Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. AITCシニア技術者勉強会 「今さら聞けないWebサイト開発」 Vol.1 2016年05月21日 先端IT活用推進コンソーシアム シニア技術者勉強会 近藤 繁延 シニアと女子
  2. 2. Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. はじめに • 本勉強会の趣旨 – Web開発界隈で語られるツール、キーワードにつ いて学ぶ – HTML5ベースのWebサイトの開発方法を学ぶ • 本勉強会1~2回目のゴール – HTML5のWebサイトが作成できる – Webサイト開発に必要なツールを使いこなせる
  3. 3. Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 本日のアジェンダ • いまどきのHTMLとその周辺 • いまどきのWeb周辺技術 • いまどきのWebシステムの構成 • ハンズオン – ハンズオンのゴール – 開発環境を準備する – 開発プロジェクトを作成する – HTML5を書いてみる – CSS3を書いてみる – JavaScriptを書いてみる – さらにチャレンジ
  4. 4. Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. いまどきのHTMLとその周辺 4
  5. 5. Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. HTML5はWeb開発のデファクト • 2014年10月28日に勧告されました。 • 現状HTML5がデファクトスタンダードです。 – レガシーブラウザのサポート終了、スマートフォン の登場が追い風になっています。 5
  6. 6. Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. CSS3は機能/性能共に進化 • CSS3はCSS2に比べ表現の幅が広がりました。 – 透明度を指定できる – 角丸ブロックを表現できる – アニメーションのサポート • CSS3はハードウェアアクセラレータが利用で きるようになり描画速度が格段向上しました。 6
  7. 7. 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
  8. 8. Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. いまどきのWeb周辺技術 8
  9. 9. Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 拡張言語の発展 • CSS、JavaScriptを直接コーディングするのでは なく、拡張言語(メタ言語)を記述し、 CSS、 JavaScriptコードを生成する方法が主流になり つつあります。 9 拡張言語のコード CSS、JavaScript コンパイル コンパイル
  10. 10. Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. フレームワーク利用は必須 • JavaScript、CSSに関するフレームワーク(※1) が急速に開発/普及しています。 10 ※1 ここでは体系だった複数の機能を提供するソフトウェアを「フレームワーク」と呼称します。
  11. 11. 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画面
  12. 12. 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
  13. 13. Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. いまどきのWebシステムの構成 13
  14. 14. Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. フロントエンド バックエンド • 基本的な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
  15. 15. Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 抑えておくべきポイント 1. フロントシステムとエンドシステムは切り離す – 役割を明確にする – 適した技術、アプローチを突き詰める 2. フロント-サーバエンドはREST通信で繋げる – 通信はHTTP/HTTPSに統一する – データフォーマットはJSONに統一する 3. 端末/ブラウザを限定する設定は避ける 15
  16. 16. Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. ハンズオン 16
  17. 17. Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. ハンズオンのゴール • 郵便番号検索ページを作ります。 – 郵便番号を入力すると住所を取得します。 – データはZipCloud社提供のWebAPIを使います。 • http://zipcloud.ibsnet.co.jp/doc/api 17
  18. 18. Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 開発ツールをセットアップする • HTMLエディタ – Bracketsを使います。(http://brackets.io/) 18
  19. 19. 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の場合
  20. 20. Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 開発ツールについて • ビルドツール – gruntを使います。(http://gruntjs.com/) 20
  21. 21. Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 開発ツールについて • ビルドツール「grunt」とは? – 一部の作業や、昨今のWeb開発で求められる汎 用的な作業を実施するツール。以下、機能一例。 • TypeScript/CaffeScriptのビルド • SASS/LESSのビルド • ファイル圧縮(パフォーマンス向上) • 難読化(セキュリティ向上) • キャッシュ無効化 – 上記以外にも、多数の機能がプラグインとして提 供されており、作業効率の向上などに役立ちます。 21
  22. 22. 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/downl oad/v0.7.2/NodistSetup-v0.7.2.exe 2. ダウンロードしたファイルを実行し、手順に従っ てインストールする。 22
  23. 23. Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 開発環境セットアップ 3. 環境変数PATHにNODISTのパスを登録する • システムのプロパティ>詳細設定>環境変数 23 設定の先頭に以下を追加 %NODIST_PREFIX%bin;
  24. 24. 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と表示されれば成功
  25. 25. Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 開発環境セットアップ 5. 以下のコマンドを実行して、gruntクライアント ツールをインストールする。(成功すると下図の 画面になる) 25 > npm install –g grunt-cli
  26. 26. Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 開発環境セットアップ • 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のインストール
  27. 27. 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インストーラ
  28. 28. Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 開発環境セットアップ 3. 下記のチェックをONにする。 28
  29. 29. 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
  30. 30. 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
  31. 31. Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 開発プロジェクトを作成する • 「npm init」のあと、「name」「version」等の入 力を求められますが、今回は初期値にします。 • 「Is this ok?」がでたら「yes」を入力してください。 31
  32. 32. 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のインストール
  33. 33. Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 開発プロジェクトを作成する • package.jsonを参照し、下図のようになってい れば成功です。 33 gruntのインストール設定 jQueryのインストール設定
  34. 34. 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
  35. 35. 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追加機能の一例
  36. 36. Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. HTML5を書いてみる • BracketsでHTMLファイルを作成、プレビューを 出してみましょう。 1. Bracketsを起動し、メニューより新しいファイルを 選択する。 36 設定の先頭に以下を追加
  37. 37. 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の編集エリア
  38. 38. 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> ライブプレビュー ボタン
  39. 39. Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. HTML5を書いてみる<演習> • 以下のHTMLを作成してください。 39
  40. 40. 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>
  41. 41. 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>
  42. 42. Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. JavaScriptを書いてみる • JavaScriptでは以下の機能を実装します。 1. 検索をクリックしたら郵便番号検索を実施する • 検索をクリックし、画面項目の郵便番号を取得する • 郵便番号検索APIのリクエストパラメータを作成する • 郵便番号検索APIにHTTPリクエストを送信する 2. 検索結果を画面へ表示する • 郵便番号検索APIからレスポンスを受信する • レスポンスから「都道府県」「市区町村名」「町域名」を 取得し、画面に表示する 42
  43. 43. Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. JavaScriptを書いてみる • JavaScript作成では以下を前提とします。 – jQueryを使用する。 • jQueryの採用により、オブジェクトの取得等を簡素な記 述で実現できるので作業効率が良い。 – JavaScriptは外部ファイルに記述する。 • 外部ファイルにすることで、HTML、JavaScriptの保守性 を高める 43
  44. 44. Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. JavaScriptを書いてみる • このようなファイル構造になります 44 オリジナルの JavaScriptファイル jQueryの JavaScriptファイル HTMLファイル
  45. 45. 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>
  46. 46. 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ロード画面読込/描画
  47. 47. Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. JavaScriptを書いてみる • index.jsを作成します。 – $(function(){}); を記述する。 • HTMLの読込完了後に実行することを保証する • {}の中にプログラムを記述する 47 $(function(){ ・ ・ ・ ); javascript/index.js
  48. 48. Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. JavaScriptを書いてみる • jQueryの基本 – 画面項目の要素を取得する – <input>要素から値を取得する – 画面項目に文字を設定する 48 $('#zipcode3') $('#zipcode3').val() $(‘#todoufuken’).text(“あいうえお”); # + ID名 を指定
  49. 49. 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(){ ・ ・ ・ }); プログラムを記述する イベント名を指定する項目名を指定する
  50. 50. 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通信をする パラメータを設定
  51. 51. Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. JavaScriptを書いてみる<演習> • 入力した郵便番号から、住所を検索し画面表 示するJavaScriptを作成してください。 51 郵便番号を入力し、検索をクリックする 検索結果を表示する
  52. 52. 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); } }); });
  53. 53. Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. CSSを書いてみる • CSS作成では以下を前提とします。 – SASSを使用する。 • ファイル形式は SCSS形式 とする。 – SCSS->CSS変換はgruntプラグインで変換します。 53
  54. 54. Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. CSSを書いてみる • このようなファイル構造になります 54 CSSファイル (ビルド後) SCSSファイル (ソース)
  55. 55. 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のインストール
  56. 56. 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タスクを実行
  57. 57. 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
  58. 58. 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が作成されて いたら成功
  59. 59. 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を指定する 背景色が変更され たら成功
  60. 60. Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. CSSを書いてみる<演習> • 以下の設定をSCSSで設定しましょう。 60 ①背景色を薄ピン ク ③罫線をピンク ②文字色を赤 アンダーライン ⑥文字色を青 アンダーライン ⑧項目名のみボー ルド ④入力欄の幅を 40px ⑤太字 ⑦背景色を水色
  61. 61. 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) ・・・ ① ・・・ ② ・・・ ③ ・・・ ④ ・・・ ⑤ ・・・ ⑥ ・・・ ⑦ ・・・ ⑧
  62. 62. 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),$("#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 難 読 化
  63. 63. 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」
  64. 64. 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)
  65. 65. Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. さらにチャレンジする【難読化】 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. 難読化によりファイルサ イズも小さくなる
  66. 66. 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 圧 縮
  67. 67. 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」
  68. 68. 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)
  69. 69. Copyright © 2016 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. さらにチャレンジする【CSS圧縮】 3. コマンドプロンプトで grunt を実行する。 69 >grunt Running "sass:dist" (sass) task Running "cssmin:combine" (cssmin) task >> 1 file created. 536 B → 333 B Done. 難読化によりファイルサ イズも小さくなる
  70. 70. 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
  71. 71. 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~

×