「業界人しか理解不能」カテゴリーのエントリー

ウェブデザインの専門的な話

UTF-8の文字コードで制作したウェブサイトが、WindowsのInternet Explorer 6で見るとCSSの表示が乱れ、一部のCSS指定は効くのに、他は効かないという奇妙な現象が起きるというバグ。

原因をここ数年、解明しようとしていたのだが、 バグが起きないサイトと起きるサイトのCSSのコードの違いをリストアップしたところ、やっとわかったので解決方法を記す。

原因

外付けCSSファイルに「UTF-8でない文字コードの日本語文字」が入っているため。例えば、HTMLはUTF-8で書かれているのに、CSSはShift JISだとこの現象が起きる。

解決方法

CSSファイルの中に書き込んでいるコメントなどの日本語文字を全部削除するか、 CSSファイルそのものの文字エンコーディングをUTF-8にするとあっさり直る。

CSSファイルで一番最初に日本語文字が出てくる行以降で、指定が無効になってしまうらしい。他のブラウザーではまったく問題はないので、これはIE6だけ。IE7では問題ない。

Dreamweaverでは、デフォルトでShift JISを使ってCSSを書いてしまうようなので、注意が必要。CSSファイルは見た目には文字コードが見えないので、一番手堅いのは、日本語を一切使わないで英語でコメントを書くことだろう。半角英数字はエンコーディングがなんであれ、IE6でもなにも影響無いようだ。

—

Mac OS X アップグレードに関わる機材の事情で、新しいデザインにしたこのブログをIE6検証をしていなかったのだが、さきほど初めてチェックして冷や汗をかいた…。失礼いたしました。このブログのように日本語版WordPressを使っていたり、 最近のウェブ開発のトレンドに沿ってUTF-8で製作する場合には注意が必要だ。

料理人・嶋田の新ビジネスのプロモ素材を、ボランティアデザインした。今日から配り始めたらしいので、こちらでも紹介する。

インテリア誌のようなシンプルさが彼の希望で、背景は絶対に白、キーカラーは「薄めのルビー色」というご指定。ちょうど別の仕事で忙殺されている頃だったので、短時間にシンプルにサクッとデザイン。カラーバリエーションを出した中でいまの色に決定。「Take’s Kitchen」の頭文字を写真部分にデザイン要素として施した。

使った写真は、嶋田が某高級住宅地への出張料理をした際に、私がアシスタントで皿洗いをやりながら、一眼レフ片手に撮影したもの。そのときに彼の働きぶりを見ていて、料理人に体力が必要な理由がわかった。いやあ料理は時間との戦いというライブパフォーマンスそのもの。舞台に立つ役者のようなものですわ。

今日からシンプルなウェブサイト（www.takeskitchen.com）も公開しているので、興味をお持ちの方はどうぞ。彼のマジメな働きぶりや誠実さのにじみ出る料理を知っている私としてはオススメできる。腐れ縁の友を呼んで鍋パーティしかやったことの無い人にはお高いが、料理人が出張してくれる立派なサービスとしては破格。自分でホームパーティの食べ物・飲み物を揃えただけでも数万円になりますからね。彼の話で、舞台裏のコストを知っているので、自信を持って安いと言える。

最近は、地方で通販印刷をやる会社が沢山あり、今回は京都のプリントパックを利用。ポストカード400枚（4C1C・ホワイトミラー上質220kg）でコミコミ6,300円。考えられないような激安で、低予算プロジェクトではよくお世話になっている。

ニューヨークのジョナサン・ブリルの紹介で、突然、米国マイクロソフト本社の「Surface」担当デザインディレクターと東京で朝食をすることになったのだが、先方が超多忙なようで、あっさり流れた。 詳しいことは書けないが、ジョナサンによるとマイクロソフトは「新しいOS」待遇で、Surfaceの開発に異例の力を入れているようで、優秀な人材を懸命に集めているらしい。

ジョナサンは美大時代の同級生で、デザインプロデューサーだが、アメリカの巨大企業にとんでもないコネクションを持っていて度肝を抜かれる…。

「Surface」は例えて言うなら、iPod Touchの巨大版。30インチのマルチタッチ・スクリーンを内蔵した業務用のテーブル型製品が、近く発売されることになっている。映画「マイノリティ・リポート」がそのまま現実になってしまったようなテクノロジーだ。

ここしばらくiPod Touchを使っている自分の感想からすれば、一般大衆向けコンピュータの未来は「指で画面を操る」マシンにあると確信している。文字でコミュニケーションをしている現代では、キーボードという物理的な機械がついてないマルチタッチデバイスは完璧でないが、今後音声やビデオのコミュニケーションが進化すれば、問題では無くなるのではないだろうか。

結果的にミーティングは流れたが、シアトル本社から東京への出張の多忙なスケジュールの中で、日本の１デザイナーに会う時間を作ろうとしてくれたのは嬉しいことだ。

【写真：Surface公式サイト・英語版】

スティーブ・ジョブスが iPhoneとiPod Touchに「Apple製以外のソフト」をインストールすることを認めると発表した。これは間違いなく無数のソフトが開発されると期待して、いらないと思っていたiPod Touchを購入。

世間の評価はかなり高く、私も生活パターンに変化があるくらいのインパクトを受けているのだが、この道具の恐るべき点は指での操作がどうのとかビデオが綺麗とか、そんなことでは無い。 これはウルトラコンパクトなコンピューターなのだ。

この薄く小さなワイヤレスデバイスで世界に向けてウェブサーバーを走らせることができることを知ったときには驚いた。中身がMac OS Xと大差ないため、Apache、PHP、Perl、Rubyなど をインストールできるのだ。iPod Touch用のMySQLがリリースされたら、これ１台で電車の移動時間に動的サイトの動作検証が出来るということか？！

メールとブラウザーを使う頻度の方が高いので、私にとってはプレーヤーというよりも、小さなコンピュータという感覚。来年２月の開発者向けキットのリリース以降に、使えるソフトが続々とリリースされることを大いに期待したい。

既存ソフトはおおむね問題なく動作すると言われているが、デザイン同業者の為に自分の経験を記入しておく。

発売直後は古いアプリケーションとの互換性も高いという話が出回っていたが、蓋を開けると、ほとんどのソフトがアップデータを使わないと不具合があるという結果だった。その結果、メンテナンスにとんでもない時間を使ってしまった。

OSがアップグレードして、互換性がないというだけで、アプリまで有償アップグレードさせるのは、儲かるとはいえ論外だ。最低１世代前まではパッチを出すのがマナーだろう。 多くのソフトメーカーの今回の対応は誉めるに値する。

（下記リストは2008年1月15日更新）

▼動作の問題無し

Adobe Photoshop CS3

Adobe Ilustrator CS3

Adobe Dreamweaver CS3

Apple Final Cut Studio 2（アップデータ入手可）

Apple Apeture 1.5.6（互換性アップデートバージョン。サムネール表示に不具合あるが、ウィンドウのサイズを変えると直る）

Toast 7 Titanium（OSエラーでDVD-Rが焼き込み不能、最新の8は不明。ロキシオサイトからアップデータ入手可）

EPSON Multi-Print Quicker 1.1.2（動作するが、少なくともCD／DVDラベルプリントで印刷が不可。Epsonサイトからアップデータ入手可）

Parallels Desktop 2.5（起動および再インストール不可。3.0に有償アップグレードが必要。追記：3.0のインストーラーも途中で止まってしまったが、OSのシステム環境設定＞共有でインターネットシェアを１度オンオフするとインストールが進むという情報があり、やってみたらうまくいった。もしかすると2.5でもうまく行く可能性も）

▼問題あり

ATOK 2006（突然日本語入力ができなくなったりアプリがクラッシュする現象あり。Finderもクラッシュすることを確認。ジャストシステムサイトのサポート情報によると、Finderのリスト表示とカバーフロー表示でファイル名を変更するとFinderがクラッシュするそうで、現在Appleと対策を協議中とか。インストールができない問題はパッチが公開中。最新の2007の動作はアップデータで問題ないようだ）

OmniOutliner Pro 3（互換性のあるバージョンが公開されているが、クラッシュ頻発。ATOK2006との互換性の可能性が高い）

▼未確認

モリサワフォント（問題なさそうだが、AIで不安な現象があり検証中）

Adobe InDesign CS3