文芸船

Web技術雑感2

さよならHTML4.01

 Internet Explorer 8のサポート終了に伴い、application/xhtml+xmlを受容しないブラウザはほとんど無くなったので、これまで行ってきたHTML4.01の変換提供を取りやめ、XHTML5とXHTML Basicのみとした。HTML5の流れを見るとXHTML表現ではなくtext/htmlにすべきなのかとも思ったが、XHTMLを止めるのももったい無い気がしたので当面はこのまま維持することにした。

 私のサイトは本来、小説サイトで複雑な機能を有しないはずなのだが、これまで規格に合わせるだけでも煩雑だった。これはブラウザの標準準拠が低いためであり、現に年々、むしろスクリプトは簡易な方向に向かっている。そのうち.htaccessの設定だけで済むようになれば良いのだが。

IEに右往左往

 今回は日記レベルの雑感です。

 過去記事でJavaScriptのソースを見られるようJavaScriptファイルに直接アンカーを張っていたのだが、ふとネットカフェでチェックしたところ、Internet Explorerではダウンロードになってしまうことに気づいた。Safari、FirefoxはもちろんAndroidブラウザですら普通に表示されるので、完全に盲点だった。

 仕方がないのでHTML化に向かったのだが、コピペだと更新のたびに修正する羽目になるし、当サイトはサーバサイド処理(PHPなど)だと他のスクリプトや.htaccessの設定とも絡んでしまうので、XMLHttpRequestで取り込むことにし、XHTMLにJavaScriptを直書きし始めた。

 ところがXHTMLでは使えない文字(<, >, &)があり、コメントアウトするとJavaScriptが動かないので結局はHTMLに変更した。この後もinnerHTMLだと上記の文字がエラーを起こすので、改めて考えたらXHTMLでもCDATA区間を使えば良いし、TextNodeで挿入すればinnerHTMLも文字のエスケープも不要だと気づいた。

 1kByte程度で済むと思っていたのに、結局の仕上がりは約2kByteまで膨らんだ。(最終的にこのファイルに埋め込んだ。更新:

フォント指定再考

 「CSSでのフォント指定について考える(2014年)」という記事を参考にCSSのフォント設定を下記のとおり変更した。前述のサイトに近い構成で、Linux系のUbuntu用にTakaoExGothicを追加した形。Linux、BSDは調べたが、Ubuntu系以外は標準がよくわからなかったので記載しなかった。

font-family:YuGothic,'Yu Gothic','Hiragino Kaku Gothic ProN','HiraKakuProN-W3',Meiryo,TakaoExGothic,sans-serif

 pre要素、td要素、th要素の英字には等幅フォントを充てているのだが、プログラミングで多用するはずの等幅フォントに関する情報が意外に少なく苦労した。結局は上記のYuGothicの前に「Courier New」(Mac、Windows、iOS)と「DejaVu Sans Mono Book」(Linux系)を記載した。なお、TakaoExGothicは印刷業界に合わせて英字がプロポーショナル、和字が等幅だそうで少し厄介だ。

フラットデザイン指向

 先日「フラットデザインの基本ルール」(佐藤好彦インプレスジャパン)を読んでみた。iOSやWindows8で見られるフラットデザインへの系譜をデザイン史的な発想で説明したインターフェースデザインの教養書といった趣きであった。とくに過去の写実主義的美術や宗教画、そしてバウハウスのデザインを例示比較して、機能デザインに向かう指向を説明する下りは鮮やかで感動した。

 Webサイトも過去は装飾中心であったが、HTML4.01で構造を意識するとともにframe要素が廃れた。それでもまだ本体コンテンツの両脇にメニュー等があるblog等は多いが、タブレットでAmazonを見るとフラットで直線的配置に変わってきており、Webサイトもここ数年でフラットな流れに向かう気がする。

CSSのフォント指定

 少しフォント周りを調べてみた。手持ちのiPod touch(iOS)では普通に見えていたのだが、古いiOSだとヒラギノ丸ゴシックなどが無いようだ。さらにフォント名もMacOS Xとは違い、ヒラギノ角ゴシックは「HiraKakuProN-W3」とのこと。Mac OS Xもヒラギノ角ゴシックの英語名が「Hiragino Kaku Gothic Pro」から「Hiragino Kaku Gothic ProN」になっていた。

 Windows8の方も新しいスクリーン用フォントがあるという記事を見かけたが、いまいちわからないのでWindows向けは「Meiryo」と「MS PGothic」のままとした。LinuxとBSDは面倒になってきたのでこれまで通り「TakaoExGothic」と「IPAGothic」を指定。これから大事なAndroidは機種依存が多く情報が不明瞭なので考えないことにした。

円グラフのCanvas画像

 Canvas要素で円グラフを試作した。車輪の再発明だろうれど、とりあえず勉強にやってみると動作が理解できる。ただ残念ながら文字を自動配置する上手い関数が思いつかない。あとcanvas要素で生成する画像がPNG形式だとは知らなかった。また3DSのブラウザでは表示がおかしくなった。moveTolineToの実装が半端なのかもしれない。あとでもう少し考えたところ、三角関数で計算した各円弧の中間位置に文字を自動配置することで、描写用関数と入力データを分離できた。

canvas+JavaScriptによる円グラフ
Canvas対応ブラウザでは円グラフを表示します。

HTML5への移行

 多忙な職場に移ったので、手の空いているうちに事情のあるページ以外、全てHTML5に移行した。ただし、IE8以前のブラウザにはHTML4.01、携帯(フィーチャーフォン)向けには各キャリア用に変形して送信するため、全てXML形式にした。修正作業は小説という性質上、言い回しの違いや句読点など気になる点があり、せっかくなので中身も修正したかったので手作業にしてしまった。また、2006年より維持してきたGRDDL用のXSLTは廃止した。

 今のネットにある古くからのコンテンツは、どのぐらいが新しい規格に追随しているのだろうか。とりあえず、文芸サイトと温泉サイトは今でもfontタグなどを使った古めかしいサイトも結構見かけるが、案外と未だ価値があったりして不思議な感じがする。

擬似XHTMLの活用

 HTML5の場合、XML形式ではなくても空要素をXHTMLと同様にスラッシュで閉じることが可能のようだ。つまりxml宣言と名前空間が無いこと、xml:lang属性ではなくlang属性を使用することを除けば、空要素をXHTMLと同様にするだけで概ねXMLとして扱える。元々xml宣言は省略可能である上、名前空間抜きでwell-formedであれば対応可能な処理系が多いので、空要素を閉じるだけで実質XHTML相当として使える場面が多くある。

 実際、DOM関係はHTMLでも用意されているし、XSLTは名前空間が無くても多くの機能は利用できる。XHTML5をtext/htmlで送るぐらいなら、空要素の処理で擬似XHTMLにすることも1つの手法だと思う。

microdata再考

 microdataで読書散策路をマークアップするにあたり、当初はGoogleのリッチスニペット関係を参照していたのだが、本の作者、出版社までメタデータを付加してみると冗長だと感じたので、Schema.orgを良く読んでみた。するとBookスキーマはReview属性とdescription属性を設定できることがわかった。

 Googleのリッチスニペットは1ページに1レビューという制限があり当サイトの構成には合わないので、思い切ってリッチスニペットを想定せず、Bookに書籍名、出版社名、説明(感想)の属性をつける構成に変更した。これだとitemidとも相性が良いので便利だと思う。

microdataの使用感

 読書散策路をXHTML5に移行したところ、microdataがあればmicroformatsやGRDDL、RDFaは不要になると感じた。ただし、microdataで使う属性はXHTML1.1以前は無いので、HTML5未サポートのブラウザに対応するのは手間がかかる。とくに私はitemidをJavaScriptで使っているので代替の仕組みを作る手間がかかる。またHTML内でTripleを組む必要があるので、GRDDLやmicroformatsよりもファイルサイズが大きくなった。当面はGRDDL適用のページのみ移行を検討する予定。

 ところで、IEのHTML5サポートブラウザの切り分けはAcceptヘッダのApplication/xhtml+xmlを使った。邪道だが、どうせIE以外は切り分けしないので良いかなと思う。JavaScriptで対応させる技が出回っているようだが、JavaScriptを切っていたらどうするのだろう。

バックアップの方法

 私のWebサイトの場合、本文は自動生成も外部からの投稿も無い上にデータサイズも小さいので、単純に手元のPCやUSBメモリに加え、クラウドのUbuntu Oneも使い始めたので多重のバックアップ体制になっている。

 一方、TwitterやFacebook、blogなど複数駆使している人はデータ量も手間も大変だと思う。10年単位で見た場合、あちこちサービスを移り変わっていると再公開だけでも技術がないと煩雑だ。IT技術系だと古い記事は無価値と切り捨てる手もあるかもしれないが、傍から見る分には面倒そうだと思う。

HTML5のmeta要素

 このサイトがHTML5に移行できるか試しにValidatorにかけてみて、meta要素のname属性に定められる属性値の制限の厳しさに気づいた。とくに、一般に多く使われているdateが使えずdcterms.date等への置換が必要だ。当サイトはMicrodataとhr要素の定義変更以外はHTML5に移行する利点が少ないので、もう少し後に考える予定だが他のサイトはどうなのだろうか。HTML5はリッチなアプリケーション開発環境という印象が強いので、静的な部分は見落とされているような気がする。(更新:

Linux系サイトとHTML

 Ubuntuを使い始めたのでUnix/Linuxのサイトを色々と回っている。もちろん一般的なblogや業者が作ったサイトもあるのだが、長く運営している個人サイトも多い。ただ不思議なことに、この個人サイトはCSSを使わない古い規格のHTMLが多い。Linux界隈はHTMLの規格に興味の無い人が多いのか、それともTexの影響でレイアウトは埋め込む方が性に合っているのだろうか。HTMLやCSSなんてすぐ理解できそうな人が多いだけに不思議な現象だ。

文芸船profile & mail