QRコードを利用したおみくじサイトをつくってみました。

この記事を読むのに必要な時間は約 4 分です。

コロナ、コロナで大騒ぎ中ですが、このまま年越し、初詣まで突入しそうですね。

さて神社関係者からの相談で、不特定多数でしかも大勢が短時間でさわることになる「おみくじ」の代わりになる何かいいアイデアはないだろうかと、相談を受けていました。

ひらめいたのはQRコードを利用した非接触型のおみくじ。

利用にあたっての課題がありました。

QRおみくじの構想

初穂料の受け渡しは、あくまでも授与所（社務所）で行うようにしました。

電子マネーやクレジットカード決済の導入も考えましたが、たかだか100円や200円の決済のために、いちいちカードを登録するのも面倒ですし、電子マネー決済機を導入するのも導入する方からしても、非常に面倒です。

つぎに、操作方法は、シンプルに「ボタン」だけにしました。
ボタンを押すと、数字が表示される。
ただそれだけです。

音がなったりのギミックは入れましたが、基本的に必要なのは数字が表示されることですのでその1点をシンプルにしました。

導入費用が安価であることは、上記のとおりシンプルにすることで、安価で実現できます。

FelicaやNFCなどの非接触型のタグに対応することもできますが、そんな面倒なものを導入すればそれを説明しなければいけない職員さんがまた必要になってしまいます。

一日に数百人から数万人は触るであろうおみくじです。

カンタンに操作できる非接触型を半分でも利用してもらうことができればみんなの負担も減ると思いました。

専用アプリをダウンロードする方法は却下しました。

アプリは、開発コストが高く、利用する際もめんどくさいですし、ハードルが高いです。

AndroidかiOSなどのOSを選ばない仕組みとしてHTMLとJavascriptで開発することにしました。

これであれば、インターネット環境さえあれば、誰でも利用できます。

当初、想定していなかったほど反響がありました。

そこで、でてきた課題としては、「サーバーへの高負荷」でした。
おみくじをひく行為自体は、日本全国で一定時間の限られた時間に集中してしまいます。

音声ファイルのビットレートをさげることで、平均して90％近い圧縮になりました。

<head>タグ内の記述の順を変えることが軽量化につながることは意外としられていません。

ブラウザとしては、JavaScriptファイルの読み込みが発生した時点でHTMLのパースを一時停止させ、JavaScriptを解析します。その後、CSSを読み込み、解析し、適用するためどうしても少しタイムラグがでてしまいます。

必須ではないももの、CSS⇒JSの順番で記述をすることで、CSSで表示させてからJSの解析読み込みをしますので、ページが遅延することが避けられます。

外部ファイル化

最終的に1ページあたりのサイズは、約130kb程度にまで圧縮できました。