カテゴリー: HP作成

このVol.1の記事のなかにはたくさんのハイパーリンクがありますが、「CURURU」→「ppBlog」→「Wordpress」とプラットフォームが変わる過程で、リンク先のページのアドレスが変わり、その多くがリンク切れになってしまっています。今となってはそれを一つひとつ修復するのは難しいので、誠に申し訳ありませんがご容赦ください。

HTML5.0の仕様策定が完了したとのことです（→こちら）。
いよいよ来年は自分のHPの全面改訂をしなくては……

WYSIWYG対応のHTMLエディタで簡単に作ってしまうのではなく、タグの意味を一つひとつ確認しながら、テキストエディタで書いていこうと思います。まずは、もっとも基本的なところから。5.0では、文書型宣言がものすごくシンプルになりました。
（< >は＜＞に変換してあります。）
—
＜!DOCTYPE html＞
＜html lang=”ja”＞
　＜head＞
　　　＜meta charset=”UTF-8″＞
　　　＜title>☆アルファ☆のページ＜/title＞
　＜/head＞
　＜body＞
　　　＜h1＞☆アルファ☆のプロフィール＜/h1＞
　　　＜p＞本文＜/p＞
　＜/body＞
＜/html＞
—

いろいろなブログに6JIS+2D54といったような記述が出てきて、何のことか分からなかったけれど、これは6kgが文字化けしていることが分かりました。JISコードで「kg」を表すのは「2D54」です。これが「kg」と表示されないのは、たぶんこの辺りの非互換性が関係しているような気がします。落ち着いたら、もっとしっかり調べようと思います。

Webデザインの専門誌です。
私の写真の友人が撮ったパノラマ写真が載っています。
この雑誌を見たら、また写真のサイトを大改造したくなりました。

私の３つのホームページは、みんなHTML 4.01 Transitionalで書いてあります。これは、W3Cから1999年12月24日に勧告されたものです。Strict、Transitional 、Framesetの３種類がありますが、Transitionalは前のバージョンHTML 3.2からの移行過渡期の仕様です。ということで、今となってはすごく古い規格になってしまった感じがします。
さて、いよいよ今年９月にはHTML5.0が勧告される予定です。HTML5.0の大きな特徴は、このページによると、

1. セマンティックな構造化言語へと進化
2. フォーム機能の大幅な強化
3. Web アプリケーション開発向け機能の強化

だそうです。
3.で注目されるのは、JavaScript APIが用意されることで、今まではFlashやAjax を使って実装していた機能が、JavaScript API のみで実現できるようになるようです。ということは、Web制作者はブラウザーの違いやプラグインの有無をそれほど意識しなくても動的なコンテンツを作れるようになるということです。
ということで、私のホームページも、HTML5.0が勧告されたら、それに従って全面改訂しようと思っています。
以下は、備忘録的に、HTML5.0の関連サイトへのリンクです。
——————————————————————-
◆HTML5.0.jp
http://www.html5.jp/
◆HTML5.0が作り出す、新しいWEBの世界
http://www.html5-guide.com/
◆HTML 5 における HTML 4 からの変更点
http://standards.mitsue.co.jp/resources/w3c/TR/2008/WD-html5-diff-20080122/

私のホームページはHTML 4.01 Transitionalに則って書いてあります（どのブラウザーでも破綻しないことが確認できたので、承知のうえで文法を破っている箇所も一部ありますが…）。Transitionalは「過渡的な」という意味で、今後廃止予定の要素や属性など、Strict （厳格な）仕様では認められてないものもみんな使うことができます。
これに対して、今度採用しようとしているXHTML1.1は、HTML 4.01 Transitional→XHTML1.0 Transitional→XHTML1.1と一気に２段階バージョンアップするので、越えなくてはいけないハードルが３つあります。
（１）HTML→XHTMLの変換。（HTML互換性ガイドライン参照）
（２）廃止予定の要素や属性を含まないStrict（厳格な）仕様への書き換え。
（３）タグセットのモジュール化
ソースを書き始めるまでに、もう少し勉強する必要がありそうです。

17日のエリトリでAjaxを使って、写真のホームページを全面的に刷新すると書きましたが、Ajaxの技術がどんなに効果的なのかを少し書いておこうと思います。
AjaxはAsynchronous JavaScript + XML を略した造語で、画面遷移を伴わずに、ブラウザーとサーバー間の非同期通信でXML形式のデータのやり取りをして、動的にページの一部を書き換える技術です。
いちばん分かりやすい例は、Google Mapです。表示された地図をマウスでドラッグするとなめらかに地図が移動します。従来はこのような動的な処理をするには、いったんページを更新する必要がありました。でも、Ajaxを使えばなんの画面遷移も起こらないまま、スムーズにページが書き換えられて行きます。

Ajaxを使うと写真の表示もとてもクールにできます。たとえばこのページの中程の「Live Demo」の写真のどれかをクリックしてみてください。ちょっとした驚きだと思います。この技術を使って、いっさい画面遷移せずに、すべての写真を表示できるようにしたいと思っています。

前回、私の写真のHPを大幅に書き換えたのは2002年3月のことでした。このときはJavaScriptを覚えたのがうれしくて、しつこいくらい使ってみました。また、ブロードバンドとXGA（1024×768ピクセル）表示可能なディスプレーの普及を受けて、掲載している写真を390×260ピクセルから675×450ピクセルにサイズアップしました。

あれから７年経ったので、そろそろ最新の技術を使って全面的に書き換えようと思います。
書き換えの方針は以下のとおりです。
１）マークアップ言語をHTML4.01からXHTML1.1に変更。XHTML2.0を待っていたのですが、突然策定の打ち切りが発表されて、次は5.0だということになってしまったので……
２）文字コードをShift_JISからUTF-8に変更。
３）Ajaxを使ってコンテンツを動的に書き換えて、基本的にindex.htmlから画面遷移せずにすべての写真を表示できるようにする。
４）ソースのサニタイジング処理を注意深く行って、XSS対策を万全にする。
５）細部までユニバーサルデザインを心がけて、アクセシビリティの高いサイトにする。

私の写真のHPをAjaxを使った動的なページに全面的に書き換えたいと思っていても、どうやってAjaxを実装するのかイメージが湧かなかったのですが、このページを読むとかなり具体的に分かってきました。

Spry framework for Ajax
でも、別のこのページを読むとSpryのフレームワークを使わなくても、Ajaxを実装できそうな気もするし……
さらにLightbox2を使えば、そんな難しいことをしなくても、ちょこっとコードを書き換えるだけで、私がイメージしていたのに近いページが実現できそうです。
このページのExampleのサムネイルをクリックしてみてください。

ということで、だいたい方針が決まってきました。