Web.Dev | Google App Engine + Spreadsheets API

【レポート】【事例】 オムロンがDBを使わない情報サイトをGoogleAppsで構築 (2) イニシャルコストと運用費を約1/3まで削減 | 経営 | マイコミジャーナル

具体的な手法としては、まず製品情報がまとめられた既存のExcelデータを「Googleドキュメント」のスプレッドシートにアップロード。続いて「Googleサイト」でサイト構築を行い、Google App EngineとGoogle Spreadsheets APIを用いながらスプレッドシートの内容をサイトに反映させるというものだ。

Web.Dev | Amazon CloudFront streaming

Amazon CloudFront

Streaming Distributions
Amazon CloudFront lets you create “streaming distributions” to deliver your rich media content in a different way than other Amazon CloudFront distributions. Streaming distributions deliver content to end users in real time – the end-users watch the bytes as they are delivered. To do this, streaming distributions use the Real Time Messaging Protocol (RTMP) and several of its variants, instead of the HTTP protocol used by other Amazon CloudFront distributions. Amazon CloudFront uses Adobe’s Flash Media Server to power its streaming distributions.

バナーや TVCM を打ってる数日間だけ CloudFront 使って、それ以外は自前の FMS サーバで。いや、動画ストリーミングやるだけなら、ずっと CloudFront 使えば自前で FMS サーバを持つ必要もないってことか。この辺りはコストのバランスを測るのが難しそうだけど。

Web.Dev | Streaming API

Twitter API Wiki / Streaming API Documentation

さくっと Streaming API を使うクライアントプログラムを作って試してみた。
Twitter 側の Streaming API サーバ実装がどうなっているのか気になる。何本くらいの接続を受け入れられるようになっているのだろうか。

PubSubHubbub がもうちょっと広まって、Flash の RTMP 仕様が公開されれば、サーバ側からのプッシュによる「リアルタイム」が来年のバズワードになりそうな予感。

Web.Dev | CharlesのMapping機能

Webデバッグ用プロキシアプリ「Charles」 | エントリー | _level0.KAYAC

長いことCharlesは使ってるけど、HTTPのモニタリングと、帯域の制限を掛ける機能くらいしか使ってなかった。
こんな便利な機能があったなんて。

開発フェーズで本番サーバにファイルアップできないけど、本番同様の環境でテストしたいなんてときに便利ですよね。

Web.Dev | IE の挙動

今日学んだ IE と Flash について。

<object> タグには id 属性を付ける。付けないと、「'null' は Null またはオブジェクトではありません」と、よく分からないエラーが出る。

もう1つ。
<!-- saved from url=(0014)about:internet -->
HTML ファイルを修正してたら見つけたコメントタグ。何コレ？と思って、削除してコミットした。後からこのタグに意味があることを知った。
データ アクセス ページの表示が Windows XP Service Pack 2 が実行するコンピューターにブラウザーでプレビュー] モードでブロックされています。

Web.Dev | 透過PNG

この1ヶ月間、HTML、CSSをたくさん書いた。こんなに書いたのはいつ以来だろう。
ページの見た目自体はシンプルなんだけど透過PNGを多用していたので、最後の最後でIE 6対応にはまりまくった。

IE 6用のCSSを設けてfx-iepngfixのbehaviorで対処してたんだけど、通常のimg要素ではなくなってしまうので、マウスオーバー時の差し替えスクリプトもIE 6且つPNG用に用意しなければいけなかった。
他にも2つか3つか透過PNGを重ねると表示がおかしくなって、その上にテキストを表示しようとすると・・・　　さらにはCSSでimg要素をposition:absoluteにしてるのに、iepngfixによってposition:relativeにされちゃったりして、もう大変。結局、IE 6では一部透過GIFにして対応する必要もあった。

透過PNGをここまで使ったのは初めてだったけど、表現力は確かにグッと高まる。透過GIFと違って、どんな背景の場面でも使えるので画像パーツの汎用性も高まるし。
ただ、IE 6対応は苦しい。IE 6を捨ててもいい状況でなければ、レイヤー構造は可能な限り少なくした方がいい。

要するにIE 6は早くなくなってしまえ。

Web.Dev | CakePHP persistModel

persistModel :: Controller Attributes :: Controllers :: Developing with CakePHP :: The Manual :: 1.2 Collection :: The Cookbook

Warning (2): mysql_real_escape_string(): 13 is not a valid MySQL-Link resource [CORE\cake\libs\model\datasources\dbo\dbo_mysql.php, line 508]

Web.Dev | IE 8 互換表示リスト

互換表示リストを理解する - Windows Live

自分のサイトが互換表示リストに含まれているか確認する

現在の互換表示リストの内容を含んだ Excel スプレッドシートがダウンロード センターからダウンロードできます。スプレッドシートにはサイトのリストへの追加と削除の状況が記録されています。互換リストは定期的に更新されます。

互換表示リストをインストールして有効にしている場合は、Internet Explorer 8 のアドレス バーに以下を入力して XML 形式のリストを表示できます。
res://iecompat.dll/iecompatdata.xml

互換表示されているんじゃないかと怪しんだサイトは、このリストに含まれていた。

Web.Dev | Amazon EC2のWindows Server

Amazon Elastic Compute Cloud (Amazon EC2)

最近は新しい技術でワクワクするようなことはなかったんだけど、これは久々にグッときた。スゴイと思った。
技術自体は仮想化でしょ？ Xenでしょ？ と言われればそうなんだろうけど、こちらでハードウェアを用意する必要もなく、面倒な契約手続きも要らず、帯域の心配もなく、必要な時に、必要な時間だけ、必要な数の、必要なスペックのサーバを立てられるのは、これまでの常識を覆すサービスだ。

今企画中のあるサイトで、Windowsサーバじゃないと処理しにくい内容があって、最近はWindows Serverのレンタルサーバもあるからそれでもいいんだけど、EC2のWindows Serverを検証してみようと今日の午後はずっとEC2インスタンスをいじっていた。

EC2のWindows Server 2003はまだ英語版しかないので、まずは日本語を表示できるようにしなければならない。このページに書かれてある手順に従って、East Asian Languageパッケージを導入。
このLanguageパッケージを導入するには、Windows Server 2003 R2のインストールディスクのEBSスナップショットをインスタンスにattachする必要がある。attachするとEドライブに割り当てられ、その中にDisc1、Disc2というディレクトリがあった。

で、このEast Asian Languageパッケージをどうやってインストールするのか分からなくて困っていたのだけど、Control Panel > Regional and Language OptionsのLanguagesタブを開き、一番下の「Install files for East Asian languages」にチェックを入れてApplyボタンをクリック。すると、インストールが始まって、インストールディスクのいくつかのファイルを求めてくるので、EドライブのDisc1の中にあるファイルを選択すれば良い。

Amazonが提供しているWindows Server AMIでは、smallタイプでCドライブに約10GB、Dドライブに150GBのディスクが割り当てられている。

いくつかソフトをインストールして、このインスタンスのAMIを生成しようと、Bundling a Windows AMIを読みながらトライしてみた。AMI生成には30分位かかった。AMIを生成している間は、そのインスタンスは使えなくなっているようなので、バックアップとしてのAMI生成は無理かも。
また、そのAMIからインスタンスを起動するのにも30分位かかった。Windows Serverのインスタンス起動はLinuxと比べてかなり遅いので注意。

あと、Ec2Service Settingというプログラムが予めWindows Serverにインストールされているので、AMIを生成する前にはこれを設定しておく。特に気を付けなければいけないのは、「Initialize Drives」の項目。これにチェックが入っていると、生成したWindows Server AMIの起動時にDドライブが空っぽになってしまう。ディスクを初期化したくない場合はチェックを外しておくこと。
もう1つ、「Set Password」のチェックが外れていることも確認しておくこと。AMIを生成する前に自分でAdministratorのパスワードを設定しておけば、そのAMIから起動したインスタンスにはそのパスワードでログインできるようになる。
Sysprepの設定項目もあるんだけど、よく分からなかったのでデフォルトのままにしておいた。

今日のところはインストールしたソフトの設定とかは中途半端な状態で、とりあえずAMI生成とそのAMIインスタンスの起動までをテストしてみたが、うまくいった。このAMIがあれば、いくらでもサーバを増やせるということだ。負荷分散のやり方次第では強力だ。

今日のテストでかかった費用： 1ドル!!

これからドキュメントを読破する。

[追記]
Sysprepについて何となく分かった。説明できないけど。これは重要だった。インスタンスのタイムゾーンとか設定するものっぽい。

sysprep-x86.infの [GuiUnattended] セクションにあるTimezoneを東京を示す「235」に変更。

[RegionalSettings]を追加して、日本語設定を加えればいいんだろうけど、怖くてやめておいた。
僕が調べた限り、Windowsでの日本語ロケールを指定するには、次のような設定でいいはず。

[RegionalSettings]

    InputLocale = 0411:e0010411

    Language = 0411

    LanguageGroup = 7

    SystemLocale = 0411

    UserLocale = 0411

Web.Dev | CakePHP 同一接続内で複数SQLを実行

以前に書いたMySQLのユーザ変数を使ったランクの更新方法をCakePHPで実装しようとしたところ、ユーザ変数はDBへの接続毎に初期化されてしまうため、CakePHPで次のように２つのSQLを実行してもダメだった。

$this->Model->query("set @rank := 0;");
$this->Model->query("update ...");

いろいろとソースを読んでみると、DataSourceクラスのデストラクタで接続が切断されるようになっていたので、取得したDataSourceを使い回すしかないと思って、AppModelクラスに次のようなメソッドを加えて対応した。

class AppModel extends Model {

    function executeAll() {
        $queries = func_get_args();
        if ($queries) {
            $db =& ConnectionManager::getDataSource($this->useDbConfig);
            $rets = array();
            foreach ($queries as $query) {
                $rets[] = call_user_func_array(array(&$db, 'query'), $query);
            }
            return $rets[];
        }
    }

}

これで

$this->Model->executeAll("set @rank := 0;", "update ...");

Web.Dev | LiveCycle ES Developer Express

Adobe - LiveCycle ES Developer Express

cocomoに続く、Adobeのエンタープライズなクラウドサービスが登場。しかもAmazon EC2サーバのインスタンスとして。

昨年ある企画でLiveCycleの機能を使おうと提案したもののインストールとかが大変そうなので辛いなということがあったけど(結局使うには至らなかった)、これなら僕でも比較的簡単にLiveCycleを使えるかも。
料金体系とかまだちゃんと調べていないけど、キャンペーンなどの短期間の期間限定コンテンツの構築ならソフトを購入するより、こういった形で使う方が安く済むはず。

と思ったら、Adobe Enterprise Developer Programを購読している開発者向けだった。しかもまだ日本では提供されてない。

ただ、これでAdobeがうまく収益を上げられれば今後もFMSなどのサーバソフトがSaaS(PaaS？)化されてくるかも。FMSだけで言うと、WowzaはすでにAmazon EC2で提供している。

本格的にEC2を使用するためのリサーチを行う価値はありそうだ。

Web.Dev | CakePHP Auth＋Aclコンポーネント

何コレ。超難しい。複雑すぎ。ドキュメントやらいろんなサイトを見ながら、もう二日も取り組んでいるのに未だにうまくいかない。ちゃんと理解できてないせいだろうけど、もう挫折寸前。

明日中にうまくできなければ、自前で実装する。

Web.Dev | Akamai

アカマイ

むむぅ、Akamaiの挙動が分からない。
この間も誰かと話していたのだけど、「Akamai Hacks」的な本が欲しい。

Web.Dev | IE 7とメイリオとFilter

・【日々平穏 IE7：filterを使用するとフォントのアンチエイリアスが無効になる
・IE7 メイリオ でフォントがジャギるのをなんとかしてみる - 電脳戦士ハラキリ -SE道とは死ぬ事と見つけたり-

最近はCSSでメイリオフォントを指定することが多くなってきたのだけど、IE 7のこのバグに今日気付いた。

とりあえずjQueryでフェードを含むアニメーションを掛けてたのを止めて対処した。

Web.Dev | 携帯アクセスをAWStatsで解析

宅鯖 備忘録: AWStats をインストール

AWStats 6.6だとdocomoとauからのアクセスが表示されていなかった。調べてみたら、これらの携帯ブラウザからのアクセスはRobot扱いになっててログ解析の際に除外されていた。

危うく、Softbankユーザからしかアクセスがありませんでした!! と報告するところだった。

Web.Dev | auでデータダウンロード

ダウンロードCGI、Javaサンプル - データのダウンロード方法 [au,EZweb]

2. HTMLの場合（全データ共通）
<A HREF="device:data/dnld?url=http://www.inunote.com/download.cgi&name=$fname&size=$fsize&disposition=$devtype">
ダウンロード</A>

上の書き方の場合、データのダウンロード後に強制的にトップページなどに戻ってしまう場合があります。
<wml:anchor>
<wml:spawn href="device:data/dnld?url=http://www.inunote.com/download.cgi&name=$fname&size=$fsize&disposition=$devtype"/>
ダウンロード</wml:anchor>
と書くと、ダウンロード完了後、ダウンロード元のページに戻ります。

download.cgiじゃなくて<object>タグが使えれば多少簡単な気がするんだけど、古い機種も対象となるとそうはいかないのが歯がゆい。

Web.Dev | ケータイ

KDDI au: EZfactory > 技術情報

もう携帯サイト嫌だ。
機種毎に対応したフォーマットの着メロファイルをダウンロードさせるページを作るだけなのに、えらい大変だ。。。

AUは機種名とUserAgent(デバイスID)が全く一致してないし、ダウンロードも着メロファイルへの通常のリンクじゃダメだし、なんなんだ。

着メロのダウンロードは、エミュレータでのチェックでは自信が持てない。けど、動作チェック用の実機の種類も全然足りないし。
携帯サイト開発はやっぱり敷居が高いな。

Web.Dev | CakePHP 1.1から1.2

CakePHPを1.1から1.2へ上げるときの注意点 - blog.katsuma.tv

僕が知る限り国内でのCakePHP使用サイトとしてアクセス数ではトップクラスであろうと思われるサイトを昨年末に1.1ベースで構築した。当時は1.2もまだβだったので使うには早すぎたんだけど、RCということでそろそろ1.2にバージョンアップしたい。

上のページはまだ書きかけとあるので他にもまだいろいろあるのだろうけど、今書かれている内容だけ見ると移行は簡単そう。でも、いざ移行するとなるときっとスムーズにいかない気がする。

今後サイトへのかなりの機能追加が検討されてるので、移行するなら早めにやった方がいいことは確かな。1.2の新機能を使えばきれいに作れそうなものもあるし。
実装が始まってからだと面倒だし、今がそのタイミングなのか。

公式の1.1 to 1.2のmigration guideはないのかな？

Web.Dev | テストデータ生成

瞬時にテストデータを大量生成してくれる『Data Generator』 | IDEA*IDEA

毎回テストデータを作るのが面倒くさい。テストデータ生成ツールとしては、ここで紹介されているgeneratedata.comはかなりいい線をいっているのだが、日本語に対応していない点を除いてもあと一歩届かない。

結局アプリケーション特有のデータ構造などもあって、都度自前でデータ生成スクリプトを書いている。毎度Webアプリ開発の度に必要になるのものなので、何とか汎用化したツールを作りたいものなのだが。外部キーを必要とする子テーブルにまたがるテストデータ生成は汎用化できるのだろうか。
過去の開発での要件を洗い出して、汎用化に必要な機能をまとめる。

どうせならデバッグが楽しめるようなランダム文を生成できる機能が欲しいな。

Web.Dev | さくらインターネット　専用サーバの新プラン

SAKURA Internet // ニュース

弊社では、初期費用無料、月額料金7,800円の「専用サーバ」エントリープラン の新設、サーバにデュアルコア インテル(R) Xeon(R) プロセッサー搭載モデル、 OSにはUbuntu（ウブントゥ）を新たに採用し、2008年4月15日お申し込み受付を 開始いたします。

回線込みで7,800円のエントリープランも魅力的。CeleronだけどLAMP構成で、アクセスがそんなにないのなら全然OKでしょ。

そんな新規提供サービスに隠れて、既存プランがスペックアップしているとはいえ、初期費用が25,000円もアップしている点が残念だ。

Web.Dev | CakePHPで開発

CakePHP: the rapid development php framework. Home

年末にリリースしたサイト(フルリニューアル)で、WebフレームワークにCakePHPを採用した。最初クライアントから既存の環境と合わせるためにPHP4でという話があったので、マジかよ!?と思いつつPHP4にも対応していて、且つ依存ライブラリがないCakePHPを選択した。結局はPHP5で開発できることになったのだが。

CakePHPのビューにSmartyテンプレートを使いたかったのだけど、Smartyを使うとCakePHPのビューキャッシュが効かなくなったのでパフォーマンスを気にして断念。なのに、最後の最後でクライアントからAkamai使うにあたってキャッシュされて困るページはありますか？と訊かれ、初めてAkamai使うことを知らされる。こんなことならSmarty使えばよかった。
ビューでPHPの生のコードを使えるのは一長一短。テンプレートを取得する必要はないけど、いちいち <php... と書くのは面倒だし、可読性も悪い。ビューでSmartyを使う選択肢はCakePHPが標準でサポートしててもいいように思った。

After Railsなフレームワークらしく、CakePHPにはAjaxサポートが備わっており、Ajaxヘルパークラスを使うことで容易にAjaxを使った機能をページ内に組み込むことができる。
ところが、今回サイトで使用しているアクセス統計プログラムのJavaScriptのコードとAjaxヘルパーが生成するJavaScriptとの相性が悪く、特定の環境でどうしてもエラーになってしまい、CakePHPのAjax機能を利用することができなかった。Ajaxで実装していたのは大した機能ではなかったので、自前でコードを書いて対処することができた。せっかく本来楽に開発できるところで、時間をロスしてしまった。

このアクセス統計のJavaScriptは、prototype.jsにも悪影響を与えていて本当に腹が立った。こっちではどうしようもないだけに、アクセス統計のプログラムはどんな環境で使われてもいいように配慮して作って欲しいものだ。

CakePHP習得の上で僕にとって難しかったのはModelのクセを掴むこと。DAOなのかEntityなのか、ActiveRecordな機能を備えているけど、Railsと一番違うところであった。最初、他のテーブルと関連を持つクラスをfindAll()とかで取得したときに、何が返ってきてるのかよく分からなかった。やたら複雑な連想配列が返ってくるのだけど、何故クラスのオブジェクトを返してくれないのか実は今でも理解できていない。

ってな具合で諸々不満点はあるのだけれど、これがなければ短期間でサイトを構築することはできなかったと思うので感謝です。後でDonationしようと思います。日本のユーザフォーラムにもお世話になりました。

Web.Dev | mod_ktai

携帯サイト構築簡易化Apacheモジュール『mod_ktai』を開発：携帯サイト構築・株式会社ゆめみ

これはスゴイ。年度内に「一般公開」とあるけど、オープンソースで提供されるのか気になるところ。

やっぱり最後はApacheのモジュールに行き着くんだな。

Web.Dev | img lowsrc

画像の挿入とサイズ指定-img

LOWSRCの属性は、本画像を表示する前に仮の画像をさきに表示させる属性です。 SRCと組み合わせると2段階表示させることができます。
使い方としては、最初に画質を下げた容量の小さい画像を表示させてれば良いでしょう。

このLOWSRCは、Internet Explorer 4とNetscape Navigator 2.0のみサポートされています。

あとブラウザのステータスバーで文字をスクロールさせたり、リンクにマウスオーバーするとステータスバーに説明を出したりするサイトももう見かけなくなった。10年ちょっとを振り返ると、そんな流行廃りがあったことも分かる。今は何が流行ってるんだろう？
これから10年後には「むかしAJAXとか使ってたよねー」みたいな話をするのだろうか。

Web.Dev | CSS expressionプロパティ

expression() のまとめ

IE限定だけど、スタイルシートのプロパティで「expression」というJavaScriptを実行できるものがあることを初めて知った。大分強力に思えるけど、IE限定ってことを考えると最初からJavaScriptの中でスタイル設定をやった方がいいように思える。
パフォーマンスの点でも避けた方がいいみたい。

実際に使うことはなさそうだけど、そんな風に思ってた知識が後で役立つケースもあるのでMEMO。

Web.Dev | YouTube APIの刷新

YouTube Data API Overview

GDataベースのAPIに刷新された。これまでのAPIは来年8月末までは稼働が保証されている。

前に仕事で作ってたYouTubeライブラリを修正しなければ。まだ一年あるからと思っていると、あっという間にまた夏が来てしまうので今月中にやる。

Web.Dev | Loading XML

Flashのデータ読み込み処理中に、「Loading XML」とか表示しているサイトを時折見かける。ストリッパーズで作ってるサイトでもあるんだけど。。

よくよく考えてみると、データの形式なんてお客さん(サイト見る人)にとっては何の興味もないよね。XMLであろうが、プレーンテキストであろうが、AMFであろうがどうだっていい。
「XMLって何だ!?」って人にとっては「Loading XML」は何を言っているのかさっぱり分からない不親切なメッセージ。自分たちにとっては知ってて当たり前のものだから、ついこんな風に使っちゃったりするけど気をつけないと。

Web.Dev | YouTubeのFLV

[Saq.] YouTube の FLV を抜き出すのが簡単になっている件

どうやらすでに内部的にも Google とくっついているようで。これまでだとスクレイピングしないとわからなかった FLV のありかが、クライアントサイドだけでわかるようになっております。

http://www.youtube.com/watch?v=2yDSbFe62E4
こんな YouTube の URL があります。これの FLV のありかは、

http://cache.googlevideo.com/get_video?video_id=2yDSbFe62E4
↑ココです。カンターン。

が、YouTubeのAPIから返されるサムネイル画像URLの構成ルールが突然変わってて、あるサイトで困ったことになってたらしいことを今朝知ったばかりなので、ドキュメントにない使い方をする場合は定期的にその仕様が今でも継続されているかどうか確認しておかないと痛い目に合いそう。

Web.Dev | Fastladder

ITmedia News：「世界の技術者、刺激したい」——ライブドアRSSリーダー英語版公開

クライアントサイドのソースコードも難読化しておらず、同じものを作ることは難しくないという。「Fastladderと同じことをGoogleやYahoo！がやれば、体力がある分勝つだろうと思うし、個人的にはそれでもいいと思う。そうなった上で勝負しないと意味がない。できの悪い物を使っているとその程度のライフスタイル・使い方に縛られてしまうから」（ma.laさん）

BloglinesもGoogle Readerも使ってないからRSSリーダーとしての比較はできないけど、livedoor Readerは2006年に登場したWebアプリの中でベストだと個人的には思っている。去年の時点でも今更RSSリーダー？といった感じだったけど、度肝を抜かれた。

GMailでもGoogle Mapsでもそう。前にもちょっと触れたけど、コンテンツ自体は以前からあるありふれたものでもインターフェースが変われば新しいものになるんだということ。

Web.Dev | 日本語形態素解析Webサービス

Yahoo!デベロッパーネットワーク - テキスト解析 - 日本語形態素解析

「ウェブで『茶せん』」と見出しが付いているニュース記事があるけど、記事の中では「ヤフーが開発を進めてきた形態素解析エンジン『Web MA』」と書かれているのでヤフー独自のものなのかな？

こういうのが気軽に使えるのは便利だと思う。利用制限があるので実運用では難しいかも知れないけど、このWebサービスと自前のサーバでの解析処理とを切り替えられるようなラッパーとなるライブラリを作ってしまえば、辞書作成とか面倒な手間を省いて手軽に形態素解析使った開発が始められそう。

Web.Dev | trac 0.10.4

インタアクト株式会社さんからtrac-ja 0.10.4が公開されたので、ストリッパーズのtrac環境も0.10.3からバージョンアップ。

相変わらずチケット通知メールの文字コードはUTF-8なので、ISO-2022-JPに変換して送信するパッチを作成しました。以前のkuriyamaさんのコードを参考にしてます。

PYTHON/site-packages/trac/notification.py が対象ファイルです。パッチを当て、trac.ini の[notification]セクションに次のようにmime_encodingオプションを設定します。

[notification]
mime_encoding = iso-2022-jp

trac-jaと同じく自己責任で。
notification.py_0.10.4.patch

Web.Dev | Ext JS

Ext JS - JavaScript Library

トーサキから教えてもらったJavaScriptのUIライブラリ。まだ公開されて1ヶ月程度らしい。乱立気味のJavaScriptライブラリのうち、YUI、jQuery、Prototypeのいずれかをラップして使うよう作られている。

Documentation Centerのサンプルを見て驚いた。ある意味Flexキラーだなと。
APIドキュメントがJavaDoc形式でしっかり揃っているのも嬉しい。今度使ってみよう。

Web.Dev | Google Analytics for HTTPS

cyano: Google AnalyticsをHTTPS（SSL）なページで使う

MEMO。

Web.Dev | Django勉強会でのメモ

JavaScript:

• 無名関数でも名前を付けられて、何かするとその名前を取得できるらしい。

Python:

• 関数オブジェクト.func_code.co_argcount
関数オブジェクト.func_code.co_varnames
  コードオブジェクトって何気にすごいんじゃないか!?
• reStructuredText
• Django URLResolver.reverse

その他:

• Microformats
  FirefoxにOperatorツールバーを入れてみたけど、対応しているサイトにまだ遭遇してない。

追記
次のコードでJavaScriptの無名関数の名前が取れることは分かった。

var functionName = Functionオブジェクト.toString().match(/function *(\w*)/)[1];

Web.Dev | django

PythonのWebフレームワーク「django」を昨夜からいじり始めた。名前がカッコイイ。ジャンゴ・ラインハルトというギタリストの名前が由来らしいけど、名前だけ聞くと何故かスペイン、ポルトガル辺りの顎が割れてるダンディーなおっさんを想像してしまう。フィーゴ？

名前はさておき、チュートリアルを通してざっくりと触れてみて、adminサイトに感動した。今までプロジェクト毎に作ってきたCMS的なプログラムは、そもそも作る必要がなかったんじゃないかと思わせるくらい強力。こんなのがタダで使えちゃう時代なのかと驚愕した。
あと、正規表現での設定によって完全にURLをカスタマイズできる点は、Railsなんかと比べると一手間掛かるけど、昔から拡張子やナイスURLにこだわる僕としてはこの一手間はメリットになると感じた。
ジェネリックビューについては、チュートリアルで触れた範囲では、そんなに単純なケースって実際にあるかなあ？といった印象。

そんなこんなで夜が明けた。眠い。
今度はTurboGearsも使ってみよう。

Web.Dev | HTTPヘッダでのキャッシュ制御 2

昨日書いたエントリーの続き。

Windows版のIE 6とFirefox 1.5で動作検証を行っているが、「Cache-Control:private, max-age=60」をレスポンスヘッダに指定した場合、次のような挙動を取ることが分かった。

IE 6では、Cache-Controlの他にPragma、過去日時のExpiresがヘッダに含まれていても、Cache-Controlを優先し、Pragma、Expiresは無視する。

一方Firefox 1.5では、Pragma、Expiresの一方もしくは両方がヘッダに含まれていると、Cache-Controlのmax-ageは無視されブラウザキャッシュされなかった。Cache-Controlだけで他の２つのヘッダがなければIEと同様にキャッシュするが、max-ageの設定時間に関わらず同一URLへの３回目のアクセス時にリクエストを送ってしまう現象を確認できた。(1回目のレスポンスでキャッシュヘッダとレスポンスを受け取り、2回目はキャッシュを使いリクエストは送らない。)　謎だ。。。

こうなると、PragmaとExpiresは使わない方がいいのかも知れない。
そもそも、

Expiresの日時 - レスポンス時の日時 = max-ageの値 (単位は秒)

Web.Dev | HTTPヘッダでのキャッシュ制御

Cache-Control: private
Pragma: no-cache

Cache-Control: private, max-age=60

Web.Dev | Comet

Ajax/Comet - PukiWiki

WEB+DB PRESS Vol.34の記事で読んで初めて知った新しいバズワード「Comet」。記事によるとCometとは、「サーバプッシュ型アプリケーションの総称」。

クライアントとサーバでコネクション張りっぱなしという性質のものなので、サーバインフラがしっかりしてないとユーザ数が大きいサイトでの使用は難しそう。サーバサイドのライブラリやフレームワークが洗練されてくると、Flex Data ServiceのFMS的な機能は担えそうな気がする。

Web.Dev | XMLHttpRequests using an IFrame Proxy

XMLHttpRequests using an IFrame Proxy

via オレンジニュース

MEMO。

Web.Dev | HTTP Varyヘッダ

http の Vary レスポンスヘッダの意味と使用例

Varyヘッダの存在を初めて知った。

mod_deflateを使うと自動的にVaryヘッダはAccept-Encodingに設定される。

Web.Dev | PHPからmod_deflateを無効にする

PHP: apache_setenv - Manual

If you are using mod_gzip or mod_deflate to compress HTML output, you're not able to send partial file to the browser....
To disable mod_deflate in PHP (if needed), you can tell Apache with this :
apache_setenv('no-gzip', '1');

mod_deflateによるコンテンツの圧縮転送

Web.Dev | trac チケットの更新が記録されない (2)

Trac[web_ui] ERROR: Failure sending notification on creation of ticket #650: ISO-2022-JP encoding error: invalid character \uff5e
Traceback (most recent call last):
  File "/usr/lib/python2.3/site-packages/trac/ticket/web_ui.py", line 144, in _do_create
    tn.notify(ticket, newticket=True)
  File "/usr/lib/python2.3/site-packages/trac/Notify.py", line 214, in notify
    NotifyEmail.notify(self, ticket.id, subject)
  File "/usr/lib/python2.3/site-packages/trac/Notify.py", line 108, in notify
    Notify.notify(self, resid)
  File "/usr/lib/python2.3/site-packages/trac/Notify.py", line 47, in notify
    self.send(to)
  File "/usr/lib/python2.3/site-packages/trac/Notify.py", line 335, in send
    NotifyEmail.send(self, rcpt, hdrs)
  File "/usr/lib/python2.3/site-packages/trac/Notify.py", line 129, in send
    body = unicode(body, 'utf-8').encode('japanese.c.iso-2022-jp')
UnicodeError: ISO-2022-JP encoding error: invalid character \uff5e

Web.Dev | trac チケットの更新が記録されない

tracのチケットを更新(新規登録やコメント追加)した際にメールが飛ぶように設定しているのだけど、以前から時々このメールが送信されないことがあった。メールサーバが調子悪いのかなと思っていたのだけど、メールが送信されない場合はTimelineにもチケット更新履歴が記録されていないことが分かった。

メールが送信されないため重要なチケットコメントに気づかない影響は小さくないので、何とか解決したいのだけど、今のところ原因が分からない。とりあえずtracのログを出力するようにしておこう。

原因、対処法をご存じの方がいたら教えてくださいー。

Web.Dev | Subversion 外部定義とASクラス共有

外部定義

Javaでのアプリケーション開発の場合、ライブラリはビルドされたJarとしてMaven管理してしまえばよかったが、Flash(ActionScript)のASクラスライブラリをプロジェクト間で共有するにはどうすればいいだろうと前から考えていた。

あるSVNリポジトリにASクラスをまとめておき、そのASクラスリポジトリを個々のプロジェクトから外部定義として取り込む形にすれば良さそう。ASクラスを修正したい場合は、ASクラスリポジトリに対して修正を行えば、各プロジェクトに反映されるはず。
実験してみねば。

外部定義としてあるリポジトリが取り込まれるには、そのリポジトリに対してのリード権限があればいいのかな？
今、FlashOOPでもASクラスライブラリをまとめてホストしよう計画が進んでいるけど、こういう形で利用されるようになれば便利かも。

上のページのドキュメントを読んでもよく分からないのが、外部定義から取得したソースコードに手を加えてコミットしたら、それは大元のソースコードにまで変更が及ぶのか？

Web.Dev | tracで改行[[br]]を簡単に入力

function getKeyCode(e){
  return e.keyCode != 0 ? e.keyCode : e.charCode;
}
document.onkeypress = function(e) {
  if (navigator.userAgent.indexOf("Firefox") != -1) {
    if (e.target.tagName.toUpperCase() == 'TEXTAREA' && e.shiftKey && getKeyCode(e) == 13) {
      document.getElementById(e.target.id).value += '[[br]]';
    }
  }
}

function getKeyCode(e){
  return e.keyCode != 0 ? e.keyCode : e.charCode;
}
if (navigator.userAgent.indexOf("Firefox") != -1) {
  document.onkeypress = function(e) {
    if (e.target.tagName.toUpperCase() == 'TEXTAREA' && e.shiftKey && getKeyCode(e) == 13) {
    var insertTag = '[[br]]';
    var elem = document.getElementById(e.target.id);
    var inputText = elem.value;
    var pos = elem.selectionStart;
    var text1 = inputText.substr(0, pos);
    var text2 = inputText.substr(pos);
    elem.value = text1 + insertTag + text2;;
    pos += insertTag.length;
    elem.setSelectionRange(pos, pos);
    }
  }
}

Web.Dev | trac MailArchivePlugin

WeekbuildのHack倉庫 - Trac

すばらしい！！
まだ試していないが、このMailArchivePluginを導入すれば、tracでプロジェクトを横断的に管理できそうだ。あとはステキなカレンダーがあれば。

Web.Dev | HTTP-only Cookies

Mitigating Cross-site Scripting With HTTP-only Cookies (Internet Explorer - DHTML)

Resinのドキュメントを読んでいて、こんなクッキーの拡張があったことを初めて知った。JavaScriptでクッキー扱う用途がなければ、HttpOnlyフラグを付けておいた方が良さそう。

Mozilla系もサポートすればいいのに。

Web.Dev | Ajax.Requestでリクエストが発生しない

prototype.jsのAjax.Requestクラスのコンストラクタで、methodをgetにしていたらIEではリクエストが行われず、postに変えてみたらちゃんとリクエストがサーバに飛んだ。この症状に1時間くらいはまった。
うーむ、よく分からん。

Web.Dev | What Is Web 2.0

O'Reilly: What Is Web 2.0

via オレンジニュース

Tim O'reilly御大によるWeb 2.0の記事。後で読むべし。

Web.Dev | window.onload

ねこめしにっき（2003年7月上旬）

JavaScriptで、window.onloadイベントハンドラに複数の関数を登録したいのだけど、どうやらできないみたい。複数の関数をラップする関数を作って登録するしかなさそう。

Web.Dev | Google Map API

初めて使ってみた。使いやすいAPIで簡単に思い通りの地図を表示できた。早速仕事に使えそうと思って、適用を開始。
ただ、あのホスト名に依存するキーのせいで、ローカルや開発サーバ上での確認をどうすればいいか悩むところ。サーバ側で実行環境のホスト名に応じたキーを埋め込むようにするのが一般的な解なのか？

備忘録
・HTMLのエンコーディングはUTF-8を使うこと。Firefoxなら他の文字コードでもOKだが、IEではNG。
・キーが有効なのは、申請ディレクトリ内のみ。サブディレクトリはNG。
・XHTMLである必要はない。

Web.Dev | JavaScript Archive Network

JavaScript Archive Network - Home

CPANのJavaScript版だそうな。充実してくると便利に違いない。

Web.Dev | Google Maps API

Google Maps API Documentation

MEMO

Web.Dev | 全標準フォント一覧

全標準フォント一覧

MEMO。

Web.Dev | 悪いプロジェクトを見極める10コのポイント

悪いプロジェクトを見極める10コのポイント：：[7korobi8oki.com]

うんうん。

Web.Dev | AjaxPatterns

Main Page - AjaxPatterns

MEMO

Web.Dev | Selenium

Selenium

MEMO

Web.Dev | 変更と修正

mixiのプロフィール内容を編集しようとしたところ、内容の確認画面に二つのボタンが。

「変更」と「修正」。

「変更」をクリックすると内容が確定され、「修正」をクリックすると入力画面に戻る。まあ言いたいことは分かるんだけど、この言葉を同時に並べるのはナシでしょ、と思う。内容を変更する、内容を修正する、どちらの文も同じような意味として成り立つから。

この場合のラベリングは、「修正」を「キャンセル」や「戻る」にし、「変更」は「確定」や「OK」にしてしまった方がいいのではないだろうか。うーん、「キャンセル」もちょっと違うかな。ラベリングは難しいね。

Web.Dev | ブログ用XML-RPC API

MovableType で使える XML-RPC API
Movable Typeユーザー・マニュアル: プログラミングインターフェイス

今月中にXML-RPC APIのサーバ実装を作らなければならないのだけど、こんなに沢山メソッドがあるとは思ってなかった。MTがサポートしているblogger APIをサポートすればいいかな？

Web.Dev | Macromedia買収

Yahoo!ニュース - MYCOM PC WEB - AdobeがMacromediaを買収、PDFとFlash、スタンダードが1社に

ウヒョー!!　うちが買収しようと思ってたのに。

Web.Dev | RSS

先日リニューアルしたある企業サイトで、新着情報のRSSフィードを始めたみたけれども、アクセス統計を見る限りでは余りRSSへのアクセスがない。

やはり一般ユーザ(誰)へのRSS普及はまだ先なのか。IE 7がRSSリーダーを備えるという噂があるけど、これが実現されない限りRSS普及は難しいかも。

RSSでだけ存在するWeb(?)みたいなのも面白いかなあと考えているのだけど。

Web.Dev | Ajaxなのか!?

郵便番号を入れて「住所検索」とかそんなボタンを押すと、住所が途中まで勝手に入力されるフォームがあるけど、あれこそAjaxの出番なんじゃないかと、ふと思った。
あとはショッピングカートの「カートに入れる」ボタンなんかもAjaxでいいんじゃないかな。

でもどちらも非同期じゃなく同期呼び出しのように振る舞わせないと。そしてXMLは必要ないかも。つまり、「Ajax」と言うよりは「Ja」。ほとんどの場面で「Ajax」という句は的確じゃない気がする。まあこの辺は「IoC → DI」のときみたいに、ご意見番のハゲが何か言ってくるんじゃないか。

Web.Dev | i-mode対応のSSL証明書

DoCoMo Net - 製品・サービス・料金 - i-mode - SSL注意点

GeoTrustのような低価格なSSL証明書では最新のFOMA以外の端末に対応してなかった。Thawteのように日本法人がない所もダメな模様。
対応していない証明書でもPCのブラウザと同様にSSL通信はできるけど、アクセス時に警告ダイアログが表示される。やっぱりケチってはいけないね。

ビートラステッド社の証明書は初めて知ったけど、VeriSignより安い。

Web.Dev | CAPTCHA

はてなダイアリー - CAPTCHAとは

via アガテナ

文字を歪ませた画像を使う認証のこと。名前が付いてるとは思いもしなかった。

僕は時々、このCAPTCHAの文字が読めないことがあります。僕の頭の中がコンピュータ化してるのかも知れないけど、あれはユーザーフレンドリーとは思えない。こういう手法が一般化してしまうのはイヤだなあ。何か別のいい方法を考えれば特許とれるかな？

はてなのキーワードを辿ると、こんな記事もあった。スパム防止技術に「視覚障害者も締め出し」の批判

Web.Dev | CSSを使うことが目的じゃない

目的はWebサイトを作ることであって、CSSレイアウトでWebを作ることではない。

CSSに挫折して、テーブルレイアウトにした・・・　でも開発効率は上がった。むむぅ。

Web.Dev | CSS - IEでletter-spacing

Internet Explorer (Windows) CSSバグリスト

letter-spacingプロパティを指定した要素内では、br要素を2つ以上連続して置いても1つしか認識されない（br要素が1つおきにしか認識されない）。

このバグはbr要素に letter-spacing: 0; と指定することで回避できます。

この回避法を見つけた人は、一体何を考えてbrタグにletter-spacingを設定したんだろうか。

Web.Dev | Ajax

Ajax: Web アプリケーション開発の新しいアプローチ

via vas-animatum

男1: 「ところでAjaxは？」
男2: 「かなりいいですね。いいよね？」
男3: 「走りますよねー」
男1: 「走らんよ、Ajaxは。走らんよね？」
男2: 「走らないでしょう」

また新しい四文字熟語。「Asynchronous JavaScript + XML」の略。サッカーチームではない。

http://www.fujixerox.co.jp/event/cm/apeos/
制作はTUGBOAT。

Web.Dev | カスタムRSS

O'Reilly Network Safari Bookshelf

Create Your Own RSS. With the RSS generator below, create a feed of new or top titles based on category and publisher.

RSSが一般に広く認知されるようになってくれば、このサービスは多くのサイトで取り入れられるような気がする。

Web.Dev | Dreamweaver MX 2004

Macromedia - DWTN : dw0414 - Dreamweaver MX テンプレートのカスタムパラメータと式

今回、全て静的なHTMLのサイトを作らなくてはいけなくて、テキストエディタでシコシコとコーディングしてたのだけど、同じレイアウトのページが数十ページあるので、レイアウトに変更が生じたときとか辛いなあと思い、Dreamweaverのテンプレート機能を使ってみることに。

MX 2004になってから、ちゃんとDreamweaverを使うのは初めて。MXの時と比べて動作が軽くなってる感じ。XHTML+CSSでのレイアウトなんだけど、ちゃんとCSSを読み込んで、多少ズレてる箇所はあるものの、かなり正確に表示している。ソースフォーマット機能も満足のいくレベルに仕上げてくれる。すばらしい。

そしてテンプレート機能。ドキュメントを印刷して精読し、初めて使ってみたんだけど、思ってた以上の機能を提供してくれていた。上のページで説明されているようなパラメータや式までサポートされているなんて。Dreamweaver、食わず嫌いだったよ。

今後はXHTML+CSSデザインでページを作成するなら、HTMLのコーディングは使い慣れたエディタを使い、CSSを適用する段階でDreamweaverを使うようにするのが良さそうだ。それでもって、静的なサイトならばDreamweaverのテンプレート機能を使うと。

ようやくFlash単体ではなく、StudioMXを買った意味が出てきたぞ。Fireworksとの連携も使えるようになれば、きっと便利なんだろうな。

読めないけどMEMO。
http://www.contributeinfo.nl/webbouwers.php
http://www.contributeinfo.nl/webbouwers_conditions.php

Web.Dev | JavaScript Collection

BlueShoes: JavaScript Collection

via ほその日記

むぅ、すごい。

Web.Dev | 「www.」はもう不要!?

最近「http://xxx.jp」というURLのサイトをちらほら見かけるようになった。「co.jp」ではなく「.jp」で、しかも「www.」もない。

ナイキは随分と前からで、トヨタや松下、富士フィルムは最近になって移行したようだ。会社名ではなくサービス名だけど、mixiもその一つ。

今となっては「www」なんて、一般のインターネットユーザーにとっては呪文のようなもので意味を持たないし、「co.jp」より「.jp」の方が短くて済むから、企業にとっては「xxx.jp」の方が顧客にURLを覚えてもらいやすいので望ましいに違いない。
また携帯サイトも同URLで提供する場合は、短いに越したことはない。よく考えてみると、「.com」よりも短く済んじゃうわけだからね。

2005年にはこの流れはもっと拡がります。予言しておきます。

では、ピーース！！

Web.Dev | wbrタグ

wbr

MEMO。

Web.Dev | RSSとは

某インテリアショップサイトのRSSフィードの準備が完了。各ショップ別、全ショップまとめたものの二種類を提供します。近日中に公開予定。

社内のスタッフにRSSとは何か、どういうメリットがあるのかを説明したいのだけど、その辺りを超分かりやすく説明しているサイトが見つけられない。僕の口から説明できればいいのだけど、どうしても難しい説明をしてしまうダメな技術者なので。

「メタデータ」なんて単語が出てきた時点でアウト。

Web.Dev | 利用規約

はてなの利用規約改変がすこぶる不評のようですね。普段読まない利用規約ひとつでここまで一気に評判を落とすとは恐ろしい。他のサイトでも繰り返されてきたことなんだけどね。利用規約は侮れない。

Web.Dev | HTTPステータス405

ユーザーフレンドリー(?)なエラーメッセージを考えてるんだけど、ステータス405の「Method not allowed」は、説明のしようがない。結局他のステータスのエラーメッセージを流用したんだけど。

「リクエストメソッド」なんてものを、ホームページ見てる人が理解できるわけがない。オイラだってよく分からないのに...

こうしたエラーメッセージを収集しているサイトがきっとあるはず。参考にしてみたいので、そんなサイトを知ってたら教えてください。

Web.Dev | CSS ひとつの要素に複数のクラス

CYBER@GARDEN > CSS講座 > CSSの効率化

ひとつの要素に複数のクラスを適用させるには、半角スペース区切りでクラス名を列挙します。
<p class="note emph">注意文</p>

Web.Dev | 音量調整

先日、音のON/OFFボタンについて書いたけど、ONかOFFかではなくボリューム調整できるようにすれば、よりIntuitiveなインターフェースになり、且つユーザーにとっても親切になるんだなと思った。

NMNLのサイトを見て。
via blog.tokyoace4.com

NMNLは、あのコピーの頭文字だったのね。

Web.Dev | 音のON/OFFボタン

上の画像は、あるサイトのFlashムービーについていた音のON・OFFボタンなんだけど、さてこの表示の時、音は出ている？ それとも出ていない？

実際には視覚に頼らずとも音が出ているかどうかは分かるんだけど、この音のON・OFFボタンの表示方法については統一されていない気がする。
ボタンの表示が「ON」となっている場合、クリックするとONになるのか、それとも現在ONの状態なのか。反対に表示が「OFF」の場合、クリックするとOFFになるのか、それとも現在OFFの状態なのか。

Windowsのタスクバーにある音量アイコンは、ミュートにすると禁止標識みたいなマークが付く。これを標準と捉えるならば、ボタンの表記は現在の状況を表すのがいいのではないだろうか。つまり、音が出ている時は「ON」としておき、クリックすると「OFF」になって音が止まる。

これを読んでる皆さんは、どちらが自然に受け入れられますか？
A: ボタン表示は現在の状態を表す。ONボタンをクリックすると、OFFになり、音が止まる。
B: ボタン表示はクリック後の状態を表す。ONボタンをクリックすると、ONになる、音が鳴り出す。

# ちなみに上のボタン画像は、音は出ている時のものでした。クリックすると音が止まり、スピーカーアイコン右の波動が消え、ラベルが「SOUND ON」となります。相反するアイコンとラベルの複合技です。

Software, Web.Dev | Web Developer Extension

Web Developer Extension on chrispederick.com

The Web Developer extension for Mozilla Firefox and Mozilla adds a menu and a toolbar to the browser with various web developer tools

痒いところに手が届く機能満載。感動したので、Donationしちゃおうかな。この間PayPalのアカウントも作ったことだし。

Web.Dev | ドラッグ&ドロップでファイルアップロード

はてなダイアリー - ほその日記

iframeを使ってftp://を表示するってなもんです。確かにそれならドラッグ&ドロップでファイルのアップロードが可能ですね！アップロードされたことをどうやってハンドリングするかが肝となりますが、確かに既存のブラウザを用いてドラッグ&ドロップ実現できます。

Web.Dev | RSS

RSS(RDF Site Summary)によるサイト情報の要約と公開

メタデータ/RDFの応用として利用されているXMLフォーマットの代表として、RSS (RDF Site Summary) があげられます。共通の書式でドキュメントの見出し、要約などのリストを提供することで、サイトの更新情報などを効率的に公開できます。また、サイト情報以外にもさまざまなメタデータ公開のためのコンテナとしての可能性を秘めており、積極的に活用するとウェブ上の情報共有の新しい姿が見えてきそうです。

RSSの生成は、WEB+DB PRESS Vol.20で縣さんが紹介しているRSS4Jを使えば良さそうだ。

実は今まで、このページの左側にもある「Syndicate this site」の「syndicate」の意味が分からなかった。どうしてマフィアとBlogが関係あるんだろうと思ってたくらい。今日調べてみたら「記事を供給する」という意味も持ってるんだね。

Web.Dev | ダメなユーザインタフェイス講座

ほその日記経由

デスクトップアプリ向けのものだけど、中にはWebにも当てはまるものがある。勉強になります。

U/Iとは関係ないけど、僕はファイルの関連付けを勝手に変更するアプリが嫌い。Firefox、お前だ。

Web.Dev | かっこいい拡張子

Strutsの標準拡張子「.do」がどうも好きになれない。html、cgi、asp、php、jspなどなど、大抵は言語の名前で名詞なのに、どうしてお前は動詞なんだ？　音にしても「do(ドゥ)」は収まりが悪いんだよね。それならいっそのこと現在完了にして「done(ダン)」の方がいい。

かっこいい拡張子を日々考えてはいるのだけど、いいのが思いつかない。TheServerSide.comが「.tss」という拡張子を使っているように、サイトに合わせた拡張子を使うのも狙いすぎてて好きじゃない。アップルも「http://www.apple.co.jp/index.apple」こんな拡張子を使っていた時期がある。

何かお薦めの拡張子があれば教えてください。

Web.Dev | リアルとオンラインの差

ナチュ日記。｜「モノを買う」という体験

うまく言えないんだけど、お店に入って、レジにパッケージが積み重なっているのを確認して並んで、レジで精算してパッケージを手にするまでの緊張感とか、「やった、買ったよー！」っていう達成感とか嬉しさとか、そういう感覚、忘れてたなぁ。

オンラインで「モノを買う」ことは、とてもお手軽にできるようになったと思う。本だって服だってゲームだって買える。でも、ああいった感覚をオンラインでも体験できるサイトってないんじゃないかなぁ……と。

個人的な感覚だけど、商品をカートに追加するボタンをクリックして、住所や名前を入力する。どこか事務的な感じを拭う事ができない。リアルなショッピングで体験できる「買ったぞ!!」という感覚はなく、「買うという手続きを済ませた」という感覚しかない。ホントにうまく表現できないのだけど。

この辺りがオンライン(に限らず通販を含めて)の限界なのかと思う。でもそれでいいのではないかとも思う。リアルとオンラインの世界の差はしっかりと残っていて欲しい。

Web.Dev | Blogっぽい

あるサイトのリニューアルのため、昨日からラフデザインの制作に入る。ふと気づくと、何となくBlogっぽいデザインになってたり。最近は見るサイトがBlog中心になっているので、意識はしてないけどかなり影響を受けているようだ。

Web.Dev | UTF-8

男は黙ってユニコードと前に書いたけれども、散々な目に遭いました。クライアント(ブラウザ)側でUTF-8なんて使うもんじゃありません。

敢えて言おう、カスであると!

Web.Dev | 男は黙ってユニコード

.spfdesign | blog { Temporary }: MAC IE UTF-8 プルダウンメニュー

「MAC IE UTF-8 プルダウンメニュー」のバグは<select>タグの中に「lang="ja"」と書いてあげると直る。

でもStrutsのselectタグにはlang属性はない・・・

Web.Dev | Joshua本から

As developers, designers, and artists, we shouldn't assume that the general public is idiotic. Instead, we should try to evolve the medium by building intuitive systems that educate the user - not design down to the level we think the users can handle.

Joshua Davis "Flash to the Core"

Web.Dev | 入力規則

Alertbox: 2003年 ウェブ・デザインの間違いトップ10（2003年12月22日）

9. 入力規則が厳しすぎるフォーム

負荷はコンピュータにかけるべきであって、人間にかけるべきでない。ユーザには、好きな形式でデータを入力させるべきだ。

が、僕個人に限って言えば、入力規則があった方がありがたい。そうでないと、例えばカード番号ひとつとっても、ハイフンを入れるべきなのかそうでないのか迷ってしまう。電話番号や郵便番号もそう。
名前だって苗字と名前が分かれていないところは、苗字と名前は全角スペースを入れた方がいいのか迷ってしまう。

規則に慣れてしまったのか、今では逆に規則がないことがユーザビリティを低下させてしまう可能性を否定できない。

僕が思うフォームの入力規則に関する間違いは二つ。

• 規則が入力フィールド脇に明記されていない。


• 他所のサイトにはない珍しい入力規則。

後者は、個々のサイトで独自の入力規則を作ってはいかんゾ、ということ。規則を適用するなら、他所のサイトで見たことある合理的なものに限るべし。これならユーザーの混乱を最小限にしてくれるはず。

Web.Dev | ○○ビリティ以前に

今日の三角巾(2003-12-15)

ユニバーサルデザイン検討チームがつぶやいていたセリフ。曰く、

テキストリーダー使ってWebページ読ませれば耳で聴くことはできるけどさ。 このサイト、文章をそのまま読んでても、意味わかんないじゃん。

わはは。ユニバーサルデザイン以前の問題。

Web.Dev | Wiki

初めてWikiサイトを作ってみた。PHP実装のPukiWikiを使って。
ふーむ、こういうものか。

番号付きリストとInterWikiを活用すれば、ユースケースをまとめるのに役立ちそうな気がする。
プロジェクト単位でWikiを立ち上げ、ひとつのユースケースをひとつのページに書いていく。ページ作成時にはテンプレートも使えるので、ユースケース・テンプレートを用意しておけば、フォーマットも統一できる。シナリオは番号付きリストを使って書けば、途中の項目の追加、削除も容易なはず。あるユースケースがインクルードしているユースケースは、InterWikiを使ってリンクを張ればいい。
あとは、アクター一覧なんてページも別途用意しておくと分かりやすいかも。

このWikiサイトをクライアント(ユーザー)側と共有し、一緒にユースケースを作成・更新していけば効率的なんじゃないか。

Web.Dev | keep office politics out of your design

adaptive path ? keep office politics out of your design

It happens again and again. You spend hours in design meetings debating a point, and then a single word from upper management squashes your decision. Or maybe your design debates just go on for weeks because of office politics. How can you streamline this process? By deriving your conclusions from research instead of just “experience.”

Web.Dev | 配送料の見せ方

オンラインショップやカタログ通信販売で、商品サイズや配送地域によって配送料が異なる場合、個々の商品にそのショップ独自の区分が付いていることがある。その場合、お買い物方法やヘルプ等のページに、区分ごとの配送料が掲載されている。
例えば、「区分C・・・全国一律1,000円」といった形で表になっていることが多い。

これはサービスとしてどうか、と前々から思っている。
リアルな店舗で置き換えてみると分かりやすい。店員がお客様に「この商品の配送料はいくらですか？」と尋ねられる。店員は「その商品の区分はCです」と答え、区分送料表をお客様に見せて、お客様に配送料を調べさせることはないだろう。
通常、店員は「配送先はどちらになりますか？」と尋ね、都内とか○○県内のような配送先を聞き出し、自分で区分送料表を調べて「配送料は1,000円です」と答えるはずだ。

オンラインショップでもこのような配送料表示が望ましいサービスであると僕は考えている。

手がけているオンラインショップに、これを具現化した送料表示を実装してテストしているのだが、他では見たことのない馴染みのないインターフェースになってしまった。使い方はすぐに分かると思うのだが。
ただそうなると、多く採用されている配送区分式の方が、顧客にとって馴染みがあっていいのかも知れないとも思えてくる。難しい。

Web.Dev | 動的生成させるか静的制作するか

例えば、商品説明のWebページを同一レイアウトで作るとする。商品画像や商品説明、仕様、価格などがそれぞれの商品で異なる。そして、商品の数は今後絶対に増えることはないものとする。

このような条件の場合、商品数が何点までなら力技で静的にHTMLを作成するか。仕事上、時々出くわす問題。100点を超えれば間違いなくプログラム組んで、DBまたはXMLなんかを用いて動的にページを生成するように作る。その方が時間の面でも効率がいい。
50点位でも、商品数は変わらなくてもレイアウト変更に備えて、動的生成の仕組みを作るだろう。

問題は20～30点位の場合。これは結構悩む。今後増えないという条件なので、わざわざ動的な仕組みを作る必要もないけど、力技で望むのもちょっと面倒だなという数。
悩んでる時間に、どちらか作れちゃいそうな気もするんだけどね。

Web.Dev | GeoTrust QuickSSL

日本ジオトラスト株式会社

某社のWebサーバにSSLを導入することになり、この春日本でサービスを開始したGeoTrustのクイックSSLを購入することに。他社とは違い申込時に登記簿とか必要なく、手軽に申し込みが可能で、国内のサービスにも関わらず34,800円は安い!!

本当に申込をしてからすぐに証明書が発行された。でもよく調べてみると、CSRで指定したCommon Name以外の会社名や地名が証明書に入っていない。つまりブラウザの鍵マークをクリックすると表示される証明書に社名が入っていないということ。この辺りにVerisignとかと比べて安い秘密があるのかも。ちなみにmacromedia.comもGeoTrust使ってた。

でも、一般的に証明書をわざわざチェックするユーザーもいないと思う。自分だってしないし。結局、ブラウザに鍵マークさえ表示されてれば満足ってことだよね。

JavaScriptに、navigator.showKey(boolean) みたいなメソッドがあって、それで鍵マークが表示できるようになれば、証明書なんて必要ないかもよ!?　(暗号化はしないとダメなんだけどさ)

Web.Dev | Say goodbye to spacer gifs...

Dreamweaver MX 2004のキャッチコピーの一部。

Dreamweaverは普段使っていないけれど、スペーサーGIFはよく使ってる。CSSをちゃんと活用できれば、スペーサーを使わずにまとめられるのかも知れないけど、ついスペーサーに頼ってしまう。次のプロジェクトでは、スペーサー禁止にしてみよう。

ちなみに、スペーサーGIFのファイル名に僕は「clear.gif」を使ってる。「spacer.gif」、「blank.gif」・・・いろいろあるけど、もしアンケート取ったら何が一番かな？

Web.Dev | 送信ボタンとキャンセルボタンの並びは？

ふと気になった。Webサイト上の申し込みフォーム等で送信ボタン(Submitボタン)とキャンセルボタン(フォームリセットや前の画面に戻るボタン)の並びはどうあるべきなのか？

縦に並んでいるのはあまり見かけないので、横並びを前提として。自分の場合は、「キャンセル」-「送信」のように送信ボタンを右に持ってくる。今では習慣になって何も考えずにこの並びにするけど、多分初めはブラウザの戻るボタンと進むボタンの並びに従ったのだと思う。

でも「送信」-「キャンセル」の並びを見かけることもしばしば。多数派はどちらなんだろう？