はじめに

普段学習した内容をQiitaに投稿する目的は 学習した内容の整理 だったり 私はこんな知識やスキルを持ってますよというアピール だったり、 自分のため であることが多いと思う。自分のために学習することも素晴らしいことだが、機械学習の力で、おもてなしを量産するという記事を読んで、 たまには日頃お世話になっている方に感謝を伝えるために技術を使っても良いのでは？ と思ったのが本記事のきっかけ。

作ったもの

2018年お世話になったある方（以下「Aさん」と呼ぶ）に年賀状を作った。年賀状にした理由は上記記事を読んだのが年末で、ちょうど年賀状を作成する時期だったため。

使用技術はHTML5 + CSS3 + JavaScriptなので真新しいものはないが、Aさんに感謝を伝えることが目的なので気にしない。

感謝を伝えたいなら心を込めて手書きで書いたら？ とツッコまれそうだが、SNS上での知り合いのため手書きの年賀状を郵送することはできない。まぁ手書きで作成した年賀状の写真を撮ってDMを送ることはできるけど。。。

こだわった点

紙ではできないことをしたい

AさんとはSNS上での知り合いで紙の年賀状を郵送することができないため、計画当初からWebで作成、リンクをDMするという提供形態を考えていた。そのため紙の年賀状のような綺麗なデザインの年賀状を作ることより、動きのある年賀状を作るという案を採用した。まぁ綺麗なデザインを考えることを諦めたのは、デザイナーではない私に綺麗なデザインを考えるスキルはないというのも１つの理由ですが。

最初ははしるねこのような感じで年賀状の上をイノシシが走るようなことをさせたかったが、残念ながら私にはイノシシをお絵描きするスキルが無かった。

一生懸命お絵描きするも上手くいかず、新年に間に合いそうにないのでイノシシはCSS3で描くことにして、尻尾を動かすのと、おみくじ機能をつけて運勢をイノシシの縞模様の代わりに表示する案に変更した。

フォントとページ表示速度

年賀状のデザインを検討した際に色々な年賀状を見たが、タイトル部分（謹賀新年の文字）は毛筆フォントで描きたいなと思った。Webフォントを使えば簡単にできるが表示が遅いという問題もある。まぁ遅くなると言っても数秒くらいだからいいんじゃね？という気もしなくはないが、何となく気になるのと、見る側からすると早く表示される方が嬉しいので、下記2つの対策により高速化をした。

CSSでwebフォントの読み込みが遅い問題を改善する方法
- google fontsではあまり効果を実感できなかったとあるが、私が使用したフォントでも効果を実感することはできなかった。
サブセットでWebフォントの軽量化
- 私の場合は「謹賀新年」の4文字のみをサブセット化した。
- 早くなったと体感できるくらい効果があった。

無料で使える毛筆フォントは何種類かあるが、毛筆フォントの中でも丸みがあって柔らかく優しい印象の青柳隷書しもを使用した。

おみくじ機能

JavaScriptで配列をシャッフルする方法によると Array.prototype.sort() ではシャッフル結果に偏りが生じるらしいので、おみくじ機能は Fisher–Yates のアルゴリズムを使って実装した。Array.prototype.sort() で実装しても、Aさんが「運勢が偏って出力される！」と感じることはないだろうから無駄な努力かもしれないが。

function setMark() {
  var fortunes = ['大吉', '吉', '中吉', '小吉'];
  for (var i = fortunes.length - 1; 0 < i; i--) {
    var r = Math.floor(Math.random() * (i + 1));
    var tmp = fortunes[i];
    fortunes[i] = fortunes[r];
    fortunes[r] = tmp;
  }
  var mark = document.getElementsByClassName('mark')[0];
  mark.innerHTML = fortunes[0];
}

まとめ

Aさんからは「小吉でしたw」「年賀状のイノシシの尻尾が動いていてかわいい♡♡」という感想を頂いた。色々妥協した部分はあったが、楽しんでもらえたようなので良かった。

一方Webで作成したためAさんの名前などを入れることができず、年賀状の文章も「あなたにとって〜」と、ちょっと他人行儀な感じになってしまったのは残念な感じがする。

CSSで年賀状を作ろう！やお前らの年賀状は古いのように、他にも年賀状を作成されている方がいます。もし 誰かをハッピーにするために技術を使いたい と思っている方がいれば、バースデーカードでも来年の年賀状でも他の何かでも、挑戦してみてはいかがでしょうか。

2018年にお世話になった方に年賀状を作った話