Entries of 情報デザイン

アイコンを合字Webフォントとして扱うSymbolSetが革新的にステキ

Symbolset teaser from Symbolset on Vimeo.



正直この発想はなかった!

symbolsetは、アイコンに特化したウェブフォント。

このフォントが面白いところは、アイコンを「合字」として割り当てていること。 まずはサイト上部の大きなテキスト部分がエディターになっているので、そこにheartやtweetなどとタイプしてみてほしい。ビックリするはず。

「合字」というのは、特定の文字ペアに特殊文字を割り振れる欧文書体のルール。日本ではなじみのない作法だけど、海外ではftやffなど、スペースが空いてしまう文字を特殊な文字で代替することがある。

SymbolSetはこれ利用して、フォントをアイコンとして活用できる仕組みを発明した。

たとえば、♥のアイコンを「heart」という合字に割り振っている。つまり文章内にheartという文字があれば自動的にハートが、「Twitter」という文字があれば自動的に鳥のマークが表示される。しかもデータ上はただの文字列なのでとてもセマンティック。

SymbolSetの利点

  • ベクターデータなので軽く、スケーラブル。
  • 画像ではなく文字なので、Googleやスクリーンリーダー・フレンドリー。
  • ULタグやLIタグ内にタイトルを列挙するだけで、アイコンメニューが作れる。



Symbolsetを導入すれば、面倒くさいアイコンは細々作ったり整理しなくても、まとめて使えるようになる。
現在はプレオーダーだけれども、これは試してみる価値がありそう!

仕事でtwitter使う人には、Bufferというサービスは必須かもしれない

百式の田口さんに教えていただいた、Bufferというサービスがとても便利。最近ヘビーユースです。

Bufferは呟きをTwitterやFacebookに、時間を分散して投稿してくれるサービス。朝おきて、気になった記事をブックマークレットで適当に登録しておけば、いい感じにばらけてTweetをしてくれるのです。僕はミーティング参加中なのに、2chブログを勝手につぶやいてくれたりとか。

iPhoneアプリもあるし、Chrome拡張もあって、拡張をいれるとTwitter本家のページにもBufferボタンがついたりとか細かいところも便利。特にクローム版のインストールをお勧めします。

お仕事でTwitter使う人は、Bufferに色々つっこんどけば寝てても、他の仕事しててもいい感じに運営されるのでとっても便利かもしれません。
締め切りなのに僕が呑気に呟いていたら、全部バッファーのせいです、僕が遊んでるわけじゃなかとです。

学習プロセスをリデザインした携帯のマニュアル

vitaminsdesignというグループが作った携帯電話マニュアルOut of the Boxがとても素敵。

電化製品の説明書といえば、この世で最悪の書籍の1つです。ところが、Vitamsというデザイン会社が素敵なソリューションを作りました。

一見ただの書籍に見えますが、表紙を開けてみるとビックリ!
この驚きを言葉で説明するのは野暮なので、とにかくまずはビデオをば。

Gumroadの有効活用するコツ

先日 @cbcnet に遊びにいって、 @securecat@hgw とUstreamをしました。酒を飲みながらのGumroadトークです。とても楽しかったです。

トークそのものは「Gumroadで海賊行為はビジネスとして成立しないよねw」という話しに落ち着いたり。この放送そのものはCBCで公開とかされるかもしれません。今回は、その飲み会の途中や帰り道に思いついた、Gumroadの有効活用テクなど。

Facebookでのプロモーションを左右する8つの成功要素

BuddyMediaというfacebookのソーシャルマーケ会社のだしたリポート、「Strategies For Effective Facebook Wall Posts: A Statistical Review(効果的なFacebookウォール投稿為の戦略:統計的レビュー)」が興味深かったので抜粋。

題名の通り、Facebookに広告ポストをする場合、投稿のどのような要素がどれだけトラフィックに影響を与えるかを統計的にまとめたレポート。

マジオモロいので要約。いつものごとく厳密なデータは原文をあたること。

HTMLで文字詰めするタイポグラフィー用JS

HTMLのテキストに対して、文字詰めを行えるスクリプト FLAutoKerningクラスを作ってみた。サンプルはこちらzipも

スクリプト内に任意のカーニングペアを定義することによって、ブログのタイトル等のテキストに字詰めを行ってくれるスクリプトです。なんか探しても見つからなかったので自分でやってみた。いちおう朗文堂の新宿私塾に行ったわけだし、僕もなんか成果物作らんとなぁ。。。的に。

実行はとても簡単。jQueryと一緒にhtmlにロードして、

FLAutoKerning.process($(‘h1′));
FLAutoKerning.process($(‘h2′));
FLAutoKerning.process($(‘h3′));

といった具合に、適用したhtml要素を一括していしてやるだけ。カーニング情報の定義も、FLAutoKerningクラスの頭に、下のようにem単位で定義するだけ。
これがあれば、行頭に括弧がこようが、トッキョキョカキョクが来ようが、もう何も怖くない。

Googleが世界中の美術館をストリートビュー化!ステキすぎる

Googleが2/1日に、世界中の美術館と美術作品をアーカイブ化するプロジェクト、Google Art Projectを発表。

ストリートビューで世界中の美術館をグィングィンと歩き回れ、作品もグーグルマップ的に閲覧できます。収蔵美術館は、下記のような超有名所が。

MoMA
メトロポリタン・ミュージアム
テート博物館(英)
ナショナルギャラリー(英)

大英博物館やV&A、ルーブルはまだみたい。

そして、ゴッホの絵を超拡大して、筆のタッチを見る事だってできる!!!!

何が素晴らしいってこのプロジェクト、完全にお金にならないというか、グーグルの世界の全ての情報を集約するというコンセプトを体現する為だけに作られた、文化事業ってこと。こういうプロジェクトはステキすぎる。

ちょっと、リソースの枚数が少ないのか、移動が酔いそうな感じだけど、将来的には改善されるんじゃないかと。
次は、世界の遺跡がくる。。。よね?

【寄付ハック】 3000円以上を慈善団体に寄付した人に、iPad2をプレゼントします



「3000円以上どっかの慈善団体に寄付した人から、抽選で1名に、新型iPadプレゼントしようと思います。」 現在募金額40万円突破。ありがとうございます。

清水さんの寄付に関するエントリへの、自分なりの解答です。

ルール
・「1/15 〜2/15の期間に3000円以上を慈善団体に寄付し、連絡先をコメント欄に書き込んだ人」から、抽選で1名に次に発売される新型iPadをプレゼント(アメリカ行ってでも入手します)。

細かい規定は末尾にあるので、各自で確認。
質問等は僕のTwitter@fladdictへ。


オンラインで簡単に寄付できる例
国境なき医師団
マクドナルド・ハウス・チャリティー
ユニセフ(日本支部無視して直接)
パキスタンの洪水
中国Qinghai の大地震
チリの大地震
ハイチの大地震






なんでこんなアホなことを?
しない善よりする偽善。売名だろうが下品だろうが、功利が大きければそれでいい。ペットボトルのキャップ集めたり、千羽鶴とか折時間があるなら、工事現場で労働して現金送れ、そう思っちゃうタイプです。

その一方で、孤児院の子供1人にランドセルを送ることが、どれだけ世界をよくするかもわからない。マキャベリスト兼、功利主義者を自称する僕としては、あらゆる手段を選ばずに最小の労力で最大のハピネスを生み出したい。目指すべきは戦術的勝利ではなく、戦略的勝利。そしてIT業界の人間ならば、個別対処よりもシステムによる解決こそジャスティス。

なんとか法律の隙間をくぐり抜け、最小限の出費で最大限の効果を出せないか?

で、思いついたのがソーシャルハック。 3000円以上どっかに寄付した人の中から抽選で1名に、次に発売される新iPadを自腹でプレゼント。です。普通のiPadじゃないですよ、新iPadを、米国で発売しだい、先行入手してお届けします。。4ギガのやつ。

iPad1台の金額以上の効用を作りつつ、税制上の問題をあざやかに抑え、プレゼント提供者と金銭を切り離し景品表示法・不正競争防止法・当せん金付証票法・賭博法を回避しつつ、寄付に興味の無い人の注目を喚起し、不適切ギリギリの手法で「寄付」そのものに対する議論を活性化させる。。。その上自分は厳密には1円も寄付していないという偽悪趣味(iPad分は出費するけど)、みんなは「寄付とか興味ないけど、iPadが欲しいから仕方なくやった。後悔はしていない」とかいいはれます。

このアプローチへの異論、反論は大歓迎ですが、できればiPad1台分以上の寄付をしてから反論してくれると、みんながハッピーになると思います。 「ケッ!反論したいから、しかたなく寄付してやったぜ!」ってカッコイイ台詞も吐けます。



おまけ


賛同するけど3000円がない、寄付メンドイ、という方は、気が向いたら弊社のiPhoneアプリiPadアプリを買って頂けると助かります。万が一、支援でポチッと115円のアプリが600個売れると、およそiPad1台分の購入資金が捻出できます。知らない人にナチュラルに善人だと思われても背中が痒くなるので、これぐらいは宣伝させて。





詳細なルール
・当選対象は、1/15〜2/15の間に、3000円以上の寄付を慈善団体に行った人間。

・参加者は、寄付後にコメント欄に書き込む。要連絡先。証拠へのリンクも推奨。

匿名で参加したい人は、連絡先のみコメントして、商品引き渡しのタイミングで寄付を証明するのでもアリです。

・2/16日に厳選な抽選を行い発表。

・商品の引き渡しには寄付の証明が必要。

・当選者と連絡がつかない場合は、最終的な当選者が出るまで再度抽選を行う。

参加者の悪質なイカサマが発覚した場合、該当者は新iPadの入手費用(渡航代等)を全負担することに同意したものとする。

・トラブル等により該当者不在の場合は、このエントリーをはてぶした人、Tweetしてくれた人、ブログで紹介した人から抽選で1名に進呈。

・スポンサーが表れた場合、プレゼントされるiPadの数が増える可能性がある。


・受賞者が望むなら、同金額相当の別のものでも可。


免責
・終了日までに証明された寄付の総額がiPad1台分以下であった場合、キャンペーンが中止される可能性があります。

・法律的な問題が発生し、キャンペーン中止を余儀なくされた場合、受賞資格者1名に、私とは無関係の第三者から突然iPadが送られてくる不思議現象が起こる可能性があります。

・米国での先行発売版(4G)を入手失敗した場合、プレゼント受け渡しが日本での発売日にずれこむ可能性があります。


最後に
このハックのインスピレーションを与えてくれた、マザー・テレサに敬意を表します。 ローマ教皇から貰ったスポーツカーを景品に宝くじを行い、多額の寄付金を捻出した彼女のアイデアは、20世紀ソーシャルハック最大の発明だと思います。もちろん、このハックのきっかけを与えてくださったshi3zさんにも多大なる敬意を!


バナー
tatsdesignが、エントリ投稿後数時間でバナーとA4のポスター(PDF)を作ってくれました。仕事はやい! ブログ等でご紹介される方はよろしければご利用ください。







多分こうすれば、Kinectの表情認識っぽいの作れる

Cesで発表された、Kinectによる表情認識のアバター技術。これ面白いなぁと思いつつ、ちょっと工夫すれば以外と普通のテクノロジーでいけるんじゃないかと。

いま時間がないので、自分で実装できないけどロジックのメモ。これを読んだ誰かに託します。そしてトラックバックをしてくださいwww

Step1: OpenCVで顔を認識する
とりあえずは定番のOpenCVで顔の矩形を認識します。
ここまでは普通普通。

Step2: 口を認識する
で、認識した顔の矩形ビットマップの下半分を切り出して、それをソースに、口をOpenCVで認識します。
定義XMLは本家CVにあるので問題無し。下半分を切り出すことで、目や眉毛を口と認識する問題を回避します。顔をソースに再帰することで、目と口が同じ顔に属することを保証します。

普通の人間は、顔の下50%に口がついていると思うので、口がおでこにある人を認識できなくてもいいんじゃないかと。

Step3: 口の表情を求める
Step2で、口の矩形データが取得できました。でですね、この矩形の幅と高さの比率から、口の表情を求められるのではないかと。ディフォルトよりWが広くなったらば、スマイルですし、Hが高くなったらば口をあけています。こいつをマッピングしてやればいいのではないかというわけです。
暇があれば、閉じた口、開いた口、引き延ばした口で、それぞれOpenCVの定義ファイルを用意してやればいいと思いますが、それはさすがにメンドウなのでWとHの比率だけでいいかと。

Step4: 目か眉毛を認識する
次は、顔矩形の上70%ぐらいのビットマップをソースに、目か眉毛を認識します。目のほうが楽かな。

画面上半分を更に目の検出をします。 2個検出されたら左にあるのが左目、右にあるのが右目です。口は除外されているのでご検知はされない。。。と。で、目の上にある塊が眉毛として認識。

成人の人間の顔は、骨格的にだいたい顔面の上下中心に目があります。左右でいうと中心線を基準に1/3ぐらい。プログラマがそういった比率をしったうえでCVのプログラムをそこだけに奔らせれば、認識精度は大幅にあがります。

で目の表情も、目と眉毛の距離関係からとれるんじゃないかと。 余裕があれば眉毛の矩形の比率やらから、眉毛が起きてるか寝てるかをとればよいということで。

で、あとは認識した顔をベースに、絵をマッピングしてやる。顔の認識に失敗した場合は、最後に顔が認識されたときのデータを引き続き採用すればいい。 顔のパーツの位置や角度は、移動平均を用いてまるめてやれば認識のガクガクしたノイズも削れる。

メンドクさそうではあるけど、既存の技術で全部できそうだし、テクニカルな壁はいっさいなさそうじゃないでしょうか?どうなんでしょ? 僕の処理は顔が正面を向いていることを前提としていますが、目2個距離と口の位置関係から、顔がある程度横を向いたのも検出できると思う。

お暇なプログラマがいたら、是非ためしてみてくださいまし。

Facebookに公式ページを作った。FBを研究してみる





最近は猫も杓子もソーシャル、ソーシャルで、ちょっとどうなるのかなぁ?と思いつつも、やっぱり無視するのはちょい怖い・・・ そんな今日この頃、みなさま如何お過ごしでしょうか?

自分で人柱になってみなければ、新しいモノのよいも悪いもわからない。というわけで自分のアプリのFacebook公式サポートページを作ってみました。Likeボタンを押せば参加できます。前からgroupは持っていましたが、Pageを作り直してみた。

とりあえず海外向けのプレス情報等はここに集約してみて、どのような効果があるのかを試してみようかと思います。必要であれば専用のFacebookアプリも作りますとも頑張ります。

どうも国内ではFacebookマーケを真面目にやっている層がいない、あるいはいても情報の開示に積極的でない雰囲気があるので、身を以て切り開いてノウハウを共有できればと重います。マーケットが狭いうちに情報を囲い込んでもあんまり意味ないし、だったらマーケットがデカくなる部分に積極的にコミットして、エースプレイヤーになるほうが楽しいよね。。。と思う。というか自分の人生、その戦略しか知らないし。

とりあえず Art & Mobile のサイトとFBを密結合させてみたり、$300ほど広告を出稿してみたり、告知ツールやページ内ストア、ページ内懸賞ツールなどを幾つか導入して、実験開始。新アプリとかの告知をここから統合的にできるといいなぁと。