hxxk.jp - 2009-04 アーカイブ

自分の身長・体重で検索してみたらことごとく悪役キャラが該当した件についてのまとめ

記事データ

投稿者

望月真琴

投稿日時

2009-04-30T22:13+09:00

タグ

概要

出来心で自分の身長・体重で検索してみたら、漫画の悪役キャラが多数該当しました。でもそのおかげで、 DEATH NOTE HOW TO READ で見落としていたコラムを発見できたので結果オーライ......なのかな ?

リプライ

リプライはまだありません。

記事本文

お風呂上がりで若干チート気味なので参考記録とします

昨日、体を使う系の仕事をしたり年甲斐もなく野球をやったりして、しかも昼食も少ししか食べず、入浴した直後に測定したら、成人以降の体重で最も軽い ( と思われる ) 58.1kg という値を記録しました。毎日の体組成測定は起床直後に行っているので、これは公式記録には残さずに参考記録にしますが。

hxxkの体重昨年の 5 月から意図的に体重を減らすようにして記録を付けているのですが、ここまで減るのはちょっと予想外だったので、同じくらいの体格の人って誰になるのかなあと思って 170cm 58kg で検索してみたら、ラグビー部やサッカー部の選手データがヒットしました。

架空のキャラクターで当てはめてみよう

しかしこれらのデータでは「まあ運動やっている人ならこれくらいの体格だよね」ということしか分かりません。検索結果の中で次に目に付いたのがキャラの身長・体重＠漫画＠ichigobbs というページでした。これなら具体的なイメージが得られる ! 既にリアル人間でない時点で正確さが失われていますがそれはさておき。

どれどれ私の数値に当てはまるキャラは......

......そ、そうだ、チートの値で探すからいけないんだ ! 最近の安定した値 (59kg) で探してみよう !

志々雄真実

......まあ、るろうに剣心の京都編は連載当時かなり熱中していたので良しとしましょう。

設定上の身長・体重って作画にどれくらい反映されているのか

ついでに、漫画とかアニメとかゲームのキャラクターってというはてな匿名ダイアリーの記事も見つかりました。

デスノートでさえ（さえって言い方は変かもしれないが）主人公は身長が180近くありながら50キロ前半という有り得なさ

Ｌにいたっては同じく180近くありながら50キロ

デスノートのキャラの体格といえば、以前友人と漫画談義をしていた時に「奈南川って初登場時 (page.37) は細かったのに、三堂邸を訪れた時 (page.50) は肩幅が広くなってない ? 何あのたくましい奈南川」という意見が出ていたのを思い出します。デスノートの作画担当の小畑健氏といえば、画力の高さがしばしば挙げられますが、設定上の体格が作画上の体格に反映されることってあるんでしょうかね。

きっと身長や体重などの細かい設定は後付けなんだろうなあ......と思っていたら、 DEATH NOTE HOW TO READ の 136 ページに「小畑健流人物キャラクターの作り方」という DEATH COLUMN があり、

キャラクター設定表の類は一切作っていません。描き留めておくというのが、性格的にできないみたいなんです（笑）。だから新しいキャラクターを作るときは、いきなり描いてしまいます。頭の中でアイディアを練るというより、インスピレーションでこんな感じかなと作るので、キャラクターの絵が安定しないのはこの為かもしれません（笑）。基本的に、前に描いた自分の絵を後で見直してもあまり良く思えないんです。

と、設定が後付けであることや奈南川マッチョ化の理由が書かれてありました。 DEATH NOTE HOW TO READ は隅々まで目を通していたわけではなかったので、今回この記述を発見できたので、珍しく Web じゃない内容をダラダラと記事にして良かったなあと思っています。

ちなみにデスノートキャラで最も近い体格の設定のキャラを探してみたら、火口が 169cm/59kg で該当しました。 ......とことん悪役キャラが該当しますね。

この度の連休中の上京では初めて会う方、また面識のある方でも体重減少後に会うのは初めて、という方がほとんどなので、上記のようなキャラクターを思い浮かべていただく......と悲しみます。

リプライ

リプライはまだ送られていないか、管理者の承認待ち状態です。この記事に対するご意見やご質問、ご感想などありましたら個別記事ページの送信フォームからお送り下さい。

以前作った DOCTYPE スイッチの一覧表に「ほぼ標準準拠モード」を反映させたい

記事データ

投稿者

望月真琴

投稿日時

2009-04-29T01:24+09:00

タグ

概要

昨年 DOCTYPE スイッチの一覧表を作成しましたが、「ほぼ標準準拠モード」と「完全な標準準拠モード」の区別を付けたいと思っているので、同じようなものを作成されている goya さんと会う際に尋ねてみようかなあという公開の質問メモです。

リプライ

リプライはまだありません。

記事本文

DOCTYPE スイッチの一覧表を追補する予定

sugamo.css って誰が言い出したんだろうで 2xup.org の goya さんの話題を出しましたが、 goya さんといえば、各ブラウザの DOCTYPE スイッチ対応表について尋ねようとも思っていたんでした。私自身も DOCTYPE スイッチの一覧表を作成しており、現時点で「後方互換モード」「標準準拠モード」という分け方をしているのですが、近々「ほぼ標準準拠モード」も含めた分類に追補しようと思っているので、せっかくお会いする機会があるなら話題に挙げたいなあと。

各ブラウザの DOCTYPE スイッチ対応表で、私が気になっている点は次の通りです。

IE 7 は「システム識別子を記述していない HTML 4.01 Transitional (<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">) 」以外では standards モードになっているが、 almost standards モードでは ?
IE 6 も同様に standards モードになっている部分は、 almost standards モードでは ?
Opera と Safari 3 は HTML 4.01 Transitional/Frameset や XHTML 1.0 Transitional/Frameset は standards モードになっているが、 almost standards モードでは ?
Safari 2 は「システム識別子を記述している HTML 4.01 Transitional (<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">) および HTML 4.01 Frameset 」は standards モードになっているが、 XHTML の Transitional/Frameset DTD では almost standards モードなのがふしぎ

そもそもほぼ標準準拠モードって何

ほぼ標準準拠モード ( あるいは準標準準拠モード ) - Almost Standards Mode については、 Gecko's "Almost Standards" Mode - MDC の解説が詳しいのですが、「ほぼ標準」モードは、ひとつの挙動を除けば、他は「標準」モードとまったく同じです。その例外とは、テーブルセル内の画像のレイアウトが Gecko の「互換」モードと同様に扱われ、Internet Explorer など他のブラウザとほとんど同じ表示になるという点だけが標準準拠モード - Standards Mode との違いです。

また、その Gecko's "Almost Standards" Mode - MDC 中にはそのモードになるトリガーが明記されているため、前項のような疑問を抱いたのです。ちなみに、 IE 8 以前の IE は、「 (IE の ) 標準準拠モード == (Gecko の ) ほぼ標準準拠モード」となっています。

ほぼ標準準拠モードのテストページ

MDC に書いてあることだけを根拠に goya さんの表を「ちがうよ ! 」と言っても検証できないので、この記事をご覧の方には実際にテストページで確認いただきたいと思います。なお、「ほぼ標準準拠モード」のトリガーはひとつだけなので検証しやすいのですが、後方互換モードと標準準拠モードの検証は、 goya さんの標準準拠・後方互換モード各々の CSS 解釈の違いをまとめたドキュメントを共有の方が複数のテストケースを含んでいるので良いと思います。

私が試した環境では、これら 2 つのテストケースで、全てのブラウザで空の写真が隙間無く敷き詰められました。 (<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd> のように、完全な標準準拠モードの場合は隙間が生じてレンダリングされるはずです。 )

ちなみに、ねこめしにっきの Mozilla : Full Standards Mode / Almost Standards Mode という記事で同様のテストケースが公開されています。

......ということを、ゴールデンウィークに尋ねようかな。 ( こうして書いておかないと、積もる話ばかりしてオフを終えてしまいそうなので。 )

また、私は Windows 環境しかありませんので、どなたか Safari 1 や Safari 2 、 MacIE 5 で上記 2 つのテストケースがほぼ標準モードになるかを確認して、教えていただけると嬉しいです。 (MacIE 5 の場合は、同様に <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd> で完全な標準準拠モード / ほぼ標準準拠モードのどちらになるか、も気になります。 )

リプライ

sugamo.css って誰が言い出したんだろう

記事データ

投稿者

望月真琴

投稿日時

2009-04-28T22:41+09:00

タグ

概要

sugamo.css という名前を最近よく耳にしますが、 2 年くらい前に一度その話題で盛り上がった記憶があるなあと思い、近年の上京時の動きを再整理して手がかりを探してみました。

リプライ

3 件のリプライがあります。

記事本文

起源を主張するわけではありませんが

Twitter 上でちょくちょくその名を目にしたり ( その割には twitter検索ではほとんどヒットしませんが ) 、 sugamo.css | ヨモツネットといった weblog 記事でイベントが取り上げられていたりという謎の存在 sugamo.css ですが、 Sugamo.cssってのをやってます - Archiva という記事でその秘密が解き明かされました。

ちなみにSugamo.cssという名前、耳が長い人は幾度か聞いているかもしれませんが、前年にさりげなく会ったコーダ飲み会でぽろっと出たネタ発言からだったりします。既に誰が言い出したかも判らない状態で、まあ語呂が良いから貰っちゃおうかと。 vant先生と相談して決めてみました。巣鴨かんけいないよ。半分くらいは。

......解き明かされていませんでした。

今から記憶の糸を辿ってみることにしますが、 2007 年頃に Web 上ではなくてリアル会話でその名を耳にした記憶があります。 3ping.org のうーたんか 2xup.org の goya さんとの会話で出てきたと思いますし、ある日コクーン新都心の辺りを上っていた時に、道路交通案内の「←巣鴨」の文字を見て「そういえば sugamo.css って言っていたなあ」と思い出した覚えがあるので、上京履歴の直近分から順に思い出してみましょう。

要は、 sugamo.css の語源解明にかこつけた思い出話というか与太話というか。ちょくちょく上京しているのに、どのタイミングで誰と会ったということを混同しやすくなっているので、いったんこの記事でまとめ直すなり導線を張っておくなりしようと思いまして。「カッペの上京話なんざいいんだよ ! 」って方は回想シーンをスキップしてください。

2008 年の上京

まず、昨年の上京をもわもわもわーんと思い出してみます。確か 2 回上京したはず。

2008 年 9 月に 11 連休をゲットしたため、上京。
- このときは埼玉県にも進入していますが、コクーン新都心の辺りは通っていません。
- うーたんには会ったけれど goya さんにはお会いしていません。
2008 年 5 月にも上京しているのですが、 2008 年 5 月 4 日の記録しか残していない !?
- いや、よく考えたら H.O.D.(HOP OR DIE) は開催しているから、 H.O.D.(HOP OR DIE) Vol.1 から Vol.9 までのまとめを見てみよう
  1. 2008 年 5 月 2 日は Delirium cafe Reserve
  2. 2008 年 5 月 3 日は大寝坊しつつも友人と合流して、品川でひとり 10,000 円くらいのディナーを食べた覚え。白穂乃香おいしかった。この時同席した友人をさいたま新都心駅に送っていったのですが、さいたまスーパーアリーナで東方神起のコンサートがあっていたようで、人がいっぱいいた記憶があります。この時はコクーン新都心は通っていませんし、通っていても帰りの下り方向なので「←巣鴨」という文字は見えないハズ
  3. 2008 年 5 月 4 日はカラオケやったり BELG AUBE Roppongi でビール飲んだり高円寺で二次会やったり。このとき vantguarde のこたせんせとお会いしているのですが、 sugamo.css っていう単語は会話中に出していないハズ
  4. 2008 年 5 月 5 日はジャパン・ビアフェスティバルに参戦した後、うーたんと INSTINCのおもちゃ箱の monbikke さんと焼肉。ど、どんな会話しましたっけ

この 2 回の上京ではキーマンになりそうな人とは会っていますが、もうひとつの記憶のトリガーであるコクーン新都心には近付いていません。

2007 年の上京

次に、可能性が高い 2007 年の上京を思い出してみます。この年は 4 回上京。

2007 年 11 月に上京し、カラオケやライブ参戦などを行っています。
1. 2007 年 11 月 10 日に到着、カラオケを行った後にうーたん、 lucky bag の e-luck さん、 Black Box|Xiss の哀さん、 pur*log の purprin さんと飲みました。
2. 2007 年 11 月 11 日は日中にカラオケ ( またかよ ) に行き、夕方からライブを見に行きました。
3. 2007 年 11 月 12 日は 12:45 の飛行機だったので、早々に東京を後にしたハズです
2007 年 7 月は Web 標準の日々のために上京し、イベント参加や会社訪問などを行っています。
1. 2007 年 7 月 14 日にゆうさんや小嶋新さんや FUMING さんとカラオケを行い、その後別口で大政小政で日本酒を嗜みました。
2. 2007 年 7 月 15 日は Web 標準の日々に参加した後、 pur*log の purprin さんと一緒に、 goya さんにもんじゃをご馳走になりました ! この借りをまだ返していないなあ......
3. 2007 年 7 月 16 日は Web 標準の日々に参加した後、 nothing but trouble の send さん、すめるまん Broken Diary の組長、 cafistar さんと一緒に三軒茶屋で飲みました。
4. 2007 年 7 月 17 日は会社訪問。
  1. サイボウズ・ラボ
  2. Six Apart
  3. エスカフラーチェLLC
    - 大日田さんと山田さんにインタビュー形式で話を伺ったのにレポートを書いていない......すみません
  4. LINKTHINK INC.
    - send さんに「一日ぶり ! 」と言ったり
    - はまちちゃんに手書きの名刺をもらったり
    - 櫛ヶ浜やぎさんに当時電話としては使えなかった iPhone を見せびらかされたり
2007 年 6 月はマイルによる特典航空券を用い、ジャパン・ビアフェスティバルに参戦。
1. 2007 年 6 月 16 日は、ビアフェスティバルに行った後に川崎のおさやん！でオフ
2. 2007 年 6 月 17 日は、ビアフェスティバルに行った後に新宿の三汁一菜でオフ
2007 年 5 月はライブや出版祝いなどで上京しました。
1. 2007 年 5 月 2 日はライブと武蔵
2. 2007 年 5 月 3 日は
  の 3 本
3. 2007 年 5 月 4 日と 5 日はプライベート ( 何 ) で、 8:33 の電車に乗って空港に向かっていた模様。この時にコクーン新都心に行ったかもしれないけど、このあたりはメールやその他の履歴が全く無いので思い出せず

ここまで振り返って決め手なし

......とまあ、なるべく余すことなく思い出してみましたが、明確に sugamo.css の言葉を初めて聞いた ! というイベントを思い出せませんでした。一番可能性が高いのは 2007 年 7 月 15 日の goya さんと purprin さんとのもんじゃのときですが、なんとなく「うーたんが言っていた気がする」というのが頭にあるんですよねえ。うーたんか goya さんのどちらかだとは思うんだけどなあ。

現在実施されている sugamo.css では CSS Nite的なセミナーっぽさは除外したい方針があり、フロントエンドの話をしよーよーっていう緩～い懇親会ということになっていますが、私が聞いた時は (CSS Nite のようにしっかりと会場を確保するようなものではないけど ) 小規模なセミナーというか勉強会をしたいねっていう形だったと思います。「私が上京する時にタイミングが合えば何かしゃべりますよ」と言った覚えが......うーんやっぱり goya さんに話したんだったかな ?

たとえばプログラマだとSibuya.pmみたいなイベントが一杯あるけど、コーダやデザイナが中心のフロントエンドな集まりってなかなかないよね、という話もあり、というあたりも、当時も「 Shibuya.js みたいに、 CSS やる人の相互での勉強会があるといいと思うんですよね」的な話があったと思います。うん、なんだか回想シーンの背景がもんじゃ屋っぽくなってきた。

ちなみに何故 sugamo.css なのかも若干思い出しました ! 「 Shibuya.pm や Shibuya.js 、その他の *.js は基本的に若者の街 (?) の冠が多いから、巣鴨くらいのマッタリしたところがいいんじゃないか」みたいな話があった気がします !

ここまで書いて、 goya さんでもうーたんでも無かったら私はとんだオオカミ少年ですよね......いや少年じゃないけど。お二人のうちどちらか、お心当たりがあればツッコミを入れていただけると助かります。

で、今年も上京するんです

そうそう、はてなグループの方に自分用の行動予定メモを書いていますが、今年のゴールデンウィークも上京します。この時に goya さんとうーたんと e-luck さんに会うので、面と向かって確認した方がいいかもしれませんね。 ......まあ、お酒も入るので忘れてしまったりあることないこと交えて話してしまったりするかもしれませんが。

実はヒントがいっぱい転がっていた !

この記事のブックマークコメントにて ZIGOROu 元ネタかどうか分かんないけど、うーたんとかpurprinさんとかcho45, amachang, miniturob 辺りで飲んだときに巣鴨.cssって言い出したのは僕です！との情報提供が ! ZIGOROu さんと kz さんなら、 2007 春のwu祭りあたりかなあ......と思ったら、

goyaさん、kyosukeさん、purprinさんに、僕がCSS Nite Shuffle後から抱えていた悩みを聞いてもらう

三人とも怒らないで、むしろ同じ考えでいてくれててうれしかった＞＜

巣鴨CSS開催決定！

と、 goya さんのいるタイミングのイベントで巣鴨 CSS と書いてある ! 最初から"巣鴨CSS" でぐぐれって話ですね......。

......ということはですよ、その後日に行われた Hop or Die! ～ホップ本サイン会～に miniturbo さんも goya さんもいらしていたので、その場でも巣鴨 CSS の話題が出ていた可能性ありますね、 goyaさん、最近飲み会ではお世話になっております＞＜巣鴨がんばりましょう! といったメッセージもありますし。もちろんこの場には著者側であるうーたんもいたわけですし。

うーん、私はオオカミ少年と言うより「酒の席での会話を覚えていないロクデナシ」ということが今回の sugamo.css の件で露呈しましたね。おのれ sugamo.css め...... ! ( 自分が悪いだけです )

Hop or Die! ～ホップ本サイン会～の席順
出入口
kz さん	katsuo さん	goya さん	A.Kawashima さん	木達一仁さん
小久保浩大郎さん	iwaim さん	うーたん	私	e-luck さん
カウンター

ちなみに席順はこんな感じでした。確かに kz さんとは少し離れた席だったのであまり多くは会話できなかったけど...... goya さんの参加レポートでも次は巣鴨だ！としっかりと書かれているし、やっぱり私がダメのダメダメなだけでしょうね......

ちなみに小久保浩大郎さんが Twitter で

なんか俺もsugamo.cssって言う名前を初めて聞いたのって数年前な気がするんだよなあ。やっぱり「Shibuya\.(js|pm)に対抗するにしても地味に巣鴨あたりでw」みたいな会話の流れで。それが初出なんじゃなくて誰かがどこかでそう言った、という話だったかも知れないけど。

と呟いていたので、やはり Hop or Die! ～ホップ本サイン会～上で話していた可能性が強くなってきました。

あとは 2007 春のwu祭りや Hop or Die! ～ホップ本サイン会～に参加したメンバーがこたせんせとリアルでその話題を交わしたか、あるいはヴァーチャル (ex.IRC) でその話題を交わしていれば「点」が「線」につながるのではないかと思います。そうなると ZIGIROu さんが言いだしっぺというかインフルエンサーということで、記事のタイトルの疑問は解決しますね !

なんだろう、疑問は解決したんだけど私のイメージは下降しまくっており、あんまりスッキリしません。これはゴールデンウィークに思いっきり酒を飲むしか...... !

リプライ

3 件のリプライが送られています。この記事に対するご意見やご質問、ご感想などありましたら個別記事ページの送信フォームからお送り下さい。

2009-05-05T06:16+09:00 - Sig.: なるほどー。ということは、kotarok先生あたりからvantさんに、そして僕らに伝わったってことになるのかも。

2009-06-14T22:50+09:00 - iwaim: そのベル・オーブ六本木の席でgoyaさんが「Sugamo.css」って単語を出していたのは確実です。

2009-10-24T18:16+09:00 - iwaim: そういや、そのときにgoyaさんが以前どこかで話題になってたようなことをいうてたので初出はそれよりは前か。いずれにせよgoyaさんがキーワード?

「リストの横並びで不思議な空白ができるアレ、をスマートに解決する」を読んでの自分用の再確認

記事データ

投稿者

望月真琴

投稿日時

2009-04-16T23:16+09:00

タグ

概要

ul 要素の直下に配置できる要素は何か、 DOM ツリーに空白や改行はどのように反映されるのか、開始タグや終了タグの省略について、の三本です。

リプライ

リプライはまだありません。

記事本文

そういえば仕様について色々と書いていた時期が僕にもありました

最近は本業が忙しかったり、サイクリングや筋トレなどの運動をするのが楽しかったりで Web に関する興味と割ける時間がめっきり減っているのですが、今日はリストの横並びで不思議な空白ができるアレ、をスマートに解決する - vantguarde - web:g で HTML や SGML における開始タグ・終了タグの省略が参考リソースとして取り上げられていたので、それっぽい話でも。

しかしアクセス解析のリンク元で web.g.hatena.ne.jp/vantguarde が上位に来ていると、どんな取り上げられ方をしているのか、開くまでちょっとどきどきですね。

あとこれから書くのはリストの横並びで不思議な空白ができるアレ、をスマートに解決する - vantguarde - web:g の内容についてではなくて、その記事への id:denchuinc のブックマークコメントについて、という名目の自分の知識の再確認行為です。ブックマークして ID コールしたりメモを残したりするにも、 100 文字じゃ収まらないかなあと思ったので。

ul 要素の直下は li 要素だけ

まず、 XHTMLのDTDだと ul 要素の直下は li 要素だけでPCDATAは存在できないんじゃありませんでしたっけ。という点について。そもそも vantguarde - web:g の kota さんは、当該記事のサンプル DOM ツリーでは <!DOCTYPE html> という DOCTYPE を用いており、かつ終了タグの省略といった話もしているので、 XHTML の DTD が云々と言ってもそれは関係ない話なのでは、というツッコミもできますが、そんないじわるよりも先に「あれ、こんなコメントがあるってことは、 HTML 4.01 だったら ul 要素の直下に #PCDATA を置けるようなことになっていたっけ」と思ったので調べてみました。

HTML 4.01 Transitional DTD

<!ELEMENT UL - - (LI)+                 -- unordered list -->

HTML 4.01 Strict DTD

<!ELEMENT UL - - (LI)+                 -- unordered list -->

XHTML 1.0 Transitional DTD

<!ELEMENT ul (li)+>

XHTML 1.0 Strict DTD

<!ELEMENT ul (li)+>

XHTML 1.1 DTD ( xhtml-list-1.mod )

<!-- ul: Unordered List (bullet styles) ................ -->

<!ENTITY % ul.element  "INCLUDE" >
<![%ul.element;[
<!ENTITY % ul.content  "( %li.qname; )+" >
<!ELEMENT %ul.qname;  %ul.content; >
<!-- end of ul.element -->]]>

もし HTML 4.01 Transitional DTD あたりで

<!ELEMENT UL - - (LI|#PCDATA)+                 -- unordered list -->

なんて定義になっていたらどうしようかと思いましたが、 HTML 4.01 でも XHTML 1.0/1.1 でも、 Transitional でも Strict でも ul 要素の直下に配置できるのはやっぱり li 要素だけでした。

改行や空白もテキストノードになる

さて HTML でも XHTML でも ul 要素の直下には li 要素しか配置できないということを確認したうえで。なんでそんなDOMツリーになってるんだろう？という部分ですが。これは「なんで」も何も、 ul 要素の直下には li 要素以外の要素は配置できませんが、 #text となるテキストはそこに記述できるから、としか言えないかなと思います。

<ul>
  <li><a href="foo">foo</a></li>
  <li><a href="bar">bar</a></li>
  <li><a href="baz">baz</a></li>
</ul>
<ul>
  <li><a href="foo">foo</a>
  <li><a href="bar">bar</a>
  <li><a href="baz">baz</a>
</ul>

先ほどのサンプルではこのようなソースが例示されていましたが、これを次のような形で考えてみましょう。

<ul>#xA
#x20#x20<li><a href="foo">foo</a></li>#xA
#x20#x20<li><a href="bar">bar</a></li>#xA
#x20#x20<li><a href="baz">baz</a></li>#xA
</ul>#xA
<ul>#xA
#x20#x20<li><a href="foo">foo</a>#xA
#x20#x20<li><a href="bar">bar</a>#xA
#x20#x20<li><a href="baz">baz</a>#xA
</ul>

#xA というのは制御文字の一種で改行を表し、 #x20 は空白を表します。こう書くと、リストの横並びで不思議な空白ができるアレ、をスマートに解決する - vantguarde - web:g で

<ul>
  <li><a href="foo">foo</a></li>←ここで要素終了|→ここからテキストノード
  ここまで←|こっから要素開始→<li>

や

<ul>
  <li><a href="foo">foo</a></li>|←ここからテキストノード
  ここまで←|こっから要素開始、なので前の要素終了→<li>

と示されている部分が少し分かりやすくなるのではと思います。 (#xA も #20 もテキストであり、テキストノードにあたるので。 )

例えば、改行や空白を取り除いた <ul><li><a href="foo">foo</a></li><li><a href="bar">bar</a></li><li><a href="baz">baz</a></li></ul> という書き方をしたものの DOM ツリーを見てみると、

UL
  LI
    A href="foo"
      #text: foo
  
  LI
    A href="bar"
      #text: bar
  
  LI
    A href="baz"
      #text: baz

のように、 li 要素と li 要素の間には #text は現れなくなります。リストの横並びで不思議な空白ができるアレ、をスマートに解決する - vantguarde - web:g ではリストをinlineで並べた時の余白｜CSS HappyLife という記事も紹介されているのですが、改行や空白を取り除いて一行で書く以外の方法でも同じような結果になります。

<ul>
<li><a href="foo">foo</a></li><!--
--><li><a href="bar">bar</a></li><!--
--><li><a href="baz">baz</a></li>
</ul>

のように、 li 要素の改行にコメントを挟む書き方をしたものの DOM ツリーを見てみると、

UL
  #text:
  LI
    A href="foo"
      #text: foo
  
  #comment:
  LI
    A href="bar"
      #text: bar
  
  #comment:
  LI
    A href="baz"
      #text: baz
  
  #text:

という結果になりますし、

<ul>
<li><a href="foo">foo</a></li
><li><a href="bar">bar</a></li
><li><a href="baz">baz</a></li>
</ul>

のように、 li 要素の終了タグの > の前で改行する書き方をしたものの DOM ツリーを見てみると、

UL
  #text:
  LI
    A href="foo"
      #text: foo
  
  LI
    A href="bar"
      #text: bar
  
  LI
    A href="baz"
      #text: baz
  
  #text:

という結果になります。終了タグの > の前で改行する書き方ってオーケーなの ? と思われる方もいらっしゃるかもしれませんが、終了タグは [42] ETag ::= '</' Name S? '>' のように、 > の直前に (#x20 | #x9 | #xD | #xA) といった空白文字類を配置できるように定義されています。 ( 今回の例では含めていませんが、 #x9 や #xD を記述してももちろん #text として DOM ツリー内に現れます。 )

まとめ

リストの横並びで不思議な空白ができるアレ、をスマートに解決する - vantguarde - web:g で紹介されている方法は、 (li 要素の終了タグを省略するという大ヒントがあるとは言え )XHTML を用いている場合には使えないということは明示されていません。

仕様を引っ張ってみたり DOM ツリーを確認してみたりしましたが、まとめとしては XHTML を用いている場合は、必然的にリストをinlineで並べた時の余白｜CSS HappyLife の方法を採用する、ということになります。 XHTML を採用する weblog サービスや CMS の台頭、はたまた XHTML ブーム (?) もあり「 XHTML では使えない方法じゃん ! 」と思われるかもしれませんが、それに対するカウンターがその次の記事のでも、XHTMLじゃない件について - vantguarde - web:g に書かれてあるので、これも合わせて読んでみると良いと思います。

それとせっかく HTML や SGML における開始タグ・終了タグの省略が取り上げられたので、終了タグの省略についての私見をここで述べておくと、はてなブックマーク - リストを横並びにした時の空白 - ciqlie における id:vantguarde のブックマークコメントで終了タグ省略すると可読性が結構上がる気がするというくだりに同感を抱きつつも、「省略条件を考えて書くよりも一律に終了タグを書くほうが学習コストが少なく、省略してはいけない場合に省略しちゃうというリスクを回避できる」といった程度の理由で、開始タグ・終了タグの省略が許されない XHTML(XML) の書き方の方が好きです。記述コストや可読性は犠牲になるかもしれませんが。

リプライ

TwitterIrcGateway で DM がいっぱいくる現象への対処あるいは TwitterIrcGateway の導入・設定方法

記事データ

投稿者

望月真琴

投稿日時

2009-04-11T23:58+09:00

タグ

概要

以前のバージョンの TwitterIrcGateway(TIG) を使用していたら、以前から受信していた direct_messages が、連発してあたかも新着メッセージのように表示されるようになったのでその対処方法をメモしました。

リプライ

1 件のリプライがあります。

記事本文

レベルアップしまくり

Twitter を IRC クライアントから操うためのゲートウェイとして、 TwitterIrcGateway を活用しています。ところが、最近になって以前から受信していた direct_messages が、連発してあたかも新着メッセージのように表示されるようになりました。私は direct_messages が届くとIRC クライアント上でドラクエのレベルアップ音を鳴らすようにしているので、この現象によりはぐれメタルやメタルキングを倒したどころではない勢いでレベルアップしています。

最近は本業とダイエットとビールにかまけて web のレベル上げを全然行っていないのに、レベルアップしたかのように扱われるのはおこがましいと思いましたので、 TwitterIrcGateway の作者である misuzilla.org の沢渡真雪さんに IRC 上で尋ねてみたところ、 2.0 系へのアップデートと dll の更新をすると良いとのことなので、その手順をメモがてら残しておきます。

アップデートと言っても、私はこれまでずっと 1.0 系 (?) を使用していたので、むしろ新規導入の手順として見ていただいても構わないと思います。

必要なファイルのダウンロード
解凍とインストール
起動および LimeChat でのサーバ設定例
どなたか良いフリーソフトを教えてください
トラックバック送信先

必要なファイルのダウンロード

まずは Preview 2.0.3385.1606 のリリースページから Preview 2.0.3385.1606 のパッケージをダウンロードします。
次に、 Preview 2.0.3386.22794 のリリースページから TwitterIrcGatewayCore.dll.20090409-2.0.3386.22794 の dll をダウンロードします。

解凍とインストール

TwitterIrcGateway-2.0.3385.1606.zip を解凍します ( その際に、以前のバージョンの TwitterIrcGateway のフォルダと別のフォルダに解凍するようにした方が良いでしょう ) 。
TwitterIrcGatewayCore.dll.20090409-2.0.3386.22794 を TwitterIrcGatewayCore.dll にリネームします。
TwitterIrcGateway-2.0.3385.1606.zip を解凍したフォルダ内に Bin フォルダがあるので、その中の TwitterIrcGatewayCore.dll を、先ほどリネームしたもので上書きします。

起動および LimeChat でのサーバ設定例

Bin フォルダ内の TwitterIrcGateway.exe を実行します。
LimeChatでのサーバ設定例を示します。サーバおよびチャンネル一覧のツリーエリアで補助クリックして「サーバを追加 (S) 」を選択するか、あるいは Ctrl+Q でサーバを追加する画面を呼び出します。 ( たしか画面上部に「メイン (M) 」や「サーバ (S) 」といったテキストメニューがあったと思うんですが......私の環境ではそれがありません。 )
「接続」タブの設定を自分の Twitter の環境に合わせます。
- 設定名 (T): Twitter や TIG や、あるいはそれ以外でも、自分が分かるような名前に適当に設定してください。
- ホスト名 (H): プルダウンメニューからの選択ではなく、直接 localhost と入力してください。
- ポート番号 (P): 16668 に設定してください。
- サーバパスワードを使う (E): 初期状態ではチェックが入っているはずなので、そのままチェックを入れた状態にしてください。
- パスワード (W): Twitter のログインパスワードを入力してください。
- ニックネーム (N): Twitter のアカウント名を入力してください。
- ログイン名 (L): Twitter のアカウント名を入力してください。
- 名前 (R): Twitter のアカウントに用いているメールアドレスを入力してください。

どなたか良いフリーソフトを教えてください

ところで、こういうスクリーンショットを取るときは、アラートみたいな固定サイズのものや、どうしても横幅が必要なもの以外は基本的に 800*600 ピクセルに合わせたいと思っています。

Firefox の画面であれば Web Developer の機能で設定することができますが、今回のような Windows のフォルダウィンドウや LimeChat のウィンドウは、

Firefox のウィンドウを Web Developer の機能で 800*600 サイズに設定
そのウィンドウに合わせて、手動リサイズで 800*600 のサイズに設定

という、ガッツで手作業なリサイズツール ( それツールじゃない ) を用いています。 Firefox における Web Developer のようなリサイズツールで、使い勝手の良いものをご存知でしたらどなたか教えてください !

ウィンドウリサイズフリーソフトで検索してみると、 WinSplit Revolution の紹介記事やウインドウ移動君の紹介記事がヒットするので、まずはそれを試してみようかと思っています。

トラックバック送信先

Preview 2.0.3385.1606 - TwitterIrcGateway Update - TwitterIrcGateway - はてなグループ: TwitterIrcGateway の 2.0 系の導入方法を、スクリーンショットを交えて公開しました。
Preview 2.0.3386.22794 - TwitterIrcGateway Update - TwitterIrcGateway - はてなグループ: TwitterIrcGateway の dll の上書き方法を、スクリーンショットを交えて公開しました。

リプライ

1 件のリプライが送られています。この記事に対するご意見やご質問、ご感想などありましたら個別記事ページの送信フォームからお送り下さい。

2009-04-12T16:35+09:00 - 4n5: 『Sizer』（http://www.brianapps.net/sizer.html）はファイルサイズが20KB以下と極ミニマムです。『Pito!』（http://www.vector.co.jp/vpack/browse/pickup/pw5/pw005718.html）はリサイズ中のウィンドウサイズが表示されるのでガッツを使う際に便利です。どっちも常時起動型です。まだまだVectorには他（http://www.vector.co.jp/vpack/filearea/win/util/desktop/resize/）にもあります。

2009-04 アーカイブ

自分の身長・体重で検索してみたらことごとく悪役キャラが該当した件についてのまとめ

記事データ

記事本文

お風呂上がりで若干チート気味なので参考記録とします

架空のキャラクターで当てはめてみよう

設定上の身長・体重って作画にどれくらい反映されているのか

リプライ

以前作った DOCTYPE スイッチの一覧表に「ほぼ標準準拠モード」を反映させたい

記事データ

記事本文

DOCTYPE スイッチの一覧表を追補する予定

そもそもほぼ標準準拠モードって何

ほぼ標準準拠モードのテストページ

リプライ

sugamo.css って誰が言い出したんだろう

記事データ

記事本文

起源を主張するわけではありませんが

2008 年の上京

2007 年の上京

ここまで振り返って決め手なし

で、今年も上京するんです

実はヒントがいっぱい転がっていた !

リプライ

「リストの横並びで不思議な空白ができるアレ、をスマートに解決する」を読んでの自分用の再確認

記事データ

記事本文

そういえば仕様について色々と書いていた時期が僕にもありました

ul 要素の直下は li 要素だけ

改行や空白もテキストノードになる

まとめ

リプライ

TwitterIrcGateway で DM がいっぱいくる現象への対処あるいは TwitterIrcGateway の導入・設定方法

記事データ

記事本文

レベルアップしまくり

必要なファイルのダウンロード

解凍とインストール

起動および LimeChat でのサーバ設定例

どなたか良いフリーソフトを教えてください

トラックバック送信先

リプライ

補足情報

weblog 内を検索する

関連リソース

hxxk.jp ドメイン内

hxxk.jp ドメイン外

著作、講演、制作実績など