Alloy で Font Awesome を使う

みんな大好きカスタムフォントの代表である「Font Awesome」を、Titanium Alloy フレームワークで使ってみようと思います。

これまで「net.hoyohoyo.iconiclabel」を使ったりしていたのですが、これまた前回の「もくもく会」で磯部さん（@k0sukey）に聞いたところよると、若干古いらしく。。

結論から言うと、磯部さん謹製の「TiIconicFont」を内包した「alloy.widget.iconicfont」を使うのがよいようで。

今回は、その「alloy.widget.iconicfont」の使い方と、さらに「TiIconicFont」を内包した Twitter Bootstrap風ボタンが使える「nl.fokkezb.button」の使い方を紹介したいと思います。

Font Awesome の基本

普通はこう使いますよね。

fontawesome_test.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Font Awesome Test</title>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
</head>
<body>
  <i class="fa fa-github" style="font-size: 20em;"></i> fa-github
</body>
</html>

f:id:akiyoko:20140331232423p:plain

alloy.widget.iconicfont の導入

1. カスタムフォント

「alloy.widget.iconicfont」では、「Font Awesome」と「LigatureSymbols」がフリーで使えるようです。

$ TITANIUM_WORKSPACE=~/Documents/Titanium_Studio_Workspace
$ PROJECT_PATH=$TITANIUM_WORKSPACE/titanium-fontawesome

$ mkdir -p $PROJECT_PATH/app/assets/fonts

# Font Awesome
$ cd ~/temp/
$ git clone https://github.com/FortAwesome/Font-Awesome.git
(latest commit: 0373b63c16d7aa31b6715c3f81a98a2ffb9f40a6)

$ cd Font-Awesome/
$ cp -a fonts/fontawesome-webfont.ttf $PROJECT_PATH/app/assets/fonts/

# LigatureSymbols
$ cd ~/temp/
$ git clone https://github.com/kudakurage/LigatureSymbols.git
(latest commit: d54f43cd72d190b7a3c0b2ee1644fac770b4a146)

$ cd LigatureSymbols/
$ cp -a LigatureSymbols-2.11.ttf $PROJECT_PATH/app/assets/fonts/
$ mv $PROJECT_PATH/app/assets/fonts/LigatureSymbols-*.ttf $PROJECT_PATH/app/assets/fonts/LigatureSymbols.ttf

2. alloy.widget.iconicfont

$ mkdir -p $PROJECT_PATH/app/widgets

$ cd ~/temp/
$ git clone https://github.com/k0sukey/alloy.widget.iconicfont.git
(latest commit: 97dca737c54b296c43b08f47ae7771d33ee48ead)

$ cd alloy.widget.iconicfont/
$ cp -a app/widgets/* $PROJECT_PATH/app/widgets/

内包されている「TiIconicFont」がこちらも若干古いそうなので、入れ替えます。

$ cd ~/temp/
$ git clone https://github.com/k0sukey/TiIconicFont.git
(latest commit: dff728e7a20f7e9f2ad20a4be01f4476faaa4dc5)

$ cd TiIconicFont/
$ cp -a Resources/lib/FontAwesome.js $PROJECT_PATH/app/widgets/be.k0suke.fontawesome/lib/

3. tiapp.xml の編集

iOS用に tiapp.xml を編集します。

vim tiapp.xml
-----
    <ios>
        <plist>
            <dict>
                ・
                ・
                <key>UIAppFonts</key>
                <array>
                    <string>/fonts/fontawesome-webfont.ttf</string>
                    <string>/fonts/LigatureSymbols.ttf</string>
                </array>
            </dict>
        </plist>
    </ios>
-----

4. app/config.json の編集

app/config.json を編集します。

$ vim app/config.json
-----
    ・
    ・
    "dependencies": {
        "be.k0suke.fontawesome": "1.0",
        "be.k0suke.ligaturesymbols": "1.0"
    }
-----

5. サンプル

使用例はこんな感じになります。

index.xml

<Alloy>
    <Window class="container">
        <Widget class="icon" icon="icon-github" src="be.k0suke.fontawesome" />
        <Widget class="icon" icon="hatena" src="be.k0suke.ligaturesymbols" />
    </Window>
</Alloy>

f:id:akiyoko:20140401000301p:plain

nl.fokkezb.button の導入

Twitter Bootstrap風のボタンを使える「nl.fokkezb.button」を使ってみます。

1. nl.fokkezb.button

「.git」を入れたくなかったので、clone せずに tar をダウンロードしています。
ちなみに、Mac に wget が未インストールだったので「curl -L」を使っています。

$ cd ~/temp/
$ curl -L https://github.com/FokkeZB/nl.fokkezb.button/tarball/master > FokkeZB-nl.fokkezb.button.tar
$ tar xvf FokkeZB-nl.fokkezb.button.tar
(latest commit: 679ce806b61f6c03ad93d7ac4e07a120dc9ea75a)

$ rm FokkeZB-nl.fokkezb.button.tar
$ mv FokkeZB-nl.fokkezb.button-* nl.fokkezb.button
$ cp -a nl.fokkezb.button $PROJECT_PATH/app/widgets/

2. TiIconicFont

TiIconicFont を入れます。

$ mkdir -p $PROJECT_PATH/app/lib

$ cd ~/temp/
$ git clone https://github.com/k0sukey/TiIconicFont.git
(latest commit: dff728e7a20f7e9f2ad20a4be01f4476faaa4dc5)

$ cd TiIconicFont/
$ cp -a Resources/lib/* $PROJECT_PATH/app/lib/

3. app/config.json の編集

$ vim app/config.json
-----
    ・
    ・
    "dependencies": {
        "be.k0suke.fontawesome": "1.0",
        "be.k0suke.ligaturesymbols": "1.0",
        "nl.fokkezb.button": "1.0.4"
    }
-----

4. サンプル

こんな感じです。

index.xml

<Alloy>
    <Window class="container">
        <Widget class="icon" icon="icon-github" src="be.k0suke.fontawesome" />
        <Widget class="icon" icon="hatena" src="be.k0suke.ligaturesymbols" />
        <Widget style="bs-default" icon="icon-github" title="My title" onClick="doClick" src="nl.fokkezb.button" />
    </Window>
</Alloy>