2012-03-23

うっかりGoogle+を使っていると色々とバラマキかねないという話

Google+ Facebook

　最近、Google関連のサービスで実名を不特定多数に公開してしまう、という話題が流行りです。

(前編) うっかりGoogle+を使い始めるとGMailで本名をバラまきかねない - ぼくはまちちゃん！(Hatena)
Gmail・Hotmailを使っている人は、本名が垂れ流しになっている可能性があるので注意！｜お絵かき速報！萌え絵上達法

　でも、本当に怖いのはメールアドレスの流出です。

　単独ではそれほど問題ではない、あるいはセキュアだった機能が組み合わさるとおもわぬ脆弱性になるというのはよくあるのですが、Google+の仕様はその典型で

Google+では、だれかをサークルに入れるとその人にこちらのメールアドレスが渡ります。
最近のSNSではメールアドレスでの検索機能が標準的に提供されています
メールアドレスを共通にしていると、芋づる式にアカウントがばれます

　特にFacebookではAndroid版の公式アプリが連絡帳と連携する機能があるので、自動的にGoogle+で自分をサークルに入れた人のアカウントを検索して候補として表示してくれます。この結果来た友達申請を受けてしまい、友達のみに公開していた電話番号が相手に渡る、などというのはありがちですね

これを防ぐには、Google+の自分のプロフィールの左側にある「プロフィールを編集」というボタンを押して右側にあるgmailとメッセージの送信先を変更します。

　これを公開ではなく自分だけにすれば、メールアドレスが相手に渡ることはないはずですが…なぜか残っているのもあるので注意が必要です。
　まずは、変な人をサークルに入れないのが大事ですね。

2012-03-21

Google+のAKBストリームにゲーミフィケーションの未来を見た

ゲーミフィケーション Google+

　みなさん、Google+を使っていますか?　たぶんこれを読んでいるほとんどの人が使っていないはずです。
　なのでほとんどの人がご存じないと思いますが、日本のGoogle+ではAKB48と公式タイアップをしていて、メンバー全員が公式アカウントを開設しています。
　
　AKB関係者以外はほとんどフォローしないなどここのAKBファンの行動は私のようなごく普通のネット廃人からするとなかなか異次元なので、興味をもってしばらく観察しているうちに面白いことに気がつきました。
　これは、ゲーミフィケーションのひとつの未来ではないでしょうか?

コメント先着ゲーム

　Google+ではコメントは500件までなのですが、人気の高いメンバーではその限界までコメントがつくことはいまだにあり、他のファンに先を越されると書き込めなくなります。そうでなくてもFacebookと同じように自分がコメントした投稿に他にコメントがつくと通知が飛ぶので、自分が他のファンにたいして優位にたったことをすぐに確認できます。
　これはゲームの基本的な構造である「プレイ＆フィードバック」そのものです。また、達成状況はコメント欄によって視覚化されることになりますが、これもゲームのランキングなどで広く行われているゲーミフィケーションの基本です。
　なので、一度優位に立つことに成功したファンは同じ経験を求めてより熱心にコメントをつけるようになると考えられますし、事実この競争はかなり激しく、コメントが後から編集できることを利用して一文字だけの投稿をする、などということも行われていました。

選抜ゲーム

　とはいえ200人以上もメンバーがいるので全員が制限されたところまでコメントがつくわけではありませんし、過熱状態も長続きしません。また、コメント先着ゲームにおいてはフィードバックがゼロになってしまう層がどうしてもでてきます。

　そこで第二のゲームとして存在するのが、メンバー選抜ゲームです。ほとんどの人が想像つくでしょうが、やはりGoogle+での活躍を元にした選抜メンバーというものがあります。これによってコメントだけでなく、ただ+1だけをつける行為にも意味が与えられるようになりました。
　
　また、盛り上がっている投稿を表示する注目の投稿という機能があるのですが、これにお気に入りのメンバーが入るかというのももうひとつの選抜ゲームになるでしょう。最近、名前が人気の投稿から注目の投稿に変わると同時にアルゴリズムが変更され、ごく普通の人でもここに表示されるようになりましたので、注目の投稿をAKBで占拠するという目標も出てきています。

夢の行く先

　ここまで見てきたとおり、AKBストリームはゲーミフィケーションをベースにしたサービスやソーシャルメディアマーケティングに関わる人にとっては夢のような構造です。
　マネタイズに直結する公式コンテンツに一方的に関心が集中し、単に食べたものを投稿するだけでバイラルが発生する。そんなものがあれば、成功は約束されたようなものです。
　これはメンバー以外の投稿には見向きもしないという独特の文化に支えられたものですが、イノベータ理論における後期層、本来であればマスメディアからの情報にしか見向きもしない層に対するサービスを考える上では十分応用が効きます。

　一方で結果が明確になる分、ファンにとってはきわめて消耗が激しい構造といえます。優位にたったファンはその優位を維持するために非常に高いコストを要求されます。いつ投稿されるかもわからないお気に入りのメンバーの投稿をチェックし、反応するというのは体力的にも精神的にも時間的にもCDを何百枚も買うよりはるかにコストがかかります。
　もちろんこれは金を払ったユーザーと時間を払ったユーザーを対等に扱うというコミュニティゲームの原則どおりなのですが、アイドルのファンに対してはおそらく効果が出すぎます。
　優位に立ったファンは消耗してつぶれて行き、立てなかったファンはフィードが薄いために離れていくことになるでしょう。長期的にはAKBというコンテンツの賞味期限を縮める結果にしかならないはずです。

　ゲーミフィケーションのひとつの未来だと考える理由は、ここにあります。ゲーミフィケーションはよくも悪くも劇薬であり、うまく使えば大きく活性化するものの、一歩間違えば単にコンテンツの寿命を縮めるだけのになりかねないのではないでしょうか？

2012-03-15

Twitter Bootstrapを使う上で知っておいたほうがいいこと

CSS twitter bootstrap HTML5

　一昨日、HTML5とか勉強会に参加していた際にTwitter　Bootstrapについてつぷやいたことをまとめておきます。

横並びのレイアウトを意識しよう

　
　webページの画面のレイアウトというと縦に列を並べた上で横方向の配置を行うマルチカラムレイアウトが思い浮かびますが、Twitter Bootstrapは横一列にきれいに並べることを意識して作られています。
　下の画像は公式サンプルを切り出したものですが、横の列が積み重なっているのがわかると思います。
　

　このように、デザインする時には横並びのレイアウトを意識することが重要です

ヘッダーが命

　Twitter Bootstrapを使ったテンプレートはどれも似たような印象になってしまうのですが、その印象のほとんどヘッダー部分が担っています。
　これを外すか、あるいはいまはやりの大きなグラデーションの入ったヘッダーに変えましょう、下の画像は公式サンプルからヘッダーを取っただけですが、それでも印象が大きく変わっています。

JSのコードも参考になる

　付属のJSですがこれも非常に参考になります。jQueryにどう複雑さを押し付け、コードをクリーンかつシンプルに保つか、そのひとつの指標になります。

まとめ

　Twitter Bootstrapは自由度の低さを代償にお手軽に作るためにあるような印象がありますが、そのルールさえ理解しどこに労力を注ぐべきかを判断できるようになれば意外なほどの自由度をもつ強力なツールになります。
　Ruby on Railsと同じようにありもののツールとそのルールを使っていかに楽をしながらクリエイティブに作るか、それを考えるのに労力の大半を費やすようになった今を象徴するようなプロダクトです。

2011-12-19

QunitによるWeb標準系UIのシナリオテスト

HTML5

　このエントリーはHTML5 Advent Calendarに参加しています。本当は18日目だったのですが、こんな時間になってしまいました。
　
　Web標準系UI、というのは私が勝手に呼んでいる呼称なのですが、HTML+JavaScript+CSSを使ったUIのことです。なので、大まかにはWebサイトなども含まれます。
　Web標準系UIは表現力の高さが魅力ですが、その分、画面が正常に動作するかのテストが大変です。もちろんSeleniumというツールもあるのですがこれは有名なので適当に検索してもらうとして、今回はあまりこういった文脈では紹介されることないQunitを紹介したいと思います。

QUnitとは？

　元々はjQueryのテスティングフレームワークとして開発されたもので、その時はJQUnitという名前でした。現在はjQueryから独立して依存性をなくしています。
　各言語にある同様のツールとひとまとめにしてxUnitという呼称でグルーピングされている単体テスト向けフレームワークなのですが、基本となっている言語がjavascriptなので、一般的なサーバーサイドの出力として使われるJSON、HTML、XMLといった出力の分析に使えるという特徴があります。このため、画面出力から切り離してサーバーサイドの出力をテストしたい場合にも有効に使えます。

インストールと実際のテスト

　QUnitのインストールはとても簡単です。レポジトリからダウンロードしてきて適当な場所に配置するだけです。test以下にあるHTMLファイルを編集することで、テストの記述ができます。

　単体テストのやり方自体は、このエントリーが詳しいので参考にしてください。
　このテストの際に通信部分にjQueryを使うと、サーバーサイドの出力をパースしてその結果を元にテストできます(jQueryでxmlをパースする例)。
　HTMLファイルの場合、IDやセマンティックなタグを生かしたコード規約を決めておくと将来的な変更に対しての追加コストが少なくなるでしょう。

シナリオテストをする

　ざっくりとして記述でしたが、これでそれなりの説明になっていることからわかりますように単体の機能へのテストに対してはQUnitはシンプルで強力な機能を提供してくれます。しかし、前提となる操作を必要とする操作をテストするためのシナリオテストの場合、QUnitには落とし穴があります。
　
　QUnitは各テストをそれぞれ独立したテストとして実行します。なので、一時的にテストを停止するためのstopや非同期処理のためのテストであるasyncTestを使ったとしても、別のテストはそのまま実行されてしまいます。

asyncTest("asyncTestBad1",function(){
    jQuery.get("/test/example/",function(data){
               start(); 
		
		same(data.test, "ok"); 

    });
    
});

asyncTest("asyncTestBad2",function(){//このテストが前のテストの終了を待たずに実行される
    jQuery.get("/test/example/next",function(data){
               start(); // 10ms後再会
		
		same(data.test2, "ok"); 

    });
    
});

　このため、非同期処理である通信を伴うテストの場合、一種のコールバック関数群としてテストを記述する必要があります。

asyncTest("asyncTestOK1",function(){
       jQuery.get("/test/example/",function(data){
               start(); 
		
	       same(data.test, "ok");
               test2();


       });
    
});

function test2(){
	asyncTest("asyncTestOK1",function(){
	    jQuery.get("/test/example/next",function(data){
	               start(); 
                       same(data.test, "ok"); 
                       //必要ならば次のテストを呼び出す関数をここに書く

	    });
    
	});
}

　
　こうすることで、単体テストツールであるQUnitを使ってシナリオテストをすることが可能になります。
　

まとめ

QUnitを使うと、従来は難しかったHTMLの崩れやテンプレートへの変数割付ミスなどもテストできます
QUnitをシナリオテストとして使う場合、コールバック関数として記述する必要があります
今年もクリスマスは中止です

2011-10-28

今日MLに投稿したもの

HTML5

　メーリングリストhtml5j.orgに投稿した情報をこちらでも流してみます。

開発

・Chrome17からindexedDBの仕様が少し変わるそうです

　これについては波多野さんの補足情報もすばらしいので当該スレッドも参照してください

一般

・Youtubeが一部のビデオを自動にＨＴＭＬ5で配信へ

　はてなではうまく貼れないので、ここの動画をスタートさせた後に右クリックしてみてください。なお、動画はMicrosoftオフィシャルです。時代ですよね。

・Google+にRipplesがスタート

　HTML5による視覚化のお手本みたいな機能なので紹介します。内容的にはCanvasで、独自のベクタグラフィックか、もしかしたらRaphaelあたりでも使っているかもしれません。

2011-09-16

Google+のAPIが公開されたのでまとめてみました

Google+

　本日、Google+にAPIが公開されました。現状としては試験段階で、APIそのものは2種類3パターンしかなく、レスポンス形式はJSON、及びJSONPにしか対応していません。また、制限がありますが申請すれば拡張可能です（後述）

APIキーの取得

　Google+のAPIの使用には、APIコンソールが必要です。Googleにログインした状態でAPIコンソールに行き、左側にあるセレクタから新しいプロジェクトを作り、Google+APIを有効にした上でAPI　AccesというタブをクリックするとAPI　Keyが取れます

APIの形式

　Google+のAPIはいわゆるRESTfullAPIで、特定のURLにリクエストを投げるとレスポンスを受け取る形式です。
　いくつか共通のリクエストがありますが、そのうち必須なのはkeyというキーです。ここに必ずAPIキーを設定する必要があります。

ユーザー認証

　Google+のAPIはOAuth2.0による権限委譲に対応しています。詳しくはドキュメントに書かれていますが、基本的にはリクエストの対象となるユーザーを指定するパラメーターにmeを使えるようになることを含めてFacebookと同じです。違うのはScopeに設定するのが権限の名前ではなく、サービスに対応したURLである点です。Google+であればhttps://www.googleapis.com/auth/plus.meになります。

APIでできること

　現在使用可能なAPIは大きく分けて二つあり、ひとつはユーザー情報の取得、もうひとつはストリームへの投稿内容の取得です。後者はさらに二つに分かれていて、特定の投稿と特定のユーザーの投稿の二種類に分かれています。
　ここで注目すべきなのは、投稿内容の取得です。再共有の場合、レスポンスのobjectという部分にURLを含めた最初の共有のデータが入っています。残念ながら、Tumblrのように途中の部分は入っていませんが、これは夢が広がるんじゃないでしょうか?

API制限

　APIに制限はありますが、これがかなりややこしく、一日に1000リクエスト、または一秒当たり5ユーザーとなっています。
　後者は、サーバーサイドのアプリでサーバー側でリクエストを生成するようなパターンに対して適用され、ユーザーのIPアドレスをキーuserIpに含めることで、そのIPアドレス一つ一つを独立したユーザーとみなして、各ユーザーごとに制限を化すことができるようになります。
　また、前述のAPIコンソールのQuotaから、APIの使用状況及び拡張申請画面に行くことができます。

まとめ

　現状では制限は多いですが、それでも結構遊べそうな気がします。拡張申請さえ通ればですが、それなりにあれこれするアプリが作れる…かもしれません

2011-07-06

もうGoogle+の商用利用が始まっている

Google

　Google+が限定公開されて一週間ほどですが、もういくつかのニュースサイトが公式アカウントを取得してGoogle+で活動を始めています。

ABC News Radio
Breaking News
Chicago Sun-Times
GMA News
KOMU News
Mashable
The Next Web
St. Louis Post-Dispatch とそのマスコット(?)Weatherbird
Search Engine Land
CNET

　有名な技術ニュースサイトから地方ニュースまでいろいろですが、やはりどこも使い方がこなれていて、双方向メディアであることをきちんと意識した使い方をしています。
　例えば、CNETは日本時間の7日午前3時に行われるFacebookの発表内容について意見を聞いています。
　さすがに後発だけあって、使う側も慣れているみたいですね。
　
　一応、この使い方は規約的にはナシみたいですが、問い合わせたSearch Engine Land自身、回答をもらった時にはもうアカウントを作っちゃっていたという微笑ましい(?)オチがついています。