PDAでネットを見るようになって、一か所ひどく気に入らないコンテンツがある。それはおいらのところ。レイアウトが崩れてまともに閲覧できないのだ。今回はその原因を探ってみようと考えた。
6月は奇しくも「FOAF月間」となってしまった模様。指くわえてみてた人もいるみたいだし、海外の本家から注目を浴びてビビったりしてみたり、あちこちから「ファッション」と野次られたり、といろいろあったがそれはそれで面白かった。
先月はFOAFの利用法を中心に書いたわけだが、同じ頃FOAF採用サイトで並行して行われていたのがXSLTを使ったHTML化。うちもHTMLページは用意したわけだが、今回はいろんなサイトでXSLTを公開していたので、参考にさせてもらった部分も多い。
例えばFOAFNUTSへのリンクなんかは、自分のメールアドレスをパラメーターとして送出するわけだが、foaf:mbox要素に書き込んであるメールアドレスは「mailto:」で始まっている。ここから「:」以降のみを抽出するためにXPathの書式にsubstring-afterという関数を使うなんてのは、ありみかさんのマークアップを見るまでは気が付かなかった。
また、犬神さんのHTML版(要Geckoブラウザ、もしくはWinIE)はともすると多くなりがちなFOAFデータの内容をしっかり絞って見せている。公共機関のサイトを作り慣れているだけあって、シンプルに見せるのがうまいなぁーと。これを参考においらのHTML版に載せる内容を吟味した経緯がある。
これがひとりで始めてたらかなり苦労したかなぁ、って。特にWebViewやFOAFNUTSなんかの面白さもよくわからないまま終わっていた可能性もあるし。まぁ、端から見たらなれ合いかもしれないけど、おいらからしたら結果的にこれでよかったのかなと。
RSS、FOAFとやってきて、RDFというものが普通のXMLとどう違うのか少しずつ見えてきた。この方面は本格的に勉強してみたいなぁ。
サイトの管理と、アクセスログなどの統計を取りやすくするため、なんつー運営側の一方的な都合でサイトの構造を変更しました。みなみなさま申し訳ない。
まず、このコンテンツを従来のドキュメントルート直下から「http://anoh.s10.xrea.com/works/」以下に移しました。最新URLは「http://anoh.s10.xrea.com/works/latest」になります。このディレクトリは従来のドキュメントルート直下のコンテンツからリダイレクトされます。
ついでにコンテンツの名前をカタカナ表記にしました。アルファベット表記より、カタカナ表記のほうが映えるというか目に付きやすい。
セマンティックデータを従来のドキュメントルート直下から「http://anoh.s10.xrea.com/semdata/」以下に移しました。RSSは「http://anoh.s10.xrea.com/semdata/update.rdf」、foafは「http://anoh.s10.xrea.com/semdata/foaf.rdf」に移ります。これも従来のURLからリダイレクトされますが、各種クライアントが上手く新しいURLを取得してくれるかは、やってみないとわからない。
というわけで、特にRDF関連でURLの移動なんてのはもってのほかなんだが、申し訳ないですがご了承お願いします。
今までパームVxを使っていたんだがネット接続に全く適していないマシンだったため、もっぱら移動中にテキストを書くためのマシンと化している。お陰で、グラフィティを使ったペン入力では、4000〜5000字くらいのテキスト入力くらいへっちゃらなくらい慣れてしまった。
んで、移動中の情報収集は携帯になっていたんだが、これでウェブを見て回るなんて無茶をやって、さらに気が付いたことをパームに書き留めていたわけ。片手に携帯、片手にパーム。端から見たら意味不明の姿ですなぁ( ̄△ ̄;。
こんな状況に終止符を打つべく、PDAのアップグレードは長年の課題だったわけだ。なぜ携帯のアップグレードではないかって? テンキー操作すらできないヘタレなので許して下さい( ̄△ ̄;。それはともかく、パームでは標準添付のソフトくらいしか使っていなかったので、思いきってザウルスに変えてみることにした。Linuxベースのザウルスなら、パソコンに近い感覚で使えるソフトも多いかな、と思ったわけだ。
んで、ザウルスを買ってきた。モバイルカードも一緒に。ただ、お店の不手際もあって一緒に申し込んだISPに関する情報を購入当日にもらえず(店に聞き直してIDとパスワードは教えてもらったが、まだISPから書類が届かない)、実はせっかく申し込んだISPではなくPRINを接続先に設定していたことに3日くらい気が付かなかったりと、素人丸出しの状況。ウェブで接続先の電話番号調べて、教えてもらったIDとパスワード打ち込んでようやく本来意図してた設定になりましたよ。
それはともかく、PDAであちこちのウェブサイトを回ってみたいと思っていたので、これを機に巡回先をいろいろ回ってみた。使ったブラウザーはザウルス付属のネットフロント3.0。「さとみかん」から辿れるスタイルシートとかストリクトHTMLに思い入れのあるサイトは非常に再現性が高い……って、おいらのサイトを除けばね( ̄△ ̄;。なんじゃ、この状況は?
ちょっと大げさに見えるように、480×640ピクセルの縦長表示させたんだけど、レイアウトがぐっちゃりになってしまっている。何が悪いんだか調べないとね、勘のいい人ならもう察しはついていると思うけど。
マルチカラムデザインのサイトの場合、縦長表示させると1行あたりの幅が数文字くらいになってしまうことがある。ネットフロントの場合、コンテンツの横幅をウィンドウの横幅に強制フィットさせる機能があって、どんな幅広コンテンツでも480ピクセルに収められる。それが徒になる場合もあるわけだ。まあ、横長の状態で使うのも手なんだけどね、WindowsCEやサイオンユーザーならそっちのほうがしっくりくるのかな。
オペラみたくモバイルCSSを要求しないのかな、と思ってアクセスのサイトを見てみたけどそういう仕掛けはしていないみたい。念のため縦表示と横表示の切り替えをしてみたが、どちらもスクリーンCSSを要求する模様。
そう言えば、オペラが何でもXHTMLの技術で済まそうとしているのに対し、ネットフロントは用途ごとにモジュールを取り替える(モバイル機器にはWAPモジュールを取り付けたり、iTVにはBMLモジュールを取り付けたり)といった方法を取っているようにも見える。どちらがよりよい方法なのかはよく分からんが、開発側としては前者の方法が、発注側としては後者の方法がやりやすいのかもしれない。
なんでモバイルCSSかというと、幅の狭い画面用のCSSを別個用意するのが楽だったのになぁ、ということ。どうしても気になるようだったら、UA名の「Mozilla/4.0 (PDA; SL-C750/1.0,Embedix/Qtopia/1.3.0) NetFront/3.0」のどれかを頼りにしてブラウザ振り分けするしかないかね。
そういう中途半端なサイトのため、ネットフロントはCSSを切るオプションも用意してくれているが、切り替えはダイアログを表示しないとならないので、できる限り勘弁。オペラのあのスマートさに慣れた身にとっては、マカがマイクロソフトワードのスタイル設定画面の出来にヘキヘキするように、ダイアログを呼び出しての作業はもはや苦痛以外の何者でもなかったりするわけなのだ(大げさ)。
あまりマルチカラムデザインで問題が多発するようなら、w3mでも入れてみますかね( ̄△ ̄;。
ホームページの作り方みたいなサイトが云々がいつまで経っても悪い冗談でしかない内容を繰り返すのは、情報の流れが一方通行だからだ、といういい加減な前提でものを言ってみる。
つまり、今後こういったHTML講座とか云々とかやるときは、ぜひともWikiやMovableTypeといった、他者による情報補完が可能な形態でコンテンツを発信してもらおう( ̄△ ̄;。
でも、今回の朝日新聞のような態度だったら、せっかく補完しても運営側の手によって「あぼーん」だらけになってしまうんじゃないかという悪寒。( ̄△ ̄;。
Mac OS Xはメモリー喰らいというが、実際計ったわけではないんでその実態は分からない。それはともかく、いまマシンの状況はどうなのかが判ればハードディスクがガリガリいいっぱなしで作業が先に進まないときも少し気休めになるだろうと、メモリーの使用量を監視するソフトを動かしている。
Mac OS Xにも標準で「CPUモニター」なるソフトが付属しているのだが、なんか「いかにも」な面構えなので、代わりに「MacFace」というソフトを入れている。
CPUの使用率やメモリーの使用率(ワイヤー分とアクティブ分の合計だと思うけど)によって表情が変わるのが愉快。フォトショップなんか動かしているときは、いかにも苦しそうだし。
これ今まで男の子の顔だったのに、今日見たら女の子の顔も選べるようになってた(5月頃から、自作の顔パターンファイルを利用できるようになったようだ)。
これ、萌え萌えな女の子の絵を貼付けて、フォトショップ動かしながら楽しんでるちょっと変な人とかいるのだろうか( ̄△ ̄;。さとみちんや沢渡真雪さんあたりが顔パターンファイルを出したら、急にシェアが伸びたりしてしまう悪寒( ̄△ ̄;。
あ、おいらの顔で出さないのかですって? この表情以外はバリエーションがありませぬ( ̄△ ̄;。
ネットフロントで滅茶滅茶レイアウトが崩れてしまうことに先日気が付いた。7月後半のログを眺めると、ネットフロントでアクセスしているのはおいらだけなんだが、自分のサイトを自分で見られないのもなんだか間抜けなので直すことにした。
まずは問題の把握。段組みをCSSで実現させるにはfloatを使う方法とpositionを使う方法がある。それぞれを検証してみた。
floatを使う場合は特に問題がない。ただfloatの場合、設定したブロックが後ろにあるブロックに対して回り込む方法を指定する。また、回り込むブロックは横幅を設定する必要があるため、ここを幅非固定にするのは難しい。そのため、おいらのように本文の後にサブになるブロックがある場合はこの方法は向いていない。
次にpositionを使った場合。おいらのサイトはこちらの方法を使い、position:absolute;right:20px;という値を指定している。このrightというのが良くない模様。ネットフロントはrightなんて値は知らないよーとばかりに、leftの指定をデフォルトの値(この場合は0px?)に強制指定してしまうようだ。逆にleftの値さえ指定してあれば、まともに表示してくれる。
というわけで、左側に幅固定のサブコンテンツを置くのであればともかく、右側に置くのは無理そう。今回はネットフロントでのサブコンテンツの表示をあきらめる手を採ってみた。
方法としてはネットフロント専用のCSSを割り当て、「sidebar」というクラス名を割り当てたdiv要素をdisplay:noneで非表示にし、本文の幅を広げてみた。本当は@importを使ってパッチ風に処理したかったんだが、どうやら@importは受け付けてくれないみたいなのだ。
あんまりユニバーサルな対応ではないのだが、次回にレイアウトを見直す際に根本的に考え直してみよう。