HTML 4.01 の button[type="submit"] と input[type="submit"] をアクティベートした際の挙動がブラウザごとに異なるようです。

テストケース

<form method="get">
  <fieldset>
    <legend>フォーム</legend>
    <input name="foo" type="text" value="1" />
    <input name="bar" type="submit" value="ButtonA" />
    <button name="baz" type="submit" value="2">ButtonB</button>
  </fieldset>
</form>

テスト方法

1. ButtonA を押す
2. ブラウザが送信したクエリを記録する
3. ButtonB を押す
4. ブラウザが送信したクエリを記録する
5. 以上を複数のブラウザで行う

テスト結果

• IE 6 と IE 7 は button 要素の value 属性値ではなく内容を送信する
• IE 6 は button 要素の内容をこのボタンがアクティベートされていない場合にも送信する

期待される結果

name = cdata [CI]

This attribute assigns the control name.

value = cdata [CS]

This attribute assigns the initial value to the button.

http://www.w3.org/TR/html401/interact/forms.html#h-17.5

仕様書を見る限り、button[type="button"] がアクティベートされたときは input[type="button"] がアクティベートされた時と同じく value 属性値が送信されるべきなようです。

考えられる対処

• パラメタ送信用途には button 要素を使わない
• IE を今すぐ窓から投げ捨てる

マイクロソフトのサイトで不備を発見したので、マイクロソフト カスタマーサービス&サポート | マイクロソフト オンライン コンシェルジェ サービスのご案内というページに行ってチャットでのユーザーサポートを受けてみました。

まず、「最初の質問/コメント」という欄に書き込んで送信するところから始まりました。

【XP SP3 対応の IE 7 インストーラーが見つかりづらく、さらに IE 6 からだとダウンロードできません。】

15:23:06 私

最初の質問/コメント: [Info] XP SP3 対応の IE 7 インストーラーが見つかりづらく、さらに IE 6 からだとダウン (←切れた)

15:23:12 システム

https://www.microsoft.com/ja/jp/default.aspx

15:23:17 システム

別のエージェントに転送しています。しばらくお待ちください...

15:23:22 システム

MS 田吾作 がセッションに参加しました！

15:23:22 システム

MS 田吾作 に接続しました

15:23:32 MS 田吾作

お待たせいたしました。 マイクロソフト オンライン コンシェルジェをご利用いただき、 ありがとうございます。 今回担当をさせていただきます　田吾作と申します。

15:23:32 MS 田吾作

恐れ入りますが、ご質問内容を伺う前に この接続が確立されているかどうかを確認させていただきたいと存じますので、 まずは、「はい」などの簡単なメッセージを送信していただけますでしょうか。

15:23:39 私

はい

15:23:58 MS 田吾作

ありがとうございます。 また対応中にセッションが切断されたり、 入力した文字が送信できないなどの問題が発生した場合は、 お手数をお掛けいたしますが、再度お問い合わせいただくか、 下記ページより該当する窓口にお問い合わせいただきますようお願いいたします。 【マイクロソフトお問い合わせ先一覧】 http://www.microsoft.com/japan/customer/information/phone.aspx

15:23:58 MS 田吾作

それでは、この度はどのような情報をお探しでしょうか？ 具体的にお聞かせください。

15:24:37 私

XP SP3 対応の IE 7 インストーラーが見つかりづらく、さらに IE 6 からだとダウンロードできません。

15:25:28 MS 田吾作

恐れ入ります、そう致しますと、本日はInternet Explorer 7のダウンロードをご希望ということになりますでしょうか？

15:26:05 私

別のブラウザ（Opera 9.62）を使って代わりにダウンロードしたのでインストールには成功しています

15:26:18 MS 田吾作

はい

15:26:47 私

私が代わりにインストーラーをダウンロードして、このたびアップグレードしたかった人に送信して渡す必要がありました

15:27:08 私

サイトの不備だと思うので、修正していただけると助かります

15:27:31 私

具体的にいうと

15:27:54 私

・http://www.microsoft.com/japan/windows/downloads/ie/getitnow.mspx の OS 選択リストに SP3 がない

15:28:38 MS 田吾作

かしこまりました。ご指摘ありがとうございます。 では本日は、弊社Webサイトの修正に関するご指摘ということでよろしいでしょうか？

15:28:39 私

・選択せず Go を押してみるとhttp://www.microsoft.com/downloads/details.aspx?FamilyId=9AE91EBE-3385-447C-8A30-081805B2F90B&displaylang=ja に飛ばされ、そこには 「このダウンロードは、Microsoft Windows XP Service Pack 2 とService Pack3で利用できます。 」とある

15:29:16 私

そうですね。チャットリストに色々ありましたがそれぞれの違いがよくわからなかったので総合っぽいここにしました

15:29:43 MS 田吾作

ご指摘ありがとうございます。 当窓口で確認させていただきましたところ、ご指摘の通りになっておりますため、社内関連部署へフィードバックさせていただきます。

15:30:00 私

お願いします

15:30:03 私

で、

15:30:39 私

そのたどり着いたページの「ダウンロード」を選択してリダイレクトされるファイル http://www.microsoft.com/downloads/info.aspx?na=90&p=&SrcDisplayLang=ja&SrcCategoryId=&SrcFamilyId=9ae91ebe-3385-447c-8a30-081805b2f90b&u=http%3a%2f%2fdownload.microsoft.com%2fdownload%2fd%2f4%2f8%2fd488b16c-877d-474d-912f-bb88e358055d%2fIE7-WindowsXP-x86-jpn.exe が、IE 6からだと 404

15:30:54 私

Opera だと 200。落とせました。

15:31:40 私

他人の環境の IE 6 なので詳しいバージョン等はわかりません。また、私の環境では試していません。

15:32:09 私

指摘は以上です。

15:33:34 MS 田吾作

詳細のお書き込み有難うございます。 本日戴きました情報につきましては、社内関連部署に申し伝えさせて戴きます。

15:33:59 私

はい。もうよろしいですかね。

15:34:47 MS 田吾作

はい、本日はご連絡いただきましてどうも有難うございました。 今後とも弊社製品ならびサービスのご愛顧のほど よろしくお願い申し上げます。

15:34:52 MS 田吾作

この度はマイクロソフト オンライン コンシェルジェをご利用いただきありがとうございました。 本日は担当 田吾作がご案内いたしました。

15:35:07 私

ありがとうございます。

15:35:22 MS 田吾作

尚、チャットコメント欄上部の 「退出 」 ボタンを押すことによりこのチャットを終了することができます。 この度は、ご利用有難うございました。それでは失礼いたします。

注: 「田吾作」は引用者による仮名です。

以上。雑感としては、「よくできているなぁ」という感じ。欲を言えば、対応後に直接の連絡を入れてくれるなどのアフターケアが欲しいです。「どこどこのページでお知らせします」でも良いので。

電話よりメールよりチャットの方が気軽にそして手早くフィードバックをもらえるので世のサポートチームはもっと活用すべきだと思います。

ところで、2008年11月04日に指摘したこの不備、8日経った本日時点ではまだ修正されていないようです。よって、今は IE 6 利用者に 7 へのアップグレードを勧めてもほとんどの人が単独では完遂できない状況です。流石です。

NHK特集特集 デジタルネイティブの『デジタルネイティブ度調査』をやってみました。

インターネットで知り合いになって、会ったことがある人が5人以上いる。

はい

数百人くらいですね。社員全員がそうです。ルームメイトもほとんどがそう。

朝起きると最初にするのは、メールをチェックすることだ

はい

厳密には、

1. IRC のキーワード反応チェック
   • Twitter (tig)
   • ユーザーサポート
   • 社内 Wiki・コードリポジトリの更新通知
2. メールチェック
3. フィードチェック

出かけたり、買い物をしたり、何か行動する場合は、まずネットで検索する。

はい

相場を調べたり、評判を調べたり、早く安く巧い経路を調べたり。

デジカメなどで撮影した写真は、写真共有サイトにアップロードしている。

はい

PHS からリアルタイムで Zooomr にアップロードしています。同時に自動で自分の Twitter タイムラインにも流れるようになっています。

ちょっと余談: 以前は Flickr を使っていましたが、無料での容量制限に達してしまったため最近になって乗り換えました。無料でどこまでできるかがウェブサービスでは重要だと思います。The Economics of Abundance の名のもとに、自分たちが提供できるものの質と量をより上げることで競合他社より高い価値を作りたいと考えています。逆に、運よく生まれた希少価値に寄りかかっている人や会社は技術者としても経営者としても尊敬できません。

ネットで買い物をするときに、クレジットカード番号を入力することにまったく抵抗がない。

はい

店にも依ります。Amazon や楽天のモラルや技術は信用して頻繁に利用しています。そうでない会社も多くあります。

音楽は、ネットで購入したり、入手することが当たり前

はい

ただし、例外もあります。最近、私が小学生時分より愛してやまない田村直美の新アルバム『Rockfield willow』が発売されることを知り、Amazon で即座に予約しました。しかし直後に近所でサインと握手付きのインストアライブが催されることを知り、店頭で買おうと思って予約を解除しました。

デジタルコンテンツは合法/違法に関わらずインターネットで広く流通する（させることができる/してしまう）ので、こうしてデジタル化できない「ライブでしか味わえない熱」や「アーティストとの対面機会」などを提供して価値を作るビジネスモデルにしなきゃ駄目ですよね。いたちごっこに勝者はいないのですから。

定期的にチェックするブログが、５つ以上ある。

はい

フィード数で計るのもおかしいですが、現在で 200 くらいのようです。同業者の平均と比べたら少ない方だと思います。もっとアンテナ高くしないとなぁと常々思っていますが、それ以外のコミュニケーションに時間を取られてこの数でも捌ききれていないんですよね。どうにかしたい。

ブログにコメントをつけたことがある。

はい

それを元に交流が深まった例がいくつもあります。中にはブログを最も自分が自分を出せる場所であると感じている人もいます。そうと知っているならばそれに乗るのが最良の手段――相手に見せられる最も分かりやすい真摯な姿勢でしょう。電話嫌いに電話を強要して仲直りできるわけがないってね。何の話か？ コミュニケーションチャンネル選びは大事だって話です。

自分のブログをもっていて、定期的に更新したり、トラックバックを張ったりしてる。

はい

ミニブログを除き、学生時代と比べて量が減っています。もしかしたら質も。ここは「社長ブログ」と銘打ってはいますが、所謂「戦略的」にはまだ使っていません。今後どうなるかは未定ですが、ブログはその行為自体が楽しくなかったら意味がないと思っています。

mixiやfacebookなどのSNSに複数参加している。

はい

SNS 的機能を擁したサービスを挙げるときりがないので割愛。はてなも SNS ですし。

SNSでは自らコミュニティを主宰している。

はい

ウィキペディアの編集をしたことがある。

はい

156（ｒｙ

インスタントメッセージで友人と日常的にチャットする。

はい

しない日はありません。社内のコミュニケーションも主に IRC です。もちろん、それ以外のメディアを使うべきところでは適宜使っていますが。

携帯電話は会話するよりも、メールすることのほうが圧倒的に多い。

はい

メールの差出人を自分のケータイと装って PC から送ることが一番多いです。だからケータイでのタイピング能力はそこまで育っていません。

面白い動画やサイトを、すぐに友人にメールなどで知らせることが楽しい。

はい

チャットに URL をぺたっと貼ってもとの作業に戻る、ってことを毎日何回かやっています。共有ブックマークにクリッピングすることも。

友人、知り合いに電話番号を教えるときは、携帯電話の赤外線通信で行う。

いいえ

俺の WX320K (通称『京ぽん2改』) にそんなナンパな機能はいるいらねぇんだよ！！

ネットでニュースをフォローしてるので紙の新聞は読まない

はい

資源の無駄ですし。ただ、たまの長距離移動で暇つぶしに英字新聞を買っては自分の読解能力が学生時分と比べ落ちていることに絶望して楽しむことはあります。

テレビはいったん、ハードディスクレコーダーに録画してから見るのが基本だ。

いいえ

テレビはネットで観ます。ただ、食事中にニュースを見てルームメイトとあーでもないこーでもないと議論（雑談）することはあります。

学校（小、中、高）では、パソコンの授業があった。

はい

中学校が県内有数の IT 先進校だったらしく、コンピューター室が見学のスーツに占拠されているところを何度か目にしました。

今の彼女（彼氏）はネットで知り合った

いいえ

ただ、ネットで知り合ったこともありますし、それを別段悪いとも思いません。自分の中で相手を信用する基準がはっきりとあり、それを遵守しているので、万が一会って失敗してもネットのせいではなく自分の判断ミスのせいだと考えます。そういった覚悟、ネットリテラシ、人を見る目、経験、判断力が十分でないうちはネットを中心に交友を深めるのは危険かもしれませんね。

最終結果 あなたのデジタルネイティブ度は 85％ でした。

楽しかったです。色々な意味で。

経緯・目的

1. はてなグループで社長ブログ（これ）を始める
2. 社長以外のメンバーもブログをぼちぼち書くようになる
3. d:id:antipop から「まとめてよ」と要望がある
4. なるほどはてなグループの「日記一覧」が吐くのはブログのフィードだけで、ブログそれぞれのエントリのフィードではないようだ。不便。
5. メンバーと相談して、キッススタッフブログをまとめたフィードを用意することにする
6. 作った
7. 公開←いまここ

ブログのフィードをまとめて綺麗に管理・公開する

1. まとめるフィードを決める
   • キッススタッフブログ (Xiss Staff Blog)
     • アリゾナではもう働きたくない社長の blog - キッススタッフブログ (Xiss Staff Blog)
     • キッススタッフブログ (Xiss Staff Blog)
     • Asanoの日記 - キッススタッフブログ (Xiss Staff Blog)
     • さかどん記録＠HG::Xiss出張所 - キッススタッフブログ (Xiss Staff Blog)
     • 以下、随時追加
   • キッス (Xiss) (Xiss)さんはTwitterを使っています
     • ミニ「ブログ」という位置づけなので。
2. Yahoo Pipes でまとめフィードを作る
   • 複数のフィードやデータを一本のパイプとしてまとめられるサービス。(参考していない参考: ケーススタディで学ぶYahoo! Pipes入門)
   • Opera 9.51 でエディタ UI を開くと Your browser is not supported by the Pipes' editor. We recommend using Firefox, IE7 or Safari. Press 'OK' to load the editor anyway, or 'Cancel' to go back (recommended)* と言われましたが、私が必要な作業は何も問題なく終えられました。まぁいつものこと。
3. FeedBurner に手順 2 で Yahoo Pipes が出力したフィードを登録する
   • Yahoo Pipes の提供する URL は長いく汚い: http://pipes.yahoo.com/pipes/pipe.run?_id=kqSTbKNa3RGKjGHLIGsPpw&_render=rss
   • FeedBurner の提供する URL は短く綺麗: http://feeds.feedburner.jp/xiss-staff-blog
   • FeedBurner を噛ませるとアクセス解析とか宣伝とか勝手に色々してくれる

成果・まとめ

• 完成形: Xiss Staff Blogs

よろしければ各種フィードリーダーで購読していってくださいませ。

キッス (Xiss) (Xiss)さんはTwitterを使っています もヨロシク頼 (よろ) んだぜ。中の人などいない。

目的・経緯

embed 要素は XHTML 1.0/1.1 では定義されておらず、画像以外のオブジェクト埋め込みには object 要素だけで行います。しかし object 要素は以前からブラウザごとの実装に差異が多く、使いどころが難しくて結局 DTD を HTML 4.01 にして embed タグを書かざるを得ないということがままありました。

ここでは、それを解決するために色々書き方を変えては異なる環境でテストし、メジャーな環境すべてで表示され、且つ Valid な (正当な) XHTML になる記述を模索してみました。

表示されることを確認したブラウザ

• Opera 9.51 (Build 10081)
• Firefox 3.0 (Mozilla/5.0 (Windows; U; Windows NT 5.1; ja; rv:1.9) Gecko/2008052906 Firefox/3.0)
• Safari 3.1.2 (5525.20.1)
• Internet Explorer 7 (7.0.5730.11)
• Internet Explorer 6 (6.0.2900.2180.xpsp_sp2_gdr.070227-2254)

他の環境での結果報告もいただけると嬉しいです。

• thanks to d:id:tomoya for Safari 3.1.2

成功例

最小構成

<object data="http://example.com/something.swf"
        type="application/x-shockwave-flash"
        width="400" height="300">
  <param name="movie" value="http://example.com/something.swf" />
</object>

CSS 使用（推奨？）

width と height の指定はそれぞれ以下のように CSS で代用することもできます。（どちらであるべきかはまた別のお話）

object#some-movie
{
  width: 400px; /* 単位指定しないと Opera 9.51 で駄目 */
  height: 300px;
}

<object data="http://example.com/something.swf"
        type="application/x-shockwave-flash"
        id="some-movie">
  <param name="movie" value="http://example.com/something.swf" />
</object>

代替内容あり（推奨）

今回調査した環境以外への対策として、例えば以下のように代替内容も用意しておきましょう。

<object data="http://example.com/something.swf"
        type="application/x-shockwave-flash"
        width="400" height="300">
  <param name="movie" value="http://example.com/something.swf" />
  <a href="http://example.com/something.swf">Some Movie</a>
</object>

失敗例

失敗例 (movie 変数指定なし)

name="movie" のパラメタ指定がないと IE 6 と IE 7 で読み込みが終了しませんでした。神崎さん曰く、ActiveX が原因の様。

<object data="http://example.com/something.swf"
        type="application/x-shockwave-flash"
        width="400" height="300">
</object>

失敗例 (data 属性なし)

param で指定したことで冗長になったことで data 属性を試しに削ってみたところ、Firefox 3、IE 7、IE 6 で表示されませんでした。（それはそれで正しい動作という気もしますが）

<object
        type="application/x-shockwave-flash"
        width="400" height="300">
  <param name="movie" value="http://example.com/something.swf" />
</object>

失敗例 (width と height の指定なし)

HTML や CSS による width・height 幅の指定がないと Opera 9.51、Firefox 3、Safari 3.1.2、IE 7、IE 6 で表示がおかしくなりました。img 要素のようにはいかないのですね。

<object data="http://example.com/something.swf"
        type="application/x-shockwave-flash"
        >
  <param name="movie" value="http://example.com/something.swf" />
</object>

失敗例 (classid 属性あり)

以下のように classid 属性を指定すると Firefox 3 で表示されませんでした。

<object data="http://example.com/something.swf"
        classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
        type="application/x-shockwave-flash"
        width="400" height="300">
  <param name="movie" value="http://example.com/something.swf" />
</object>

これには嵌まりました。有効活用されるべき HTML 記述を削るのではなく、問題となるブラウザデフォルトの CSS ルールを消して対処すべきかもしれません。ただ今回は HTML コード主体の話なので、任意属性ということもあり、最小構成からは削りました。

失敗例 (type 属性なし)

classid と type どちらの属性も無いと、IE 7、IE 6 で Windows Media Player らしき UI が埋め込まれ、ActiveX 許可の確認ポップアップが出て、しかし OK しても再生されないという状態に。

<object data="http://example.com/something.swf"

        width="400" height="300">
  <param name="movie" value="http://example.com/something.swf" />
</object>

総評・雑感

デスクトップ環境のメジャーブラウザであれば割と自信を持って embed を消し去れる時代が来た模様。よきかな。

• 元ねた: ゆの in language
• 経緯: Re: ゆの in XSLT - アリゾナではもう働きたくない社長の blog - キッススタッフブログ (Xiss Staff Blog)

コード

tement

処理前

このスタイルシートをデフォルトスタイルシートを適用させないブラウザ (例えば Opera) で開くと「1」のテキストノードだけが実体参照も展開され表示されます:

X / _ / X < 来週も見てくださいね!

要素名とするのも XPath 式とするのも先にやられたので苦肉の策として、ね。。いや、でもこれは実に「XML らしい」と思うんだ!

処理後

処理系に Saxon を使うなら、以下のようなコマンドを実行します:

java -jar saxon -s:yuno-in-xslt20.xsl -xsl:yuno-in-xslt20.xsl

結果 ('file:/C://hoge/x365.txt'):

ひだまりスケッチ×365 来週も見てくださいね![EOF]

ポイント

• XML らしく（コード中にそのままリテラルを書けるのは多くの他言語にない）
• XSLT の自称中級者的な使い方
  • 要素や属性だけでなく変数や関数にも同じように名前空間を適用できます。例: no title これによりスタイルシートをモジュール化でき、単独でなく複合的で複雑なシステム (CMS とか) も作成可能。
  • 外部からのパラメタ受け取り。デフォルト値も指定できる。
  • 第一引数を空 string にして document 関数でこのスタイルシート自身を取得できる。
• XSLT 2.0 らしく（1.0 じゃないからこそできることを紹介しておいた）
  • xsl:result-document 要素の追加により最終出力の多様化・明確化が可能に。
    • 夢の出力ファイル単独指定!
    • 夢の複数出力フォーマット定義!
  • xsl:function 要素の追加により独自関数の定義が可能に。
    • ただただ素晴らしい。
  • as 属性による型付けで返り値の明確化が可能に。xs:QName* や element()? などとすれば個数を指定できる。
    • ガチガチに書けるようになってコードの安定性が上がった。
  • xsl:analyze-string 要素および regex 系の XPath 2.0 関数により文字列処理能力が飛躍的に向上。
    • fn:translate(笑)
  • XPath 式内での条件分岐 (if-then-else)
    • キモイけど便利
  • xsl:sequence 要素によりシーケンスコンストラクタ返り値の明確化が可能に。
    • コードが読み易くなった。
  • XSLT 1.0 における「結果ツリーフラグメント (Result Tree Fragment)」すらも別の内容生成にかけられるようになった。
    • 激しく融通が利くようになった。