Recommended
More Related Content
Similar to 2018年に於ける HTML の役割（概要編）
Similar to 2018年に於ける HTML の役割（概要編） (20)
Recently uploaded
2018年に於ける HTML の役割（概要編）
- 1. 2018年に於けるHTML の役 割（概要編） 『新卒OJT』 or 『HTML をボチボチ触ったことがあ る人に向けて』
- 2. Name: UX Ojisan Career: 業界20年目 Job: 今はUX Designer MF レンズを300 本以上持っていて、 マウントの無いレンズを3D プリンタで自作し撮影している。
- 3. FUNCTION MEDIA 面 歴史 W3C とWHATWG 昨今の実装上の課題 HTML に対するエンジニアの興味 『気にかけない』事によるデメリット クローラ、検索エンジン側の進化 JavaScript による要素の書き換えとSEO サービス視点、UX 視点 1 / 2 サービス視点、UX 視点 2 / 2 ポエム：フロントエンド修羅の国 雑談：#昔は大変だったおじさん
- 4. こういうの <html lang="ja"> <head> <title>ソーシャルメディアのハッシュタグをサービス を問わず検索できる- SHS</title> <link rel="stylesheet" src="/css/hoge.css"> </head> <body> <h1>SHS</h1> <p>ソーシャルメディアのハッシュタグをサービスを 問わず検索できる</p> ～～～ <script src="/js/hoge.js"></script> </body> </html>
- 6. MEDIA 面 SEO セマンティック microdata, json-ld 等を用いた、明確なページ情報の定義 文書構造の最適・標準化 HTML は、二次活用される標準化されたデータのリソー ス CSR / アクセシビリティ/ 標準化 老舗企業、一次情報を有する企業は、正確な情報を提供 する責任を持つべき 標準化に則ったマークアップすることで、下位互換・後方 互換の担保、アクセスビリティの配慮、ルール・市場変 更等に伴うリスクを最小化できる可能性がある
- 8. 歴史 W3C とWHATWG 標準化勧告に関してはW3C が長年牽引してきたが、HTML5 の 草案⇒勧告あたりから、ルールの迷走・技術力不足等が散見… されたきらいはあるが、 WHATWIG 側が牽引してきた。 現在ではバージョンを振らないWHATWG の Living Standard と、明確なバージョニングのもと勧告をするW3C が並走する 形。確執もなくはないようだが、それぞれの役割の明確化など をクリアにすることで、ひとまず共存してきているようだ。 WHATWG / WHATWG Living Standard W3C / W3C HTML5(.2)
- 10. 昨今の実装上の課題 HTML に対するエンジニアの興味 書いたコードに対してブラウザ上で得られる挙動・結果がエン ジニアの醍醐味。試行錯誤してコードを書き、意図した結果が 得られるのはエンジニアリングの醍醐味といえるだろう。 ところが、雑でも多少の間違いがあっても、一見意図通り表示 されてしまうHTML は、書いたコードが動くことにより得られ る達成感が多言語と比較して小さく、割いたコストに対して得 られるメリットも間接的で不明瞭な部分も多い。 結果的に『HTML は最低限の知識で誰でもかける前提』を持 ち、エンジニアが興味を持てないことが多く、ないがしろにさ れることが多々ある。
- 11. 昨今の実装上の課題 『気にかけない』事によるデメリット また、HTML やJS、CSS 等を用いたブラウザ上での表現のみを 気にかけ、『クローラビリティ、SEO・UX 面への影響』等の自 覚がないままHTML を書いてしまうと、 URL 構造を全てクエリパラメータにしてしまった結果、適切 なクローリングがされずに検索エンジン経由の流入が期待通 りでないor 全く流入がない 閉じタグが無いことで、とある一部のバージョンのブラウザ で表示崩れが起きていた などの大きなデメリットを、いとも簡単に引き起こす可能性を 孕むことにもなる。
- 12. ポエム：フロントエンド修羅の道 この資料を読むような人が突き詰めて書くことになるコードが出てくるとす ると、それはJavaScript になるだろう。 先のページでエンジニアがHTML に興味を持たないことによりリスクが発 生云々と書いたが、無視してもまあ良い人たち、というか無視するくらいじ ゃないと成り立たない人たちが存在する。彼らは、プライベートでも Github に草を生やし、リポジトリのfollow、Star 数を土日でも増やし続け る。彼らは社内でも技術面で一目置かれる技術を突き詰めるタイプの人間 で、そういったタイプの人間は、この資料の後半に書かれているSEO やら 企業KPI に関しては気にかける必要などない。ただ、そこが担保できる他 社に委譲する必要は、ある。 企業人としての彼らが目指すべきなのは、企業で書きたいコードを書くこと ではなくて、有名リポジトリへのコントリビュートである。企業側がそれを 評価しないのであれば、まずはその価値を企業側に理解させなくてはならな い事になる。 企業で書きたいコードをゼロからトライできているような状況は、幸せな状 況といえる。そうでない人は、有名リポジトリへのコントリビュートにより 公私共に通じる信頼と実力を得、初めて企業で好きなコードが書ける事にな る。
- 14. 昨今の実装上の課題 JavaScript による要素の書き換えとSEO 一昔前はJavaScript を用いたリッチIF によるUX の向上と、適 切な文書構造構築によるクローラビリティの担保は、トレード オフで相容れない時期もあった。 しかし現在では、クローラの精度も向上し、またSearch Console 内でクローラから見たJavaScript の実行確認環境など も充実しており、非同期通信も含めたJavaScript の利用による クローラビリティ面でのデメリットは小さくなりつつある。 Google Search Console › クロール› Fetch as Google
- 15. 昨今の実装上の課題 サービス視点、UX 視点 1 / 2 HTML のタグ構造とタグの選定、microdata の利用、URL 構造 など、かかるHTML の仕様は、SEO 担当者やディレクターから の指示出しにより担保できる可能性もあるが、何をどう扱い、 最終的にHTML を担保するのはエンジニアになるはず。 興味を持たずにHTML をないがしろにし、リリース後に負債を 被った後で『知らなかった』で済まさない為、また事業成果に 関連する機能の実装機械を失しない為に、興味を・責任を持っ てHTML に向き合う必要がある。
- 16. 昨今の実装上の課題 サービス視点、UX 視点 2 / 2 言い方を変えれば、HTML の組み方次第で、ユーザ体験の向 上、企業活動の促進にも大きく寄与できるということでもあ る。 職域毎に分業が成されている体制下では、フロントエンドの技 術を他職域メンバーが全て把握することは難しい。例えば現在 では、AMP、RichCard、PWA、リッチスニペット等を用いた 実装・戦略は、むしろ技術者から能動的な提案をしていくべき だと考える。 「サービスの興味というかコード書くことが好き」なエンジニ アは、極端な事を言えばサービスに興味などなくても、誰より も高い技術力を持って人を率い、エンジニア陣のエース的な立 ち位置で振る舞う指向性を持つが、そこから更にサービス・ユ ーザ観点を持って技術のサービス転換ができるようになると、 より価値ある存在となれるだろう。
- 17. 雑談#昔は大変だったおじさん 「昔は大変だった」 table タグはレイアウトの為のもの font タグ document.all document.layers （自称）情強はNetscape Communicator 4.78 document.getElementById FFFTP メーラーの最大容量2Gの壁 大量の隠しキーワード 大量のWebデザイナーが音を上げたAS3.0 分業なんてしてなかった レンダリングスイッチ IE6、IE7、IE8