Xtity Blog

techieなこと、書いてます

【超会議で】 RocketLink 【Chrome拡張機能をハッカソンしてみた】

※2012/5/7 追記 ニコニコ動画YoutubeにRocketLinkの解説動画をアップしました。

ニコニコ動画

 

YouTube


【超会議で】 RocketLink 【Chrome拡張機能をハッカソンしてみた】

 

一昨日、昨日の超会議、皆さんお疲れ様でした。

僕は超エンジニアミーティングの付随イベント、超ハッカソンに参加したりしてました。

 

「超エンジニアミーティング」
20120428123823.jpg

http://www.chokaigi.jp/tenji/conference/engineer.html

http://info.nicovideo.jp/conference/cho-engineer-meeting/

 20120428123823.jpg

 

途中に兄貴や神主に遭遇するなど、エキサイティングで歪みないハッカソンとなりましたが、運良くハッカソンのテーマであった「1-click!」を体現する下記のアプリを完成、リリースすることができましたので、ドキドキしながらLT(ライトニングトーク)に登壇させて頂きました。

 

「RocketLink」

https://chrome.google.com/webstore/detail/mndnhmghbknomfjacklolhekkeolfocd?hl=ja

f:id:matekiki:20120430135552p:plain

 

 

番手は二日目のトップバッターという、なかなか興奮するポジションでしたがなんとか任務を完遂できました。素晴らしい機会を与えて下さった運営、関係者の皆様にこの場を借りて改めて御礼申し上げます。本当にありがとうございました。

 

さて、以下にて「RocketLink」の資料を公開したいと思います。

基本的には引用、拡散ウェルカムですのでどうぞご覧下さいませノシ

 

------------------------------------------------------------

【RocketLink設定資料】

■概要

スタンドアローンChrome拡張機能

・インストールした後、ウェブページの読込完了後、そのページのリンクを長押しすると、そのURLを引用しているtweetMacのRocket Dock風のUIとなって飛び出す仕様

・上記によって、例えばニコニコの動画視聴ページへのリンク元で使うと、tweetによってその動画の評判をソーシャルに、且つ画面遷移、細かな設定、複雑な操作等無しに確認することができる(↓こんな感じ)

f:id:matekiki:20120430141422p:plain

 

■製作時間

・仕様決めからChromeウェブストアにリリースするまで大体2日

・実際にコード書いたのは多分6、7時間くらい

・あとは調査、超会議巡り、超会議並び。。。w

※あ、でも2日目はそこそこすんなり入れました。運営さんの超対応でした

 

 ■やりたかったこと

ニコニコ動画の動画自体の評判が「今」、「ソーシャルに」どのようなものであるかを気軽に確認してもらい、その動画を見るきっかけをサムネ、動画内コメント等のニコ動以外のサービスで増強したかった。

・また、動画というシステムの制約上、遷移後の読み込み待ち時間の長さというWebサービスにとってはおそらく最もfatalなユーザストレスがわりと存在する。

・それによるユーザの「1-click」に対する心理的コストはわりと高い

・よって、普通のウェブページのように気軽にクリックできない

例えば、「せっかく待ったのにこれ釣りかよー(#^ω^)ビキビキ」とか

・なんで、その動画を見るコストをソーシャルサービスのリアルタイムの評判を即座に確認することによって下げ、また自分の予想に反した面白い評判のノイズによって、下げる

・だってー、なんかー、Rocket DockのUIってかっこいいじゃないですかー(作った一番の動機かもw)

 

■LT用時のKeynote

①表紙

f:id:matekiki:20120430150116p:plain

アジェンダ

f:id:matekiki:20120430150145p:plain

③DEMO

f:id:matekiki:20120430150210p:plain

※三枚とかワロチwww

 

■細かい仕様

①ウェブページの読み込み完了イベント後に長押しするとそのリンクのURLを引用したつぶやきをポストしたユーザの画像がそのリンク近くに出るよ

②その画像をクリックするとつぶやきが15件程Rocketするよ

③①の画像をもう一回クリックするとRocketしたつぶやき達が元の鞘に収まるよ

④③後ロストフォーカスすると①の状態に戻るよ

⑤①の画像を長押しするとtwitterの当該URL検索画面に遷移するよ

※これsearch.twitter.com/search?q=[当該URL]とかでwindow.openしてるんだけど、なぜかencodeしても[当該URL]に"/"が入ると上手く遷移できてなかったので、"/"を" "に置換してます。当日時間もなかったし、それっぽく動いてるんでまあ、いいかと。

 

■これから

・たかだか6、7時間で作ったプロダクトなので、まだまだバグが多い(;・∀・)

・例えば、長押し後、RocketLinkのペインが画面の一番左上に行っちゃうとかw

・なんで、バグフィックスをまずは最優先で取り組みます!!

・それがあらかたすんだら、あとは例えば下記のような必要と思われる機能追加をやろうかなと

 

1. つぶやきの表示件数を今の15件固定から設定できるようにするとか

2.個別のつぶやきをクリックしたらtwitterの当該画面に遷移するとか

3.今だと検索条件が単純にそのリンク先のURLだけ(正確にはhref属性値)なので、

なんかいい感じのヤツをいい感じに設定するとか

4.自分がフォローしているtwitterアカウントを優先的に、且つ見た目も派手にするとか

5.tweetのポストとか

6.つぶやきが取れなかった時にもなんかお知らせするとか

7.使い方周知用のてってってー動画の投稿とか

 

・でも基本的には使ってくれる方々のレスポンスで上記の機能追加は決めて行きたいなあというのが本音ですねえ。

まあ、レス、あればですが(ノ∀`)アチャー

------------------------------------------------------------

 

 以上、最後になりましたがこの度は、ハッカソン会場で心良くご対応下さったスタッフの皆様、そして最近ではおそらく一番感激したオファーを下さった @cho_hackathon さん、そして当日LTにお越し下さった全ての超会議参加者の皆さん、本当にありがとうございました。

日本のCGMが半端ではないことをこれからも片隅で生温かく享受しつつ、自分も隙があればどしどしCGMしてきたいと思います。

 

それでは、cgm strong! ノシ