マークアップ講座 01a プロローグ
DESCRIPTION
Mu seminor2014 01aTRANSCRIPT
マークアップ講座
1. Webをとりまく環境 2. 開発環境・ツール 3. HTML
1. Webをとりまく環境 2. 開発環境・ツール 3. HTML
1. UXデザイン、Web開発トレンド概要
2. フロントエンドエンジニア（マークアップエンジニア）技術
3. ブラウザ 4. 言語の先にあるもの
1. Webをとりまく環境
1. UXデザイン、Web開発トレンド概要
2. フロントエンドエンジニア（マークアップエンジニア）技術
3. ブラウザ 4. 言語の先にあるもの
1. Webをとりまく環境
1-1. UXデザイン、Web開発トレンド概要
1.UI、UX、UCD 2.デバイス 3.パフォーマンス
1-1. UXデザイン、Web開発トレンド概要
1.UI、UX、UCD 2.デバイス 3.パフォーマンス
1-1-1. UI、UX、UCD
UIとUXの違い
『The Difference Between UX and UI』 http://design.org/blog/difference-between-ux-and-ui-subtleties-explained-cereal
1-1-1. UI、UX、UCD
UI の例
• 押下しやすいカートボタン • タッチUI 44px以上（Apple）
1-1-1. UI、UX、UCD
UX の例
• いい買い物ができた • また利用したいと思った
1-1-1. UI、UX、UCD
UCD の例
• ボタンUI ! ［送信］［登録］ ▽ ［カートに入れる］［確認画面にすすむ］ ［プロフィールを変更する］ !
• 構成、サイトマップ
! この行為の次に表示されるべきページはどれか
1-1. UXデザイン、Web開発トレンド概要
1.UI、UX、UCD 2.デバイス 3.パフォーマンス
1-1-2. デバイス
情報端末• PC • SP • Tablet
1-1-2. デバイス
デバイス最適化の現状
• PCサイト • レスポンシブ • SP-1st レスポンシブ • SPサイト • 各デバイス最適化
1-1-2. デバイス
SP-1st レスポンシブhttp://instagram.com/ http://note.mu/
レスポンシブ
http://www.microsoft.com/
1-1-2. デバイス
各デバイス最適化http://www.yahoo.com/
SPサイトhttp://the575.jp/ https://lp500.liptonchilled.com/flavor_voting/
1-1-2. デバイス
レスポンシブ選択の判断基準
• コンテンツ内容、量が全デバイスで統一できる • パフォーマンスが問われない • 活字、読み物主体でマルチデバイスのメリットが
高い • デザイン、構成、サービス要件をシンプルにまと
めることができる • 更新頻度が比較的低い
1-1. UXデザイン、Web開発トレンド概要
1.UI、UX、UCD 2.デバイス 3.パフォーマンス
1-1-3. パフォーマンス
情報端末
• UX、UCD観点において最重要項目 • スマホ3G回線でストレスなく閲覧
1. UXデザイン、Web開発トレンド概要
2. フロントエンドエンジニア（マークアップエンジニア）技術
3. ブラウザ 4. 言語の先にあるもの
1. Webをとりまく環境
1-2. フロントエンドエンジニア技術
• HTML • CSS • JavaScript • JSON
基本言語
1-2. フロントエンドエンジニア技術
見た目に対する「思いやり」と システマティックな「厳密さ」の 仲を取りなす
フロントエンドエンジニア（マークアップエンジニア）の仕事とは
『フロントエンドエンジニア養成読本』 http://www.amazon.co.jp/gp/product/4774165786
斉藤 祐也氏（ http://twitter.com/cssradar）記
1. UXデザイン、Web開発トレンド概要
2. フロントエンドエンジニア（マークアップエンジニア）技術
3. ブラウザ 4. 言語の先にあるもの
1. Webをとりまく環境
1-3. ブラウザ
PCbrowser 最新ver vendor engine
Chrome 36 Google Blink
Internet Explorer 11 Microsoft Trident
Firefox 30 Mozilla Gecko
Safari 7 Apple WebKit
Opera 22 Opera Blink
1-3. ブラウザ
SPbrowser 最新ver vendor engine
iOS Mobile Safari 7 Apple WebKit
iOS Chrome（ネイティブアプリ UIWebView） 36 Google WebKit
Android Mobile Safari 4 Apple WebKit
Android Mobile Safari - Chrome 1-18 Google WebKit
Android Chrome 36 Google Blink
1-3. ブラウザ
Webにアクセスする環境が送信する 識別名称文字列
ユーザーエージェント HTTP User agent
1-3-4. ユーザーエージェント
• ハードウェア情報 • 携帯キャリア名 • ホストOS名 • アプリケーション名 • レンダリングエンジン名 • バージョンナンバー • etc...
内容
• 特にない • 偽装可能
規則
1-3-4. ユーザーエージェント
• Chrome 36Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/36.0.1985.125 Safari/537.36
!• Firefox 30.0
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:30.0) Gecko/20100101 Firefox/30.0 !
• iOS 7.1.1 Mozilla/5.0 (iPhone; CPU iPhone OS 7_1_1 like Mac OS X) AppleWebKit/537.51.2 (KHTML, like Gecko) Version/7.0 Mobile/11D201 Safari/9537.53 !
• Xperia Z Ultra Android 4.2.2 Mozilla/5.0 (Linux; U; Android 4.2.2; ja-jp; SonySOL24 Build/14.1.K.1.217) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30
例
1-3-4. ユーザーエージェント
1. UXデザイン、Web開発トレンド概要
2. フロントエンドエンジニア（マークアップエンジニア）技術
3. ブラウザ 4. 言語の先にあるもの
1. Webをとりまく環境
1-3. ブラウザ
• ファイル管理、バージョン管理力 • UI、UX、UCD力 • 構成力、校正力 • サービス力 • 要件定義力 • モック力、パッケージング力 • 調整力、コミュニケーション力 • 体力、健康力
言語の先にあるもの
1. Webをとりまく環境 2. 開発環境・ツール 3. HTML
1. CodePen 2. Chrome Developer Tool 3. Chrome 設定画面 4. Chrome to Mobile 拡張機能 5. Chrome to Phone 拡張機能 6. Validation 7. Minify
2. 開発環境・ツール
2. 開発環境・ツール
Chrome Developer Tool
Chromeを起動したら、迷わず…
![F12] or [Ctrl + Shift + I] or [Ctrl + Shift + J] !（Macの場合は[command + option + I] or [command + option + J] ）
2. 開発環境・ツール
Chrome Developer Tool
• 設定 • Emulation • Elements、Styles編集 • Network • PageSpeed
2. 開発環境・ツール
Chrome 設定画面
『Chrome URLs』 chrome://chrome-urls/ chrome://flags/
2. 開発環境・ツール
Chrome to Mobile 拡張機能 （Chrome Mobile）
『Chrome to Mobile 拡張機能』 https://support.google.com/chrome/answer/2451559?p=ib_chrome_to_mobile&rd=1
2. 開発環境・ツール
Chrome to Phone 拡張機能 （Android）
『Google Chrome to Phone 拡張機能』 https://chrome.google.com/webstore/detail/google-chrome-to-phone-ex/oadboiipflhobonjjffjbfekfjcgkhco
2. 開発環境・ツールValidation
• 『The W3C Markup Validation Service』http://validator.w3.org/#validate_by_input+with_options !
• 『The W3C CSS Validation Service』 http://jigsaw.w3.org/css-validator/#validate_by_input+with_options !
• 『CSS Lint』http://csslint.net/ !
• 『JSLint,The JavaScript Code Quality Tool』 http://www.jslint.com/ !
• 『JSONLint - The JSON Validator.』http://jsonlint.com/
2. 開発環境・ツールMinify
• 『HTML Minifier』http://www.willpeavy.com/minifier/
!• 『CSS Minifier』
http://cssminifier.com/
• 『Minify Javascript Online / Online JavaScript Packer』http://jscompress.com/
• 『JSON.minify()』 http://bigaqua.org/minify_json.html
※個別に手作業でミニファイを行う場合