Aoi's Freespace

京ぽんのOperaなんですけれど、フルスクリーンモードの謎が解けました。（しかし、どんでん返しが！）

Operaのフルスクリーンモードは、media="projection"なんですね。projectionでCSSを作れば意図した通りのデザインになります。

ということは、京ぽんのOperaの適用CSSはscreenだと横スクロールバーを出してPCなどから見た場合と同等に、projectionだとフルスクリーンモード用に、handheldはスモールスクリーンモード用にっていう3つのパターンがあるってことですね。

と、思いきやOperaのフルスクリーンモードがprojectionなのは、PC版のOperaだけぽい・・・。京ぽんはscreenとhandheldだけなのね。がっかり。

京ぽん搭載のOperaをスモールスクリーンにした場合、どのmediaスタイルが適用されるか考えてみました。

Operaの公式サイトによると、Operaのスモールスクリーンモードでは、media="handheld"が適用されるそうです。

というわけで、少し実験してみた結果を走り書きしてみます。

京ぽんOperaのスモールスクリーンモードでは、

• media="all"はCSSごと無視される
• 外部CSSによる@importは無視される
• 外部CSSによるmedia="handheld"は無視される
• link要素によるmedia="handheld"は適用される
• CSSを無視した場合は、Operaのデフォルトスタイルシートが適用される。

つまり、link要素でmedia="handheld"を指定した場合のみ正しくhandheldのcssを読みに行くことがわかりました。

って今からlink要素の中身を書き換えていくのはめんどくさー。そんなわけで、ケータイモードでCSSを完全に無視させて、殺風景モードで閲覧する方がいいかもしれませんね。

買っちゃったシリーズでっす。今度はPHSですよ。京セラのAH-K3001Vですよ。またの名を京ぽん？

動作がもさもさしてると噂の京ぽんですけど、今までがサンヨーのRZ-J70でしたから、逆にサクサクになった感じ。J700と比べたらだいぶもさもさしてるかな。

契約コースは繋ぎ放題なので、京ぽん単体で使う分には、音声通話以外は課金無し。かなり良い感じー。音声通話も、標準コースよりも料金が安くてさらに良い感じー。

ノートPCに繋いで使うときは、ニフティのブロードバンドコース（家で普通にADSLでインターネットするときに契約するコース）を使って、ニフティの専用アクセスポイントにPPP接続して使います。こっちも従量課金無しなので良い感じー。

速度は32kbpsなので、速くはありませんけど、使えなくは無いかな。テキストベースのサイトだとサクサクなので結構使えると思います。京ぽんに搭載されているOperaは３つモードがあります。

• CSS完全装備のフルスクリーンモード
• 適当にレイアウト変えちゃうスモールスクリーンモード
• CSSを殺してC-HTMLで表示するケータイモード

問題はフルスクリーンモードなんですよね。完全なリキッドレイアウトのページでもどうして横スクロールバーが出ちゃうわけ？京ぽんのディスプレイはQVGAなんですけど、OperaのフルスクリーンモードはVGAで動いていたりしませんか？うちのページで横スクロールしなくちゃ読めないなんて、ぐはーって感じ。

というわけで、フルスクリーンモードは使えないということでFA。応用としての使い道は色々ありそうなので、特殊な用途の場合だけフルスクリーンモードを使うことになりそうです。

次がスモールスクリーンモード。こちらもCSS対応のはずなんですけど、media=allに対応できてなかったりしませんかー。mobile用のCSSを読み込むようになってたりするのかしら？

んで、最後はケータイモード。結局これが一番使いやすい感じ。validでstrictなページなら、とても使い勝手がよろし。ケータイ向けのページもそれなりに使い勝手がよろし。strictでなくケータイ向けでもないページは、多少読みづらい感じ。

京ぽんを使って思ったことは、strictなページは使いやすかったってことかな。画像のaltが特に決定的。Yahooなんかパソコンからは使いやすかったですけど、京ぽんからでは致命的に使いにくいことが判明です。がんばれ。Yahoo。

中途半端な構造化なんかしないで、フラットでリニアなマークアップをして、そののちに構造化をしなさいよって感じ・・・。いあ、アタシのマークアップのことなんですけれど。

そんなことよりも大掃除しないといけないんですよ。とほほ。

以前の「ホームページ」の何が難しい？でテンプレートを作ってみたんですけれど、寂しい！ダサイ！カッコワルイ！と評判が悪い子ちゃんなので、もうひとつ作ってみました。

今流行りの2ペイン風の段組ページです。テーブルレイアウトを排除してます。配色やデザインはお好きなようにいじってみてください。

語調を変えてみるテスト。

1年ほど前にサークルのホームページを作ることになり、担当者を決めたのですが、未だに完成の気配が無いのです。

完成というよりも、むしろ公開すらされていないのです。

Dreamweaverだかホームページビルダーだか知りませんが、そのようなものを使える者を担当に決めたわけですが、聞くところによると、なかなか完成しない。らしいのです。

サークルのサイトとは言えども、作品発表やメンバー募集のためのサイトではなく、沿革や規則と連絡用の掲示板があるだけの質素なサイトのはずなのですが、何をどうすれば1年経っても完成しないのか。

詳しく聞けば、なんとJavaScriptとフラッシュがうまく動作せず、また思うような場所に配置できないとのこと。

ソースに目を通せば、案の定と言いますか、予想に違わずと言いますか、レイヤー機能だのを使ってMozillaではさっぱり判読不明なページに仕上がっておりました。

製作者曰く、IE使って見てください。とのこと。

クロスブラウザやユニバーサルデザインやユーザビリティだのといった「高尚」なことを申すつもりはありませんけれども、サークルの極々内輪だけが使うサイトに、そのようなゴテゴテした装飾をする意味があるのでしょうか。

そんなものに時間をかけている暇があったら、サークル活動をもう少し熱心にやってくださいと思ってしまいます。

というわけで、Mさん向けにテンプレートを用意しましたので、参考になさってください。文章はこちらが用意したものをそのまま使ってくださいまし。

というわけで、HTMLにして23行ほどになりました。マークアップ自体は簡素なものです。つまるところ「ホームページ」の何が難しいかと言いますと、デザインが難しいわけでございます。

スタイルシートなるものが流行っているのか、質問を受けることが増えてきました。

わかりやすいスタイルシートの解説本ありませんか？とか、すぐに使えるスタイルシートの見本ありませんか？なんて尋ねられることが多いんですけれど、世の中に出回っている解説書で正しい記述がしてあるものは、極々少数だと言って差し支えないと思うんです。

スタイルシートのことは、スタイルシートの規格を作った人に尋ねるのが、もっとも確実で失敗の無い方法です。

というわけで、スタイルシート（カスケーディングスタイルシート、略してCSSと言います）の規格の邦訳を紹介しておきますから、まず初めにそこを読んでください。

• REC-CSS2 邦訳

そして、スタイルシート活用の第一歩は、正しいHTMLをマークアップすることから始まります。正しいHTMLとは、厳格(strict)で正当(valid)なHTMLということです。

従来のfontやtableを使ったレイアウトでマークアップしているようなHTMLでは、スタイルシートを使うことは難しい（というか無理）でしょう。

正しいHTMLをマークアップするためにも、HTMLの規格を知っておくことが大切です。HTMLの規格にも邦訳がありますから紹介しておきます。

• HTML 4.01仕様書

厳格(strict)で正当(valid)なHTMLというと、何やら難しそうな気がしますが、厳格であるほど覚えるべき要素は少なくて済みます。

私のプロフィールのHTMLを保存してエディタで開いてみてください。厳格で正当なHTMLとは何かの手がかりになるかと思います。

スタイルシートを活用するには、正しいHTML文書を作成することが大切ですっていうお話でした。

コメントがついて初めてわかる日付別ページのお粗末さ・・・。

ソースを見てもらえばわかると思うんですけど、<h2>のあと、誰のコメントであっても投稿日であっても一切区別せずに、ただひたすらに<p>が並んでる・・・。

<div class="comment">あたりで区切りをつけて、<h3>で投稿者の名前を見出しにしようかしらん。同じ<h3>でも、他の<h3>と同じスタイルを適用すると仰々しくなっちゃうので、そこも考えなくちゃ・・・。

Strictだの仕様だの細かいことにこだわるくせに、XHTML1.1で、Content-Type: text/htmlを返すように記述しているとはなにごとか！というお叱りを受けそうです。

本来ですと、XHTMLのMIMEタイプは、Content-Type:application/xhtml+xmlであるべき(仕様書ではSHOULDという表現）ですし、そうしたいのは山々なんですけど、ここでまたIEですよ。

みなさんが信奉してらっしゃるインターネットエクスプローラーは、XHTML文書のMIMEタイプがapplication/xhtml+xmlだとXHTML文書を表示せずにダウンロードしようとしてしまいます。

IEダメ。IEダメ。IEダメ。3回唱えましょう。

• application/xhtml+xml と mod_rewrite
• application/xhtml+xml

こういう解決法もないわけじゃないんですけれど・・・。

今年書いた日記をMTに移行させちゃおうと思ってちまちまと作業してました。

XREAはデータベースが使えるので、ここを選んだわけなんですけど、そのデータベースの文字コードがEUCなんですよね。

新しく作るデータベースでは、全てEUC_JPに統一しています。現在の所、このコードを個別に変更する事は出来ません。 解決策は編集文字コードをEUC_JPに変えて頂く事になります。

そんなわけで、MTもEUCで運用してるんですけど、そこで問題が！

MTの生成するXHTMLの文字コードがEUCなので、HTTPレスポンスヘッダもEUCを返すように.htaccessで設定してるんですけど、去年以前の日記は、私が手書きでHTMLを書いてるので文字コードがShift_JISなんです。

えーと、ここで誤解の無いように説明しておきますと、HTMLファイルに記述するメタ要素で文字コードを指定するのがありますよね。

<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">

こんなメタ要素です。これは、このファイルの文字コードはEUC-JPなので、ブラウザはEUC-JPで読み込んでくださいよ。という命令を出しているわけじゃありません。

このメタ要素の意味は、このファイルの文字コードはEUC-JPなので、サーバはこのファイルがEUC-JPであることを明示して（HTTPレスポンスヘッダに記述して）データを送り出しなさい。という命令なんですね。

XHTML1.1の本来の仕様では、文字コードはメタ要素で記述することができません。サーバ側の設定であらかじめ文字コードを決めておいてやらねばならないのです。どうしてかと言いますと、メタ要素で文字コードを決定する仕様だと、まずそのファイルをオープンして、どの文字コードで記述されているかを確認する作業が必要になるからです。ユーザーからの要求のたびに、HTMLのひとつひとつをオープンして文字コードを判定していては、サーバにかかる負荷は（ワールドワイドウェブレベルでは）膨大なものになってしまうでしょう。

そんなわけで、こんな感じでサーバ側の設定（.htaccess）で、HTMLの文字コードはEUC-JPだよっ！ってあらかじめ決め打ちしちゃうわけですね。

AddType "text/html; charset=EUC-JP" .html

さて、話を元に戻しますと、ここで問題が！

これだと、htmlファイルは全てEUC-JPだということになってしまいます。手打ちのhtmlはShift_JISです。ここで1時間ぐらい悩みました。でも悩んだ甲斐があって良いアイデアが！

AddType "text/html; charset=EUC-JP" .html
AddType "text/html; charset=Shift_JIS" .htm

じゃん！拡張子がhtmlなのはEUCで、拡張子がhtmだったらShift_JISでレスポンスヘッダを返すように設定して事なきを得たのでした。というわけで、去年までの日記は拡張子がhtmになってます。

ニフティのココログのヘルプを見たり、他の人のココログを見て思ったんですけれど、ブログツールの吐き出すHTMLはXHTMLなので、タグは小文字で書かなければならないし、空要素（いわゆる終了タグのないもの）は、/>って書かなければいけないような気がします。

っていうか、ニフティはヘルプにそのことを何よりも優先して記述すべきなんじゃないかと。ニフティが率先して不思議マークアップを蔓延させてるような気がする今日この頃。

っていうか、このニフティの記事の入力画面でもタグを挿入しやすいようにタグ挿入エディタみたいな形式になってるんですけれど、Bのアイコンで<strong>が挿入されたり、iのアイコンで<em>が挿入されたりするわけなんですね。

こんなむちゃくちゃなエディタを用意しないでください。賢明な読者の皆さんはUのアイコンが<u>だったり、センタリングかインデントかわからないようなアイコンが<blockquote>なのを想像できるでしょう。

試しに<strong>と<em>を使って記述してみますよ。投稿エディタのアイコンのように太字や斜体で表示されますか？←挑戦的

これがstrongです。太字になってますか？

これはemでっす。斜体になりませんよね。

見栄えと論理構造の分離がスタイルシートの存在意義でしょう？論理タグに見栄えっぽいアイコンを用意している時点でニフティの理解の無さがうかがえます。こんなのでお金を取るなんて言語道断。ユーザーをバカにするにもほどがあります。ぷんぷん。

ちなみに↑の画像のアップロード時に画像のURLをリンク形式で表示してくれるんですけれど、border="0"とか書いてあるし。borderなんて属性はxhtmlには存在しません。ニフティはふざけるのもいい加減にしなさい。

追記：border属性ですけど、Transitionalならxhtml1.0でも使えますね。しょぼん。

こんなにも裏技的なことをやらないと自由なメニューができない、というのはやっぱり不自由ではないのか？ と思ってしまう。

たとえるならば、マンションの基本的には画一的な部屋を、いかにして個性的な部屋にするかインテリアを競い合っているようなものではないか？

それより一戸建てがいいなあと思っちゃう。

HTMLとCSSは自前で書くことが前提で、rdfやXMLの処理をオートで行ってくれるマクロがブログツールのような気がします。

っていうか、ブログの普及でせっかく比較的validなHTMLが吐き出されるようになってきてるのに、ニフティの仕様では、invalidなHTMLを促進させるような仕組みになっちゃってるんで、時代に逆行してるというか、ニフティは相変わらず冴えない仕事しかできないなぁと残念な思いをしました。（ばけらさんふう）

なんてことを偉そうに書いちゃってますけど、実はトラックバックのテストだったりします♪

livedoorのblogのHTMLは、あんまりstrictではないよね。MTのデフォルトのHTMLを使ってる感じ。ニフティの方は自前でアレンジしてるのか、比較的strictに記述されてて良い感じ。文法チェッカにかけてみたわけじゃありませんけど。

それでも、多少いわゆるDIV厨というかSPAN厨な記述になっちゃってるんですけど。気持ち悪いので書き直してしまおうかしら。って、無料期間が6月までなのよね。使いまわせるんで練習がてらに頑張ってみようかな。

んで、その結果が・・・、

マジで？ AHLでは81点でしたけど・・・。

ついでにCSSもチェック。ってか自分用♪

こっちの方が少しスマートかな。cite 要素は、色々と論議が有りそうなので、場所がアレですが。<+p class="Cite"> あたりは、スクリプトで生成すれば、不要かも【謎ってか、よく知りません】。

というわけで、こういうScriptをもらってきちゃったりしたんですけど問題アリ？

先週辺りからGoogleの文字コードがUTF-8に固定になってて、サイト内検索から検索すると検索結果が文字化けしちゃってました。

そんなあおいちんに朗報♪入力文字コードがShift_JISであることを明示的にしておけば、検索結果がShift_JISで表示されることが判明。なかなかに良い感じ。

<input type="hidden" name="ie" value="Shift_JIS">

ついでにGoogleのページランクも移転前と同じまで回復して、やっとこさ軌道に乗ってきた感じ。でも、homepage3サーバは重すぎて嫌な感じ・・・。xreaのままで良かったかもー。

あおいちんはfieldsetとlabelの使い方を覚えた！

経験値1を獲得した。
10アデナを獲得した。

ようするに、こんなのー。

labelを使うとラジオボタンをクリックしなくても、文字列のクリックで済むので楽ちん♪詳しくは次の参考リンクをどうぞ。例によってWeb KANZAKIです。

• フォームとアクセシビリティ -- ごく簡単なHTMLの説明

おしまいじゃないです。引用の使い方についてです。citeをblockquoteの中に入れるか外に出すかの問題ですけれど、こういう使い方をしているソースを見つけました。

<dl>
<dt>
<cite>
<a href="http://www.aoi-web.net/">http://www.aoi-web.net/</a>より引用
</cite>
</dt>
<dd>
<blockquote cite="http://www.aoi-web.net/">
<p>
私が使っている通信ソフトKTXやコンピュータ、ホームシアターなど、自己紹介を兼ねた趣味（私的メモ）のサイトです。
</p>
</blockquote>
</dd>
</dl>


この記述ですと、blockquote要素の外にcite要素を出すことができて、それでいてblockquote要素とcite要素の関係が定義されるのでわかりやすいと思うんですけど、いかがなものでしょう。blockquote要素の属性としてciteで引用元のURIを記述するのは従来どおりということで。

このサイトを立ち上げた当初から、日記に幾度となく書いてきては達成できなかった「スタイルシートを使ってかっこよく、理系の真似してクールにいこう」っていうのがあるんですけど、今回のリニューアルで少しだけコンセプトに近づくことができたんじゃないかなぁって思っています。

かっこよくてクールかどうかは微妙なところですけど、「スタイルシート」と「理系の真似して（これはどうやら、「strictでvalidな」という意味を、当時のあおいちゃん的に表現したものらしいデス）」というのは、ある程度到達したかもって感じです。まだまだとってつけたようなHTMLとCSSなので見られると恥ずかしいんですけど、見ても減るものじゃないので、興味のある方はソースを見てくださっていっこうにかまいませんです。

でも、いくら頑張ってインターネットだのHTMLだのスタイルシートだのを勉強したところで、かっこよくてクールにはならなくて、こればっかりは美術的センスの問題だなぁってしょんぼり気分です。クールなデザインは諦めて中身で勝負と思っても、肝心の中身の文章は国語力の問題なので、またまたしょんぼり気分です。みなさん、美術や国語もがんばりましょうね（涙）

さて、しょんぼり気分が続いたので、気分を変えて昨日に触れたHTMLの文法について今日も書いてみます。

W3Cのサイトをうろうろしてたら、Getting started with HTMLっていうHTML入門を見つけました。けっこうわかりやすい内容なので良い感じです。私なんかがここで文法について触れなくてもぜんぜん大丈夫な感じです。というわけで今日はおしまい。

昔に作ったHTMLファイルを見ていると、DOCTYPEが無いファイルが多数あります。作成日付は1997年末から1998年初頭。おそらくHTML4.0が勧告された頃に作られたファイルだと思われます。HTML4.0がW3Cから勧告されたのは1997年12月で、HTML4.01が勧告されたのは1999年12月のことです。

2000年問題さえも知らない世代がHTML4.01strictでないとよろしくないとのたまうご時世ですが、strictを標榜するあなたたちは、HTML4.0すら世に出ない頃からHTMLを作らねばならなかった私たちのことを、いかほど理解できるのですかと小一時間問い詰めたい次第でありまス。

すみません。勧告が出るたびに更新しなかった製作者の怠慢です・・・。しょぼん。

さて、リニューアル作業にあたって、一番の苦労は、tableだのbrだのfontだのといったタグを削除することなんですね。その代わり新しいホームページ（というか、css）に対応させるのはとても簡単なことなので、いっそプレーンテキストにしてしまってから、あらためてマークアップした方が楽なような気がして、今までのホームページ更新作業って一体何だったの？って感じです。

めげずにボチボチとやっていきます。しょんぼり。

っていうか、昔の日記なんですけど、恥ずかしすぎるのでお蔵入りさせていただいてよろしいですか。いや、もうなんとも若さ溢れる文章だったりして今になって読み返すと「若さかむばーーーっく！！」って感じで、やっぱりしょんぼり。

とりあえず、まずは1998年1月の日記を晒しておきます。初心忘れるべからずってことで。

ううむ、文法のことを言われるとぼくも心許ない・・・

スペシャルゲストに、こんど〜さんをお迎えして、引用のテストを行っちゃいます。

引用については、『blockquote要素の中に出典を示すcite要素を包含すべきか』に関する議論リンク集が参考になります。っていうか、考えれば考えるほど訳がわからなくなります。

さて、文法は私も心許ないです・・・。しかしながら、HTMLの文法と申しましても、（論理的に作成されているという点において）そんなに難しいものではなくて、HTML 4.01 Specification (ja)を読めば、「ああ、実は単純明快なのね」と納得していただけること請け合いでございます。たぶん、おそらく・・・。

とはいえども、このような仕様書やDTDを読み解くのはマニアの方に任せておいて、私たちのようなエンドユーザーは仕様書に基づいてわかりやすく説明してあるガイドブックを読んで事が足るのではないかと思う次第でありまス。

じゃあ、どんなガイドブックを参考にすればよいかといいますと・・・。それが参考になるべき文献が世に見当たらないわけでして（よしんば存在したとしても、本屋さんで普通に見かけることが少ない）、ですから私みたいなテーブルレイアウトと不思議マークアップを施しておきながら6年間にわたってウェブで公開してしまうという事態を招くことになってしまうのです。

というわけで、せっかくの機会ですから、ホームページ製作の役に立ちそうなサイトを紹介してみることにします。

• はじめてのWebドキュメントづくり
• ごく簡単なHTMLの説明
• PC Tip

今回のリニューアルで、IE6.0とNetscape7.1とNetscapeCommunicator4.7を使って閲覧テストしたんですけど、なんていうかダメダメですよね。何がダメダメかというとIE6.0がダメダメなんです。

NC4.7は初めからダメダメなので期待する方が間違ってるんですけれど、IE6.0も数あるバグを早く直してくださいって感じです。まあ、多少ダメダメでもきちんとHTMLを記述しておけば、殺風景ながらも普通に読めちゃうので困らないんですけれど。

今回のリニューアルでは、ユーザーエージェントにこだわらないサイト作りっていうのをコンセプトにしてみました。今までなら、IEでもネスケでも寸分違わず表示できるようにってのを第一に考えちゃうところなんですけど、IEといってもMACとWindowsでは挙動が違うし、ケータイやPDAで閲覧する人も多いこの頃なので、もう見た目はどうでもいいかなぁって。見た目にこだわる方は閲覧者の方でなんとかしちゃってください。

よくいわれることに、古いバージョンのブラウザとの互換性を考えて云々ってのがありますけれど、そんなのいちいち考えてたらキリがないし、古いブラウザで動くかどうかわからないようなハイカラな技術、例えばJavaScriptやFlashなどは一切使わないことにしました。とりあえず、文字ばっかりにしてみたので、文字さえ表示できないブラウザ（？）の場合は、読み上げ機能や印刷機能を使ったりして工夫してみてください。

というわけで、ほとんど閲覧者に丸投げ状態です。