勤務先である園田学園女子大学短期大学部生活文化学科のwebページをリニューアルしました。
これまでの同学科webページと同様に、私が学科の学生に手伝ってもらいながら、ページ作成を行いました。今回のリニューアルでは、内容・デザイン共に大きな変更を加えています。当初は内容的にもっと色々なことをやろうと思っていたのですが、学生募集のタイムスケジュール的に、一度このあたりで公開したほうが良いと判断しました。今回のリニューアルで実現できなかった部分は、今後も時間をみつけながら作業を進めていきたいと思っています。
主に使用した技術はXHTML1.0TransitionalとCSSであり、Flashも部分的に使用しています。また、閲覧対応ブラウザは、Internet Explorer5.0~6.0、Safari、Firefox1.5としています。IE4, NN4以前では、スタイルシートを読み込まないようにしています。古いバージョンのInternet Explorerの互換性チェックでは、色々と勉強になりました。XHTML/CSSのコーディングとしては多少きたない書き方かもしれませんが、ハックは極力使わない方針で行っています。
現在、所属先の短大の授業で作成しているRPGでは、横32×縦32ピクセルのマップチップ（GIF形式）を、横32×縦32チップ敷き詰めた背景を用いています。その際に、Flashに取り込んだマップチップ画像を、attachMovieを用いて、一つのシンボル内に全て敷き詰め、カーソルキーの操作に対応してそのインスタンスを上下左右に移動させることにより、背景スクロールを実現しています。
授業では、マップチップの種類としてプレーヤーキャラクターが通り抜けられる背景と、通り抜けられない背景を少なくとも1種類づつとしか制限を設けていません。しかしながら、多くのマップチップを用いて凝った背景を作る学生が予想外に多く、その作品の完成が楽しみになっています。
ただ、たくさんのマップチップを用いたことから、地図背景のスクロールが遅くなってしまう学生もでてきました。この学生の場合、1kbにも満たないGIF画像を背景用に63枚用いています。これらのマップチップを、前述のように一つのシンボル内に貼り付けて12FramePerSecondでスクロールさせているのですが、比較的新しいPC（Pentium4、512MB）でも、スクロール動作が極端に遅くなってしまいます。
このため、attachMovieを用いてマップチップを配置した直後に、そのマップチップに対して、Flash8より登場した”cacheAsBitmap”を実行してみたら、動作が非常に軽快になりました。FlashPlayer8以降でしかゲームを実行できなくなってしまうのは残念ですが、このような場合のごく簡単な対処法だと思います。
(X)HTMLでマークアップしたテキストを、CSSで「text-indent:-9999px;」などとして画面外に移動させ見えなくし、背景画像で置き換えると言うテクニックがあります。これを用いたwebページを、IE5.0（Windows）で確認していて気づいたことをメモしておきます。
- 対象ブラウザ
- IE5.0(IE5.5以上では影響なし)
- 症状
- 特定のセレクタに対して、「text-indent:-9999px;」などとしテキストを画面外に移動させ、同時に背景画像を「background: url(sample.jpg);」などと指定する。この時、heightをピクセル値で指定している（%だと問題なし）と、背景画像もtext-indentの値で移動してしまう。この結果、「background: url(assets/newsTop.jpg) no-repeat;」と繰り返し表示をしない設定にしておくと、背景画像部に何も表示されない。no-repeatを指定しない（繰り返し設定）場合は、text-indentで移動させた場所から画像が繰り返し表示されるため、画像がずれて表示されることがある。
- 対策
- background-positionの位置がtext-indentに引きずられてしまっているので、background-positionとしてrightやright topを指定する。背景画像にwidth値を指定する際には、widthで指定した背景画像表示範囲もbackground-positionに基づき画面外に移動してしまうため、背景を設定するセレクタの外側のセレクタでwidthを指定する。別の方法としては、外側のセレクタでheight値をピクセル単位で設定しておき、text-indentを設定するセレクタでは「height:100%;」などとパーセンテージで指定する。
しばらくblogへの書き込みを休んでいましたが、またポツポツとblogを書いていこうと思います。今日は、オライリージャパンから出版された”アンビエント・ファインダビリティ”を最近読み終わったので、その感想などを記します。
まず、”アンビエント・ファインダビリティ”という聞きなれない言葉がタイトルに用いられていますが、これは「周囲を取り巻く、包囲している」と言う意味の”ambient”と「特定の対象物の発見のしやすさ、システムとしての検索のしやすさ」の”findability”から成り立っています。副題として「ウェブ、検索、そしてコミュニケーションをめぐる旅」と付けられており、主にインターネット上での「情報の見つけられやすさ」と「情報を見つけるシステム」について記載されています。
オライリーからの出版ですが、技術書/専門書と言うよりは、”ファインダビリティ”を中心としたインターネット界隈についての読み物であり、blogやmixiなどに興味がある一般の人にも、楽しめる内容ではないかと思います。また、著者のPeter Morville氏は、情報アーキテクトとしては著名な方のようで、その知識の量と考察の鋭さは紙面からも十分に伺えます。
同書は、序章、1章「遺失物取扱所」、2章「経路探索小史」、3章「情報とのインタラクション」、4章「錯綜する世界」、5章「プッシュとプル」、6章「ソシオセマンティックウェブ」、7章「啓示による意思決定」から構成されていますが、私にとって特に興味深かったのは6章です。この6章では、情報の分類の仕方を、タクソノミー、オントロジー、フォークソノミーなどのキーワードを用いて解説してあり、最近同分野に興味を持ち始めた私にとっては、コンパクトに業界を俯瞰した記述が役に立ちました。また、著者が主張するファインダビリティの多層化の重要性は、参考になりました。
ピーター モービル Peter Morville 浅野 紀予
オライリージャパン (2006/04)
