音声入力

大福帳.js では、教員の手間をできるだけ減らすため、ブラウザ（Chrome）のAPIを使って、コメント欄に音声で入力ができるようにしてあります。

ところが、実際の授業でコメントを返す際に、私自身は、音声入力機能を殆ど（全く）使っていません。

Chromeの音声認識はとても優秀とはいえ、たまに間違いもありますし、文の区切りを全く認識しないので、最終的に、人間が文を整える必要があります。それならば、最初からキーボードを使ったほうが簡単、というわけです。

おそらく、入力に要する正味の時間は、「キーボードだけ」と「音声入力併用」とでは、（私の場合は）ほとんど違わないだろうと思います。

ただ、ちゃんとしたキーボードを備えていないタブレットなどで作業する際には、音声入力は仕事の効率化の助けになるだろうと予想しています。

大福帳のフォーマット

織田揮準先生が考案された大福帳のオリジナルなフォーマットは、左側に受講生、右側に教員のコメントが配置されており、大福帳.jsでもこのスタイルを踏襲しています。

ところが、LINEなどのコミュニケーションツールでは、右側からの吹き出しは「自分」、左側は「相手」ということになっているため、学生が大福帳.jsを開くと、こうしたコミュニケーション用のアプリとは反対になってしまいます。

常に「自分」の発言が右側に表示されるようにする、というデザインにしようか、と、思案したこともあったのですが、オリジナルの大福帳に敬意を表して、このまま変更しないでおこうと思います。

舞台の上手と下手の使いわけからのアナロジーからすると、下手から登場した主役（受講生）が、上手から登場した教員と対峙（？）する、といった感じになるのでしょうか・・・

検索機能の追加

大福帳の中に「気になる言葉」があったけれども、どんな書込みだったのか、もう一度確認してみたい。そのようなケースが、これまでに何度かありました。そこで、正規表現を使って書込みの内容を検索し*、マッチした書込みのみを表示する機能を追加しました。

教員の管理画面でルーペのアイコンをクリックすると、検索画面に移動します。そこで、何かひとつキーワードを入れてボタンを押すと、そのキーワードを含む書込みがリストされます。

検索条件が空のままでボタンを押すと、全ての書込みが表示されます。

複数のキーワードのどれかを含むようなパターンは
りんご|みかん|バナナ
のように、半角の|で区切って並べます（OR検索）。

複数のキーワード全てを含むパターン（AND検索）は、ちょっと面倒ですが、
(?=.*りんご)(?=.*みかん)(?=.*バナナ)
のように記述します。

大福帳.jsのキャラクター

「大福帳」からの単純な連想で、大福餅をイメージしたキャラクターを作ってみました。「管理人からのお知らせ」の中に表示されるようになっています。

何パターンも作ってみたい気はしているものの、そこまではなかなか・・・・

プロフィール

ソーシャルメディアに欠かせない機能のひとつに、「プロフィール」の設定があります。人によっては、色んなことが「公開」されていたりもします。

一方、授業では、オリエンテーションなどで教員が簡単な自己紹介はするかもしれませんし、「雑談」の中で自分の考え方を述べたりする機会はあっても、あまり個人的なことには触れないのが普通だと思います。

大福帳.js では、プロフィールとして、小さな画像と短いメッセージを登録できるようになっていて、大福帳を開いた際に、受講者には教員の、教員には受講者の画像が表示される仕組みになっています。画像をクリックすると、メッセージがポップアップします。

受講生が自分の顔写真を登録するとは考えにくいので*、教員の顔を覚えてもらうための機能のつもりです。ただ、顔ではなくて、動物やぬいぐるみなどの画像を登録してくれる学生も少数あって、大福帳の話題のきっかけづくりになります。

LINEとメールによる通知

２週間ほど前、LINE Notifyによるコメントの通知機能を追加したのですが、今のところ、ほとんどの学生が設定していない様子です。大福帳.jsを「友だち」に加えなければならないのでは、と思っているのかもしれません。

実際は、大福帳.jsを「友だち」にする必要はなく、LINEの公式アカウントであるLINE Notifyに大福帳.jsがメッセージを送信し、ユーザーはLINE Notifyから通知を受けるという仕組みです。また、ユーザーがLINE Notifyを操作して、通知の受取りを解除することも簡単にできます*。

心理的なバリアはメールのほうが低いような気もするので、塩漬けにしてあった「メールによる通知」の設定も、「アカウント」に表示されるようにしておきました。

なお、LINE Notifyでの通知を教員側が設定すると、受講生の新規の書込みが通知されます。授業の帰りに、自分の端末で、その日の授業の書込みを確認するのは、案外と悪くないものです。

一方、メールを使って同じような通知を行うと、沢山のメールがいっときに届けられて、ほとんど迷惑メール状態になってしまいます。そのため、受講者からの書込みを教員にメールで通知する機能は、今のところ組み込んでいません。

メッセージの自動保存

受講生の大福帳への書き込みは、フォームに記入後【書き込む】ボタンを押して完了、という流れになっていますが、わずかながら、書き込みができていなかった、という例がありました。おそらくボタンの押し忘れと思います。

いまどきのウェブサービスは自動保存が当たり前なので、そちらに慣れている若者は、最後にボタンを押すところまで気が回らないのかもしれません。

そこで、受講生の記入欄も、Ajaxで自動保存されるよう改修しておきました。入力後、1秒間何もしなければ保存、という設定です。

この状態でしばらく様子を見ることにします。

画像の縮小アルゴリズムの改善

授業ごとのメッセージに写真を１点添付できる機能を加えたのですが、大きな画像がたまるとディスクがじきに逼迫するのは目に見えているため、画像サイズは512×512ピクセル固定*としました。

そのため、画像をアップロードする前に、クライアント側で画像の縮小を行なう工程を入れてあったのですが、単純にcanvasのdrawImage()で縮めただけだったため、物体の縁や線の部分がジャギーになってしまっていました。

ピクセル毎に処理するのも重たそうだったので、ウェブで見つけた「多段階縮小アルゴリズム」**に変えてみたところ、実用に耐えるレベルにはなったのではないかと思います。

これまでのアルゴリズムで縮小

改良版のアルゴリズムで縮小

スマートフォン用の画面デザイン

スマホには殆ど触らない生活をしていることもあって、大福帳.js の画面デザインは完全にパソコン向きだったのですが、そのままではいけないと思い、受講者用の画面を少し改善してみました。

左に受講生、右に教員の書き込み欄を並べるのが「大福帳」の基本的なフォーマットですが、スマホの小さな画面でそれを実現しようとすると、それぞれの欄がかなり小さくなってしまいました。

さりとて、LINEのように「互い違い」に表示するのも何となくイケナイような気もするし、もうしばらく様子を見ながら、最適なデザインを探したいと考えています。

一方で、教員用の画面のデザインは、相変わらずパソコンの使用を前提にしています。悪しからずご了承願います。

LINE Notifyへの通知の挙動（備忘録）

LINEとの連携を設定している受講者がメッセージを書き込むと、そのメッセージには、LINE Notifyのアクセストークンと「未送信」のフラグが付けられる。

教員が「コメントを公開」すると、アクセストークンが設定され、かつ、未送信のメッセージへのコメントが、LINE Notifyに送信される。LINE Notifyからのレスポンスコードが200（正常）の場合には「送信済」にフラグを変更する。

受講者がメッセージを書き込んだ際に「未送信」のフラグが付けられる。従って、大福帳の設定が「随時メッセージ交換を行なう」になっている場合、受講者がメッセージを更新する都度、フラグは「未送信」にリセットされ、教員が大福帳の設定画面で「設定」ボタンを押すと、コメントが再送される。

メール関係のトラブル

サインアップやパスワード変更の際のメールでエラーが立て続けに発生するトラブルに遭遇。原因がDNS周りにあることは確かなのですが、大福帳.js 用に使っているのは自分が管理するメールサーバーではないため、細かく調べることができませんでした。

研究室のサーバーをメール送信用に使っても良いのですが、何かの都合でリブートしたり、たまに作業停電があったりするので、折角 大福帳.js をクラウド上で運用している意味が薄らいでしまいます。

次善の策として、メール送信は Gmail から行なうように設定を変更しました。メールで送信されるのは乱数で生成した確認用のURIだけですので、プライバシー等の面で全く問題ないと判断しました。

SNSとの連携

授業で大福帳に書き込んでもらった後は、できるだけ早くコメントを記入するようにしているのですが、授業後に大福帳.jsにアクセスしてコメントを確認する受講者はぽつりぽつりとしかいません。

他にも沢山授業はあるし、サークルやバイトで忙しいでしょうから、それは当然かもしれませんが、もうちょっと気にかけて欲しいな、と思う気持ちはあります。

コメントをメールで自動的に送信することは技術的にはたいして難しくありませんが、私自身が押し付けがましいメールを受けとりたくないこともあって、大福帳.jsには組み込んでいません*。

この大学の１年生を対象にしたアンケートでは、LINEの利用者は毎年増加しており、今年は9割を超えていました。

そこで、LINEのAPIを使って、教員が記入したコメントを自動的にLINEの受講者のアカウントに送る機能を追加してみました**。


設定は、ログイン後、「アカウント」で行います。LINEへの通知を設定すると、LINE Notifyの認証・確認画面が開き、受講者が連携を許可すると、（OAUTH2の手順で）LINE側からアクセストークンが得られます。大福帳.js はそのトークンを使って、受講者ごとにコメントを発出します。

コメントが送信されるのは、教員が「大福帳の設定」で、「コメントを公開する」（または、「随時メッセージ交換を行なう」）を選んで、【設定】ボタンを押したタイミングです。

（2016年11月13日更新）

=======
* 内部的にはメールによる通知機能は組み込み済みで、ログインした状態で
https://goose.cite.tohoku.ac.jp/daifukujs/user/email_notification/on
にアクセスするとオンにすることができます。

** 当初はLINE LoginとMessaging APIを組み合わせた方式で開発していたのですが、Messaging APIの無料プランは投稿数に上限があるため（１月あたりの応答回数1000回まで）、そうした制限のゆるいLINE Notifyに切り替えました（１時間あたりAPIを1000回コールできるらしい）。

大福帳.js を１ヶ月ほど使ってみて

大福帳.js は、2016年の盆休みに制作し、10月から始まった工学部２年生向けの数学の授業（60名ほど）で「実証テスト」を始めました。

クラスは全員スマホを携帯していたので、サインアップと受講登録はほとんどその場で完了しました（その後、メールサーバーの具合が悪かった期間があったため、登録できずにいた学生が２名ほど相談に来ました）。操作面では今どきの学生は全く問題なく対応できることを確認しました。

授業は、終了時刻よりも５分ほど早めに切り上げるようにして、記入してもらっています。記述量は、個人差はありますが、５０〜１００文字程度、といったところです。

書き込みをすると、バッジ（リンゴマーク）を１つ以上差し上げること、その個数を出席（授業への参加度）の目安にすることを伝えたところ、殆どの学生が書き込みをしてくれています。

少し意外だったのは、氏名などが表示されるわけではないのに、書き込みを「非公開」に設定する学生が多数派だったことです。

３回目くらいから、書き込みの内容がマンネリ化する受講者が見受けられたので、「お題」として「授業のキーワード」を指定しました。

回答の記入は、パソコンさえあればどこでもできるので、スキマ時間の活用にもなって、当初予想したほどの負担感はありませんでした。１件あたりの回答時間は１分弱くらいといったところですが、慣れれば（乗ってくれば）さらに短縮可能です。むしろ、総じてポジティブな書き込みが多く、励みになりました。

大福帳の動作

大福帳の動作について「ヘルプ」の記載を補足・訂正します：

コースを作成し、その中に複数の授業を登録します（レンチのアイコン）。

授業の中から、大福帳に書き込みを行うものをひとつ選択します
選択した授業については、受講生の大福帳への書き込み、教員のコメントの公開を教員側で設定できます（歯車のアイコン）。

選択されていない過去の授業については、受講者の書き込みは不可、教員のコメントは「公開」の状態になります。

授業はリストに登録されている順番で管理されています。そのため、大福帳に書き込みが行われた「後」に授業のリストを編集すると（レンチのアイコン）、授業と大福帳への書き込みの対応関係がずれてしまいますのでご注意ください。

画像の添付機能の追加

文字に加え、各回の書き込みに画像を１点、添付できるようにしました。

受講生の画面のカメラのアイコンをクリックすると、画像のアップロード画面が開きます。画像は512×512ピクセルに自動的に調整されます。

受講生の書き込みの上にカメラのアイコンが表示されていると、写真が添付されていることを表します。アイコンをクリックすると画像がポップアップで表示されます。

メール送信のトラブル

サインアップやパスワードリセットの際に利用しているメールサーバーが、Fromを詐称して "no_reply" から送信できないよう設定が変更されていたことに気づかず、暫くの間、メール送信がストップしていました。10月27日に気づいて、設定を変更しました。

大福帳.js 始めました

このブログは、授業用のコニュニケーションツール「大福帳.js」についての情報提供（というか日誌）を目的に開設しました。