'愛されて500年。安心と安全のunko.meがお送りする、クソブログです。黒くてぶっといクソブログです。 http://attaka-i.unko.me/ 2017-05-08T00:00:00+09:00 katapad http://attaka-i.unko.me/2017/05/08/dist15.html 2017-05-08T00:00:00+09:00 2017-05-11T13:12:30+09:00 katapad <figure class="figs"> <img src='/img/posts/2017-05-08-dist/gif/yozawa3d-3.gif' alt=''> </figure> <p><a href="https://dist.connpass.com/event/51576/">DIST.15 「アニメーションで差を付ける演出とデザイン」 - connpass</a> で登壇してきました！</p> <p>ほかの登壇された方が「ガチのアニメーション・演出をしゃべる」とのことだったので、僕は実際のアニメーション術よりも、<strong>演出制作者のマインドとおもしろプレゼン</strong>に重きを置いてました。</p> <p>スライドでは極端な言い回しをしてる部分があるので、テキストで補足をしていきますね。</p> <p>おもしろプレゼンした動画も公開されているのでどうぞ。</p> <iframe class="embed" width="560" height="315" src="https://www.youtube.com/embed/j8dy6vuEs74?list=PLJxZe59KDEIRFxsE9aD4eGXBzEqn_pE-H?ecver=1" frameborder="0" allowfullscreen></iframe> <p>では以下からスライドです。</p> <hr> <div class="slide"> <img src='/img/posts/2017-05-08-dist/1.png' alt=''> </div> <div class="slide"> <img src='/img/posts/2017-05-08-dist/3.png' alt=''> <p>過激な言葉を使ってますが<strong>「愚直ではなく、クレバーにやること」</strong>。それがここでの「いい加減にやる」です</p> </div> <div class="slide"> <img src='/img/posts/2017-05-08-dist/4.png' alt=''> <p>このセッションではマインド(アニメーションの価値と演出)と、具体的な方法論(80点をかんたんに取る)を説明します</p> </div> <div class="slide"> <img src='/img/posts/2017-05-08-dist/5.png' alt=''> </div> <div class="slide"> <img src='/img/posts/2017-05-08-dist/6.png' alt=''> <p>フロントエンドと言われる領域はだいたい経験してきました</p> </div> <div class="slide"> <img src='/img/posts/2017-05-08-dist/7.png' alt=''> <p>代表的な仕事</p> </div> <div class="slide"> <div class="slide__works"> <iframe class="embed" width="560" height="315" src="https://www.youtube.com/embed/-AEMZhfkISk" frameborder="0" allowfullscreen></iframe> <dl> <dt>Yahoo Japan! Search for 3.11 検索キーワードビッグデータビジュアライザ</dt> <dd>2014 Flash</dd> </dl> </div> <p></div></p> <div class="slide"> <div class="slide__works"> <div class="slide__works__img"> <img class="" src='/img/posts/2017-05-08-dist/gif/toyota11.gif' alt=''> <img class="" src='/img/posts/2017-05-08-dist/gif/toyota2.gif' alt=''> </div> <dl> <dt>TOYOTOWN AMIDA DRIVE</dt> <dd>2014 JS, CreateJS, AngularJS</dd> </dl> <p></div> </div></p> <div class="slide"> <div class="slide__works"> <div class="slide__works__img"> <img class="slide__imghalf" src='/img/posts/2017-05-08-dist/gif/neymar.gif' alt=''> </div> <dl> <dt>Panasonic NEYMAR JR. CRAZY SKILLS</dt> <dd>2015 ThreeJS/WebGL</dd> </dl> <p></div> </div></p> <div class="slide"> <div class="slide__works"> <div class="slide__works__img"> <img class="slide__img--100" src='/img/posts/2017-05-08-dist/gif/vr-1.gif' alt=''> </div> <div class="slide__works__img"> <img class="slide__img--100" src='/img/posts/2017-05-08-dist/gif/vr-2.gif' alt=''> </div> <dl> <dt>VR RealData Baseball</dt> <dd>2016- Unity, VR</dd> </dl> <p></div> <p>プロの投げるボールって、実はデータ化されてたりします。ボールの軌道が3次元の座標だったり、回転だったりがきちんと取れてたりします。それをVRでビジュアライズ + 実際に打ったり捕ったりできるというところが、そのへんのVR野球ゲームとは一線を画するものです。 </p> </div></p> <div class="slide"> <div class="slide__works"> <div class="slide__works__img"> <img class="slide__img--100" src='/img/posts/2017-05-08-dist/gif/yozawa.gif' alt=''> </div> <dl> <dt>与沢が秒速で稼ぐようです</dt> <dd>2014 CreateJS/WebGL</dd> </dl> <p></div> <p>ここからはプライベートワークです。FPSを表示するやつを与沢でやってみた、というものです。</p> </div></p> <div class="slide"> <div class="slide__works"> <div class="slide__works__img"> <img src='/img/posts/2017-05-08-dist/gif/pdca.gif' alt=''> </div> <dl> <dt>PDCA</dt> <dd>2015 PixiJS/WebGL</dd> </dl> <p></div> <p>PDCAを高速に回せるものです。スマホ対応で指でめちゃくちゃ高速にPDCAを回せます。</p> </div></p> <div class="slide"> <img src='/img/posts/2017-05-08-dist/gif/yozawa3d-2.gif' alt=''> <p>今日のプレゼンのために与沢をVRにしてきました。口から札束が出ます。めちゃめちゃ楽しいです。</p> </div> <div class="slide"> <img src='/img/posts/2017-05-08-dist/16.png' alt=''> </div> <div class="slide"> <img src='/img/posts/2017-05-08-dist/17.png' alt=''> </div> <div class="slide"> <img src='/img/posts/2017-05-08-dist/18.png' alt=''> <p>コンテンツの価値はアニメーションのよしあしだけでは決定されない</p> </div> <div class="slide"> <img src='/img/posts/2017-05-08-dist/19.png' alt=''> </div> <div class="slide"> <img src='/img/posts/2017-05-08-dist/20.png' alt=''> </div> <div class="slide"> <img src='/img/posts/2017-05-08-dist/21.png' alt=''> <p>弊社にはこのような意識の高い発言をする人間が複数います。バスキュール社内では熱い議論がしょっちゅう行われているのですが、僕が初めてこの場面に遭遇したときは、衝撃をうけました。作るからにはちゃんとやるんです。</p> </div> <div class="slide"> <img src='/img/posts/2017-05-08-dist/22.png' alt=''> <p>僕がハンバーガーボタン→☓ボタンにトランジションするやつを作ったあとにツイートされていたので、これはこれで衝撃でしたが、いまとなっては「自分のやりたいことでバリューを出す」という基本的な話だったという認識です。内発的動機からくるやつのほうがバリューがでるってやつですね。</p> </div> <div class="slide"> <img src='/img/posts/2017-05-08-dist/23.png' alt=''> </div> <div class="slide"> <img src='/img/posts/2017-05-08-dist/24.png' alt=''> <p>アート的価値とは、LyricSpeakerのような「モーショングラフィックスそのものがプロダクトの価値の大きな部分」というものです。</p> </div> <div class="slide"> <img src='/img/posts/2017-05-08-dist/25.png' alt=''> </div> <div class="slide"> <img src='/img/posts/2017-05-08-dist/26.png' alt=''> <p>ここまでがマインドの話です。「価値とはなにか？を常に考える」というマインド。</p> </div> <div class="slide"> <img src='/img/posts/2017-05-08-dist/27.png' alt=''> <p>ここからが実際的な話。</p> </div> <div class="slide"> <img src='/img/posts/2017-05-08-dist/28.png' alt=''> <p>補足: 「80点でいい」と言い切っちゃってますが、僕はちゃんと90点は取りますよ！あと、100点なんてものはこの世には存在してません。見たことがない。</p> </div> <div class="slide"> <img src='/img/posts/2017-05-08-dist/29.png' alt=''> <p>時間とクオリティは正比例ではなく、二次曲線みたいな感じ。50点まではすぐにいけるけど、90から100点の間は莫大な時間がかかります。そもそも今あるヒト・モノ・カネ・時間で100点に到達できるのか？</p> </div> <div class="slide"> <img src='/img/posts/2017-05-08-dist/30.png' alt=''> <p>分解するとこんな感じ。イージングはExpoにして、根性出しとけばだいたいいける。まあ、誇張してますけどねｗｗｗ でも、けっこう真理ついてません？</p> </div> <div class="slide"> <img src='/img/posts/2017-05-08-dist/31.png' alt=''> </div> <div class="slide"> <img src='/img/posts/2017-05-08-dist/32.png' alt=''> </div> <div class="slide"> <img src='/img/posts/2017-05-08-dist/33.png' alt=''> <p>時間も金も有限。だからこそ、必要なものにただしくリソースを割く。</p> </div> <div class="slide"> <img src='/img/posts/2017-05-08-dist/34.png' alt=''> </div> <div class="slide"> <img src='/img/posts/2017-05-08-dist/36.png' alt=''> <p>アルファ、ポジション、回転、スケール、マスク。これを完璧にできるほうがむしろ好ましいとさえおもう。ただ、突き抜けるためにはそれ以上のすごみが必要にもなる。</p> </div> <div class="slide"> <img src='/img/posts/2017-05-08-dist/37.png' alt=''> <p>この案件については、以前、<a href="http://katapad.com/wp/2014/03/11/yahoo311/">自分のブログ</a>に書いているので参考に…。</p> </div> <div class="slide"> <img src='/img/posts/2017-05-08-dist/38.png' alt=''> </div> <div class="slide"> <img src='/img/posts/2017-05-08-dist/gif/easing.gif' alt=''> </div> <div class="slide"> <img src='/img/posts/2017-05-08-dist/41.png' alt=''> <p>Back, Elasticはセーフ。というかよく使う。Bounceはスベリ芸をしたいときに使う。</p> </div> <div class="slide"> <img src='/img/posts/2017-05-08-dist/42.png' alt=''> </div> <div class="slide"> <img src='/img/posts/2017-05-08-dist/44.png' alt=''> </div> <div class="slide"> <img class="slide__imghalf" src='/img/posts/2017-05-08-dist/gif/neymar.gif' alt=''> <p>これもブラーで被写界深度もどき、ミュージックビデオっぽいカメラの動きだったり、ライトをくるくる回したりして、かっこよくしている</p> </div> <div class="slide"> <img src='/img/posts/2017-05-08-dist/gif/yozawa_postfx.gif' alt=''> <p>ポストプロセスで被写界深度 + Bloom + カラコレなどで、自分好みの色に仕上げる。</p> </div> <div class="slide"> <img src='/img/posts/2017-05-08-dist/48.png' alt=''> </div> <div class="slide"> <img src='/img/posts/2017-05-08-dist/49.png' alt=''> </div> <div class="slide"> <img src='/img/posts/2017-05-08-dist/50.png' alt=''> </div> <div class="slide"> <img src='/img/posts/2017-05-08-dist/51.png' alt=''> <p>時と場合によるんですけどね。開発終盤のギリギリな状態になったら、優先順位つけるとおもいます。そういう経験から学び、やるべきポイントを先に抑えて道筋を立てるのが吉。</p> </div> <div class="slide"> <img src='/img/posts/2017-05-08-dist/52.png' alt=''> <p>最初にも書きましたが「クレバー」にやることです。愚直はダメ。</p> </div> <div class="slide"> <img src='/img/posts/2017-05-08-dist/53.png' alt=''> </div> <div class="slide"> <img src='/img/posts/2017-05-08-dist/54.png' alt=''> <p>根性でブラッシュアップ。根性で先にAPIつぶして、根性で演出ブラッシュアップ！</p> </div> <div class="slide"> <img src='/img/posts/2017-05-08-dist/55.png' alt=''> </div> <div class="slide"> <img src='/img/posts/2017-05-08-dist/56.png' alt=''> </div> <div class="slide"> <img src='/img/posts/2017-05-08-dist/57.png' alt=''> <p>thaさんとかmountさんとかはが90点以上のひとびと。いまからそこに殴り込みにいけるのか？？</p> </div> <div class="slide"> <img src='/img/posts/2017-05-08-dist/58.png' alt=''> <ul> <li>0-1: 発明タイプ <ul> <li>新しい価値や課題を見つける</li> <li>その価値を見える化するための高速モック開発能力</li> </ul></li> <li>1-10: 職人タイプ <ul> <li>磨き上げてよいものを作る</li> </ul> </li> <li>10-100: 大量のひとに届ける製品つくるひとタイプ <ul> <li>2ヶ月くらいで消滅する広告案件ではなく、5年続くサービスだと求められることが変わります。</li> <li>超でかいサービス運用だとDevOps能力のほうが求められるとか。</li> </ul> </li> </ul> <p>自分にあった場所がきっとあるので、そこを見極めましょう。おれは9年かかりました…。で、わかったことが、初心と一緒でした。つまり、やりたいことなんて、最初に決まってるんです。それを回り道をして、結局戻ってきた。</p> </div> <div class="slide"> <img src='/img/posts/2017-05-08-dist/59.png' alt=''> </div> <div class="slide"> <img src='/img/posts/2017-05-08-dist/60.png' alt=''> <p>ま、なんだかんだ言って90点取りたいですよね〜。</p> </div> <div class="slide"> <img src='/img/posts/2017-05-08-dist/61.png' alt=''> </div> <div class="slide"> <img src='/img/posts/2017-05-08-dist/62.png' alt=''> <p>何回もいいますが「クレバー」にやりましょう！うぇ〜い！</p> </div> <div class="slide"> <img src='/img/posts/2017-05-08-dist/63.png' alt=''> </div> <div class="slide"> <img src='/img/posts/2017-05-08-dist/64.png' alt=''> <p>エンジニア募集してます！ <a href='https://www.bascule.co.jp/join-us/'>Basculeのサイト</a>に案件のこととか、いろいろと書いてます。あ、あと最近<a href="https://blog.bascule.co.jp">バスキュール技術ブログ</a>もできました。よろしくどうぞ！</p> </div> http://attaka-i.unko.me/2016/12/20/dotfes.html 2016-12-20T00:00:00+09:00 2017-05-11T13:20:48+09:00 katapad <p><a href="http://www.dotfes.jp/2016shibuya/">dotFes 2016 渋谷</a> のクリエイティブ大喜利に出演してきました。</p> <p>「企画提案は大喜利だ！ クリエイティブ大喜利in渋谷」 と題して</p> <ul> <li>中村 洋基さん</li> <li>佐藤ねじさん</li> <li>坪倉輝明さん</li> </ul> <p>と超サイヤ人なひとびとと大喜利をしてきました。</p> <h2 id="結果は1票差でねじさんに負ける…。">結果は1票差でねじさんに負ける…。</h2> <p>といった結果に終わってしまいましたが、大喜利後、そのへんを歩いてたおっちゃんが「バスキュールのひと、めっちゃおもろかったな」と僕に気づかず言ってたとか、多方面から「めっちゃウケてた」と言ってもらって、とてもよい気分でございました。(気を遣ってくれてただけという説は耳に入ってない)</p> <h2 id="おれのおもしろプレゼン">おれのおもしろプレゼン</h2> <h3 id="お題「日本人らしい歩きスマホの解消方法を教えてください」">お題「日本人らしい歩きスマホの解消方法を教えてください」</h3> <iframe class="embed" src="//www.slideshare.net/slideshow/embed_code/key/BlvfbjPKs86S1r" width="595" height="485" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe> <div style="margin-bottom:5px"> <strong> <a href="//www.slideshare.net/katapad/dotfes-2016" title="お題「日本人らしい歩きスマホの解消方法を教えてください」@katapad / dotFes 2016 渋谷" target="_blank">お題「日本人らしい歩きスマホの解消方法を教えてください」@katapad / dotFes 2016 渋谷</a> </strong> from <strong><a target="_blank" href="https://www.slideshare.net/katapad">Yoshio Kakehashi</a></strong> </div> <iframe class="embed" width="560" height="315" src="https://www.youtube.com/embed/XndxK_mxSGY" frameborder="0" allowfullscreen></iframe> <h3 id="お題「ハチ公前での待ち合わせにとても苦労しています。
待ち合わせしやすい画期的なアイデアを教えてください。」">お題「ハチ公前での待ち合わせにとても苦労しています。
待ち合わせしやすい画期的なアイデアを教えてください。」</h3> <figure class="figs"> <img src="/img/posts/2016-12-22-dotfes/hachiko-1.jpg" /> </figure> <figure class="figs"> <img src="/img/posts/2016-12-22-dotfes/hachiko-2.jpg" /> </figure> <figure class="figs"> <img src="/img/posts/2016-12-22-dotfes/hachiko-3.jpg" /> </figure> <h2 id="戦略">戦略</h2> <ul> <li>佐藤ねじさん、坪倉さんはまっすぐなクリエイティブでお題と取り組むはず</li> <li>自分とおなじエンジニアである坪倉さん。彼が持つ特殊能力「技術に対する嗅覚」で勝負してはいけない</li> <li>自分は無名</li> <li>自分の得意技「笑えるやつ」で勝負すべき</li> </ul> <p>というものでした。技術とお笑いとを絶妙のバランスで配合することで勝負を挑みました。</p> <p>結果、めっちゃウケたので大変よい結果だったとおもいます。</p> <h2 id="dotfesの会場の雰囲気が、めちゃくちゃによかった">dotfesの会場の雰囲気が、めちゃくちゃによかった</h2> <p>よっぽどのことがないかぎり、ドンズべりすることがないくらい、会場があったまってた。あんなによい空気をつくったdotfes運営に関わったみなさんと、たのしもうとした参加者のみなさんとの一体感がとても心地よいものでした。また次も大喜利に出たいなあ。</p> http://attaka-i.unko.me/2016/12/12/gearvr.html 2016-12-12T00:00:00+09:00 2016-12-12T13:52:19+09:00 katapad <p>2016-12-12 14:00 追記<br> 結露について追記しました。<strong>あくまで民間療法ですので、くれぐれもご注意ください…。</strong></p> <p>GearVRはすさまじい問題を抱えています。</p> <ul> <li>最悪、起動後1分で落ちる熱問題</li> <li>10分で15%消費するバッテリー</li> </ul> <p>これをイベントで大量のひとに安定して体験してもらうには、大変な労力とカネがかかってしまいます。それを解決した話をしますね！</p> <h2 id="galaxyを1000台用意して、オペレーターを1000人雇えれば、根本的に解決できるが…">Galaxyを1000台用意して、オペレーターを1000人雇えれば、根本的に解決できるが…</h2> <p>1000台もあれば、<strong>体験で1回使ったら、そのまま捨てるという富豪運用</strong>ができます。バッテリーは完全解決で、熱問題もある程度の対策ですみます。1台につきスタッフ一人をわり当てれば、1000台での運用もできるでしょう。</p> <p>しかし、ここでは現実的な解である<strong>「十数台のGalaxyで運用する」</strong>にはどうすればいいかを考えましょう。</p> <p>以下、課題と解決法です。</p> <h2 id="[課題]-最悪、起動後1分で落ちる熱問題。バッテリー温度が32度を超えると落ちる可能性が高くなる">[課題] 最悪、起動後1分で落ちる熱問題。バッテリー温度が32度を超えると落ちる可能性が高くなる</h2> <figure class='figs'> <img src='/img/posts/2016-12-12/overheat.jpg' alt='オーバーヒートエラー画面'> <figcaption>本当に怖いエラー画面</figcaption> </figure> <ul> <li>端末が熱を持つとエラー画面になり、<strong>操作不能</strong>に。 <ul> <li>全天球4k動画を見ていると、1分でオーバーヒートでエラー画面になる場合がある。</li> <li><strong>バッテリー温度が32度を超えるとエラー画面になりやすい。</strong></li> </ul></li> <li>熱を持つとFPSが30まで下がり、4k動画の再生も不安定になっていく</li> </ul> <h3 id="[解決策]-熱さまシート-+-保冷剤でキンキンに冷やしてから使う">[解決策] 熱さまシート + 保冷剤でキンキンに冷やしてから使う</h3> <figure class='figs'> <img alt='冷やしている' src='/img/posts/2016-12-12/hiyasi.jpg'> <figcaption>熱さまシートを貼り、さらにタオルでくるんだ保冷剤で冷やしている様子</figcaption> </figure> <p>熱さまシートとブロック型の保冷剤をいくつも用意して、<strong>&ldquo;あらかじめ端末を冷やしておく&rdquo;</strong>という対応をしました。</p> <iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=kpd-22&o=9&p=8&l=as4&m=amazon&f=ifr&ref=as_ss_li_til&asins=B0012R252G&linkId=c74a9d1e9719de553fb4e197d45e9c50"></iframe> <p>熱さまシートはニオイがある。子ども用だと多少ニオイがすくない。</p> <iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=kpd-22&o=9&p=8&l=as4&m=amazon&f=ifr&ref=as_ss_li_til&asins=B001ADU7EU&linkId=fd9d677fae8f0bb2f28b706c5c8fe05c"></iframe> <p>ブロック型の保冷剤はカチコチにしておくと1時間程度は冷却効果が持ちます。</p> <h3 id="温度を16度以下まで冷やすと3体験ぶん、回せる可能性がある">温度を16度以下まで冷やすと3体験ぶん、回せる可能性がある</h3> <p>今回の施策は、1回の体験が7分程度。<br> 以下、室温26℃、風なしで行ったときの平均的な温度上昇。</p> <table><thead> <tr> <th style="text-align: center">タイミング</th> <th style="text-align: center">温度</th> </tr> </thead><tbody> <tr> <td style="text-align: center">開始前</td> <td style="text-align: center">16度</td> </tr> <tr> <td style="text-align: center">1回目終了時</td> <td style="text-align: center">22度</td> </tr> <tr> <td style="text-align: center">2回目終了時</td> <td style="text-align: center">26度</td> </tr> <tr> <td style="text-align: center">3回目終了時</td> <td style="text-align: center">29度</td> </tr> </tbody></table> <p>端末の温度上昇には体験者自身の体温も影響します。なので、夏はヤバい…。</p> <p>あと、あまりに冷やしすぎると結露する可能性があがるので、お気をつけください。</p> <h3 id="冷却ジェルシートは「熱さまシート」が最強">冷却ジェルシートは「熱さまシート」が最強</h3> <ul> <li>熱さまシート &gt; 冷えピタ &gt; &gt; &gt; プライベートブランドな安いやつ</li> <li>冷えピタには、冷え冷え能力以外にも「張り付き能力」というパラメータもある。</li> </ul> <p>冷却ジェルシートの比較記事が参考になる。<br> <a href="http://goo.gl/Xak7XG">熱さまシートが最優秀！冷却ジェルシート比較</a></p> <h3 id="イベント会場の冷房をガンガンきかす-or-風通しをよくしておく">イベント会場の冷房をガンガンきかす or 風通しをよくしておく</h3> <p>熱さまシートの冷却は気化熱。なので、</p> <ul> <li>湿度が低いとより気化する</li> <li>風があたるとより気化する <ul> <li>風通しのよい会場にする</li> <li>扇風機の風を当てる</li> </ul></li> </ul> <p>などをしておくとより長く冷却状態を保てるようになります。</p> <p>また、単純にイベント会場の冷房をガンガンにしておくこともかなり有効です。<strong>冷房を18度に設定した状態だと温度上昇を75%まで減らせたりします。</strong></p> <h2 id="最終的なオペレーション構成">最終的なオペレーション構成</h2> <figure class='figs'> <img alt='冷やしている' src='/img/posts/2016-12-12/hiyasi-tech.png'> </figure> <ul> <li>粗熱をとる <ul> <li>いきなり保冷剤で冷やすと結露する可能性があるので、扇風機で冷やしておく</li> </ul></li> <li>保冷剤で冷やす <ul> <li>保冷バッグの中にでかい保冷剤 ✕ 2</li> <li>保冷剤の間にGalaxyを挿しこむ</li> </ul></li> <li>熱さまシートは毎回貼り直す <ul> <li>貼り終えたものは冷蔵庫で冷やし、次回の入れ替え時に使う</li> <li>熱さまシートは冷凍より冷蔵のほうが効果が高いとのこと。</li> </ul></li> <li>戦国時代の鉄砲隊のように、 <ul> <li>「冷やし + 充電」グループ</li> <li>「体験」グループ</li> <li>を分けて運用する</li> </ul></li> </ul> <figure class='figs'> <img alt='冷やしている' src='/img/posts/2016-12-12/hiyasi-rotate.png'> </figure> <p>これで安定して冷やしつつも、充電することができました。</p> <h2 id="galaxyの温度とバッテリー残量を監視する">Galaxyの温度とバッテリー残量を監視する</h2> <p>Galaxyの温度とバッテリー残量を管理画面で監視するようにしていました。</p> <figure class='figs'> <p><img alt='管理画面' src='/img/posts/2016-12-12/kanri.png'></p> <div><img alt='管理画面' src='/img/posts/2016-12-12/kanri-ondo.png'></div> <figcaption>バッテリーの温度と残量を可視化</figcaption> </figure> <p>これで「あと何回、回せるか」を把握して安全に運用できました。</p> <p>UnityからAndroidの</p> <ul> <li>バッテリー温度</li> <li>バッテリー残量</li> </ul> <p>を監視するネイティブのやつを作ったのでこちらに置いています。<br> <a href="https://github.com/katapad/UnityAndroidDeviceStatus">katapad/UnityAndroidDeviceStatus</a></p> <p>この値をUDPやSocket.ioで管理画面に送りつけていました。</p> <h2 id="[巷で見られる解決策]-ファンをとりつける">[巷で見られる解決策] ファンをとりつける</h2> <p>CPU/GPU用のファンをGalaxyに直接とりつける、といったマッチョな解決策もあります。</p> <figure class='figs'> <img alt='' src='https://i.ytimg.com/vi/1E48PyLMTYs/mqdefault.jpg'> <figcaption><a href="https://goo.gl/hCvg6F" target="_blank"> Google 画像検索「gearvr overheat」</a></figcaption> </figure> <p>ただ、これだけではさほど効果が得られない場合もあります。</p> <p>我々が試した実験では<strong>「熱さまシート+ファン」だと、Galaxyの電池が切れるまで26度前後を保つ</strong>、という最高の結果が得られました。</p> <p>しかし、体験者はHMDを手で触ることは多々あります。剥き出しのファンに手が当たるとたいへん危険です。</p> <h2 id="こうして我々はgearvrを1000人単位で安定した体験をしてもらえました">こうして我々はGearVRを1000人単位で安定した体験をしてもらえました</h2> <p>VR酔いと同じように、モバイルVRの熱問題は気をつけたいところであります。</p> <p>とはいえ、オペレーションコストが増加してしまうところでもあり、大変悩ましい問題です。</p> <p>我々のチームメンバーが <strong>とある有料GearVRアトラクションを体験したところ、2分で落ちた</strong>そうです…。お金払って落ちるって、おーこわ事案ですね。</p> <p>これからモバイルVRでなんかやるひとはお気をつけください…。</p> <p>あと、結露にもお気をつけください…。</p> http://attaka-i.unko.me/2016/12/11/brain.html 2016-12-11T00:00:00+09:00 2016-12-12T01:52:09+09:00 katapad <!--<a href="https://www.amazon.co.jp/%E3%83%96%E3%83%AC%E3%83%BC%E3%83%B3-2017%E5%B9%B4-01-%E6%9C%88%E5%8F%B7-%E9%9B%91%E8%AA%8C/dp/B01MG43LZI/ref=as_li_ss_il?ie=UTF8&linkCode=li2&tag=kpd-22&linkId=238564a74771a723c53277153bb879bc" target="_blank"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=B01MG43LZI&Format=_SL160_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=kpd-22" ></a><img src="https://ir-jp.amazon-adsystem.com/e/ir?t=kpd-22&l=li2&o=9&a=B01MG43LZI" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /> &ndash;> <p><a href="http://www.sendenkaigi.com/books/back-number-brain/8236">月刊ブレーン2017年1月号</a>の「今月のブックマーク」に寄稿した。</p> <figure class='figs'> <img alt='冷やしている' src='/img/posts/2016-12-12-brain/brain.jpg'> <figcaption>佐野ひなこのとなりに俺がいる</figcaption> </figure> <p>「今月のブックマーク」とは以下のようなサイト・アプリなどを紹介するというページだ。</p> <ul> <li>普段よく見るサイト</li> <li>最近気になるサイト</li> <li>常用しているアプリ/ガジェット</li> <li>最近手がけた仕事</li> </ul> <h2 id="情報収集における効率化をテーマに集めてみた">情報収集における効率化をテーマに集めてみた</h2> <p>以下、6つ紹介したうちの1〜3つめのものだ。</p> <ul> <li><a href="https://kindle.amazon.co.jp/your_highlights">Kindle Your Highight</a> <ul> <li>Kindleで自分がハイライトした一覧を見れるやつ</li> </ul></li> <li><a href="http://reader.livedoor.com/reader/">Live Dowango Reader</a> <ul> <li>RSSリーダー</li> </ul></li> <li><a href="https://github.com/trending/">Github Trending</a> <ul> <li>Githubでホットなやつ一覧</li> </ul></li> </ul> <p>ふだんの「今月のブックマーク」だと、ブレーンらしいオシャレでかっこいいサイトが掲載されている。 が、僕はエンジニアなのでオシャレ目線よりも、効率化・自動化まわりのほうが差別化できる。ブレーン読者層には響かないかもしれないが、エンジニア寄りな目線を提示しようと思った。</p> <h2 id="紙面に「unko」という文字が2回登場する">紙面に「unko」という文字が2回登場する</h2> <p>これはどうしようもないことだが、自分のサイトのドメインがunko.meなので、紙面に「unko」という文字が2回登場することになった。</p> <figure class='figs'> <img alt='unko.me' src='/img/posts/2016-12-12-brain/profile.jpg'> <figcaption>unko.me と attaka-i.unko.me</figcaption> </figure> <h2 id="くわしい情報は紙面で！">くわしい情報は紙面で！</h2> <p>気になるひとはぜひ手にとって見てください！</p> <iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=kpd-22&o=9&p=8&l=as4&m=amazon&f=ifr&ref=as_ss_li_til&asins=B01MG43LZI&linkId=7265d1faf4a099ea88f7f6611eac082f"></iframe> http://attaka-i.unko.me/2015/01/10/playback-2014.html 2015-01-10T00:00:00+09:00 2016-12-11T23:12:18+09:00 katapad <h2 id="わりと前のめり気味にいろいろやってた2014年">わりと前のめり気味にいろいろやってた2014年</h2> <p>年を越してしまったけど、ちょっと振り返ってみようかなあ。</p> <h2 id="2014年1月-toyotown-cars">2014年1月 TOYOTOWN CARS</h2> <p>TOYOTOWN でクルマをオシャレにわかりやすく説明するページを作っていた。</p> <ul> <li><a href="http://www.toyotown.jp/cars/voxy/">TOYOTOWN VOXY</a></li> <li><a href="http://www.toyotown.jp/cars/noah/">TOYOTOWN NOAH</a></li> <li><a href="http://www.toyotown.jp/cars/sai/">TOYOTOWN SAI</a></li> </ul> <p>TOYOTOWNではだいたいのページを、モダンPC+iPad用、スマホ用、IE8以下用の3タイプ作っている。</p> <p>このころ作成したVOXY, NOAH, SAIのページでは、PC版Video要素の扱いに苦労した気がする。スマホでもコマアニメが見れるようにmov→コマアニメ用スプライトシート作成コマンドをつくったりしていた。</p> <figure class='figs'> <img src='/img/posts/2015-01-10/voxy1.gif'> <img src='/img/posts/2015-01-10/voxy2.gif'> </figure> <h2 id="2014年2月-yahoo!-japan-search-for-3.11">2014年2月 Yahoo! JAPAN Search for 3.11</h2> <ul> <li><a href="http://promo.search.yahoo.co.jp/searchfor311/">3.11、検索は応援になる。 | Help Tohoku. Search &ldquo;3.11&rdquo;. - Yahoo!検索</a></li> <li><a href="http://katapad.com/wp/2014/03/11/yahoo311/">作ったときの解説記事</a></li> </ul> <p>Flashビジュアライザー担当。非常にタイトなスケジュールかつ「どうビジュアライズするか？」という着地点が見えなかったのだけど、よくできた。ビジュアライズとかビッグデータとかって、勘所がすんげーいるんだなあということが身にしみてわかった。</p> <iframe class='iframeFix' width="776" height="436" src="//www.youtube.com/embed/46B1ukcXLb0" frameborder="0" allowfullscreen></iframe> <p>その「勘所」なんだけど</p> <ul> <li>データから優先順位を見つける</li> <li>データから人間ぽさを見つけて表現する</li> </ul> <p>というところ。後者は「人間が関わったデータ」のときに有効。人間が行動したデータなので「人間ぽさ」が見えると、ビジュアライズがいきいきとしリアリティが出る。</p> <p>ありがたいことに広告賞もいくつか頂いた。「自分が作った！」と、きちんと言えるもので初めての賞だったので、うれしかった。</p> <h2 id="2014年3〜5月-passo-amida-drive">2014年3〜5月 PASSO AMIDA DRIVE</h2> <ul> <li><a href="http://www.toyotown.jp/amida-drive/">PASSO AMIDA DRIVE | TOYOTOWN トヨタウン</a></li> </ul> <p>3Dキャラになったドラえもん+新しくなったPASSO12台であみだくじするというコンテンツ。4/24ロンチ。その後5月下旬までイベント開催。フロントの実装担当。CreateJSなど。超頑張って実装してた。</p> <figure class='figs'> <img src='/img/posts/2015-01-10/amida1.gif'> </figure> <p>TOPページのアニメーションは「これがゲーム寄りの楽しいコンテンツである」ということを一発で伝えるためにつけた。</p> <figure class='figs'> <img src='/img/posts/2015-01-10/amida3.gif'> </figure> <p>ゲーム画面はCreateJSでレンダリングエンジン作ってた。いま見るとdrawcall類をもっと減らさないといけなかったなあと思ったりしている。</p> <p>それ以外でHRT的なところでうまくいかないこともあり、悩む。<a href="http://www.oreilly.co.jp/books/9784873116303/">Team Geek</a> だったっけ。この案件のあとにすこし読んだ。謙虚・尊敬・信頼、なにもしてなかったわ〜。</p> <h2 id="2014年5月-スクーでしゃべる">2014年5月 スクーでしゃべる</h2> <p><strong>「超絶UXを実現したい！小規模Web制作会社でもフロントエンドのスキルを磨く方法と実践」</strong><br> というタイトルでやらせてもらいました。</p> <ul> <li><a href="https://schoo.jp/class/703">根性論と精神論編</a></li> <li><a href="https://schoo.jp/class/704">実践編</a></li> </ul> <p>そのへんのブログやフロントエンド界隈で語られている内容は、大企業でしか通用しない系のことであふれているので、私たちのような小規模な会社でどうすんの？っていうところをしゃべった。</p> <p>伝わるようにしゃべる、というものがいかにむずかしいのかっていうのがよくわかった。楽しくできてよかった。また機会があればやりたいかも。</p> <h2 id="2014年5月-しずかったー">2014年5月 しずかったー</h2> <ul> <li><a href="http://www.toyotown.jp/sizukatter/">しずかったー | TOYOTOWN トヨタウン</a></li> </ul> <p>ランディングページと初期の技術的な課題の解決案を1個出した。表示速度をあげるようにちょこちょこ調整していた。たぶん、表示速度で数%くらいのダウンロード数に貢献してるはず！</p> <h2 id="2014年6〜7月-axe-world-peace-maker">2014年6〜7月 AXE World Peace Maker</h2> <ul> <li><a href="http://campaign.axeeffect.jp/wpm/">AXE | WORLD PEACE MAKER</a></li> </ul> <p>AXEの「<a href="https://www.youtube.com/watch?v=63b4O_2HCYM">Make Love, Not War</a>」な、地雷を除去して愛を与えるマインスイーパーコンテンツ。スマホ実装担当。AngularでSPAにした。</p> <p>ゲーム部分もDOMでやって、それなりに安定さすようにしてた。ちょっとDOM生成が重いけど、それ以外のとこはSPAってことで速い。 なんどもプレイしてもらうっていう目標があったので、それに合わせてた。</p> <figure class='figs'> <img src='/img/posts/2015-01-10/axe.gif'> </figure> <p>あと、自分のネガティブなツイートを地雷にして遊ぶモードがある。 <a href="http://campaign.axeeffect.jp/wpm/s/g/katapad_2/g">おれのアルマゲドン級のネガティブステージはこちら</a>。</p> <h2 id="2014年8〜10月">2014年8〜10月</h2> <p>2015年内リリース予定のなにかを作っていた。難易度が高くて、かなり苦労した。このころやっとjsのpromiseパターンをまともに使えるようになる。</p> <h2 id="2014年11〜12月-toyotown-priusαnta-プリウサンタ---すごいプレゼント交換会">2014年11〜12月 TOYOTOWN PRIUSαNTA プリウサンタ - すごいプレゼント交換会</h2> <p><a href="http://www.toyotown.jp/xmas/">PRIUSαNTA プリウサンタ - すごいプレゼント交換会 | TOYOTOWN トヨタウン</a></p> <p>12/8ロンチ。大プレゼント交換会。プレゼントがあたるとAmazonギフト券がもらえる。</p> <p>AngularでSPA。こちらもタイトだったので、かなりワークフローを改善し効率よく仕上げた。効率化のおかげでアニメーションをかなりいろんなところに入れれるようになった。</p> <figure class='figs'> <img src='/img/posts/2015-01-10/xmas1.gif'> </figure> <h2 id="環境">環境</h2> <ul> <li>こどもが1歳になった</li> <li>2月に大阪→東京に引っ越した</li> </ul> <p>とかで、2013年とはずいぶん変化があった。</p> <h2 id="総括">総括</h2> <h3 id="9割、おもしろ案件にアサイン">9割、おもしろ案件にアサイン</h3> <p>こうやって振り返ってみると、よい案件にアサインし続けてもらってる感がすごいある。ありがたいことに9割くらいはおもしろ案件かつ人がいっぱいくるコンテンツだった。そのぶん、プレッシャーに感じて「ああヤバい、これ、できるんかなあ？」と思うこともたくさんあった。</p> <h3 id="スマホのおもしろコンテンツ実装はなんとなく極まってきた">スマホのおもしろコンテンツ実装はなんとなく極まってきた</h3> <p>タイトなスケジュールで、APIを同時並行で作りつつも、モック的なところからロンチまで、ガーッと作りながらも安定して作る手法をある程度確立できた感がある。</p> <ul> <li>無駄なことをしない</li> <li>無駄と思うことをきちんと見極める</li> </ul> <p>というところをきちんと使いこなせるようになった気がする。</p> <p>たとえば、Androidは絶対にすべての端末でおなじように動くことはない。世界にひとつだけの花がいっぱいある。そこにこだわってたら、おもしろいことはなにもできなくなるし、優先順位を見誤ってしまう。</p> <h2 id="2015年は">2015年は</h2> <ul> <li>HRT的なところをもっとがんばる</li> <li>クリエイティブ系なところをかじる</li> <li>IoT、ビジュアライズ、センシング系とか熱そうなとこを勉強する</li> <li>WebGLやる</li> </ul> <p>みたいなところかなあ。そろそろスマホ実装以外のところでも価値を出せるようにせねば…。</p> http://attaka-i.unko.me/2014/08/21/hello-world.html 2014-08-21T00:00:00+09:00 2014-08-21T02:36:36+09:00 katapad <h2 id="attaka-i.unko.me">attaka-i.unko.me</h2> <p>というサブドメインにしました。</p> <p>ホットな話題を地獄の炎に乗せて、あったか〜い気持ちで伝えようとおもいます！</p> <h2 id="なぜブログを変更したのか">なぜブログを変更したのか</h2> <ul> <li><a href="http://jigoku-no.tumblr.com">Tumblrでやってたほう</a>は、クッソ重いのとレイアウト変更が超絶大変</li> <li><a href="http://katapad.com/wp/">Wordpressでやってたほう</a>は、スパムくるし、Wordpressのメンテがめんどくさい。</li> <li>Markdownで書いて、さらりと公開したい。 <ul> <li>Qiitaもあるし、本質的にはBlogは不要になっている</li> </ul></li> </ul> <p>という理由です。</p> <p><a href="http://middlemanapp.com/jp/basics/blogging/">Middleman-blog</a>でやってます！</p> <h2 id="なにを書くのか-→-広告と技術とポエムを書きます。">なにを書くのか → 広告と技術とポエムを書きます。</h2> <p>きらくにポエムを書こうかなとおもいます。もうおっさんなので、自分の意見でも書けたらなあとおもいます。</p> <p>とくに、広告表現におけるWeb開発は、まったくもってキレイ事では済まない領域です。だから、あまりブログとかでも流通せず、エンタープライズ系とかスタートアップ系の話題に塗りつぶされてしまってます。</p> <p>なんかそんなところから、広告表現ならではのオモシロ表現とか、クリエイティブ〜な表現にいたるにはどうすればいいのか、みたいな自分の考えをまとめていこうかなと思っております。</p>