Help us understand the problem. What is going on with this article?

小林さんちのメイドラゴンの話数表示ジェネレータのWeb版を作った

More than 3 years have passed since last update.

はじめに

どうも、小林さんちのメイドラゴン原作全巻揃えてどっぷり中毒になってる@ygknです。

さて、先日投稿した小林さんちのメイドラゴンの話数表示ジェネレータを作ったですが、さらなるいいね&ストックを求めてシェルスクリプトを使う以上、利用できる環境や人も限られているのではと思ったのでこの土日でWeb版を作ってみました。

小林さんちのメイドラゴンタイトルgifジェネレーター

動作確認は PC Chrome 56 (Ubuntu 16.04 64bit)、スマホ Chrome 55 (Android 6.0.0) で行っています。

解説

技術の選定

最初は先述の記事で作ったシェルスクリプトを Node.js なり Ruby なりで動かしてつくろうかなどと考えておりましたが、 jsgif というライブラリを使えば JavaScript で簡単に作れそうだったのでその方法で作ります。

ライブラリのインストール

が、このライブラリはどうやら npm にも bower にも対応していないようです。

どうやってインストールしましょう? ……そうです。僕達には Git がついています。

Git Submodule を使用します。

git submodule add https://github.com/antimatter15/jsgif.git

このとき、SSHではなくHTTPSでクローンしましょう。理由はあとで話します。

フォントの検索

フォントにもこだわりましょう。今回は Identifont というサービスを使用しました。文字の形状に関するいくつかの質問に答えるとそれに合致するフォントを示してくれます。

どうやら cinecaption というフォントが近いようです。嬉しいことに再配布可です。

コーディング

このサイトをかなり参考にさせていただきました。感謝感激雨霰です。

jsgif の使い方を簡単に言うと、1フレームごとの画像をcanvasに描画し、それをcontext.getImageDataで取れるRGBAの配列を渡すといった感じです。

const encoder = new GIFEncoder();

encoder.setRepeat(0);
encoder.setDelay(500);
encoder.start();

// canvasに何か書く
//   e,g. 文字 → context.fillText() 画像 → context.drawImage() など

encoder.addFrame(context.getImageData(0, 0, width, height).data);

今回は最初に緑の背景に文字を書いた状態をgetImageDataで取得し、毎フレームputImageDataしてフレームごとの画像を重ねました。

context.fillText()がWebフォント使用可、最大幅指定可などつよみを発揮していて助かりました。

しかし、canvas の Gif 変換、 Base64 Data URI 化は重いので、 Web Workers で行っています。(worker.js

また、Promiseを応用して一回全てをフレームの画像を取得するとキャッシュして二回目からはロードを省略するようにしています。

最初は変換後のデータをData URIとして扱っていましたが、その場合URLが必然的に長くなってしまいます。

ダウンロード操作はa要素のdownload属性を利用して実装していましたが、a要素におけるhref属性の値は最大長が決まっているようで、その長さを超えるとネットワークエラーを起こします。ここでだいぶハマりました。

なので、Base64文字列に変換後、Blobオブジェクトに変換し、 window.URL.createObjectURL でURLを生成しています。

コードが結構短いので、気になる方はGitHubに上げてるソースを読んでみるのもアリだと思います(見苦しいコードで恥ずかしいですが……)。

Twitter で共有 とかもやりたいですね……。 実現したらこの記事更新するか別の記事に書きます。

デプロイ

今回は GitHub Pages を使用しました。

さて、ここで Submodule のクローンの仕方が SSH だと GitHub さんに怒られます。これが HTTPS でなければならない理由です。

おわりに

カンナちゃんかわいい

ygkn
JSer。 WriterLighter ( http://writerlighter.github.io/ )という小説用のテキストエディタを作っています。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away