甘味志向＠はてな

はてなブログに引っ越しました

Tue, 14 May 2013 00:00:00 +0900

Markdown記法でブログ書けるの楽でいいですね！

http://moroya.hatenablog.jp/

メイキング「Birthday Song for ミク | miku-39.jp」こと技術解説

Mon, 03 Sep 2012 00:00:00 +0900

「初音ミク」というキャラクターが登場して5年。彼女の存在は世界中へと広がり、数の多くの人を魅了してきました。
その驚きと感動を盛大に祝ってあげるためのパーティの準備、そんな気持ちでこのミュージックビデオを制作いたしました。

http://miku-39.jp

初音ミク生誕5周年おめでとう！ということで「Birthday Song for ミク | miku-39.jp」というサイトを作りました。
せっかくなのでメイキングっぽい技術解説を書いてみたいと思います。

とりあえず miku-39.jp とはなんぞやってことなんですが、

Mitchie M ([twitter:@Tukada])さんが作った「Birthday song for ミク」という曲にあわせて Tatsuro Ogata ([twitter:@llcheesell])さんが作ったミュージックビデオにインタラクティブな感じの体感コンテンツを合わせたサイトです。

【ニコニコ動画】【ミクさんの生誕5周年をリンレン達5人と祝ってやる】Birthday Song for ミク

ミク5周年のお祝いにMitchie Mさんが作った、めちゃ素敵な曲にめちゃスタイリッシュなPVがついて、さらに加速サトウ ([twitter:@ksk_st])さんの初公開ミク3Dモデルがめちゃかわいい。

で、インタラクティブな感じのって具体的に何？ってことで以下に

位置情報と連携して、現在地の航空地図がPVの中で使われたり
Twitterと連携して、各種アイコンとか投稿した写真なんかがPVの中で使われたり
スマートフォンと連携して、パソコンの画面と動きが連動したり、シンボルをパソコンに飛ばしたりできる

位置情報とかTwitterと連携するアプリは色々あるんですが、
スマホと連動するミュージックビデオは（たぶん）初なんじゃないかなーと思います。

では大まかに「サーバー」「パソコン」「スマホ」の3つに分けて解説していきますね！

サーバーサイド

基本的に環境としてAmazon Web Service (AWS) を使っています。
使ったのは　EC2 & S3 & CloudWatch で、東京リージョンを利用しています。

AWSを選んだ理由は、キャンペーンサイトにありがちな急激な負荷の増加にも柔軟に対応できることや、
今回のように動画を配信しつつ低レイテンシを実現（後述）するのに適しているからです。

環境は Cent OS + Apache + MySQL + PHP の標準的なLAMPです。
そして、お気づきの方も多いと思いますが Node.js を使っています。
はい、Socket.IO ですね。

クロスブラウザでリアルタイム通信を実現するための、Node.jsで動くやつです。
これを使って、パソコンとスマホの連携処理をしています。

WebSocketはIEとかIEとかIEとかがまだ対応してないのでショボーン状態。
そこでWebSocketが使えないならFlashのSocket使えばいいじゃない、Flashも使えないならAjaxでLong pollingすれば… それも使えないなら（ｒｙ

…とフォールバックしてくれるナイスガイです。安心してリアルタイムアプリが作れるよ、やったねたえちゃん！

パソコンとスマホを接続するために、カラーコードを入力という方法をとっています。
これを順番に入力すると、接続されるわけですね。

まずパソコンで miku-39.jp を開くと、ソケットサーバーに接続して認証キーを要求します。
この時に返ってくる認証キーは「111111〜666666」の間となっていて、この1〜6 をそれぞれボーカロイドカラーに当てはめて表示しています。

そしてスマホで miku-39.jp を開きカラーコードを打ち込むと、コードを数字に変換した認証キーをソケットサーバーに送信します。
それでパソコンで認証待ちをしているキーの中から一致すれば、相互に繋ぐブリッジとなります。

つまりパスコード認証なんですが、ただ数字を打ってもらうよりも雰囲気が出て良かったです！

あとはパソコン側のソケットIDと、スマホ側のソケットIDをサーバー側で認証キーを使って相互に送信出来るようにしておきます。
これで準備はオッケー！

Twitter認証はアイコン画像とったり、最近の画像を取得したり、Followingとったり、壁紙つきツイートをpostしたりと、いろいろな部分で使っています。

あと Imagemagick を使って、サーバーで壁紙を合成して生成していますよ。

加速ミクやば。。

Imagemagick は突き詰めていくとPhotoshop並の処理が出来たりするので、他にも色々いじってみたいです。

スマートフォン

スマホ連携して再生開始すると、パソコンで再生されてる動画と連動した動画が流れます。

で。すっかり忘れてたんですが、videoタグってインライン再生が出来ないんですよね。
videoタグを使うと、iPhoneならQuickTimeでフルスクリーン表示になってしまうし、そもそも制御出来ない…

そこで巨大なCSS Spriteを作成して、background-position をずらしてコマ送りで動画を表現するというゴリ押しをしています。

壮観

CSS Spriteや、background-image を切り替えてコマ送り動画を表現するのは結構あちこちで使っています。
（ miku-39.jp を開いた時に、背景のケーキのろうそくがチラチラしてるのとか）

あとこれはパソコン側でも使ってるんですが、いろんな要素をアニメーションさせるのに
jQueryのanimateだとスムーズにならないのでCSS Transitionで描画しています。
ここで直接書いてしまうと、コードがむちゃくちゃな感じになってしまうので、jQuery Transit という素晴らしいプラグインを使います。

Transit - CSS transitions and transformations for jQuery

これを使えばjQueryのAnimateと同じように書いて、Transitionとかが直接書ける。jQuery Transit is god... つまり神プラグイン。

ただIEが全然ダメなので、miku-39.jp ではCSS Transitionに対応していないブラウザの場合はAnimateに切り替えたり、
Transform Y を Top に変えて計算する処理を加えるカスタマイズを加えています。

パソコン

最初にGeolocation API を使って位置情報をとっていて、Google Maps API と連動して現在地の航空写真が出てきます。

アイコンが出てくるところも、CSS Spriteでアニメーションさせたパーティクルが飛びます。

動画の再生についてですが、まずウィンドウのリサイズイベントに紐づけて、ビデオが常にウィンドウいっぱいに表示されるようにしています。
そして動画再生中のとき、おおまかに3つのレイヤーが存在しているような概念でロジックを仕込んでいきます。

少しややこしい話になるのですが、ちょっと説明しますと

1. 動画が再生されるレイヤー
2. 動画のサイズに合わせてスケールが変形されるレイヤー
3. 通常のブラウザと同じように等倍で表示されるレイヤー

と、3つのレイヤーがあります。

例えば、動画が1分30秒のときにX: 100px Y: 400px の位置にボックスを配置して動画の上に重ねる演出をしたいとします。
しかしその時ブラウザの左上から100px, 400pxの位置にCSSで配置しても、
もともと1280x720の動画をブラウザサイズに合わせて伸ばしたり位置を変えたりしている為、座標が一致しなくなります。

そのため1280x720の動画のズーム比を取得して、そのズーム比でレイヤー全体のスケールを変形して、動画の座標と実際の座標を一致させています。
ただ、動画中にバースデーメッセージが下から流れるシーンがあるのですが、ああいった文字が流れる部分は拡大縮小させる意味がないので等倍で表示しています。

そういうレイヤーというかDIV要素を用意して、その中に各演出用のDIV要素を作り、動画の再生に合わせて表示・非表示を切り替えて演出を発動させる感じです。

あと、HTML5のVideoタグは非常に残念ながらアルファ（透過情報）を持った動画を再生しても、対応していないので透けてくれません。

そこでまず、RGBとアルファを上下に分割した動画を用意してVideoタグで再生するのですが、このVideoタグは非表示にしておきます。
そしてcanvasを使って、VideoタグのRGBとアルファのピクセルを読み込み、canvas上でアルファ情報を合成して書き出す。という処理を全フレームで実行します。

ペヤング

あとはTwitter連携されている場合は、投稿されている画像を取得してきて背景に並べて、
その上にcanvasを乗せるとミクさんが歩いている感覚が得られる！ってな感じです。

iframeを下に敷いて、別のWebサイトの上をミクさんが歩いたりもします。

あとは、サビのシンボル飛ばし。

といってもサーバーサイドで説明した通りパソコンとスマホは既に連動しているので、スマホでシンボルを飛ばした瞬間にインターネット経由で通知されます。
座標とシンボルの種類をそのタイミングで受け取って、画面に描画するだけです。

シンボルが出るタイミングで中心から波紋が広がるんですが、ここはcanvasを使わずに実装してみました！
jQueryとCSS3のみで実装しています。

canvasを使わない波紋っぽい演出 - jsdo.it - Share JavaScript, HTML5 and CSS

jsdo.itにサンプルコードを載せてみました。クリックすると波紋が出ます。

飛ばされたシンボルはサーバーサイドでデータベースに記録していて、最新の数百件が再生される仕組みになっています。
ちなみにシンボルを飛ばす部分はBroadcastでソケット通信していて、miku-39.jp を開いている全員にリアルタイムで送信しているため、
世界のどこかで同じ時間にシンボルを飛ばしている人がいると、その人の飛ばしたシンボルが同時に表示されます。

あとこれはミクの誕生日に追加した機能なんですが

canvasを使ってスマホで一筆書きをすると、そのシンボルがパソコン上に転送されるようにしてみました。

タッチ座標を計算して、lineToでシンボルを描画。タッチ座標の軌跡を配列化して送信して、それをパソコン側で再描画することで実現しています。
ちなみにこれもデータベースに保存されるので、他人の描いたシンボルが表示されるようにもなっています。

miku-39.jp はFlashを使わず、JavaScript + CSS オンリーで製作しました。
その為、モダンブラウザでの再生を推奨しています。

Flashを使うか、HTML5を使うか。
最初はかなり迷いましたが、HTML5を選択した理由は「初音ミクの5周年記念だから」です。

ミクの代表曲である、みくみくにしてあげる♪ には「科学の限界を超えて、私は来たんだよ」というフレーズがあったりします。
音声合成という技術が、曲だけにとどまらずにMikuMikuDance、透過スクリーンライブなど様々なジャンルで共鳴して広がっていきます。

初音ミクには、それがメインストリームになるかどうかに関わらず、
新しいことにチャレンジして未開の領域を切り拓いて行って欲しい。そういう想いを込めてこのインタラクティブ・サイトを製作しました。

もう誕生日は過ぎましたが、9月14日までの期間限定サイトとなっていますので、ぜひご覧になってみて下さい。
そして、スマホを持っている人は電子の世界でも、持ってない人は心の世界で、繋がってお祝いしてあげましょう。

初めて君の声の音聴いて世界が変わる Happy Birthday!
また新しい歴史を歩むエンジェルに「おめでとう」

niconico zeroをちょっとスッキリさせるUser Style書いた

Fri, 04 May 2012 00:00:00 +0900

こんな感じにする↓

動画タイトルサイズ縮小
投稿者説明文の全文表示
マイリスト追加など各種ボタンを初期表示
コメント入力欄も初期表示
いろいろ小さく
ホバー系のエフェクト切った
市場は下に、タブも消した
JavaScript使ってない
広告とかはそのまま

インストールはUserstyles.orgから

Website Themes & Skins by Stylish | Userstyles.org

Stylish拡張をインスコしてから

Q. 不具合あるんだけど
A. そっか〜＾＾

Q. バージョンアップで動かなくなったんだけど
A. そう…（無関心

Q. ライセンスは？
A. WTFPL (http://sam.zoy.org/wtfpl/COPYING)

どうぞご利用下さい。

ヨーロッパ周遊旅行 / パリ篇その1

Thu, 23 Feb 2012 00:00:00 +0900

前回（企画から成田篇）

実はこの時、エールフランス航空がストライキを起こしていて、国際線が欠航になるかもしれないという事態が起きてました。
H.I.S.のひとも「なにか起きても極力は対応します」とのことで、ヒヤヒヤしながら動向を見守ってたところ、なんとか俺の乗る便は飛んでくれることに決まって一安心。それでも、いくつかの便は欠航になったらしい。

ヨーロッパの方では、日常的にストライキが発生するらしいのですが、ストライキは必ず予告されるので、きちんと下調べしておきましょう。

日本時間15時ごろに、成田空港を離陸。
飛行時間は12時間なので、着くのは夜中… ではなく、現地時間16時ごろ。

夜中になっても暗くはならなーい

ぐんぐん上がっていって、雲の上に。
数時間ほど飛んでいると、ディナータイムになるということでメニューを配られる。
洋食か和食が選べるらしいけど、せっかくなので洋食を選ぶ。
周りもだいたい洋食だった。そりゃ今からフランス行くもんね〜

機内食は熱々になってるし意外と美味しい

時差ボケに備えて極力寝ておこうと思って、寝れる分は寝る。
目を閉じてりゃ結構眠れてしまう体質さんありがとう。

その他はiPadで本を読みながら過ごして、着陸の2時間ほど前に2回目の機内食の時間に。

朝食という扱いになってる

そんなこんなで、シャルル・ド・ゴール国際空港に着陸。
日本語アナウンスとも、これでお別れ。

SNCFは、フランス国鉄なんですって

…さて、どうやってパリ市内まで移動しようか。

今回の旅に、ガイドブックは持参していない！！
分からなかったらググる！あとカン！

まぁとりあえず空港と市内を結ぶと言えば電車だろ的な発想で駅っぽい表示に向かって進む。
どうやらGare du Nord（パリ北駅）が一番大きな駅らしい。そっからなら、どこでも行けるだろうと思ってとりあえずRERでGare du Nordへ。
ちなみに後から知ったんですが、RERはそんなに治安がよくないらしいので夜中や女性一人なんかは、鉄道じゃなくシャトルバスで移動したほうがいいと思います。まぁRERに乗ると、落書きだらけだわ薄暗いわで知らなくても大体わかっちゃいましたが。

そのあとチケットの買い方が意味不明とか、乗り方もよくわからないとか、どの駅がホテルの最寄りだとか、どこで乗り換えすればいいのかとか、そういうことを英語を振ってある看板をなんとか読みつつ、ホテルの最寄駅へ。

パリ市内にはメトロポリタン（通称メトロ）が縦横無尽に走りまわっていて、さらに地上ではBUSがこれまた隅々まで走っています。
なので移動手段にはまず困りません。

これがパリのメトロポリタン駅の入り口だ！

メトロのシステムは日本の電車とは全然違ってて面白いです。
パリ中心から同心円状にゾーンが広がっていて、外側のゾーンまで行ける切符ほど値段が上がる仕組み。

観光スポットは、ほとんどZone1の中にある

パリのメトロは入り口しか改札がないので、チケットを通したら後は捨てても大丈夫。（乗り換えするとき以外は）
「切符なくした！！！」っていう焦りは起きないので良いシステムですね！

Ticket t+（Tチケット）€1.7（約180円）で、メトロ・市内RER・BUS・トラムなんでも乗れます。
どこに行くときも、最初にこれを改札で通せばどこで降りてもOK。めっちゃ分かりやすい…！

上がシャルル・ド・ゴール空港からパリ市内へ、下がTicket t+

RERは郊外と市内を結ぶ路線なので、RERを使って郊外に出るときは別料金が必要になります。
ここは日本の鉄道と同じように、降りるときも改札がある。

あと、ボタンかレバーを操作しないとドアが開かない！
これ地味につまづくポイントだった。

そういう訳で、お決まりの観光スポット。~~特に言うことはないのでスルー。~~

デデーン

ぶっちゃけガッカリ名所

エッフェル塔

階段コースと、エレベーターコースがある。もちろん値段違うよ！

エレベーターで登ればよかったと今でも後悔している

ヨーロッパはとにかく、誰もがタバコを吸ってる。しかも、路上喫煙。
路上喫煙ね、歩いてたらタバコの火が自分のすぐそばを通るのヤだね。
しかも、誰もが当然の如く道に吸殻を捨てる。

そんなもんだから、道は吸殻だらけ。
パリは街並みが本当に綺麗で、歩いているだけでも楽しかったんだけど、少しでも下を見てしまうと萎えること間違いなし。

ヨーロッパにはコンビニ的な店が無い。代わりにこんなキオスクがあちこちにある

あと治安ほんとよくない。パリ治安悪い。
スリはヨーロッパ中、どこにでも居るらしいんだけども、それ以上にひったくりやらクスリ的なアレやらが多い。

パリ郊外はスラムとなってるので、市内中心部から出来るだけ離れないほうがいいかもです。

ひったくり危ないな〜と思いながらも、カメラをバッグから出してないと街並みが撮れないので、
カメラのベルトとかしっかり持って歩いてたときに、突然地元民の人に怒られた。

パリのひと「あんた！なにやってんの！カメラちゃんとバッグにしまいなさいよ！盗られるわよ！！」
おれ「あっ、すいません、サーセン」

（意訳）

パリのひと優しい。

レポの画像がiPhoneのカメラばっかなのはそのせいです。
観光名所では一眼使ったので、綺麗なのいくつかありますが、それはまた後ほど。

さて、パリの美しい名所いっぱいありました。ローカル的なことも。
パリ篇その2に続く！

ヨーロッパ周遊旅行 / 企画から成田篇

Wed, 22 Feb 2012 00:00:00 +0900

2月6日から21日まで、欧州を回る旅に行って来ました。
5カ国9都市を回る旅になりまして、その間の写真をアップしようとしたんですが、ついでに日記も兼ねて旅レポートなんてものを書いてみようと思います。

レポは都市ごとに分けて書いていくので、長くなりながらも、じわじわ思い出しながら書いてみたいと思います。

というわけで、まず企画篇から。

ふと思い返せばこの2年、東京から出たのが実家に帰るときだけ。
新幹線使って奈良まで帰って、たまに京都、大阪、名古屋に寄るだけ。

長期間の休みがあるのなんて、学生の時だけっていうことが、ようやくなんとなく分かってきた学年（これから3年）なので、ちょっと長期で旅行でも行っちゃう？長期ならもう海外とか行っちゃう？パスポートってどこでもらえるの？ってレベルで企画開始。

何も考えずに、ただ漠然と思ったのが

カンボジアとかラオスとかで過ごしたい
ヴェネツィア行きたい、欧州とかあこがれる
オーロラ見てみたい
ボリビアのウユニ塩湖行ってみたい

最後だけやたらピンポイントなのは、画像を見て「ここ死ぬまでには一度は行きたいな！」と思ったから。

死ぬまでには一度は行きたいウユニ湖

しかし調べれば調べるほど、たどり着くまでの道が険しくて、海外初心者にはハードル高すぎ状態だったのでやめときました。でもいつか行きたい。
とりあえず大学が休みの間だから、2〜3月。パラパラとネットで調べてみると、なんとヴェネツィアでカーニバルが開催されるというじゃありませんか。

そうだ、イタリア行こう。

さっそくANAのサイトで航空券を検索！

なにこれ高い

割引？ホテル？え、結局どうすればええのん？

…八王子駅前のH.I.S.に行きました。

おれ「イタリア行きたいんですけど」
HISのひと「あ〜イタリアいいっすねぇ〜」
おれ「そういえばEU内はどこでも行けるんですよね」
HISのひと「鉄道で他の国行ったりとかいいっすよぉ〜」
おれ「あ〜いいっすねぇ〜」

という感じ（意訳）でヨーロッパ各国を回ることになりました。

何度かH.I.S.に足を運んで、地図を見ながらあーでもない、こーでもない、こーすれば安いと言いながら旅行プランを決めていくのは非常に楽しかったです。とても親身にプラン考えてくれたH.I.S.の方々ありがとうございました（宣伝）

そんで立川でパスポート取ったり、海外旅行保険の説明受けたりしてあっという間に2月初頭。

HISのひと「これが航空券のEチケットです、これが鉄道のチケットです、これがホテルのバウチャー（予約確認券）です、これが保険です、ではいってらっしゃい！」
おれ「おお… 完璧、そこに痺れる憧れる」

日暮里から京成スカイライナーで成田空港まで一直線

動く旅になると思って、かばんには着替えとパソコン、iPhoneと予備バッテリー、一眼レフしか入れずに出来るだけ軽装で。

明らかに非リアに対して喧嘩を売っている成田空港

空港内のUFJ銀行で日本円をユーロに両替し、海外でのネット通信用に、予約しておいたグローバルデータのMiFiを受け取る。

パスポートを機械に入れるとチェックイン処理されて航空券がぺろっと出てくる

これから乗るAIR FRANCE（エールフランス）の飛行機

最初に目指すはフランス、パリ。シャルル・ド・ゴール空港。

待ってろヨーロッパー！

次回、パリ篇に続く！

2011年も、もう終わりですね

Sat, 31 Dec 2011 00:00:00 +0900

今年は大きなことが2つありました。

1つめは、やはり東北大震災が与えた影響です。これは、とてもとても大きいものとなりました。
津波が家々を飲み込んでいく映像、押し流される車、人、そして原発事故。今を生きるとはなんなのか。
まず普段通りに生活が出来るということの有り難さ、そんな日常はいとも簡単に崩れ去る事実。
それはエンターテイメントに関わりたいと願っていた人間として『娯楽』なんてやっている場合なのかという、
大きな課題を心に残して行きました。
ドキュメンタリーというコンテンツに魅せられたのも、影響があったと思います。

2つめは、ようやく業界に少し携わることが出来たということです。
学生しか経験したことがなく、仕事といってもアルバイトしか今までやったことがありませんでしたが、
はじめて会社という組織に所属して、お金を貰って仕事をこなし、それを社会に出す。
自分自身で仕事を請けて、お金を貰って技術を使い、それを社会に出す。
それを経験することで、バイトでは分からなかったことを、たくさん知ることが出来ました。

まだ大学にて、技術の基礎や考え方などを学んでいる最中ではあります。
しかし、自分の直感と考えで今年は生きました。そして、これからもこうありたいと思えます。

そして、来年からは、また新たに挑戦を始めたいと思っています。
大きく、大きく、真っ白なところに絵の具をぶちまけるように。
自分は1色しか持っていなくても、何人も何十人も集まれば、虹色になるのではないか。
それはきっと、とても面白いものになると考えています。

2012年も、「やりたいこと」を失わずにいられる1年になればいいなあと思っています。

jQueryを使ったアニメーションと、ユーザビリティの話。それとCSS3。

Sat, 03 Dec 2011 00:00:00 +0900

JavaScript Advent Calendar 2011 オレ標準コース、2日目のもろへいやです。とても遅れてすいません…

私は技術的な話は得意ではないので、デザイン面からJavaScript プログラマーに向けてのTipsを書きたいと思います。
今回は、アニメーションの話を書いてみます。

jQueryは標準で、要素の表示・非表示を切り替えるときにフェードやスライドを使うことが出来ますよね。

$("#box").fadeIn("fast");

たった一行で、アニメーション効果を付加することができるので、
プログラマーのみならずデザイナーの方でもjQueryを使っている人は多いんじゃないかと思います。

しかし、簡単なおかげで何をするにアニメーション効果をかけまくってしまったり。
あるいはアニメーション効果なんて無駄！ということで、全然使っていない人もいると思います。
ですが、アニメーションは効果的に使うと非常に使いやすいサイト・アプリケーションを作ることができます。

フェードやスライドなど、こういった効果を「飾りつけ」に使おうとすると、いちいち要素が動く面倒くさいサイトになります。
これはデザインの本質だと私が考えていることですが、
デザイン・アニメーションというものは、ユーザビリティを向上させるために存在していると思います。

例えば、急に要素の表示・非表示を切り替えると、何も知らないユーザーは「あれ？いまどこが変わった？」と混乱してしまいます。
ここで0.5秒間でアニメーションするようにしてあげると、無意識にどこが変化しているのかを読み取ることができ、
ステータスの変化をユーザーが意識的に感じることができます。

さらに、文字列を変更させたボックス要素を一瞬だけハイライトさせてあげることで、注目を引いたり、アクションを起こさせるきっかけとしても使えます。

どうもJavaScriptによるアニメーション！というと、
CSS3によるTransition Effects 30 - くらげだらけ
こういう感じの派手な効果が注目されてしまいがちですが、何気ないウェブサイトにも小さなアニメーションを仕込むことで、
ユーザーが使いやすいサイトを作ることが出来ます。

デザイン面の話をJavaScript Advent Calendarのようなイベントでするのは気がひけるのですが、
サイトのデザインなどは、ウェブデザイナーさんがすることが多くても、
アニメーション効果までは関わってもらえないことほとんどだと思います。

そんな時に、プログラマー側でこういった簡単な知識を持っているだけで、全体のユーザビリティはかなり向上します。
いくらロジックが良くても、最終的にユーザーさんが使いやすいと思ってくれなければ意味がないので、ぜひそういった部分にも意識を向けてもらえればと感じます。

とまぁ、ここまでJavaScriptなしなので、ここからはJavaScriptの話をしたいと思います！

jQueryのアニメーションは、タイマーを使ってCSSのパラメータを書き換えていく形で実装されているので、
IEなどでも動作しますが、複雑なアニメーションになってくるとやっぱり重いです。

カクカクな動作になってしまってはやっぱりダサいので、CSS3のTransition(Animation)を使って、なめらかなアニメーション効果を付加しましょう！

#box {
	-webkit-transition: width 1s linear;
	-moz-transition: width 1s linear;
	-o-transition: width 1s linear;
	-ms-transition: width 1s linear;
	background-color: red;
	width: 300px;
}

#box:hover {
	width: 500px;
}

CSSだけでアニメーションさせるときは上記のように、まず接頭辞付きでtransitonプロパティを記述します。
そしてアニメーションのトリガには、擬似セレクタを使うのが一般的です。
これを、JavaScriptでアニメーションを発火させるときは

	$("#box").css("width", "500px");

のように、普通にCSSのプロパティを設定します。
すると、既に#box要素にはtransitonの設定が記述されているので、JavaScript側で何か設定することなくアニメーションを行うことが出来ます。

しかしこのままでは、簡単なフェードやサイズ変更のときはよくても、複雑なアニメーションになってくると使い勝手が悪いですよね。
そこで、jQueryのプラグインを使うと便利です。

jQuery Animations with automatic CSS3 transitions when possible

これをロードすると、fade(In|Out)、slide(Up|Down)、animateメソッドを拡張してくれます。
あとは普通にjQueryのAnimateを使う時と同じようにすれば、自動的にCSS3のTransitonを使ってくれます。便利ですね！！

CSS TransitionはiOSデバイスで特に効果があります。
単純に非力なモバイルデバイスで、jQueryのアニメーションを使うとカクカクとした動作になってしまうんですが、
iOSのMobile SafariはGPU アクセラレータが搭載されているので、ネイティブアプリ並のフレームレートでアニメーションします。

ちなみにiOSシミュレータを使えば、画面上でGPU アクセラレータが適用されている部分を可視化することが出来ます。

赤くなっている部分に、GPU支援が効いている

と、こんな感じです。

プログラミングばかりしていると、どうしてもデザインには疎遠になってしまうことが多いと思いますが、
せっかくウェブサイト・ウェブアプリを作るんだったら、ユーザーさんに使いやすいと感じてもらえたほうがいいはずです。

ちょっとした工夫で、使いやすさの向上に繋がるので、ぜひやってみてください！

ラスベガスから学ぶ、カジノとエンタテイメント

Tue, 22 Nov 2011 00:00:00 +0900

たまには、すこしまじめなメディアの話をしようかなと思い立ちました（迫真）

唐突ですが、ラスベガスという場所で思い浮かべるものはなんですか？

夜通し明るいネオンが光る街並み、あちこちから聞こえる騒ぎ声、そしてカジノ。
ラスベガスといえば賭博ですよ、ギャンブルです！

ところが日本では「カジノ＝目付きの悪い黒服のマフィアたちがウロウロしてるようなイメージ」のような、悪どい黒いイメージが先行していることが多いようです。
~~ニセコイの千棘のようなマフィアなら略~~

でも実際のところ、現代のカジノはそういった犯罪が入り込む余地のないエンターテイメントとして成り立っています。
では、ラスベガスの歴史を少しだけ紐解いてみましょう。

ラスベガスの最初は、ゴールドラッシュが関係しています。
1840年代にカリフォルニアでゴールドラッシュが起き、カリフォルニアへ向かう途中の経由地点として栄え、住み着く人々が現れました。

続いて、1929年に起きた大恐慌を打開するための、ニューディール政策の一環としてフーバーダムが建設。
さらに特徴のないのが特徴のネバダ州では、ギャンブルを合法化してなんとかしようとします。

結局ゴールドラッシュから100年近く経っても田舎町だったラスベガスに、とある有名マフィアがフラミンゴ・ラスベガスというホテルを建設したのが1946年のこと。
じわじわと儲かりはじめて、1950年代から本格的にマフィアたちが次々にホテルを建設。さらに有名人を使ってショーを行い、盛んな集客を行うようになりました。

この頃のラスベガスは、合法的な売春と賭博の街でした。

これが変わってきたのは、カジノライセンス法が改正された1969年頃。
カジノのライセンスを管理する「ゲーミング・コミッション」や「ゲーミング・コントロール・ボード」等が設立されて、当局の取締りを強化。
犯罪に関わる全てのものを排除し、マネーロンダリングなどに対する厳しい処罰を設けることで、マフィアにとってラスベガスは金儲けがしずらい土地となっていくわけです。
そうしてマフィアが自ら放棄したラスベガスに、大手企業がドカドカと参入してきます。

まずカーク・カーコリアンというスーパー富豪なアメリカの実業家。
この方が1969年に「ラスベガス・インターナショナル」という、当時世界最大のホテルをおっ建てました。これが、現在のラスベガス・ヒルトンです。

ここで最初にエルヴィス・プレスリーとバーブラ・ストライサンド、2人の著名人を呼んでショーを行い、客をガンガン呼び込みました。

さらにスティーブ・ウィンが「ミラージュ」ホテルを建設、これがテーマホテルの草分けと言われています。

ミラージュではボクシング世界戦を集中興行するなどして、さらに人を集めます。
ラスベガスで興行すると一定のフィーが入るような仕組みにもなっていたそうな。

対するカーコリアンは1993年に、のちにプロレスやボクシングなどの格闘技界の殿堂とも呼ばれるようになる「MGMグランド・ガーデン・アリーナ」を建設。

ブリトニー・スピアーズなんかもコンサートに使うなど、かなりの盛り上がりを見せます。

それをみたウィンは「ベラージオ」ホテルを建設。
目玉アトラクションとして、シルク・ドゥ・ソレイユのショーを興行。

東京ディズニーリゾートのシルク・ドゥ・ソレイユは、今年いっぱいで公演終了らしいですね(´・ω・｀)

ていうか実業家さん、ポコポコとホテル建てすぎですね…（遠い目）

それだけカジノを中心にエンターテイメントを集めた娯楽施設（テーマホテル）は儲かったということなんです。

つまり、ラスベガスはカジノだけで収益をあげているのではなく、複合施設コンセプトが必須条件ということですね。

まずカジノ、そして大型のホテル。そこに常設のライブ・エンタテイメントが備えられ、さらにブランドショップからコンベンションまでが施設内で営業。さらにスパやフィットネスが充実していく… という集合娯楽施設です。
ちなみに今のラスベガスは、アメリカでどこよりも治安の良い観光地といわれています。

そして、この勢いはマカオへと移ります。

2004年に「ラスベガス・サンズ」社が「サンズ・マカオ」というカジノリゾートを建設。

建設には2.4億米ドルの資金が注ぎ込まれたものの、なんとわずか半年で回収してしまうという化物っぷり。

マカオでカジノリゾートは儲かる！と分かった実業家たちが次々に資金を投入。
2010年までに120億米ドルを上回る投資で、20の新しいカジノリゾートホテルが建設されたそうな。

観光客は2000年の900万人から、2007年には2,700万人に増加。
2006年のマカオでのカジノ総売上は72億米ドルを記録し、ラスベガス・ストリップの65億米ドル超え。
2008年には、137億米ドルの売上を記録。
2010年には、235億米ドルに。前年比58%増、規模はラスベガスの4倍。どういうことなの…

現在は、未開発のCotal Strip地域だけで2012年までに新たに3万を超える客室が建設され、Cotalの商業スペースは10万坪以上、世界最大規模になるとかで破竹の勢い。

既に観光客の数では、3,500万人とラスベガスと渡り合っているマカオ。
成長しつづけるマカオのほうは、2020年には7,000万人になるだろうと予測が出ているらしい。

ただし！

ラスベガスはカジノ売上が65億米ドル、カジノ以外の売上は90億米ドル。
マカオはカジノ売上が235億米ドル、カジノ以外の売上は20億米ドルに留まる。

この数字は「ギャンブル好き」とされる中国人観光客の勢いをきれいに表しているとも言えますな。

マカオ以外でも、シンガポールでも開発が行われ、シンガポールでのカジノ売上は65億米ドルまで成長。
もうラスベガスと同規模になっています。

まとめると、カジノは単体で収益を上げるものではなく、カジノリゾートとして複合施設コンセプト。
そこに大型のライブエンタテイメントの土壌が生まれる。
つまり、カジノの開発に連動してアジアのライブエンタテイメントは活性化すると考えられます。

アジア市場にカジノ施設が加わることで、欧米に匹敵するエンタテイメント市場が構築されるのは、ほぼ間違いないんじゃないかと。

さて、日本では「国際観光産業振興議員連盟（通称：カジノ議連）」が、東日本大震災を受けて一気に動き始めています。
保守的な日本では賛否両論、どちらかというと否定派が多かった賭博の合法化ですが、震災復興・観光立国の起爆剤としてカジノ区域整備推進法案が8月に正式決定され、収益を復興財源に充てられるとして注目を集めています。

http://www.sankeibiz.jp/macro/news/111119/mca1111190500000-n1.htm
（今月19日の記事）

具体的には、仙台にカジノを作る計画。
長崎のハウステンボスや東京ドームでも、成長戦略の研究開発としてカジノ事業をあげはじめ、ラスベガスなどの米国企業も日本に照準を合わせ始めて、事業が本格化しそうな雰囲気を出しています。

まだ日本では、冒頭で述べたような「カジノ＝闇社会への関係」というイメージが根強く、合法化への抵抗が強いんですが、ここまでで書いたように「危険性が強いからこそ取り締まりを普通より数倍強化するから、逆に最も安全」となっているのが実情ではないかと。

またギャンブル中毒について。
シンガポールでは外国人観光客がカジノに入るのは無料ですが、国民は入場料を100ドル支払う必要があります。高い！
持ち物検査から本人確認が隅々に渡って行われ、親族は政府に申請することでギャンブル中毒になった人がまたカジノに行っていないか確認することが出来るような制度もあります。（入場拒否も出来るのかな？このへんは不明）

これからの日本のエンタテイメント市場を、アジア全体で通用するレベルに押し上げるためには、現実解として大型カジノ開発が必要不可欠なのではないかと思います。

特に不振が続く音楽業界。
音楽コンテンツで売り上げるのではなく、アーティストのライブ、コンサート、ツアーなど本人稼働のビジネスモデルにせざるを得ないことが明白になっている今、その土壌を育てることは絶対なのではないかと。

さらにゲーム業界を牽引する日本だからこそ生み出せる、新たなビジネスやエンタテイメントがカジノリゾートと連動して生まれることも十分に有り得るのではないか、そう思わざるをえない国際状況になっています。

エンタテイメントを国内だけで消費する時代は終焉を迎えています。
アジアの、そして日本のカジノリゾートはどうなるのか。
そしてエンタテイメント市場はどのように変化していくのか、引き続き見守っていこうと思います。

総合エンタテイメント創作集団「S-TRIBE」の代表に就任しました

Mon, 21 Nov 2011 00:00:00 +0900

2011年11月22日追記

http://www.s-tribe.net/archives/1765

がんばります

近頃、朝が寒くて昼間が暖かいお陰で服装に困っているもろへいやです。

昨日、Ustreamにも少しゲストで出させてもらいまして発表という形になったんですが、
このたび、サークル S-TRIBE（エストライブ）の代表に就任させていただくことになりました。

Home - Skin Care Tribe

S-TRIBEはそそそPこと津久井箇人氏が主宰する個人サークルなのですが、私が以前から考えていて設立しようと思っていたサークルのコンセプトと方針が合致したため、私がS-TRIBEに入って、代表という立場で構造改革を行うことになりました。（といっても、もちろん普通にスタッフとして働きますよ！）

「いろんな才能持った人がたくさんいるのに、この世の中には火種が足りない」というのは、私が前々から思っていたことで、
文字を書いたり、絵を描いたり、デザインを起こしたり、世の中にはいろんなことが出来る人がいますよね。

でも、それを全力で発揮する方法・場所はそんなに多くないのが現状だと思います。

そこで、新生S-TRIBEでは、それぞれの力を組み合わせてさらに面白いものを作っていくためのスタッフをこれから募集します！

「MMDのモーションつけるのは得意だぜ！」
「ゲーム作りたいけど、なにから覚えればいいのか分からん…」
「小説かけるけど、これってなにかコラボの種になるの？」

絵・音楽・動画のみならず、プログラマーから番組撮影、ネット生放送から3DCGデザイナに脚本・構成まで、ものづくりに関することならなんでもやります！

そして、今できることよりも、これから何をやりたいのか。その意志を強く持っている方を募集します。

技術や実力なんぞ、やる気があればいくらでもこれから伸びます。
むしろ知っていることならスタッフ同士で教えあえますし、知らないことでも助けになることは必ずあります。

やる気がある人が集まって、共に協力しつつスキルを上げていく

スタッフ個人の知名度を上げて、最終的にS-TRIBEに頼らない繋がりを作る

人材・費用不足でクオリティを上げられない個人・他サークルの企画をワンランク上に押し上げる

世の中のエンタテイメントを、もっと面白いものにする

一緒に頑張って面白いもの作ってスキルも上げてこうじゃん？というサークルにするつもりです。

またS-TRIBE単体でも活動はもちろん行いますが、個人や他サークルさんと積極的にコラボレーションを行います。

例えば「同人誌作ったけど、表紙デザインやら装丁はわかんねー！」という時に、一緒に良い作品を作るためのコラボを出来ればいいんじゃないかなぁと思っています。

新生S-TRIBEには、来年1月1日から切り替わる予定ですが、募集の詳細については年内にお伝え出来るように調整していますので、もうしばらくお待ちください！

S-TRIBEでひとりじゃ出来ないモノづくりの面白さと、大変さを一緒に経験しませんか？
そして世の中の面白いものが、少しでも増えればいいなぁと思っています。

細けぇことは別のブログでいいんだよ！

Fri, 18 Nov 2011 00:00:00 +0900

はてなブログをこっそり始めました。~~びっくりするほど低機能で驚愕を隠せません。~~

http://molo.hateblo.jp/
http://molo.hateblo.jp/

はてなダイアリーは、作ったものとか色々載せる感じで今まで通りメインで使います。
はてなブログは、適当に技術ネタとか考えを書きなぐります。
Twitterは、日々の適当な発言を垂れ流すだけ。

という使い分けをしておりますので、どうぞよろしく。

あと、やっぱTwitterに慣れすぎてて、改めて考えをしっかりまとめようと思ったら全然書けなくてびっくり。
頭の体操がてら考えてることを書いていけたらいいんじゃないかなぁと！

大学生なら新聞必須だけどiPadでいい

Sat, 15 Oct 2011 00:00:00 +0900

たまには雑記でも…

まぁ大学生やってたら、どこでも「新聞読め」は言われると思う。

うちはメディア学部なんていう学部に入ってるので、そこから新聞・テレビ・ラジオ・インターネットなんていう様々なメディアの特性理解から必要性の討論とかあったりするんだけれども、まぁ大体「やっぱり新聞なくならないよね」という結論になる。

理由はいろいろあるけど、やっぱりまとめる情報の広さから信頼性まで。
速報性という点では他メディアに劣るけど、ザッと社会を見渡して知りたい、もしくは重要なニュースや情報をそのまま細かく読むことの出来る部分はWebよりまだ上手かなと感じる。

ただ… 新聞かさばる。めっちゃかさばる。

そこでiPadで代替してみた。

うず高く積まれた3ヶ月分の新聞。
新聞捨てる日って月に2回しかないから忘れやすいよね〜で溜めすぎた結果がこれだよ！！

で、今更だけど産経新聞HD。

月に1,500円で朝刊と夕刊読める。しかも3ヶ月分のバックナンバーも読める。
月額3,000円超えの紙の新聞とは一体何だったのか。

iPhoneの時から見てたけど、iPadじゃないと読む気にならんね。やっぱり。
まぁそれはいいとして、こうなると欲が出て各社の社説とコラムが読みたくなる。

そこでFlipboardっていう、有名なアプリを使うことに。

いろんな情報を雑誌風にレイアウトして表示してくれるアプリなんだけど、
最初は見てくれだけのアプリかと思ってたんだけども全然違う。読みやすいし実用性抜群。

これを使うためにiPad買ったといってもいい。

各社の社説とコラムをFlipboardに追加するにはGoogle Readerを使う。
直接FlipboardにRSSを追加は出来ないので、ちょっとだけ遠回りする。

まずRSSがいるんだけども、その辺りはYahoo! PipesでRSS吐いてるサイトとか
社説をRSSで吐いてるサイトがあるのでその辺りを、一旦Google Readerに登録。

社説を読む。 - あまたの何かしら。
http://pipes.yahoo.com/pipes/pipe.info?_id=d061f94e5efbb703d80bf53496e4fbea

Google Readerに登録したら、FlipboardのmoreからGoogle Readerのソースをたどって
FolderからRSSを選択すれば個別に追加出来る。

ちなみに他には、ほぼ日の「今日のダーリン」とかRead it laterとか。
毎日更新系のコラムとか、後で読むサービスとかと相性良すぎる。

iPadすぐ飽きるかなーと思ってたけど、作業をMacでやって、休憩をiPadでやるからメリハリがつく。

あと普段モバイルデバイスは容量使わないので最小容量のを買うんだけど、iPadは32GBにした。
これが正解で、iPadは電子書籍からムービーからアプリから書類まで、なんでもかんでも突っ込むから大きめじゃないとダメだった。

自分は情報系の大学にいるけど、Mac持ってる人は多くてもiPadはあんまり見ないので、
大学生はiPad検討してもいいと思ったので書いてみた。

ノート取ったりPDF見て注釈入れる程度ならiPadで全然いけるで！

P.S.

秋は四季の中で一番好きな季節だけども、気をつけて見ないと一番気づかない季節。
少しずつ近づいてくる秋を観察しながら歩くのが、たのしいと思う今日この頃。

Titanium Mobileでアプリ開発するときに気をつけること（＋インターンの話）

Tue, 04 Oct 2011 00:00:00 +0900

こんにちは、もろへいやです！

8月から1ヶ月半ほど、同人ダウンロード販売最大手のDLsite.comを運営する株式会社エイシスにインターンシップに行ってました！

この話は最後に書くとして、そこでTitanium mobileを使ったiPhone・Androidアプリケーションの開発をしました。
最近、知名度がじわじわ上がってきてるTitanium mobileですが、まだまだ発展途上で悩まされることも多いです。

Titaniumでのアプリ開発の方法は、各ブログや書籍で解説されていますので、ここでは細かいノウハウを書いてみます。

作ったアプリ

DLsite 壁紙

DLsite.comのスマートフォン対応にあわせて、毎月更新される壁紙アプリをリリース

Android Marketでダウンロード

App Storeでダウンロード

トップ絵のイラストレーターrefeiaさんをはじめ、複数の作家さんの書きおろしイラストを毎月更新するアプリです。
ほのぼのイラストから、ちょっとエッチなイラスト（この苦労はあとで…）さらにニコニコ静画とのコラボイラストなども多数掲載されています！

ちなみに、今回はTitanium mobile初挑戦で約2週間ほどで完成までこぎつけました。

企画段階

前提条件として、ざっと以下のものがありました。

iPhoneにもAndroidにも対応するアプリ

機種ごとに解像度の違うAndroidにも、ちょうどいい大きさで壁紙を設定させる

Androidのスクロール壁紙にも対応させる

イラストギャラリーは、1枚1枚が大きく見れるものを

イラストは更新するためアプリ内に含めない（でも、3G回線でも大丈夫なようにする）

まずiPhoneでもAndroidでも使えるアプリということで、簡単なアプリをサクッと作れるというTitanium mobileを利用することになりました。
壁紙の解像度の差は、サーバーサイドで吸収することに。（端末解像度情報を送信して、ちょうどいいサイズの画像を取得する）

しかしまぁTitanium mobileを使ってアプリを開発するのは初めてだったので、最初は手探りな部分がありました。
特に今まではTitanium Developerというソフトでの開発だったのですが、
Aptanaと統合されたTitanium Studioという統合開発環境になったので、細かいノウハウが少ないので要注意です。

設計について

まず、Titanium mobileでどこまでのことができるのかを把握したほうが良いです。
そのために、Kitchen Sinkというテストアプリをビルドしてください。

GitHub - appcelerator/KitchenSink: Titanium Mobile Kitchen Sink Demo

これで、Titaniumでできることが感覚的に分かります。
おおよそ標準UIはほぼ全て対応しているのですが、逆にそれ以外のことをしようとすると重くなる傾向があるようです。

ちなみにDLsite壁紙アプリは、Titanium mobileが苦手とする特殊なUIを採用してしまったため、チューニングに難航したり
パフォーマンスに影響が出ることになってしまいました。
（もちろん、ありきたりなUIでは表現出来ない「美術館のギャラリーのような」ものは実現できたのですが）

特にiPhoneでなんとかなっても、Androidではうまくいかないことが本当によくあります。
もし本当にiPhoneでもAndroidでも最高のアプリをつくろうと考える場合は、MVCモデルのようにUIの表示部分は分離すべきだと思います。

どちらにしてもワンソースで両方に対応というのは難しく、あちこちに「if(iPhone==true)」のような分岐が入ることになるので、
コードの量は増えますがUIデザインから分けてしまい、ロジックだけ使いまわすようにした方が上手く出来るように思います！

エラーの対処について

Titaniumはじゃじゃ馬なので、意味の分からないエラーがガンガン出ます。
でもここで瞬時にTitaniumたんはドジっ娘なんだろうな… という想像をすると心が落ち着きます。

[ERROR] Error: Traceback (most recent call last):
  File "/Library/Application Support/Titanium/mobilesdk/osx/1.7.2/iphone/builder.py", line 691, in main
    provisioning_profile = read_provisioning_profile(pp,o)
  File "/Library/Application Support/Titanium/mobilesdk/osx/1.7.2/iphone/builder.py", line 216, in read_provisioning_profile
    f = open(f,'rb').read()
IOError: [Errno 2] No such file or directory: u'/Users/Minami/Library/MobileDevice/Provisioning Profiles/9090CD12-8984-4597-8A1D-14D9C4E*****.mobileprovision'

テストビルドや、デプロイ時にたまに発生するエラー。
見ての通り「No such file or directory」なので、このパスに指定されたファイル名にリネームしたprovisionファイルを配置すれば通ります。
なんらかの理由で、自動でコピーされてないみたいですね。

このあたり、Xcodeにきちんと登録していなからとかいろいろ理由はあるっぽいですが手動でコピーしたほうが早いです。

これに近い問題として、

Traceback (most recent call last):
（省略）
  File "/System/Library/Frameworks/Python.framework/Versions/2.6/lib/python2.6/codecs.py", line 865, in open
    file = __builtin__.open(filename, mode, buffering)
IOError: [Errno 2] No such file or directory: u'/Users/Minami/Documents/Titanium Studio Workspace/DLsite/build/iphone/tiapp.xml'

というエラーもあります。これも同じく「tiapp.xml」を所定の場所にコピーすれば通ります。

[ERROR] Error: Traceback (most recent call last):
  File "/Library/Application Support/Titanium/mobilesdk/osx/1.7.2/iphone/builder.py", line 1305, in main
    execute_xcode("iphoneos%s" % iphone_version,args,False)
  File "/Library/Application Support/Titanium/mobilesdk/osx/1.7.2/iphone/builder.py", line 1066, in execute_xcode
    output = run.run(args,False,False,o)
  File "/Library/Application Support/Titanium/mobilesdk/osx/1.7.2/iphone/run.py", line 39, in run
    sys.exit(rc)
SystemExit: 65

エラーログを見ても、よくわかりませんね…
こういうときは、詳細なビルドエラーをbuild.logから確認して対処します。

Traceback (most recent call last):
（省略）
  File "/System/Library/Frameworks/Python.framework/Versions/2.6/lib/python2.6/codecs.py", line 351, in write
    data, consumed = self.encode(object, self.errors)
UnicodeDecodeError: 'ascii' codec can't decode byte 0xe3 in position 106: ordinal not in range(128)
Command /bin/sh failed with exit code 1

UnicodeDecodeErrorが発生しています。
つまり「ファイル名に日本語を利用しているとビルドエラー」というのがわかるわけですね。

コンソールに意味不明なエラーログが出てきた場合は、とりあえずbuild.logを確認してみましょう。

まぁTitaniumはエラーログもスタックトレースすら吐かずに落ちることがよくあるんですが…

とにかくおかしくなったら、まずbuildフォルダを削除してビルドし直します。
これでキャッシュビルドではなく、フルビルドになります。

Appleの審査はまだまだ厳しい

すっごいリジェクトされました。2回や3回じゃない程度には…

どうやら、露出がアウトというよりも「性的な部分を連想させるような」ものがアウトっぽいです。
まぁこのあたりは、レビュアーがどういう風に判断しているかどうかということも関係するんでしょうが…

おかげでiOSは、リジェクトされればアウトな画像をひたすら削除して、またリジェクト。と繰り返しがあったので、
制限のないAndroid版と掲載されている画像を比較すると、Appleの審査基準を実際に体感することが出来るかも？ですｗ

ちなみにAndroidのスクロール壁紙に対応させるためにはAndroidの横幅2倍の画像が必要で、
あらゆる解像度に対応して画像を吐き出す為には既存の壁紙のフォーマットを、横幅を広く取った画像に変える必要がありました。

そこでpsdファイルを編集してレイヤーだけ移動させようと思っていたんですが、かなり結合されてしまっていたので、ほとんど作り直しています。
既存の壁紙のデザインに沿うように何十枚もの画像をデザインし直したんですが、それぞれ違う技やノウハウが勉強できて楽しかったです。
どのイラストもかわいいので目が疲れませんね！

最後にインターンの小話

エイシス社の入り口では、等身大のディルちゃん（右）エルちゃん（左）が出迎えてくれます。

エンジニアのSさん曰く「等身大POPがあると毎朝の出勤で癒される」とのことですので、
かわいい二人に出迎えられたい方は社員・アルバイトに応募してみたらいいんじゃないかと思います！！

最後に、まずインターンにお誘い下さった開発マネージャーのMさん、~~イジら~~愛されキャラのSさん、最初から全力全開だったKさん（餞別は、いま半分くらいです）、最初と最後の印象が一番違ったFさん。
また、エイシス社員の皆さまに、この場を借りてお礼申し上げます。ありがとうございました！！

バン脳感とかウェブリアルとか近況報告

Tue, 09 Aug 2011 00:00:00 +0900

ひと月に１回くらいブログ書こうって思ってたんだけど、
先月サボっちゃったことにたった今気がついたもろへいやです。こんにちは。

でも書くネタも特に思いつかなかったので近況でも書いておこうかと。

・コミケが近づいてきましたね

今年の夏もこっそり行く予定。2日目と3日目行くかな？

今回は一般参加なんですが、サークルみかん牧場の「フォント情報がバンバン脳に飛び込んでくる感じ！」こと「バン脳感 Vol.2」の記事を書いてます。

クリックで特設サイトに飛びます。

なんと、あちこちの出版で使われていてMacの標準フォントにもなっている、ヒラギノ書体を生んだ字游工房の鳥海修さんへインタビューに行ってきた記録が掲載されています！！

鳥海さんは書籍とか雑誌のインタビュー取材を結構受けられてますが、ぶちぬき13ページも仮名や書体への思いを熱く語ってる本とかそうそう無いので、再販のメドがそこまで立てられない同人で出すのがもったいないレベルだと思います。

表紙の絵（ひびきちゃん）はぜっぺるさんが書いたものですが、写真にものすごく合ってて深夜3時前のデニーズで「すげー！！」と声を上げてしまいました。和服ひびきちゃん世界一かわいいよ！！

さらにグラフィックデザイナーのちーずさんが、「デザインコーデ2011 文字とデザインの着こなし術」ということで超ファッショナブルでカッコいい記事を書いてますので、東京ウォーカー買う金でこちらをGETした方がいいと思います。

あと私が「フォントを選ぶだけじゃない、文字を組まなきゃダメなんだ。」という文字組みのイロハについて解説した記事と「街にあふれる文字のカケラ」というバン脳感を養うためのTipsのようなものを書いています。

紙面サンプルはこんな感じ↓

最後にゲストとして、22世紀さんが「MSゴシックのない生活」というコラムを寄稿してくれています。
独特のくせになる言い回しが面白いので是非読んでほしいです。

ちなみにおれが一番面白かったのは、裏表紙です。

裏表紙は…… 当日手にとってご覧下さいね！

・ウェブリアル第1回でました

クリックで特設サイトに飛びます。

ウェブとリアルのつながりを描くWebドキュメンタリー番組として立ち上げた「ウェブリアル〜画面の向こう〜」の第1回「初音ミクから広がる世界」が公開されました！！

ウェブリアルには、どれだけ長くとも13分以内に収めるという方針があります。

だらだらと長くするのは簡単なんですが、この界隈の動きを13分という時間にまとめ上げてこそ、伝えたいことを明確に出来たと思っています。

細かいことは制作ブログの方に、おれと合わせて2人しかいないサークル「もろてん」の相方、てんじゅ君と合わせてあとがきがあるのでそっちを読んでみてください。

制作ブログ「ADのてんじゅより「ウェブリアル」第1回」

制作ブログ「ディレクターのもろへいやより第1回を終えて」

Twitterやブログ、公式サイトのご意見コーナーから様々な意見を頂きましたので、それらを活かしつつ第2回へ向けてAD てんじゅ君と共々に頑張っていこうと思っています。

・学会でます

9月3日から5日にかけて工学院大学新宿キャンパスにて開催される、第13回日本感性工学会大会に出ます。

第13回日本感性工学会大会 - 日本感性工学会

お題は「発話の感性研究のためのVOCALOIDを用いたワークベンチ」ということで、前にブログで話題にしてた「初音ミクが自動で喋るツール」をVY1で作ってみたの仕組みや考え方を論文にしたもので、広島国際大学の石原茂和先生と一緒に書きました。

9月5日（月）の朝9:00からのセッションになってます。論文もあとから公開される？はずですのでよかったらどうぞ！

・その他

まだ形に出来てないんですが、色々やってます。モノが出来ればまた書けると思いますが、いまは煮詰める作業…

3Dとかプログラミングとか絵とか番組とか楽器とか、その辺りです。

あと3DS買いました、ノーラと刻の工房がやりこみゲーすぎて生きるのが辛いです。あとテイルズオブジアビスでルークがお子ちゃますぎるのでイライラして壁を蹴りそうになるのでさっさとアレしてほしいです。（PS2は全クリした）

トルネめっちゃいいです。アニメライフが変わりました。PSPのリモートプレイで録画した番組とかテレビ番組をPSPで流せるんで、作業しながらやるのめっちゃ捗らない。ていうかメルルのアトリエまだ全クリしてないのでやりたくて仕方ないです。2日くらい丸々休みがとれたら30時間位やろうと思ってますがまだ出来てません。あとさっきひびきちゃんを世界一かわいいと言いましたがトトリちゃんの方が可愛いと思う。ミクさんはもはや別格だよ言わせんな恥ずかしい。

Mac OS X Lionにアップデート掛けてから、OSがマウスを排除する気まんまんだったのでMagic Mouseはモバイル専用にして、ペンタブレットをインプットデバイスに変えました。今までペンタブって絵を描く道具だと思ってたんですが、普通にブラウジングもパンスクロールで楽だし、PhotoshopとかIllustratorとか3DCGはもっと使いやすくなるしイイコトだらけです。ついでにMagic Trackpadも導入しましたがペンタブのランチャーで十分だったかも。

うさぎドロップがたいへん面白いです。原作を9巻まで一気に買いましたが最後ウオオオオアアアアアアーーー！！！って言いながら壁に頭を打ち付けてしまいました。最近まんがが面白くてやばいので、個人的にAmazon使用率を30%削減する条例を作っています。

あと、ここで言ってもあんま意味ないんでしょうが。最近お仕事のお誘いをメールでよく頂きます。個別で返事はしてますが、当方まだ大学生で中退する気は今のところないので、その辺を踏まえて頂けるとお返事しやすいので助かります。フリーランスちがいます。在宅で出来るようなこととか、長期休暇中の話や、インターンシップに関してはお話頂けると予定に合わせて喜んで行きます。

自宅のマンションで、大家さんのご好意で光インターネットが無料で使えるようになりました。地デジのケーブルテレビも無料で引いてくれたし、大家さんには足を向けて寝られません。そしてWiMAX最強伝説が始まった。

Subsonic素晴らしいと言ったけど、Google Musicが20,000曲まで無料で曲をアップさせてくれるサーバーに加えてHTML5で軽量なWebプレイヤーとモバイルアプリを提供していてSubsonicをゴミ箱にダンクシュートしそうな勢いです。iPhoneアプリはまだないっぽいけど、実はモバイルSafariから直接再生してプレイヤーに出来る。

コミケの原稿を脱稿した数時間後にiPod touchを歩道とキスさせて液晶ガラスが粉々になった。
アキバでガラスだけ安く修理出来る店あるよって教えてもらったけど、もうすぐiPhoneの新しいの出そうだしなーでもiPhone 3G重すぎて死ぬからなーってことで、しばらくAndroid（HTC Desire）使おうかなと思う。

そんな感じ！！

さくらのVPSとSubsonicでiTunesをゴミ箱にダンクシュートした

Tue, 28 Jun 2011 00:00:00 +0900

VPS界に革命をもたらした、さくらのVPS。
月々980円という値段で、どこのご家庭でもVPSでlsを叩く生活を過ごしてらっしゃると思います。

そんな~~持て余しがちな~~楽しいVPSを使ってメディアストリーミングサーバーを作ったら超快適だったのでご紹介です。

Subsonic

Java製でWin,Mac,Linux等マルチプラットフォームで動作します。

とりあえずデモを見てください、いい音でしょう？余裕の操作性だ、快適さが違いますよ。

デザインはテーマで変えられますし、英語はダメっていう人も上のスクリーンショットのように設定で日本語に出来ます。プレイリストからPodcastまで何でも対応してるので、特に困ることは無かったですよ。

とりあえずSubsonicのイイトコは、さくらVPSに曲をガンガン入れるとPCだろうがモバイルだろうがどこでもプレイリスト共有して曲を聴けるってことなんですね。

ちなみにAudioGalaxyという似たWebサービスもあります。
こっちはクライアントをインストールすると、PCの中の曲をスキャンして同時にサーバーとなってどこでも聴けるという凄いサービスなんですけど、自宅回線がWiMAXで固定回線がない私とか自宅サーバーの管理が面倒だし夏は熱いので捨ててしまった私とかには使えなかったわけです。

なので自宅PCをサーバーにして24時間起動しててもいいならAudioGalaxy使ってもいいんですが、SubsonicもWindows, Mac両方のクライアントもあるのでそれを使うとGUIでもっと簡単にセットアップが完了しますよ！
個人的にAudioGalaxyは良いんだけど、インターフェースが使いにくいなーと思ってたので！

さて、というわけでとりあえずセットアップの手順をメモ程度に。

※さくらVPSはサーバーとしての基本セットアップが終わっている前提です。
　良く分からないひとは、このあたりの記事を参考にしてください。
　基本的なセキュリティも設定してないサーバーは一瞬で乗っ取られてspamやウイルス発信基地にされるので迷惑にすらなっちゃいます。

まずJavaのSDKをインストールします。

[molo@www****u ~]$ sudo yum install java-1.6.0-openjdk
[sudo] password for molo: // パスワードを入力
(インストール作業)

次にSubsonicのDownloadページからrpmパッケージをダウンロードします。

Subsonic
Red Hat/Fedora installer というのがrpm版です。

面倒なのでwgetします。

[molo@www****u ~]$ wget http://downloads.sourceforge.net/project/subsonic/subsonic/4.4/subsonic-4.4.rpm

解説では4.4入れてますが、私はなんとなくbeta版入れました。

そして普通にインストール。

[molo@www****u ~]$ rpm -ivh subsonic-4.4.rpm

さらに自動エンコーディング機能を使うためにffmpeg等ライブラリも入れます。

[molo@www****u ~]$ sudo yum install lame flac faad2 vorbis-tools ffmpeg

標準ではポートは4040になっています。変更するなら /etc/sysconfig/subsonic を編集。そんでもって再起動します。

[molo@www****u ~]$ sudo /etc/rc.d/init.d/subsonic restart

そしてiptablesの設定も変えておきましょう。
あと、プレイリスト保存用に「/var/playlists/」フォルダをmkdirしておきます。

基本的にはこれだけです、インストールするだけなので簡単ですね。
ただ、このままだと日本語のファイル名のファイルが上手く読み取れません。

Javaの言語設定がutf-8になっていないのが問題のようなのですが、rpm版はJettyを使っているのでよく分からず、とりあえずCentOSの言語設定を変えると直りました。
詳しい人だれか教えてください。

とりあえずCentOSのLANGは /etc/sysconfig/i18n です。

[molo@www****u ~]$ sudo vi /etc/sysconfig/i18n

ここのLANGを「LANG="ja_JP.UTF-8"」にしてOSをrebootしました。

これでブラウザから4040番にアクセスすると、管理画面が出てきますのでユーザーやパスワードを設定して完了です。

早速、曲をアップロードします。ブラウザからでも出来るようですが、面倒くさいので普通にアップします。

/home/molo(ユーザ名)/music フォルダにsftpでアップしておきます。
この時、フォルダ構成がそのまま左のサイドバーに反映されます。

私は /music/(アーティスト名)/(アルバム名)/曲.aac という構成です。
このへんは自由に探ってみてください。

「music/supercell/君の知らない物語」だとこうなる

アルバムアートはiTunesとかで設定してるとそのまま表示されますし、Google画像検索から数クリックで直接設定できたりするので便利です。

回線が細いときは、トランスコーディング機能で逐一ビットレートを落として再生とかも出来ますよ。設定画面で色々と探ると結構なんでも出来ます。

APIが豊富なので各OS向けクライアントからAIRアプリ、モバイルアプリまでなんでもあります。

iOS用だと「iSub」と「Z-Subsonic」になってくるんですが、iSubの方が使いやすいです。

‎「iSub Music Streamer」をApp Storeで

再生中に自動的に次の曲まで取得してくれるような優秀なキャッシュ機能があるので、この手のサービスが苦手なインターネット圏外でも余裕で使えます。キャッシュの大きさは自由に設定できますよ。

プレイリストも、サーバーに保存できるのでそのままPCでプレイリストを聴いたり。
細い回線ではトランスコーディングでビットレートを落として再生出来ます。私はWiMAXなので無縁ですが（宣伝）。

iOS5ではPC FreeでiPhoneのみで何でもセットアップ出来るようになりますし、AppStoreも強化されて使いやすくなります。
現時点でもアプリはiOSでダウンロードすればいいし、iOS5が出たらバックアップもiCloudにすればいいのでリソースは一箇所、さくらVPSにまとめて置いておけばPC, iPhone, Android, iPadどこでも同じのが使えるので超おすすめです。

しかし、さくらの512プランでは容量が20GBなので、派手に使っていく人は別のVPSか上位プランなのかなーとは思います。

ただ20GBも使わないよーって人とか、さくらVPSを契約したはいいけどホコリかぶらせてる人はいかがでしょうか？

P.S.
ワンクリックでニコ動とかYouTubeの曲をダウンロードするスクリプトを書くと、自動でフォルダがスキャンされてSubsonicに登録されるので「あとで聴く」的な使い方も出来て最強伝説はじまった

個人だけど番組作って放送出来る時代が来たからやる。

Thu, 19 May 2011 00:00:00 +0900

同人サークル立ち上げました。と言っても2人しかいませんが！

「番組制作サークルもろてん」です。
http://blog.moloten.com/

サークルメンバーが、「もろへいや」と「天寿」なのでもろてんです。安直ですね（棒

…疑問符がいくつか浮かびますがとりあえずスルーしましょう。
番組企画も、公式サイトを公開しました。

「ウェブリアル〜画面の向こう〜」といいます。

http://moloten.com/webreal/

第1回は、初音ミク特集です。

日本でカラーテレビ放送が始まったのが1960年、もう50年も経つんですな。
その50年の中でも、ここ5年はYouTubeだのUstreamだの「映像」というメディアが個人で使える環境が急激に整えられたわけです。
数十年前はウン百万したビデオカメラも、今のケータイカメラの画質に劣るくらいですよ。

編集環境も、Avidの数百万するスタジオで出来ることが、パソコン1台で出来てしまうわけです。

実際に、Ustream生放送を使ってライブ番組を作っている人が居たりしますが、
生放送はリアルタイム性が出て面白くなるんですけども、垂れ流しなので長時間だらだら観る形になる。
（テレビの生放送は台本・構成が秒刻みで決まっているのでそうはならないですが）
だからやっぱり、面白いところだけギュッと詰まった「番組」というものに惹かれるのでして。

NHKオンデマンドで、テレビの番組を再配信！じゃなくて、最初からネットでの配信だけに絞れば、
個人でも番組を放送することは出来ると。

そして個人で映像を扱えるほど、機材が安価になってきている。

じゃあ、個人で番組を制作してそれを配信したらどうなるだろうか。
たくさんの人が番組を製作して、番組動画共有サイトのようなものができたらどうなるだろうか。

そう考えると、面白くありませんか？

今まで個人で発信できる情報はパーソナルメディアに留まってきましたが、インターネットと技術の発達によって、気軽にネットワークメディアを利用出来ます。
そうなると、とても個人という領域では扱えなかった、テレビ・新聞・音楽・映画・出版等のマスメディアが近づいてきます。

音楽は、もっともそれが早く始まっているものだと思います。

ということで、テレビ。挑戦してみます。

番組制作サークルもろてんでは「プロごっこ」をとことんまで突き詰めることを目的とし、
現代のコストダウン化した様々な機材を用いて、どこまでプロと同じことが可能かどうか追求しています。

個人サークルならではの機動力と柔軟性に加え、
作品のクオリティを高めることで、新たなWebにおける表現を模索していきます。

http://blog.moloten.com/ より引用

メイキング「NERV極秘資料 - 電力使用状況」こと技術解説

Wed, 30 Mar 2011 00:00:00 +0900

NERV極秘資料 - 電力使用状況

先日、東京電力の電力使用状況をエヴァンゲリオン風デザインで表示するWebサイトを作ったものが、あちこちで反響を頂きました。

ねとらぼ：「NERV専用監視装置」で東電の電力状況をチェックエヴァ風サイト登場 - ITmedia NEWS

NERVの一員になったつもりで節電！エヴァ風電力使用状況メーター | ギズモード・ジャパン

Twitterでは16000以上ツイート頂けたようです。
http://topsy.com/kanmisikou.net/lab/power/

こちらの、はてなブックマーク週間ランキングでもIT・コンピュータカテゴリ2位を頂きました。ありがとうございます。
http://b.hatena.ne.jp/ranking/weekly/20110321/it

これだけの反響を頂きましたし、せっかくなのでWebアプリを作る工程を解説します。
~~最近メイキング映像色々見てて、自分もやりたくなったとか言えない~~

とりあえず作ろうと思ったキッカケは、Twitter見てたときにid:TERRAZIさんが

とか言ってたのを見て、そういえばヤシマ作戦発動時のコンソールとか画面めっちゃカッコ良かったし
結構グラフィカルで分かりやすいから、これくらい単純に表示出来たら面白いかもなーと思ったからです。単純ですね（棒

1. とりあえず数値データを手に入れる

今では東電さんがCSVデータを公開してくれてますが、
3/22当時はグラフだけの表示だったので数値データは自分でグラフを解析して手に入れるほかありませんでした。

ちなみにその翌日から、あちこちで同じようなAPIが公開されてて、うおおおこっち使いたかったあああとか思ってました。~~極力サボります。~~

さて、解析にはPHPを使いました。
とりあえずグラフから数値を取る、簡単な方法としては色を識別して高さのピクセルを取得する方法です。

JPEGなら画像を圧縮する際にノイズが載って、微妙に色が変わってくるので揺らぎを吸収する必要がありますが、
幸い提供されていたグラフ画像はGIFだったので、色の違いがなかったのでその方法でいきました。

こんな感じで、24回。下から上へと1pxずつナメていきます。

PHPにはGDがありますので、簡単に処理可能です。
以下にGDを使ってピクセルを取得する部分のコードを載せてコメントで解説します。

<?php

// GIF画像を取得してイメージリソースとする
$image=ImageCreateFromGIF("http://www.tepco.co.jp/forecast/html/images/juyo-j.gif");

$x=46; // X軸のカーソルを置くピクセルの初期値

	// 24時間分、繰り返す
	for($j=0;$j<24;$j++) {
	$x+=22; // グラフ軸を1つずらす（px数はPhotoshopなどで測る）
	
		// 棒グラフの高さ分、繰り返す
		for($i=225;$i>=0;$i--) {
		$y=60+$i; // 下から順番になめていく
		
		$rgb=imagecolorat($image,$x,$y); // X軸、Y軸のピクセルを取得
		$colors=imagecolorsforindex($image, $rgb); // RGB値を連想配列に格納
			if( ($colors["red"]==0) && ($colors["green"]==0) && ($colors["blue"]==255) ) {
			// 〜 R:0 G:0 B:255 (ブルー)のピクセルが見つかったときの処理 〜
			}
		}
	}

あとは、各色が見つかった時の処理を書いていくだけです。
ただ、あまり確実なものではないので、フェイルセーフ設計で例外に対処出来るようにするべきでしょう。

また、これを毎回叩くとサーバーの負荷になるだけではなく、東京電力のサーバーにも毎回画像を取りに行って大変迷惑をかけてしまうので
キャッシュ処理は確実に行うようにしましょう。

さらに、セキュリティも気にしましょう。Yahoo!のエンジニアさんも言っていました。「何も信じるな」と。

（参考：ヤフーにおけるインプットバリデーション「何も信じるな」 - Yahoo! JAPAN Tech Blog ）

このブログでも以前に解説していますので、参考にしてみてください。
（PHPで誰でも簡単Webサービス製作！でなんか作って公開した奴ちょっと来い - 甘味志向＠はてな）

さて。これで以下のようなデータが取れました。

余談ですがPHPは「json_encode()」という関数を使えば、連想配列を一発でJSONに変換出来ます。
ただ今回はXMLに整形して出力することにしました。

それがこちらです。

http://kanmisikou.net/lab/power/today.xml

こちらはAPIとして開放していますので、自由に使ってくださいね。
（ただ他のところの方が、色々使いやすいと思います-^）

2. デザインをこねる

とりあえずヤシマ作戦を流れるように一回見て（気分転換とも言う）エヴァを堪能したあと、Illustratorを起動します。

ヱヴァンゲリヲン新劇場版:序 (EVANGELION:1.11) [Blu-ray]
出版社/メーカー: キングレコード
発売日: 2009/05/27
メディア: Blu-ray
購入: 61人クリック: 525回
この商品を含むブログ (247件) を見る

そしてゴリゴリとデザインを起こします。ゴリゴリ。

この時、円形メーターの盤をどうやって描こうかなーと思ってたんですが、
ちょっと調べてみたらすごくスマートなやり方がありました。

http://www.designioustimes.com/tutorials/5-steps-for-drawing-complex-vector-sun-rays.html
（円を描いて、円の幅と線の太さを設定して、破線を設定するだけで放射線が描ける）

これ考えた人はホント頭いい。
ちなみに破線は「アピアランスを分割」ではパスに出来ないので「透明部分を分割・統合」でベクトル側に振ってパス化すればOKです。

デザインしながら、HTMLでどうやって実装するか考えていきます。
メーターを動かす程度の動きならFlashを使うよりもHTML5を利用した方が楽だと思ったので、
Text-ShadowやWeb Fontsなどを使うことを意識してデザインします。

たとえば、Text-Shadowで再現出来ないようなシャドウを使わないようにしたり、
シャドウが画像の裏側に回らないと行けないようなデザインはしないようにします。

またWeb Fontsは基本的にフォントファイルを読み込まないといけないので、1つか2つまでには抑えたいところです。
Opera等ではフォントファイルの読み込みが完了するまではローカルの通常フォントで表示されますが、
Chrome等ではロードが完了するまで文字が表示されないので極力ロード時間は減らすべきです。
そういう意味でも、日本語フォントをWeb Fontsで利用するのはオススメ出来ませんね。

デザインが出来ました。

3. HTMLに起こす

さて、まずHTMLで表示出来るようにデザインを起こす必要があります。
先ほど作ったIllustratorファイル（.ai）をPNG形式で書き出し、Photoshopに突っ込みます。

今回は文字やギミックを入れないといけないので、imgタグを使って表示させるよりも、
ボックス要素のbackground-imageとして表示させた方が、あとから入れやすそうです。

なので、ボックス要素ごとに背景として配置出来るように画像を分割します。

スライスツールで画像をサクサクっと切ったら「Webおよびデバイス用に画像を書き出し」ダイアログを使ってファイルサイズを調整しつつ書き出し。
色が変わらないように、プロファイルもチェックしましょう。

あと、必要な画像をそれぞれ作って切り分けます。（メーターの針とか、ロゴとかその他色々）
これで大体画像が揃ったので、いよいよコーディングです。

ちなみに先程のPHPのプログラミングもそうですが、Codaというエディタを使っています。
なかなか小奇麗なのに多機能で便利なやつで、Dreamweaverから乗り換えて使っています。

App Storeで買えますよ↓
http://itunes.apple.com/jp/app/coda/id406001464?mt=12

とりあえずdiv要素をfloatで組み上げて、カカカッと段組みを作ります。
そして、それぞれのdiv要素にbackground-imageを設定して、一枚の画像になるように組みます。

それが出来たら、各ボックスに突っ込むギミックを色々入れます。
テキストを動かすときはspan要素、メーターの針はcanvas要素ですね。
画像を入れ替えるだけのようなギミックは、そのままimg要素を入れます。

	<div id="container">
		<div id="mater1"></div>
		<div id="mater2"><span class="count" id="count1">0</span><canvas id="pw1" width="400" height="400"></canvas></div>
		<div id="mater3"><span class="count" id="count2">0</span><canvas id="pw2" width="400" height="400"></canvas></div>
		<div id="mater4"><span id="gettime" class="number">0000-00-00 00:00:00</span><span id="jst" class="number">0000-00-00 00:00:00</span></div>
		<div id="mater5"><img id="blackout" src="images/blackout.png" alt="" width="148" height="259" /></div>
		<div id="mater6"><span class="number" id="rs1">0</span><span class="number" id="rs2">0</span><span class="number" id="rs3">0</span></div>
		<div id="mater7"></div>
		<div id="mater8"><iframe src="http://110chang.com/rinban/" id="rinban"></iframe><div id="rinban_txt">情報提供元 : http://110chang.com/rinban/</div></div>
		<div id="mater9"></div>
	</div>

また、110changさんの「輪番停電｜関東」を埋めこまさせていただいているので、そこにはiframe要素を設定しておきました。

さて、ここからは飾り付けです。

4. CSS3でデザイン

CSS3で追加された様々なプロパティを使うと、かなーり豪華に彩ることができます。
といっても、処理が重いものが多々あるので、多様は厳禁。
見た目もダサくなるし、何にでも使えばいいってもんじゃないですね。

今回使ったのは、Web fontsとText-Shadow。

まずWeb fontsは「@font-face」というものを最初に記述して、フォント名とURLを紐付けます。
以降は、font-familyに普段どおりフォント名を記述するだけ。ね、簡単でしょ？

@font-face {
	font-family: yourname;
	src: url(YournameD7UltimateCondensed.ttf);
}

.count {
	font-size:110px;
	text-shadow: 0px 0px 20px rgba(148,219,119,1);
	text-align: right;
	color: #dcf0dc;
	font-family:yourname;
}

ちなみに、フォントファイルとして指定できるものは種類があって、ブラウザごとに処理が異なってきます。
上記コードは省略しているものですが、興味があれば「Webfonts WOFF」などでググッてみてください。

text-shadowは解説サイトが大量にあるので割愛します（棒

5. JavaScriptでギミックを作る

さて、最終段階ですね！

ぼくはjQueryラブなのでjQueryを使います。
（もちろん要件ごとに得意不得意あるのですが、今回はDOM操作が多いので適していると思います）

jQueryの「The Write Less, Do More.」という考え方は結構好きです。
というか、プログラマならシンプルでスマートかつ、セキュアなコードは好物だと思いますｗ

そんなことはさておき、まずページがロードされてJavaScriptが呼び出される部分からです。

$(document).ready(function(){
    $.ajax({
    url: "today.xml",
    type: "GET",
    dataType: "xml",
    cache: false,
    success: init
    });
});

ページがロードされて、jQueryがreadyを叩いたら最初にXMLデータをAjaxで取得します。
どうでもいいですが、Ajaxと言われる度に洗剤が頭の中で浮かぶのは何とかならないんでしょうか。

どうでもいい

ロードが成功したら、init関数が呼び出されます。
init関数では、読み込んだXMLの数値をHTMLに入れて数値を表示させたり、画像を入れ替えたりします。
ここでメーターを操作してもいいんですが、「メーターの針がぐいーんって上がっていくのがカッコイイんだろ！！」という中二病精神を遺憾なく発揮したため、その処理を開始します。

// メーターの針は先に読み込んでおきます
var arrow = new Image();
arrow.src = "images/m.png";


function drawImage () {
// canvas要素を取得します。
// ちなみに以下の1文はjQueryを使っている場合「var c=$("#pw1")[0];」または「var c=$("#pw1").get();]でも可能。これ豆な。
var c=document.getElementById("pw1");

// canvas要素の2D描画コンテキストにアクセスします
var cnt=c.getContext("2d");

// 描画されている内容を全消しします
cnt.clearRect(0,0,c.width,c.height);

// 描画位置を中心にします
cnt.translate(c.width/2, c.height/2);

// ぐいーんと数値を上げていく部分です。指定された数値になるまで5ずつ上げていきます
    if(nowrot<rot) nowrot+=5;
    else nowrot=rot;

// ランダムな数値を加算して、針をぶらします
base=nowrot+(Math.floor(Math.random()*5)/10);

// 円周率で角度からアングルを算出します
base=base*Math.PI/180;

// 描画コンテキストを回転させます
cnt.rotate(base);

// 針は画像中央よりも上部にあるので、ピクセル数を計算してその位置に描画します
cnt.drawImage(arrow,-17,-203);

// 描画コンテキストを元の角度に戻します
cnt.rotate(-base);

// 描画コンテキストを元の位置に戻します
cnt.translate(-c.width/2, -c.height/2);

// 50ミリ秒後に再度呼び出します
setTimeout(drawImage,50);
}

結構簡単なのが分かりますでしょうか。
イメージとしては、セル画（描画したい画像）を用意して、透明なセルを移動＆回転させて、その位置に焼き込む。という感じ。

あと、きちんと元の位置に描画コンテキストを戻さないと、次に呼び出されたときにどんどんおかしくなっていきます。

さて、これで完成です！

6. おわりに

面白かったのが、海外からの反応でした。

そのときは、単純にnew Date()で取っていたので、なるほど！と思いましたｗ（すぐなおしました）

あと驚いたのは、みなさん結構ソースコード見るんですね…
いたずら心で入れたコメントのアスキーアートが話題になっててびっくりしましたｗ

いまはそれぞれが自分に出来る日常を生きるのが一番だと思っています。
ぼくは面白いものを作って他人に見せて、笑わせたり楽しませたりするのが好きなので、そんな日常を目指してみました。

適度に節電して、適度に買い物にでかけ、適度に募金して、そういうふうに過ごせればいいなぁと思いました。

義援金など、Googleさんのところがまとまっていてみやすかったです
http://www.google.co.jp/intl/ja/crisisresponse/japanquake2011.html

Titanium Desktopを数日いじったので要点メモ

Sat, 19 Mar 2011 00:00:00 +0900

Titanium is Native
Titanium provides native performance, native UI & native capabilities, with over 1,000 APIs and growing. If you can dream it, you can build it.

タイタニウムではありません、チタニウムです。

AppceleratorのTitaniumをいじってます。
巷ではTitanium Mobileばかりが持てはやされていますが、実はDesktopもあります。

Products

ただあんまり知られてないのと注目されてないので、実際どのレベルなのか分からなかったので
ここ数日間で触りだけいじってみました。

基本的にHTML5+CSS3+JavaScriptで書くわけで、Adobe AIRのようなRIAですな。
（DesktopはJavaScript以外にもPython・Ruby・PHPなども織り交ぜて使うことが出来ます）

Titanium Developer自体も、Titanium Desktopで出来ています。
なんとなく、オモチャ以上という感じはしますね。

まぁ出来ることは、以下のサイトあたりで細かく説明されてるので省略。

Ruby,Python,PHP,JavaScriptでマルチプラットフォームなデスクトップアプリを簡単に作成する Appcelerator Titanium Desktop - 仙台 Ruby Vim JavaScript フリーランスプログラマ

Google Code Archive - Long-term storage for Google Code Project Hosting.

〜情報源はAPI Reference, Q&A Community 〜

http://developer.appcelerator.com/documentation

http://developer.appcelerator.com/apidoc/desktop/latest

http://developer.appcelerator.com/questions/created

ホンッッッッットに情報が少ないので、既存コードを参考にするよりAPI Doc見たほうが早い。
ただAPI Docも結構謎なポイントが多くて、しかもSampleがあんまりない為結構しんどい。

分からねぇ！と思ったときは、Q&Aを探す。聞いてもいいと思うけど、大体ある。
よって、英語がある程度分かった方が楽だし、英語とか見たくもない！って人はやめといた方が無難です。

〜以下、コード群〜

・jQueryはガンガン使っていいけど、$.ajaxは使わないほうがいい

Ti.APIに用意されてるHTTPClientとjQueryのAjax。
てっきり内部で吸収してHTTPClientに統一してるのかと思ったんだけど、どうやら違うみたい。
jQueryの方は、どうやらCookieの扱いがSafariと同じになるっぽい（要出典）
HTTPClientを使うと「/Users/Molokheiya/USERNAME/Application Support/Titanium/appdata/com.hoge.huga/cookies.dat」に保存される模様。

	var xhr = Titanium.Network.createHTTPClient();
	xhr.onload = function(e){
		console.log(e);
	};
	xhr.open("GET","http://example.com/");
	xhr.send({param:value});

こうする。
まぁ見ての通り、XMLHttpRequestなので超簡単ですね。

・バイナリのダウンロード

	var url = "http://example.com/hoge.jpg"; // 画像ファイルのURL
	var fileName = url.substring(url.lastIndexOf("/")+1); // 画像ファイルの名前
	var localFile = Titanium.Filesystem.getApplicationDataDirectory().toString()+Titanium.Filesystem.getSeparator()+fileName; // AppDataフォルダのパス
	var remoteFile = url; 

	var httpClient = Titanium.Network.createHTTPClient();
	
	httpClient.onload = function(e) {
		var writeFile = Titanium.Filesystem.getFile(localFile);
		var writeStream = Titanium.Filesystem.getFileStream(writeFile);
		writeStream.open(Titanium.Filesystem.MODE_WRITE);
		writeStream.write(this.responseData);
		writeStream.close();
	};
	
	xhr.onreadystatechange = function(e) {
		if (e.readyState == 4) {
		// ダウンロード完了
		}
	};
	
	httpClient.onerror = function(e) {
		console.log('エラー');
	};

	httpClient.open('GET', remoteFile); 
	httpClient.send();

・バイナリのアップロード

//（略）
	xhr.open("POST","http://example.com/post/");
	xhr.sendFile({image:Titanium.Filesystem.getFile(file), title:"TITLE"});

sendFile(); を使うと、いちいちHeaderを細かく作りこまなくてもいいです。
ちなみに私はこれの存在を知らなくて、全部書いてやってましたｳｫｵｵｳｯ

・ディレクトリの有無をチェック、無い場合は作る

	var d = Titanium.Filesystem.getFile(Titanium.Filesystem.getApplicationDataDirectory(),"testFolder");
	
		if(!d.exists()) {
		d.createDirectory();
		}

・Notificationをつかうと、Macなら（入っている場合）Growlが使える

Winなら独自の通知が出ます。

	var wnd=Titanium.Notification.createNotification(window);

	wnd.setTitle("タイトル");
	wnd.setMessage("メッセージ");
	wnd.setIcon(path);
	wnd.setCallback(function () {
		alert("callback!");
		});
	wnd.show();

・ウィンドウを開く

	var win=Titanium.UI.createWindow({
		id: "testWindow",
		title: "Test Window",
		width: 400,
		height: 600,
		maximizable: false,
		minimizable: false,
		closeable: true,
		resizable: false,
		maximized: false,
		minimized: false
	});

	win.open();
	win.setContents("<html>Hello World!</html>");

createWindowで作ったあと、openしないといけないのが分からず1時間ほど悩みました。
妻が家に帰ると必ず死んだふりをしているのと同じくらい辛かったです。

・Terminalを叩く

	var q = Titanium.Process.createProcess([path,'-arg']);
	q.launch();

大体なんでもできますね。

「Adobe Digital Publishing フォーラム 2011」に見る、電子出版の流れ

Wed, 02 Feb 2011 00:00:00 +0900

2/1(火)にベルサール六本木にて開催された、Adobe Digital Publishing フォーラム 2011に参加していたので、忘れる前に感じたことをメモ。
700人以上が収容できる会場でしたが、あっという間に満員になるほどの盛況ぶりで、出版業界の意識の高さが伺えました。

とりあえず内容を軽く。

デリケートゾーン臭いケア石鹸のおすすめランキング

KeynoteはAdobe Digital Publishing Suiteの紹介で、主にWIREDのデジタル版を成功例として、Ricky Liversidge氏が解説。

マイコミジャーナルがそこそこ詳しい。
http://journal.mycom.co.jp/articles/2011/02/02/adpsrep/

この動画がオープニングに使われてました。

そして同じくDigital Publishing Suiteを使った国内作例の紹介。
凸版印刷とか出てきたりして、もうすぐそこまで来てるんだなという実感。

間を置いて、使用策定中でドラフトのEPUB 3.0詳細技術解説。
現在最新版のEPUB 2.0.1は縦書きが非サポートなので、日本では3.0に否応なく期待が高まる。

最後に株式会社G2010から、ワクワクする電子書籍と題して実際の電子書籍化についての制作プロセスやフューチャーを対談形式で。

イベントのその他詳細は他で紹介されているので置いておいて。

とりあえず感じるのは、これからの電子出版はハードウェア・ソフトウェア（コンテンツ）において二極化していくのではないかということ。

ビーワークスさんと三栄書房さんが作った、雑誌「ゴルフトゥデイ」のデジタル版は完成度がとにかく高くて、使える技術を丁度いいバランスで有効活用していた印象。

G2010さんが作った、書籍「歌うクジラ - 村上龍」は、試みはとても面白いけど果たして実用的に使えて日常に溶け込むの？という印象。

前者は、もはや雑誌ではないという認識に思えるのですね。映画や、テレビやゲームのようでいて、それとは違う新しいメディア。
だから「電子書籍っていうけどiPadの雑誌ってもはや書籍じゃないよね」っていう声はすごくよく分かる。書籍とは別の情報媒体だと思うので。
ちなみに電子出版と言うことも出来るけど、電子出版だと小説とかも含めてしまうので、何か新しい単語が必要なのかもですね。

さて、そう考えるとパソコンの前に座るわけでもなく、仲間同士で集まってiPadを見ながら石川遼のフォームを見て歓談するっていうのはありじゃないかなーと思えてくる。
Webは情報が雑多に溢れててノイジーだけど、雑誌は編集でコンテンツがまとめられてるというメリットに、音や映像というインタラクティブメディアを統合した感じで楽しい。

ただ後者の村上龍さんの本は、メインコンテンツは作家の書いた文章であって、読者が主に望んでいるのはそれだと思うんですね。
そうなると文庫の持つ携帯性だとか、文章の読みやすさであるとか、そういった部分に主軸が置かれるはずです。
表紙が動くだとか、特定のシーンでBGMが流れるだとか、確かにあったら面白いかもしれない。でも実用的に使えるか考えるとどうなのかな、と。
そういう部分はあくまでサブであって、あってもなくてもいい。BGMも、オンオフ出来るように作られているわけですし。
選択肢が増えるのはいいことだけど、最大の障壁は『iPadに何時間もかじりついて、集中して読書出来るか』という話。

一日中モニターを見つめて、外出時でもiPhoneを使いまくる自分でも「読みにくい・目が痛い・重い・机においたらやっぱり読みにくい」と思うのに、これが果たして普段から読書している人々に受け入れられるかどうか。

こういう書き方をすると、じゃあSony ReaderやKindleはどうなんだ。ということになってくると思います。

電子ペーパーは軽くて、バックライトがなく性質がほとんど紙と同じなので目も疲れない（体感済み）
でも現状、電子ペーパーは画面のリフレッシュに0.5秒ほど掛かるため、動画の再生は当然不可能。
特定のシーンでBGMというのも、そういったプログラマブルな仕様は使えません。

つまりこれからのデジタルパブリッシングは「新しいメディアとして捉えられる、インタラクティブな動きを持てる電子出版」と「単に文章がコンテンツである、小説やエッセイ等」で全くの別物になっていくのではないかと。
そして制作サイドとしても、ツールが変わってくる。

長いので「デジタル雑誌」と「デジタル文庫」と適当に略します。

デジタル雑誌

- デバイス（ハードウェア） -
・iPad&iPhone
・Android(GALAXY Tabとか)
・つまり液晶画面

- コンテンツ（ソフトウェア） -
・音や映像
・切り替えできる画像
・読者のインプットに応じた、インタラクティブコンテンツ

- 制作サイド -
・InDesign CS5
・Adobe Digital Publishing Suite
・自社開発App
・配信先デバイスによってメディアタイプは様々

デジタル文庫

- デバイス（ハードウェア） -
・Kindle
・Sony Reader
・つまり電子ペーパー（E Ink）

- コンテンツ（ソフトウェア） -
・文章
・簡単な挿絵など

- 制作サイド -
・（現在はInDesign CS5にてEPUB書き出しだけど、どちらかというとDreamweaverっぽい動きになる気がする）
・EPUB（そもそもEPUBはHTML+CSS+その他をzipで固めたもの）
・PDF

こんな感じかなあ。
少なくとも『現時点で』『実際に使われるとしたら』という前提ですが。

あと、そもそも閲覧デバイスの普及率が低すぎるので一般的に実際に普及するかというとコンテンツ以前の問題でもありますね。
ただ確実に新しいメディアが形成されていく実感があり、これはビジネスになる予感です。

デジタル雑誌は、各社色々手探りながらも前向きな姿勢が見えますね。
~~凸版印刷さんのヤングジャンプ・グラビア紹介がヤバかった~~

デジタル文庫のほうは、角川書店さんなんかも、有名書籍（涼宮ハルヒの憂鬱とか）をiPhoneで見られるように販売してたりしますが（BookWalker）、先述のとおりiPhone・iPadでは辛いので是非Kindle等で配信して頂ければ… と思うところです。
でも現状EPUB 2.0.1は横書きのみなので、EPUB 3.0で縦書きが対応して、デバイスも追従して対応したときに動きがある可能性があります。

しかしEPUB 3.0が標準的に使われるようになり、さらに最新コンテンツだけではなく過去コンテンツも配信されるというのは、まだまだ先のことになると思います。
しかも過去に買ったコンテンツを再度買い直すというのもアレです。

俺は今すぐKindleで文庫が読みてぇんだよ！という人は、そうです。自炊しかないです。

ということで、明日は「ドキュメントスキャナーとKindle3で快適デジタル文庫生活（仮）」のノウハウをお送りします。たぶん。

え、GALAPAGOS？そういえばそういうのもあったなぁ（遠い目

再生中のボカロ曲の歌詞を取得してiTunesで埋め込むMac用アプリ「Vocalo Lyric」

Wed, 26 Jan 2011 00:00:00 +0900

2011年11月22日追記
Windows版を作られた方がいらっしゃるようですので、Windowsユーザーの方はこちらがいいんじゃないかなぁと思います。

iMyrics - 置き去りの星条旗。ーある高校生の記録ー

Download

以前からデスクトップにiTunesで再生中の曲の歌詞を表示するDesktop Lyricsというソフトを使っていて、これがいい感じなんです。

Mac DesktopLyrics - display current song lyrics on your desktop

そんでもって、DashboardのウィジェットにTunesTEXTというのがありまして、自動で曲の歌詞を取っては埋め込んでくれていい感じなんです。

Cyan's Image Chamber : Macintosh : TunesTEXT (discontinued)

でもボカロ曲はやっぱりというか当たり前なんですが取得してくれないので作りました。

【使い方】

1.iTunesでボーカロイドオリジナル曲を再生します

2.Vocalo Lyricを起動します

3.自動で歌詞が取得されて表示されるので、正しいか確認します（編集も可能）

4.OKをクリックすると歌詞が埋めこまれます

初音ミク Wikiから取得しているので、ここにない歌詞は取得できません。

初音ミク Wiki - アットウィキ

Wikiの編集をしてくださっている皆様ありがとうございます。

なお、コンピレーションアルバム「大人の都合！」収録曲。えろあきPのBIN☆BIN☆BINをお借りしました。
ここに謹んで感謝と御礼を申し上げます（ｷﾘｯ

【ニコニコ動画】【鏡音レン】BIN☆BIN☆BIN【オリジナル曲】

http://www.creazuma.com/otonanotsugou/

ライセンスはMIT License
ソースコードはAppleScriptでこちらです

「ボカロが自動で喋るツール」途中経過

Mon, 27 Dec 2010 00:00:00 +0900

最近寒くなってきて、暖かいコーヒーが美味しいです。
とかいいつつキャラメルエクレールラテが美味しいです。

さて、先日の記事
「初音ミクが自動で喋るツール」をVY1で作ってみた - 甘味志向＠はてな
なんですが、進展が幾つかあったので報告です。

まずYAMAHAさんとNetVOCALOID-Flexの無償利用期間延長の契約を行いました。これで6月頃までは大丈夫です。

~~ちなみにその時「初音ミクじゃなくてVY1なので…」と言われてタイトルを変え~~

そして、初音ミクみくさんにも取り上げられていた、広島国際大学心理科学部感性デザイン学科の石原茂和先生（[twitter:@shigekzishihara]）に協力して頂けることになりました。
初音ミクみく「初音ミクが自動で喋るツール」で釣られた人が妙に嬉しそうな件

人間文化研究機構国立国語研究所の「日本語話し言葉コーパス」を紹介して頂き、提供までもして下さることになりました。本当にありがとうございます！

http://www.ninjal.ac.jp/products-k/katsudo/seika/corpus/releaseinfo/

データベースが届くのが正月明けになるらしいので、それから色々試してみて形にしていきたいと思います。
ということで、公開はもうしばらくお待ち下さいませ！

「ミクさんと街中をデートしてきた in 八王子」公開＆冬コミにてVdN再販のお知らせ

Sat, 25 Dec 2010 00:00:00 +0900

先日のボーカロイドマスター14にて頒布いたしました「Vocaloid Design Note」が、
冬コミ（コミックマーケット79）にて委託再販させていただけることになりました！

詳細ページ

kanmisikou.net - このウェブサイトは販売用です！ - 初音ミクフォント制作志向甘味ニコニコ感性状況リソースおよび情報

委託先はK4U RECORDSさまで、場所は「3日目東リ-22a」です！

http://www.k4u-records.info/

そんなに数はありませんが、よろしければお立ち寄りください！

また、ここに収録されている「ミクさんと街中をデートしてきた in 八王子」で使用したフォトジェニックならぬ、フォトジェミックを公開します！
本のほうには簡単なデートのストーリーなんかもくっついてたりします。こっちでは実際の八王子と撮影時の話をしてみたいと思います。

フォトジェミックとは (フォトジェミックとは) [単語記事] - ニコニコ大百科

八王子駅北口を出て、歩道橋を越えて左。スクランブル交差点を抜けると、西放射線ユーロードがあります。
店が立ち並び、買い物客でいつも賑わっています。

もちろん散歩をしている人もいて、おじさんがワンちゃんを連れて散歩なんてこともあるわけです。
道のど真ん中にふてぶてしく居座るワンコくん。

ネギです。
八王子駅北口、東急スクエアの地下には食品スーパーがあります。
他にも輸入雑貨の店などがあって楽しいです。
ネギを持ってボーッと突っ立つ自分と、その様子を一眼レフでバシャバシャ撮影する様子は完全に周りから浮いてました。

同じく東急スクエア内の、5FにはPLAZAがあります。
まもなくクリスマスシーズンということで、様々なデコレーションが綺麗でした。
っていうか、今日がクリスマスですね。どんだけ気が早いんでしょう…

東急スクエアの入り口にはスターバックスがあるのですが、その近くに大きなクリスマスツリーがありました。
もう陽が落ちるのが早く、イルミネーションが輝いて美しかったです。
撮影している時から合成後のイメージを頭の中で決めながら撮っていたのですが、このカットは難しかったです。
ツリーの前で空中と握手！

スタバのテラス席。
この時、スタバ専用の電子マネーがあることを知ってを教えてもらってびっくりしました。
注文したのはクリスマスのキャラメルエクレールラテです。

この合成は、あんまり原型を留めてない割に時間が掛からなかったような覚えがあります。
右のiPhone 3Gが私のもので、周囲からは「土人Phone」と言われていじめられています。
iPhone 4は撮影してくれたちーずさんのもので、HDR撮影の自慢をドヤ顔でされました。

さて、八王子駅に帰ってきました。
こっちは八王子駅南口で、この時ビックカメラのオープン数日前でした。
またサザンスカイタワー八王子もまもなくオープンという時で、本当はそっちも撮りたかったんですが…
ちなみに今はオープンしています。スイーツパラダイスとか入ってるよ！

ミクさん一体どこに帰って行くんでしょう。
せめて横浜線なのか中央線なのかだけでも知りたいですね。
ここで改札を撮りたいと言った時、ちょうど誰かがバイバーイと手を振ってて「ちょっと手振ってきてよ」と言われてやりました。
周りから見てる分には違和感なかったらしいですが、やってる身としては一番恥ずかしかったです。

写真の撮影自体はかなりたくさんやって（4GBくらいあったよ！）その中からティンときたものをピックアップして合成しました。
手順はMMDでポーズを取ってそれを撮影し、あとはひたすらPhotoshopでいじりまくるだけです。大体1枚仕上げるのに約1時間くらいでした。

使用させていただいたMMDモデルは、初音ミクXSです。
初音ミクXSとは (ハツネミクエックスエスとは) [単語記事] - ニコニコ大百科

撮影は[twitter:@llcheesell]さんにお願いしました。
Vilvo Designworks - llcheesell

それでは！

「初音ミクが自動で喋るツール」をVY1で作ってみた

Wed, 15 Dec 2010 00:00:00 +0900

おとつい、Skypeで「これ見てみろ！」と送られてきた動画がありましたとさ。

「うおおおなにこれっべー！っべーわこれ！」とか言って華麗に釣られました。
~~こんちくしょう~~ネタの仕込みが上手いよね！

というわけで釣られたのがすげー悔しかったので、正攻法で対抗することにした。

脳内会議

VOCALOIDが喋るといえばVOCALOID-flex

Softalkと同じくらい誰でも汎用的に使えるならVOCALOID2持ってなくてもOKにしたい

じゃあNetVOCALOID-flexか

幸いにもMashupAward6の時にYAMAHAに申し込んでたAPIがまだ使える

MA6は急遽同人誌を作ることになったので作れなかった

今こそ作るチャンスでは

やるかーやるしかないかー

仕様案まず考えたけど、あの釣り動画の解説って割と現実味を帯びてるんだよね。（だからこそ釣られた）
というわけで、それに近しい形で試しに実装してみる。

日本語を入力する

形態素解析器にかける

文章の文節・品詞・よみがなを取得

ひらがなの文章からミク語に翻訳

単語のアクセントを生成

~~意味辞書からイントネーションを生成~~（未定）

それらの情報から発話のピッチを演算して生成

Voice Synthesis XMLを生成

YAMAHAのNetVOCALOID-flexサーバに投げる

しゃべる！

形態素解析器はMeCab使うかなーと思ったけど、面倒だったのでYahoo! デベロッパーネットワークのテキスト解析APIを使った。
ミク語変換だけど、これは普通のVOCALOID2の場合と違っているため独自に実装した。

例えば動画中で出てくる「家に帰ると妻が必ず死んだふりをしています」は

 array(3) {
    ["str"]=>
    string(60) "家に帰ると妻が必ず死んだふりをしています"
    ["kana"]=>
    string(75) "いえにかえるとつまがかならずしんだふりをしています"
    ["speak"]=>
    string(49) "ieJikae4MtotsMmagakana4adzMSiN\dap\M4'ioSiteimasM"
  }

こうなる。

形態素解析で単語を得られたら、その情報からアクセントを取得した。
日本語のアクセントは、ネット辞書からアクセント表示をスクレイピングした。

【11．この辞書のアクセント表示】
・日本語のアクセントは、単語を発音するさいに、その単語の中に含まれる個々の「拍」を高く発音するか低く発音するかによって決まる。拍とは日本語の音の長さの単位をいい、「キャ・シュ・チョ」などの拗音はカナ２字で１拍である。
・共通語では、１拍目と２拍目との間に必ず音の高低の変化がある。
・１拍目が高で２拍目以降が低である語は「頭高型」と言い、この辞典では [１] で示した。
・１拍目が低で、あとに続く助詞を含め高から低に移る箇所のない語は「平板式」と言い [０] で示した。
・１拍目が低で、２拍目以降が高になり、語中、語末に高から低に移る箇所のある語は「中高型」または「尾高型」と言い、低に移る直前の音の位置が２拍目であれば [２]、３拍目であれば [３]… のように示した。その位置が語中にあるものを「中高型」、語末にあるものを「尾高型」と言う。
・以上のうち、平板式を除く「頭高型」「中高型」「尾高型」を総称して「起伏式」と言う。

エキサイト翻訳

イントネーションの辞書は現在未定。
ただこれがあるとないとでは精度に大きな違いが現れるのは間違いないと思う。

ここからピッチ（声の高低）を生成する。
演算式には、かの有名なRobert Penner氏のイージングを使った。

Robert Penner's Easing Functions

Tweener等のEasingと同じもの。

<?php
/**
 * Easing equation function for a quadratic (t^2) easing in: accelerating from zero velocity.
 *
 * @param t		Current time (in frames or seconds).
 * @param b		Starting value.
 * @param c		Change needed in value.
 * @param d		Expected easing duration (in frames or seconds).
 * @return		The correct value.
 */

function easeNone ($t,$b,$c,$d) {
	return $c*$t/$d + $b;
}

function easeInQuad ($t,$b,$c,$d) {
	return $c*($t/=$d)*$t*$t*$t + $b;
}

function easeOutQuad ($t,$b,$c,$d) {
	return -$c *($t/=$d)*($t-2) + $b;
}

// 続きを読むには（ｒｙ
?>

ここからYAMAHAが定義した、VSXML (Voice Synthesis XML)ファイルを生成する。
これには「せりふ（発音記号）・発音位置・長さ・韻律パラメーター（音量、音高）」が含まれる。

というわけで「こんにちは初音ミクです」と喋るXMLを生成してみた。
ちなみにこの一文だけで300行近いXMLが必要。現在はピッチ情報のみなので、さらに改良していったら3倍にはなりそう。

基本発話データ

  [0]=>
  array(3) {
    ["str"]=>
    string(34) "こんにちわ 初音ミクです"
    ["kana"]=>
    string(37) "こんにちわ はつねみくです"
    ["speak"]=>
    string(27) "koN\JitSiwahatsMnem'ikMdesM"
  }

例の動画にならって、棒読みモードと並べてみる。

棒読みモード

感情モード

とりあえずアクセントが自動でついたよ！やったねたえちゃん！！

だが現状、完成度はまだまだと言わざるを得ないので、時間が空いたらまたボチボチ改良していこうかなとかなんとか。
あと公開は別に構わないんですが、YAMAHAのY2 Projectから承認もらわないといけないので、声が多ければ聞いてみます。

そして重要なことが一つ。

現在NetVOCALOID-flexではVY1しか使えないので

実はミクさんじゃないんだなコレHAHAHAHA!!

みんながYAMAHAとクリプトンに要望すれば、データベース使わせてくれるかもね！！！１１

んではでは！ｗ

(C)Yamaha Corporation / Molokheiya

iPhoneアプリをMobile Safariで作る

Sun, 12 Dec 2010 00:00:00 +0900

こんにちは！ JavaScript Advent Calendar、12日目のid:Molokheiyaです！
ちょっとターゲットが絞られてしまうのですが、私はiOSに搭載されているSafariのWebkitを使ってJavaScriptでiPhoneアプリを開発するHow-Toを書いてみたいと思います。

ちなみにAdvent Calenderとはプログラマ有志が12/1から12/25までの間、毎日ブログ記事を書いていくという企画で師走の風物詩みたいなものです！
今年の各言語のカレンダー一覧はこちらにまとめられているので要チェック！
本日12月1日より，プログラマ有志による技術系Advent Calendarが各所ではじまる：インフォメーション｜gihyo.jp … 技術評論社

さて、まずiOSアプリの開発は何よりも敷居が高いのが特徴です。技術的な意味ではなく。

iOS SDKはMac OSでしか動かないためMacを購入しないといけません。
以前はAppleの最凶規約により開発ツールどころか開発言語まで縛られていました。

これは、今年の9月に規約が緩和されサードパーティ製の開発ツールでも開発が可能になっています。
例えばAdobe Flash Professional CS5のPackager for iPhoneやMonoTouchなどですね。

ただ、ここまで頑張ってアプリを開発しても、iOS Developer Programに年間99ドルも払って登録しないと無料配布すら出来ません。なんてこったい！

本気で俺はiPhoneアプリを作りたいんだよ！って感じじゃないとき。
パッとコード書いて実機で動いて適当に動いてくれるアプリが書きたい、そんなときはSafariのWebkitを使いましょう！

とりあえず面倒な機能を切る

headに以下のView Portメタタグを挿入することで抑制します。

<meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-scalable=no" name="viewport"
<meta name="format-detection" content="telephone=no">

Viewportは仮想的なウィンドウサイズの指定で、最初にページを開いたときの拡大縮小率を指定できます。
この"width=480, maximum-scale=0.6667"という指定は"Holy Grail"と呼ばれており、iPhone画面を回転させても文字サイズが変わらない指定方法です。
もちろん自分の作成するアプリケーションによって変更してかまいません。

ユーザーに拡大縮小を許可するかどうかは"user-scalable"で指定します。
"format-detection"は、数字が勝手に電話番号として認識されてしまってリンクを貼られたりする機能を抑制します。

Safariっぽさを消す

Webアプリってあれでしょ、上下にアドレスバーとかツールバー出てるんでしょ。ダサーイ（笑）というのを避けるためにSafariっぽさを消します。
といってもコレには条件があって、一度Safariでページを開いたあとにツールバーからiPhoneのホーム画面にアイコンを登録して、そこから開いたときのみです。
最初にページを開いたとき、ユーザーに登録を促すように誘導しないといけません。（もちろん見栄えだけの問題なので登録しなくても問題はないのですが）

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon" href="images/icon.png">
<link rel="apple-touch-startup-image" href="images/nowloading.jpg">

"apple-mobile-web-app-capable"をyesにすると、ページを全画面で表示します。
これでアドレスバーなどが表示されなくなります。

"apple-mobile-web-app-status-bar-style"は、ステータスバーの色を指定できます。
"default"（デフォルト） "black"（黒） "black-translucent"（黒半透明）です。

"apple-touch-icon"で、ホーム画面に表示するアプリのアイコンを指定します。
iPhoneアプリのアイコンはガラスがきらっと反射した感じになってますが、ここで指定した画像に自動的にオーバーレイで効果が掛かるので気にしなくて大丈夫。

"apple-touch-startup-image"を使えば、アプリをロードしている時間のスタートアップ画像を指定できます。

これをやると、見た目はほとんどネイティブアプリと変わらないところまで行きます。

やっとJavaScriptです

さて、ここからは中身です。
せっかくのiOSアプリなのでインターフェースもそれっぽくしたいですし、
何より自分でつくっていくのは面倒なのでライブラリを使わせていただきましょう。

いまぼちぼち使われているライブラリは

iUi - Google Code Archive - Long-term storage for Google Code Project Hosting.

iWebKit - http://iwebkit.net/

jQTouch - jQT (formerly jQTouch) — Zepto/jQuery plugin for mobile web development

jQuery Mobile - jQuery Mobile

あたりでしょうか。
iUiやiWebKit等はiOS SDKのUIに似せたデザインで、jQTouchやjQuery Mobile等は独自にUIをデザインしている感じです。
この辺りは好みで。ただ、個人的には初心者はUIが統一されてるほうが分かりやすいんじゃないかなと思います。

私が以前アプリを作成したときはiUiを利用しました。

iOS Webkitでの開発

まず「設定 → Safari → デベロッパ → デバッグコンソール」で開発ツールをオンにしときましょう。
これでエラーの詳細が実機上で見られるようになります。

またiOSのWebkitではJavaScriptに独自イベントがたくさんあります。
せっかくタッチ出来る画面なんだから、addEventListenerでリッスンしておくとタッチ情報がバンバン飛び込んでくる感じになりますのでやりましょう。

document.body.addEventListener("touchstart",touchHandler,false);

function touchHandler(event) {
	num=event.touches[0];
	x=touch.pageX;
}

独自のイベントや属性等はあちこちに書いてあるので割愛しますが、タッチしている指の本数や座標・端末が回転したときなど、さまざまな情報が取得可能です。

Safari HTML Reference: Introduction

ダイアログが表示されますが、GPSとGeolocation APIで現在位置も取れます（navigator.geolocation.getCurrentPosition）まあダイアログが出るのはネイティブアプリでも同じですね。

さらにiOS4.2から加速度センサーの値まで取れるようになったので、canvasやCSS3と組み合わせれば普通にゲーム作れると思います。すごいですね。

jQueryを使って開発する場合の注意点

jQuery使ってるし、せっかくだから俺は「$("body").bind("touchstart",touchHandler);」を選ぶぜ！という方。
touchHandlerは
	function touchHandler(event) {
	alert(event.touches[0]);
	}
と書きたくなるところですが、このままだと取れません。
	function touchHandler(event) {
	alert(event.originalEvent.touches[0]);
	}
これならOK！

とまあ、iOSのWebKitはかなり強力です。
ちょちょっと独自属性を追加してやるだけでユーザビリティが簡単に確保出来ますし、簡単なアプリならネイティブで開発するより楽チンだと思います。

また最近、JavaScriptでiOS/Androidアプリが開発出来るTitaniumも話題になっていますので、そちらの動向も目が離せません！

Home - Appcelerator | The Mobile First Platform

それでは、良い12月を！

ニコニコ動画で自分のマイリストを全検索するブックマークレット(原宿)

Tue, 07 Dec 2010 00:00:00 +0900

現在は、ニコニコ動画（GINZA）対応版をご利用下さい

ニコニコ動画で自分のマイリストを全検索するブックマークレット(GINZA) - モロ屋

『原宿になったのに実装されなかった…』
ーニコ･チュウ（2007〜2010）

というわけでニコニコ動画(9)用に作った前のブックマークレットが動かなくなってたので(原宿)に対応させました。
適当ですけどね！

動画のタイトルと、マイリスト時につけたコメントを検索します。
あとブラウザ側で検索処理をするので、早く運営さんはマイリスト検索を是非実装してやってください。

javascript:(function(){var%20d=(new%20Date)/1;var%20s=document.createElement('script');s.charset='UTF-8';s.src='http://kanmisikou.net/files/nico_mylist_search.js?'+d;(document.getElementsByTagName('head')[0]||document.body).appendChild(s);})();

これをコピペして、ニコ動のマイリストページでアドレスバーに貼り付けてエンター！
マイリスページじゃなかった時は、移動確認のダイアログが出ますよ。

はてなダイアリーの仕様で、このブックマークレットへのリンクが貼れません。
もしブラウザにブクマして使う時は、適当なページをブクマして編集→アドレスを上のブックマークレットに書き換えて使って下さいな。

ライセンスはMIT Licenseで。

Have a nice Niconico Life ;)

Deep Sea Girlシリーズが素敵すぎる件

Tue, 23 Nov 2010 00:00:00 +0900

【ニコニコ動画】【初音ミク】深海少女【オリジナル】

Miku - Deep Sea Girl - Preview by ImMuze on DeviantArt

Miku - Deep Sea Girl - 1 by ImMuze on DeviantArt

Miku - Deep Sea Girl - 2 by ImMuze on DeviantArt

Miku - Deep Sea Girl - 3 by ImMuze on DeviantArt

Miku - Deep Sea Girl - 4 by ImMuze on DeviantArt

Deep Sea Girl - 5 by ImMuze on DeviantArt

Title pending by ImMuze on DeviantArt

http://immuze.deviantart.com/art/Title-pending-2-186283936

http://immuze.deviantart.com/

クリスマスVOCALOIDソング5選を紹介するよ！

Wed, 17 Nov 2010 00:00:00 +0900

めっきり寒くなってきましたね。

雪の結晶のようなキラキラサウンドが耳に心地よく響いて気持ちいい。

スノートリック - 初音ミク Wiki - アットウィキ

ミクさんがひとりきりなら、俺もひとりきりのメリーデイ。

ひとりきりのメリーデイ - 初音ミク Wiki - アットウィキ

【ネタバレ】サンタクロースは両親

白夜のイヴを越えて - 初音ミク Wiki - アットウィキ

四畳半って二人だと狭いように思えて一番良い距離なんだよね。

子猫は独り遥か雪に埋もれてわたしを見つめる - 初音ミク Wiki - アットウィキ

なにがめでたいかって、そりゃケーキが食べられるからだよ。

金の聖夜霜雪に朽ちて - 初音ミク Wiki - アットウィキ

クリスマスというか冬を堪能できるボカロ曲があったら、@Molokheiyaまでぜひ教えてください。
春夏秋冬を楽しめるのは日本だけだけど、音楽なら世界中どこでも楽しめるよ！

ボーマス14でエゴな本を出します

Fri, 12 Nov 2010 00:00:00 +0900

ミクさん「そうよね、地球温暖化とか深刻だもんね」
おれ「エコだよ、それは！」

というわけで、11月14日に池袋で開催されるボーカロイドマスター14で本を出します。

詳しくはこちら
kanmisikou.net - このウェブサイトは販売用です！ - 初音ミクフォント制作志向甘味ニコニコ感性状況リソースおよび情報

なんというか入稿後に凡ミスを見つけちゃったり、周りから浮きまくっちゃったりしてますが、頑張って白い目線から耐えてこようかと思いますので参加される方は良かったら寄っていって下さると喜びます。
あ、出来れば白い目線じゃない方が嬉しいです。

さくらVPSにffmpegをいれる

Thu, 04 Nov 2010 00:00:00 +0900

SAKURA Internet [Virtual Private Server SERVICE]

[molo@www3274u ~]$ su -
[root@www3274u ~]# wget http://packages.sw.be/rpmforge-release/rpmforge-release-0.5.1-1.el5.rf.x86_64.rpm
[root@www3274u ~]# rpm -Uhv rpmforge-release-0.5.1-1.el5.rf.x86_64.rpm
[root@www3274u ~]# yum update
[root@www3274u ~]# yum -y install automake libtool libogg-devel livtheora-devel
[root@www3274u ~]# yum -y install ffmpeg

てきとうに。

Transaction Summary
================================================================================
Install      14 Package(s)
Upgrade       0 Package(s)

Total download size: 9.6 M
Downloading Packages:
(1/14): ffmpeg-libpostproc-0.5.2-2.el5.rf.x86_64.rpm     |  36 kB     00:00     
(2/14): giflib-4.1.3-7.1.el5_3.1.x86_64.rpm              |  39 kB     00:00     
(3/14): libid3tag-0.15.1b-5.el5.x86_64.rpm               |  47 kB     00:00     
(4/14): a52dec-0.7.4-8.el5.rf.x86_64.rpm                 |  82 kB     00:00     
(5/14): faac-1.26-1.el5.rf.x86_64.rpm                    | 154 kB     00:00     
(6/14): cppunit-1.12.0-4.el5.1.x86_64.rpm                | 188 kB     00:00     
(7/14): SDL-1.2.10-8.el5.x86_64.rpm                      | 214 kB     00:00     
(8/14): opencore-amr-0.1.2-1.el5.rf.x86_64.rpm           | 381 kB     00:02     
(9/14): lame-3.98.4-1.el5.rf.x86_64.rpm                  | 587 kB     00:01     
(10/14): libtheora-1.0alpha7-1.x86_64.rpm                | 706 kB     00:00     
(11/14): x264-0.0.0-0.4.20090708.el5.rf.x86_64.rpm       | 884 kB     00:02     
(12/14): imlib2-1.4.4-1.el5.rf.x86_64.rpm                | 968 kB     00:02     
(13/14): ffmpeg-0.5.2-2.el5.rf.x86_64.rpm                | 2.4 MB     00:03     
(14/14): dirac-1.0.2-1.el5.rf.x86_64.rpm                 | 3.1 MB     00:03     
--------------------------------------------------------------------------------
Total                                           432 kB/s | 9.6 MB     00:22     
Running rpm_check_debug

と思ったらffmpegだけでいけるっぽい？

[root@www3274u ~]# ffmpeg
FFmpeg version 0.5.2, Copyright (c) 2000-2009 Fabrice Bellard, et al.
  configuration: --prefix=/usr --libdir=/usr/lib64 --shlibdir=/usr/lib64 --mandir=/usr/share/man --incdir=/usr/include --disable-avisynth --extra-cflags=-O2 -g -pipe -Wall -Wp,-D_FORTIFY_SOURCE=2 -fexceptions -fstack-protector --param=ssp-buffer-size=4 -m64 -mtune=generic -fPIC --enable-avfilter --enable-avfilter-lavf --enable-libdirac --enable-libfaac --enable-libfaad --enable-libfaadbin --enable-libmp3lame --enable-libopencore-amrnb --enable-libopencore-amrwb --enable-libtheora --enable-libx264 --enable-gpl --enable-nonfree --enable-postproc --enable-pthreads --enable-shared --enable-swscale --enable-vdpau --enable-version3 --enable-x11grab
  libavutil     49.15. 0 / 49.15. 0
  libavcodec    52.20. 1 / 52.20. 1
  libavformat   52.31. 0 / 52.31. 0
  libavdevice   52. 1. 0 / 52. 1. 0
  libavfilter    0. 4. 0 /  0. 4. 0
  libswscale     0. 7. 1 /  0. 7. 1
  libpostproc   51. 2. 0 / 51. 2. 0
  built on Jun 13 2010 23:44:18, gcc: 4.1.2 20080704 (Red Hat 4.1.2-48)
At least one output file must be specified

oh.

CEATECでYAMAHAとかMMDAgentを見てきたよー

Wed, 06 Oct 2010 00:00:00 +0900

以前申し込んでいたCEATECのファストパスが届いていたので、せっかくなので行ってきました。

ブースを見回って、本当に業界は3Dになっているなと思いつつ
そのへんはとりあえず置いておいてボカロ関連だけ取り上げてみました。

まずYAMAHAブース。
あちこち企業ブース回ってから行ったので、一瞬ここがなんのイベント会場か分からなくなる。

ワールドイズマインのミクコスと、SF-A2 開発コード mikiのコスプレイヤーさん。

超薄型スピーカー「TLF-SP」

音質はそれほど良くないですが、実際に音が全体から鳴ります。
触ってみたところ、薄く針金のような感触がありました。

iPhoneを活用したサウンドスタンプラリー。
私もやろうとしたのですが、iPhone 3Gは非対応とのこと…

ちなみに技術者の方に聞いたところ、サウンドを解析するのにかなりの計算量を要するのでiPhone 3Gでは厳しいとのこと。
出来ないわけではないが自己責任でと言われたので、今回は引き下がっておく。

アプリはここからダウンロードできます。

さて、次は話題のMMDAgent。
名古屋工業大学のブースです。

ブースにはデジタルサイネージ用のディスプレイが設置され、そこに放映されていました。
ほぼ等身大です。

3DデータはMMD（pmdデータ）と互換性を持っている。
（というかおそらくそのまま読み込んでいると思う）

いらっしゃいませーと、おじぎするミクさん。

司会者　「得意なものは？」
ミクさん「歌とダンスかなー」
司会者　「ちょっと見せてよ」
ミクさん「それじゃあ、歌います。教えて！魔法のLyric」
踊り始めるミクさん。画面にはエフェクト効果も追加。

非常に、非常に可愛らしかったです！（大事なことなので2回言いました）

あと開発スタッフから細かい部分も聞いてきましたよ。

最初MMDAgentはそれ単体で動くAIのようなものかと思っていたんですが、
その実態は4つのモジュールを組み合わせた対話型エージェントらしいです。
所謂、伺かのようなもの。

しかし会話の開始タイミング、同調速度などかなり工夫されていて、
人間らしい動きを行うための調整が随所に盛り込まれていた感じでした。

余談ですが、先日わたしが取材していた論文の内容と組み合わせるとかなり面白い世界が広がりそうだと思ったので少し紹介。

CiNii 論文 - 対話型教示エージェントモデル構築に向けた漫才対話のマルチモーダル分析 CiNiiです。

発話・視線・姿勢などのマルチモーダルな要素間の相互作用の分析を行って
ユーザーに効果的にインストラクションを行う対話型教示エージェントモデルを構築する研究です。
モデル化がうまくいけば、さらに人間らしさを追求することが可能かもしれませんね。

開発言語はC++。主要ライブラリとしてHTS、Open JTalk、Juliusを使用。
Juliusは使ったことがありますが、こわいくらい精度が良いライブラリです。
よほど早口でない限り、誰が喋っても正確に認識されます。こちらも名古屋工業大学の開発。

シナリオファイルの構造なども知りたかったんですが、
そこは今年冬にオープンソースソフトウェアとしてのリリースが検討されているらしいので待ち。

~~誰かAI開発して組み込んだらいいんじゃねマジで~~

CEATECで出展されている他企業ブースと比較して技術的に優れているという訳ではないですが、尻Pが言っていた
『等身大ミクが置かれた場所は、そこだけ現実が切り取られ、架空世界に置き換わる。これは二つの世界を橋渡しするインターフェース装置なのである。』
これが見事に実現されていました。

京都で等身大初音ミクに会ってきた - 野尻blog

それこそ会場内のあちこちで耳にした3D映像として放映されれば、
さらに人間らしさが深まるかもしれませんねー。

YAMAHAブースのそばを歩いている時に後ろの方が
「社会人向けのイベントでこういうこと（コスプレかイラスト展示かな？）やっちゃうんだねぇ。時代だなあ」と話していたのが耳に入りましたが
技術なんてのは興味を持たれて使ってもらわないと何の役にも立たないもので、だからこそSonyは派手なパフォーマンスをするし、照明もバンバン焚くわけです。
ただこれらも一過性なものなので、毎年驚くようなものが出てきてほしいですね。

と、来年のCEATECに向けて。

なんでCD買うの？

Mon, 30 Aug 2010 00:00:00 +0900

先日、じゅるPとサンマルクカフェで話していた時に上がってきた話題。
個人的に興味深い話だったので、忘れる前にメモしておく。

CDをわざわざ買う理由

・VOCALOID楽曲は基本的にニコニコ動画で聴くことが出来る
・ニコニコ動画で公開されている曲は、にこさうんど等のサイトやその他ソフトウェアを使って比較的簡単にiPodなどに入れられる
・それなら何故CDをわざわざ買うのか

・基本的に一般レーベルからのCD売上は年々落ちている
・収入モデルはライブパフォーマンスに移行しつつある
　（参考：http://www.su-gomori.com/2010/05/post-492.html）
・なぜプロミュージシャンのCDよりも、VOCALOID同人CDは売れるのか

・曲自体を求めるのではなく、それに並行して得られる付加価値を求めている
・CDケース,ジャケット,ブックレット,円盤全てがある種の「グッズ」
・曲が公開されている状況でiTunes Store販売（KarenT等）しても、付加価値が無いためまず売れない
・つまりCDはグッズ化している。だから買う
・新曲入ってても、大多数はニコ動で有名な曲が入ってないと買わない
・EXIT TUNESさん、MOERさんお仕事お疲れ様です

・USBメモリやらSDカードで販売というのは、試算の結果ではそこまで悪くない
・でもCDをインポートするのと同じように、最終的にはmp3でiPodに入るんだから意味ないよねー
・しかもROM欠損とかあってデータ破損してたとき、本当に元々そうだったのか書き換えたのか分からないし、その辺が面倒
（追記：CDは書き換え出来ないからデータ破損してたらすぐに新品と交換って出来るけど、メモリだと自由に書き換えられるからイチャモンをつけられたら困るよなー的な意味で）
・そう考えるとやっぱりCDのままでいい

インターネットモデル特有の潜在意識

・ニコニコ動画で公開されている楽曲は「誰でも無料で」聴ける
・自分が買ってきたCDは「自分だけが（買った人が）」聴ける
・しかし、買ってきたCDを不法アップロードされる
・結局「誰でも無料で」聴けるんなら、買った私は損だ。という考え
・買わない

・「自分のものになった」という優越感が必要
・紙質にこだわったブックレット等の付加価値は、ネット上で同じように共有出来ないため購買意識が強い

・企業の皆さん、ユーザーからアイデアを募集すること＝CGMだと思ってますよね
・あとお前らとりあえずCGMって言っておけば、クオリティ低い企画出しても「CGMですから（ｷﾘｯ」って言えると思ってるだろ
・そもそも企業が一枚噛んでる時点でCGM（消費者生成メディア）じゃないよね

音楽をカテゴライズするのは悪いことか

・カテゴリ分けするのってdisられることなのかね
・そもそもなんでカテゴリで分けるか
・莫大な数が存在する音楽を全て聴くことは不可能
・すべて聴けないなら、自分が好きそうな雰囲気の曲を重点的に聴くしか無い
・そこでカテゴリ分けですよ

・ロックとクラシックを同じカテゴリって言う人はいないだろう
・じゃあテクノポップとテクノとエレクトロとファンクの違いは？
・えっ

・ジャンルに詳しい、いわゆる評論家がいなくなった
・ネットの発達で、誰でも評論まがいのことが出来るようになったから
・そもそも評論家って、基本的に世間から批判しかされない
・今じゃ音楽雑誌の片隅にしか存在してないよね
・作曲した人がジャンルを付ければいんだけど、作ってる側も最近はジャンル分からない
・そして評論家まがいの人が、間違ったタグを付ける

・やっぱ好きな曲を見つけるためにはカテゴリ分けは要るよ
・玉石混淆のVOCALOID楽曲には尚更だろうに
・こういう音楽知識もった評論出来る人いたら面白いのにね
・もっと良いところ悪いところをどんどん指摘したら世界が広がるのに

はてなブックマークから追記

・部屋に飾りたいからCD買う
・気に入った曲はモノとして手元に置いておかないと気が済まないから買う
・いい曲は物理媒体で欲しい
・未発表曲を含むCDだと、それも含めて集める
・ボカロPへの応援という意味もある
・付加価値しか買えなくなってるとも言える。なのでCDを買ったって楽曲にお金を払う意識はないという見方もある
・購買者がアーティストにコミットする機会があまりない
・同人CDは買わないとすぐ廃盤になるので急いで買うところがあると思うんだけど
・聴けなかったジャンルを聴けるようになる過程がむしろ楽しかったり

あと、サンマルクカフェは椅子がすごく良いです。