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

2015年03月12日

スマホ勢の席巻に譲歩する部分と屈しない部分(パソコン派のウェブ管理者によるマークアップ、スタイル、CMS構築上の意識の使い分けの考察)

 あるユビキタス機器の寡占的な流行の勢いというのは、例えばバレンタインデー直前にデパートの店頭がどうしてもきらびやかなチョコレートだらけになる光景に似ていて、どこまでも人間(日本人)が自力で止められないものらしい。

 最近のスマートデバイス(スマートフォンやタブレット端末などの、画面が小さい最近の携帯型端末)偏重の風潮をあまり好きになれない、頑固で堅物なパソコン派の私が(パソコンでゆっくりじっくり閲覧されることを重視して)制作してきた自分のサイト(やブログ)についても、スマートデバイスからのご訪問がますます増えている。

※ アクセス解析データ書庫
http://iwasakijunichi.net/analysis/
(昨年の解析結果についても、いずれ「アクセス解析データ書庫」に掲載する予定。)

 とりわけ、パソコンからのご訪問者様とスマホ・タブレットからのご訪問者様との間で、リピート率(または新規訪問率)や滞在率(直帰率・離脱率)、閲覧時間の差がどんどん広がっている。後者のほうが、リピート率、一回のご訪問当たりの(サイトを離脱するまでの)閲覧ページ数・コンテンツ数、一回のご訪問当たりの閲覧時間の全てにおいて前者を著しく下回っているが、ご訪問者数については前者よりも圧倒的に多い。

(逆に、金銭的な事情のため、所持している端末が低価格のスマホだけで、高価で画面の大きなパソコンは所持していないのに、それでも私のサイトを小さな画面で長期に渡り真剣に読んで下さっているご訪問者様のことを私がどれほどありがたく思っているか、ということも言いたいわけである。)

 こういった現象自体は、私のサイトに限らず、ウェブ世界全般にとっても統計上の常識だし、今までにも下掲の【関連ブログ記事】などに書いてきたわけで、スマホよりもパソコンのほうを好むウェブサイト管理者が特に気になっている点だと思う。

 興味深いのが、スマホ向けのサイトをパソコンとスマホで閲覧する場合にも似た現象が起きていることである。つまり、スマホでスマホ向けサイトを閲覧する場合のリピート率、滞在率、閲覧時間は、パソコンでスマホ向けサイトを見る場合のそれらを下回っている。

 しかし、最近ますますその流れが激しくなっているようで、私のサイトも、常連の皆様でさえ、スマホでは閲覧できないコンテンツ(一部の動画など)を除いては、ほとんどパソコンではご覧にならないようになってきている。

 そういう事情もあり、私もここに来て方針をさらに見直し、今後はサイトのマークアップの組み方を「スマホ向け表示もできるパソコン閲覧用サイト」ではなく、どちらかというと「パソコン向け表示もできるスマホ閲覧用サイト」に切り替えていくことにした。

 最近では、満員電車の中での急用のメールなど、どうしてもスマホでなければならない場合だけでなく、自宅の中であっても、そばの机にパソコンがあるにもかかわらず、ベッド上でのスマホによるネットサーフィンを好む人のほうが多いようである。どうやら、スマホ愛好の流行は、必ずしも「時間やお金がないから」という理由にはよらないようで、「情報に対する意識の変化」が関係しているようである。

 そもそも、最新のパソコン向けWindows OSであるバージョン8.1とそのユーザーインターフェースが、パソコンのキーボードを打つことよりも液晶画面にタッチすることを重視した、パソコンのスマホ化を目的として設計されており、指先の美しい女性ならともかく、私のような指先が汗かきのパソコン派男にとっては、Windows OSを購入することの意味は、もはやセキュリティ対策以外にほとんど無いと感じられている。

「ソフトウェア(ソフト)」という呼び方も、Windowsではもはや「アプリ」に変更され、Microsoftのみならず、日本国内のパソコン事業者も好んでおらず、軒並みスマホ事業者側に合わせて「アプリ」という呼び方に変わってきている。

 これらの現象は、端末そのものの物理的形状と重量(大きさや持ち運びやすさ)が人間の日常行動や精神生活に密接に結びついていることを意味しているのだと思う。

 また、同じウェブサイトであっても、パソコンで閲覧した時とスマホで閲覧した時とで、サイト上の情報に対して人間の脳が異なった解釈を与えている(スマホで閲覧すると、重要な内容が重要でないように読めている)可能性があることを示していると思う。

「学生や子供のスマホ利用時間の長さ」が社会的に問題視されているが、逆に「子供がパソコンに向かって読書感想文などの宿題を入力」していたら、今や親は「流行にとらわれないウチの子はいい子だ」などと安心するに違いないのである。

 ある瞬間瞬間の一つ一つの言葉・文章やコンテンツをじっくり読まずに世の中の情報を通り過ぎる快感や、精神活動や人間関係の細切れ状態・断続性を好むユーザーが増加している現状と、スマホの物理的形状(小型化)と重量(軽量化)とがマッチして爆発的に普及した、ということだと思う。ある短い単位時間当たりの脳認知上の内容把握や集中力の持続性が端末によって異なる可能性があることには、やはり注目していきたいと思う。

 そう考えると、私のサイトは時代に逆行してしまっているサイトの典型で、内容的にも分量的にもスマホの小さな画面ではとても閲覧しきることのできないサイトであると思うし、スマホで辿り着いた場合に、「面白くない」、「長くて面倒なサイトだな」と思われて「一度きり」率、離脱率、短時間率が上がること自体は必然だと思う。

 そうは言っても、内心では(具体的には、扱う内容や分量としては)これからも、スマホの小さな画面ではとても閲覧しきることのできない(まずスマホで閲覧したとしても、できれば自宅に帰って机に向かってパソコンで読みたいと思えるような)「パソコンサイト」としてあり続けることにこだわる予定で、スマホ基準とするのは、あくまでもサイト制作者としてのマークアップの記述方法のことである。

 そういうわけで、「パソコンでの閲覧重視からスマホでの閲覧重視へ」という方針転換を全面に掲げるのは、あからさますぎて少しイヤなので、せっかくのこの機会を利用して、一部に残っていたXHTML1.1とCSS2.1によるマークアップを全面的にHTML5とCSS3に改訂することにした。

 これに当たり実施したことを、以下の次回のブログ記事に列挙しておきたい。(ほぼ自分の備忘録のためではあるが・・・。)

●当サイトの構造の改訂内容一覧(マークアップ言語、プログラム)
http://iwasaki-j-ict.sblo.jp/article/115073717.html


【関連ブログ記事】

●ウェブサイト管理者・閲覧者双方の責任と使命、スマホ・PDA機器の扱い、サーバーの浄化
http://iwasaki-j-ict.sblo.jp/article/81291993.html

●サイト閲覧推奨環境などを掲載
http://iwasaki-j-ict.sblo.jp/article/80368836.html

2015年03月10日

今季F1も開幕間近、Formula Eにも引き続き期待

800px-Spark-Renault_SRT_01_E_(Formula_E).JPG 今季のF1もいよいよ開幕間近。

 しかし、冒頭のテストからしてアロンソのマクラーレン・ホンダがカタルーニャ・サーキットで壁に激突。外見ではほとんど何の怪我も負っていないにもかかわらず入院が長かったために、ERS(エネルギー回生システム)による感電説も出ているようだが、早いところ真相を出してもらわないと気持ち悪いのは確かだ。

 現実的に考えて、今季のホンダにはあまり期待していないけれども、結果以前に安全性や情報公開の面で徹底していないようでは、F1の他のチームよりも頭一つ良いチームとして成長していくことは難しいと思う。事故後にできることをやっていないという点は、FIAからも目を付けられるに違いない。

 一方で、まだシーズン中のFormula Eのほうは、相変わらずF1に匹敵する(を超える?)面白さを見せているが、フランク・モンタニーに禁止薬物の陽性反応が出て、第3戦以降は出場停止となったのが残念だった。コカイン誘導体の反応のようだ。

 モータースポーツでドーピングとは珍しい気もするし、実際ほとんど聞いたことがないのだが、それは単にドライバーの身体を増強し中枢神経系を興奮させたところで、ドライビングテクニックに何か有意な効果が出るわけではない、ということだと思う。ドーピングをやったところで、レース後半に急に異常な疲労が来て、大事故につながるだけの話だ。

 一方で、マシンやエンジンには、レギュレーションをかいくぐったギリギリの技術的な「ドーピング」が行われているのだと思う。

 ともかく、やはりドーピングをやったドライバーは追放処分が妥当だと思う。


【画像出典】
フォーミュラE(Wikipedia)
http://ja.wikipedia.org/wiki/%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9F%E3%83%A5%E3%83%A9E