Random Digit Dialogue

f:id:unibainfo:20180518114716j:plain

Random Digit Dialogue

サイバネティック・セレンディピティ・パーティー

概要

RDD (Random Digit Dialogue) は、2017年に新しくオープンした THE OPEN UNIBA (ジ・オープン・ユニバ) で開催されるサイバネティック・セレンディピティ・パーティー。 20世紀の電話アンケート手法 Random Digit Dialing (無作為番号ダイアル) から名前をもらい、インターネット的な偶然の出会の場としてスタートした RDD 。たくさんの出会いと対話、発見があった2017年の全12回 + α の日程を終え、最終回を迎えました。

f:id:unibainfo:20180518114945j:plain

特徴

最高にナウいビデオチャットツール「appear.in」を活用した双方向参加型ストリーミング番組です。

  • 入場料: 無料
  • 会場: appear.in THE OPEN UNIBA room (入室は12名まで)
  • 住所: https://appear.in/rdd
  • YouTubeLive、FacebookLiveでも同時配信

ビジュアル

f:id:unibainfo:20180518114849j:plainf:id:unibainfo:20180518114846j:plainf:id:unibainfo:20180518114839j:plain

GRAIN noir @gllm による毎回趣向を凝らした、ブラウザで操作できるインタラクティブ・コラージュ・アートワーク。http://rdd.tokyo/ にアクセスすれば、3D空間で自由に操作することができます。

番組内企画

f:id:unibainfo:20180518115041j:plain
ユニバクルー @koide @nulltask によるアシッドなDJプレイ&ライブ (#05)

f:id:unibainfo:20180518115129j:plainf:id:unibainfo:20180518115132j:plain

GRAIN noir & moxusによるユニット「ecco」ライブパフォーマンス(#08)

f:id:unibainfo:20180518115212j:plainf:id:unibainfo:20180518115215j:plain

カレーvsペペロンチーノ料理対決 (#05,#06)

f:id:unibainfo:20180518124121j:plain
ユニバの働き方に関するトーク by @rei (#05)

f:id:unibainfo:20180518124204j:plain
ユニバ株式会社に発注してみたら○○○○○して草wwww(仮) (#06)

f:id:unibainfo:20180518124302j:plain
最近気になる・実践中の技術紹介 (#08)

f:id:unibainfo:20180518124336j:plain
ゲストにRYDENの井上社長を招いてアレヤコレヤ喋ってもらったり (#08)

f:id:unibainfo:20180518124403j:plainf:id:unibainfo:20180518124411j:plain

オーストリアリンツで開催される「ARS ELECTRONICA」現地で視察中のメンバーとオンラインで気になった作品をリアルタイムで紹介 (#09)

f:id:unibainfo:20180518124634j:plainf:id:unibainfo:20180518124640j:plain

初のリアル・スペース・イベントのプレゼンの様子を配信 (#09.1)

f:id:unibainfo:20180518124718j:plainf:id:unibainfo:20180518124722j:plainf:id:unibainfo:20180518124728j:plain

Tanifuji’s Event Info - 気になるイベントを過去・未来問わず紹介

運営コメント

Haruma Kikuchi Haruma Kikuchi

20世紀の電話アンケート手法 Random Digit Dialing (無作為番号ダイアル) から名前をもらい、インターネット的な偶然の出会の場としてスタートした RDD 。まずは1年やってみよう、ということで、紆余曲折ありましたがやりきりました!たくさん (技術的な) 失敗もありましたが、いろんなひととのハプニング的な出会いがあって、充実していました。出演いただいた皆さま、観ていただいた皆さま、ありがとうございました。


Keiichi Tanifuji Keiichi Tanifuji

主に放送ディレクションを担当しました。回を重ねるごとに機材が本格的になっていき、毎回の試行錯誤がそのまま配信のクオリティに直結する、シビアかつエキサイティングな試みとなりました。後半は出演の機会も増えましたが「画に乗っている」感覚を維持しながら会話をつなげていくのは難しく、今後ともやっていきたい所存です。


Guillaume Piccarreta

2017年には毎月オンラインイベントを開催することに決めました、メイン ビジュアルとデザインを担当していました。各グラフィックのメインのテーマとカラーベースを選択したら、同じパターンを繰り返すことで、ランダム性と対話のやりとりの考え方を断ちました。インタラクティブな3Dアプリケーションからグラフィックを作成されました。このアプリケーションは、ビジュアルフレームをブラウザで直接フレームごとにエクスポートできるので、「デジタルコラージュ」と呼ばれます。毎月作品の細部を細かくつくったら、年末にはrdd.tokyoのウェブサイトでコレクションを見るのは楽しいことでした。


Satoshi Mochizuki Satoshi Mochizuki

サウンド、動画編集を担当しました 久しぶりに触る大きめのミキサーに興奮しつつ、基本を思い出しながらの作業はとても楽しいものでした apeear.in、配信、運営会場へ音を返すためのルーティングはまるでパズルのようで色々と苦労しました 動画の編集は、「30秒」という制約を設け1時間(最初の頃は2時間を)30秒に収める。 1/60に圧縮する工程は0.1秒をいろんな場面から削っていく「チリツモ」戦法を駆使し、本職の方々の苦労を感じました。 9.1では実際の会場の様子を撮影録音し、記録として残せたことはとても大きな功績だと思っています 社内の勉強会などの記録がグレードアップできそうでとても嬉しいです!


Noriyuki Shimizu Noriyuki Shimizu

ひたすらにテロップやらワイプやらポン出しをしていました。

apeear.inの画面をBlackmagicDesignのハードウェアでキャプチャできたのはなかなか良い経験でした。 また回を重ねるごとに進行や機材のアップデートが入り、最適化や簡略化なども行うことができました。 これは現場などでも十分に活かせる内容だったなと感じています。お仕事お待ちしております。

f:id:unibainfo:20180518125404p:plain

まともに書いた配線図。

久々にVJソフトを起動したり映像やらを作ったりできたのも良い思い出です。

あと放映には関係ないところでカレー🍛を作りましたが、不評だったのでリベンジしたいと思ってます。


Takahiro Yasui Takahiro Yasui

今では個人配信が気軽にできる時代となりましたが、画面を共有したり複数の人に配信する場合には高いマシンスペックや太いネットワーク帯域が要求されます。実際にやってみると普段何気なくみている配信コンテンツも環境、設備、段取り、構成作りには多くの人の気配りや努力で成り立っていることに気付かされます。

RDDではCNCフライスによる基板切削実演やArs Electronica現地レポート、後半はFacebookTwitterによる広報を担当しましたが、これらを通じてコンテンツの見せ方について勉強できたように感じます。

動画配信には電波放送とはまた違った課題や可能性があります。今後も技術の発達で多くの人が動画配信に関わることで新たな楽しみや可能性がどんどん広がっていってほしいなと思います。🌱

CREDITS

Client: UNIBA Inc.
Development: Haruma Kikuchi, Keiichi Tanifuji, Noriyuki Shimizu, Satoshi Mochizuki, Guillaume Piccarreta, Takahiro Yasui

ONE TOKYO APP

f:id:unibainfo:20180517193123j:plain

onetokyo-app.org

ONE TOKYOスマートフォンアプリケーション

iOS (App Store)

Android (Google Play)

概要

ランニングの記録と共有が可能なスマートフォンアプリケーション。GPSの位置情報をもとに走行位置、距離、ペースを算出して表示する。記録はサーバに保存することでいつでも確認できるほか、ユーザ同士で共有したり ランキング形式で競い合える機能が盛り込まれている。iOS版とAndroid版のアプリ開発、ランを記録管理するサーバ構築運用、毎月開催のマンスリーバーチャルマラソンの運営サポートをユニバが担当。

システム構成

f:id:unibainfo:20180517193111p:plain

開発者コメント

Keiichi Tanifuji Keiichi Tanifuji

本プロジェクトには2017年4月より各方向との窓口役として参加しました。毎月開催される大会の運用・Android版アプリの開発・ルール改定に伴うシステム改修・管理画面のメンテナンスなど様々な計画が並行して進むため、社内外に向けた能動的なスケジューリングとタスク管理の重要性が一層高まり、確実な進行と効率化を常に心がけました。

本年度で印象的だったのは、Android版アプリの動作検証を行うフェーズです。機能や状態ごとのバリエーションを含めると80超の画面が存在する規模のアプリをデバッグする経験は初めてで、画面設計書・動作指示書・画面遷移図など一連の資料を用意した上で、それらを開発の進行に合わせてアップデートしながら、外部のデバッグ専門業者と都度コミュニケーションを取って進めるのは、スピードと精密さが同時に求められるという意味で、想像以上にデリケートな進行が求められました。

最終的には開発チーム・デザインチームの協力のおかげで、アプリの根幹であるランの記録と閲覧に関する機能は大部分を網羅できました。しかしながら「実際に長距離のランを行うと挙動が重くなる」という現象の修正をリリース後に行うなど、ユーザ視点のテストが若干不足していたのが反省点で、"いまは誰の視点で動作をチェックしているのか" という、一種のコンテクスト・スイッチのスキルの習得が今後の課題として浮上しました。そういった部分も含め、常にチーム内でフィードバックを送り合い、それを改善する動きを継続していきたいと思います。


Haruma Kikuchi Haruma Kikuchi

ONE TOKYO APP iOS 版の UI は2014年にデザインしたものですが、今回ほぼ同様の機能を持った Android 版のために、Material Desgin のマナーで過去のデザインを翻訳する、という仕事をしました。

iOS 版のデザインを制作していた2014年は、 前年に iOS 7 がリリースされ、iOS 6 までのような立体感を多用した UI からフラットな UI へインターフェイスパラダイムが変化しつつあるタイミングでした。当時としてはフラットが当たり前になっても通用するデザインになるよう頑張りましたが、そのデザインを2017年のいま、直接 Material Design に翻訳しようとすると、曖昧さや、冗長な表現がかなり見つかりました。 そもそも、流行 (ブラーの深さやアイコンのフォルムやブロックの境界の処理など) も変わっていて、機能的には移植でも修正すべき点は多くありました。

それを再構築してクリアにしていく作業は、視覚的な質を追求しているというよりも、よりメタな用語や UX のクリアさを求めて作業をして、それに引っぱられて目に見える要素も整っていくような感覚でした。逆に、その視点で iOS 版をみると、アップデートを早くやりたいという気持ちにもなりますが…。

また今回は、デザインデータのバージョン管理を全て Abstract で行いました。この規模の制作 (スクリーン数でいうと60くらい?) で使ったのは初めてでしたが、最高に気持ちがいい…。UI デザインは 3人+αのチームでしたが、互いの平行している作業が Sketch のアートボード上に組み上がっていく感覚は、ようやく GitHub のフローにデザインフローが追いついたなという感じがしました。忙しくなる前に Photoshop から Sketch への移植を進めておいてよかった!! (小出マン松本マンありがとう) もっと膨大な UI パーツのあるプロジェクトもガッツリやれそうです。

最初のリリースから3年が経って、マラソンを愛するランナーの皆さんの気持ちが少しだけわかってきたように思います。ようやく iOSAndroid の両プラットフォームを揃えられたので、さらに楽しんで走っていただけるよう、 UI は透明でシャキッと、大会やメダルはやりがいや楽しさを感じてもらえるように、今後もアップデートしていきたいです。


Yu Koide Yu Koide

今回アプリをデザインするにあたって、Sketch + Abstract + InVision という強力なツールのおかげで作業効率を高めながらデザインすることができました。

Sketch で UI デザイン、InVision でフィードバックや問題点の洗い出し、Abstract でバージョン管理など、作業を進めていくなかで必要なパートを各ツールに落とし込むことによって、デザインに齟齬が起きないような体制を整えられたかと思います。

ただ、色やアイコンなどの決め事に関して、どこかに記録があるわけでもなく、脳内にのみ存在するというふんわりした状態で進んでいってしまい、デザインチーム内でどれが正しいのか混乱してしまう状況も時々発生していました。そういった決め事もしっかりとドキュメントなりデザインファイルなりに残して参照できるように管理していくことが必要だという学びがありました。

また、今回 Atomic Design の思想を導入・実践し、パーツを効率よく使い回せる体制も整えたおかげで、たくさんの画面や状態などのデザインも効率よく制作することができました。 今回得た知見や技術を活かしながら、今後もよりよくアップデートしていければと思います。


Ryo Murayama Ryo Murayama

2014年にリリースされたONE TOKYOもサービス開始から丸3年を経過して、弊社がお手伝いした案件の中でも比較的息の長いサービスとなりました。ONE TOKYOにおけるサーバサイドのミッションは、すでにユーザに使われているアプリの動作を保証しながら継続的な機能追加やリファクタリングのサイクルを回していくことで、サービス成長のための実装面えのテンシャルを維持していく点にあると考えています。

とりわけ今年度は、Android版アプリのリリースはもとより、新しいクラスルールの適用、ウェブサイトのリニューアルなど、節目となるリリースをいくつも経験した年でもありました。幸い大きなトラブルもなく、また順調にユーザ数も増え続けており、ウェブサービスの開発と運用を支える裏方の役割を果たすことができたと感じています。体制面においても新たなメンバーを迎え、よりチームとして組織的な動きができるようになりました。iOS/Android/Webと看板が揃ったONE TOKYOの今後の発展にご期待ください。


Sei Kataoka Sei Kataoka

2014年のiOS版初回リリースからの開発を担当しております。2014年当時は、Swiftが発表・リリースされたタイミングでもあり、初期の段階からiOS版のONE TOKYO APPはSwiftで開発を進めてきました。

これまで、Swift自体やCocoa Touch APIのアップデートも何度かありましたし、それにつられてサードパーティのライブラリも栄枯盛衰を繰り返し、FRPフレームワークはReactiveCocoaからRxSwiftへ、データベースはSQLiteやCoreDataを使ったものからRealmへ、HTTPネットワークライブラリはAFNetworkからAlamofireへとトレンドが目まぐるしく変わっていく中で、取り込めた技術もあれば、泣く泣く対応を諦めた技術もあります。また、開発からテスト、リリースまでの作業を効率良く、かつミスなく進めるには、多くの部分を自動化する必要がありました。

現在では、BitriseとFastlane、GitHubを組み合わせて、テスト、関係者へのデバッグ版の配信、iTunes Store申請用のビルド作成などを自動化しています。今後1年はiPhone X対応やデザインのアップデートも含めて、「見た目もソースコードもきれいに」をスローガンに、引き続き改善や新機能のアップデートをリリースしていきたいと思います。


Seiya Konno Seiya Konno

今回 Android 版の開発を担当した今野です。2014 年に iPhone 版をリリースする際には、インフラの構築及びサーバサイドの実装とテクニカルディレクションを担当していました。これまでは「なぜ iPhone しかないのか」というユーザさまの問い合わせをいくつかいただいておりましたが、それから丁度 3 年後、Android 版をリリースし、期待に応えることができてよかったと思います。

せっかくなので、開発の裏話をいくつか。弊社ではこれまで、単機能な Android アプリの開発の経験はありましたが、今回のような中規模以上のアプリの設計・実装については今回が初めてでした。また複数人でアプリの様々な機能を並行して開発することも初めてでした。

中規模以上の構造物を何人かで並行して開発する際、重要になるのはアーキテクチャの選定です。特に Android については歴史が 10 年以上あるため、時代によって採用されるアプローチが全く異なったりしていました。時代遅れなアプローチを採用してしまうと、アプリの改修が難しくなり、中長期的に見たときに、ユーザの不利益となってしまいます。アプローチがモダンかそうでないかはリサーチ時に特に注意しました。いくつかのオープンソースAndroid アプリの事例を参考しましたが、特にDroidKaigiのアプリのソースコードが参考になりました。この場を借りて謝辞を申し上げます。

そういった観点で、大まかにデータ層・ドメイン層・プレゼンテーション層といった実装のレイヤリングを行い、プレゼンテーション層では MVVM アーキテクチャを採用し、DataBinding と ViewModel を連携させる方向で実装を進めていきました。データ層からプレゼンテーション層へデータを受け渡す際には RxJava の Observable をフルに活用し、データの変化に合わせてリアクティブに UI が変わるような設計にしました。これにより、チーム内でたくさんの学習コストを支払わなければならず、開発の初期ではスピードが思うように出ず苦労しましたが、今から当初を振り返ると、最初に方針を決められて本当に良かったと実感しています。これらの設計なしにはクオリティを担保することができなかったと思いますし、開発をスケールさせることはできなかったと思います。

開発の初期には Google I/O にて Kotlin のオフィシャルサポートが発表されたり (当初開発言語として Kotlin も検討しましたが、Android 開発および Java に不慣れなチームで Kotlin を採用するのはリスクと判断し今回の開発では Java を採用しています)、開発後期に Android Architecture Component の正式版がリリースされたりち Android 開発事情の先端は変わってきています。今後もそういった波に乗り遅れないよう技術的なアップデートをしつつ、サービスを開発していきたいです。

技術的な内容にだいぶ偏ってしまいましたが、私からは以上です。


Jun Mori Jun Mori

普段の業務では Web のフロントエンドエンジニアとして過ごしている中、今回初めてアプリのフロントエンドの大半を実装する。ということに挑戦しました。 結果としては、なんとかなった。ということで、全国の Web フロントエンジニアの方には Android 開発に積極的に関わっていけるということが証明されました。

具体的にはどんな役割だったか?という話ですが

  • レイアウトの実装 (xml)
  • レイアウトのインタラクションの繋ぎなど (ビューモデルの中身)
  • アクティビティ、フラグメントの初期化 (リサイクルビューとか Menu とか)
  • カスタムビューの実装(今回は Map 周り)

という感じです。 今野さんが主にベースを実装する中で、どちらがどこまで実装をするかという線引きが重要になるわけですが、 今回は MVVM というモデルに則った実装になっていたので、線引きが非常にやりやすかったのが印象的です。

デザインに関しては、 Web より楽だったかもしれない。 というのも、マテリアルデザインに則った構成だったので(とはいえここはデザイナーの実力が大きいわけですが)、 あとはそれを具体化するようなクラス設計を行えば残りは頭を使わずにコピー&ペーストで行ける部分が多いです。 最初は頭の中でレイアウトを分解するのに一苦労しましたが、慣れると Web と変わらないスピード感で実装できました。

アニメーションなど、素の実装が面倒そうなとこは Lottie というライブラリに丸投げしました。 本来、これは Vector のアニメーションをするためのライブラリですが、今回は連番画像をアニメーションさせるために用いてます。 AE から書き出したものをそのまま流用できるため、社内の3D担当の太田くんと協力してメダルのアニメーションなどを製作しました(私は流し込むだけ)。 そういう意味では Lottie のおかげで随分楽ができたなぁという感じです。リリース直前まで差し替えが容易という点でもおすすめです。 ただ一点。ちょっと重いなぁ(スクロールが入る画面とかは特に)という印象なので、ケースバイケースで使っていきたいですね。

ハァ〜疲れましたわ〜


Takahiro Yasui Takahiro Yasui

Androidアプリのラン機能の実装を主に担当しました。この部分はアプリの根幹となる部分であるため、アプリとしての強度を高めることを意識して設計思想の練り込みと細部の作り込みに力を注ぎました。

機能としてはGPSから位置情報を取得してランの軌跡をマップ上に表示させるという単純なものですが、スマートフォンというバッテリー駆動前提で、かつ限られたメモリ空間の中でひとつのアプリがリソースを専有して動き続けるためにはOSからの厳しい制限を受けます。そのためバックグラウンドで長時間動き続ける処理の実装にはとても苦労しました。その他にもAndroid特有のActivityやServiceのライフサクル、パーミッションの扱いにも注意を払う必要があり、リリース版に至るまでにこの部分は3回ほど大幅なリファクタリングを行ってあります(私の技術力不足...)。

大変だった部分も多々ありましたが、今回のAndroidアプリ開発ではチーム開発による自分の想像を超えてモノが出来上がる醍醐味とRxJavaを使ったリアクティブプログラミングの思想に触れられ、とても良い体験ができたなぁと思います。🌱

CREDITS

Client: Tokyo Marathon Foundation
Creative Agency: DENTSU INC., DENTSU SPORTS PARTNERS INC.
Project Management: Keiichi Tanifuji
Art Direction / Designer: Haruma Kikuchi, Yu Koide, Kohji Matsumoto, Tetsuro Shimura, Genki Ota
Front-end Development: Jun Mori
Back-end Development: Ryo Murayama, Satoshi Mochizuki
iOS Development: Sei Kataoka
Android Development: Seiya Konno, Jun Mori, Takahiro Yasui

SENSING SHOES

f:id:unibainfo:20180517190800p:plain

www.shiseido.co.jp

blueover | 【資生堂】bluoverコラボ商品の展示

ニオイセンサ搭載シューズ

概要

シューズ内に搭載されたニオイセンサが足のニオイを検出し、スマートフォンと無線通信を行い数値をLevelに応じて視覚化するデバイス。センサシステムとAndroidスマートフォンアプリ(Unity)の制作をユニバが担当。

開発者コメント

Takahiro Yasui Takahiro Yasui

一言でニオイといっても様々なニオイがありますが、ニオイをセンシングする上でまずヒトの足のニオイをどのように検出するところから考えました。足のニオイの主な成分は「イソ吉草酸(イソキッソウサン)」で 汗や皮脂などを栄養にして繁殖する雑菌が排出するものらしく、イソ吉草酸そのものをダイレクトに検出するセンサは調べたところ入手はできそうになかったため様々なガスセンサ、臭気センサ、Air Quality Sensorを試して 足のニオイに一番よく反応するセンサを使用しました。さらに、シューズ内の蒸れはニオイの元となる要素でもあるため湿度センサも内蔵し、臭気と湿度を複合した値をニオイの値として視覚化するようにしてあります。

f:id:unibainfo:20180517190811j:plain

センサはシューズ内に収めるための小型化と、ニオイを検出しやすい位置に調整できるよう制御基板とセンサを分離させ、制御基板も小型化と安定化のためCNCフライス盤による基板切削を行いました。 CNCによる基板制作は実験で何回か行っていましたが、今回初めての実践投入でなかなかエキサイティングしました。次回は両面切削にもチャレンジしてみたいところです。

f:id:unibainfo:20180517190815j:plain

制御基板についてはBLE(Bluetooth Low Energy)チップを載せてスマートフォンと通信できるようにしてあります。足のニオイは片足だけで取れますが、そうするともう片足のシューズはちょっと寂しい感じに なってしまうためセンサを内蔵しない代わりにBluetooth Mesh Networkを使って両足と連携しながらLEDが点灯する仕組みにしました。

おまけの気持ちで付けたこの機能ですが、実際に履いて使ってみるとひと目で計測中であることがLEDの点滅でわかるため意外と実用的であることがわかりました。普段何気なくやっていたり忘れてしまったりしてしますが、作って手に取って触って使ってみることで得られるフィードバックの大切さを改めて実感する制作でした。

f:id:unibainfo:20180517190822j:plainf:id:unibainfo:20180517190827j:plainf:id:unibainfo:20180517190831j:plainf:id:unibainfo:20180517190834j:plainf:id:unibainfo:20180517190841j:plainf:id:unibainfo:20180517190845j:plainf:id:unibainfo:20180517190849j:plainf:id:unibainfo:20180517190854j:plainf:id:unibainfo:20180517190858j:plainf:id:unibainfo:20180517190901p:plainf:id:unibainfo:20180517190905p:plainf:id:unibainfo:20180517190909p:plain

CREDITS

Developer: Rei Kawai, Genki Ota, Takahiro Yasui

NHKさま スマートフォン360°映像TV放送連動WEBシステム

f:id:unibainfo:20180517185842g:plain

概要

NHK BS1スペシャル : 360°ドキュメンタリー「激流に挑む 〜密着! カヌー選手 羽根田卓也〜」システム制作。 NHK BS1スペシャル : 360°ドキュメンタリー「知られざるトランプワールド」システム制作。

NHK BS1で二度に渡って放送された360°ドキュメンタリー企画の特設コンテンツを開発しました。 番組の詳細については、下記の各番組公式サイトをご覧下さい。

これらの番組では、通常の放送用カメラに加えて360°カメラでも取材中の様子を撮影しており、放送中、特定のタイミングで特設サイトにアクセスすると、テレビで放送している角度の映像に加え撮影時に周辺がどんな様子であったのかを見回せる、という新たな試みがなされました。

我々は、その企画の Web 方面の柱となる、特設サイト上での360°動画配信システムの開発を担当し、もう一方の柱である放送での内容と時間的にシンクロさせてコンテンツを提供する事で、新しい体験を作るお手伝いをさせて頂きました。

実際の放送は終了してしまいましたが、羽根田選手の番組HP では、スマートフォン限定で短い時間ながらどういったコンテンツだったのか体験できるサンプルも公開されていますので、そちらも参考までにご覧下さい。本当は、放送と連動している状態でご覧頂き、普段放送されている内容の、カメラの死角に迫れる自由度を体験頂けると良かったのですが…。また次回の企画があるかも知れませんので、そちらをぜひお待ち下さい。

開発者コメント

Rei Kawai Rei Kawai

企画を行う番組制作の皆様方と連携し、弊社内での開発物のディレクションを行いました。

番組の企画面でのチャレンジをより良い結果に繋げるために、実験的な開発からスタートし、放送連動が実現するまでにあった課題は

  • 360度にマッピングされた動画のスムーズな再生
  • 取り扱いやすいビデオフォーマットの選定
  • 画質面での向上と、ネットワーク帯域とのバランス
  • 放送とのタイミングの確実な同期
  • 360度を眺めつつ、TV放送ともバッティングしないUI
  • 万一、放送の編成が変更されても対応できる柔軟性
  • 各種環境への可能な限りの対応

と多岐に渡るものでした。

それぞれがトレードオフ的な事になる条件も多く、例えば、配信時のデータ転送のスムーズさと画質面での向上を図る部分などでは、それぞれ適切な落としどころにバランスさせていく必要があったり、あるいはUI面などどういったUI設計をすると、放送を見ながらスマートフォンの画面内で展開されるコンテンツと双方を楽しんで頂けるかという事を考えながら、各所に調整をしたり技術的な可能性を探ってもらったりした日々が思い出されます。


Ryo Murayama Ryo Murayama

動画を全天球マッピング用のモジュールに転送するための動画プレーヤーとして動作するモジュールの設計と実装を担当しました。

最も気をつかったのは、TV放送との同期を確実に行うための仕組み作りです。単に決められたタイミングで動画の再生をキックするだけでは、TVで放映されている映像とスマホ上の映像とのずれが少しずつ広がってきてしまいます。動画のロードやデコード処理の遅延に起因するずれが一定範囲内におさまるよう、再生位置をこまめにコントロールする必要がありました。

利用可能な動画形式のバリエーションが多岐に渡る点も考慮すべきポイントです。スマホで見たときの画質の向上はプロトタイピングを進める中で見えてきた大きな課題で、土壇場で利用する動画のコーデックが変更になることも予想されました。実際、第1回放送ではMPEG-1、第2回放送ではH.264形式の動画を再生しましたが、それぞれ動画のデコードに利用するライブラリは異なります。ライブラリのふるまいの差異をきちんと隠蔽して、アプリケーションから見たときに同じAPIとして利用できるよう設計・実装することで、仕様変更に耐えられるような仕組みを作る点に気をつけました。


Noriyuki Shimizu Noriyuki Shimizu

おもてなし感や見た目を整えるところを担当しました。

今回の制作では没入感を表現するために、スマートフォンでの再生と放送とに齟齬がない様なUI上の調整を行いました。 また技術的な学びが多く、特に私が担当した範囲ではiOS 11のWebViewにおいて「画面サイズの取得がうまくできない」という挙動が印象的でした。 ぜひ提案や、次回の企画などの制作で活かしたいと思います。

CREDITS

Client: NHK
Development: Rei Kawai, Guillaume Piccarreta, Noriyuki Shimizu, Sei Kataoka, Ryo Murayama, Seiya Konno, Koichiro Mori

SKY TREK フライトシミュレータ

f:id:unibainfo:20180517184931j:plain

skytrek.co.jp

日本初の会員制航空機チャーターサービスSKY TREKの経路検索システム構築

開発者コメント

Keiichi Tanifuji Keiichi Tanifuji

日本初の会員制小型航空機チャーターサービス・SKY TREKのオフィシャルコンテンツ「フライトシミュレータ」大型アップデートを担当しました。 飛行機を利用した移動といえば、離れた場所の空港から所定の手続きを経て搭乗する、というのが一般的なイメージですが、SKY TREKを利用すれば、国内約100箇所の大小様々な空港から、自由なルートで快適な空の旅をお楽しみ頂けます。

フライトシミュレータでは、そんなSKY TREKのサービスをWebで体験できます。3Dマップ上で好きなルートでバーチャル・フライトを行なったり、AUTO FLIGHTモードでランダムで選ばれる飛行場に次々とフライトしていく様子を楽しめます。 地上の制約から解放された飛行機ならではのスピード感、北から南まであらゆる場所にアクセスできる魅力の一端を感じられるサービスを目指しました。


Haruma Kikuchi Haruma Kikuchi

SKY TREK のサービスの魅力は、小型飛行機に乗って、車や鉄道では考えられないようなスピードで日本中を飛び回れるところだと感じました (実際にはまだ乗っていないのですが) 。 大きなジェット機とは違って、何百キロという距離は、多くの人にとって新幹線などで移動した経験がある距離だと思います。

その距離が数十分でひとっ飛び、という爽快な感覚は、ウェブサイトでも伝えられるのではないかと考えました。また、飛び立つ前に知らない土地にあるたくさんの空港から行き先を選ぶこと、これも、旅先への想像力をかきたてる楽しい体験です。

UI デザインには、その感覚を伝える役割がありました。3D の風景を楽しむことができる、(これまで知らなかった地方空港や外国の空港を含め) いろいろな空港から行き先を自由に選ぶことができる、次の空港までの距離や時間がすぐにわかる、ということにユーザが集中できるように工夫をしました。基本的に画面サイズの制約があるスマートフォンを中心に考えられていますが、PC でも同じように操作できます。

また SKYTREK 社の VI のマナーを踏まえつつ、航空券や計器のイメージを加え、等幅フォントと黒を基調にした合理的な雰囲気で、差をつけることを意図しました。SKY TREK のサービスのアイデンティティそのものとは若干違う、ツールらしい UI の雰囲気が、実際の飛行機の旅に思いをはせることの後押しになるのではないかと思います。

CREDITS

Project Direction: Yota Shiraishi Project Management: Keiichi Tanifuji Design: Haruma Kikuchi Technical Direction: Seiya Konno Front-end Development: Koichiro Mori, Guillaume Piccarreta, Noriyuki Shimizu

あなたもMステ階段デビュー

f:id:unibainfo:20180517183601j:plain

アトリウム1F|テレビ朝日本社|エリア|テレビ朝日・六本木ヒルズ 夏祭り SUMMER STATION|テレビ朝日

テレビ朝日六本木ヒルズ 夏祭り SUMMER STATION あなたもMステ階段デビュー

開発者コメント

Rei Kawai Rei Kawai

テレビ朝日六本木ヒルズ 夏祭り SUMMER STATIONにてご体験頂ける、「あなたもMステ階段デビュー」ジェネーレーターのシステム制作部分を弊社が担当致しました。

お馴染みのテーマソングが流れる中で、テレビ朝日1Fアトリウムに設置された本番のスタジオと同サイズの階段を降りていくと、そこに本番セットさながらの、観客や背景大型LEDビジョンの映像を合成して番組に出演したかのような映像をお楽しみ頂けるようになります。

企画チームの皆様がた、面白いチャレンジの機会を頂きありがとうございました。

f:id:unibainfo:20180517183507j:plainf:id:unibainfo:20180517183510j:plainf:id:unibainfo:20180517183514j:plainf:id:unibainfo:20180517183518j:plainf:id:unibainfo:20180517183522j:plainf:id:unibainfo:20180517183526j:plainf:id:unibainfo:20180517183529j:plainf:id:unibainfo:20180517183638g:plain

CREDITS

Client: テレビ朝日
Agency / Producer: 宮地 成太郎 (DENTSU INC.), 明円 卓 (DENTSU INC.), 真子 千絵美 (DENTSU INC.)
Project Management: Rei Kawai
Frontend Developer: Guillaume Piccarreta, Hideyuki Saito(Freelancer), Koichiro Mori, Noriyuki Shimizu
Backend Developer: Sei Kataoka
Designer: 伊南 智寿(Freelancer)

案件くん3

f:id:unibainfo:20180517181908j:plain

概要

社内で使用している内製プロジェクト管理ツール「案件くん」のリニューアル第3弾

開発者コメント

Ryo Murayama Ryo Murayama

ユニバが日々の業務で利用しているプロジェクトマネジメントツールの新バージョンをリリースしました。

個人的にもっとも重要だと考えている改善点は「マイルストーン」という概念の導入です。プロジェクトのキックオフ時に、チームメンバーは案件くんを見ながらプロジェクトの完了までに必要なマイルストーンを設定し、実現に必要な時間を各人で見積もります。これまではプロジェクト全体の規模ををざっくりと見積もっていたのですが、見積の対象をマイルストーンに分割することで、より正確な将来の忙しさの予測ができるようになりました。また、次のステップまでに求められているアウトプットを事前に想定した見積時間の範囲中で出力する、という意識を習慣づけることができるようになりました。


Satoshi Mochizuki Satoshi Mochizuki

案件くん3は、ユニバの社内で並行するプロジェクトの状況を一覧把握し、どのプロジェクトにユニバのメンバーのうち誰が、どの程度稼働するかを把握するための自社サービスです。 ユニバでは、自分たちの仕事の進め方を自分たちでデザインするということを、以前より行っており、この案件くん3はまさにそれを体現しているプロジェクトです。ユニバの仕事の進め方の特徴的な部分について、案件くんを開発していく上で、自分たちが再認識することなどもありました。


Jun Komatsu Jun Komatsu

案件くん3は、ユニバの社内で並行するプロジェクトの状況を一覧把握し、どのプロジェクトにユニバのメンバーのうち誰が、どの程度稼働するかを把握するための自社サービスです。 ユニバでは、自分たちの仕事の進め方を自分たちでデザインするということを、以前より行っており、この案件くん3はまさにそれを体現しているプロジェクトです。ユニバの仕事の進め方の特徴的な部分について、案件くんを開発していく上で、自分たちが再認識することなどもありました。


f:id:unibainfo:20180517181922p:plain


f:id:unibainfo:20180517181913p:plain


f:id:unibainfo:20180517181917p:plain

CREDITS

Client: UNIBA Inc.
Development: Jun Komatsu, Haruma Kikuchi, Jun Mori, Noriyuki Shimizu, Yu Koide, Ryo Murayama, Seiya Konno, Koichiro Mori, Daichi Sato, Satoshi Mochizuki, Kohji Matsumoto