slowjet

is a part of a carburetor

パズドラ風アイコンジェネレーター ver.2 #Webフォント編

7月時点ではiPhoneアプリにしたいなと思ってたんだけども、Canvas使ってプラスとレベル表記乗せたらおもろいということに気づきまして、結局Webアプリのパズドラ風アイコンジェネレーターをアップデートしました。

変更点は以下の通りでやんす。

  • UIの改善、デザインの変更
  • iOS6以降に最適化(SafariFirefoxの最新版にも対応
  • 画像のズーム、移動に対応
  • プラス、レベル表記を追加可能に
  • FONTPLUSのWebフォントを使ってみた

以前のアプリは、なんだかんだいって@rewishが作ったものを、ちょちょっと変えただけのもので、@rewishが作ったといっても過言ではない。というか@rewishが作ったんだし。

今回はUIも大幅に変えたいなと思っていたので、デザインは@shimaelにお願いして、フロントエンドは(サーバーそもそもないけど)全部作り直した。

先に自分である程度まで動くように作ってたんだけど、もらったデザインだと全然適用できなくて、 結局またUI部分は作り直して、2回作った感ある。これは僕の作り方がよくなかったので、反省すべき。

目玉機能は、プラスとレベルの表記を載せられるようになったこと。普通にCanvasのfillText()で乗せてるだけなんだけど、フォントはパズドラで使われているKurokane EBを使いたかったので、FONTPLUSのKurokaneStd-EBを使ってる。

とまあ普通にWebフォント使ってますけど、このアプリは画像にWebフォントを載せて、ユーザーがダウンロードできる、という物なので、利用規約に反してないかというところが気になったのでした。

FONTPLUSに確認したところ、Webフォントを使ったインタラクティブなコンテンツという扱いになるようで、全然問題ないということでした。

ところで、FONTPLUSにあるKurokaneStd-EBは、パズドラで使われているものとは少し違って、よく見るとウェイトやカーニングが違うんですけど、その辺はまあ普通気が付かないし、これでいいや的な感じです。KurokaneStd-EBしかないし。

(とか思ってたら、さっそくきょうすけさんに気づかれたw)

FONTPLUSのスマートライセンスで契約すると、デフォルトでフォントのサブセットを動的に行ってくれるんだけど、Canvasで使うような場合、初期化時に、テキストデータがないのでサブセットに含まれてなくて、ハハハハみたいな状態になる。

なのでFONTPLUSにはAPIが用意されていて、これを使うと、必要なタイミングで、サブセットを作ったりできて大変便利でございました。

データ読み込み後に、非同期モードにしておいて、

<script src="http://webfont.fontplus.jp/accessor/script/fontplus.js?El7q9AJq3dU%3D" charset="utf-8"></script>
<script>
  (function(FONTPLUS) {
    // 非同期モード
    FONTPLUS.async()
  }(this.FONTPLUS));
</script>

こんな風に初期化時に、必要なテキストでサブセット作ってます。

webfontText = 'Lv.0123456789最大+ダウンロード'

# KurokaneStd-EBサブセットの読み込み
FONTPLUS.load([
  {
    fontname: 'KurokaneStd-EB'
    # font-family: kurokane で利用できる
    nickname: 'kurokane'
    # 'aAあ': http://pr.fontplus.jp/api/
    text: webfontText + 'aAあ'
  }
], ->
  view = new PIG.View.App()
)

そういう感じで、FONTPLUSけっこうイケてる。みんなも使おう!
あ、有料です。僕が契約したのは、月or10万PVまで1000円のやつ。

次は実装面でハマったところなど書けたらかく。

関連エントリー