遊戯王イラストクイズ

「遊戯王イラストクイズ」とは2枚の遊戯王カードのうちステータスの大小を当てるシンプルなクイズを楽しめるサービス。

遊戯王イラストクイズ Yu-Gi-Oh Illust Quiz

「遊戯王イラストクイズ」とは遊戯王カードのイラストを使った愉快でシンプルなクイズを楽しめるサービスです。 The 「Yu-Gi-Oh! Illust Quiz」…

javascriptで動画加工をする

ブラウザで画像処理に続いて動画像処理。

• 動画ファイルを選択
• 選択した動画を再生
• 加工した動画を再生
• 加工した動画をダウンロード

これらをブラウザ上で実現。
HTML5とjavascript、優秀。

コウメ太夫百人一首

「コウメ太夫百人一首」とはコウメ太夫氏の「#まいにちチクショー」によって作られた百人一首を楽しめるサービス。

コウメ太夫百人一首

「コウメ太夫百人一首」はコウメ太夫氏の「まいにちチクショー」による百人一首が楽しめるサービス。

百人一首とは100人の歌人一人につき一首ずつ歌を選んだものであるため、「コウメ太夫百人一首」は百人一首ではない。
本来は一人二千百十八首というべきだが語呂が悪いので百人一首とする。

コウメ太夫氏の歌による百人一首はネットを中心に広く求められていた。
少なくとも2015年の時点で「コウメ太夫百人一首」という単語は登場している。
しかし、実際に「コウメ太夫百人一首」を遊ぶことのできるサービスは見つからず、したがって作ることとした。

複数の画像の中からランダムで1つを返して表示する

例えば画像が1000枚用意してあって、ページにアクセスするたびに別の画像をランダムで表示するようなWEBサイトを作りたいとする。

具体的にはこれが作りたくて調べた↓

Deep Yu-Gi-Oh! 完成する

Deep Yu-Gi-Oh!「Deep Yu-Gi-Oh!」はおよそ1万枚存在する遊戯王カードを学習して作られた、存在しない遊戯王カードを無から生成して表示する…

画像枚数が10枚程度ならファイル名を全部書いてランダムで選択してもいいが1000枚となると厳しい、また画像を変更・追加するたびにスクリプトを変更するのもスマートじゃない。
色々と方法は考えられるが「Firebase Storage」を利用する方法が、

• 作成が簡単
• 管理・修正が楽
• 無料

と都合が良かったためこれを採用した。

hexo-related-popular-posts

ブログによくある「この記事に関連する記事」みたいなやつを出したい。
このブログはHexoにより生成されており、Hexoには良い感じのプラグインが多数存在する。

ここでhexo-related-popular-postsというHexo用の素晴らしいプラグインを使うことで関連記事を生成する。

hexo-related-popular-postsのGitHubリポジトリで実験する。

公式ドキュメント通りにやればおおよそうまくいくが環境の問題か一部詰まった所がある。

• 環境

実装方法を以下に記す。

Vue.jsの練習をする

練習のためHexoブログ記事内でVue.jsを動かす。
最新のVue3.0を使う。
記事ファイル「〇〇.md」中に直接書いたら動く。

本文中に以下のように書く。

• 1. CDNからVue3.0を読み込む

1

<script src="https://unpkg.com/vue@3.0.0/dist/vue.global.js"></script>

• 2. いい感じに書く

1
2
3

<script>
source code
</script>

すると反映される。

opencv.js 4.4.0

知らないうちにopencvがjavascriptでも使えるようになっていた。
加えてopencv自体もいつのまにかバージョンが上がって4.4.0になっていた。
ブラウザで簡単に画像処理ができるのは極めて便利。
試してみる。

ブラウザで顔検出したい

ブラウザで顔検出したいのでface-api.jsを使う。

face-api.jsは画像から顔検出ができるJavaScriptのAPI。
顔検出以外にも顔特徴点抽出、年齢、性別、感情の判別などできる。
詳細はface-api.jsのgithubに書いてある。

顔検出ライブラリは他にも多数あるが、中でもface-api.jsはJavaScriptでありクライアントサイドで動いてくれるため以下の点で良い。

• ユーザ側で計算するためサーバに負担がかからない
• ユーザが画像をサーバに送る必要がない
• 開発環境に左右されない

Hexoブログ記事内でjavascriptを動かす方法

記事ファイル「〇〇.md」中に直接書いたら動いた。

本文中に

1
2
3

<script>
source code
</script>

と書くと反映される。