HTML5飯 in 横浜 at 2014.6.21 にてお話させていただいた際の資料です。 FONTA（http://fonta.kayac.com）の制作に 用いた技術を中心に解説しています。

1. フォントをつくるサイトで使った
CanvasとSVGの話
面白法人カヤック 本多大和

2. 本多大和
ほんだ やまと
面白法人カヤック所属
@calmbooks
自己紹介
http://calmbooks.tumblr.com

3. 最近つくったもの

4. Q コーポレートサイト
http://www.q-co.jp/

5. 声の実体化体験
http://vimeo.com/96663702

6. 本日紹介するもの

7. FONTA
一人一文字 みんなでつくるフォント
http://fonta.kayac.com
1人1文字でつくるフォントのサイト。
サイト上でユーザに1人1文字書いてもらい、
約7000人で1つのフォントをつくります。
つくったフォントはダウンロードできたり、
Webフォントとして使えたりします。

8. フォントを「書く」機能！

9. FONTAでのフォントは、ベクター形式を採用。
書くときにパスの単純化を行なっています。

10. 1．三角関数、内積.. 数学的な計算で、筆跡の周りの点を算出
2．Paper.js を使い、パスの単純化（点の数を減らす、ベジェ曲線にする）
3．SVGのPath形式で文字列をサーバにPOST
http://paperjs.org/

11. M212.3 673.7C200.9 678.4 186.8 679.1 178.0 ….. C464.3 891.6 461.3 879.6 461.3 879.6z
SVGのPath形式
参考： 10分でわかるSVG 基礎編 - ＠IT
http://www.atmarkit.co.jp/ait/articles/1206/01/news143.html
開始点の移動 → m M
直線 → l L
水平線 → h H
垂直線 → v V
二次ベジェ曲線 → q Q
…

12. フォントを「つくる」仕組み！

13. <?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"
>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<font id="FONTA" horiz-adv-x="1024" vert-adv-y="1024" >
….（略）
<glyph unicode="&#x12A;" d="M0 0" />
<glyph unicode="&#x12A;" d="M0 0" />
….（略）
</font>
</defs>
</svg>
SVGフォントのフォーマット
参考： svg要素の基本的な使い方まとめ
http://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo_16.htm
文字の数の分、繰り返されている

14. フォントの形式
.ttf、.otf
一般的なフォントの形式
.eot
IE用にあると良い
.woff
Webページ用につくられた形式 軽量
.svg
字形がSVGでつくられた形式

15. SVGフォントから、.ttf .eot .woff への変換
http://fontforge.org/ja/
< サーバサイドのお仕事です。
@Konboi

16. フォントを「見る」演出！

17. ユーザーの筆跡を再現するアニメーション

18. [
{
weight : "S", // 線の太さ（ S / M / L ）
path : [{ x : 10, y : 5 }, { x : 10, y : 5 } ..] // 筆跡ポイントの配列
},
{
weight : "M", // 線の太さ（ S / M / L ）
path : [{ x : 10, y : 5 }, { x : 10, y : 5 } ..] //筆跡ポイントの配列
}
…
]
筆跡アニメーションのデータ形式

19. 1．投稿のときに、筆跡データをPOST
2. サーバで保持しておいたデータを取得
3．筆跡データを元に筆跡アニメーションを再現

20. ご清聴ありがとうございました。