音楽の話



またまた久しぶりの投稿になってしまいました、デザイナーKです!

今日は弊社の仕事環境も踏まえ、音楽の話をブログに書きたいと思います。

弊社の主なチーム構成は、営業・ディレクター・エンジニア・デザイナーとなっており、
ディレクターさんが電話対応などをしてくださるので開発チームは基本的にイヤホンOKです!
また、ディレクターさんも音楽好きな人が多く、プレイリストを作って会社にBGMを流してくれたりします
(たまにすごい盛り上がります!)

実際にバンドをやっている人や作曲のできる人もいるので音楽の話で盛り上がることも多く、同じような趣味の人が入ってくれると仕事をする上でもいいコミュニケーションのタネになるかと思い、まずは個人的に最近ハマってるもののYOUTUBEとか上げていきたいと思います。その縁でPVの仕事とかきてくれたら嬉しいなぁ・・・



①ヤバイTシャツ屋さん



曲が面白いのにかっこいい、ノリが良い、SNSのマーケティングがうまい。と今ノリノリのバンド!関西の笑いのセンスがトンガってます!!弊社、ドローンとか飛ばせるんで仕事したいですwww



②岡崎体育



このMVが出た時は、社内でも話題に上がりました!おちゃらけソングも真面目な曲も両方よくて才能を感じます!ヤバTの寿司くんとメディア芸術祭の新人賞を獲得した国レベルの才能!



③どうぶつビスケッツ×PPP



たまにループでBGMになっています、トンガルマンはデジタルでものを作るフレンズの集まりです。ドッタンバッタン大騒ぎしたい人、応募をお待ちしています!!



④LITE



インストバンドです。海外でも人気があります。この前生で見ましたが、最高でした!



⑤Suchmos



サチモス好きな人、応募してきてほしいです!



⑥GOING STEADY/銀杏BOYZ



ゴイステとかいうと年がバレる・・・笑
Spotifyにあるので聴きあさっています。なんとなく大人になっていっても昔好きだった曲はやっぱりいいな〜



⑦BUMP OF CHICKEN



いくつになっても中二病!!!ミクさんverも好き〜
初期の頃と音楽性も人間性も変わったように思えるけど、藤原基央の作る曲はいつでも壮大で優しい!!



⑧欅坂46



AKB系列の中では1番曲が好きなグループ!!サイレントマジョリティーを聴くと頑張れます!!



⑨星野源



まさか、ここまで売れるとは・・・・・天はいくつの才能を星野源に与えたのか・・・・



⑩The Strypes



最後は海外バンド!若いのにすごいかっこいいロックンロールなバンドです!来日したら一度生で見に行きたい!!





以上、脈略ないですが個人的ピックアップになります!
ライブも種類が増えているし時間を見つけて参戦したい!



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

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




久しぶりのトンガルマンブログ更新です。デザイナー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