2015年03月13日

当サイトの構造の改訂内容一覧(マークアップ言語、プログラム)

 前回のブログ記事の方針に基づいて3月前半にサイトに施したマークアップ言語とプログラムの大きな変更について、自分の備忘録のためにも列挙しておく。前回の記事はかなり理念的な内容だが、今回の記事は技術的な内容なので、ウェブ制作者・管理者以外には分からなくてももちろん構わない内容である。


【改訂の概要】

◆XHTML1.1+ CSS2.1によるマークアップから全面的にHTML5 + CSS3によるマークアップに移行
(詳しくは、http://iwasakijunichi.net/seisaku.html#markup
◆クライアントサイドスクリプト(JavaScriptプログラムなど)を最適化・軽量化
◆同じ効果がマークアップの記述で代替できるプログラム、プラグイン、ライブラリの排除
◆パソコンかつスマートフォンでの閲覧に適したマークアップに改訂
◆サイト管理のほぼ全面自作CMS化(PHPプログラムによる)
◆コンテンツに直接携わって下さったご協力者がスマホなどからサイトを部分編集するための自作CMSの拡充


【具体的なマークアップの手順】

◆HTML5化の手順
 ●XHTML5への移行を見越したHTML5 + XMLのハイブリッドでの記述(全ての終了タグの挿入と入れ子構造の最適化)
 ●DOCTYPE宣言やヘッダー要素、meta要素(charsetのUTF-8指定など)、フッター要素などのCMS化(構造部分としての独立化)による自動宣言・判定・挿入化
 ●非推奨・廃止タグ(または属性)のほぼ全面削除(align属性など。あえて使用した箇所もあり。)
 ●復活タグ(または属性)の再使用(sタグなど。ただし、タグの意味合いは変わっている。)
 ●id属性、class属性の整理
 ●すでにHTML5化していたコンテンツ(canvas要素など)のさらなる軽量化(実際には、JavaScriptとWebGLの軽量化に当たる。)
 ●Viewport指定の最適化

◆プログラムやライブラリの最適化と軽量化の手順
 ●CSS3で代替可能なJavaScriptプログラム(jQueryなどのライブラリを含む)などの可能な限りの排除
 ●残るjQueryやthree.jsのバージョンの更新
 ●JavaScriptプログラムの外部化部分とインライン化部分の整理
 ●低スペック閲覧環境に対するasync・defer属性の自動判定挿入

◆CSS3化の手順と、より高速・軽量なCSS3アニメーションの採用
 ●JavaScriptプログラム(jQueryなどのライブラリを含む)などによる効果のCSS3による代替
 ●CSS3のtransition効果などの適用


【HTML5とCSS3に未対応のOS(Windows XP以前のWindows OS)とブラウザ(バージョン8以前のInternet Explorer)の組み合わせによる閲覧環境への対応】

◆HTML5とCSS3の記述はほぼそのまま(上記環境で閲覧すると、描画されないだけ。)
◆よりクライアント側の要求に沿うことができるよう、CSS3 Media Queriesは使用せず、5段階の手動切り替え用のCSS3を自分で作成
◆OSとブラウザを自動取得し、JavaScriptプログラム(jQueryなどのライブラリを含む)などのバージョンを落としてクライアント側にダウンロードさせる
◆HTML5とCSS3による正しいレイアウト表示が困難と思われる閲覧環境に対するhtml5shiv.jsの最低限の適用(ただし、可能な限りHTML・CSS3・PHPプログラム内で片付ける。)
◆閲覧推奨環境のページに注意喚起を明記
http://iwasakijunichi.net/etsuran.html


【マークアップの精度のチェック】

 ●HTML5は以下のW3Cのサイトでチェック
(Googleが用意しているGoogleカスタム検索プログラムやGoogle Analyticsのトラッキングコードの記述のエラー、あえて使用した閲覧に影響のない非推奨タグなどのエラーは無視。)
 http://validator.w3.org/
 ●CSS3は以下のW3Cのサイトでチェック(基本的にエラーゼロを目指す。)
 http://jigsaw.w3.org/css-validator/


【速度計測とモバイルユーザーエクスペリエンス】

 ●以下のサイトでチェック
(結構低い判定が出るが、ほとんど無視。なぜならば、私のサイトの場合、先述のように、CSS3 Media Queriesを使用したスマホ向けリキッドデザインへの自動切り替え(レスポンシブルデザイン)ではなく、ハイビジョン画面・ラップトップ画面・タブレット画面・スマホ画面・旧型ケータイ画面の五つのデザインへの手動切り替えや、クライアントサイドに読み込まれるJavaScripitプログラム(jQueryのライブラリを含む)の自動切り替えを用意しているので、初期のchecked指定されたHTMLやCSSやJavaScriptしか読み込んで点数を付けないこの計測機能は正しい結果を出さない。ここで表示される「スクロールせずに見えるコンテンツのレンダリングをブロックしている」、「JavaScript を縮小する」、「コンテンツのサイズを表示域に合わせる」などの指摘は、手動切り替えか自動切り替えで対応している。)
 https://developers.google.com/speed/pagespeed/insights/


【関連ブログ記事】

●スマホ勢の席巻に譲歩する部分と屈しない部分(パソコン派のウェブ管理者によるマークアップ、スタイル、CMS構築上の意識の使い分けの考察)
http://iwasaki-j-ict.sblo.jp/article/115020441.html
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

この記事へのトラックバックURL
http://blog.sakura.ne.jp/tb/115073717

この記事へのトラックバック