Previous month:
January 2006
Next month:
March 2006

究極のモバイルマルチプレーヤーゲーム

060227_082758  先週のエントリー「UJinn Competition」、大胆にも「私は結構このゲームが得意なので、あまりいきなり高いハイスコアを出してしまっては他の人のやる気がなくなってしまうかも知れないので、今週末はあえて本気ではプレーしないことにしておく。週明けまでに私がワクワクするぐらい高い得点を誰かが取ってくれることを期待して…。」と書いてしまった手前、どうなるものかと少しハラハラしていた。

 やはりこの手のパズルが得意な人は沢山いるようで、週末だけで、485点の高スコアを取得した人が7人(参照)。私も辛うじて同じ得点を得ることに成功したが、危ない所であった。左端のねずみをどうやって消すかが「全クリ」ボーナスを得るキモだが、かつ同時に他の種類のコマを出来るだけ集めるかが高得点のポイントとなる。これだけの人が485点を取得したということは、これが理論上の最高得点なのかも知れないが、証明は簡単ではない。

 ユーザー登録が必要なのにも関わらず100人以上の人に参加していただけたのは喜ばしいことだ。この手のサービスを提供するときに、ユーザー登録があるとないとでは敷居の高さが大きく違うので、その辺りのアンバイ(注1)をキチンと意識してサービスを設計することはとても大切である。これからも、「今日のひとこと」のようにユーザー登録なしで無記名で参加できるものと、そうでないものとの両方をあえて提供し続けて、色々と勉強させていただこうかと思う。[注1:ちなみに、アンバイは『塩梅』と書くことを発見。塩の配分だから、『塩配』と書くものとばかり思っていた。かけなかった漢字をかな漢に頼って使うのは好きではないので、あえてカタカナで表記]

 ちなみに、写真は今回の日本出張に合わせてアマゾンで注文しておいた「激辛数独」の1と2。二冊づつあるのは、夫婦で「数独対戦」をするためだ。同じ問題に同時に着手して、どちらが先に解くことができるか競争するのだ。気楽でどこでも楽しめるので、飛行機や列車での移動中に最適である。究極のモバイルマルチプレーヤーゲームだ(Web2.0をはるかに超える空前のイノベーション参照)^^。


「ステレオ文字グラムジェネレータ」を作ってみた

060225_063202 つい一昨日に「名作に隠されたメッセージを探せ!」という企画をアナウンスしたばかりだが、やはりその場で作れるという便利さは必要だろうということで、飛行機で移動する時間を使ってジェネレータを作ってみた。

 「ステレオ文字グラム」ジェネレータ

 自分だけでひそかに楽しむこともできるし、作った作品を投稿することもできるので、ぜひ遊んで見て欲しい。投稿していただいた作品には個別のURL(=Permalink)がアサインんされるので、自分のブログからリンクを張るなども可能である。

 しかし、これだけシリーズ化して書いているとそろそろ名前が欲しくなってきたので、これからは「ステレオ文字グラム」と呼ぶことにした。良くあるの3D画像が隠されたものを「ステレオグラム」と呼ぶので、それをもじって(文字って?)作った名前だ。

【追記】ちなみに、このジェネレータで使っているDIVのレイアウト(width と float)がなぜかFirefox(1.04)でうまく動かないのだが、どなたかこの問題の回避の方法をご存知の方がいたら教えていただけるとありがたい。しかし、このブラウザーごとに少しづつ異なるCSSの解釈のしかたは本当に不便で困ったものだ…

【追記2】 El Dorado さんから指摘していただいた通り、Firefox での不具合は、数字から始まるclass名("3d")が原因でした。IE でも Safari でも動いたので安心して見逃してしまいました。「聞くは一時の恥、聞かぬは一生の恥」とはこのことですね。助かりました。


UJinn Competition

060222_054538  「Java Applet版のUIEngineのテスト」、「UIEngineとPHPの組み合わせでサービスが作れるかの実験」、などを兼ねて今週作ったのが、このUjinn Competition。サービスの完成度としては、まだ25%ぐらいだが、とりあえず遊べるようはになったので公開。

 「Ujinn」は、「さめがめ」、「まきがめ」、「Free Cell」 など色々な名前で知られるパズルゲームで、同じコマが縦横に隣接しているものをまとめて消して点数を稼いでいくという一見単純なゲーム。しかし、一度に取ったコマの数が多いほど一コマあたりの点数が高くなるので、どんな順番で消すかによって大きく得点が異なってくる上に、全てのコマを消した時のボーナスがあるため、同じレベルを何度も何度も遊べる(というか何度もやらないと高得点が取れない)という特徴のある、以外に奥の深いゲームである。

 反射神経、記憶力、運などに左右されるゲームの多い中、このゲームの様に、純粋にロジックだけで高得点を目指すというゲームは私にピッタリだ。一人で遊んでいても楽しいのだが、これをマルチプレーヤーゲームにして、複数の人で高得点を競い合うのは楽しそうだ、と昔から考えていたので、この機会に一気に作ってしまったのだ。

 遊び方は、このリンクをクリックして、ユーザー登録をしていただくと、ゲーム画面に移行するので(Javaのruntimeが必要)、そこでキーボード、もしくはマウスを使って消したいコマを選び、エンターキー、もしくは、再クリックで消していただければ良い。何度か遊んでいればコツがつかめて来るので、初めての方もぜひ遊んでいただきたい。

 ちなみに、私は結構このゲームが得意なので、あまりいきなり高いハイスコアを出してしまっては他の人のやる気がなくなってしまうかも知れないので、今週末はあえて本気ではプレーしないことにしておく。週明けまでに私がワクワクするぐらい高い得点を誰かが取ってくれることを期待して…。

【追記】 このサービスであるが、このくらいのものであれば無料版のSDKと安価なレンタルサーバーで誰でも手軽に作れてしまう、ということを自ら証明したかったので、あえて会社のサーバーは使わずに作ってみた。必要なものは、SDKに含まれているJava Applet版のUIEngineとレンタルサーバー上のPHP+MySQLである。SDKには、Java Applet版以外にも、DoJa版(DoCoMoの携帯)、J2ME/MIDP版(Vodafoneの携帯)なども含まれているので、色々と遊んでいただけるとありがたい。


企画、「名作に隠されたメッセージを探せ!」

060213_084451  去年の夏に、「世界初?3Dブログエントリー」というエントリーを書いて以来、何とか大量生産する手法はないものかと考えていたのだが、今日、CSSのたまたま資料を読んでいて思いついたことがあったので、試しに作ってみたら、結構簡単にできてしまった。

 https://satoshi.blogs.com/3d/wagahai.html

 興味のあるウェブ・エンジニアの方はソースコードを見ていただければ一目瞭然だが、"position:relative" が全体のレイアウトに影響を及ぼさないという点を利用すると、こんなに簡単に「ステレオグラム」が作れてしまうのだ。

 「これで大量生産が出来る!」と思ったのだが、隠しメッセージが含まれた文章を作るのは結構大変である。そこで、思いついたのが、著作権の切れた小説などから、強引に隠しメッセージを拾い出す、というアイデアである。上の例は、夏目漱石の「我輩は猫である」の冒頭の文章から、無理やり拾い集めて作った文章を「隠しメッセージ」として浮き出させているのである。

 そこで、突然だが、読者の皆さんに一つお願いがある。青空文庫に行き、自分の好きな作品を選んでそこから無理やりに「隠しメッセージ」を探しだしていただきたいのである。まず母体となる文章(300~400文字程度)を作品の中から抜き出し、そこからさらに10~30文字の「隠しメッセージ」を拾い出すのである。

 そうやって見つけ出した「隠しメッセージの含まれた文章」は、このエントリーのコメント欄に投稿していただければ、私が上の例と同じ方法でステレオグラムに変換して、このブログで公開する。コメント欄に投稿していただく時には、母体となる文章をそのまま貼り付け、隠しメッセージとして抜き出す文字を【】で囲んでいただければよい。

 上の例を同じ方法で記述すると、以下のようになる。

 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。【何でも】薄暗いじめじめした所でニャーニャー泣いていた事だけは【記憶している】。吾輩はここで始めて【人】間というものを見た。しかもあとで聞くとそれ【は】書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は【何と】いう考【も】なかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時【妙なものだ】と思った感じが今でも残っている【。】

 そもそもメッセージなど隠されていない文章中に無理やりメッセージを探し出すという作業は、かなりクリエーティビティが必要な作業なので、週末に暇つぶしにでもやっていただけるとありがたい。


Web2.0を活用する10の方法、その7

051225_115603  「Web2.0を活用する10の方法」その7は、"Allow Low-Friction Enrichment of Your Information"。またまた日本語に訳しにくい言葉なので意訳してしまうと、「ユーザーが気軽に参加してサービスに付加価値を与えてくれるような仕組みを提供しろ」ということである。ユーザー参加型のサービスの重要性はさんざん語られているが、その際、「ブログを書く」だとか「画像をアップロードする」などコンテンツそのものを作り出すような参加の仕方は多くの人にとってまだまだ敷居が高いということを良く認識してサービスの設計をする必要があるという話である。

 筆者はdiggをその良い例として挙げているが、ブックマークコメントの方がより顕著な例である。このブログでも「恋はブックマーク」というエントリーを以前に書いたことがあるが、面識の無い人のブログにコメントを残す、という行為に結構抵抗を感じる人は多いのだが、ブックマークコメントなら抵抗感が少ないのである。この「ユーザーが参加する際の心理的な敷居を低くする」ということは、ユーザー参加型のサービスを作る上ではとても大切なのは当然のことである。

 私が「今日のひとこと」、「ラーメン大好き」などのユーザー参加型のミニアプリを作って遊んでいるのも、その辺りの「参加しやすさ」や「心理的な抵抗感」を実際にこの目で確かめてみようという試みである。

 ちなみに、"low-friction" は直訳すると「摩擦の少ない」になるが、この表現はユーザーインターフェイスの議論や、ユーザー参加型サービスの参加しやすさ、などの議論の時に良く使う表現なので覚えておいては損はない。ただし、日本語で表現する場合は、「抵抗感が少ない」、もしくは意訳して「敷居が低い」「気軽に参加できる」などとした方が意味は通じるだろう。


Web2.0を活用する10の方法、その5と6

060115_152747  「Web2.0を活用する10の方法」その5は、"Make Your Site Offers Its Content as Feeds and/or Web services"。「サイトのコンテンツをRSSフィードなり、ウェブサービスの形でアクセス可能にしましょう」ということである。補足する必要もないかも知れないが、特にRSSフィードに関しては、HTMLが「人間が読むもの(view)」をやりとりするデファクトスタンダードになったのと同じように、RSSが「ソフトウェアが読むもの(data)」をやりとりするデファクトスタンダードになった、ということをしっかりと認識してウェブ・サービスの設計をすべきである。これは決して「いかにもWeb2.0的なサービス」に限った話ではなく、もっと単純な「企業のニュースリリース」などにも応用すべき考え方である。先日少ししらべてみたのだが、自社のニュースリリースをRSSフィードとして提供していない企業がまだまだたくさんある。

 その6は、"Let Users Establish and Build On Their Reputations"。訳しにくい言葉だが、「コミュニティに参加したユーザーの評価システムを提供して、それぞれのユーザーが自分の『評判』を高めていったりできるようにすべき」という意味である。eBay の成功にこの「ユーザーの評価システム」がものすごく重要な役目を果たしてきたことはさんざん言い尽くされてきたことだが、掲示板にしろWikiのようなものにしろ、こういった機能を上手に利用することによりそれぞれのユーザーが責任感を持って行動するように仕向ける、という余地はまだまだたくさんあるように思える。「2ちゃん」に代表される匿名掲示板の怖さ・醜さを、こういった仕組みを利用してじょうずに排除することができれば、そういった掲示板サービスをより安心して使ってもらえるようになるような気がする。


エアロスミスとエアロスイス

060216_140313060217_025632

 エアロスミスのコンサートに行ってきた。前回の「Queenもどき事件」に懲りて、今回は本物であることを何回も確認してのチケット購入。確かに本物だった、オーラがすごい。スーパーボウルの時のローリング・ストーンズを見たときに思ったが、ロックスターは歳をとったからといって歌のスタイルを変えるわけにはいかないのだ。

 ところで右上の写真は、我が家で使っている加湿器。商品名は「AIR-O-SWISS」。スイスの高原のようなさわやかな空気を、というネーミングなのだろうが、私にはエアロスミスのもじりとしか思えない。

 ふと思ったのだが、西城秀樹はディナーショウでまだ「ヤングマン」を歌うのだろうか?


ブログパーツで遊べる自由度の高いブログサービス、ベスト10

060211_055807 今までこのブログでも4つほどブログ用ミニアプリ(最近は「ブログパーツ」という名前が定着してきたようだ)を公開した来たが(参照)、色々と勉強になる。特に「今日のひとこと」はとても評判が良く、既に50以上のブログで採用され、なお増え続けている。期待した通りバイラルマーケティングの効果が現れているようだ。

 そもそも IFRAME を使ったブログパーツを、「以下のHTMLをブログのサイドバーに貼り付けてください」などという不親切な方法で提供して使っていただけるものか不安であったが、なんとか使いこなしているただいているようである。ただし、IFRAMEが使えるブログと使えないブログとがあるようで、その辺りは一度ちゃんと調査をしなければいけないと考えていたところである。

 しかし、自分で調査をするとなると結構な手間なので、ここは wisdom of crowd「みんなの意見」は案外正しい)の発想を利用させていただいて、「どんなブログサービスを使っている人が私のブログパーツを使っているか」というデータだけを利用して、「ブログパーツなどで遊びやすい自由度の高いブログサービス、ベスト10」を作ってみた。

番外一位 MovableType (13件)

 MovableType はブログサービスではなくソフトウェアなので、厳密には番外だが、とりあえず一番件数が多かった。MovableTypeでブログを書いている人たちというのは、ほとんどがレンタルサーバーを借りて自分でソフトウェアをインストールして走らせているエンジニアの方たちである。究極の自由度を持ちたければ、レンタルサーバーを借りてMovableTypeを走らせれば良い、ということであるが、これは一般の人にはあまり参考にならないデータである。

第一位 Livedoor ブログ (8件)

 「Livedoor ブログはその自由度ゆえに人気がある」という話を聞いたことがあるが、まさにこれはそれを証明するデータである。ライブドアという会社は、株価操作疑惑でおかしなことになってしまったが、サービスとしてこれだけのユーザーを抱えてしっかりと運営しているという事実は評価に値する。カジュアルなユーザーではありながら、ブログパーツなどで色々と遊びたい人たちに最適化された設計になっているのだろう。私のブログパーツを使っていただいている方のブログを見るかぎり、Livedoorブログは女性に人気があるように思える。

第二位 FC2ブログ (7件)

 この調査をするまでは名前も聞いたことがなかったが、わずか一票差でどうどうの二位に食い込んだのがこのFC2ブログ。無料ブログではありながら、容量は(怒涛の^^)1GB、レイアウトも自由自在、初心者でも簡単、というあたりをうたい文句に着実にシェアを増やしてきたのだろう。

三位タイ ココログSeasee Blog (それぞれ4件)

 調査前は、「一位はココログかLivedoorだろう」と予想していたのだが、残念ながら三位タイになってしまったのがココログ。他社に先駆けてブログサービスを提供し、当初はとても良い感じでユーザーを増やしていたようだが、競争相手が増えて伸び悩んでいるのだろうか。Seasaa に関しては私へのブログのリンクを張る人が結構増えているので意識はしていたが、ココログにならぶ第三位とは大健闘。

五位 Jugem (3件)

 Jugemは六位タイに入っているロリポブログを提供している Paperboy&co の提供しているブログサービス。Paperboyといえば、コトノハという面白い遊びを展開しているオオヒダタカシさんのいる会社。色々と過去の経緯があってこうなっているのだろうが、Jugem と ロリポップの二つのブランドでブログサービスを展開しているのはもったいないと思う。一つのブランドであれば、ココログを抜いて単独三位になれたのに。

六位タイ ウェブリブログヤプログロリポブログTypepadBlogger (それぞれ2件)

 この辺になってやっと北米ブロガーが多く使っているTypepad、Blogger などが出てくるところが面白い。私が使っているのも Six Apart 社の Typepad だが、さすがに有料サービスだけあって、品質はとても高い。匿名でブログをウェブ日記のように使う人には必要ないが、実名でブログを書いて自分のキャリアに役立てようと考えているのであれば、Typepad はお勧めである。

 十位以降には、朝風呂News Handler関西どっとコムブログ人SonetAOL Diary などが各一件づつで続く。「IFRAMEが使えない」というブログサービスついては、はてなダイアリーexciteブログで使えないとの報告をいただいている。


「ウェブ進化論」はなぜ「書籍」として出版されなければならなかったのか

 梅田望夫氏の「ウェブ進化論」は、「次に日本に出張した時に読む本」としてアマゾンのウィッシュリストに入れておいたのだが、昨日になって梅田氏本人から本が贈られて来た(感謝、感謝)。ついこの前もSixApartの「ブログオンビジネス」でほとんど同じようなことを経験したので、妙なデジャブ感覚を味わいながらの一気読みである。

 梅田氏とは一度だけ食事を一緒にしたことがあるのだが、その時に一番印象に残った言葉は、「コンサルタントという商売は並大抵の忍耐力ではできない商売ですよ」という言葉。この本を読んでも伝わってくるが、「今ウェブの世界で何が起こっているか、何が起ころうとしているか、なぜGoogleがあれほどの株価総額を持つのか」というごく単純なことを理解できない、理解しようともしない人がこの世の中にはたくさんいて、そういった人たちに本当の意味で有意義なコンサルタントサービスを提供したり、説得したりするのは限りなく大変な作業である、ということを身にしみて実感しているからこそ出てくる、いかにも梅田氏らしい言葉。

 この本を読む前は、「梅田氏はなぜ(ブログではなく)本を出版するのだろう」と思っていたが、結局のところ、「今の時代になってもブログから情報を得ることをしない(できない)ような経営者、エスタブリッシュ層が日本にはたくさんいるので、その手の人たちに彼のメッセージを伝えるには古典的な書籍という手段に頼らざるをえない」という悲しい現実を良く知っている彼だからこそのアプローチなのであろう。普段から梅田氏の考え方に触れている私には、ビシバシとメッセージが伝わってきたが、初めて彼の文章に触れる人たちにどのくらい伝わるものかとても興味がある。

 ちなみに、個人的に嬉しかったのが、本の中ほど(Web2.0・ウェブサービス・API公開の章)で、このブログのエントリー「Goolge OS を妄想すると未来が見えてくる!?」が引用されていること。Microsoftという「こちら側」の代表選手である会社で14年近くOSやブラウザーの開発をしていた私が、なぜある時点で「こちら側でのソフトウェア開発」に一切興味を無くしてしまったのか、を私なりに表現した結構思い入れのあるエントリーなので、こういう形で引用していただけるととても嬉しい。

 梅田氏は(OSのAPIと比べてウェブ・サービスのAPIの方が)「可能性空間が圧倒的に広い」という巧みな言葉を使って表現しているが、まさにその通りである。常に最先端を走っていたいエンジニアとしては、より可能性空間が広い方で働きたいのは当然である。米国において、「こちら側」から「あちら側」へ(局所的にはMicrosoftからGoogleへ)ものすごい勢いで頭脳の流出が起こっているのはまさにこれが理由である。


色や大きさを後から変更できる AQUA風ボタンの作り方

 二日ほど前のブックマークの人気エントリーに入っていた、「AQUA風ボタンの作り方リンク集」を見てつくづく思ったのだが、Photoshopは奥が深く、同じような効果を作り出すのに何通りも方法があるのが興味深い。そこで、今日は、Photoshopにも関わらずあえて全てをベクターデータで書くという特殊な技法(知り合いのデザイナーから教わった技法)でAQUA風ボタンを描いてみた。

 まず最初に、"Rounded Rectangle Tool"で適当な大きさの角の丸い四角を書く。角の丸みは、Radiusの値で変更できるが、この場合は16pxとした。

Aqua_1

 この時自動的に作られたレイヤーをダブルクリックして、レイヤースタイルのInner Glow属性をオンにする。Blend ModeはMultiplyで、Opacityは40%程度が適切、色は黒にする(黒にしておくと、後でメインの色を変更したときにここを変更しないですむ)。

Aqua_2

 次に同じレイヤースタイルのダイアログボックスで、Drop Shadow属性をオンにする。Blend ModeはやはりMultiplyで、Opacityは75%。色はInner Glowと同じく黒にしておくと手間がかからなくて良いのだが、透過した光の効果を出したいときは少しメインの色を混ぜると良い。(ただし、その場合はメインの色を変更したときに、ここにも変更を加える必要がある。)

Aqua_3

 ダイアログボックスを閉じ、レイヤーをコピーする。コピーしたものをctrl+Tで変換モードにし、Altキーとマウスで半分より少し小さいぐらいにしてから、位置を調整する。次にこのレイヤーをダブルクリックしてレイヤースタイルダイアログを開き、Fill Opacityを0にしてしまう(そうしないと、メインの色を変更したときにこのレイヤーの色まで変更しなければならなくなる)。レイヤースタイルはGradient Overlayのみオンにし、Blend ModeをNormalで、Gradientを白で100%から25%上から下に向けてかける。これで「てかり」の完成だ。

Aqua_4

 次に「てかり」のレイヤーをコピーし、上下反転し、位置合わせをし、ctrl+Tではみ出ない程度に少し大きくする。次にこのレイヤーをダブルクリックしてレイヤースタイルダイアログを開き、Fill Opacityは0のまま、今度はInner Glowのみをオンにする。Blend ModeはScreen、Opacityは75%、ただし色は白で0%から50%のOpacityとしておく。これで完成だ。

Aqua_5

 この手法で作っておくと、全てのデータはベクターデータとして入っているので、後からサイズの変更が簡単にできる。その上、色情報を持っているのは一番下のレイヤーのみなので、そこの色を変更するだけで、簡単に他の色のボタンが作れてしまうのである。

Aqua_3buttons