こんにちは、ギャップラー小林です。

 先月よりハッカソンの技術解説シリーズをお伝えしておりますが、今回は特別賞を受賞した「髙橋組 本家」の登場です。前回のブログよりだいぶ時間が空いていましたが…その理由は読めば分かります。いや、果たして読み切れるか!?


 皆さんこんにちは、チーム「髙橋組 本家」組長ことラズベリー髙橋です。私たちは、ラズベリーパイや、各種センサーを用いてトイレのシステム化に注力しました。開発したものについては各担当者にお答え頂きましょう。

トイレ難民の悲鳴

 トイレのシステム化の前提としてまずはこの問題を提起しなければなりません。弊社は男性スタッフが多いのですが、フロアの男性トイレには小便器1に大便器1部屋しかありません。これでは必然的に男性トイレの利用率が上がってしまいます。

 ここでいくつかの問題が浮き彫りになります。

  1. トイレ難民の発生
  2. 個室トイレの構造的欠陥
  3. 電灯を消すときのトイレ利用者の行動

 これらを掘り下げていきたいと思います。

個室トイレの構造的欠陥から考えるトイレの UX

 まず弊社の個室トイレの構造的欠陥についてご説明します。

 弊社の個室トイレの扉は『自動で扉が閉まる』仕様です。商業施設等のトイレでもよく見られる種類ですが、自動で扉が可動すること自体には何も問題は無いのです。問題なのは状態に関わらず『閉まる』ことなのです。

 考えてみて下さい。自身がトイレに入ったときに、『今、このただ一つしかない個室内には利用者がいるのか?』というのを判断するためには何をどうやって確認するでしょうか?。直接話しかけたり、扉を押してみたり、気配を察するのも良いですが、トイレという空間においては少々気が引ける行為です。電灯が点いていたら前の利用者がいるであろう、という判断もできるでしょうが、しかしそれは後述の理由から確実な方法ではありません。

 弊社では利用者がいないトイレの電灯は消灯するのがルールなのですが、残念な事にこのルールはよく破られます。ただ問題の本質はそこではありません。『誰もいないのに電灯が点いたままだと、幾人かは(電灯のスイッチの状態を見て)トイレの利用を遠慮してしまう』、『個室トイレの利用者に気付かずに消灯してしまう事がある』のが問題なのです。

 ここにトイレの UX を考える事が出来ます。

 トイレとはいわゆる Private Room です。そもそもトイレ内の気配なんて察したいでしょうか? 個室内から外に向けて自身の気配を伝えたいでしょうか? 個室内外の人同士で会話なんてしたいでしょうか? お互いすれ違ったとしても空気を読んでさっさと済ませてしまいたいものです。 こういうとき個室利用者側でよくあるのは、『わざと咳をはらう』『意味も無く巻き紙をカラカラ回す』『足音を立てる』あたりでしょうか。そうやって気配を出す訳ですが、これらはストレスの元となっていることでしょう。

トイレット・エクスペリエンス

 このトイレの UX、トイレット・エクスペリエンス = TX を実現させるためには次の点を改善すれば良いと考えられます:

  • 個室の扉が自動で閉まってしまう/消灯問題
個室の扉を解錠したら自動で『開く』ようにすれば、開いていたら消灯、閉まっていたら点灯、という明確な判断基準が生まれ、迷惑行為を無くせる
  • 外からではトイレの利用者がいるのかがわからない、無駄に遠慮してしまいがち
トイレの利用者がいるかどうかをいつでも確認できるようにする
  • 諸問題を解決
トイレの回転率を上げてトイレ難民の解消につなげることで、社員の健康にも貢献できる

 以上の事から、トイレット・エクスペリエンスの実現の為に導き出される解決策は次の通りです:

  • 『トイレのステータスを管理するシステムを開発する』
  • 『個室トイレ利用者がいないときには扉が自動で開くようにする』

 これらを踏まえ、髙橋組では “COnfortable Toilet Environment Realization And haCKing Systems” 略して COTERAX と題したスマート・トイレ・システムと、扉自動開放装置を開発しました。まずはこの COTERAX の仕組みについてご説明したいと思います。

全体構成

COTERAX

 COTERAXでは”小”の使用者と”大”の使用者を把握するためにそれぞれ超音波による距離センサーと、光センサー(照明の状態)を用いています。それぞれ別々のRaspberryPiでセンサーの情報を取得し、COTERAX APIを用いてサーバ上に送信しています。サーバに送信された各センサーの情報は「厠燈(かわやともし)」で使用されます。

 実物は画像の通りです。作成時間に余裕がなく、お披露目当日はブレッドボードに実装&モバイルバッテリによる稼働となっていました。しかし実際の運用を考えるとユニバーサル基板にハンダ付け&AC電源駆動型の方が望ましかったですね。

 設計当初は人感センサーを用いる予定だったのですがノイズが載るようで安定してデータが取れなかったのでボツになってしまいました…

COTERAX API

 COTERAX システムの中核というに相応しいサーバー側のプログラムです。本 API はCOTERAX が検知した情報(大人の有無、照明の点灯状態)を受け取り、各種プラットフォームに応じた厠燈に伝達します。管理している情報は上記2点に対して同じ状態が何秒間続いているか?も管理しているため、余りにも滞在時間が長い場合はそっと正露丸などを渡してやると良いかもしれませんね。

厠燈

 ”かわやともし” と読みます。このプロダクトの中核である「トイレの利用状態をユーザーに、リアルタイムでやんわりとお知らせする」ことを実現しました。厠燈は、厠に燈る明かりのように、”明かり“を使ってオフィスのどこからでも、トイレ内部の利用状態を社員にお伝えします。

 開発には RaspberryPi を使っていましたが、途中から COTERAX で”大”と”小”2つの端末を使うのに取られてしまいました。なにか無いかと探したところ、あるじゃないですか!社内に買ったまま有効利用されていない 「Intel Edison」 が!!

 はい、「厠燈 Intel Inside」 です。

What will you make?

 私はランプを点灯制御するしょーもない回路にあなたを使いました。この厠燈は、COTERAX API からの HTTP レスポンスを受けて、AC100V のランプをスイッチ駆動します。

 Intel Edison では COTERAX API と通信する処理と、ランプを点灯駆動させる処理2つを実行していますが、基本的に Ruby で書いています。これくらいの処理であればすこし Ruby に精通している人なら簡単に書けると思います。

 Intel Edison 使い方や設定方法のノウハウについてもここで描きたいのですが割愛します。リクエストがあれば…(ry

 左に見えるユニバーサル基板は、Intel Edison の GPIO のスイッチ制御をうけて、簡単なトライアックを使った回路で AC100V のスイッチ制御をしています。 (後ろに見えてますけど、秋月のトライアックキットですね。ただ、これだと GPIO からの電圧が足りないので、トランジスタでバッファを咬ませています。)

 Edison が小さかったので、ちゃっかりケーシングしてACアダプタのようなものに仕上げました。

 さて、肝心の厠を燈すランプですが、ランプといえばそう、やっぱりあれを使うしかないです。そう、パトランプです。

 誰かが、トイレ “大” を使用していると、社内でこのパトランプが点灯します。これで、あなたのお腹が “Emergency” になったときに、トイレ “大” が “Scramble” かどうか、オフィスのどこからでも一目瞭然なわけです。

 あなたは、トイレ”大”が空くまで、席でゆっくりとお腹を落ち着かせることができます

 写真にはありませんが、このプロダクトの発表時は社内クリスマスパーティだったので、パトランプと一緒にクリスマスツリーも点灯させてました。これについては、以前のブログに動画があるのでそちらを参照ください。

Smart 厠燈

 Smart 厠燈は COTERAX API と連動し、大の使用者を検知できるスマホアプリです。

 アプリの制作は Unity で行い、iOS、Android に対応しています。Maya を使用し、社内のトイレを再現すべくモデリングを行いトイレを再現しています。便器などの一部のモデルに関しては、ネットから検索して CAD の 3D データを使用しています。

 アプリ起動時と30秒毎に COTERAX API から照明状態を取得しています。API から取得した照明状態と連動し、アプリ内のトイレの明るさも変化するようになっています。

 大の個室のドアを2回ノック(タップ)すると、COTERAX API から使用者がいるかどうかの情報を取得してドアが開きます。使用者がいるかどうかで、大の個室の中の様子が変化します。

 上記画像でトイレにいる人は弊社スタッフ RK です。RK の3Dモデルは別のスタッフが以前作成した MMD 形式のモデルです。 MMD4Mecanimという Unity のライブラリを使用し、MMD モデルをUnity で表示しています。

座っているモーションはネットからいくつか PMD 形式の座りモーションを検索して組み込んでいます。モーションのパターンは数種類用意し、人がいた場合にランダムでモーションを再生しています。

トイレの女神『トイレのフチコさん』とは

 COTERAX を補完するプロダクト、扉自動開放装置の『トイレのフチコさん』についてご紹介します。

『トイレのフチコさん』の仕組み

 『トイレのフチコさん』の仕組みは単純です。構造は電源すら不要のとてもエコな滑車の原理ですが、予算不足から滑車は利用していません。その代わりに、仙台ラボリーダーM氏が東京出張のついでにガチャガチャで手に入れた『コップのフチ子さん』を利用しました。『トイレのフチコさん』の名前の由来はここにあります。もし滑車を買うことができていたら『トイレの滑車くん』になっていたかもしれません。

 まず 100 円ショップで購入したフックにフチコさんを固定します。ちょうど社内の冷蔵庫に瞬間接着剤が転がっていたのでそれを拝借します。これだけだと強度に不安が残るので隙間を固化しやすい小麦粘土で埋めます。ちょうどいい具合に固定すると、何とも言えないポージングをとるフチコさんが現れました。これからはこの子に扉を引っ張ってもらいます。

 そしてフチコさんの右脇のところにタコ糸を通すわけですが、摩擦でフチコさんに傷がついてしまうと良くないので、先が曲がるストローの曲がる部分を切り取って、それを脇に挟んでおきます。タコ糸はこのストローの中を通るのでフチコさんに直接当たることはありません。

 大抵のトイレは、個室といえども密閉空間にはなっておらず、図のように上部に空間があります。この壁のふちにフックを挟み込むように固定します。タコ糸の先にはクリップを付けておいたので簡単に接続することが可能です。錘には丈夫なビニール袋を採用することで重さの微妙な調節を可能にしました。使い終わったスプレー缶でも入れておきましょう。

 このように『トイレのフチコさん』は簡単に取り外しが可能で、運用コストも考えられている優れものです。

『トイレのフチコさん』始動、快適なトイレット・エクスペリエンスに向けて

 ハッカソン終了後から実際に『トイレのフチコさん』設置しましたが、何気に社内では好評です。それだけ皆さんも困っていたということでしょう。私個人的にも、個室トイレの扉が自動で開くというだけでこうもトイレ体験(トイレット・エクスペリエンス = TX)が違うとは思いませんでした。

 ただ一つ盲点だったのが、今までが今までだったので扉が閉まっている=利用者がいる、という認識がまだ社内に浸透しきっていないということです。実際、『トイレの電灯が消されちゃう問題』はたまに再発しているようです。ですがこれは時間の問題であり、徐々に解決に向かうものと思われます。今後のフチコさんの活躍にご期待ください。

あとがき

 いかがでしたでしょうか?時間が少ない中でのプロジェクトでしたが、各々得意分野を活かした役割でプロダクトを作ることができたと思います。

 世界平和とまでは行きませんでしたが、社内環境の改善に技術で役に立つことができ良かったと思います。


Appendix

 髙橋組ではハッカソンに合わせて独自のポスターも製作しました。担当した私Mが業務時間外にノリで作った作品でございます。

 トイレ環境を平和にするトイレハックというコンセプトであるため、このように全米が泣きそうな便器を目指しました。2枚目があひるちゃんなのは、トイレ→おまる→あひる という理由があります。

 本稿では1枚目の方のポスター制作風景をご紹介しようと思います。本来は電子工作のハッカソンのはずですが、例により Photoshop の画面しか出てこないのはご了承ください。

ポスターのモチーフを決める

 今回、髙橋組はトイレハックを行うので、「すごいトイレ感」を醸し出すポスターにしようと思いました。当初はあひるちゃんで比喩的にやろうとかいろいろ案が出たのですが、直球的に 便器 を使うことにしました。

一人、「いい便器」を求めてネットの海へ

 意外と「いい便器」の素材って無いものです。

 試しに Google 画像検索で便器と入力して探してみますが、出てくるのはトイレメーカーのオシャレトイレの画像か目を覆いたくなるような画像ばかりで、 “背景から切り抜きやすくて”、“真正面から撮影された”、“権利的に大丈夫そうな”、“印刷解像度の”、“典型的な便器っぽい形の”、“便器の画像” というのはなかなかお目にかかれません。素材集にもなかなか条件に合うトイレ写真というものはなく、ここは非常に苦労したところです。

ハリウッド感あふれるデザイン演出とは

 ハリウッド映画のようなカッコイイ映画ポスターには特徴があります。私の独断と偏見ですが、次の点をおさえておけばプロでなくても大体それっぽくなります。

  1. メインビジュアルを超目立たせる
  2. コントラストを強めにする
  3. タイトルの文字は一番大きく
  4. 文字のカーニングを広めにとる
  5. 文字にグラデーションや金属表面、引っ搔き傷のようなテクスチャを貼ってみる
  6. 文字をエンボス加工等で立体的にする
  7. スポットライトを当てて陰影を作る
  8. スタッフの名前をローマ字で小さく詰めて下に配置
  9. スタッフの名前には細くて縦長のフォントを採用
  10. スタッフ表記の中央に Coming soon、公開日を表記

 皆さんも試してみて下さい。

制作風景 1: 文字の配置

 おもむろに Photoshop CC 2014 を起動したら、テキストツールで文字列オブジェクトを配置します。フォントは Haettenschweiler Regular あたりが良さそうです。カーニングは広めにとります。

 レイヤー効果で、グラデーション、光彩(内側)、テクスチャ、エンボス加工を施して金属感を出します。これは非破壊なので何度もパラメータを操作して調整します。 内側に少し青色を加えると良い質感になりました。

 背景を黒く塗ってからスポットライトツールで陰影を出します。これはスマートレイヤーに対応しているので非破壊です。注意点として、このツールは非常に重たいので、諸々の微調整を終えて最終出力する直前に行うのが良さそうです。

 そして他の文字列も配置します。スタッフの部分には Munich Regular というフォントがハリウッドっぽくて良さげです。

制作風景 2: ロゴを配置

 髙橋組にはロゴもあります。このロゴは前回の UPFT Google Glass ハッカソンの時に制作したものです。

制作風景 3: 便器を光らせる

 便器の中から光の筋が出るようにしたいので、影を反転させます。そして便座を残して便器を消します。この辺のディテールは光で覆い被さるので、多少雑な処理でもバレません。 光の筋を便器レイヤーに重ねたら完成です。

完成!

 細かいところツッコミを入れたい出来ではありますが、ひとまずこれで完成とします。ただ便器は消さなくても良かったかもしれません。あとはこのポスターをトイレの個室内と、弊社「おかしコーナー」にそれぞれ さり気なく 貼付けておくだけです。



ギャップロを運営しているアップフロンティア株式会社では、一緒に働いてくれる仲間を随時、募集しています。 興味がある!一緒に働いてみたい!という方は下記よりご応募お待ちしております。
採用情報をみる