株式会社コネクト開発雑記帳

　新年あけましておめでとうございます。
　コロナ発生以降行動制限のない年末年始ということで、旅行や帰省のため遠出する方が多かったようですね。
　その反面、人の流れが活発になれば感染の広がりに不安を感じる方もいらっしゃるので、盛岡駅ではこの期間に合わせてアイーナとの連絡通路に無料の抗原検査場を設置して帰省者やこれから県外に発たれる方に利用を呼び掛けていました。私もこの検査場近くを通りましたが、なによりもそこで働かれていたスタッフの方々に頭の下がる思いです。

WEBアプリで「おみくじ」を作りました

　さて、新年にちなんだ何か簡単なプログラムを置いておこうと思い、誰もが分かるネタとして「2023年開運おみくじ」をお遊びツールに追加しました。

　「おみくじ」をテーマにするにあたって考えた仕様は、

1. 毎回ただランダムに表示するのではなくある程度固有の結果を返したい
2. 今後、結果画面に項目の追加削除が発生した時も汎用的に使いまわせるようにしたい
3. 結果を表示する時は紙っぽい風合いで縦書きの文字を混ぜたい

　の3つです。

　①についてはまず前回の記事で紹介した通信チェックの機能を用いて通信上やり取りされるデータから一定の数値を算出します。
　②のことも考慮した結果、「特定の文字列から数字以外を除去したうえで残ったものを1つずつ足した値を返す」関数を定義して、それに検証したい文字列を入れれば必要な数値が返ってくるようにしました。

　その関数がこちら。

function score($str){
    $numstr = preg_replace('/[^0-9]/', '', $str);
    $numary = str_split($numstr);
    $result = 0;
    foreach($numary as $val){
        $result += $val;
    }
    return $result;
}

　preg_replaceで正規表現を使って数字以外を除外し、残った文字をstr_splitで1文字ずつの配列にしたらforeachで順に計算して最後に結果を返すシンプルな形です。色々応用できるのではないかと思いましたが、落ち着いて考えるとわざわざこのような計算を求められる場面は少なそうです。
　例えばこの関数に通信チェックで紹介した端末情報「Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36」を入れたとすると、「5010064645373610800053736」という数字だけの文字列が残るので1つずつ足して「83」という数字が得られます。ただし、これだけだと同じ端末同じブラウザの人はみんな同じ結果になってしまうので、加えてIPアドレスの値も同じ処理を行った結果を取得して両方を足したものを基準値にしました。

　③のレイアウトについては、和紙に近いテクスチャを入れることも考えましたができるだけCSSだけでやりたかったので、

box-shadow: 0 1px 4px rgb(0 0 0 / 30%), 0 0 40px rgb(0 0 0 / 10%) inset;

　で表面の質感を作り、縦書き部分は writing-mode で設定しています。

margin:auto;
writing-mode: vertical-rl;
vertical-align: middle    

　writing-mode はCSS3から使えるようになりましたがかなり便利です。昔は縦書きにするならテキスト情報をあきらめて画像化してしまうか、1文字ずつで囲んで位置調整して云々あったのですがこれで一発ですから。margin:auto は入れなくてもいいのですが上位の要素に指定されているmarginに引きずられて位置が中央に来ないのでリセットしています。
　さらに最近だと値にsidewaysを入れると横倒しして縦書きにすることもできるようになるみたいです。こちらはまだFairFoxだけ表示可能なようですがそのうち他のブラウザにも広がるでしょう。デザインの幅が広がりますね。

　ここまでやって基準値から結果を出せるようにしたのですが、それだけだと画面が寂しいので結局背景にめでたそうな画像を配置しました。
　和歌が表示されているのも吉凶だけ表示すると内容に乏しいので百人一首から引用しています。よくある「仕事運」「恋愛運」などの御言葉を入れようかとも思いましたが、あのちょっと突き放した文章で「仕事－捗らず、待ち人－来ず」とか出たら悲しい気持ちになるので止めました。同様の理由で凶も外しています。やさしいおみくじです。

　新年早々くどくどと書いてしまいましたが改めまして今年もどうぞよろしくお願いいたします。