Feb, 2008 - 冬言響

(無題)

無駄に代替スタイルシートとか書いてみる。こうやってある日突然おもむろにスタイル関連とかまっさらにした後ゼロから書き直したり切り替え機能付け直してみたり代替スタイルちまちま書き始めたりするのは毎度の事なんでまあ気にせんといてくださいな。

とりあえずセクションブロックのサイドにスペース大きめに取って h2 見出しをそっちに、ってのをやってみたかった。なんとなく。で、それをやるとサイドバー領域って言うか Profile やらをだらだら書き殴ってる部分をどこに置くかが問題で、一応横 800px ぐらいを基準に作ってるんで本文領域があんま狭くなるのも困るし、まあ別に代替スタイルだし display: none; でも構わんかなあとか考えてたらおもむろに「む! とんちづいた!!」というのが来て、画面の外に押し出すというのを思いついてみた。キタコレ! 良くねこれ? そうでもない? そうですか。タブっぽい画像をメイン領域の隅に置いてみるとか、ちょっと何か発展系をいずれ考えてみよう。

あとドロップキャップ。段落の最初の文字を倍角にして残りを回り込ませる、よくある視覚効果。これもなんとなくやってみたかったのでやってみた。最初のパラグラフの最初の文字だけ、ならば div.section p:first-child:first-letter で良いのだろうけど、hr で区切りを付けて違う話題に移った場合その最初のパラグラフにも同じ事やりたいので div.section h2 + p:first-letter, div.section hr + p:first-letter、あと順不同リストとかブロック引用とか画像だけのパラグラフとかで書き始めるってのも良くあってその場合もその後から始まる本文の最初のパラグラフに効果付けたいので、なんだかんだでセレクタだけで

div.section h2 + p:first-letter,
div.section p.image + p:first-letter,
div.section h2 + ul + p:first-letter,
div.section h2 + blockquote + p:first-letter,
div.section hr + p:first-letter,
div.section hr + ul + p:first-letter,
div.section hr + blockquote + p:first-letter

という事になってしまった。ううむ。まあ意図通りになってるぽいから良いか。Safari@Leopard、Firefox@Vista、IE7@Vista で確認。細かい部分の詰めはおいおいと。とかとか。

宮尾岳『アオバ自転車店[2]』買い。なんだかアワーズでも平行連載してるそうで。いよいよ単行本の発刊ペースが予測しづらくなってきたなあ。

[Amazon] アオバ自転車店[2]

(無題)

さらに無駄に代替スタイルを書いてみる。やってみたかったのでやってみた。後悔はしていない。やってみたかったのは丸角と、あとセクションブロックと同じ色にした h2 見出しをブロックの上にはみ出させること。10px ばかりブロックに埋まってるのだが小文字の p とか q とかベースラインより下まで伸びてるような文字の見分けが付かんかも知らん。まあ気にすんな。丸角で :before/:after 疑似要素使ってて h2 見出しの位置調整もそれが有効な事前提にしてるので IE 非対応。どうとでもやり方はあるかも知らんけど面倒だし、良いや。「Not for IE」て文法的に正しいのかどうかは知らんがニュアンスは伝わるだろうきっと。伝わって…下さい(花京院典明――死亡)。

あと切り替え機能で選択されてないスタイルは <link rel="alternate stylesheet" 以下略 /> で出力するようにしてみた。

「黒」「灰」だけじゃ地味なので次はなんか派手な色使ったスタイル書きたいニャア。

ベア速 DQ3の僧侶の日記があった 3
旅はまだまだ続く。

(無題)

中村光『聖☆おにいさん』。イエスとブッダが立川でアパートをシェアしてバカンスを過ごす話。確か『Danza』に入ってたチラシに載ってて「これは買わねバ」とか思っててでもいざ出る頃には忘れてて 2 週間近く経った本日ようやくお買い上げ、と。

なんかレビューの類見てるとだいたい「例を挙げるとこんなブッダ、あんなイエス」みたいにシーンを抜粋してたりするので、俺も適当にいくつか見繕ってみる。

徳の高い事を言うと後光が差すので夜間に外でヘタな事言うと目立つブッダ。
カナヅチを克服するべく気合いを入れた結果「十戒」のアレみたいにプールを割るイエス。
生まれた瞬間から自動的に動物たちに懐かれるので一度でいいから冷たくされてみたいブッダ。
喜びとかの感情が臨界点を超えると奇跡を起こすためミネラルウォーターをぶどう酒にしたり陶芸セットの粘土をパンに変えてしまうイエス。
遊園地の入場券売り場で「聖人男性 2 枚で」。

基本 2 人ともボケ・ツッコミ両方こなすので全編通してノンストップ。今年最初のアタリ漫画かも知らん。皆も読め。

[Amazon] 聖☆おにいさん[1]

(無題)

携帯電話でのアクセスに対しては文書型を XHTML Basic にしてサイドバー領域とかも端折るようにしてみた。まあ携帯電話でのアクセスなんて殆どが Yahoo! mobile からの検索結果ばかりなんだが。

とりあえず accesskey を数字に。「PREV」「NEXT」はそれぞれ「4」「6」がデファクトスタンダードだそうなのでそれで、「UP」は位置的に「2」、「TOP」はまあ「0」が妥当か、「BACK」はとりあえず余ったところから「1」、と、そんな具合にしてみた。PC でのアクセスの場合はこれまで通りアルファベットで「P」「N」「U」「T」「B」なのだけど、どーせ誰も使っちゃいねーだろうし数字に統一しといた方がいろいろ楽か? 主にコーディングが。

他もまあおいおいといじっていく予定。

(無題)

誰かが望んでいる訳でもないだろうに携帯電話対応進行中ー。

うっわ XHTML Basic って hr 使えないのかマジですか。とりあえず本文中の「<hr />」は「<p>----------</p>」に書き換えというかなり駄目な対処。まあおいおいと。

日記で「日」単位表示モード以外の場合は各セクションブロック内の本文を全部ではなく概要文のみ表示するようにしてみた。別に見出しだけ羅列しときゃ良いかなとか思ったけど、まあ一応。

object 要素は取っ払って中の代替テキストだけを表示するように。本来は UA 側が判断してやるべき処理な気がするんだが、YouTube 動画とか object で埋め込んでるページを表示させると、枠だけ確保してしかし肝心の中身は表示出来ないらしく真っ白、って具合になってるので。出来んのなら最初からやろうとするんじゃねー。

ちなみに IE に対しては元からやってた。embed? いやあ、それ XHTML1.1 じゃ使えないから。でも Amazon アソシエイトのリンクだけは iframe に変えて出力してたりする俺。Content-Type も HTTP_ACCEPT に application/xhtml+xml が含まれてればそれで出力してるけど無ければ text/html。だったらもう IE に対しては text/html で XHTML1.0 とかで iframe も embed も堂々と使う、のが良いのか? それはそれで面倒くせえなあ。まあ良いや。IE の事は今回はどうでも良い。

という訳で Amazon アソシエイト。モバイル用リンクで表示するようにしたのだけど、日記のログには ISBN というか ASIN しか書き込んでないので直接商品名とかは取得出来ない。仕方ないのでとりあえずアンカーテキストは「[Amazon]」という具合だったりするのだけど、この辺もいずれどうにかしよう。ビジョンはある。

いろいろあって結局商品名も直接ログに書き込むことに。過去ぶんはおいおい書き直していく。

UA の判別はこの辺とかを参考に、HTTP_USER_AGENT に携帯電話の UA ぽい文字列が無いか順に見てって最後まで残ったら PC と判断。IP アドレスとかの判別まではしてないので UA 偽装すれば PC からでも携帯電話モードで表示出来る。あとクエリに「UA=mobile」があった場合も強制的に携帯電話モード。自分テスト用。

『インパクト・ゼロ』とかいう DVD が本日入荷。「この衝撃無限大!」とかアオリが入ってるのだけどこの邦題に逆の意味でインパクト無限大なんですが。「グランド・ゼロ」とかそんなニュアンスのタイトル付けたかったんだろうけど、もうちっとどうにかならんかったのか、と。原題は『30,000 Leagues Under the Sea』。

まあホント良くある十把一絡げの B 級未公開作品なんだけど無駄にタイトルが印象に残ったので。内容は観てないし興味も無いです。

インパクト・ゼロ

(無題)

まだまだ続くぜ携帯電話対応ー。

見出しアンカー要らねえなあ。撤去撤去。

画像を代替テキストに置き換え、その画像へのリンクアンカーにする。alt 属性値が空の場合、丸ごと取っ払えば良いだけの筈なのだけど自分に甘いのでとりあえず「[画像]」としておいた。この辺は代替テキストの書式が一定でない部分も含めておいおいどうにかする。

お、スタイルシートが効くではないか。何でも WAP2.0 に対応した EzWeb や SoftBank の次世代機は可、とかなんとか。i-mode は駄目? 良く判らん。まあそんな凝ったことするつもりは無いけど。h1 見出しをセンタリングぐらいしても罰は当たらんだろ。あと少なくとも俺携帯電話であるところの G'sOne W42CA では何もしないと段落間とかに間が無くて読みづらいので

h1,
h2,
h3,
p,
ul,
ol,
dl,
table,
blockquote {
 margin-bottom: 1em;
 }

という具合で。

絵文字。こんなもの宇宙に存在しなくても良いと思うんだが、そーゆーのは PC での Web ブラウジングが中心の人間の視点であって、携帯電話文化圏に足を踏み入れるつもりなのならば無意味に毛嫌いせずにちょっとずつでも手を出してみようぜ、という訳で。差し当たって accesskey が設定されたリンクアンカーの頭に、数字を直接テキストで打つのではなく絵文字の数字で表示。accesskey というやつは携帯電話文化圏での方が普及してるのだけど、その場合だいたい絵文字数字で表示されてるのでそれに合わせて。

やり方はいろいろあるようなのだけど差し当たって一番手軽ぽいのは i-mode 用を Shift-JIS コードの数値文字参照で入力。

1	驪
2	麗
3	黎
4	力
5	曆
6	歷
7	轢
8	年
9	憐
0	戀

こんなカンジ。EzWeb 端末も i-mode 用絵文字を自前で変換して表示してくれる。SoftBank は知らない。PC とかだと化ける。まあ実害は無いから気にしない。おいおい考える。

リスト項目だからリストマーカー文字と絵文字数字が並んじゃってカッコ悪いなあ。list-style-type: none; やっても駄目ぽい。ううむ。

(無題)

携帯電話対応・エピソード 4・新たなる希望――。

おっと、単純に img 要素を alt 展開してリンクアンカーにしたら、元々その画像がアンカーだった場合は a 要素が二重になってしまう。んーと、面倒くせえな。まとめるとこんな具合か?

// img 要素をその画像へのリンクアンカーである代替テキストに置き換える。
$strBody = ereg_replace("<img src="([^"]+)" alt="([^"]+)" />", "<a href="\1">[\2]</a>", $strBody);
// 代替テキストが無い場合は「[画像]」とする。
$strBody = ereg_replace("<img src="([^"]+)" alt="" />", "<a href="\1">[画像]</a>", $strBody);
// アンカーが二重になってしまった場合は内側を削除。
$strBody = ereg_replace("<a ([^>]+)><a ([^>]+)>([^<]+)</a></a>", "<a \1>\3</a>", $strBody);

もちっとスマートにいかねえかなあ。正規表現メニメニムズカシネー。

日記以外の単車とか自転車とかのページにもこれまでと同様の処理をかけるようにしてみた。画像の代替テキスト展開と、Amazon アソシエイトをモバイル用にする、ぐらいか。そのために本文全体を直接表示するのではなく、一端変数に取り込んで処理かけてから echo するようにファイル一つひとつ手で直した。今後は他にも何かしらいじれそう。カタカナを半角にするとかしてみると良いか? どうなんだろう。← 一応やってみた(2008-02-13)。てかこの作業やってて気づいたけど、403.php が書きかけじゃん俺。無駄に凝ったこと書いてもしょうがないのだけど、この辺もまあおいおいと。

(無題)

自分用アクセスログ解析スクリプト書いてたら一日が終わってた。これまで Java Script で生成した img 要素から呼び出して動かすタイプの既製のスクリプト使ってたのだけど、おもむろに一念発起してみた。ページが呼び出されるたびに $_SERVER の使えそうな項目をログファイルにガツガツ書き込んでおいて、後から読み込んで項目ごとに分けて配列に読み込んであーしたりこーしたりする。

ふゆはレベルがあがった！
れんそうはいれつがつかえるようになった！
にじげんはいれつがつかえるようになった！

そんなトコ。そんなトコかよ。まあこれまで数字が添字の一次元配列しか使ったこと無かったもんで。使わんと憶わらんのだよなあ。この調子でどうにかクラスとかオブジェクトとかも判るようになりたいのだがそもそもどーゆー状況で使えば良いのかがまず判らんので勉強のしようがない。まあいろいろ書いてればそのうち使うべき状況が来るかな。

という訳で所謂ウェブブラウザだけでなく色々な UA の訪問が記録出来るようになった。携帯電話意外と来てるなあ、とかウワサには聞いてたけど百度とか有道とか来過ぎ、とか Firefox バリエーションあり過ぎ、とか。

掲示板にやたらとアクセスがあるのはやっぱ自動スパム書き込み機とかあるんだろうなあ。今時 UA が Phoenix てことも無いだろうし。$_SERVER["REQUEST_URI"] が「 ./bbs.php」だったりするのでそれっぽい URI を探して蓄積するようなロボットも居たりするんだろうか(少なくとも自分は自サイト内では仮想パスでしか書かないので、フツーにリンク辿って「./bbs.php」へのリクエストが来ることは無い。筈。)。コメント機能付けたから掲示板自体はもう閉じちゃっても良いのだけど、コメント機能の存在に気づかれる前に何か対処考えといた方が良いかしらん。

(無題)

おもむろにニコニコ動画のアカウントとか作っていろいろ眺めてたら一日終わってた。お気に入りは「ジョジョのあの人達をSIMS2で飼ってみた」シリーズ。

【ニコニコ動画】Made Inn Me
特に「参」で絵のモデルやってるのに動きまくるブチャラティが。

後は鷹乃さんの洗車とか。エラい久しぶりな気がする。つか実は先月末ぐらいに 6 ヶ月点検に行かなきゃってか法的には確か 12 ヶ月点検だけで良いんだけど一応行くつもりでいたのだけど使って良い現金が手元に無かったので。まあ次のクレジット支払額が確定した後ぐらいにはどうにか。

(無題)

携帯電話対応関連現時点での俺的まとめ。

文書型。古い機種だと Compact HTML だの MML だのいった独自言語を使ってたりするけれども、各キャリア現行機種であれば携帯端末のための共通技術使用であるところの WAP2.0 に概ね準拠しており、フツーの HTML や XHTML で通る。XHTML Basic 辺りが無難。
容量はなるべく小さく。新しい機種であれば 100KB 以内で OK とかだったりもするが、小さな画面で閲覧する事を考えれば一つのページにそんなに大量に情報ぶちこんでもしょうがない。5 ? 10KB ぐらい。
画像はワインポイント的な小さなもの以外は文書内に埋め込まずにリンクとかにしとく。既存の文書を携帯電話対応に変換する場合、img や object は代替テキストを展開しといた方が無難。
文字コードは Shift-JIS。
携帯電話 Web ブラウジング文化圏では accesskey がちゃんと普及している。ポインティングデバイスもスクロールバーも無いのでページ最上部や最下部のナビゲーションリンクまで延々と画面をスクロールとかやってられない。accesskey に使えるのは数字と「#」と「*」。テンキーを十字キーにみたてて連続する文書群の「前へ」に「4」、「次へ」に「6」を割り当てるのがデファクトスタンダードぽい。あとはトップページが「0」とか。
画像は JPEG が無難。i-mode は PNG が使えない。
WAP2.0 対応の SoftBank、EzWeb 機であれば CSS が使える。i-mode も一応対応を謳っているが style 属性での指定しか効かない。使えるといっても PC と比べて画面表示能力に限界があるのであまり凝ったことをしてもしょうがない。
絵文字は携帯電話の表示画面の限られたスペースで効率的・効果的に情報を伝えるための重要な要素。毛嫌いせずに前向きに。

(無題)

携帯電話から Google で検索して出てきた PC 用サイトに飛ぶと、トランスコーダー経由で変換出力される。携帯電話でのアクセスに対してはこっちでちゃんとそれ向けに出力するから要らん事せんで良いよ、という場合は head 内で <link rel="alternate" media="handheld" href="foo.html" /> という具合に明示してやる。foo.html はこの場合 handheld 用の代替ページで、同じ URI でイケる場合は自身の URI をそのまま入れてやる。PHP で出力してるなら $_SERVER["REQUEST_URI"] でおｋ。トランスコーダーを経由されず、元のページに直接アクセスされる。

同じ URI で大丈夫ならそもそも代替ページを明示する意味が無い訳で、その時点で本末転倒と言うかヘタしたら無限リダイレクトループに入ってしまう UA とかあったりせんかと心配になってみたりするのだけど、とりあえず tDiary なんかも同じような処理してるみたいだし、まあ大丈夫かな。何にしろ直接来て貰えんと検索キーワードとか取得出来んし。

ベア速 DQ3の僧侶の日記の続きの続きに続きがあった
第 4 弾、ぐらいだっけ? バラモス撃破。

from ザイーガ。Windows XP と 98 の音のみで作られた BGM。

(無題)

買うだけ買って観てない DVD が貯まってきてる。とりあえず『ディパーテッド』と『オーシャンズ 13』と『スキヤキ・ウェスタンジャンゴ』が未開封。なんかこう、未開封のまま時間が経てば経つほど意味の分からない快感みたいのがある。別に熟成とかせんと思うんだが。

そんな訳で本日入荷の『ローグ・アサシン』も買いはしたけど空けるのがいつになるのかは謎。

[Amazon] ローグ・アサシン

あと弐瓶勉『バイオメガ[4]』買い。でも何ページかパラパラめくったところ前の話を全く憶えてないことが判明したので 1 巻から読み返し中。

[Amazon] バイオメガ[4]

2008-02-22 読了。まあ自分の場合このヒトの漫画はだいたい話の筋があんま理解出来なくてその場の雰囲気だけを読んでる具合なんでアレなのだけど。結局誰が誰の敵なんだ? 相関図作りながら読み直すか。

で、後半から背景世界が大きく転変。『BLAME!』的弐瓶ワールド展開開始ー、みたいな。こっちの雰囲気のが正直取っつきやすいかも俺は。『BLAME!』も読み返そうかなあ、とか思ってたら 8 巻までしか持ってない事が判明。折を見て買い足す。ブックオフとかで。

(無題)

鷹乃さん 6 ヶ月点検ー。

チェーンがなんか部分的に偏って伸びたりしてて、スプロケットはまだ大丈夫なのだけどチェーンだけでもそろそろ交換を念頭に置いといた方が良いとのこと。あとブレーキフルードも量は大丈夫なのだけど入れ替えをそろそろ。まあこの 2 つはまとめて半年後の 12 ヶ月点検で。

フロントブレーキディスクのボルトが 1 本行方不明になってた。全然気付かんかった。こーゆー部分をちゃんと洗車の時とかにチェックせなあかんかったのだがなあ。まあちゃんと点検に出して良かったってことで一つ。

んで、タイヤもそろそろ交換時期。フロントはスリップサインが出掛けてて、リアは溝はまだ大丈夫ぽいけど結構ヒビが入ってるので、どうせなら両方一緒に交換すると良いかもよ、とのこと。工賃含めて 28,000 円ぐらいになるそうで、丁度今月は諸々の貯金やら諸雑費やらさっ引いて 30,000 円ほど余裕があるので注文依頼。来月はちょっと余裕が無さそうなので繰越金に出来れば良かったのだけど。ブレーキディスクのボルト共々届いたら連絡が来る予定。