デジタルテクノロジーと映画




久しぶりのトンガルマンブログ更新です。デザイナーKです。

めまぐるしく進化していく最新のテクノロジーやガジェットなど。
みなさんはこれらが実現する前からさまざまな映画の中で描かれているのをご存知ですか?


今回はそんなデジタルテクノロジーが実現した世界でどんなことが起きるのか描かれている映画を紹介します!







「マトリックス」




キアヌ・リーブスが主演した1999年のアメリカ映画です。
Virtual Realityの世界を描いた作品で、弾丸を上半身を大きく反らせて回避するシーンは有名ですね。
主人公ネロがVR世界でエージェント・スミスと戦い、コンピュータの支配から抗う救世主として戦います。ネロの存在はある意味ではバグのようなものなのかもしれません。








「マイノリティ・リポート」




プリコグと呼ばれる予知能力者によって犯罪予測がされ、事前に犯罪を防ぐことが可能になった世界。その執行係である犯罪予防局の刑事ジョン・アンダートン(=トム・クルーズ)がある日突然、その逮捕対象にされてしまうところから物語が始まります。高度にテクノロジーが発達した世界が描かれており、ジョンがデータを扱って潜在犯を探すときのUIはキネクトのように手を大きく動かして直感的に操作しているシーンが描かれています。






「Her」




人工知能サマンサと人間の男セオドアの恋を描いた作品です。
OSのサポート機能としていろいろな雑務を処理してくれるうちに、ついには心の傷まで癒してくれる存在になったサマンサ。いろいろな”ハック”で愛を確かめ合ったり、デートをしたりすることを試みます。人間とシステムという垣根を超えて繋がれたと実感したセオドアでしたが、最後には・・・・

音声サポート人工知能といえば、SiriやAlexaなどが出てきていますが、初音ミクや好きなアニメキャラを嫁にしてる人もいることを考えると、ない話ではないですね。







「サイコパス」




犯罪者指数である「サイコパス」を感知できる銃を持った警察が、潜在的に犯罪を起こす可能性がある人を事前逮捕できるという未来の世界を描いた作品。まどマギの虚淵玄さんが脚本を書いています。
現実でも、ビッグデータを活用したマーケティングであったり、顔認証技術で体調を予測したりすることが実現していることを考えるとそれらの活用でこうした警察のシステムが導入されるのかもしれません。





以上、デジタルテクノロジーが描かれてる映画まとめでした!ではまた。



トンガルマンWebサイト
https://tongullman.co.jp/index.php
facebook
https://www.facebook.com/Tongullman

【実践】VR動画をYouTubeにアップする方法



こんにちは〜
一気に秋らしく涼しくなりましたね、デザイナーのKです。

さて、今回の投稿ではYouTubeにVRモードで閲覧できる動画を作成してアップする方法を紹介します。Googleのスマホも発表され、VRビューワーも登場したので、それまでにちょっとしたVR動画をアップしておけば、どやっ、とできること請け合いです。(今のYouTubeアプリでも見れます。)

VR動画とは



まずは実際にVR動画を紹介します。最近ハマってライブにも行ったAwesome City ClubのPVです。ミュージシャンのプロモーションでも結構よく見ますね。Safariは今のところ対応していないので注意してください。PCでは画面をつかんで360°ぐるぐるでき、スマホなら加速度センサーで方向を切り替えることができます。

今回は
①Blenderで作る動画VR②パノラマ画像から作る静止画VRの2つの方法を紹介します。
②の方が初心者でも簡単に作れると思いますので、ツールに慣れていない方でVRを作りたい方は②の方を参考にしていただければと思います。



①Blenderで作る動画VR


VR動画はアニメーションレンダリングができるソフトなら作成可能だと思います。
今回は無料の3DCGソフトのBlenderを使用します。BlenderはこちらからDLできます。

まず、VRであることがわかりやすいように四方に壁のある空間をモデリングします。
見ている方向の違いがわかりやすいように色もつけてみましょう。


動画の方は動きも見たいので、動かすオブジェクトを配置します。Cubeを反対方向に2個配置して、色も設定しておきます。ライティングも立体感が分かるようにArea lightを上の方において明るさを調整します。


ここからカメラの設定になります。

カメラをVR視点(デフォルトでユーザーが見る視点)に配置し、

  • Renderer を Cyclesに変更
  • カメラを選択して
    [Projection(投影図法)= Panoramic(パノラマ状)]
    [Panorama Type = Equirectangular(正距円筒図)]
    に設定を変更



こんな感じの配置位置にしました。



この状態で静止画レンダリングしてみます。

このようにパノラマの全景画像が書き出されれば設定はOKです。


あとは動画の書き出しですが、YouTubeの場合、最終的に.mp4の動画を後述のVR用エンコーダーで変換してアップする必要があるのでフォーマットをMPEG−4で書き出します。
VRは高いfpsがないと酔いの原因になりますが、その分書き出す枚数は増えてしまいます。以前やった時は何日もかかるような設定にしてしまい結局あきらめたため、今回はfps30(1秒間に30コマ描画)で10秒の動画を作成する設定にしました。


②パノラマ画像から作る静止画VR


VR用のエンコードの説明はあとでまとめてするとして、先に静止画からVRにする方法を説明します。この方法はシンプルで、静止画を連続の「コマ」として動画化すればいいのです。なので、フリーソフトで[静止画]→[タイムラインを持った.mp4]に出来るものがあればパノラマからVRを生成することが可能です。この方法なら高解像度のパノラマをVR化するのにヒトコマヒトコマレンダリングする必要はないので、早く出来ます。


今回は、効果音やちょっとしたフィルタもかけたかったのでiMovieで動画化しました。
秋なので秋っぽいものを。。。

4Kの解像度ですが、そこまで時間はかかりませんでした。
この方法ならiPhoneで撮影したパノラマ写真を「ちょっといい感じのVRシアター」にして、どやっ、と出来ますね。


VR用の.mp4への変換


①②それぞれの方法で.mp4ファイルが作成できたら最後にYouTubeから提供されている360 Video Metadata アプリを使ってエンコードしてください。
[My video is spherical(=球体)]にチェックを入れて動画ファイルを開き[inject metadata]で変換されたファイルが作成されたら完了です!
これをYouTubeにアップし、VRに変換されたらURLからVR動画が楽しめます!
(だいたい、すぐには変換されません。何度か間をおきましょう)



VR動画①


VR動画②





こちらがアップしたVR動画です!(シュ、シュール.........笑)

スマホで見ると本当に小窓から空間を覗いているような感覚になりますね!!
高価なヘッドセットには及びませんが、メジャーなプラットフォームでいつでもどこでもVRが見れるとみんなと気軽に体験を共有できて楽しいですね!!

よかったらぜひ、この芸術の秋に制作してみてください!!!


参考リンク)
https://youtu.be/tZgG7n-lhUc
http://www.cgradproject.com/archives/3448
http://blender3dcg.blog.jp/archives/1050448417.html


トンガルマンWebサイト
https://tongullman.co.jp/index.php
facebook
https://www.facebook.com/Tongullman

PICO-8 introductory tutorial

Hello reader!

I bring you an introductory tutorial to PICO-8.



In this tutorial we are going to:
  • Create a player character.
  • Apply movement to it.
  • Create a simple level for the character to move in.
Please note that this tutorial assumes that you have some basic programming knowledge.

First of all, fire up PICO-8 and enter the console. In order to start off a new project just type.

save [projectname]

In my case it was `save tongull_test` which generated a file tongull_test.p8 . Once generated I typed `load tongull_test` to load the project in memory and then pressed escape to enter the PICO-8 IDE.


Displaying a character on screen


First off, I drew my little character in the sprite editor. I drew 3 sprites, one for when the character is standing still and 2 more for when the character is walking.



If you noticed, each sprite has an index assigned to it. This index is used in code. In order to display my character, I made use of the `_draw()` function which is called once every visible frame(roughly 30fps).

Please note that the _draw() function should be used for drawing objects on screen; logic is handled by the _update() function(more reliably called at 30fps). Inside that function we first call the cls() function which clears the the screen, then we call the spr() function in order to draw our sprite. In this function we will pass the index of the sprite and the X and Y coordinates of where we want to draw it.

In order to test out the application press CTRL+S to save and ESCAPE to enter the console then to run the application type `run [projectname]`

-- Double dash is used to write comments
function _draw()
    cls() -- Clear Screen
    spr(0, 50, 50) -- Sprite Index, x, y
end



Character Movement


Now that I displayed my character, let’s try to move it around! First of all I create an object called player to represent the player character and give it properties I needed.

player = {} -- initialising the object
player.x = 50 -- this will hold the player’s x co-ordinate
player.y = 50 -- this will hold the player’s y co-ordinate
player.sprite = 0 -- the current player sprite
player.speed = 2 -- the speed at which the player is going to move
player.moving = false -- Is used as a marker to see if the player is moving


Now that we have our object ready let’s create a function to handle the movement sprite animation. In the function we will cycle through the sprites to have movement animation.

function moveanim()
    player.moving = true -- Set the marker to indicate that the player is moving
    -- Check if the index is between 0 and 2
    if player.sprite > 2 then
        player.sprite = 0 -- if the index is over 2, reset
    end
end


Now in the `_update()` function we will listen the the user's input via the `btn()` function. In PICO-8 each player has up to 6 inputs(represented by index), 4 of which are directional. For player 1 the arrow keys serve as directional keys. Since our character will be only moving left and right we will use of 0 (left arrow key) and 1 (right arrow key) indexes.

When the left/right keys are pressed, the player x co-ordinate is modified by the player speed. If the x co-ordinate goes beyond the screen boundaries, we will set it to the opposite part of the screen.

In order to Log the X value, we will make use of the `print(text, x,y)` function. In Lua to concatenate string values we use `..` .

function _update() --called at 30fps
    player.moving = false
    if (btn(0)) then -- if left key is pressed
    
    player.x -= player.speed -- decrease the x by the speed
        if player.x < -10 then -- If the character moves beyond the left bound
            player.x = 128 -- Place character at the other side of the screen
        end
        moveanim() -- Call the move function
    end
    if (btn(1)) then
    
    player.x += player.speed
        if player.x > 128 then
            player.x = -10
        end
        moveanim()
    end
    if not player.moving then
        player.sprite = 0
    end
end

function _draw()
    cls() -- clear screen
    spr( player.sprite, player.x, player.y) -- draw the sprite using the values of our player object 

    print("x :"..player.x, 0, 0) -- Log the x value
end




Map/Level Editor

Now that our character is moving, but he is moving in empty space. Let's create a level for him to move in!

In order to do that we will make use of the sprite editor to create "tiles" to use in the map editor. The map editor is pretty simple to use, just select a sprite and draw it on the map.



The code is pretty simple too, just make use of the `map(cel_x, cel_y, sx, sy, cel_w, cel_h)` function.

function _draw()
    cls()
    map(0,0,0,20,124,124)
    spr(player.sprite, player.x, player.y)
    print("x:"..player.x, 0, 0)
end 




And there you have it, we have a little game to play around with.

You can see the finished project with an added little intro animation here . The source code is also available on github . Feel free to take a look and play around with it.


See you next time!

Pocket C.H.I.P and Pico-8

Hello again readers!


I am back and with a new toy that I bought to tinker with. What I am talking about is the Pocket Chip, a little device that utilises the Single Board Computer called C.H.I.P which is very similar to the Raspberry Pi in both price and functionality.


The beauty of the Pocket C.H.I.P is that it turns the C.H.I.P into a portable PC with it’s keyboard, battery and touch screen. It also has GPOI breakouts for those who want to dabble in electronics.

Pocket C.H.I.P


Included in Pocket C.H.I.P’s linux operating system is an application called a sic “fantasy console for making, sharing and playing tiny games and other computer programs.“




Pico-8 Editor


The interesting thing about this Fantasy Console/Game Engine is that it has carefully chosen limitations(such as lines of code capped at 8192) in order to inspire simple and creative games/applications.


Being a developer and a fan of games, I want to embark on learning how to use this game engine and share my experiences and knowledge to you the reader. Join me in the next blog where I explain the basics to help you get started in making your own game!



トンガルマンWebサイト
https://tongullman.co.jp/index.php
facebook
https://www.facebook.com/Tongullman

おら東京さ行くだ

お久しぶりです、最初のブログ投稿からおよそ1年ぶりに登場しましたディレクターのMです。

こんにちは、いよいよ大阪も梅雨入りしてきましたね。
ジメジメと湿度が高く気持ちが悪いですが、トンガルマン社内はカラッとドライな雰囲気です。

さて、少し前になりますが、ワタクシおよそ10日間、大阪から東京への長期出張に行っておりました。

はい、それはなぜかと申しますと、GW前からトンガルマン社員一同で携わっていました、
JRA競馬の祭典「日本ダービー」特設イベントに出展したコンテンツの立ち合いのためでございます。




そして感想ですが、、

いやぁ、楽しかったです!
弊社は会場内の全4コンテンツ中、3コンテンツの開発を行ったのですが
どれも、なかなかの盛況ぶりでした。





























ワタクシがディレクションを担当したのは、会場でもメインコンテンツとなる「FORTUNE DARBY」
手相の画像解析と、Leapmotionを使用したジェスチャートラッキングでのレースゲーム。
200インチ大型モニターに表示されたコンテンツは、開発・テスト時に確認していた小型モニターと違って迫力がありました。
実際に大勢の人に体験してもらい、みなさん楽しそうでした。

あと、ワタクシ個人的に楽しかった事はと言うと
オペレーター・スタッフの女の子が皆可愛いかったです!
そしてお弁当がおいしい!
初めて馬券を買ったのですが、ビギナーズラックならずでした。残念!
でも競馬って面白い!!!中継を見て鳥肌が立ちました。
次回は必ず勝ちたいと思います。


そんなわけで来年も「日本ダービー」コンテンツに携わりたいです!



トンガルマンWebサイト
https://tongullman.co.jp/index.php
facebook
https://www.facebook.com/Tongullman

ASO対策とは




バズマーケティングを意識したソーシャルなコンテンツを
ジャストアイデアを連発しながら考案し、

実際にPDCAをまわしていく上で、時には大幅なピヴォットも経験し、

クライアントのベネフィットに寄与するのがマーケッターのミッション

そうしてクライアントのみならずユーザーとのエンゲージメントも高めていく

そんなマーケッターに俺はなりたい。

        



エンジニアのJです。

そんな訳のわかんない話より、レイヤー(笑)を変えて
現場レベルに目を向けた実践的な事を覚えたいですよね。

という事で
ASO対策(アプリの検索順位を上げる施策)の基本を説明していきます。





そもそもASOってなに?


Appli Store Optimaizationの略でSEOの
App storeバージョンです。

IT業界の人は横文字使いたいマンなので、ASOとか言ってますが

単純にアプリのダウンロード数が、少なすぎる時に対策すると
上位に出てきやすくなってダウンロード数が増えるってやつです。






で、ASOってどうすればいいの?


対策したいアプリがどの層にならウケるか考えて、
大体3つぐらいのキーワードを正しく散りばめる

基本はこれだけです。

例えば主婦向けの家計簿アプリを作ったとしてターゲットを主婦に設定します。
そして潜在ユーザー層の主婦が検索しそうなキーワードを、
ルールに則って散りばめます。









↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑



今の上の文章では主婦という言葉を違和感がないよう3つ散りばめています。

実はこの含有率を意識するというのが、
ASOないしSEOでは大事です。


しかし難しいのが、「そういう人が検索しそうなキーワード」を選定する事です。

ユーザーが全然検索していない言葉で、上位に出てきてもダウンロード数は
伸びないので上位表示されても自己満足で終わってしまいますね。



エビデンス(笑)をきっちり集めましょう。




ASOツール活用


色々なASO向けツールを活用して
ユーザーはどんなキーワードで検索しているのか?

自分の推論は間違っていないか?などを、
きちんと検討するためのツールをご紹介します。



・Searchman
競合アプリなどを分析できるASOツール
https://searchman.com/ja/



・App Annie
今の順位情報など、傾向などを分析できる
https://www.appannie.com/


・グーグルトレンド、キーワードプランナー
どういう風に検索されているか、
旬なキーワードなどを分析できる
https://www.google.co.jp/trends/









ASO対策まとめ

今回は基本編なので、具体施策については言及しませんでした。
ですが大事な事は、

1、ターゲットに合ったキーワードを選定

2、含有率などを意識して正しくキーワードを散りばめる

3、競合などを分析して再度キーワードを選定して対策


上記の様なPDCA(笑)をまわしていく事なので、
そんなに難しい内容ではありません。


少し長くなったので、具体的なASO施策については次回でご説明します。



お付き合いありがとうございました。





























記事の中でASOという言葉を何回使ったでしょうか?











トンガルマンWebサイト
https://tongullman.co.jp/index.php
facebook
https://www.facebook.com/Tongullman

Google I/O 2016振り返り




こんにちは、かなり暖かくなってきましたね。
最近携帯をずっと使ってたiPhoneからAndroid端末に変えようか検討中のKです。

さて、現地時間の5/18〜20まで開催されたGoogleの開発者向けカンファレンスであるGoogle I/Oについて、今回は多岐に渡るいろんな分野の発表があったこともあり自分なりに少しまとめてみたいと思います。

公式ページ

まず今回のGoogle I/Oは、これまでやっていた室内の会場ではなく、屋外の会場で行われたこともひとつの話題としてあがっていました。Youtube上の360°動画で見ることもできますが、天気が良さそうでまるで夏フェスみたいですね。






Google Home



音声で家電を操作したり、ググったり、スケジュールをアナウンスしてくれるハードウェアGoogle Homeが発表されました。デモでは子供の宿題を手伝ったりしていましたが、超優秀な秘書と家庭教師と物知り老人が同居してるような感じですね。すごいです。映画「her」を彷彿とさせます。ただ結構いろんなデバイスをインターネットに繋げておかないといけないので家族全員に高いリテラシーが必要そうですね。


Allo



機械学習機能を搭載したメッセンジャーのAlloですが、特に驚いたのはテキストだけではなくて送られた画像に対しても会話を補足して返答を作成してくれていた場面です。ちょうど先日の社内勉強会で機械学習のことを学んだのですが、画像認識の研究者で、独自の機械学習を実験されていた外部講師の方が、「結局は学ばせるデータを“沢山集める”工程が最も大変だ」という話をされていたので、このあたりはさすが世界最大のデータベース企業.....驚異!!


Daydream



Android NでVRに対応したモードが追加されるとのこと。ハードウェアはサードパーティが作る想定とのことなので、製品というかVRプロジェクトの総称ですかね?...Daydream(=白昼夢)って中二病っぽくていいいですね。
会社にはOculusのriftの製品版が来たのでVR体験はよくやるのですが、やはりデバイスとPCを合わせて数十万という価格と手軽さがないことは個人にはネックです。気軽にVRが体験できることは楽しみですね。


TPU



 最後に機械学習をより効率化できるTensor Processing Unitというチップが発表されました。
 ”great software shines brightest with great hardware underneath.”とあるように、頭のいい子を作るための脳みそ作っちゃったような感じです。。。すごい。(Googleって検索の会社だったはずじゃ。。)
これは囲碁の世界チャンピオンとも対決した人工知能AlphaGoにも搭載されていたらしいのですが宇宙の組み合わせ以上のものを効率よく計算できるコンピュータって、もはやそれ新しい宇宙や〜(ノ゚ο゚)ノ オオオオォォォォォォ-.やぱやぱ〜


以上、勢いをより強く感じたGoogle I/O 2016!!!でした!!!
TensorFlow試してみます!!!


トンガルマンWebサイト
https://tongullman.co.jp/index.php
facebook
https://www.facebook.com/Tongullman