こんにちは。普段商業施設でテナントさんの後方支援や施設運営の業務をしているamaneともうします。
この記事では、まだデジタルのお勉強を始めて1か月ちょっとのデジタル初心者な私が、防災設備にスマホをかざすと使い方が出てくるARプロトタイプを作ろう！作りたい！ と思い立ち奮闘しながらも、ちょっとづつ知識を得ていく所をお伝えしたいと思います。
この記事のポイント
- Teachable Machineを使った簡単な画像認識モデルの作り方
- 作成したモデルをWebで動かす時に多くの人がつまずく「HTMLが表示されない問題」
- その問題に対する有力な解決策の仮説
デジタル初心者の方にもアイデアを形にする楽しさと、その過程でぶつかるリアルな壁について共有する事でチャレンジの参考にしてもらえると嬉しいです！
プロトタイプ作成のきっかけ
私が今回このプロトタイプを作ろうと思ったのは、日々の業務の中での課題がきっかけでした。
課題：防災訓練の知識が全員に届かない…
毎月、テナント従業員向けの防災訓練を行っているのですが、開店前の30分の時間を使って開催しているため開店準備に必要な人員や、そもそもの人員を考えると何人も参加してもらう事は難しいので、訓練への参加者は各店舗から必ず1名は参加して下さいという形でお願いしています。
そのため、参加していない多くの従業員にまで知識が行き渡りにくい、という課題がありました。「いざという時、あの設備の使い方がわからない…」という事態は避けたい、何か良い方法が無いか日々考えていました。
アイデア：手軽にゲーム感覚で学べる仕組みならどうだろう？
そこで今回、「スマホをかざすだけ」 という手軽さで、従業員が自分の好きなタイミングで防災設備について学べる仕組みがあれば、もっと知識が浸透するのではないかと考えました。少しゲーム感覚でもあるので、楽しみながら取り組んでもらえることを目指しました。
作成プロセスと立ちはだかった壁 
ここからは、実際に私がたどった開発の道のりと、ぶつかっている大きな壁についてお話しします。
【成功体験】まずは「脳」を作る！Teachable Machineでのモデル作成
まずは、ARの「目」と「脳」になる部分を、Googleが提供している**Teachable Machine** というツールで作りました。プログラミングは不要です！
① Teachable Machineのサイトで「画像プロジェクト」を選択。
② 「消火器」「排煙スイッチ」など、認識させたいモノの名前（クラス）を作成。
③ スマホのカメラを使い、それぞれの設備の写真をいろんな角度から約50枚ずつ撮影し、アップロード。
【サンプル画像の撮影ポイント】
- きちんと認識させるために、50～100枚ほどの写真を出来る限りいろんな角度から撮影する事が大事です。
- 写真の枚数が多いので、GoogleDriveにフォルダを作成して保存してからインポートすると一括で出来て楽ちんでした。
④ モデルをトレーニングする ボタンをポチッ！
⑤ プレビュー画面で、PCのカメラにそれぞれの写真をかざしてみると… 見事に「排煙スイッチ 100%」「消火器 100%」と認識されました！ 🎉
※本来はホンモノをPCカメラに移して精度チェックをするべきですか、ホンモノを持って来れず写真で確認しました！
結果を見てものすごく感動して、何度パターンも写真をPCカメラに映して確認しました。「画像認識って、こんなに簡単にできるの！？」と。この手軽さがTeachable Machineのすごいところだと思いました。
【絶望編】立ちはだかる「真っ白な画面」の壁 😫
使用したいモデルができたので、次はこのモデルを使ってWebページで動かしてみます。
Teachable Machineのモデルをエクスポート機能からコードをコピーし、PCのメモ帳に貼り付けてindex.htmlという名前で保存しました。
…しかし、そのHTMLファイルをブラウザで開いても、表示されたのはページのタイトルだけ。カメラも起動しないし、もちろん画像も表示されません。
ここから、長い戦いが始まりました。
【試した事の一部・・・】
-
ファイル名の確認： HTMLに書いた画像ファイル名 (
shoukaki.pngなど) と、実際のファイル名が合っているか何度も確認。→ OK - Pythonで試す： ネットで調べると「Pythonでローカルサーバーを立てる」という情報がありましたが、黒い画面（ターミナル）と英語のエラーメッセージに心が折れて断念…。
-
画像のURL化： Google Driveに画像をアップしてそのリンクを使ってみたり、
.pngで終わるURLを探してきて試したりしましたが、全滅。 - Codepenでの実行： 各パートにコードを分けて貼り付けたが、やはり動かず。
「モデルはできたのに、なぜ動かないんだ…」と、完全に手詰まり状態です。
【調査・仮説編】原因は「ブラウザのセキュリティ」？次の挑戦は『GitHub Pages』
諦めずに調査を続けた結果、有力な原因が見えてきました。
原因の仮説：ブラウザは、セキュリティ上の理由でローカルファイル同士の連携を禁止している！...っぽい！
どうやら、自分のPC上にあるHTMLファイル (file:///C:/Users/.../index.html のようなアドレス) が、同じフォルダにあるはずのJavaScriptファイルや画像ファイルを読み込もうとしても、ブラウザが「危ないからダメ！」とブロックしてしまうみたいです。
私が感じていた「会社のセキュリティ？」という予感は、もっと普遍的なブラウザ自体の仕組みだった可能性が高い？という疑惑が浮上してきました。
そして、この問題を解決する手段として、GitHub Pages という無料サービスが使えるらしい、という有力情報を手に入れました！
これは、作成したHTMLや画像ファイルをインターネット上に公開して、誰でもアクセスできるURLを発行してくれるサービスのようです。救世主となるのか？！
まとめと現在の状況
最後に、今回の挑戦の現状整理をしてみます。
- できたこと： Teachable Machineを使い、防災設備を認識する機械学習モデルを作ることに成功した。
- 現在の壁： 作成したモデルを動かすためのHTMLファイルが、ローカル環境ではブラウザのセキュリティに阻まれて動かない。
- 次の一手： 解決策として見つけた 『GitHub Pages』での公開に、これから挑戦します！
奮闘中です！解決編は次回に続きます
というわけで、この記事を書いている現在、まさにGitHub Pagesを使ってプロトタイプをWebに公開しようと奮闘している真っ最中です。
もし、GitHub Pagesに詳しい方や、同じような経験をされた方がいらっしゃいましたら、ぜひコメントでアドバイスをいただけると泣いて喜びます…！
無事に公開までたどり着けたら、必ず【解決編】として次の記事を書きますので、今回の挑戦の結末が気になる方は、ぜひ「いいね」やストックをしていただけると嬉しいです。
最後まで読んでいただき、ありがとうございました！
