Twitter実況サイトLivetter.comにキャプチャ画像表示機能付けました!

こんにちわ!Node.js製リアルタイム実況サイトLivetter.comに、実況ツイートからキャプチャ画像を収集してリアルタイムに表示する機能をつけました。テキスト情報だけでは味気ない画面だったので華やかになると思います。

収集された画像はチャンネル毎やハッシュタグ毎に見られるので、ザックリとTV番組の雰囲気を把握したり、意外な画像が出てきたりして面白いです。WebサービスなのでiPhoneやiPadでも、もちろん見られます。使ってみてね。

Node.js製実況サイトLivetter.com、iPhone向けWebアプリ版つくった

というわけで公開します。
PC版と同じURLをiPhoneで見れば 上記の様な表示になります。
Androidも機種によっては見られると思います。
iPhoneの場合、ホーム画面に追加機能を使うことで、
上下のバーがなくなりアプリっぽいアイコンも表示されます。

使ってみてね。
TumblrのPhotosetのレイアウトパターンを自由に作成出来るブックマークレット作ってみた
http://cineraria.tumblr.com/post/28974032607/tumblr
を参考に、適当に作ってみた。
上のリンクをブックマークバーにD&Dしたりして保存。※dsbdから保存した場合はアドレスの先頭の denied: を削除
Photoの投稿画面でブックマークレットを実行する。
ポップアップ入力画面で、リンク先にあるような{写真枚数:配置の配列}のオブジェクトを入力してOKを押す。
★良く分からない人はそのままOKを押す。
写真枚数を追加していくと…

4枚以上のPhotosetタイプが増えます。


動作としては、4枚のPhotosetはパターンが出尽くすのでデフォルトで増やしてあります。ポップアップ入力では5枚目以降のパターンを入力してください。複数入力も対応しているので
{5:[122,212,221,23,32,311,131,113],6:[123,132,213,222,231,33]}
とかも可能です。※tumblrの仕様で列数は最大が3つまでのようです。
多分大丈夫だろうけど動作はChromeでしか確認してません。でわ!
Node.jsとtwitterを使った超リアルタイム実況サイト Livetter.com 公開します。

こんにちわ!
Node.jsを勉強がてら以前から念願だった実況サイトを作成しました
特徴としては
- Node.jsとsocket.ioを使うことでWebサイトでリアルタイムな実況表示
- 大量のツイートを表示するので、圧倒的な流量の実況体験が可能
- Twitterに投稿しなくてもLivetter内で完結した実況が可能。
が挙げられます。
3番目の機能を使うことでツイッターのTLを汚さず実況することができます。
tumblrやってる人はテレビ見る人少なそうだけどw


TUMBLR MOSAIC VIEWER アップデート!! Dashboardリミット解除、年別ランダム表示、1クリックReblog、他
TUMBLR MOSAIC VIEWER アップデートしました。主な更新は以下の5つ
- Dashboardの250件ロードリミット解除
ReblogMachine方式を使って実装。
- Dashboardのランダム表示、年別ランダム表示
上記の仕様を応用して、endless summerぽい機能を実装しました。Dashboard全体からと、年別でランダム表示します。
※2007年の表示は微妙かも。サイズの入っていない画像がほとんど。たまに範囲とは違う年のpostが入ったりしますがtumblr側の何らかのバグな気がします。
-
1クリックReblog機能これまではReblogボタンを押すとウィンドウがポップアップする形式でしたがfast_reblog機能を使うことで、ボタンを押したら即Reblogするようにしました。以前のようなポップアップウインドウ形式でReblogしたい場合は「shift+クリック」で可能です。※この機能はエラー処理をしていません。tumblrが重いなどの理由でReblogエラーになっても通知されませんので注意してください。なんか公式がfast_reblog正式リリースして出来なくなったよ!(#^ω^)ビキビキ
- ランダム表示機能の復活
無くしてからちょくちょく要望がくる、v2にあったようなDashboardとは関係のないランダム機能を実装しました(http://tmv.proto.jp/#!/random)。
- 内部動作の改善・バグフィックス
素早いタブ切り替え時に、前のロード画像が残る問題の改善 (まだ完璧ではない気がする)。ページ描画方法の変更による若干の高速化、省メモリー化。
以上です。
Dashboard潜りまくってると稀に不正なJSONが返ってくる事があり、Flashがクラッシュする場合があります。とりあえず様子見ということで、よろしく~
新しいiPadで真のRetina画面領域(2048x1536)でWebサイトを表示するBookmarklet作った

Bookmarklet使用後のAmazon
こんにちわ!
新しいiPadはみなさん手に入れましたか?前評判通りRetinaの解像度は素晴らしく満足しています。しかし、Safariで表示するWebサイトに関しては、どうも自分が想像していたものとは違ったのでタイトルのブックマークレットを作りました。
新iPadを手にとってSafariを起動したとき「あれ?画面狭くね?」というのが最初の感想でした。もちろんフォントは綺麗でしたけど、PCで解像度の高いモニターを買った時の感覚とは違いました。「こんなもんじゃねぇだろRetinaの本当の実力はよッ!!」とか思いました。
このブックマークレットを使うと以下のような見え方になります。

通常表示のYahoo!

Full Retina View使用後のYahoo!

通常表示のAmazon

Full Retina View使用後のAmazon

通常表示のYouTube

Full Retina View使用後のYouTube

通常表示のPinterest

Full Retina View使用後のPinterest
使用してみた感想としては使いづれぇ!ということでしたw
YouTubeやPinterestのような、リキッドレイアウトで画像を多く使うページでは、画像もドットバイドットで表示されるし、ある程度使い道があるかもしれません。
新しいiPadはPCと違って画面サイズが固定のまま解像度が上がっているので、そのままwebを表示しても要素が小さくなり、見づらいし使いづらいです。タッチ操作となれば尚の事。当然ですねっ!
とはいえ、解像度の高さを伝える方法としては有効だとおもうので、一発ネタとして使ってみてください。でわ!
※このブックマークレットではviewportメタタグを使って表示を変更しているので、もともとiPad用に作られたページでは変化しません。例えばAppleの公式ページなど。
こんにちわ!
TUMBLR MOSAIC VIEWER バージョン3にアップデートしました!
#akibasho中にライブ更新して少し時間が経ってしまいましたが、お知らせします。大まかな新機能は以下
- デザインの一新、ダブルサイズの画像の混在表示

取得画像20件毎にnotesが一番多い画像はダブルサイズで大きく表示されます。 - DashboardとLikesの画像表示に対応(要Flash Player)
左上に表示される「LOG IN」ボタンを押し、OAuth認証することでDashboardとLikesの画像を表示することができます。Dashboardは250件、Likesは1000件中の画像のみ表示となります。 - ユーザー単独ページにてAround、Newest、Random、Oldest、Tagの切り替え機能追加
ユーザー単独ページ(例:http://tmv.proto.jp/#!/proto-jp)を開くとAround、Random、Newest、Oldest、Tagの5つのタブが表示されます。それぞれのタブは- Around:そのユーザと周囲のユーザの画像を表示します。画像のキャプション情報から他のtumblrユーザ名を取得してそれらをつなげていきます。(パーマリンク例:http://tmv.proto.jp/#!/proto-jp/around)
- Newest:デフォルト。そのユーザの画像を新しい順に表示していきます。(パーマリンク例:http://tmv.proto.jp/#!/proto-jp)
- Random:そのユーザの画像をランダムに表示していきます。(パーマリンク例:http://tmv.proto.jp/#!/proto-jp/random)
- Oldest:そのユーザの画像を古い順に表示していきます。(パーマリンク例:http://tmv.proto.jp/#!/proto-jp/oldest)
- Tag:そのユーザのタグ付された画像から指定したものを表示していきます。またロードされた画像にタグがついていた場合、候補としてポップアップウインドウに表示されます(パーマリンク例:http://tmv.proto.jp/#!/proto-jp/#mono)
- List機能の強化。上記のNewest、Random、Oldest、Tagを組み合わせて簡単にユーザモザイクまとめページが作れます(twitterのListのようなもの)

HOME>List>Create new listで新規にリストを作成するか、ユーザ単独ページのアバターアイコンをクリックしてリストに追加するかすると、リストが作成されます。
リスト編集画面では、別のユーザ名や取得方法に変更したり、ドラッグアンドドロップで順番を変えることができます。また、そのリストのパーマリンクを取得したり、twitterにpostすることも出来ます。
リストのパーマリンクページ(例:TDM2011 #akibasho)では+Listボタンを押すことで、そのリストを自分のリストにすぐ加えることができます。
面白いモザイクまとめリストができたら教えてくれると嬉しいです。将来的にはソーシャルリスト的な機能も付けれれば面白いかなと考えております。 - High-res画像の表示対応
OPTIONでHigh-Resにチェックをつけると拡大画像時にHigh-Resで表示します。
説明が足らない部分はありますが、とりあえずこんな所で。後でちゃんとしたABOUTページを作る予定ではあります。ヨロシク!
こんにちわ!新サイト作りました。
TrendWall - Twitterのトレンドを番組表っぽく一覧表示
Twitterのトレンドを時系列で並べて一覧表示します。
テレビ番組表のような見た目なので、少し前にトレンドになったワードや、長い間トレンドになっているワードがひと目でわかります。気になるワードがあったら、クリックして表示エリアを拡大させることで、そのワードが入った複数のツイートを見ることができます。拡大表示することで、ワードだけでは曖昧だったトレンドのコンテキストを知ることができます。この機能は、ロード無し、画面遷移無しで動作するので、さまざまなトレンドの内容をストレスなく閲覧できます。
基本的な機能は以上です。以下詳細

TwitterのトレンドとはTwitterの公式Webでサイドバーに表示されるトレンドです。このトレンドを15分毎に取得し更新しています。TrendWallにおいて縦軸は時間となり、横軸はその時間に取得されたトレンドワードが並びます。ワードの並び順は基本的に左から1位、2位…と並びますが、前の時間に同じワードがあった場合、そのワードの上に更新された同じワードが並びます。これにより、長時間同じワードが話題になっている場合、番組表のように縦に長いエリアが生成されます。
拡大時、ツイートに画像や動画の短縮URLが含まれていると、それらのコンテンツも直接表示します。今のところ対応しているサービスはTwitpic、Instagram、YouTube、Ustream、movapic、yfrogになります。これらの短縮URLがツイート内にある場合、コンテンツを直接表示します。拡大したワードを再度クリックすることで縮小します。(twitterの仕様変更により現在拡大時コンテンツ表示には対応していません)
拡大すると、更新ボタンとツイートボタンが表示されます。更新ボタンはワードに対する最新ツイートを取得します。ツイートボタンはそのワードに対するTrendWall内のパーマリンクをツイートします。
また、ページを開いたまま放置していると、15分毎に最新トレンドを取得します。
主な機能は以上です。
4月中旬から日本でもTwitterのトレンド機能が実装されたので作ってみました。TUMBLR MOSAIC VIEWER、XUSTに続く「とりあえず並べてみた」シリーズ第三弾です。その日のtwitterトレンドをザッと知りたい時など利用してみてください。ヨロシク
PROTO.JP BLOGをtumblrに移行
しました。
前々からtumblrにしようと思っていたのですけど、なかなかタイミングがなくて今になりました。
WordPressにDBを一つ割り当ててるのももったいないのでproto.jpにあるBLOG記事やページは、そのうちに全て削除します。このページはこれまでと同じように、作ったサイト等の告知用BLOG(Tumblr)となります。
あまり更新しないとは思いますがヨロシク~


