Selfkleptomaniac

2013年のTiIconicFont + Alloy

ウェブ上の情報が少し古くなっていたようでいくつか質問があったので、現時点で動作するサンプルをまとめておきます。あすとろなんだっけかさんの『Titanium mobile “early” Advent Calendar 2012』の18日目、@hoyo1111 さんのエントリー『【１８日目】AlloyでもTiIconicFontを使いたい』を参考にしています。というかこれをほぼまるまる使っています。書き方を入門者に対応しただけですね。

TiIconicFontはサイレントヒルのひげ怪人Titaniumユーザー会ではおなじみのk0sukeyさんが公開してくれている、Font AwesomeやLigature Symbols、SS PikaのようなウェブフォントをTitaniumのLabelでも利用できるようにするモジュールです。インストール方法は次の通りです：

（１）ダウンロード

Alloyのプロジェクトはもう作成しましたね？まだなら、先に作成しておいてください。

TiIconicFontはGithubのページからZIP形式でダウンロードしたりgitでcloneして入手します。

（２）展開

Zipで落とした人はTiIconicFont-masterとかいう名前のディレクトリの下のResources/lib、cloneした人はTiIconicFont/Resouces/libを自分のAlloyのプロジェクトのapp/assets/以下にコピーします。app/assets/libディレクトリが作成されていることを確認しましょう。

（３）フォントデータの用意

TiIconicFontはそれだけでは動作しません。フォントのデータ（ttf）ファイルが必要です。例えばFont Awesomeならプロジェクトのウェブサイトからダウンロードして、展開したディレクトリのfont/fontawesome-webfont.ttfをapp/assets/fonts/以下にコピーします。app/assets/fontsディレクトリは存在しないので作成してからコピーしましょう。

app/assets以下にこれらが用意されればOKです。

app/assets/
├── fonts
│   └── fontawesome-webfont.ttf
└── lib
    ├── FontAwesome-deprecate.js
    ├── FontAwesome.js
    ├── IconicFont.js
    ├── LigatureSymbols-deprecate.js
    ├── LigatureSymbols.js
    └── ti.ss-pika.js

（４）iOS用の設定

iOSの場合は必要なファイルを生成するためにいったんビルドします。ビルドして作成されるbuild/iphone/Info.plistをプロジェクトディレクトリの直下にコピーして、コピーした方のファイルの最下部（/dictの上）に以下を追記します。Androidの場合は無視して地球の未来のことを考えます。

	<key>UIAppFonts</key>
        <array>
          <string>/fonts/fontawesome-webfont.ttf</string>
          <string>/fonts/LigatureSymbols.ttf</string>
          <string>/fonts/ss-pika.ttf</string>
        </array>

（５）動作試験用のViewを用意

app/views/index.xmlに下のような記述を用意します。

  <Label id="symbol" />

app/styles/index.tssにも適当な値を設定しておきましょうか。

"Label": {
  width: Ti.UI.SIZE,
  height: Ti.UI.SIZE,
  color: "Black"
}

（６）動作試験用のcontrollerを用意

app/controllers/index.jsに次のように記述します。

// Font Awesome
var fontawesome = require('lib/IconicFont').IconicFont({font: 'lib/FontAwesome'});
$.symbol.setFont({fontSize: 32, fontFamily: fontawesome.fontfamily()});
$.symbol.setText(fontawesome.icon('icon-thumbs-up'));

$.index.open();

Font Awesomeで利用できるアイコンの一覧はlib/FontAwesome.jsにあります。

（７）自慢