日本初らしいWeb3Dハッカソンに参加して、賞も頂いてきた話

概要

Web3Dのハッカソンに参加して、jThree + milkcocoaを使って
リアルタイムに3D空間で音のセッションができるようなものを作りました。

Web3dSession


また、協賛企業であるモバイルファクトリー様から賞として、
iTunes Storeカードとモバイルファクトリー様のステッカーを頂きました。


関係者各位にはこの場を借りて感謝申し上げます。

そもそもjThreeとは


jThree - 3DCGと立体音響が数行で動くWeb3Dライブラリ
ChromeFirefox、一部のIE等のモダンなブラウザで3Dコンテンツを動かせるWebGLのラッパーであるthree.jsをさらにラップすることで、jQueryでのDOM操作くらいが分かっていればブラウザで動作する3Dコンテンツを簡単に制作できるもの。
という説明で多分合ってると思います。
簡単に制作できる代償もそれなりにあって、動作が遅い、Webで3Dをやることの本質が理解しにくくなる等々言われているようです。

本文


【3DCG・立体音響の面白さで勝負】日本初Web3Dハッカソンで年越ししよう!jThree Class主催 Web3D Hackathon Japan 2014 : ATND
日本初らしいWeb3Dハッカソン、でもまあ、主催がjThreeの松田さんなので、実質、jThreeハッカソンなんだろうなと思いつつ時間が出来たので参加してみました。

協賛企業様

朝日新聞メディアラボ様からは会場を、
モバイルファクトリー様からはハッカソンで自由に使用できる音源を提供して頂きました。
ここに改めて感謝申し上げます。

アイディア発表、チームビルディング

参加できるのが決まったのが急だったので特にアイデアもなく、一緒に組んだお二方と考えることに。
結果、せっかく3Dオーディオが簡単に使えることを活かすのと、
Javascript1行を埋め込むだけで簡単にバックエンドが用意できるmilkcocoaを使って
音楽のセッションのようなことができたら面白いのではという案に落ち着きました。

作成

イデア出し1時間、昼休憩1時間、制作時間3時間半と時間が厳しいので以下のボーダーラインを設定し、まずはそこにたどり着くことを目標としました。

  • 固定した3点を置き、1つの点から音を出す処理を行うと、同時に接続してる他の人も同期してそこから音が出る。
  • また、3Dオーディオなのでカメラの位置によって、その音が左から聞こえたり右斜め前から聞こえたりする。

結局のところ、3Dオーディオの使い方を1から知るというレベルだったり、僕がmilkcocoaとの連携でつまらないミスを連発したりで、ボーダーはなんとか超えたというところでタイムオーバーでした。

出来上がったもの

概要にも貼りましたが、以下になります。

Web3dSession
右側の再生ボタンを押すとA、B、Cの3つのオブジェクトが現れ、それぞれbeat、scratch、thunderに対応しています。
カメラ切り替えボタンやドラッグで視点を変えて音を鳴らすと、音の聞こえ方が左からだったり右斜め前からだったりと変化することがわかると思います。
また、milkcocoaで同期しているため同時に接続している人が音を鳴らすと、自分のブラウザでもその音が聞こえてきます。


左のエディタを見てもらえると分かりますが、記述するのはGOML、HTML、CSSJavascriptと4種類ありますが、それぞれ50行も書いていません。これだけの記述で3Dオブジェクトを描いて、3Dオーディオを設定して、ブラウザ間のリアルタイム通信も行えるとは、jThreeとmilkcocoaの素晴らしさに誰しもが震えると思います。それこそ西野カナばりに震えますよね? 震えたくなくても、震える!

時間があればやりたかったこと

  1. BGMを設定して、ブラウザ間で再生タイミングを同期させる → jThreeの音楽を鳴らす関数にホストの再生時間をつっこめば出来そうだが、1秒くらい遅延がおきそう。
  2. オブジェクトを固定しないで、プレイヤーとして移動できるようにする →

milkcocoaでリアルタイム対戦できるFPSを作った話 - QiitaのようにFPSっぽく設定すれば出来るかと。というかこのゲームに銃の発射音を3Dオーディオで設定して、どこから撃たれているのかわかるっていうのも面白そうだと思った。

  1. 楽器を複数種類用意して多人数でセッション → 複数用意するのは大変。あと、再生タイミングの同期が音楽レベルにすると無理そう。

総じて、最初に目指した音楽のセッションというレベルは厳しそうだが、みんなが集まって音を出してるだけでも楽しいと思うのでチャカポコチャカポコできる何かが作れればいいなと感じた。

成果発表

初音ミクなんかは簡単に踊らせられるので、音ゲーを作っていたグループ、
jThreeは一切使わずthree.jsで立体音響を体感できるものを作り、技術の難しさに感動した松田さんからjThree賞をもぎ取ったグループ、
RedMine的なタスク管理ツールでのタスク割り振りを楽しくするためにjThreeを使おうぜ! という発想にいたったグループ、
バンジージャンプをしている人が杵を持ち、地上にある臼めがけてモチをつくという説明していてよく分からないけどインパクトある画面を作ってメディアラボ賞に輝いたグループ。
そして私のグループは音源を提供していただいたモバイルファクトリー様から賞を頂きました。
ステッカーがあるだけでもかなり嬉しいですね。

以下、今回のハッカソンやjThreeの勉強会に何度か出て思うところ

この日の松田さんの話で「Webで3Dと言っても、素人が見てすごいと思えることをやろうとするとレンダリング能力やファイルの容量=ローディングの重さの問題で現実的でないことが多い」というのがあって、これはそのとおりだと思います。
「その分、アイデアで勝負」というのも当然の流れかとは思いますが、まだどういうことが面白いのかという知見は集まっていないのが現状でしょう。
ただし、「『楽しい』をキーワードにjThreeを勧める」というのは非常に納得できる部分で、本来であれば面倒なことが多いはずの3Dコンテンツ作成において、今回の参加者の方々は私も含めてみんな楽しそうに作業をされていました。
今はまだ、技術を活かす道を模索する段階だとは思いますが、「楽しさ」でこちらに来てくれる人の可能性を考えれば、3Dコンテンツ全体の発展としては良い土壌となり得るのではないでしょうか。


あとはぱっとしての見てくれがいいものがあるといいかなと思うので、例えばアニメ『翠星のガルガンティア』でWebGLを用いた3Dゲームが無料で公開されていましたが、こういったコラボ企画が作れたりすると箔がつくかなと。

翠星のガルガンティア 〜キミと届けるメッセージ〜
質の良いモデルを使って簡単にWebで3Dコンテンツを作る、そういった道もあるのではないかと思いました。

参考URL

簡単にリアルタイム通信を実現:Milkcocoa - JavaScript一行に詰め込まれたバックエンド
milkcocoaとjThreeでFPSmilkcocoaでリアルタイム対戦できるFPSを作った話 - Qiita
Webオーディオの使い方について:jQueryの記法で学ぶWeb3D勉強会@Adwaysに行ってきました | takemikami's note
少し前の動画だけど、MMDでここまで出来るという作例(単に紹介したいだけ)

.

Raspberry Piを触ったのでメモ的な何か

参考URL

NOOBSダウンロード
http://www.raspberrypi.org/downloads/

初起動時設定
RaspberryPi - Raspberry Pi + 無線LAN セットアップ - Qiita
http://qiita.com/daicham/items/e24ce76f8815d339d070

無線LAN設定(うまくいかなかった)
これから Raspberry Pi をいじる方向けの資料 20130818版
http://www.slideshare.net/tominagamichiya/raspberry-pi-20130818

GPIOで単純なLED制御
raspberrypi/Raspberry PiでIO制御 - PukiWiki
http://www.pwv.co.jp/~take/TakeWiki/index.php?raspberrypi%2FRaspberry%20Pi%E3%81%A7IO%E5%88%B6%E5%BE%A1
Raspberry PiでGPIO制御 - 人と技術のマッシュアップ
http://tomowatanabe.hatenablog.com/entry/2013/01/14/181116

目標っぽい曲げセンサ付きグローブ
工作と小物のがらくた部屋: 夏休みの工作 ・・・ センサグローブとロボットハンド、別名、パイ揉みハンド
http://junkroom2cyberrobotics.blogspot.jp/2013/08/blog-post.html

コマンド

デスクトップGUI表示: $ startx
シャットダウン: $ sudo poweroff
vimをインストール: $ sudo apt-get install vim
gitをインストール: $ sudo apt-get install git-core

RtRTはAPI廃止でダメになった→すまん、ありゃウソだった

はてなブログをなんとなく開設してみました、私です。

エイプリルフールなネタというよりは、時間が経って考えてみたり実装してみたりしたらRtRTはTwitterAPI仕様で十分いけるやんと気付いたので、こんな記事でも書いてみようかと思いました。

概要

公式RT直後の発言が分かる「RtRT」が面白い - ねとらぼ
http://nlab.itmedia.co.jp/nl/articles/1210/30/news118.html

こんな感じに

  1. 自分の発言がRTされる
  2. その後、RTした人がなにかそれについて言及しているかもしれない
  3. 気になるので拾ってみよう

という流れで、RTされた直後のつぶやきを取りに行くサービスを2012年10月からTwitter API1.0廃止まで運営してました。


この時点では

  1. 核になる3つのAPIの2つが廃止
  2. APIを叩ける回数が350回/1時間から15回/15分に変更

という2点の変更があり、今までどおりの運用は不可能と判断しサービスを停止するに至りました。
でも、最近になって、よく仕様を見てみるとなんだかできそう→できた、ということがあったので報告までしておきたいと思います。
あくまでRtRTは機能的に現在でも実装できる!というだけで、サービスは色々と面倒なので再開しません。

プログラムの流れ

  1. 自分がRTされたつぶやきの一覧を取得する(statuses/retweets_of_me)
  2. 各つぶやきをRTした人を調べる(statuses/retweets/)
  3. RTした人のTLを見にいって、自分のRT直後のつぶやきを見つける(statuses/user_timeline)
  4. データとして詰めあわせてjson形式で吐き出す

RTした人たちのユーザIDだけの取得でよければ、2はstatuses/retweeters/でも多分問題ありません。

API制限を見てみたらさらに実装可能感が増す

ここでAPI制限を確認してみますと、なんと各API毎に制限値と残数と復活までの時間が設定されたようで、現在では1と2は15回/15分、3は180回/15分となっているようです。
1はプログラム起動時に1回しか使う必要がなく、2はつぶやき毎に1消費しますが、15分に15個分を1度見られれば十分です。3はなぜか180回/15分も叩けるので以前の350回/1時間よりも効率が良くなっているという状態です。さらに、3のオプションであるcount=200とpage数に対応が取れるようになったため、つぶやき量が多い人に対してもかなり深くまでAPI回数を消費せずにリーチできるようになりました。
こういった点から、15分に一度の起動で100RT程度までの対応ならば問題なく行えるといえるでしょう。

Pythonで実装してみた

Python2.7 + tweepyでコマンドラインからjson吐き出しまでを見てみます。

CONSUMER_KEY='XXXXXXXXXX'、CONSUMER_SECRET='XXXXXXXXXX'

ACCESS_KEY='XXXXXXXXXX'、ACCESS_SECRET='XXXXXXXXXX'

には、それぞれ自分のTwitter開発者用のものを入力してください。

#!/usr/bin/env python
# -*- coding: utf-8 -*-

import tweepy
import json
import codecs

LIMIT_RT = 5
LIMIT_PAGE = 20
LIMIT_COUNT = 100

CONSUMER_KEY='XXXXXXXXXXXXXXXXX'
CONSUMER_SECRET='XXXXXXXXXXXXXXXXX'
ACCESS_KEY='XXXXXXXXXXXXXXXXX'
ACCESS_SECRET='XXXXXXXXXXXXXXXXX'

auth = tweepy.OAuthHandler(CONSUMER_KEY, CONSUMER_SECRET)
auth.set_access_token(ACCESS_KEY, ACCESS_SECRET)
api = tweepy.API(auth)


def getRtrt():
    try:
        retweets_of_me = api.retweets_of_me(count=LIMIT_RT)  #rtされた一覧
    except:
        print 'auth or api error!(retweets_of_me)'

    rtrt = []
    for rt in retweets_of_me:  #ID毎にループ
        print rt.id
        rtrts = []
        try:
            retweeter = api.retweets(id=rt.id_str)  #rtした人一覧
        except:
            print 'auth or api error!(retweets)'

        for rter in retweeter:  #人毎にループ
            search_id = rter.id_str
            print "whort:" + str(rter.user.screen_name)
            rtrt_status = {}
            b_flg = False
            for p in range(1, LIMIT_PAGE):
                if b_flg:
                    break

                try:
                    tl = api.user_timeline(id=rter.user.id_str, count=LIMIT_COUNT, page=p)
                except Exception:
                    print 'auth or api error!(user_timeline)'

                print "p:"+str(p)+", c:"+str(len(tl))

                for i, v in enumerate(tl):
                    if i == 0 or i == len(tl)-1:
                        print "id:"+v.id_str+":"+search_id
                    if v.id_str == search_id:
                        rtrt_status = {'user': {'id': tl[i-1].user.id_str,
                                                'screen_name': tl[i-1].user.screen_name,
                                                'protected': tl[i-1].user.protected,
                                                'profile_image_url': tl[i-1].user.profile_image_url},
                                        'id': tl[i-1].id_str,
                                        'text': tl[i-1].text,
                                        'created_at': str(tl[i-1].created_at)}
                        b_flg = True
                        break
                    elif v.id_str < search_id:
                        b_flg = True
                        break

            if not rtrt_status:
                rtrt_status = {'user': {'id': v.user.id_str,
                                        'screen_name': v.user.screen_name,
                                        'protected': v.user.protected,
                                        'profile_image_url': v.user.profile_image_url},
                                'id': '',
                                'text': u'too much tweet!',
                                'created_at':''}

            rtrts.append(rtrt_status)
        rted_status =  {'user': {'id': rt.user.id_str,
                                'screen_name': rt.user.screen_name,
                                'protected': rt.user.protected,
                                'profile_image_url': rt.user.profile_image_url},
                        'id': rt.id_str,
                        'text': rt.text,
                        'created_at': str(rt.created_at)}
        rtrt.append({'rted_status':rted_status, 'rtrts':rtrts})

    return rtrt

def wjson(content, filename):
    f = codecs.open(filename + ".json", "w", 'utf-8')
    json.dump(content, f, ensure_ascii=False, indent=4)
    f.close


get_rtrt()した中身をwrite_json()に入れてjson形式で出力します。

[

(中略)

    {

        "rted_status": {

            "text": "話がジェットコースターなので、よくよく考えるとなんかおかしいところもある気はするけど、作品全体でのパゥワが凄すぎる。", 

            "created_at": "2014-03-22 14:32:38", 

            "user": {

                "protected": false, 

                "id": "14382115", 

                "profile_image_url": "http://pbs.twimg.com/profile_images/378800000394120263/9fe4afc9596c0f7163fce33261bce6c2_normal.png", 

                "screen_name": "esuji"

            }, 

            "id": "447380337069277184"

        }, 

        "rtrts": [

            {

                "text": "私の好きな作品によくある事(  ´ω`  )", 

                "created_at": "2014-03-22 14:35:22", 

                "user": {

                    "protected": false, 

                    "id": "XXXXXXXXXXXXXXX", 

                    "profile_image_url": "http://pbs.twimg.com/profile_images/XXXXXXXXXXX", 

                    "screen_name": "XXXXXXXXXXX"

                }, 

                "id": "XXXXXXXXXXXXXXXXXXXX"

            }

        ]

    }, 

(中略)

]

あまりRT言及っぽいのが取れなかったですが、上が私のつぶやきで下がその直後のつぶやきです。許可をもらってないので個人情報をマスクしておきましたが、実際にはちゃんと取れています。
あとはこのjsonjavascriptなんかで整形してやれば、きちんとコンテンツになります。
ただ、そのためにサーバやらなんやらの用意をする気力が私にはないので、やる気のある方が出てくれればというところです。


ということで、RtRTがダメになったというのは事実と異なる見解でした、すみません。
というところで本題は締めたいと思います。

実装についてもうちょっと詳しく

①兎にも角にもまずはアプリ用のトークンが必要です。
(上記で自分で入力する必要がある4つの文字列)
こちらはPHPの記事ですが、トークンをゲットするまでは同じ道のりなので参考になると思います。
http://webnaut.jp/develop/633.html
Pythonとtweepyをインストールする。
特に説明するほどでもない気がするので、ぐぐっていただけると話が早いです。
私はPython2.7を使用しましたが、3系でもそこまで問題ないような気がします。
③上記のソースコードに自分のCONSUMER_KEY、CONSUMER_SECRET、
ACCESS_KEY、ACCESS_SECRETを入力して任意の名前(ここでは例としてrtrt.py)で保存。
コマンドプロンプトやらコンソールやらでPythonの対話モードシェルを起動。
>>> import rtrt
>>> json = rtrt.get_rtrt()
>>> rtrt.json_write(json, 'rtrt')
これで同じフォルダにrtrt.jsonが生成される。
これをテキストエディタで開いて眺めたり、javascriptで整形して表示したりすると幸せになれる(※個人差があります)


謝辞として、各APIの仕様と取ってくるデータを確認するのにtwitSandbox様には大変お世話になりました。
http://twitsandbox.com/
また、参考にさせていただいたサイト、ブログ様もたくさんありますが、ありすぎて一つ一つは覚えてません、すみません・・・。