AngulrJS × Milkcocoa

でちょっとくらい社会貢献してみたい

じこしょうかい

森本 新之助

面白法人カヤック

エンジニア@moshisora990

きょうのはなし

・AngularJSなはなし

・ノートテイクってなによ

・Milkcocoaでアプリつくったよ

AngularJSのはなし

いろいろ手を抜いてると

真・シングルページアプリケーションになったので

AngularJSのはなしはしません

さて、

ノートテイク

ってご存知でしょうか？

ノートテイク

● 聴覚障害者支援の方法のひとつ

● 簡単にいうと「筆記通訳」のこと

● 聴覚障害者の「耳のかわり」になって音を

リアルタイムに文字に通訳

● 手話通訳の文字版

● 「音」を「文字」にするので、会話だけじゃなくて環境音とかもが

んばる

どうやるのか

● 紙にペンで書いたり

○ 利用者さんに直接みせたり

○ カメラでとって写すやつ（名前がでてこない）でみせたり

● パソコンで入力したり

○ パソコンでタイプしてノートテイクする

○ 直接みせたり、テイクするPCとは別に閲覧用PCを準備したり

どうやってたのか（体制）

● PCを使って複数人でノートテイク

● 全部の情報をリアルタイムに利用者さんのPCに表示

こんにちは

今日は１章からやります

利用者

こんにt… 今日は１章からy…

こんにt…

今日は１章からy…

テイカー

どうやってたのか（技術的なところ）

● IPTalkというソフトを使っていた

● 固定IPを割振る必要がある

（大学内ネットワークだとこれも一苦労）

● 各PCにはあらかじめ重複しないIPを設定しておく

● テイカー、利用者の各PCをHUBを使って構築した

ローカルネットに接続

● あまりにつらいのでHUB ➡ 無線LANにした

つらい

問題

● ネットワークにある程度詳しい人がいないと結構大変

● タイプ速度が要求されるのに自分のPCとか使えない

● 荷物が大量

○ PC３台（テイカー２、利用者１）

○ 電源3台分（古いPCだと1コマもたない）

○ HUB（電源付き）、LANケーブル

○ 電源タップ（でかい）

● インターネットはそこにあるのに…

● インターネット経由で

● 簡単に

● リアルタイムで

● データ送信できれば

自分のPCだけもっていけばいいのにね

あるじゃないの

つくりました　milcotaker

milcotaker● milkcocoaのアプリIDを設定

milcotaker

milcotaker - やってること

● 入力文字をsend（潤沢に使いすぎている気はする…）

milcotaker

milcotaker - メンバー参加/離脱

milcotaker

困ったこと

後から参加した人が現在参加してるメンバーの一覧をどうやって

取得しよう…

現在の接続数って取得できないのかな

困ったこと

できないらしい

broadcastしてしまえ

新しくjoinしたときに「誰かいるかー」

単純にこんな感じ

メンバーを取得

broadcastを受け取ったら「わしじゃわし」を返す

メンバーを取得

「わしじゃわし」と返ってきたら入力欄に追加

メッセージを合体

各テイカーが入力したメッセージは

専用のdataStoreに送って合体

これからやりたいこと

● 大学の課外講義だと卓上じゃないこともしばしば

● 手書き入力にも対応したい

● 屋外は紙＆ペンしか選択肢がない状態なので

iPadとかでできると最高だなという気持ち

（紙とペンで見せながら書くのは大変）

まとめ

こんな感じのノートテイク用のアプリをつくりました。

実装も足りてないしデザインもダサいので

こういう分野に興味のある方は

ぜひPRとかお話とかお願いします！！！

https://github.com/moshisora/milcotaker