私達はプレゼンテーションが苦手です． Lightning-Talk 等のプレゼンテーション（以下プレゼン）でプレゼンターは魅力的な発表をしていますが，プレゼン形式は皆一様で形骸化しています．プレゼンはプレゼンターの能力によって魅力度が大きく左右されてしまいます． 私達はプレゼン時の画面遷移のときに発生する「アニメーション」とプレゼンターの「モーション」に着目して課題を抽出しました．現状のプレゼンは予め設定したアニメーションを元にプレゼンターが淡々とプレゼンをしています．プレゼンターが強調したい箇所や緩急をつけたい場所で自分の思い通りに再現することは困難です．そこで私達は「プレゼンターが振る舞うモーション」と「画面遷移時に発生するアニメーション」の関係性に課題解決を目指してアプリケーションを開発しました．
「AniMo」はプレゼンターの「モーション(Motion)」に合わせて投影資料の「アニメーション(Animation)」を変化させることによってこの課題を解決します．スマートフォンの加速度センサからプレゼンターのモーションを検知することで，プレゼンターの振る舞いに同期したスライドアニメーションを実現します． AniMo のアピールポイントは『プレゼンター同期型のプレゼン』です．プレゼンターがプレゼン中に振る舞うモーションに合わせてスライドが遷移する事によって，聴衆者をより惹きつけられる魅力的なプレゼンを実現します． 上記の機能を実現するために，私達は《プレゼンターがリモコンとして使用するモバイルアプリ》と《プレゼン資料を投影する Web アプリ》の２つプロダクトを開発しました． プロダクトの開発では，グループメンバーが得意としているモダンな言語やライブラリー，フレームワークを活用することで，ハッカソンという限られた時間でも洗礼されたデザインや機能を実装したプロダクトを実現しました．
このプロダクトの最大の特徴は「プレゼンター同期型のプレゼン」です．プレゼンターがプレゼン中に振る舞うモーションに合わせてスライドが遷移する事によって，聴衆者をより惹きつけられる魅力的なプレゼンを実現します． 上記の機能を実現するために，私達は《プレゼンターがリモコンとして使用するモバイルアプリ》と《プレゼン資料を投影する Web アプリ》の２つのプロダクトを開発しました． プレゼンター同期型のプレゼンとして以下の 2 つが大きな特徴になっています．
プレゼンターがモバイルアプリでスライドに適用するアニメーションを選択できるため，同じ一つのスライドでも全く異なるアニメーションで画面遷移をすることができます．この機能によってより会場の雰囲気やその場のアドリブに対応したアニメーションで画面が遷移するため，魅力的なプレゼンが実現できます．
同じ一つのスライド，アニメーションでも，プレゼンターが動いたモーションの方向を元にアニメーションが変化します．ユーザーが右に腕を振ればスライドも右側に移動し，腕を左に振ればスライドは左側に移動します．よりプレゼンターの振る舞いに合わせたスライド遷移を実現することによって聴衆者の印象に残るプレゼンを実現します．
- プレゼンターとプレゼン資料の同期によるプレゼンの抑揚と緩急の実現
- 会場の雰囲気・状況に合わせたプレゼンの実現
プレゼンター同期型プレゼンで，よりプレゼンのその場の雰囲気に合わせたプレゼンが実現できます． また，魅力的なプレゼンの一つに「プレゼンターの振る舞い」があります．このプロダクトを活用することでプレゼンターは自然にモーションを意識してプレゼンをします．その結果，プレゼンターは自然に抑揚・緩急のある魅力的なプレゼンを実現できます．
- Mobile App と Web App の 1 対 1 連携
- 今回のプロトタイプでは，通信のセッションまで実装できなかったため，同時に一つのスライドしか操作できません．ウェブソケット通信にセッションを付与することで複数ユーザが利用可能になります．
- スライドの読み込み（Web App)
- 今回のプロトタイプでは， 固定のスライドのインポートしかできませんでした．ユーザのスライドを読み込みできることで，さらに利便性が向上します．
- アニメーション作成機能と開発者専用アプリの開発
- LINE スタンプのように《アニメーションをオリジナルで作成するプラットフォーム》と《作成したアニメーションを公開できるストア》を開発することで，より魅力的なプレゼンを実現できます．また，ビジネスモデルの観点で考えると，収益の見込みとより多くのユーザが AniMo に触れる機会が生まれると考えられます．
- ユーザによるアニメーションのカスタマイズ
- 開発者ストアで購入したアニメーションを Mobile App で選んで自分がプレゼンで利用したいアニメーションを適宜カスタマイズすることが出来るようになると考えます．
- モーションの拡張
- 限定的だったモーション検知の精度を上げることで，斜め方向などより柔軟な操作を可能にします．更に，加速度に合わせてアニメーションの遷移動作を変更できるようにします．それにより，よりダイナミックなアニメーションをスムーズに行うことができるようになります．
- こちら から実際の動作を確認できます。
- 『スライドショーデモ』タブをクリック
- 『プレゼンテーションをはじめる』画面から『はじめる』ボタンを押す
- モバイルコントローラーをインストールしてスライドを操作
$ export PATH=$PATH:/Users/ユーザ名/Library/Android/sdk/platform-tools # Android Studio SDKにパスを通します
$ source ~/.bash_profile # or $ source ~/.zprofile
$ adb install ./AniMoController/app/release/app-release.apk- 画面にある「Connect」をタップして接続が完了したら「Start」をタップ
- アニメーション選択（画面上を指でフリック）
- 上にフリック：アニメーションなし
- 右にフリック：フェードアウト
- 左にフリック：回転
- 下にフリック：ズームアウト
- スライド操作
- スライドを進める：《＋ボタン》を2回押す
- スライドを戻る：《−ボタン》を2回押す
- 方向を指定してアニメーションする：「始点」と「終点」それぞれで《＋ボタン》を1回ずつ押す（例：左から右にフェードアウトをかける場合，モーションのスタート位置で《＋ボタン》を一回押し，左側にモーションしてから《＋ボタン》をもう一度押す）
- その他
- 画面内の《＜》を押すと方向のないフェードアウトのアニメーションで次のスライドに遷移
- 画面内の《＞》を押すと前のスライドに遷移
- 指定したい方向に対して端末を水平に持ってモーションすると，自分の思った方向に遷移しやすいです．（横方向にモーション：スマホ画面が下に向いており，ボリュームボタンが左にある．縦方向：スマホ画面が左に向いており，ボリュームボタンが上にある．）
- Kotlin
- Android
- TypeScript
- node.js
- React
- Ionic
- Docker
- express
- socket.io
- AWS
- Android 端末
- 加速度センサー
- PC （Web）
- 今回は Android 端末で《姿勢の検知》と《端末を振った方向を加速度センサで検知》をしました．重力加速度を用いて姿勢を検知することで，姿勢に合わせて端末を振った方向を検出しました．加速度センサについて担当したメンバーは大学で，センサを用いて実世界に役立つシステムを考える研究室に所属しており，研究室のゼミで得られた知見をもとに事前に既存研究を調査してセンサ検出プログラムを開発しました．
- socket.io を用いた Android アプリケーションと Web アプリケーションとの双方向通信を実現しました．スマートフォンから取得した動作とアニメーションの情報をスライドショーを表示している Web アプリケーションに AWS を介して通知してスライドを遷移させています．HackDay 前日に Web アプリのみで socket.io の動作を調査して，実現できることを確認しました．
- Androidの加速度センサによる端末の姿勢と端末の振った方向を検出
- socket.ioを使ったWebとAndroidの双方向通信
- Webスライドビュワー（アプリケーション全体）
- PDFビュワー機能
- 複数のアニメーションを用いたスライドの遷移