ブラウザでフォントかるたを遊べるようにした

開発部の柳井です。令和も早いもので2年になりました。この1月も、3ヶ月に一度の恒例行事・全体会議があったので自分のチャレンジラボを紹介します。

そうだ、フォントかるた(JS)作ろう

1月といえばお正月。お正月の遊びといえばかるた。かるたといえばフォントかるた。（←！？）

約1年前に印刷博物館で「フォントかるた」(物理)を買ったは良いものの、遊ぶ時間が無い。~~というかこんなニッチなものを一緒に遊んでくれる人が居ない。~~読み札と取り札を眺めているだけでも楽しいけど、やっぱりかるたをやりたい。。

ここ1年ほど、WebFile以外にフロント側を触る案件に携わっているので、jQueryの勉強がてら、ブラウザで遊べるフォントかるたを作ってみました。なお、これは非公式のものですので、問い合わせなどある場合は公式には送らないでくださいね。

実装

ソースコードと、実際に動くものはCodePenで公開しています。右上の「Change View」ボタンで「Editor View」を選択すると、HTML、CSS、JavaScriptのコードが見られます。

まず、フォントかるたなのでフォントを変える必要があります。Webページの読み込みと同時に、ネットワーク上にあるフォントデータをダウンロードさせる「Webフォント」という手段を使えば、任意のフォントに変更出来ます。フォントのデータは自分のWebサーバに置いておくか、Google Fontsのように外部サーバからCDNで取得します。読み込んだフォントは、CSSのfont-familyで指定します。Google Fontsなら、どんなCDNとCSSを書けば良いか提示してくれるので、どんどんコピペします。

.font1 {
  font-family: 'Noto Sans JP', sans-serif;
}

.font1 {

font-family: 'Noto Sans JP', sans-serif;

}

Google Fontsで無料で公開されている⽇本語フォントは8つしか無かったので取り札は8枚です。

jQuery+Bootstrapで良い感じの取り札とクリックイベントを作っていきます。上記のように作ったfont1〜font8というクラスを、各カード(取り札)のdivに当てます。あとで並べ替えたいので、JSで動的に生成しています。

const cardText = "愛のあるユニークで豊かな書体。";
const fontNameData = {
  1: "Noto Sans JP",
  2: "Noto Serif JP",
  3: "M PLUS 1p",
  4: "M PLUS Rounded 1c",
  5: "Sawarabi Mincho",
  6: "Sawarabi Gothic",
  7: "Kosugi Maru",
  8: "Kosugi",
};
let answer;// 1〜8で決めておく(お題を決める処理は省略)

// 取り札を並べる
let cardHtml = "";
for (var i = 0; i < Object.keys(fontNameData).length; i++) {
  cardHtml += '<div class="col-sm-3 p-1">';
  cardHtml += '<div class="card font' + (i+1) +'" id="' + (i+1) + '">';
  cardHtml += '<div class="card-body">';
  cardHtml += '<h5 class="text">' + cardText + '</h5>';
  cardHtml += '<p class="font_name">' + fontNameData[i+1] + '</p>';
  cardHtml += '</div>';
  cardHtml += '</div>';
}
$("#play_area").html(cardHtml);
$(".font_name").hide();// フォント名を伏せる

// クリックしたら判定する(動的に生成する要素なので、documentにclickイベントを当てる)
$(document).on("click", ".card", function (e) {
  let clicked = $(e.currentTarget).attr("id");
  if (clicked == answer) {
    $("#now_result").text("お見事!");
    open(e.currentTarget);
    if (openedFont.length == Object.keys(fontNameData).length) {
      // 全て開いたので終了
      complete();
    } else {
      // 次のお題を設定する
      next();
    }
  } else {
    $("#now_result").text("お手つき!");
  }
});

function open(targetObject) {
  $(targetObject).find(".font_name").show();
  openedFont.push(parseInt($(targetObject).attr("id")));
}

const cardText = "愛のあるユニークで豊かな書体。";

const fontNameData = {

1: "Noto Sans JP",

2: "Noto Serif JP",

3: "M PLUS 1p",

4: "M PLUS Rounded 1c",

5: "Sawarabi Mincho",

6: "Sawarabi Gothic",

7: "Kosugi Maru",

8: "Kosugi",

};

let answer;// 1〜8で決めておく(お題を決める処理は省略)

// 取り札を並べる

let cardHtml = "";

for (var i = 0; i < Object.keys(fontNameData).length; i++) {

cardHtml += '<div class="col-sm-3 p-1">';

cardHtml += '<div class="card font' + (i+1) +'" id="' + (i+1) + '">';

cardHtml += '<div class="card-body">';

cardHtml += '<h5 class="text">' + cardText + '</h5>';

cardHtml += '<p class="font_name">' + fontNameData[i+1] + '</p>';

cardHtml += '</div>';

}

$("#play_area").html(cardHtml);

$(".font_name").hide();// フォント名を伏せる

// クリックしたら判定する(動的に生成する要素なので、documentにclickイベントを当てる)

$(document).on("click", ".card", function (e) {

let clicked = $(e.currentTarget).attr("id");

if (clicked == answer) {

$("#now_result").text("お見事!");

open(e.currentTarget);

if (openedFont.length == Object.keys(fontNameData).length) {

// 全て開いたので終了

complete();

} else {

// 次のお題を設定する

next();

}

} else {

$("#now_result").text("お手つき!");

}

});

function open(targetObject) {

$(targetObject).find(".font_name").show();

openedFont.push(parseInt($(targetObject).attr("id")));

}

idの付け方やJSの変数の使い方はもっと良い方法があると思いますが、jQueryのselectorを使う練習になりました。全て開いた時や並べ替える処理はCodePenを見てください。

実際に動かすとこんな感じです。最初は「お題」と、フォント名が伏せられた取り札が並んでいます。

取り札をクリックすると、正解ならフォント名が表示され、次のお題が与えられます。間違えると「お手つき」ですが特にペナルティや時間制限はありません。

拘った点

取り札の文言は「愛のあるユニークで豊かな書体。」のみ。公式をリスペクトしています。

また、取り札が8枚だけなので、フォントではなく位置を覚えることでお手つきせずにクリアするということが可能です。対策として、ちゃんとシャッフルして並べるモードを追加しました。

課題

3時間程度でひとまず見せられるレベルのものしか作っていないので、かるたとしてはまだ実装すべき機能があります。

取り札を縦書きにする
パスする機能
フォントを増やす(レベルによって数を変えられるように)
時間を計る
対戦機能：誰が取ったか記録(同じPC・ブラウザでマウス1つだと無理)

Webでの縦書きは鬼門と聞いていたので早々に諦めたのですが、先日公開されたアニメーション映画「HUMAN LOST 人間失格」の公式サイトはすごい。。

Vue.jsとかでもっと良い感じにしたり、通信機能やランキング機能をつけてみるのも面白いと思います。皆さんも業務や研究以外にもプログラミングで遊んでみてはいかがでしょうか？

KEYPOINT – キー・ポイント株式会社開発日誌