PowerPoint プレゼンテーション

Size: px

Start display at page:

Download "PowerPoint プレゼンテーション"

えつとうるしはた
9 years ago
Views:

HTML5 プロフェッショナル認定試験レベル 1 ポイント解説セミナーアシアル株式会社 Copyright Asial

4 HTML5 とは 2014 年 10 月正式勧告マルチデバイスマルチメディア対応リッチクライアントアプリケーションのプラットフォーム広義では CSS3 や JavaScript による 3D グラフィック WebSocket デバイスアクセスクライアントストレージ等も含む 4 Copyright Asial Corporation. LPI-Japan All Rights All rights Reserved. reserved.

5 HTML5 プロフェッショナル認定試験とは特定非営利活動法人 LPI-Japan が実施する HTML5 および周辺技術の知識レベルを測る認定制度です試験の難易度を示す2 種類のレベルがあり段階的に受験します Level1 Level2 マルチデバイスに対応した静的なWebコンテンツを HTML5を使ってデザイン作成できるレベルシステム間連携や最新のマルチメディア術に対応したWebアプリケーションや動的 Webコンテンツの開発設計ができるレベル 5 Copyright Asial Corporation. LPI-Japan All Rights All rights Reserved. reserved.

7 受験について基本的に試験方式はコンピュータベーストテスト (CBT) ですが学校などの団体受験用にペーパーテスト (PBT) も選択可能です通年受験可能試験の詳細は以下の通り問題数試験時間合格ライン約 65 問 90 分約 7 割回答方式殆どが選択式 ( 複数回答あり ) 記述式も 1 問程度受験料 15,000( 税抜 ) 7 Copyright Asial Corporation. LPI-Japan All Rights All rights Reserved. reserved.

Web の仕組み HTTP HTTPとは Webクライアント ( ブラウザ ) とWebサーバー間でコンテンツを送受信するための通信方法を規定したもの WebクライアントからWebサーバーに対しての要求をリクエストといいそれに対してWebサーバーから応答を返すことをレスポンスという

12 Web の仕組み HTTP HTTPとは Webクライアント ( ブラウザ ) とWebサーバー間でコンテンツを送受信するための通信方法を規定したもの WebクライアントからWebサーバーに対しての要求をリクエストといいそれに対してWebサーバーから応答を返すことをレスポンスという WWW リクエスト (URL を指定 ) レスポンス (HTML を渡す ) HTML Web クライアント WEB サーバー 12 Copyright Asial Corporation. LPI-Japan All Rights All rights Reserved. reserved.

13 HTTP に関する頻出問題メソッドの種類 ( リクエスト ) GET/POST/HEAD/PUT/DELETE などステータスコードの種類 ( レスポンス ) 1xx 2xx 3xx 4xx 5xx 情報成功転送クライアントエラーサーバーエラーヘッダの種類 ( リクエストレスポンス ) User-Agent/Referer/Content-Type など 13 Copyright Asial Corporation. LPI-Japan All Rights All rights Reserved. reserved.

14 セキュリティ ( 攻撃手法と対策 ) SQL インジェクション入力フォームなどに SQL 文を挿入しデータベースを不正操作するクロスサイトスクリプティング (XSS) 掲示板などに悪意のある JavaScript のコードを書き込む 14 Copyright Asial Corporation. LPI-Japan All Rights All rights Reserved. reserved.

SQL インジェクション不正な問合せ 1 攻撃者の操作 ID を表示 http://shop.example.com/item.php?

17 SQL インジェクション不正な問合せ 1 攻撃者の操作 ID を表示 OR 1 = 1;-- RDB 2 データベース側での処理 SELECT * FROM items WHERE id = '' OR 1 = 1;--'; id が空文字か 1==1( 実質検索条件なし ) -- 以降は無効化全データが抽出されてしまう! 17 Copyright Asial Corporation. LPI-Japan All Rights All rights Reserved. reserved.

18 SQL インジェクション対策方法 1 特殊文字をエスケープする開発言語が用意しているエスケープ関数などを利用する対策方法 2 あらかじめ SQL を用意しておき可変の部分だけを置き換えるプリペアードステートメントという仕組みを利用する 18 Copyright Asial Corporation. LPI-Japan All Rights All rights Reserved. reserved.

22 その他ネットワークサーバ関連ドメイン /DNS/ プロキシ / ロードバランサ / ファイアーウォールデータベース SQL の種類 (CREATE/DROP/SELECT/INSERT/DELETE/UPDATE) Web 広告ペイパークリック / アドワーズ / アフィリエイト / コンバージョンレート 22 Copyright Asial Corporation. LPI-Japan All Rights All rights Reserved. reserved.

24 HTML5 の特徴 HTML5 の例 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title> サンプル </title> </head> <body> <p> 本文 </p> </body> </html> 省略できる属性が増えシンプルなシンタックスにセマンティック Web 対応 ( 見た目ではなく意味を重要視する ) 24 Copyright Asial Corporation. LPI-Japan All Rights All rights Reserved. reserved.

25 セクショニング要素 (HTML5 で追加 ) header( ヘッダ ) nav( ナビゲーションリンク ) section( 汎用的なセクション ) article( 記事として独立したセクション ) article( 記事として独立したセクション ) aside ( サイドバーや広告など ) footer( フッタ ) 25 Copyright Asial Corporation. LPI-Japan All Rights All rights Reserved. reserved.

26 video 要素 /track 要素 (HTML5 で追加 ) 動画の再生 (video)/ 字幕の表示 (track) <video src="video.mp4" controls autoplay loop></video> 26 Copyright Asial Corporation. LPI-Japan All Rights All rights Reserved. reserved.

27 progress/meter 要素 (HTML5 で追加 ) タスクの進捗状況を表す <progress value="75" max="100">100% 中 75% まで完了 </progress> 範囲内の数量割合などを表す <meter value="75" max="100" min="0">100 人中 75 人が回答 </meter> 27 Copyright Asial Corporation. LPI-Japan All Rights All rights Reserved. reserved.

28 ruby 要素 (HTML5 で追加 ) ルビを付与する <ruby> <rt> <rp> 対象テキストをマークアップルビテキストを指定ルビ未対応ブラウザでのみ表示 <ruby> 子守熊 <rp>(</rp><rt> コアラ </rt><rp>)</rp></ruby> ルビ対応ブラウザルビ未対応ブラウザ 28 Copyright Asial Corporation. LPI-Japan All Rights All rights Reserved. reserved.

canvas 要素 (HTML5 で追加 ) JavaScript でビットマップのグラフィックを描画する要素グラフやアニメーションなどを動的に描画することができる 29

30 バリデーション属性 (HTML5 で追加 ) バリデーション属性 <input> 要素に付与すると submit 時にチェックを行ってくれる required 必須 pattern 正規表現 min 最小値 / max 最大値名前 :<input type="text" required> 郵便番号 :<input type="text" pattern="^[0-9]{3}-[0-9]{4}$"> 年齢 :<input type="number" min="18" max="99"> 30 Copyright Asial Corporation. LPI-Japan All Rights All rights Reserved. reserved.

input type 属性値 (HTML5 で追加 ) input type 属性値 urlやemailを指定した場合フォーム送信時にURL メールアドレスの形式として正しいかバリデーションが行われる rangeを指定するとレンジバーが colorを指定するとカラーパレットが表示されるなど UIの拡張が行われる URL:<input type="url"> メールアドレス :<input

31 input type 属性値 (HTML5 で追加 ) input type 属性値 urlやを指定した場合フォーム送信時にURL メールアドレスの形式として正しいかバリデーションが行われる rangeを指定するとレンジバーが colorを指定するとカラーパレットが表示されるなど UIの拡張が行われる URL:<input type="url"> メールアドレス :<input type=" "> 数値 :<input type="number"> 検索キーワード :<input type="search"> 電話番号 :<input type="tel"> 日付 :<input type="date"> 範囲 :<input type="range"> 色 :<input type="color"> 31 Copyright Asial Corporation. LPI-Japan All Rights All rights Reserved. reserved.

34 マルチカラムレイアウトマルチカラムレイアウト ( 段組みレイアウト ) 長い文章などを指定したカラム数に分割して表示することができるマルチカラムレイアウトは長い文章などを指定したカラム数に分割して表示することができますこれは 3 つのカラムに分割したイメージです 34 Copyright Asial Corporation. LPI-Japan All Rights All rights Reserved. reserved.

35 フレキシブルボックスフレキシブルボックス ( 可変ボックスレイアウト ) 要素の中央揃えや均等揃えなどの配置を簡単に行うことができる主軸 ( 交差軸 ) 交差軸 ( 主軸 ) Flex アイテム Flex コンテナ Flex アイテム Flex アイテム 35 Copyright Asial Corporation. LPI-Japan All Rights All rights Reserved. reserved.

ボックスの装飾ボックスの角を丸くする背景をグラデーション表示する線形グラデーション円形グラデーションボックスに影をつける 36

37 色 rgbt とは赤緑青の含有量を 0( 色なし ) 255( 原色 ) の範囲で表す方法カラーコード RGB を 6 桁の 16 進数で表現したコード #ff00ff; 赤が ff(255), 緑が 00(0), 青が ff(255) なので紫になる R G B の各 2 桁がすべて同じ値の場合に限り省略表記が可能 #ff00ff; #f0f; 37 Copyright Asial Corporation. LPI-Japan All Rights All rights Reserved. reserved.

38 アニメーション transition プロパティスタイルを変更した際に変化の過程をアニメーションで表示する例 : 要素にマウスカーソルが乗ったら背景色を赤から青に変化させる animation プロパティ transitionとの違いはアニメーションを連続で実行することができる例 : 要素にマウスカーソルが乗ったら背景色を赤青緑黄色のように変化させる 38 Copyright Asial Corporation. LPI-Japan All Rights All rights Reserved. reserved.

Web フォント Web フォントとは Web 上に配置されたフォントを読み込む技術ユーザーの環境に依存しないためどのような環境でも同じフォントを表示することができる

メディアクエリメディアクエリデバイスの特性 ( ブラウザ幅など ) に応じて CSS を切り替える方法横幅 800px 未満横幅 800px 以上 42

WEBシステムのセキュリティ技術

WEBシステムのセキュリティ技術 WEB システムのセキュリティ技術棚橋沙弥香目次今回は開発者が気をつけるべきセキュリティ対策として以下の内容についてまとめました SQLインジェクションクロスサイトスクリプティング OSコマンドインジェクションディレクトリトラバーサル HTTPヘッダインジェクションメールヘッダインジェクション SQL インジェクションとは 1 データベースと連動した Web サイトでデータベースへの問い合わせや操作を行うプログラムにパラメータとして