alt » WEBサイト

音楽ストリーミングサービス「Shuffler.fm」が熱い

alt — Thu, 08 Sep 2011 13:07:29 +0000

以前、フランスのDeezerを紹介したこともありましたが、また気になる音楽ストリーミングサービスです。
「Shuffler.fm」というオランダのインタラクティブ・エージェンシーTONEによるサイト。

Shuffler.fm
http://shuffler.fm

まずサイトに飛んでGenresタブをクリックし、
150以上の（Last.fm APIをもとに）細分化されたジャンルのなかから好きなものを選びます。
するとShuffler.fm独自のキュレーションリストから配信元のページを巡回しながら自動再生してくれます。
仕組みはいたってシンプルなので、Deezerのようなソーシャルなつながりがあったり、マイプレイリスト作ったり、
豊富なラジオ機能があったりするわけではありません。
※ツイートやFacebookいいねボタン、ブログ・トラックのお気に入り登録はあります。

おまけ程度に検索ボックスもありますが、基本はジャンルを選んで聴くだけの受動型サービスです。
最初の2,3曲で期待外れの曲が流れてはもう二度と使ってもらえませんが、
今のところ、毎度素晴らしいセレクトで曲を配信してくれます。僕的に。
ジャンルの精度に関してはたまにアレっていうのもあるかも。

↑↑↑上のようにブログを巡回しながら曲が聴ける

音楽検索エンジンがネット上のあらゆるmp3をクロールする数で勝負するタイプではなく、
Shuffler.fmは良質な音楽ブログ・サイトの記事を頼りにそのRSSフィードからアグリゲートし、
常に厳選された最新の音楽を聴くことができます。
コンテンツ（音ネタ）提供元のブログを横断しながら曲が視聴できるので、
制作者自身、またはSoundCloudなどからプレイヤーを貼り付けたユーザーの
紹介記事もあわせて読むことができるのです。
まさに魅力といえば、そのタイムリーさとレコメンデーション力を同時に味わえることではないでしょうか。

音楽ブログのキュレーションリストも立ち上げ時には1600ほどあり、
ユーザー自身がブログをココからリストに登録できる仕組みも兼ね備えています。
こうやってShufflerのクオリティが保たれているのは、
人の手を介したリストになっているからでしょうか。

↑↑↑dublab、FADER、FACT magazineなど先進的な音楽情報を扱ったサイトも登録されている

そしてShufflerは先日、大きなアップデートを行いました。
なんとiPadアプリを近日リリースするそうです。
「音楽のためのFlipboardだ」とうたってスタートして早1年。
いよいよ本格的なオーディオ・マガジンの到来かもしれません。

Chromeアプリもあるのでよかったらどうぞ。

Chromeアプリ
https://chrome.google.com/webstore/detail/njgfhnajhpjmlbfpieplfnocnodbkcfh

Facebook
http://www.facebook.com/shuffler.fm

Twitter
http://twitter.com/#!/ShufflerFM

競合や類似ライブラリを探すのに便利なサイト「similarsitesearch.com」

alt — Thu, 01 Sep 2011 02:19:31 +0000

既にご存知の方も多いと思いますが、
個人的に便利なサイトがあったのでここに促します。

SimilarSiteSearch.comという似ているサイトを探してくれる検索エンジンがありまして
検索窓にネタ元のURLかキーワードを打ち込むと
検索結果でそれに類似したサイトを教えてくれます。

FlashやJavasccriptを普段触っている人は
Tweenエンジンや物理エンジン、jQueryプラグインを探す機会も多いかと思いますが、
国内外の数多くあるライブラリから目的にあったもの探すのってひと苦労です。
ないから自作で作ったのに、あとあとそれより優れているのが見つかったりと。

そんなときにコレ使うとググるよりもより最適化された情報からリーチできるのでオススメです。
マーケッターの方にも競合チェックに使えるのではないでしょうか。

参考までに「Tween」の結果。
http://www.similarsitesearch.com/jp/s.php?URL=tween&P=0&T=1

2011/9/13追記
http://www.moreofit.com/
というサイトもありましたので一応載せておきます。

Flash Love Letter: The Remix

alt — Fri, 28 Jan 2011 03:22:40 +0000

germart.orgを運営しているNathan Germickさんが
サンフランシスコで行われたソーシャルゲームのミートアップで演じた
FlashラブレターがYoutubeにアップされています。
なんかオートチューンボイスが無駄にゲイっぽくみえてしまうのは私でしょうか。。

「ソーシャルゲームコミュニティからFlashへのラブレター」
Created by http://www.germart.org
Inspired by http://www.lostgarden.com

時計を表現したサイトまとめ

alt — Mon, 28 Dec 2009 13:59:16 +0000

Flickr Clock
アクセス時の時刻を標準にしてその時間帯に関連したビデオが再生。
http://www.flickr.com/explore/clock/

Flickr Time
Flickrのキーワード検索結果画像で時計を表現。
http://www.hottoast.org/convexstyle/flickrtime/

GClock
Google Map+時計。
http://wakasa.org/project/gclock/

Scroll Clock
スクロールバーで時計を表現。
http://toki-woki.net/p/scroll-clock/

The Human Clock
世界中の人たちの写真によって時刻が表示される時計。たぶん美人時計のパクリ元。
http://www.humanclock.com/
http://www.humancalendar.com/

CRASHCLOCK
スクリーンセーバー。
http://scr.sc/products/crashclock/

DROPCLOCK
スクリーンセーバー。
http://scr.sc/products/dropclock/

美人時計
説明不要の時計サイト。
http://www.bijint.com/

フォトクロック
美人時計と同じタイプ。
http://www.photo-clock.jp/

Sonicode Clock
sonicodeをFlashPlayer10で時計化。

Digimech Clock
デジタル時計表示をアナログ的に。

the clock clock by humans since 1982
24個のアナログ時計でデジタル時計を表現。

ホネホネ・クロック

iPhoneに対応しているサイトをまとめてみた

alt — Mon, 21 Dec 2009 16:37:09 +0000

幅広い層にリーチしている大手ポータルやSNS・CGM系、Eコマース系のサイトは
iPhoneやAndroid用のUIをより洗練されたものに最適化していかなければならないと思うのですが、
実際どれほどのサイトが現状対応させているのか国内を中心にiPhoneで調べてみました。
意外と対応していないサイトが多かったことにびっくり。
まあ僕の個人的主観で選んだだけなので、偏りがあるのはお許しをば。

既存のPCサイトをただiPhone用にサイズ変更しただけのものから
無駄な情報を削ぎ落とし、専用のUIにブラッシュアップしたものまで様々でした。
iPhoneのSafariもAndroidのWebkitも基本ワンソース・マルチユースで展開できそうなので
今後はAndroidの普及率しだいというところでしょうか。
HTML5+JavascriptによってさらにFlashライクなリッチUIも登場してきそうです。

話題のCookpadはiPhoneアプリ出しているものの、サイトは未対応でした。
（iCookpadという勝手サイトはあった）
mixiやgree、pixivなどは今のところまだのよう。
その他、未対応のところは
価格.com、食べログ、ぐるなび、ブクログ、みんなの株式、smart.fm、
AllAbout、ITmedia（アプリあり）、TechCrunch、livedoor、Excite、Ameba、
ビックカメラ、ヨドバシ、ヤマダ電機、ZOZORESORT、
Find job!、リクナビNEXT、エンジャパン、DODA、
USTREAM、Hulu、スティッカム、ニコニコ動画（アプリあり）、
ニッセン、ニトリ、ディノス、無印良品、

以下、対応しているサイト集。

iCookpad
http://dotimpact.jp/icookpad/

はてなブックマーク
http://b.hatena.ne.jp/touch

YouTubeモバイル
http://m.youtube.com/

last.fm
http://m.lastfm.jp/

flickr
http://m.flickr.com/

vimeo
http://vimeo.com/m/

HOME’S
http://m.homes.co.jp/

モバゲータウン
http://www.mbga.jp/pc/

Wikipedia
http://ja.m.wikipedia.org/

Google fast flip
http://fastflip.googlelabs.com/

amazon
http://www.amazon.co.jp/

delicious
http://m.delicious.com/

Facebook
http://touch.facebook.com/

myspace mobile
http://m.myspace.com/

Yahoo!オークション
http://auctions.yahoo.co.jp/

Twitter
http://mobile.twitter.com/

digg
http://m.digg.com/

楽天市場
http://www.rakuten.co.jp/

楽天トラベル
http://travel.rakuten.co.jp/

cnet japan
http://m.japan.cnet.com/

Dailymotion
http://iphone.dailymotion.com/jp

Veoh
http://www.veoh.com/iphone/

全日本バーベイタム選手権

alt — Mon, 16 Nov 2009 07:09:21 +0000

全日本バーベイタム選手権
http://www.verbatim.jp/senshuken/

いきなり、Twitterやはてブ界隈でバズられてますが
記録メディアブランド「Verbatim（バーベイタム）」のプロモーションサイトがすごいです！
Flashの3Dもここまできたかというほど
メモリの集合体！？のような3Dポリゴンが気持ち悪いぐらいリアルに動きます。
papervison3DでいうならPointLight3DやShadeMaterialsとか被写界深度とか使って
どうやってこんなに軽快に動かしているのだろうか！？
3Dデータはどうやって管理してるの！？久々に大興奮して鼻血出そう・・・

10問の質問に答えてメディアモンスターを作ると
自分の作ったモンスターと他の人のモンスターを対戦させることができます。
その対戦モードもまた面白くってカメラアングルも凝ってるし、
自分のタイミングで必殺技とかパワー回復も使えたりしてマニュアル感が味わえます。

対戦中もカメラボタンで自分の好きなアングルを決めて
写真を撮ることもできます。もちダウンロードも。
このへんがFlashの3Dならではの演出ですね。
（その間は戦闘も停止しています）

さっそく３体作ってみました。いざ、勝負！！
↓ブログパーツにもできます。

1号

2号

3号

メディアモンスターの動きを見ていたら
mediasやpictapsを思い出しました。
ユーザーアクションで描かれたオブジェクトやプロモーション媒体そのものを
3Dにして動かすのってやっぱ強烈な印象を残しますね。

medias
http://www.n-keitai.com/medias/

pictaps
http://roxik.com/pictaps/

iPhone専用のWEBサイトを作ってみる

alt — Tue, 25 Aug 2009 11:26:31 +0000

先日、このブログをiPhoneからも閲覧できるようにしたので
この流れでホームページもiPhone専用サイトを構築してみます。
とはいっても、何も情報がないので
各SNS系のマイページへとばすためのリンクを設置するぐらいかな。
以下は制作過程をザックリと書き留めてます。

１．iPhone専用のサブドメインを用意する。
http://i.alt-scape.com/

２．iPhoneからトップページへ飛んできたときは
PHPかJSでユーザーエージェントの判定をして専用ページにリダイレクトさせる。

３．デバッグ（閲覧）環境の準備。
Safari（3.1以上）の「設定」→「詳細」タブ→「メニューバーに”開発”メニューを表示」にチェックして
メニューバーの「開発」→「ユーザーエージェント」→「iPhone」を選択すればＯＫ。
Firefoxの場合はアドオン『User Agent Switcher 』をインストールして
「ツール」→「Default User Agent」→「iPhone3.0」でＯＫ。

４．ページを制作するにあたっての準備。
iPhoneライクなUIを簡単作ることができるJSライブラリ「iUI」をダウンロード。
解凍してサンプルソースを元にすればそれっぽいものは簡単にできる。

５．こちらの実例も参考にしてとりあえずプロフィールと各サイトのマイページへのリンクでも貼っておく。
（アイコンはこちらからダウンロードして使用）

※サイトによってはiPhoneからのアクセスでも
モバイルサイトにリダイレクトしてくれるところはありますが、
大概はPCブラウザと同じページへ飛びます。

下記に関しては直接モバイル用のマイページに飛ばしてます。
YouTube
http://m.youtube.com/user/アカウント名
Last.fm
http://m.lastfm.jp/user/アカウント名
Flickr
http://m.flickr.com/#/photos/アカウント名

参考：
AndroidとiPhone両方対応するページ
http://d.hatena.ne.jp/haru-komugi/20090812/1250078548/
iPhone用のページが簡単に作れるiUI
http://allabout.co.jp/internet/javascript/closeup/CU20080725A/
Webアプリ開発環境としてのSafariを知ってますか？
http://www.atmarkit.co.jp/fjava/column/andoh/andoh40.html

検索サービス「NAVER」クローズドベータ版を使ってみた

alt — Sun, 21 Jun 2009 15:50:09 +0000

韓国のNO.1検索ポータルサイトといえば「Naver」。
それを運営するNHNの日本法人であるネイバージャパンが
日本人向けに新たな検索サービスを開発し
夏リリースを前にクローズドベータ版を開始したとのこと。

検索サービス「NAVER」クローズドβ開始。一般公開は夏を予定
http://internet.watch.impress.co.jp/docs/news/20090615_294131.html

先日、先行体験ユーザーの募集を行っていたので試しに応募してみたら、
当選メールがきたので早速使ってみました。

トップ画面は以下のようなUIデザイン。

検索の種類としては
「ウェブ」、「画像」、「動画」、「ブログ」といった一般的なカテゴリ以外に
「クチコミ」、「テーマ」、「まとめ」といった項目が並んでいます。
「クチコミ」はYahoo!知恵袋やYahoo!掲示板、2ちゃんねる、趣味人倶楽部、OKWaveといった掲示板サイトから検索ができるカテゴリ。
「テーマ」は人物ファインダーやテレビファインダーといった特定のジャンルや年代から情報を探すことができるカテゴリ。
「まとめ」はユーザー同士で特定の話題を投稿したり、議論したりすることができるコミュニティ要素をもったカテゴリとなっています。

まず注目ワードの父の日をクリックしてみます。統合検索による結果画面は以下に。
Yahoo!やGoogleと違い、上部・右側の広告エリアが
まとめ検索、画像、動画、amazonのショッピング情報を表示させています。
その下に最新ウェブとしてニュースサイトの検索結果を表示し
あとはカテゴリ順といった検索内容で区切られています。
一画面でこれだけの情報が網羅されていれば情報へのリーチは短く感じられるかもしれませんね。
検索精度はやっぱりGoogleにはまだまだ及ばない印象。

個人的に興味深かったのは「テーマ」検索で、
たとえば「1980年以降に生まれた女優」で絞込み検索をかけると
下のような検索結果の女優画像が横スクロールで見られます。
この新NAVERは動画や画像検索にも積極的にFlash UIが使われていて
非常に滑らかなホイール操作や自動ページ遷移機能がついているのです。
しかもFlash UIなのに画像や動画単位でパーマリンクがついているので戻るボタンで一つ前のページではなく一個一個のメタに戻る設計となってます。

ちなみに「新垣結衣」の画像をクリックして詳細画面にいくと
キャプチャー画像を見ていただいても分かるように
生年月日や血液型、、出身、職業、所属事務所といった細かい個人データから
活動履歴、出演作品（テレビ・映画）、インタビュー、関連ウェブといった
あらゆる情報にアクセスできるところまでこの検索エンジンはカバーしています。
タレントの履歴書のようにきれいなフォーマット化されたレイアウトで見やすいですね。
これらの関連情報の抽出はWikipediaや関心空間、はてな、ニコニコ大百科といった他サイトから引っ張ってきているのでしょうか。
Naverで期待できそうなのはこのテーマ検索やまとめ検索のようなコミュニティによる人の手を介した情報の最適化を行っているところ。
ハンゲームの成功からも元々得意分野でもあるだろうから、
検索ユーザーのパイを広げる意味ではまず既存のゲームユーザーを足掛かりにまとめの充実をはかっていけばそれなりに広がっていくのかなと思います。

人物以外にもテレビ番組や映画といった検索も面白かったですよ。

ブクログの本棚整理

alt — Tue, 09 Jun 2009 15:02:31 +0000

ここ何年か投げっぱなしジャーマンな我輩の本棚を整理してみました。
本棚といっても、ブクログのことです。
普段、気になる本はAmazonの欲しい物リストにマークしておいてたのですが、
過去に購入したもの、これから買うものは全部このブクログで管理しようかなと思ってます。

本棚.orgというサイトもありますが、今のところはブクログかなぁ。
まだほんの一部思いつきで投稿しただけなので先は長そうですが、
雨にも負けずちょこちょこ更新していきます。

My本棚
http://booklog.jp/users/alt-scape

本棚を作るとオシャレなブログパーツも設置できます。
参考までに全てのデザインテンプレートを貼ってみました。
が、JSがぶつかって同じデザインが表示されちゃうのでキャプチャー画像でご勘弁を。
パターンとして横幅は3列、4列、5列。表示件数は5～30までです。

Youtubeを使った新しいプロモーションサイト「BooneOakley.com」

alt — Mon, 08 Jun 2009 14:06:13 +0000

上の動画ページへ飛んでください。
ノースカロライナ州の広告代理店「BooneOakley」のイカしたWebサイトです。
それは自社のコーポレートサイトをまんまYoutubeにホスティングしちゃうというもの。
（http://booneOakley.comにアクセスするとYoutubeの動画ページにリダイレクトされます）
過去にもYoutubeを使ったプロモーション、またキャンペーンはいくつかありましたが、これは新鮮！！

まずコンテンツの中身を動画のタイムラインで展開するところに注目してください。
従来のHTMLのような静的ページをスクロールしながら情報を受信していくといった動作が
こちらではシークバーをコントロールしながらになります。
タイムライン上にBILLY、About us、FEATURED WORKと区切ってありますね。
loadingの演出もかわいいです。

左側のナビゲーションエリアには4つのメニューがあり、それぞれリンクボタンになっています。
クリックすると対象のコンテンツページへ遷移しますが、
もちろん第2階層以下もYoutube上で構成されている仕組みなんです。
この動画上にリンク機能をもつことはYoutubeに通常用意されているアノテーション機能で実現できるみたいです。
↓動画編集画面にありました。知らなかった・・・

チャンネルページでは既に300人以上の登録者がいたりして
SNSでのつながり（相互コミュニケーション）もシステム化されているWEBサイトという見方もできます。
その他の機能として、オーディオ入れ替えやキャプションと字幕、
また視聴者のコメントや動画貼り付け、インサイト機能などYoutubeのプラットフォームを存分に使って
サイトデザインすることができるのも魅力ですね。

以下は過去にあったYoutubeタイアッププロモーション事例。

Nintendo x YouTube – ワリオランド
http://www.youtube.com/wariolandshakeit2008

東芝のブランドチャンネル
http://www.youtube.com/user/toshibanotepc

ピカデリー・サーカス駅のビルボード x　Youtube投稿動画
http://adverlab.blogspot.com/2009/05/image-source-very-interesting-billboard.html

KREVA meets YouTube
http://www.youtube.com/watch?v=RDAZfb4drgk