今年の年賀状に「おみくじ」を付けてみました。
年賀状にQRコードを付けてスマートフォンで見るとおみくじが出来るっていうものです。
結構簡易的に作っちゃったんですが、なんとなく動くので「タネ明かし」を行うのと同時に「コピペで使える」をモットーに記事を書きました。
その元サイトはこちらです。
※株式会社ジーティーアイの年賀サイト
株式会社ジーティーアイ | おめでとう！ ※消失しております。
☆画像をご協力いただきましたトータルデザインプロデュース チアー様の年賀サイト
トータルデザインプロデュース チアー | おめでとう！ ※消失しております。
今回、制作にあたり画像をトータルデザインプロデュース チアー様にご提供いただきました。大変ありがとうございました。
実は、他社様にもご使用いただこうと準備していたのですが、間に合わず・・・結果うちとチアー様だけになってしまったという経緯があります。会員サイトの形式で年賀文面を入力していただいてQRコードを作って年賀状に貼れば即出来上がり・・・みたいな感じを想定していたのですが、無念！！！来年の年賀状に向けて今から・・・・と言いつつまた深みにハマるんだろうな。
準備
上記リンク先を見ていただいたらわかると思いますが、カンタンな画面です。
おみくじ・うらない・選んでクリック系ゲーム 全部同じですが、結果の種類だけ結果表示ブツを用意する必要があります。
素材としては下記のようなものがあります。
● テキスト
「あたり！」とか「大吉！」とか 「はずれ！！」とか「凶！」とかまずはテキストで試すのがてっとり早いです。
● 画像
上記のテキストを画像にしたものを用意すれば見栄えは良くなります。
今回、弊社ではトータルデザインプロデュース チアー様よりご提供いただきました「アニメGIF」を使用しました。
● FLASHなどの動画
ガッツリ動くものを作りたい場合はFLASHなどの動画だとサイコーです。
その場合は「おみくじを引く」的な開始部分からFLASHにしたほうがいいですよね。
スクラッチ削ったり・・・。カンタンな内容でもそれだけで臨場感溢れます！
では、その内容を次で・・・
プログラムが動作するテンプレートを作成
WordPressのテーマに下記のコードのテンプレートを作成します。
わかりやすいようにコメントをふんだんに入れておきます。
文字コードは「UTF-8」（BOMなし）で保存してください。
今回、結果の画像は wp-content/themes/(テーマ名)/nenga に格納したものとしてコード内に記述しています。
環境に応じて読み替えてください。
※phpタグが<?php ではなく < ?php になってしまっているのでコピペ後全置換してください。
プログラムの流れは下記のとおりです。
● 初期画面表示
初期画面の表示を行う。
画像と「うらないボタン」、新年のご挨拶、コメント欄を表示します。
● うらないボタンを押した時
「初回」
クッキーに「nenga_fire」が入っていないことを判断し、初回スペシャル結果を表示します。（超大吉）
「２回目以降」
クッキーに「nenga_fire」の存在を確認し通常の判定を行います。
今回は、現在のtime値を取得し結果の数（３つ）で割り、その余りで「超大吉」「大吉」「小吉」を振り分けました。
● 結果表示
うらないの結果に応じた画像と「もう一度、うらなう」ボタンを表示します。
今回、アニメGIFだったのでちょっと楽しめたかなと思っています。
このテンプレートはTwenty_Fourteenテーマを利用したものですが、ソース内の「 —- ここから —- 」から「 —- ここまで —- 」をコピーして作ればどんなテーマにも合うと思います。
試しに画像を使ってみたい場合は下記リンクから直接ダウンロードしてご使用ください。
※リンク先のURLがなくなってしまったため適宜ご用意ください。
☆初期画像： init.jpg
☆超大吉 ： res7131.gif
☆ 大吉 ： res2958.gif
☆ 小吉 ： res1020.gif
考慮した点
この「おみくじ」を作るにあたって考慮した点が大きく２点、細かくいろいろあります。
大きい点は「初回はゼッタイ『超大吉』が出る！」ということと、固定ページを用意すれば何社でも使える ということです。
固定ページなのに「コメント欄」があるのは何社でも使えるようにするためにそれぞれコメントを読み書き出来るようにしたかったからです。
最終形としては 固定ページを参加社分作成し １固定ページ １ユーザーの管理に出来ればそのままサービスとして成り立つのかな・・・と。
それは、こちらのページを参考にすれば実現出来そうです・・・
WordPress › フォーラム » それぞれの会員だけが自分だけの修正できるページを提供したい。
あと、細かいいろいろって、姑息なんですが、画像名とかいかにも「他にもなにかある」的な意味のない数値にしてみたり、time値で判定するようにしたり・・・そのくらいですかね・・・。
今回、ガラケーも考慮してフォームは method=get にしているのですが、その必要が無ければ post でもいいと思います。
年賀状に印刷するためのQRコードはこちらで作成しました。
QRコード（二次元バーコード）作成【無料】
※このサイトは 2021/3/11 現在、消失しております。ご了承ください。
こちらではQRコードに文字列も入れることが出来るので大変重宝します。
下は弊社年賀状に記載したQRコードです。
参考に何か作れましたらお知らせ下さい。励みになります。
お役に立てれば幸いです。
