フォントをつくるサイトで使ったcanvasとsvgの話 @html5飯

フォントをつくるサイトで使ったCanvas と SVG の話

面白法人カヤック 本多大和

本多大和ほんだ やまと

面白法人カヤック所属

@calmbooks

自己紹介

http://calmbooks.tumblr.com

最近つくったもの

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

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

本日紹介するもの

FONTA一人一文字 みんなでつくるフォント

http://fonta.kayac.com

1 人 1 文字でつくるフォントのサイト。

サイト上でユーザに 1 人 1 文字書いてもらい、約 7000 人で 1 つのフォントをつくります。

つくったフォントはダウンロードできたり、Web フォントとして使えたりします。

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

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

1 ．三角関数、内積 .. 数学的な計算で、筆跡の周りの点を算出

2 ． Paper.js を使い、パスの単純化（点の数を減らす、ベジェ曲線にする）

3 ． SVG の Path 形式で文字列をサーバに POST

http://paperjs.org/

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 基礎編 - ＠ IThttp://www.atmarkit.co.jp/ait/articles/1206/01/news143.html

開始点の移動 → m M直線 → l L水平線 → h H垂直線 → v V二次ベジェ曲線 → q Q…

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

<?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

文字の数の分、繰り返されている

フォントの形式

.ttf 、 .otf一般的なフォントの形式

.eotIE 用にあると良い

.woffWeb ページ用につくられた形式　軽量

.svg字形が SVG でつくられた形式

SVG フォントから、 .ttf .eot .woff への変換

http://fontforge.org/ja/

< サーバサイドのお仕事です。

@Konboi

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

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

[ { 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 } ..] // 筆跡ポイントの配列 } …]

筆跡アニメーションのデータ形式

1 ．投稿のときに、筆跡データを POST

2. サーバで保持しておいたデータを取得

3 ．筆跡データを元に筆跡アニメーションを再現

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