Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

HTML/CSS

 HTML/CSS

2020年度リクルート新人ブートキャンプ エンジニアコースの講義資料です

Recruit Technologies

August 21, 2020
Tweet

More Decks by Recruit Technologies

Other Decks in Technology

Transcript

  1. ブラウザ? • Chrome (Android, Desktop) • Internet Explorer • Safari

    (iOS, MacOS) • Firefox • ロボット(検索エンジン、クローラ) • スクリーンリーダー
  2. ブラウザとそのユーザー • Chrome (Android, Desktop) • Internet Explorer • Safari

    (iOS, MacOS) • Firefox • ロボット(検索エンジン、クローラ) • スクリーンリーダー → 様々なユーザー属性の方が、様々なデバ イス、通信環境で利用する
  3. ウェブアプリのパフォーマンス (現在) • コンテンツが表示されるまで何秒かかるか • 操作可能になるまで何秒かかるか 待ち時間の80-90%がフロントエンド → 期待する結果が得られるまでの時間 リクエスト

    レスポンス 過去10年間で モバイルページの中間値は、 ファイルサイズ:1568KB +983% 読み込み時間: 6s +25% おおきく増加している https://httparchive.org/
  4. パフォーマンスの重要性 • 2018/07 Google の SpeedUpdate “Using page speed in

    mobile search ranking” https://webmasters.googleblog.com/2018/01/using-page-speed-in-mobile-search.html ページの速度 をモバイルの検索順位に使用する We encourage developers to think broadly about how performance affects a user’s experience of their page and to consider a variety of user experience metrics. パフォーマンスがページのユーザーのエクスペリエンスにどのように 影響するかについて広く考え、さまざまなユーザーエクスペリエンスの 測定基準を検討することを開発者に推奨します。
  5. パフォーマンスの計測ツール(参 考) • Page Speed Insight 下記の CrUX と Lighthouse

    の情報をサマリでレポートするサービス • Chrome User Experience Report (CrUX) Chrome ブラウザの実際の膨大な利用データから サイト単位でパフォーマンス情報がBigQueryで公開されている • Lighthouse Chrome 上で実行できる開発機能としても提供されている ページ実行時のブラウザのパフォーマンス状態が詳細に取得できる • Web Page Test
  6. ITP2.1 Mixed Contents Same Site Cookie Cookie規制 ガイドライン ITP2.2 ITP2.3

    MFI Flash サポート停止 Speed Update SEO SEO ブラウザ ブラウザ ブラウザ 法規制 SEO ブラウザ ブラウザ 最近よく聞く、、
  7. Webというプラットフォームの構成要素 • OS:iOS, iPadOS, Android, Windows, Mac, • ブラウザ:Chrome, Safari(Webkit),

    Firefox, Edge, IE • ITプラットフォーマー:Google, Apple, Microsoft, など • ほかにも、検索(SEO)、Web自体の仕様など → Webサービスの収益に直接的に影響する ような破壊的な変更が増えている
  8. プライバシー保護のグローバルな動き • GDPR(EU):2018年施行 • CCPA(米国):2020年施行 • 公取委 Cookie規制ガイドライン案:2019年発表 • ePrivacy規則(EU):検討中

    自分の個人データをコントロールする権利を保障する目的 ePrivacy規則: 主にcookieなどによる個人の行動トラッキングを規制する内容まで踏み込んでいる。
  9. 個人の行動トラッキング • ユーザー操作、流入経路などを可視化・分析する 例) • アクセス解析 • コンバージョン計測 • リターゲティング

    → たとえば、複数のサイトをまたがって計測する クロスサイトトラッキングが問題になっている
  10. 副作用の例 • 広告のパーソナライズ • 効果測定 • セッション管理 • ユーザー情報保存 •

    アクセス解析 • 外部ASP機能 • ABテスト (Googleの試算では、50%収益減) https://www.youtube.com/watch?v=WnCKlNE52tc&list=PLNYkxOF6 rcIDA1uGhqy45bqlul0VcvKMr&index=17&t=0s
  11. (参考) サービス機能影響へのWebkitの声明 以下は、意図しない副作用と説明されている • Funding websites using targeted or personalized

    advertising (see Private Click Measurement below). • Measuring the effectiveness of advertising. (広告の効果計測) • Federated login using a third-party login provider.(ログインIDプロバイダー) • Single sign-on to multiple websites controlled by the same organization. (SSO) • Embedded media that uses the user’s identity to respect their preferences. • “Like” buttons, federated comments, or other social widgets.(ソーシャルWidget) • Fraud prevention.(不正防止) • Bot detection.(ボット検知) • Improving the security of client authentication.(クライアント認証のセキュリティ向上) • Analytics in the scope of a single website. (単一サイトでのアクセス解析) • Audience measurement. https://webkit.org/tracking-prevention-policy/
  12. 今後、さらに加速していく 意図していない影響については、今後代替手段が提供される Google, Apple は標準化に向けて協働している • Privacy Sandbox API •

    Privacy Preserving Ad Click Attribution Google は 2年を目標に段階的なクロスオリジンCookie廃止 をアナウンス → Webに関わる仕様の変更も起きてきている https://blog.chromium.org/2020/01/building-more-private-web-path-towards.html
  13. HTMLの構造 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport"

    content="width=device-width"> <title>Hello</title> <link rel="stylesheet" href="./assets/index.css" /> <script defer src="./assets/index.js"></script> </head> <body> <p>Hello Text</p> </body> </html>
  14. HTMLの構造 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport"

    content="width=device-width"> <title>Hello</title> <link rel="stylesheet" href="./assets/index.css" /> <script defer src="./assets/index.js"></script> </head> <body> <p>Hello Text</p> </body> </html> headタグ メタデータ bodyタグ コンテンツ
  15. <head></head> headタグ メタデータ bodyタグ コンテンツ • ページのメタデータ、画面に表示されない • タイトル •

    エンコーディング • ページの説明 • アイコン(faviocon) • OGP(open graph protocol)
  16. タグの例 • html, head, body, meta, script, link • header

    • main • nav • ol, ul, li • div • span • button • a • img
  17. CSSの目的 https://ja.wikipedia.org/wiki/Cascading_Style_Sheets headタグ メタデータ bodyタグ コンテンツ • HTML や XMLの要素をどのように修飾(表示)するかを指示する、W3Cに

    よる仕様の一つ。文書の構造と体裁を分離させるという理念を実現する為に 提唱されたスタイルシートの、具体的な仕様の一つ。 • CSSはHTMLで表現可能と考えられるデザインの大部分を実現できる要素を 取り入れつつ、新たなデザイン機能を備える。また以下のような特徴を持つ。 • ページを表示するメディアに合わせてスタイルシートを切り替えること で、メディアごとに表示を変化させることができる。 • ユーザーエージェント(多くの場合ウェブブラウザ)、ウェブサイト制 作者、ユーザがそれぞれ定義したCSSのもたらす効果を重ね合わせる (カスケードする)ことができる。
  18. reset.css, normalize.css headタグ メタデータ bodyタグ コンテンツ • ブラウザのデフォルトスタイルをリセット → reset.css

    • ブラウザのデフォルトスタイルを活かしつつ差異 をなくす → normalize.css
  19. CSSの問題 headタグ メタデータ bodyタグ コンテンツ • 全てがグローバル • セレクタの詳細度 •

    スタイルが子要素に継承される • 同じセレクタに対してスタイルを設定できる • いろいろな場所に記述できる (cssファイル、style属性、styleタグ、JS) これらが組み合わせ可能