Admittedly something small.
2017年2月22日

けものフレンズっぽいロゴのジェネレータができたよ!

JavaScript canvas Vanilla.JS けものフレンズ


けものフレンズのロゴってカラフルでかわいいですよね!そんなわけで、けものフレンズっぽいロゴを作れるジェネレータをつくりました。たぶんだいたいのブラウザで動くと思います。(ただしIEはブラウザではないものとする。また、一部のブラウザでセキュリティ制限のため保存ができないという情報が入っています)

使いかたはサーバルちゃんでもわかるくらい簡単!テキストボックスに文字を入れれば、それがそのままロゴの文字に反映されます。あとはそのロゴの画像を右クリックとかそういうので保存すればOKです。下の方にダウンロードボタンもつけたので、これを押しても保存できます。ロゴの画像は背景が透明のPNG画像なので、何かの素材としてお使いください。なお、カラーリングや文字の傾きなんかは、ページを再読み込みをするとランダムに変化します。配色が気に入らない場合は再読み込みしてください。

【追記】らいせんす!

何件か問い合わせがあったので、追記しておきます。『けものフレンズ ロゴジェネレータ』で生成したロゴ画像は、『けものフレンズ』の二次創作ガイドライン(公式サイトの右上の『けものフレンズって?』というリンクを押すとガイドラインが出てきます。URL振ってください!)、及び『キルゴU』フォントの利用規約(ダウンロードしたときについてくるreadme.txtに載ってます)に従う限り、用途を問わず自由にお使い頂けます。私はロゴジェネレータの使い道について一切制約を設けるつもりはないので、私へ許諾を求めたり報告する必要は特にありません。

っていうか、二次創作というのは、問い合わせて許諾を得るとかじゃなくて、自分の判断でひっそりと公開して、著作権者に叱られたらごめんなさいして引っ込める、というつもりでいればいいと思います。ガイドラインが与えられているんですからそれに従えばいいだけです。それでも怒られそうで心配なら、その二次創作は止めておきましょう。

フォント!

フォントはキルゴUを使っています。キルミーベイベー! 漢字やアルファベットも使えます。そんなわけであくまでカラーリングとかが『っぽい』というだけであって、実はフォント自体は別のものです。当初の構想では、フォントも自分で作ってあの可愛さを忠実に再現したくて、オリジナルのロゴと同じように耳を生やしたりとかしっぽをつけたりとかしたかったのですが、想定される作業量の前に断念しました。誰かが、けものフレンズのフォントを作ってくれたら、ぜひそれを使いたいと思います。フォント制作に慣れている人はぜひよろしくお願いします。

フォントが違うので「あれでロゴジェネレーター名乗るの正気かよ」ってキレてた人もいました。ただし結局のところ、ほとんどの使っている人にとって重要だったのは「どれだけ元ネタをどれだけ正確に再現できているか」ではなく、「面白いか」「遊べるか」「簡単に作れるか」だったようです。たぶん、文字の種類や文字数の制限がなく自分の作りたいものが作れることや、三行もあってネタを挟みやすいこと、リアルタイムにプレビューできるので試行錯誤がしやすいこと、そういうポイントのほうが大切で、もし元ネタに合わせてひらがなとカタカナのみ7文字までといった制限を設けていたら、使ってくれるひとはもっと少なかったと思います。【追記】あとでフォントファイルを改造して、「けものフレンズ」の7文字だけは元ネタの文字と同じ形を再現するように改良しました。残りの文字をフレンズ化するのはちょっと大変すぎて断念しています。フォント制作はめちゃくちゃ大変です。

逆に、ここで元ネタの再現に変なこだわりを見せたら、作業量が膨れ上がって公開が大きく遅れるか、開発を断念していた可能性も大きいです。放送終了後に公開しても遅すぎます。100%の完成度のサービスを半年後に公開するより、60%の完成度のサービスを今公開して、要望や需要に合わせて完成度を高めていく方法を選んだわけです。100%のサービスを求めていた人には、いやぁ~めんごめんご~としか言えないです。筆者は完璧にこだわる血の気の多いフレンズじゃなくて、最初は手を抜いてそこそこのモノを作って提出して、外でごろごろしながら後で考えるタイプのフレンズなので。

やったー!ジャパリフォントだ……っておいコラ。サーバルちゃんの顔も三度やぞ。

このロゴを含む、けものフレンズの一連のアートディレクションは、株式会社Y'sさんによるものだそうです。デザインがとくいなフレンズなんだね!

つくりかた!

Qiitaなので一応技術的な部分に触れておくと、フレームワークはVanilla.js、Github Pages上の静的なHTMLペラ一枚、ロゴはCanvas APIの力技で描いています。仮想DOM? Babel? なにそれおいしいの? うーんでもあとでPureScriptで書きなおすかも……。今回のは技術的には極めて古典的というかとんでもなく時代遅れの方法で書いていて、なぜこんな書きかたをしたのか本人もよく思い出せません。【追記】思い出しました。最初、画像の解像度の問題がないSVGで作ろうとしていて、でもpurescript-halogenにSVGのサポートがなくて、こんな一発ネタのためにpurescript-halonge-svgを自分で作るのも面倒だし、じゃあもう素のJavaScriptでいいかってことでこうなりました。でも、各ブラウザのSVGの実装があまりにガバガバだったせいで、結局はCanvas APIで描くことになったので、PureScriptに移植してもいいんですがそれも今更面倒くさいです。それに、今考えるとSVGを渡されても加工のしかたがわからないフレンズも多いと思うし、PNGにしておいて正解だったようです。

かだい……

いまのところ一番の課題は画像を投稿する手順です。わかる人は単に画像を共有すればいいってすぐわかると思うんですが、それだとブラウザごとに手順が異なってしまうので戸惑う人も多いだろうし、『この結果をツイートする』みたいなボタンを設けるのが一番わかりやすいとは思います。タイムラインを見てると、画像を保存したけど、画像を添付するのを忘れてそのままツイートしちゃったーみたいな事故が起きてるみたいです。やっぱりそのへん一手間だと思いますし、なんとかしたいところです。

単なる画像のシェアにしてしまうと、自分の作ったものを投稿したときにツイートにリンクが乗らない場合があるので、サービスのシェアが広がりにくくなります。今回は趣味の一発ネタなので別にサービスが流行らなくてもいいですが、これがもし広告収入を得るためのサービスだったりしたら致命的です。ちゃんと『この画像を投稿する』ボタンを作って、作品をツイートすると同時にサービスへのリンクが乗るようにするべきですね。さらに、できればアプリ連携の権限も掠め取っておくといいんでしょう。私はそういうノウハウないのでわからないんですけど。

ただ、そうなると画像を保存してURLを付与するための何らかのストレージが必要になり、github pagesだけではどうしようもないわけです。Firebaseとか使えば一瞬で実装できるんですが、もったいないのであんまり無料枠も使いたくないし……。結果論ではありますが、今回もしFirebaseを使っていたとしても一瞬で枠を使いきっていたと思います。けものフレンズのコンテンツ力は、私の予想をはるかに上回っていました。

あともう一個課題を思い出しました。上の小さめの文字ですが、少しランダムに傾くせいで文字がわずかに重なり、そこで影が汚くなります。そのためあんまりシャドウを掛けないようにしているのですが、元ネタの再現度を考えるとちゃんとシャドウをかけたいです。そのうち直します。それと画像の解像度を調節できたほうがいいかもしれませんね。素材として使う場合、いまの仕様だと解像度がちょっと足りない感じがします。

【追記】それと、一部の環境で画像が保存できないようです。ようやく原因に思いあたったのですが、どうやらData URI Schemeの画像はセキュリティ上の理由でダウンロードが制限されている場合があるようです。

For security reasons, data URIs are restricted to downloaded resources. Data URIs cannot be used for navigation, for scripting, or to populate frame or iframe elements.

https://msdn.microsoft.com/en-us/library/cc848897.aspx

ただ、MSDNにそう書いてるわりに、私の環境ではEdgeでも問題なくダウンロードできています。具体的にどの環境なのかわからないのですが、超古いAndroidのWeb viewか何かでしょうか?また、ダウンロードしようとしても無言でキャンセルされるらしく、エラーメッセージを出すこともできません。github pagesのみでやっている限りは対策がありません。

へんこーりれき!

さんこーぶんけん!


このエントリーをはてなブックマークに追加