けいまさんですけど

死ぬ気でやってりゃ、そりゃ死ぬわ

はじめに

ぬまさんが突然まさかり投げられたい、と仰った、かどうかは分かりませんが、
まさかりを投げ合う会というのに参加してきました。

ちなみにレビューしたコードは以下。

感想

正直な感想を言えば、「ぬまさんのコード別に問題なくね?」。
しかもProviderとかProviderFactoryとか使ってて良さを感じました。

ただ、typoが目についたのでそれだけ報告しました。

他の方の指摘がけっこう知的かつ嫌味なく進んでいて凄い感じでした。

  • GetCSVクラスって名前どうなん?
  • このメソッドはクラスメンバにしたほうがいいんじゃね?
  • throwしたらCLIに描画されるの?

あと、AkkaをJavaで書いた時にObjectを型として使わざるを得ないケースがあってつらそうだと思いました。やっぱ時代はScalaなのか・・・?

一方僕は、ハッカーズバーで個人的イチオシのラムコークを飲みながら、ぬまさんのコードやレビューの議論を傍聴し、WebStorm環境を作りながら知見を得ていたのでした。

まとめ

もくもく会みたいな感じで酒を飲みながらコーディングするの、TANOSII

image
(Photo by mironal)

はじめに

8月23日に、六本木のHackers Barにて開催されたLive Coding De Nightで登壇してきました。

それはなに

我がブログでもたびたび話題にしていたので、くわしくはそちらも参照。

まぁ一言で言うと、「観衆の前でライブコーディングをするイベント」です。
今回はHackers Barを貸し切り、お酒を飲みながらライブコーディングをするということで、映画「ソーシャルネットワーク」っぽさがありました。I'm bitch!

なにやったの

今回ぼくはGoogleがリリースした「Cardboard」というプロダクトに関するライブコーディングを行いました。

具体的には、Cardboardという段ボールとレンズ他で出来たメガネキットを通して見るための「像」の作成です。
ようするにライブラリを組み込んだAndroidアプリを作成するにはどうするの?という話をしました。

ただ、当初MMDのキャラクターを出そうと頑張っていたのですが、余裕で時間と知識(特にOpenGLの知識がなかったのが痛い)が不足して間に合いませんでした。。。
そこで、お茶を濁してトーラス図形(ドーナツ型)を描画することにしました。

ソースコードはGitHub上に置いてあります。将来的にNyMmdを動かすことも目的としてるので、そのあたりのコードも含んでいます。

まぁ一応は時間内に終えることが出来たのと、実際のCardboardの使い心地も見て頂けたので良かったのですが、どうしてもコピペして終了みたいな感じになったのは、ライブコーディングのイベントとしてイマイチだったので、なんとかしたい感じはあります。。。

まとめ

もう完全にネタが尽きつつあるのと、そろそろ新しい息吹を入れたいので、どっかから人間を拉致してきて登壇させるようにしたいですね。。。

はじめに

Cardboard開発メモ 1 - けいまさんですけど の続き。

いきなりミクさんを召喚するのは非常にレベルが高いことがわかった。理由としては、

  • NyMMDというライブラリ自体は問題ないのだけど、これのAndroidラッパーがGL ES 1.0を前提に設計されているので、GL ES 2.0で動くように書きなおす必要がある
  • GL ES 2.0を使わないという選択肢は、Cardboard.jarがGL ES 2.0に依存しているため、ない。
  • GLES20はプログラマブルシェーダを使うので、その知識が必要。座標とベクトルぶっこんでドーン!しても動かないらしい。

というわけで、まずは基本から攻めていくことにする。

三角形のレンダリング

NyMMD動かそうとしていた残骸があって微妙だけど、着目すべきはMyRenderer.javaのみ。
(MyRenderer.javaのコードは AndroidでNDKを使わないOpenGL ES 2.0 | ワンダープラネットエンジニア Blog から流用させていただいております。お陰で理解がそうとう深まりました。)

このコードでは頂点座標情報と色情報を同じ配列内に持たせていて、その結果としてVBO(Vertex Buffer Object)との結びつけで mStrideBytes を使っていたりします。
なので実際は色と頂点座標は分けたほうがいい気はした。

VertexShaderは合成ベクトルと頂点情報を演算させているだけ、FragmentShaderも色情報をそのまんま使っているだけ、というシンプルさ。
でも、これでちゃんとCardboard上には2つの像が描画されました。

考察

MyRenderer.java、そしてMainActivity.javaどこを見ても、像が2つ描かれるようなGLES20の処理はありません。
これは、MainActivityが継承しているCardboardActivtyがうまいことやっているから、という他ありません。
これはコードが公開されていないので、どういう処理をしているのかは公式ドキュメントの(セッション動画の)図を読むしかないのですが、

image

Render Sceneだけに注力すれば、あとはCardboardのAPIがよしなにやってくれるという感じです。

ちなみに

各種用語類は以下のサイトの記事を適当に読んで勉強しました。わかりやすい!

はじめに

そのうちQiitaにまとめたいけど、ちょっと纏めるまでの間にいろいろありそうなので、こちらにチェックポイントを書いていこうかな。

前提知識

やりたいこと

Live Coding de Nightの出し物を制作する。
CardboardのAPIを使ってミクさんを視姦したい。

検証

ログを見る

Nexus5(Android 4.4.4)で検証。

MainActivity.java を作成し、Logcatを追跡してみた。CardboardView.StereoRendererでimplementした部分を中心に。

```
08-18 15:40:49.809 19749-19767/net.pside.android.sample.cardboard D/MainActivity﹕ onSurfaceCreated()
08-18 15:40:49.809 19749-19767/net.pside.android.sample.cardboard W/CardboardView﹕ Surface size 1794x1005 does not match the expected screen size 1920x1080. Rendering is disabled.
08-18 15:59:02.845 21494-21521/net.pside.android.sample.cardboard D/MainActivity﹕ onSurfaceChanged(897,1005)
08-18 15:59:02.915 21494-21521/net.pside.android.sample.cardboard D/MainActivity﹕ onSurfaceChanged(960,1080)

08-18 15:40:49.919 19749-19767/net.pside.android.sample.cardboard D/MainActivity﹕ onNewFrame()
08-18 15:40:49.919 19749-19767/net.pside.android.sample.cardboard D/MainActivity﹕ onDrawEye()
08-18 15:40:49.919 19749-19767/net.pside.android.sample.cardboard D/MainActivity﹕ onDrawEye()
08-18 15:40:49.919 19749-19767/net.pside.android.sample.cardboard D/MainActivity﹕ onFinishFrame()

// ...

08-18 15:40:49.919 19749-19767/net.pside.android.sample.cardboard D/MainActivity﹕ onNewFrame()
08-18 15:40:49.919 19749-19767/net.pside.android.sample.cardboard D/MainActivity﹕ onDrawEye()
08-18 15:40:49.919 19749-19767/net.pside.android.sample.cardboard D/MainActivity﹕ onDrawEye()
08-18 15:40:49.919 19749-19767/net.pside.android.sample.cardboard D/MainActivity﹕ onFinishFrame()

// ...

08-18 15:40:49.919 19749-19767/net.pside.android.sample.cardboard D/MainActivity﹕ onNewFrame()
08-18 15:40:49.919 19749-19767/net.pside.android.sample.cardboard D/MainActivity﹕ onDrawEye()
08-18 15:40:49.919 19749-19767/net.pside.android.sample.cardboard D/MainActivity﹕ onDrawEye()
08-18 15:40:49.919 19749-19767/net.pside.android.sample.cardboard D/MainActivity﹕ onFinishFrame()

08-18 15:41:06.229 19749-19749/net.pside.android.sample.cardboard W/IInputConnectionWrapper﹕ showStatusIcon on inactive InputConnection
08-18 15:41:06.299 19749-19767/net.pside.android.sample.cardboard D/MainActivity﹕ onRenderShutdown()
```

気付き

  • onSurfaceChanged(int, int)は、Immersive Modeに移行した時に描画領域が大きくなるので呼ばれているみたい。
  • onNewFrame() -> onDrawEye() -> onDrawEye() -> onFinishFrame() の順にコールされる。onDrawEye()が2度呼ばれるのは、右目、左目、とレンダリングするため。どっちがどっちという情報はたぶん引数で渡されるオブジェクトにでも入ってるんだろう。
  • バックキーを押すとonRenderShutdown()がコールされた。別にバックキーに限定されず、RenderがShutdownされるときに呼ばれるんだろう(?)

はじめに

マチ★アソビお疲れ様でした。

マチアプリの分析

マチ★アソビ vol.12 時点でのマチ★アプリのAnalyticsデータを基にした分析を行います。

セッション(アクセス数)とユニークユーザー数

マチ★アソビ vol.12のために作成した、マチ★アソビのイベント確認サイト(Webアプリ)「マチ★アプリ」は、2014年4月21日ごろに公開し、
本日5月6日までの間に 1183セッション、 714ユーザーの方々にアクセスして頂きました。

特に4月29日に行ったハッシュタグ付きの宣伝ツイートが比較的よくRTして頂けたこともあり、その1日だけで434セッションを記録しました。

地域

日本からのアクセスが殆どを占めています。アメリカやイギリス、韓国からのアクセスもありましたが、誤差と言える程度です。

さて、都道府県別ではどうでしょうか?以下の4つの地域からは100アクセス以上を計測しました。

  • 東京
  • 大阪
  • 徳島
  • 福岡

首都圏や、開催都市の徳島からのアクセスが多いのは想像通りですが、福岡からのアクセスが多かったのが意外でした。「マチ★アソビカフェ」の影響もあるのでしょうか。よくわかりません!

閲覧環境とモバイルデバイス

マチ★アプリでの「モバイル:タブレット:PC」の比としては、およそ「15 : 1 : 7」の比率でした。
マチ★アプリはスマートフォンでの閲覧に特化したWebサイトでしたが、PCの倍以上の閲覧数になるとは思っていなかったので驚きです。

また、気になる閲覧端末トップ10は・・・

  • Apple iPhone
  • LG Nexus 5
  • (not set)
  • Sony SO-02F Xperia Z1 f SO-02F for DoCoMo
  • Fujitsu F-06E ARROWS NX F-06E for DoCoMo
  • Apple iPad
  • DoCoMo SO-04D Xperia GX
  • Google Nexus 7
  • Apple iPod
  • DoCoMo SO-04E Xperia A

Xperia AとNexus 5は僕が保有している端末です(そのためアクセス数は多いけどユニークユーザー数は少ない)。

iPhoneからのアクセスが、モバイルからのアクセスのほとんどを占めていました。これは予想通りです。
というのも、地方都市はiPhone最強伝説が根強く生きています。マチアプリをネイティブアプリではなくWebアプリにしたのは、
iOS対応を行う上でWebを使うことが自分にとって最も楽にできるやりかただったからです。

ちなみに、iOSとAndroidの比率は6:4でした。

ふぁぼ機能

「ふぁぼる」ボタンは216回押されていたようです。全体的には78イベントでふぁぼが押されました。

実は、ふぁぼるボタンを押された回数を計測していました。(どのイベントをふぁぼったか、も取得しています。)

ただし、個人を特定できるといろいろ厄介なため、「ふぁぼるボタンを押したら計測する」というロジックにしてあります。
つまり、ふぁぼるボタンを連打すると、それぞれカウントがプラスされていきます。
あと、イベントタイトルをキーとして集計していたため、途中で名前を変更したイベントは別物として集計されています。
(ただ今回はそれに引っかかるようなイベントはなかった。。。はず。)

そういういい加減な感じではありますが、イベントのふぁぼられ数トップ10は以下のとおり。

  • 今井麻美のSSG vs 原由実の○○ラジオ 公開合同イベント
  • 鈴木このみ LIVE in マチ★アソビ
  • TVアニメ「アイドルマスター シンデレラガールズ」トークイベント
  • アーク×マチ★アソビ スペシャルトークショー
  • ガールズ&パンツァー 「これが本当のアンツィオ戦です!」 スペシャルトークショー
  • 【徳島駅】マチ★アソビ vol.12 記念入場券販売
  • Tridentミニライブ&トーク
  • 藍井エイル&ELISAライブ
  • 「神クロ」関連トークショー
  • 【前夜祭情報】Wake Up, Girls!スペシャルステージ(仮)

納得の結果ですね。

技術的な総括

よかったところ

  • Google Cloud Storageが思ったよりタフでよかった。(キャッシュ効き過ぎな感じはありましたが。。)
  • Google Calendar APIや、GData APIが思ったよりタフで(ry
  • OnsenUIをつかってアプリを作ったことを公表し宣伝ツイートしたら多くの人に作品を一目見てもらった
    • ただしOnsenUIが最適かどうか分かりません。次はIonic Framework使ってみて、比較検証したい。
  • 友人知人から非常に良い反応・大きなフィードバックを頂けた
  • チュートリアルをまじめに用意したので、それなりには使ってもらいやすいものを提供できた
  • ぐらぷす神 is GOD
    • ぐらぷすさんに泣きついたら element.bind() 使うやり方を教えてもらって解決できた部分があった

悪かったところ

  • FullCalendarに表示する項目数が増えると操作性が悪くなる(スクロールが引っかかるなど)
  • Windowsで作業するとGCSにファイルをアップするときにたいへんつらいのでWindows捨てたい
  • カレンダーON/OFFが重かった。もっとアルゴリズムを洗練させる必要がある。
  • お気に入り機能が微妙にわかりづらかったのと、初回宣伝時に間に合わなかったのが悔やまれる。

まとめ

マチ★アソビ vol.13がアナウンスされました。それまでの間に改善点はできる限り改善したいと思います。

ひとはずはお疲れ様でした!