a264.md

以下は https://codeiq.jp/ace/maeda_takeshi/q264 に対する解答として記述したものです。

このHTML文書はheader要素やsection要素を含んでおりHTML 5で書かれていると想像する事が出来るが、ルート要素であるhtml要素がxmlns:og属性を持っており、仕様違反となっている。一行目の <!DOCTYPE html> を取り除き、拡張子が .html となっているのであれば .xhtml と変更させ、Content-Typeを application/xhtml+xml として送出させるべきである。だが、動作保証環境中にあるIE 7に対応する為に該当する処理は避けなければならず、またxmlns:og属性はこのHTML文書中では必ずしも必要となっている物ではないので、単純に取ってしまえば良いであろう。
「description」という値が入れられているname属性を持つmeta要素のcontent属性の値の文書中に「CodeIQ」という文字が出現しており、他の箇所との整合性が取れなくなってしまっている。他の箇所は大半が「Coder IQ」となっており、また前提での記載から鑑みて「Coder IQ」という文字で統一させるべき物であろうと想像出来る。
「description」という値が入れられているname属性を持つmeta要素と、「og:description」という値が入れられているproperty属性を持つmeta要素と二つ存在するが、どちらも同様の意味を有す物であると想像する事が出来るが双方でcontent属性の値が相違えてしまっている。どちらか一方に内容を合わせる、もしくは片方を削除するべきであろう。「description」という値が入れられているname属性を持つmeta要素は現在多くのウェブ検索エンジンを提供するサービスに於いて無視されてしまう物となっており、現在有効に使われている例はそうない。だが他方、「og:description」という値が入れられているproperty属性を持つmeta要素は、Facebookという現在広く使われているウェブサービスに於いてURIの共有が行われた際に該当するウェブページの内容を説明する際に用いられている。その為、どちらか片方を削除する場合であれば「description」という値が入れられているname属性を持つmeta要素の方を削除し、「og:description」という値が入れられているproperty属性を持つmeta要素の方を残すべきであろう。
「og:image」という値が入れられているproperty属性を持つmeta要素は、content属性の値として「/img/fb_profile.jpg」のような相対URIを持っているが、これは機械的に値の抽出が行われた際に、抽出を行うアプリケーションによっては相対URIのままで解釈されてしまう事となり、正常な画像表示が行えずに意図せぬ動作となってしまう事が起こり得る。「og:url」という値が入れられているproperty属性を持つmeta要素のcontent属性の値としてある「https://coderiq.example.com/」というのが該当するHTML文書の絶対URIであると想像出来る為、組み合わせた値である「https://coderiq.example.com/img/fb_profile.jpg」が該当する相対URIの絶対URIであると思われ、このURIを「og:image」という値が入れられているproperty属性を持つmeta要素のcontent属性の値として入れるべきであろう。
head要素の子はscript要素が二つ続いた後に「stylesheet」という値が入れらているrel属性を持つlink要素が二つ続き、またその後からscript要素が七つ続く事となっている。コードの表示が煩雑になってしまい、結果として何らかの要素を追加する際に考える事が増える事となり、メンテナンス性を著しく低下させる事となりかねない。
script要素によるスクリプトの読み込みでは「/js/lib/jquery.js」という物と「http://code.jquery.com/jquery-1.9.1.min.js」という物がそれぞれ含まれており、これはどちらもJavaScriptライブラリーであるjQueryの読み込みが行われている物と想像する事が出来る。同様であるか、似通った内容であると想像出来る物を二重に読み込む事は何の必要性もなく、そしてまた速度の遅延を招く事となってしまう。また片方のファイル名は「jquery.js」のようになっておりバージョンが何である為に必ずしもそうなるという事は判断出来ないのだが、無駄であるだけではなくバージョン違いのスクリプトが複数読み込まれてしまっていると、ライブラリーの使用者だけではなく、ライブラリーの開発者すらも想像していない動作不具が起きてしまう可能性もある。どちらか一方を消す事によって生じる問題はなく、また消さない事による問題は幾つもある為にどちらか一方は必ず削除するべきであろう。
head要素最後の子となっているscript要素の内容には「main();」や「page();」といったJavaScriptによる処理が含まれているが、これはhead要素中に位置している為にHTML文書の読み込みの大半が終っていない状態で実行されてしまっている。body要素の読み込みはまだ開始されていない段階である為に多くの場合には意図した動作にはならない物と推察出来る。window.onload = function() { main(); page(); }; のようにするか、もしくはjQueryを使っているのであれば jQuery(function($) { main(); page(); }); のように書き換えを行い、HTML文書の読み込みが完了するのを待ってから該当する処理の実行が行われるようにするべきであろう。
script要素はasync属性やdefer属性を持っている場合を除き、src属性の値となっているURIに存在するスクリプトの読み込みと、読み込まれたスクリプトに記載された処理の実行が完了するまでは、そのscript要素の位置でHTML文書の読み込みは止まってしまう事となっている。例えばJavaScriptで document.write といった実行された位置が肝要となる記述のあるスクリプトである場合には位置を動かす事は出来ないが、多くのウェブブラウザーに於いてhead要素やhead要素の子となった要素は display: none; がスタイルシートで定義された物として扱われ、画面上に表示されない事となっている為に、そのようなスクリプトは読み込まれていないと断定する事が出来る。script要素はbody要素最後の子として持たせるようにすれば安直ではあるがHTML文書の大半が読み込まれた後にスクリプトの読み込みが発生する事になり、スクリプトの読み込みを待つ間、画面に何も表示されないという状況は起こらなくなる。
head要素の子として含まれるscript要素の内、src属性を持ちスクリプトの読み込みを発生させる物は八つもある。これはHTML文書の読み込みが発生した際に行われる接続が多くなってしまう事となり、同一ホストからの同時接続数が制限されている現在の多くのウェブブラウザーではHTML文書の読み込みに掛かる時間が必要以上に大きくなってしまう結果に繋がってしまう。外部に置かれている必要が必ずしもある物を除き、全てのスクリプトを結合させ、Google Closure CompilerやYUI Compressorといったツールを用いて、不要な記述の削除等を行い、読み込まれるスクリプトの数を減らしたり、読み込まれるスクリプトのファイルサイズを小さくさせるべきである。
「og:url」という値が入れられているproperty属性を持つmeta要素のcontent属性の値は「https://coderiq.example.com/」となっており、該当するHTML文書はウェブサーバーよりSSL/TLSを用いた接続であると推測する事が出来るが「http://code.jquery.com/jquery-1.9.1.min.js」のようにSSL/TLSではない接続が用いられた形でスクリプトの読み込みが行われてしまっている。その為、HTML文書全体の通信経路上の傍受や改竄を防ぐ事は出来るが、該当するスクリプトの読み込み時に通信の傍受や改竄が行われてしまう事となり、場合によっては致命的な脆弱性を生む事となってしまっている。「https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js」のようにSSL/TLSを用いた接続をする事が可能なスクリプトを読み込むようにするか、もしくはダウンロードし、HTML文書と同一のウェブサーバーにスクリプトを配すべきであろう。
fbというプレフィックスを持つlink要素があるが、動作保証環境に含まれるIE 7ではプレフィックスの付随がある要素の表示は行えない仕様となっている。同link要素や親要素に「http://www.facebook.com/2008/fbml」という値を入れたxmlns:fb属性を追加させるべきだが、今回のようにHTML 5を採用したHTML文書ではそうした事は仕様上行えない。よってFacebookのlikeボタンはXFBMLを用いずにdata-*属性を用いた物を使用するべきであろう。
body要素の直下にあるsection要素は含まれる内容それのみだとしてもページを構成する要素としてある物となっている為、section要素ではなくarticle要素を使うべきであろう。または要素自体なくしてしまい、section要素に含まれる直属の子要素全てをbody要素の直下に位置させれば良いだろう。
li要素の子要素がa要素となっており、ナビゲーションであると想像する事が出来るul要素があるが、これはナビゲーションとしてウェブブラウザー等に判断して貰えるようにnav要素を用いるべきであろう。nav要素としてナビゲーションとしてウェブブラウザーに判断するようにさせた場合には、音声読み上げ機能を備えたウェブブラウザーでは適切にナビゲーションとして扱われるようになり盲者に対して優しい情報を提供する事が出来るであろうと判断出来る。また、順序立てられた数字がli要素中に振られており、HTML文書中に出現する順序が意味を持つリストである事も想像する事が出来る。その為、順不動リストであるul要素ではなく順序リストであるol要素を使うべきであろう。
HTML文書中に必ずしも存在する必要があるとは言えないアイコンを読み込む為にimg要素が用いられているが、これでは小さな画像をそのつど読み込む事となり、複数回の細かな接続が発生してしまう。結果としてHTML文書全体の読み込みが遅くなる結果となってしまう。複数回の細かな読み込みを回避させられるようにアイコンのような小さな画像ファイルは全て結合させてしまい、スタイルシートからbackground-imageプロパティーを使用して表示させ、background-positionプロパティーを使用して表示位置を調整してそれぞれの画像ファイルが別に読まれているように見せるべきであろう。
「period」という値が入れられているid属性を持つsection要素のは直属の子としてimg要素を持たされているが、img要素はp要素やfigure要素を用いて表示させるべきであろう。
 というSSI命令によってGoogle Analyticのコードが埋め込まれていると想像出来るが、これはfooter属性の後に表われており、HTML文書の大半が読み込まれた状態でGoogle Analyticsのコードによる処理が開始される事となっている。これ現在の仕様のGoogle Analyticsのコードでは、正常な情報の取得が行えなくなってしまっている。head要素の終了タグ直前に移動させるべきである。
余りにも枝葉ではあるが該当するHTML文書そのものを示す為の値であろうと想像する事の出来る「about-index」という値を持つid属性がbody要素に持たされているが、これはルート要素であるhtml要素に持たせた方がスタイルシートを用いた体裁の調整には都合良かろうと考える。

上記17項目が私の考える該当するHTML文書を見て感じる改善点となります。数が多く、そして文書が長くなってしまいましたが、ご確認戴ければと存じます。

ykzts/a264.md