医療介護現場に笑顔を増やすプロダクトとしてスマイルレポートを考えた背景を前回の記事で書きました。
今回の記事では、具体的な運用と技術実装の経過について書きます。
（ちなみに、現時点で何もでき上っておらず、詰まっている経過の報告になります）
#運用
仕事終わりにスマイルレポートサイトにアクセスし、報告をするというのが基本運用です。
上記がサイトイメージですが、まずはCodePenの手本で転用できるものがないかを調べ、「choices」「select」「button」などで調べたところ、即使いたいというものはありませんでした。
そもそも、コードの基礎が全く分かっておらず、リンクに飛ばすにはJavaScriptのコードが必要なのかと考えて「JavaScript リンク」とのキーワードでググってたどり着いたのがこちらのサイトでした。
書いてある通りにやって、「ボタン」と書かれたものから用意されたリンクに飛ぶことはできるものの、Googleフォームで作ったサイトに飛ばそうとしても、うまく飛びませんでした。
しかも、いくつかの記事を読んでいると、リンクに飛ばす処理をするのは一般的にはJavaScriptを用いるのではなくHTML上でできるとのこと。
やはりHTMLやCSSの基本的な知識が必要と考えて、まずはProgateで「HTML＆CSS 初級編」を行ってみることに。
ちなみに、Progateのお手本では、html側の一番上にって書くようになってるのですが、「Just HTML that goes in the
goes here.」のエラー出続けたので、を消したところエラーが消えました。全体の見た目がいまいちなのはBootstrapを使えばかっこよくできるのかもしれませんが、見た目はひとまず保留し機能の実装を目指します。
サンクスレポートを押すと飛ぶ先のサイトイメージがこちら。
そして上記イメージをCodePenで実装したのがこちらです。
See the Pen サンクスレポート簡易 by Naoki Ucihda (@naokiuc) on CodePen.
上記CodePenで作ったアプリをnetlifyにデプロイしたのがこちらで、ここへのリンクを以下のコードで貼りました。
<div class="contents-item">
<h2><a href="https://eloquent-wescoff-9ee544.netlify.app/">サンクスレポート</a></h2>
また、簡易報告サイトの最終画面のイメージがこちら。
しかし、よく考えたら詳細レポートのところは「はい」「いいえ」ではなく、「サンクスレポート」「ヒヤリ・ハット レポート」「詳細入力は後日」とした方が良いと考えCodePenではこのように実装しました。
See the Pen スマイルレポート最後 by Naoki Ucihda (@naokiuc) on CodePen.
トップページから、一通りリンクを踏んで簡易報告の最終画面からサンクスレポート詳細報告用のGoogleフォームまで飛べるサイトがこちらになります。
これでアプリのイメージをしていただけるでしょうか。
#課題
いくつも課題があるのですが、最大の課題は点数をどう個人に積み重ねていくかです。
現時点での実装イメージとしては、リンクを踏んだことをGoogleスプレッドシートの方に記載して最終的に集計する方法を考えています。
クイズ形式で丸バツを積み上げていくようなサイトはあるでしょうから、その仕組みが応用できそうな気もします。
また、個人の区別をどう行うかも課題になります。
個人ごとにアカウントを作って、そのアカウントの中に点数が積み上がっていくようにするのか、それともトップページで名前を入れるようにして、それを何らかの方法で点数に紐づけていくか。
Googleフォームの項目を別デザインで利用する方法もあるとのこと。
Googleスプレッドシートに答えを集約して、まとめて集計という方法を採用する場合は、この考えが使えるかもしれません。
点数を積み上げていったり、簡易版の報告をできるようにしたのは毎日の報告のモチベーションを上げるためなので、まずは簡単に用いるとすれば１ページだけでサンクスレポートとヒヤリハットレポートの分岐があるものだけでも現状の紙ベースのヒヤリ・ハット報告だけのものよりはるかに有効なものになると考えます。
とりあえず作ってみました。
こちらのサイトをまずは同僚にみせてみたところ思っていた以上に大好評。
早めに実装して、運用した上での課題も蓄積していこうと思います。