Keitaです。

Lingr APIが公開されました。

で、すばらしいことに、そのAPIをPHPから簡単に取り扱うライブラリを、p4life氏が公開されているのでそれを便利に使わせていただきました。

もともと、個人的にLingrに興味をもっていて、上記のライブラリを使ってサイコロをふれるようにしたりして遊んでいたのですが、IRCのボットを超えるようなものが思いつきませんでした。

いろいろ悩んだあげく、たぶん、Javascript周辺に新しい何かがあると思うのですが、とりあえず、一晩、PHPで遊んでみました。

試作その1

やってみる前から気がついていたのですが、いろいろな意味でだめです。
そもそも、機密情報が入る可能性がる、ログを他のサーバに送り出してる時点でもうだめです。
あと、ログが大量になるとえらいことになります。
すいません。

そういうわけで話は前後しますが、社内の人とお昼いったときになんかアイディアない？
って聞いたところ、フォト蔵との連携がでてきました。

試作その2

フォト蔵との連携は、サイボウズラボの鶴岡さんが公開されているフォト蔵APＩライブラリを利用させていだきました。

Lingrとフォト蔵を組み合わせてみた
これを組み合わせると
photozou>>ねこ
とか
フォト蔵>>猫
とかやると、フォト蔵の画像が表示されます。

これで、議論が白熱したときに。
「まぁまぁ、まったりまったり。フォト蔵>>猫」
で、和みます。ちなみに僕は犬好きです。

すくりーんしょっと posted by (C)フォト蔵

ちなみに、ソースみてみたらわかりますが、わりと適当です。
エラー処理もそこそこです。
いたづらされると、（実行している）サーバのリソース食い尽くしそうです。
テスト用途以外で使うには、十分リスクを計算した上でつかってください。

つくっていて感じたのは、（前準備はありましたが）実装は一晩でできてしまうことです。
Lingr APIや、フォト蔵APIさらには、PEAR::Services_Lingr, Services_Photozou。
これらを組み合わせて、あとちょっと何かするだけで、さっくり作れるのは、やっぱ楽しい時代がきたなーと実感します。
(buzzwordだから使いたくないけど)Web2.0は、「ジョバンニが一晩でやってくれました」な世界なのかもしれません。

日時: 10:24 | パーマリンク | コメント (0) | トラックバック (1)

こんにちは、hideです。
僕がウノウに入社してからもう少しで6ヶ月が経過しようとしています。入社して間もない頃に「ウノウってこんな会社です」というエントリを書いたのが、とても懐かしく感じられます。

僕の前職はいわゆるスーツ系のSIer企業でした。特に大きな不満があったわけではないのですが、一生このままでいいのかな、という漠然とした不安は感じていました。そんな僕が転職を決意するきっかけとなったのは、ポール・グレアムの書いた「ハッカーと画家」という一冊の本を読んだことでした。その本にはこのようなことが書かれていました。

• 最良のイントラネットは、インターネットだ。


• 信頼できる、良いプログラマからなる小さなチームでのほうが、大企業での平凡なプログラマからなるチームよりもうまくいく。


• 良いハッカーになる鍵は、たぶん、自分がやりたいことをやることだ。


• 難しいのは問題を解くことではなく、どの問題を解くかを決めることだ。

(1)最低限のコミュニケーション能力を身につける

(2)RSSリーダで情報収集する

(3)勉強会やオープンソース活動に参加する

(4)休日でも勉強する癖をつける

(5)ブログを書く

(6)コア技術に関する体系的な知識を身につける

(7)思い付いたアイデアを記録する

日時: 21:30 | パーマリンク | コメント (1) | トラックバック (1)

komagataです。

社内の勉強会でWebDAVについて発表したので資料を公開します。
（この資料は少し言い過ぎなので２割増しで聞いといて下さい）

[<<　Prev　Next　>>]　WebDAV.pdf(741KB)

日時: 19:35 | パーマリンク | コメント (0) | トラックバック (4)

ライブラリのダウンロード

サンプル

使い方

日時: 12:18 | パーマリンク | コメント (4) | トラックバック (0)

デジタルな世界で生きている同業者の皆さん、ペーパーレスの世界に過信しすぎてはいませんか？

今日は、紙を使ってプロトタイプを作ることの意義と、方法を紹介します。

紙プロトタイプは、ユーザビリティ・テストのれっきとしたメソッドであることをご存知でしたか？筆者は、前職ではよく紙と、ペンと、はさみとのりを使ったプロトタイプを作成していました。ウノウに入ってからは大体wikiやPhotoshopだけを使ってモックを作るようになり、フォト蔵チームでも大きなUIの変更の際は大体、
(1) WikiやBTSで仕様を簡単にまとめる
(2) PhotoshopやPowerPointでモック（四角がいっぱい並んでいる）
(3) HTMLでモック(大体の動作を体感)
というステップを踏んでいます。

でも、最近になって作業効率とかユーザビリティテストとか考えるようになったら、なんだかものすごく紙が懐かしくなってきたんですね。ちょうどA List Apartでも紙プロトタイプが紹介されたので、この際、紙資源がもったいないとか、アナログだとか字が汚いだとか言う批判を恐れずに、社内外にこのメソッドの布教活動をしてみようという気になりました。

紙プロトタイプの導入は、上記の(1)から(3)までのステップを一段階増やすもので、まずは(1)と(2)の間に入ることになります。一段階増やしていながら、ユーザー想いなプロダクトを作る上で最終的に効率を高める結果にあると、私は思います。

紙プロトタイプは何に使える？

紙プロトタイプは、人とコンピュータのインタラクティビティを生み出すプロダクトであれば、サイトであろうと、ソフトであろうとハードであろうと、何にでも応用できます。

必要なもの

必要なものは、紙とペンのほかに『はさみ』。あと、付けたり貼ったりが繰り返すことのできるタイプの『のり』があれば完璧です。『はさみ』と『のり』が、ただ単に紙にメモ程度にモックを書くことと、プロトタイピングの大きな、大きな違いです。なぜなら、この二つによって、例えばdiv id="login"の中身だけ、上からペタッと変えることができるじゃないですか！

紙プロトタイプの効果

紙プロトタイプの効果は、例えば次のようなものがあげられます。

意義1: プロダクトがまだ図面段階、骨組み段階にあるときに、ユーザーからのフィードバックをいち早く開発に取り入れる、早い段階で軌道修正が可能。

意義2: ニコニコ笑顔で修正できる。エンジニアマインドな開発者が言う「ここ修正して」の一言はPhotoShopを使って丹念にモックを作ったデザイナーの心を激しく傷つけます。紙だったら、いつでもやさしい人でいられます。

意義3: メモが書き込みやすい。チーム内、社内、あるいは実際のユーザーさんに見てもらって得たフィードバックを、ダイレクトに書き込むことができます。Photoshopだったら、Textレイヤーを作って、配置して、フォント設定して、あぁめんどくさい。

意義4: 簡単にインタラクティビティをデモれる。ラボブログ当番な私は今日中にこの記事を仕上げなければならず、自分で今からこれを説明するための紙プロトタイプを作ることができないので、手抜きします。さっきのA List Apartの例をご覧ください。

真ん中の方にいくつかある写真をごらんいただくと、紙プロトタイプで作られた簡単なサイト画面で、セレクトボックスのインタラクティビティ、ログインフォームのインタラクティビティが間単に表現されていることがお分かりいただけると思います。

紙プロトタイプとユーザビリティテスト

もうお気づきかもしれませんが、上であげたような紙プロトタイプの意義は、ユーザビりティテストと深い関係にあります。もちろん、ユーザビリティテストとは、チーム内、社内、あるいは実際のユーザーさんを用いてのどの場合も含まれます。紙プロトタイプがもたらすユーザビリティテストの可能性とは、どんなものがあるでしょう。

(1) 問題を見つけ、解決法に関するアイデアを誘発する。
(2) ユーザーさんがクリックするところをペンでマークできる。
(3) ユーザーさんに、「そこをクリックしたら何が見えることを期待するか」を描いてもらったりもできる。
(4) ネットワークや、PCなど、環境の準備がまったく不要で、カフェでコーヒーを飲みながら、「ねえ、ちょっとこれ見てくれる？」という感じで簡単にユーザビリティテストを開始できる。

もちろん、読み込みのスピード、スクローリングを紙でデモるには相当な工作能力を要するなど、限界もありますが、上手に使えば、ユーザーにとっても、開発にとってもハッピーなメソッドです。

それになにより、紙を使って工作、楽しいですよね？

日時: 17:06 | パーマリンク | コメント (3) | トラックバック (1)

naoyaです。
今日は最近見つけました”ウェブデザインに不可欠なツールサイト”を紹介します。その名前も「Web Design Tools - thePeoplesToolbox」です。このサイトはウェブデザインの使われるさまざまなサイトをまとめたサイトです。

それでは、さっそく使ってみることにしましょう。
まず、最初にユーザ登録した方が自分のツールボックスにできるので登録してみましょう。
登録するには、右上の"login"リンクから、必要な情報を入力するだけでその場で登録完了となります。"Enter Code"には、"Authentication Code"と同じ文字を入力します。

ウェブデザインサイト１ posted by (C) フォト蔵

ログイン後、"home"リンクからトップページを表示すると、ウェブデザインに使えるサイトの一覧がカテゴリ別に表示されています。
この中から、好きなものを選択して"box"ボタンを押すルと自分のツールボックス(Your Tool Box)に登録される仕組みになっています。

それぞれのカテゴリには登録しているユーザ数が表示されていて、どのサイトが人気があって使いやすいのかが分かるようになっています。

せっかくなので、それぞれのカテゴリで一番多く登録されているサイトを紹介します。

Color（色）

Color カテゴリのトップには、4096 Color Wheel というサイトが登録されています。
このサイトは、色見本円の上にマウスカーソルを置くと、すぐに RGB コード出力されるようです。円の下には、前後の近い色も表示されるようになっており、さらに右にはその色に近い RGB のいずれかの色見本が表示されています。
あの色の RGB コードが分からないときに、すぐに調べるサイトにはかなり使えると思いました。

CSS

CSS カテゴリのトップには、spiffy corners というサイトが登録されています。
このサイトは、イメージや JavaScript をまったく使わずに CSS と HTML だけのシンプルな角丸ボックスを作成することができるサイトです。

サイトの上部に表示例があるので、次の項目を入力して、最後に枠線の太さのボタンを表示すると CSS と HTML コードがあわせて表示されます。

・CSS クラス名
・背景色
・前景色

例えば、次のような角丸ボックスを簡単に作成することができます。

ウェブデザインサイト２ posted by (C) フォト蔵

このサイトは、角丸ボックスを簡単に作れるので便利です。

fonts（文字）

fonts カテゴリのトップには、9800 Free Fonts というサイトが登録されています。このサイトは、名前の通り 9800 もの無償でダウンロードできるフォントをダウンロードすることができるサイトです。

フォント名のアルファベット順でフォントのプレビューが見れるようになっていて、その場からすぐにダウンロードすることができます。
海外のサイトなので、日本語フォントが残念ですが、それにしてもいろいろな種類のフォントがあるものだなと思いました。

html

html カテゴリのトップには、Webmonkey|Reference: Special characters というサイトが登録されています。このサイトも名前のとおり、HTML の特殊文字一覧表があるサイトです。実は、僕もついさっき HTML の特殊文字を検索したところですが、このサイトですぐに分かります。

こんなにも HTML 特殊文字があるとは勉強になります。

icon（アイコン）

icon カテゴリのトップには、Free! Icons for your site というサイトが登録されていますが、現時点ではつながらなかったのでかわりにfamfamfam.com というサイトを紹介します。このサイトは、ウェブサイトでよく使われるアイコンを無料で提供してくれるサイトです。アイコンの数は少ないですが、ブラウザのボタンや国旗などとても分かりやすいアイコンをダウンロードすることができます。

images（イメージ）

images カテゴリのトップには、BLUE VERTIGO というサイトが登録されています。このサイトは、有料サイトですが高画質のイメージを早くお手頃な価格で入手できるサイトのようです。有料サイトなので、紹介はしないでおきたいと思います。

inspiration（ひらめき）

inspiration カテゴリのトップには、Zen Garden というサイトが登録されています。このサイトは、サイト自身の HTML とCSS をダウンロードできるサイトです。Zen Garden というサイトは左側に透過している背景があったり、右側にメニューがあったりと、とても美しいサイトです。

このサイトの CSS や HTML をベースにすれば、すぐに同じようなデザインを持ったウェブサイトを作れると思いました。

tutorials（チュートリアル）

tutorials カテゴリのトップには、lynda.com というサイトが登録されていますが、現時点ではつながらなかったのでかわりにその次の登録数が多い Dynamic Drive CSS Library を紹介します。このサイトは、CSS を使ってウェブサイトのメニューとして使えるさまざまな種類のメニューの CSS など詳しい解説が掲載されているサイトです。さまざまな種類のメニューから、自分のウェブサイトにあったメニューを選択するとよいと思いました。

widgets（ウィジェット）

widgets カテゴリのトップには、Lorem Ipsum というサイトが登録されています。このサイトは、印刷用のシンプルな段落をもった文章のサンプルを表示してくれるサイトのようです。

というわけで、今回はウェブデザインに不可欠なツールサイトを紹介しました。
今回紹介したサイトをツールボックスに入れると、次のようになります。

みなさんもそれぞれのカテゴリからデザイン用のウェブサイトを使ってみて、自分のツールボックスに登録してみてください。

ウェブデザインサイト３ posted by (C) フォト蔵

前回のエントリのデザインセンスの無い人がwebサイトを作成する際に参考にしているサイトとあわせて使うと、ウェブサイトをデザインするには、必須のツールとなりそうです。

日時: 20:22 | パーマリンク | コメント (3) | トラックバック (0)

Keitaです。
ウノウや個人にいただきました書籍をご紹介させていただきます。

PHPによるデザインパターン入門

デザインパターンって何がいいの？とか言われそうですが、プログラマの意思の疎通に使えます。
「ここのコードいけてないよね。○○パターンとかにしたらいいんじゃないの？」
みたいに、なんとなく省略できるような気がします。

PHPによるデザインパターン入門

posted with amazlet on 07.01.23

下岡 秀幸 道端 良 畑 勝也
秀和システム
売り上げランキング: 14467

Amazon.co.jp で詳細を見る

PHP プロマガジン

今回いただいたのは、2006年12月18日（月）に発売したvol.2で、フレームワーク特集でした。
分量はすくなめなものの、各フレームワークの特徴を知るにはちょうどいい内容で、非常に参考になりました。

アシアルさん自身が、実際にPHPを使って開発をしている会社だけあって、ぺちぱーにとって知りたいなという内容を的確に突いてきているとおもいます。

あと個人的には、お手伝いさせいただいているPHP勉強会が紹介されていたのがとてもうれしかったです。

どちらもPHPプログラマだったら買っておいて損はまったくないと思います。
それではまた

日時: 15:51 | パーマリンク | コメント (0) | トラックバック (0)

1月22日、ウノウを会場にDjango勉強会が開催されました。

• DjangoからAjaxを使うにはどうしたらいい感じか？（mopemopeさん）


• 寺子屋「RandomNoteを作る」（uemuraさん）


• ライブブログ構築（遠藤さん）


• Leuchtturmデモ（酒徳さん）

寺子屋では、実際に参加者の方が、ペア・プログラミングでサンプル・アプリケーションを作成するという形で行われました。半数以上がDjango初心者だったのですが、皆さん初めてでもすぐに覚えてしまったようです（Python自体が初めてという人もいました）。
参加者は24名で、懇親会もほぼ全員の方が参加して、エンジニア同士での意見交換が活発に行われました。

Django勉強会 Disc2 posted by (C) フォト蔵

Djangoは、Pythonで書かれたWebアプリケーション・フレームワークで、見通しのよい MVC 分離、洗練された O/R マッピング API、そして汎用性の高い強力なテンプレートエンジンを備え、高い柔軟性とパフォーマンスを同時に要求されるWebアプリケーションを迅速に開発することができます。

Ruby on Railsと比較されることも多いのですが、もともとアクセスの多い新聞社のサイト向けとして開発されたこともあり、パフォーマンスに関してはDjangoが少しばかり優れているようです。

→ Django/Rails/Symfonyの比較記事

関連リンク：
Djangoと日本の仲間たち
Django | The Web framework for perfectionists with deadlines

日時: 19:53 | パーマリンク | コメント (0) | トラックバック (0)

こんにちは！やまもと＠テスト番長です。

こちらのエントリーでもご紹介させていただいていますが、先日行われたウノウの開発合宿の模様が本日(1/22)ワールドビジネスサテライト(テレビ東京)で放送される予定です。（予定変更になったらすみません。）

自分はたまたま前々回の開発合宿の幹事を勤めましたので、つきましては今回テストネタからちょっと離れさせて頂きましてその時分かったTipsを書いてみたいと思います。
過去のジュンヤさんのエントリー：開発合宿の Tipsとあわせてご参考にしていただければと思います。

1.宿はとにかく早めに手配する

2.持ち物リストを作る

3.雰囲気を盛り上げる

4.移動も気を使う

5.支払い担当を明確にしておく

6.変化を用意する

7.自分の開発計画はあらかじめしっかり固めておく

当たり前の話が多くなりましたが、
確実に開発に集中できる状態に持って行く為に
面倒なことを一つ一つ丁寧に片付けていくことが大事なのかも知れません。

このエントリが少しでも皆様のお役に立てれば幸いです。

日時: 13:05 | パーマリンク | コメント (2) | トラックバック (0)

こんにちは satoです

Aapcheでproxyサーバを利用している場合、頻繁にアクセスされて、なおかつ
更新の少ないデータ、（フォト蔵や mixiでいう マイピクチャーなど）
は proxyサーバにキャッシュするとレスポンスが良くなります。

mod_proxy_balancerと mod_disk_cache を利用して、proxyサーバに
データをキャッシュする手順を紹介します

<VirtualHost * *:443>

    ServerName example.com   

    ProxyPass /img ! # cssやイメージファイルは proxyしないでローカル参照

    ProxyPass /css !

    <Proxy balancer://web>

        AddOutputFilterByType DEFLATE text/html text/css application/x-javascript

        BalancerMember http://10.0.0.1 loadfactor=10 keepalive=On

        BalancerMember http://10.0.0.2 loadfactor=10 keepalive=On

        BalancerMember http://10.0.0.3 loadfactor=10 keepalive=On

        BalancerMember http://10.0.0.4 loadfactor=10 keepalive=On

    </Proxy>

    ProxyPass / balancer://web/ timeout=2

    # キャッシュの設定

    <IfModule mod_cache.c>

        <IfModule mod_disk_cache.c>

           CacheRoot /usr/local/apache2/cache

           CacheIgnoreCacheControl On

           CacheIgnoreHeaders Set-Cookie

           CacheEnable disk /bin/my_pic/

           CacheMaxFileSize 1024000

           CacheMinFileSize 64

           CacheDefaultExpire 86400

           CacheDirLevels 5

           CacheDirLength 3

        </IfModule>

    </IfModule>

</VirtualHost>

CacheRoot - キャッシュの保存先を設定します
CacheIgnoreHeaders Set-Cookie - cookieはキャッシュしないようにします
CacheEnable disk /bin/my_pic/ - キャッシュするディレクトリを指定します
CacheMaxFileSize 1024000 - キャッシュするファイルの最大サイズを指定します
CacheMinFileSize 64 - キャッシュするファイルの最小サイズを指定します
CacheDefaultExpire 86400 - キャッシュがエクスパイアされるまでの時間を指定します
CacheDirLevels 5 - キャッシュのサブディレクトリの深さを指定します
CacheDirLength 3 - サブディレクトリ名の文字

こんな感じでキャッシュが使用されるようになります。

最新のファイルなどのアクセス頻度が多い場合には

/new/

などと時間で参照先のディレクトリが変わるようにしておいて
new のディレクトリをキャッシュするようにすると良いかもしれません。

設定はSoftware Design (ソフトウエア デザイン) 2007年 01月号を参考にしました。
こちらには mod_mem_cache の設定方法なども詳しく書いてあります

日時: 18:54 | パーマリンク | コメント (0) | トラックバック (0)

Keita です。
ウノウの開発者数人でThinkITでPHPの開発手法をご紹介させていただいてますが。
僕の担当分である
wikiについての記事が、掲載されました。

あとで読むタグでもつけていただければと思います。
あと、なんか、写真にブックマークはご遠慮ください。

日時: 18:05 | パーマリンク | コメント (2) | トラックバック (0)

尾藤正人です。

僕だけじゃないと思いますが、結構マルチタスク処理が苦手です。 人間(特に男性)はやっぱりシングルタスクを処理するようにできているからでしょうか。

効率よく作業を進めようと思って最近オフラインHackを始めました。略してオフHack。 このブログを読んでいる方の多くは、RSSリーダやメール、 メッセンジャー等を駆使して日々情報収集していることと思いますが、 どうしてもRSSリーダ見たり、メールチェックしたりして、作業に集中できなくなることはないでしょうか。 僕はめちゃくちゃあります。 なので、あえてネットに接続しない、オフラインの状態でHackするようにしました。 これがオフHackです。 朝Hackと組み合わせると最強です。

普段常時ネットに接続した環境に慣れていると、 いざオフラインで作業しようとした時にいかに自分がネットに依存している状態かを思い知らされます。 なのでオフHackを実施するにあたって事前に準備しおいた方が良い事柄をあげてみます。

ローカルに開発環境を準備する

すごく当たり前ですが、これがないと始まりません。 ローカルにapache, lighttpd, php, perl, ruby, python, MySQL, PostgreSQLなどの自分が必要なパッケージが動くようにしておきましょう。 僕の場合、Mac OS Xで開発しているのですが、apacheは標準で付属のもの、MySQLはfinkでインストールしたもの、php, rubyは手動でコンパイルしたものを使っています。

Windowsの方はVMwareとCentOSでウェブ開発の環境をさっさと整える手順書(前編)を参考にローカルでLinuxが使える状態にしておくといいと思います。

マニュアルをローカルにダウンロードしておく

マニュアルは必ずローカルにダウンロードしておきましょう。 これをやっておかないと結構悲惨な事になります。 HTML Help形式がおすすめです。Mac OS Xだとchmoxというソフトウェアで参照することができます。

ライブラリをローカルにダウンロードしておく

必要なライブラリをいざ使おうと思った時に、 ネットにアクセスできないと何もできないので困ります。 主要なライブラリはあらかじめローカルにミラーして置きましょう。

僕はPEARのパッケージをローカルにダウンロードして使っています。 一日一回cronで取得しているので、いつでも新鮮なPEARが食べられます。

svkを使ってローカルからリポジトリにアクセスできるようにしておく

svkというツールを使うとsubversionやcvsのリポジトリをローカルにミラーすることができます。サーバ上にリポジトリをミラーして、ローカル環境でリポジトリにアクセスしたりコミットしたりできます。 オンラインになった時にまとめてサーバ上にコミットするので、作業に全く問題ありません。

Mac OS Xならばバイナリパッケージが用意されているのでコピーするだけでインストール終了です。

最近version 2が出て速くなったという噂を聞いているのですが、Mac OS X用のバイナリがまだ無いようなので移行できずにいます。完全にへたれです。

まとめ

オフHackに必要な事柄について、つらつらと書いてみました。 実際やってみると結構効果があるのが実感できると思います。 みなさんも是非試してみてください!!

一言英会話シリーズ - whatchamacallit

whatchamacallitは何を言っているのか思い出せない時に使います。 日本語でいう「なんだっけー」です。 "What you may call it?"から派生した言葉です。 読み方はカタカナで書くと「ワチャマコーリット」。

日時: 10:49 | パーマリンク | コメント (2) | トラックバック (2)

こんにちは。今月入社したyamaokaです。よろしくお願いいたします。

さて、PHPで配列要素の存在チェックを行う場合、どうされていますか？　2通りの書き方があると思いますが、実は動作が異なる場合があるのです。

if (isset($array['foo'])) {   // （1）
    // 存在する
}
if (array_key_exists('foo', $array)) {   // （2）
    // 存在する
}

（1）の場合、要素の値がnullだと存在しないものとして扱われてしまいます。（2）では、該当するキーが存在しさえすれば存在するものとして扱われます。

配列の要素がnullになる可能性がある場合、array_key_exists関数を用いてチェックを行う必要があります。isset関数が使用できるのは、要素の値がnullにならないとわかっている場合だけです。

実行速度はどうでしょうか。PEAR::Benchmarkを利用して計測してみます（計測した環境はWindows XP、PHP 4.4.4です）。

// PEAR::Benchmark
require_once 'Benchmark/Iterate.php';

$benchmark = new Benchmark_Iterate();
$array = array('foo' => 'foo', 'bar' => 'bar');

$benchmark->run(100, 'isset_test', array('foo', $array));
$result = $benchmark->get();
echo 'isset            : ', $result['mean'], "\n";

$benchmark->run(100, 'array_key_exists_test', array('foo', $array));
$result = $benchmark->get();
echo 'array_key_exists : ', $result['mean'], "\n";

function isset_test($key, $array)
{
    return isset($array[$key]);
}

function array_key_exists_test($key, $array)
{
    return array_key_exists($key, $array);
}

5回計測を行った結果は以下のようになります。

1回目
    isset            : 0.000363
    array_key_exists : 0.000418
2回目
    isset            : 0.000388
    array_key_exists : 0.000431
3回目
    isset            : 0.000411
    array_key_exists : 0.000445
4回目
    isset            : 0.000398
    array_key_exists : 0.000425
5回目
    isset            : 0.000396
    array_key_exists : 0.000420

isset関数を用いた方が若干高速なようです。必要に応じて使い分けるのがよさそうですね。

日時: 19:32 | パーマリンク | コメント (0) | トラックバック (0)

マイ開発環境 posted by (C) ELF 上鍵

普段バランスボールに座って仕事をしているのにWBSの撮影は普段ボールで仕事をしていない人が軒並みボールに座るので自分の分がなくなって撮影中のテンションが下がってしまったアンケートに英語キーボードの人+1できなかったjokagiです．上鍵のタイプの英語キーボードってかなり少なくて困ってます． そういえばなんとか正式採用になってプロフィールに掲載されました． あらためてよろしくお願いいたします．

さて今回はウェブ開発というかインターネット向けサーバー&クライアントな開発をする上で「問題の切り分けちゃんとできるようになりましょう」という話です．

問題の切り分けちゃんとできてますか?

あるサービス，わかりやすいのはウェブサービスを開発していると，普通さまざまな問題がでてきます． スクリプトなどロジックの問題の場合は解決できる人は多くいらっしゃるのですが， 「サーバーにつながらない」という現象に対してちゃんと解決のできない人も意外とたくさんいらっしゃいます． 今回はそういう方に問題の切り分けの仕方を紹介します．

問題はどれ位に切り分けられるのか

ウェブサービス(あるいはそれ以外でも)の開発中，あるいは運営中に発生する問題多くの場合，サーバーサイドに関しては大雑把には下記のような問題の切り分けができると思います．

1. ログに何か異常をあらわす記録がされていませんか?
2. DNSの正引き・逆引きはちゃんとできているか? ドメインの設定は大丈夫?
3. アクセス先ポートにちゃんとアクセスできますか?
4. サービスプロトコルをtelnetで直接入力したときの結果に問題ありませんか?

今回はこのうちのDNSやドメインについてのお話をさせていただきます．

DNSの正引き・逆引きはちゃんとできているか? ドメインの設定は大丈夫?

サーバーにアクセスできるかどうかをpingなどで確認しない

まず一般的にある時点でサービスにはドメインなりが用意され，IPアドレスでのアクセスをしなくなります． そのときにドメインにうまくアクセスできなかったりすることがえてして発生しがちです． そのときによくpingで相手が見えるか確認したり，ブラウザーで確認する人がいますが，それは多くの場合で大間違いです． その理由は「あなたはDNSが正しく設定できていることを保証できますか?」ということです．

DNSがちゃんと設定されていないのに該当ドメインにアクセスしようとしても相手のサーバーにそもそも届きません． 甘い恋のくどき文句も相手に届かなければただのドンキホーテの独り上手ですね． 告白の電話も電話番号を間違えていては届くはずもありません． 同じようにDNSがちゃんと設定されていなければ，あるいは正しく設定されていてもpingのパケットが期待するサーバーに届いていない可能性があります．

ということでDNSへ問い合わせをするわけです． DNSへの問い合わせはhostやdigコマンドで確認します． www.linux.or.jpに翻訳されたマニュアルがあるので詳細はそちらを参考にしてください(dig，host)．

今回はdigに絞った説明をしようと思います．また，jokagiは最初からdigとhostから入ったのでnslookupは使う理由もなく覚えていないので今回は完全にパスします．

基本的な操作

下記はdigの簡単な使い方です． <DOMAIN>に問い合わせしたいドメイン名やFQDNを、必要なら問合せ先DNSサーバーを「@<DNS-SERVER>」と明示的に指定します． また，問い合わせ内容の指定が必要ならさらにもうひとつ後に追加します．

$ dig <DOMAIN>
$ dig @<DNS-SERVER> <DOMAIN>
$ dig @<DNS-SERVER> <DOMAIN> <QUERY-TYPE>

「@<DNS-SERVER>」を指定しなかった場合，OSや環境で設定されているDNSサーバーが使用されます． Linuxだと/etc/resolv.confで指定され，Windowsだとコマンドプロンプトで「ipconfig /all」コマンドを実行した結果の「DNS Servers」で表示されるIPアドレスに問い合わせます．

下記はdigコマンドでDNSに問い合わせをする引数の例です．

$ dig example.com
$ dig @ns.example.com example.com
$ dig @ns.example.com example.com mx

ひとつめはexample.comのAレコードをOSで指定されたDNSサーバーに問い合わせ，ふたつめは同じくexample.comのAレコードをns.example.comに問い合わせ，みっつめはexample.comを受け取るMTAをns.example.comに問い合わせます．

ここで重要なことは明示的に「@<DNS-SERVER>」を指定し，自分が問い合わせたいドメインを管理するプライマリDNSサーバーに問い合わせることです． これを指定せずに問い合わせると，ほとんどの場合いくつかの経路を通るのでどこかでキャッシュされてしまい，DNSが正しいかどうかがわかりません．

DNSはとにかくキャッシュに気をつけろ!!

DNSがドメインを管理するDNSサーバーで確実に問い合わせができるようになっていても注意が必要です． というのは，あくまで上記確認はDNSサーバーに直接問い合わせを行った結果の取得をしているだけです． 一般的にDNSは自分が契約しているISPを含め，なんらかのDNSサーバーを経由し，最終的にはあるドメインを管理するDNSまで問い合わせに行きます． そしてその結果は途中を経由したDNSサーバー上でほとんどの場合キャッシュが行われます． また，場合によっては問い合わせをしたクライアント自身でもキャッシュされる場合があります．

通常ドメイン内の各レコードはTTLというものでキャッシュ時間が制御されると思っていいでしょう． また，TTLは一般的には86,400秒，つまり1日を指定される場合が多く，もし1回問い合わせに失敗，あるいは間違った値を返してしまうと1日キャッシュされ，自分が管理できないDNSサーバーを経由した場合(ほとんどの場合経由するでしょう)1日正しい値を取得することができません(当然直接ドメインを管理するDNSサーバーに問い合わせるた場合はほとんどの場合設定どおりの値が返るでしょう)

そうなった場合は仕方がありません．さっさと勤怠の処理をし，仕事上のいやなことは忘れてのみに行くといいでしょう(嘘) その場合は1日限りでhostsなどで対処するといったやり方もあります(後々消し忘れないようにしてください)．

話が前後しますが，上記のようなことが起こらないようにするために，設定完了するまではゾーンファイル内のTTLは短めに(360とか600とか)しておくといいと思います．

DNSってどうやって問い合わせが行われるの?

DNSは世界中に分散するDNSサーバーに順次問い合わせをし，最終的にドメインを管理するサーバーにたどり着き，希望するドメインに対しての情報を取得します． これってどうにか目で追うことはできないのか? そうです．われらがdigコマンドにオプション+traceを付加することででDNSサーバーをバケツリレーで問い合わせてる様子を知ることができます． 下記はlabs.unoh.netとoss.poyo.jpを問い合わせていくさまを表示した例です．

$ dig +trace labs.unoh.net

; <<>> DiG 9.3.2 <<>> +trace labs.unoh.net
;; global options:  printcmd
.			209888	IN	NS	K.ROOT-SERVERS.NET.
.			209888	IN	NS	L.ROOT-SERVERS.NET.
.			209888	IN	NS	M.ROOT-SERVERS.NET.
.			209888	IN	NS	A.ROOT-SERVERS.NET.
.			209888	IN	NS	B.ROOT-SERVERS.NET.
.			209888	IN	NS	C.ROOT-SERVERS.NET.
.			209888	IN	NS	D.ROOT-SERVERS.NET.
.			209888	IN	NS	E.ROOT-SERVERS.NET.
.			209888	IN	NS	F.ROOT-SERVERS.NET.
.			209888	IN	NS	G.ROOT-SERVERS.NET.
.			209888	IN	NS	H.ROOT-SERVERS.NET.
.			209888	IN	NS	I.ROOT-SERVERS.NET.
.			209888	IN	NS	J.ROOT-SERVERS.NET.
;; Received 388 bytes from 127.0.0.1#53(127.0.0.1) in 1 ms

net.			172800	IN	NS	A.GTLD-SERVERS.net.
net.			172800	IN	NS	G.GTLD-SERVERS.net.
net.			172800	IN	NS	H.GTLD-SERVERS.net.
net.			172800	IN	NS	C.GTLD-SERVERS.net.
net.			172800	IN	NS	I.GTLD-SERVERS.net.
net.			172800	IN	NS	B.GTLD-SERVERS.net.
net.			172800	IN	NS	D.GTLD-SERVERS.net.
net.			172800	IN	NS	L.GTLD-SERVERS.net.
net.			172800	IN	NS	F.GTLD-SERVERS.net.
net.			172800	IN	NS	J.GTLD-SERVERS.net.
net.			172800	IN	NS	K.GTLD-SERVERS.net.
net.			172800	IN	NS	E.GTLD-SERVERS.net.
net.			172800	IN	NS	M.GTLD-SERVERS.net.
;; Received 500 bytes from 198.32.64.12#53(L.ROOT-SERVERS.NET) in 255 ms

unoh.net.		172800	IN	NS	bikkle.pls.jp.
unoh.net.		172800	IN	NS	qoo.pls.jp.
;; Received 76 bytes from 192.5.6.30#53(A.GTLD-SERVERS.net) in 595 ms

labs.unoh.net.		86400	IN	CNAME	bikkle.pls.jp.
bikkle.pls.jp.		86400	IN	A	210.224.161.61
pls.jp.			86400	IN	NS	bikkle.pls.jp.
pls.jp.			86400	IN	NS	qoo.pls.jp.
;; Received 122 bytes from 210.224.161.61#53(bikkle.pls.jp) in 23 ms

$ dig +trace oss.poyo.jp

; <<>> DiG 9.3.2 <<>> +trace oss.poyo.jp
;; global options:  printcmd
.			209874	IN	NS	J.ROOT-SERVERS.NET.
.			209874	IN	NS	K.ROOT-SERVERS.NET.
.			209874	IN	NS	L.ROOT-SERVERS.NET.
.			209874	IN	NS	M.ROOT-SERVERS.NET.
.			209874	IN	NS	A.ROOT-SERVERS.NET.
.			209874	IN	NS	B.ROOT-SERVERS.NET.
.			209874	IN	NS	C.ROOT-SERVERS.NET.
.			209874	IN	NS	D.ROOT-SERVERS.NET.
.			209874	IN	NS	E.ROOT-SERVERS.NET.
.			209874	IN	NS	F.ROOT-SERVERS.NET.
.			209874	IN	NS	G.ROOT-SERVERS.NET.
.			209874	IN	NS	H.ROOT-SERVERS.NET.
.			209874	IN	NS	I.ROOT-SERVERS.NET.
;; Received 404 bytes from 127.0.0.1#53(127.0.0.1) in 118 ms

jp.			172800	IN	NS	F.DNS.jp.
jp.			172800	IN	NS	D.DNS.jp.
jp.			172800	IN	NS	E.DNS.jp.
jp.			172800	IN	NS	A.DNS.jp.
jp.			172800	IN	NS	B.DNS.jp.
;; Received 305 bytes from 192.58.128.30#53(J.ROOT-SERVERS.NET) in 123 ms

poyo.jp.		86400	IN	NS	ns1.xname.org.
poyo.jp.		86400	IN	NS	ns0.xname.org.
;; Received 74 bytes from 150.100.2.3#53(F.DNS.jp) in 20 ms

oss.poyo.jp.		600	IN	A	61.192.220.150
oss.poyo.jp.		600	IN	NS	ns1.xname.org.
oss.poyo.jp.		600	IN	NS	ns0.xname.org.
;; Received 122 bytes from 80.82.17.242#53(ns1.xname.org) in 286 ms

このようにdigコマンドを使うとどこを経由した問い合わせが行われるかを確認することができます．

終わり

いかがでしょうか? DNSは概念や設定が非常に難しい感じがしますが，問い合わせだけに絞ると人間がシンプルに考えられればシンプルな仕組みであり，複数のDNSサーバーの動作もdigコマンドで複雑なことをせずとも必要十分な情報を簡単に調べることができます． DNSがわからない人もぜひdigコマンドを(ついでにhostコマンドも)使いこなしてpingがなくてもおおよその調査ができるようになってください．あでゅー．

日時: 16:24 | パーマリンク | コメント (1) | トラックバック (1)

komagataです。

Javascriptで何か書こうと思ったときにどのライブラリをベースにして作るかで非常に悩みます。一端特定のライブラリに依存してしまうと途中で変更するのが難しそうですし、コアオブジェクトを汚染しているものは混ぜると動かなくなる組み合わせもあります。

別に「Mochikitにしよう！」とか宣言して決めてしまえばいいじゃないかという意見もありますが、妙にそんなところが気にかかってなかなかプログラムを書き始められないことが多いです。

そこで、「どうしても使いたい関数はインライン化すればいいんじゃないか？」と思ったので試してみました。

どういうことかというと、例えばprototype.jsのObject.extendを使って以下のように書きたいところを・・・

var dst = {'foo':1, 'bar':2};
var src = {'foo':100};
var result = Object.extend(dst, src);

こんな感じで同じ動作をする無名関数に置き換えるということです。

var dst = {'foo':1, 'bar':2};
var src = {'foo':100};
var result = (function(d,s){for(var p in s)d[p]=s[p];return d})(dst, src);

コード量が増えるのでやりすぎると遅くなってしまいます。なるべく依存関数を使わずに書いて、どうしても使いたいところだけこうするのが良さそうです。

そういう関数を他にもいくつか作ってみました。

prototype.jsのObject.extend

(function(d,s){for(var p in s)d[p]=s[p];return d})

prototype.jsのElement.getDimensions（Elementの幅や高さを取る関数）

(function(e){if(typeof e=='string')e=document.getElementById(e);if(e.style.display!='none')return {width:e.offsetWidth,height:e.offsetHeight};var s=e.style;var o=s.visibility;var r=s.position;s.visibility='hidden';s.position='absolute';s.display='';var w=e.clientWidth;var h=e.clientHeight;s.display='none';s.position=r;s.visibility=o;return {width:w,height:h}})

scriptaculousのElement.setOpacty（透明度を変更する関数）

(function(e,v){if(typeof e=='string')e=document.getElementById(e);if(v==1){e.style.opacity=(/Gecko/.test(navigator.userAgent)&&!/Konqueror|Safari|KHTML/.test(navigator.userAgent))?0.999999:1.0;if(/MSIE/.test(navigator.userAgent) && !window.opera)e.style.filter=e.style.filter.replace(/alpha\([^\)]*\)/gi,'');}else{if(v<0.00001)v=0;e.style.opacity=v;if(/MSIE/.test(navigator.userAgent) && !window.opera)e.style.filter=e.style.filter.replace(/alpha\([^\)]*\)/gi,'')+'alpha(opacity='+v*100+')';}return e;})

元の関数をこれらで置換すれば依存が取れちゃいます。

ちょっと透明度を変えたいだけなのにprototype.jsとscriptaculousは大げさだなあというときに役に立ちます。

後でソースを読む人が辛くなるのでこんな感じのコメントを入れておくのも良さそうです。

var dst = {'foo':1, 'bar':2};
var src = {'foo':100};
var result = /** Object.extend */(function(d,s){for(var p in s)d[p]=s[p];return d})/**/(dst, src);

こういうセコい関数をたくさんストックしておいてコピペで使うと小さいプログラムを書くのが楽になりそうです。

日時: 18:22 | パーマリンク | コメント (0) | トラックバック (1)

先週末にウノウで行った開発合宿をテレビ東京さんに取材していただきました!!
放送予定は次のようになります。

1/22(月) 23:00 ワールドビジネスサテライト(テレビ東京)

是非ご覧ください!!

日時: 12:09 | パーマリンク | コメント (0) | トラックバック (3)

こんにちは。harukです。

今回はSoftBankの絵文字の対処法の基礎的な部分についてです。

絵文字コードは以下のようになっています。

0x1B    0x24($)   【 ? 】    【 X 】…   0x0F

【 ? 】 = G / E / F / O / P / Q

【 X 】 = 0x21～0x7E

【 X 】の部分には、[ < ]や[ ' ]や[ \ ]などが含まれているので多少やっかいです。

入力された絵文字を含む文字列を表示する際などには HTMLエンコード(実体参照化)してあげなければいけませんが、

絵文字の中もエンコードされてしまいます。

(例)

こんにちは(0x1B)(0x24)G>(0x0F)

↓

こんにちは(0x1B)(0x24)G&gt;(0x0F)

となってしまい、4文字の別の絵文字になってしまいます。

対応するにはPHPでは以下のように行います。

function SB_htmlspecialchars($str)
{
    $emoji_range = '[G|E|F|O|P|Q][\x21-\x7E]';
    $pattern = '/[\x1B][\x24]'.$emoji_range.'+[\x0F]/';
    $matches = array();
    $match_count = preg_match_all($pattern, $str, $matches);
    if (!$match_count) {
        return _htmlspecialchars($str);
    }

    $matches[0][] = '';
    $split = preg_split($pattern, $str);

    $split = array_map('_htmlspecialchars', $split);
    $htmlstr = '';
    foreach ($split as $key => $val) {
        $htmlstr .= $val.$matches[0][$key];
    }
    return $htmlstr;
}

function _htmlspecialchars($str)
{
    $encode = mb_internal_encoding();
    return htmlspecialchars($str, ENT_QUOTES, $encode);
}

さきほどの例文で、注意点が一つあります。

古い機種で、絵文字で終わっている場合に末尾の(0x0F)がつかない端末があります。。。

そのため、受け取った文字列に最初に以下の処理を通しておきます。

/* 末尾に0x0Fがない場合に追加 */
function SBEmoji($str)
{
    $emoji_range = '[G|E|F|O|P|Q][\x21-\x7E]';
    $pattern = '/[\x1B][\x24]'.$emoji_range.'+([\x0F]?)$/';
    $matches = array();
    preg_match_all($pattern, $str, $matches);
    if (isset($matches[1][0]) && $matches[1][0] === '') {
        $str .= pack("C*", 0x0F);
    }
    return $str;
}

こんな感じでSoftBankのエスケープシーケンスでの絵文字を対応しておけば問題はないと思います。

あとは、絵文字の相互変換のために、連続している絵文字を1文字ずつに分けたり、

2バイトの絵文字の対応を行ったり、という処理があるぐらいです。

基礎の部分でしたが、お役に立てれば幸いです。

最後に今年の目標を…「Vodafoneと言わないようにする」

修正(2007/10/19 18:15)

コメントにて指摘があり修正しました。ありがとうございます。

    // 修正前
    preg_match_all($pattern, $str, $matches);
    if (count($matches) == 0) {
        return _htmlspecialchars($str);
    }

    // 修正後
    $match_count = preg_match_all($pattern, $str, $matches);
    if (!$match_count) {
        return _htmlspecialchars($str);
    }

日時: 12:00 | パーマリンク | コメント (5) | トラックバック (1)

Keitaです。
僕は、以前速記会社に勤めていて、そこで親指シフトキーボードというキーボードが存在することを知りました。
使ってる人に聞いたところ、日本語を早く入力する事に関しては、親指シフト＞カナ入力＞ローマ字入力という公式が成り立つそうです。理由としては、ローマ字とカナ入力は、単純にキーを押す回数の差が出ますし、さらに親指シフトでは、1つのキーボードに4つ以上の文字が割り当てられるため、指を動かす距離がへりさらなる削減ができるということでした。

まぁそういうことで、プログラムで英字ばかり打つ僕には、あんまり関係ないのですが、そのおかげで入力機器にちょっとしたこだわりを持つようになりました。
今では、「プログラムする」というより、入力機器を如何に気持ちよくたたくかのほうが重要です。
いやさすがにそこまでいきません、すいません。

世の中には、一般に使われるQWERTY配列ではなく、（もともとタイプライターのバーが絡まないように打ちにくくした経緯のあるQWERTYより）Dvorakを使う方もいらっしゃいますが、社内にそんな人がいないかどうか、ちょっとアンケート調査してみました。

有効回答数（14人　技術者じゃな人も含む）

キー配列

• 106（JIS）(9人)


• 101（英字）（5人)

英字と、日本語がほとんど半々といってもいい感じです。

また、ウノウでは全員がノートパソコンで作業しているのですが、ほとんどの人がマウスを外付けしていました。
ただ、IBMのノートを使ってる人は、トラックポイントがあるのでいらないという人がほとんどでした。
なお、トラックボールの人は、14人中1人しかいませんでした。

こんな感じです。

• トラックボール(1人)


• トラックポイント（3人)


• 外付けマウス（10人)

僕が使っているキーボードを紹介します。僕が使っているのは割とスタンダードなセットで

• Happy Hacking Keyboard Lite2(英字)
• Microsoft Trackball Explorer

です。トラックボールは、マウスと違って腕全体を動かさなくてもポインタが操作できるので僕の肩こりの軽減に役立ってます。
ところでこのトラックボールは、もう売ってないようです。スタンダードなはずなのにおかしいです。

僕が英字のキーボードを使っている理由は、プログラムを効率よく行うためです。「:」と「;」が同じキーにあり、さらにその隣、「"」と「'」が同じキーにあるので、指を動かす距離が少なくてすみとても効率的です。日本語キーボードの「'」の位置って、あまりにあまりな場所です。

まぁ、そんな、僕の入力機器愛を語るだけのエントリですが、皆様のパソコンライフの助けになれば幸いです。ゆくゆくは、キーボードたたいてたら、システムできちゃったくらいにいきたいものです。

日時: 16:31 | パーマリンク | コメント (7) | トラックバック (0)

Dashboard posted from フォト蔵

Dashcode posted from フォト蔵

ダウンロード(145KB)

<a href="javascript:widget.openURL('http://www.hoge.com/')">リンク</a>

日時: 19:01 | パーマリンク | コメント (0) | トラックバック (0)

Sashaです。

明けましておめでとうございます！2007年も皆様にとって素敵な一年になるよう、心からお祈り申し上げます。今年もウノウラボをよろしくお願いいたします。

さて、今日は「選択」の話をしたいと思います。

この記事にたどり着いた皆さんは、例えばブックマークから、またはRSSリーダーから、Googleから、誰かのブログから、紹介してくれた誰かのメールから、あるいはウノウのサイトから、どういうわけかここへやってきました。どなたかの紹介でダイレクトにここへやってきた人もいるかもしれないし、様々な他の情報を切り捨て、数あるリンクの中からこのページへのリンクを選択した人もいるかもしれません。その選択は、いったいどのように行われたのでしょうか？ダイレクトにここへやってきた人は、「選択なんかしてない」とおっしゃるかもしれません。ですが情報がこのようにあふれかえっている世の中で、意識的であろうと無意識的であろうと、人は「選択」せずに情報を見つけ出すことができるでしょうか？

心理学では、「選択肢があるときとない時の人の満足度」の違いについて繰り返し研究がなされてきました（Sashaは心理学畑出身です）。同じ結果に行き着いたとしても数ある選択肢の中から選んだ時の満足度は、他に選択肢がなかった時の満足度と比べてはるかに高い傾向にあるのです。でも、選択肢が多ければ多いほど人の満足度は高まるのでしょうか？

今まで運がよければ2つ、3つあればラッキーだった選択肢（＝情報量）は、情報化社会によってこの10年ほどの間に200にも2000にも増えたことでしょう。ところが、ある一定の数を超えると、人はとたんに「選択」という自由行動を完全に放棄してしまいます。「選択する」という行動をやめない強い『自由意思』を持った人手さえ、選択の作業を自動化したり、単純化したりする業を付け始めます。

それでは、選択肢が膨大になった時、人はその数をどのように絞り込む傾向にあるでしょう。あなたは、何を使って自分に与えられた無数の選択肢を絞り込んでいるでしょう。考えられる意識的・無意識的な要素は次のようなものが挙げられます。

1) 見た目：　選択肢が多くなればなるほど、人は「見かけ」のインパクトを大事にする傾向にあります。視覚的情報は、人の主観的な部分にダイレクトに訴え、深く読んだり調べたりしなくても「好き」「嫌い」で簡単に選択肢を大幅に減らすことができるからです。

2) 自分との関係：　選択肢と自分との関係は近ければ近いほど、自分にとってのその選択肢の意味が具体化しやすくなり、それゆえ深く読んだり調べたりしなくても「近い」「遠い」というコンセプトで選択肢を大幅に減らすことができます。例えば、無数のRSSフィードから自分の興味にあった記事を探し出して選択的に記事を読む時にも、人は無意識的に自分とその記事の内容の距離とを計っているはずです。

Web2.0で繰り返し問われたものとして、上記のような選択肢のフィルタリングをいかにプログラム側がやってあげるか、という挑戦がありました。でもこれって、何もプログラムに限った挑戦ではありません。UIにだって、企画にだって、同じ挑戦があります。

UIでは、ユーザーの欲しいであろう選択肢をレイアウトとして優位に見せることで、ユーザーの意思決定を簡単にしてあげたり、画像や、動画や、色やタイポグラフィーの助けを借りることで、見た目のインパクトを用いて選択肢を絞ってあげ、ユーザーと選択肢の関係をビジュアル化しやすくしてあげる、ということが可能です。

企画では、見た目に魅力的な商品企画を提案し、演出するテクが有効であることは誰でも納得できるはずです（みんな一度くらいはそういう商品企画の良いカモになったことでしょう）。魅力的な商品企画によってユーザーは意外と、不毛な調査や学習の必要性から救われたりするのだと思います。そして、企画にユーザーのシナリオ・パターンが含まれていることも重要です。だれが、どこで、誰に対して、どういうことをするために、何を用いるから、その選択肢を選択するはずなのか、というシナリオを、企画担当の人はむしろプログラマより柔軟に考えられたりするでしょう。そういったシナリオは、ユーザが自分と選択肢との関係を具体化するために非常に役に立つはずです。

ずいぶんと抽象的な話になってしまいましたが、わたしは結構こういうの、好きなんです。そのうち気が向いたら具体的な例をあげたいと思います。ユーザの選択の自由を尊重して、プログラマさんとも企画担当さんとも、仲良く開発を行って行きたいと思います（なんて、すごい強引な締め方・・・）。

日時: 21:55 | パーマリンク | コメント (2) | トラックバック (0)

nenga2007ss posted from フォト蔵

今年もよろしくお願いします。

日時: 00:15 | パーマリンク | コメント (0) | トラックバック (0)