WebFonts として利用できるフリーの和文フォント

• CSS

2010年5月10日月曜日

WebFonts とは、ユーザーのローカル環境に左右されずに CSS でフォントを指定できるとても画期的な仕組みです。

WebFonts の demo を用意したので下記で WebFonts を実際にお試しできます。

WebFonts の demo (IE, Fx, Webkit, Opera で動作します)

WebFonts はとても便利で今まで似なかった表現ができる仕組みですがフォントファイル使用時のライセンスは難しく、本当に使えるのかがわかりづらいです。そこで一つずつライセンスを読み、WebFonts として利用できるフォントをまとめてみました。この記事内でもライセンス条文の抜粋を引用していますが、全文ではないのでフォントの利用時にご自身で再度ご確認ください。もし私の解釈に間違いがあったら指摘していただければ幸いです。

ライセンスが不明だったフォントについては作者さんに直接メールを送らせていただき、回答で OK をいただくことができた作品を紹介しています。紹介記事内のフォントのキャプチャは実際に Windows 7 の Chrome で表示した様子です。

なお、下記の表に出現する語句の定義は次のようにしています。

WebFonts

WebFonts として利用可能か (サーバーに UP してもよいか)

形式変換

TTF から EOT や WOFF などに変換してもよいか

形状簡略化

フォントファイルの容量を軽くする目的で、アウトラインのポイントを一部省略してもよいか

サブセット化

フォントファイルの容量を軽くする目的で、Web ページ内に使用しない文字を破棄してもよいか

M+ FONTS

ライセンス抜粋

あらゆる改変の有無に関わらず、また商業的な利用であっても、自由にご利用、複製、再配布することができますが、全て無保証とさせていただきます。

IPA フォント

ライセンス抜粋

1. 受領者はコンピュータにインストールされた許諾プログラムをそのまま、または改変を行ったうえで、印刷物およびデジタル・コンテンツにおいて、文字テキスト表現等として使用することができます。
2. 受領者は前項の定めに従い作成した印刷物およびデジタル・コンテンツにつき、その商用・非商用の別、および放送、通信、各種記録メディアなどの媒体の形式を問わず、複製その他の利用をすることができます。

M+ と IPA フォントの合成フォント

ライセンス抜粋

この配布物は、IPA フォント と M+ フォント および Bitstream Vera フォントの ライセンスに準じます。

VL ゴシックフォントファミリ

ライセンス抜粋

M+ FONTS 由来の部分については、M+ FONTS PROJECT のライセンスが適用されます。

さざなみゴシックフォント 由来の部分およびそれらの部品を元に改変した一部の文字については、さざなみフォ ントと同様に修正BSDライセンスとします。

なお、文書への埋め込みなど、フォントとしての再使用を目的としない用途におい ては、以下で言う Redistribution には当たらず、制限なく行えるものとします。

一部が修正 BSD なので無保証、フォントの著作権、ライセンス条文を表示する必要があります。

手書きフォント「アームド・レモン」 / 筆ペンフォント「アームド・バナナ」

作者のミリメートルさんに直接メールをして確認。ご回答いただきありがとうございました。

青柳疎石フォント / 衡山毛筆フォント / 青柳衡山フォント T / 衡山毛筆フォント行書 / 衡山毛筆フォント草書 / 青柳隷書しも

ライセンス抜粋

著作権放棄で完全フリーです。改編も自由です。使用についての制限はありません。

あんずもじ

作者の京風子さんに直接メールをして確認。ご回答いただきありがとうございました。

* 悪用や有害サイトでの使用は NG

梅フォント

ライセンス抜粋

これらのフォントはフリー（自由な）ソフトウエアです。あらゆる改変の有無に関わらず、また商業的な利用であっても、自由にご利用、複製、再配布することができますが、全て無保証とさせていただきます。

小夏フォント

ライセンス抜粋

この作品は、クリエイティブ・コモンズ・ライセンス by-sa 3.0 の下でライセンスされています。

CC 3.0 表示-継承なのでフォントの著作権を表示する必要があります。

さわらびフォント

ライセンス抜粋

日本語 TrueType フォントを開発するプロジェクトです。現在、Creative Commons Attribution 3.0 ライセンスの元でゴシック体と明朝体を公開しています（が、開発中なので、まだ文字が多数不足しています）。

CC 3.0 なのでフォントの著作権を表示する必要があります。

しねきゃぷしょん

ライセンス抜粋

これまで「しねきゃぷしょん」の再配布を禁じてきましたが、PDFなどへの埋め込みなど再配布に近い使用用途を希望される方がいらっしゃるので、配布に関しては制限をなくすことにしました。改造に関しては引き続き禁止とします。詳しくは同梱のテキストファイルを参照してください。

たれフォント

ライセンス抜粋

１２）たれフォントをベースとして違うフォントを作る。

再配布、及びご自分のホームページスペースに置く・・・ＯＫです

出島明朝

ライセンス抜粋

Code license:ﾂꀀMIT License

MIT License なのでフォントの著作権を表示する必要があります。

ぬかみそフォント

ライセンス抜粋

• 当該フォントは、非営利目的および営利目的での使用が可能です
• 当該フォントは、後述の再配布条件を満たす限り、再配布が可能です
• 当該フォントは、後述の改変条件を満たす限り、改変が可能です
• 当該フォントは、後述の改変再配布条件を満たす限り、改変再配布が可能です

ふい字 / まきばフォント / おひさまフォント

作者のふいさんに直接メールをして確認。ご回答いただきありがとうございました。

最後に

特に和文フォントは漢字を含めて数千字と膨大な字数の構成となります。そして、それらを一文字ずつ用意しなくてはなりません。また、作者さんにとってはフォントは作品です。WebFonts として無償で使えるとはいえ、作者さんへの感謝は忘れないようにしましょう。WebFonts として利用させていただく際には著作権表示を忘れずに。

あと、あのフォントもライセンス的に OK などという情報ありましたらコメントなどいただけると嬉しいです。

おまけ

キャプチャをとる際に、1回ずつ CSS の @font-face などを書き換えるのがめんどくさかったため、TTF ファイルをウィンドウ内にドラッグすればフォントが適用できるツールを作りました。Fx で動作し、Webkit では下記の HTML がローカル環境にあるときのみ動作します。

WebFonts 適用確認ツール (?)

5件のコメントがあります

新宿プログラマーズカフェナイト : SVG ネタで LT に参加しました

• SVG
• イベント / セミナーレポート

2010年4月23日金曜日

新宿御苑前 IDC フロンティア 10F セミナールームで行われた新宿プログラマーズカフェナイトのライトニングトークに参加しました。

自分はあまり興味はもっていただけないだろうと思いつつも SVG をネタを語らせていただきました。

参加者の皆様、フロントエンドなネタに反応していただきありがとうございました。

• 使用したスライド : <SVG/> (PDF)
• 使用した demo (今のところ Firefox 3.6以上専用。)
• 使用しわすれた demo (スライダーのみ。IE 9 PP, Opera, Fx, Webkit で動作)

demo について

demo の見所を以下にまとめてみました。

スライダーを SVG で再現

canvas と違い、SVG は描いた図形一つずつが DOM として維持される。また、それらの図形にはイベントを登録することができる。なので UI のパーツなどに向いている。transform による傾きなども可能。

HTML とシームレス

Flash などと違い、HTML とシームレスに扱うことができる。HTML の中に SVG を書くこともできるし、foreignObject により、SVG の中に HTML を書くこともできる。この demo では、 SVG 中に video 要素および p 要素を表示している。なお、この demo では foreignObject に SVG Filter を適用することで、間接的に HTML の要素にも Filter 効果を適用できているが、Fx 3.6 からは HTML の要素にも SVG Filter を適用することができる。これについては以前 post した『SVG の filter, mask, clip を HTML の要素に適用する (Fx 3.5 用)』を参照していただきたい。

SVG の Filter effect

SVG には Filter という効果がある。これは SVG の CSS を使い、SVG の要素に適用することができる。SVG の Filter は原始フィルターの組み合わせにより実現することができる。これにより、応用で様々な効果を作ることができる。例えば、ドロップシャドウの場合、

1. 自分のアルファチャンネルをコピー
2. コピーしたアルファチャンネルをずらす
3. コピーしたアルファチャンネルをぼかす

といった具合。

また、懇親会では引き続きライトニングトークとして SVG を HTML 上に表示する方法を 7 つ紹介させていただきました。これについてもまたの機会に post したいと思います。

やっぱり技術者の人の前で話すのおもしろいなぁ。いい経験になりました ! 開催側の方、そして hisasue さん、ありがとうございました !

コメントはありません

Teck Fielders セミナー東京

• Internet Explorer

2010年4月19日月曜日

Microsoft の新宿オフィスで開催された Teck Fielders に参加してきました。今回の『PROJECT UX : Web ブラウザー最新動向』と題して、IE に関する内容などに行われました。特に気になっていた IE の動向を。

IE 8 最新情報

パフォーマンス

• 起動速度向上
• 同時接続数の増加 (HTTP 同時接続数が 2 から 6 になった。つまりダウンロード速度向上)
• HTML パーシング速度向上
• スクリプト処理速度向上
• メモリー使用量の増加

利便性

• 検索候補
• アクセラレータ
• Web スライス

カスタマイズ版 IE 8

• IEAK をコンシューマ向けに使えるようになった。ツールバーなどのカスタマイズができる。いまは 13 社が。
• 個人でも IEAK による一般向けカスタマイズは可能。

安全性 : IE8 はセキュリティー対策も特に重視。

• タブを個別に管理。クラッシュ時など
• InPrivate ブラウズ
• SmartScreen フィルター (フィッシングフィルター、マルウェアブロック)
  • 他のブラウザーに比べてブロック率が高いことも第三者機関により示されている

サポート

• ライフサイクルポリシーは 5 年
• セキュリティ更新プログラム提供期間 10 年
• IE に関する電話でのサポートが行われてる

MS IE 6 移行キャンペーン

MS としても IE 6 をアップグレードを強く推奨している。エンタープライズについても個別に MS からこれを訴えている。

• セキュリティ (ガンブラーなど) のオンラインセキュリティ啓発活動
• バナーが用意されており、銀行などログインページにこれを表示してもらうといった内容
• セーフティ！ オンライン プロジェクト

MIXで明らかにされた

• MIX10 には JonResig (Mozilla) も登壇
• jQuery は Visual Studio などでもサポート。ｊQuery のエディタとして活用できるとのこと
• IE 9 Platform Preview 発表。開発者向けに用意したビルド。ベータ版ではない。
  • HTML5, CSS3, DOM, SVG など、次世代の Web 標準への対応
  • JavaScript エンジン 刷新 (JScript ではなく ?) : Chakra
  • ハードウェアアクセラレーション
  • Direct2D, DirectWrite をつかって表現。XP への対応はするかもしれないし、しないかもしれない。
  • Jpeg XR, TIFF もサポート。Jpeg XR は通常の Jpeg の圧縮効率を高めた形式。
  • ICC color profile サポート
  • フィードバックは IE9 PP のメニューバーの report issue から Connect にジャンプできるのでそこから。

ぜひ IE6 をIE8 にアップデートしてください人のこと

QA

Canvas ついてどうなの？

(この質問が) くると思ってましたが、今のところサポートしていないけどこの先どうかは…可能性は十分ある。他のブラウザとの相互運用性、互換性を考えても。

Filter, SMIL Animation については

これも相互運用性、互換性。使われているようであれば。

Video コーデックについては?

これも相互運用性、互換性。あらゆる機器で使われているコーデックという意味で今日現在では H.264 をサポートする予定。Ogg は国内でほとんど使われていないし…。今後 DRM の対応が問題になってきそう。

SL と canvas かぶるのでは？

その発想はない。HTML5 として準拠すべきかどうか。

コメントはありません

CSS Nite LP 9, HTML5 マークアップのセッションの資料と補足など

• HTML 5
• 執筆 / 講演など

2010年4月18日日曜日

2010 年 4 月 17 日に開催された CSS Nite LP9 の HTML5 マークアップのセッションに登壇いたしました。当日使用した一部の資料を以下に公開し、あわせて補足などをまとめました。

• サンプルサイト (XHTML1.0)
• サンプルサイト (HTML5 に書き換えた後)

おさらいと補足

HTML5 では従来の XHTML1.0 で存在した要素型に加え、28 の新しい要素型が増える予定です。また、いくつかの既存の要素型は意味がかわります。

セクション関連の要素

セクショニング系の要素型として、section, article, aside, nav が新たに登場予定です。これらの要素型を利用することで、HTML の構造をより明確にすることができます。セクショニング系の要素型は基本的に見出しの影響範囲を包含するように利用します。

例えば、今回利用したサンプルのページでは、

• body : なぞの野菜市場
  • nav : (見出しなし)
  • article : 取り扱う野菜について
    • section : 生産者について
      • aside : (見出しなし)
    • section : 農場について
  • nav : 商品一覧
  • aside : (見出しなし)

のような、章の入れ子構造と、役割を取得できます。この仕組みはアウトラインと呼ばれ、HTML5 の 4.4.11.1 Creating an outline に明記されています。nav : (見出しなし) の箇所のように、アウトラインに出現させるために見出しがないブロックをセクションとしてマークアップすることもできます。

HTML5 が安定した規格となり広く利用されるようになれば、検索エンジンや支援技術 (アクセシビリティ用の機器など)、や Web サービスなどが Web ページから取得できるアウトラインを有効に利用するかもしれません。

time 要素型

time 要素型は特定の日時をの日付や時刻を正確に示すための要素型です。CSS Nite LP では

<time datetime="1957-12-24">18歳の誕生日</time>

のように例を紹介しましたが、時間までを正確に示すこともできます。例えば

<time datetime="2010-04-17T06:30:00+09:00">昨日の6時半</time>

のように記述します。属性値末尾の +09:00 は日本のタイムゾーン (世界時からの時差) です。

また、記事の投稿日を意味する pubdate 属性をあわせて指定することもでき、その場合は

<time datetime="2010-04-17T06:30:00+09:00" pubdate="pubdate">2010月4月17日</time>

のよう記述します。これにより記事がどれくらい古いのかがわかるので、Web から 2010 年 4 月以降に投稿されたドキュメントを検索、などといったことができるようになるかもしれません。

video 要素型

video 要素型は動画を埋め込むことができる要素型です。羽田野さんのセッションでも紹介されていましたが、以下のようにブラウザーによってサポートしている形式が違います。そのため、今回ご紹介した作例のように複数のリソースを参照します。

<video width="320" height="240" controls="controls">
<source src="images/video_01.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'&gt
<source src="images/video_01.ogg" type='video/ogg; codecs="theora, vorbis"' />
<p>畑の様子。冬なので作物は少なめ</p>
</video>

各ブラウザーがサポートする形式は以下のとおりです。

動画形式としては、MP4 などの H.264 が一般的ですが、H.264 は Apple や Microsoft など、一部の企業のみがライセンスを持つコーデックです(AVC/H.264 Licensors)。H.264 について、現在は無料で利用することができますが将来的にどうなるかは不明なため、Mozilla や Opera はオープンなライセンスの Theora のみをサポートしています。最近では Google が VP8 というコーデックをオープンソース化しましたする計画のようです。。各ブラウザーによる対応コーデックに関しては今後まだ変化してきそうなので、その動向には敏感になっておくとよさそうです。

なお、MP4 などの形式から Ogg Theora に変換する対応にはシンプルな MiniCoder や多機能な SUPER c が便利です。

最後に

CSS Nite LP 9 でのご清聴、ありがとうございました。

導入編のような位置づけだったために、あまり深い内容にならず、深く掘り下げた情報を期待していた参加者さんには満足いただけないであろう内容となってしまいましたが、今後別の機会やこのブログにもうすこし濃い情報 (たぶん SVG ばかりですが…) をまとめていきたいと思います。

コメントはありません

いまどき ? いまさら ? clear fix のコード

• CSS

2010年3月4日木曜日

float によるレイアウトフローをクリアランスする手法として知られる通称 "clear fix"、昔は長いコードを書いていましたが、今ならもっと短くても問題ないです。

しかし、最近見かけたある weblog の記事内では昔から知られる長いコードを利用していたので、日々 CSS を書く皆様はどんな感じにしているのか気になりました。

自分は

element{ /zoom : 1; }
element:after{ content : ''; display : block; clear : both; height:0; }

のようなコードをスニペットにして使い回しています。

昔から知られる clear fix のコードでは content : '.' がありましたが、これは Netscape のための対応です。"." が擬似的に追加されることにより、高さを 0 にしたり、表示を消したりとコードが長くなっていましたが、Netspace に対応しないのならこれらをバッサリなくすことができます。

また、Mac IE をもう対象にしなければいけないケースも少ないでしょう。なので Mac IE 用のコードもバッサリなくせます。

IE 6, 7 は hasLayout を true にすることができればいいので /zoom:1 があれば 6, 7 ともに対応することができます。IE 8 では :before, :after と content プロパティーに対応しているので問題ありません。

いま対応しなくてはいけないような PC 用 Web ブラウザーのことを考慮すれば 4 つのプロパティーを書くだけで対応できます。昔からの clear fix のコードを使っているかたはこの機会にスニペットを更新してみては ?

ちなみに、overflow プロパティーの値を visible 以外にして float のレイアウトフローをクリアランスすることもできますが、この方法はあまり積極的に使わないほうがよさそうです。例えば、Firefox で印刷時に意図しない印刷になってしまうことがあります。Firefox では overflow プロパティーの値が visible 以外の要素内では印刷時に改ページを避けようとするためです。

つまり、overflow:hidden が適用された要素は

1. 現在のページに収まらなければ改ページして次のページに表示される
2. 改ページ後、そのページ内に収まらなければページに収まらなかった部分は印刷されない

といった流れになり、印刷時におかしな余白があいてしまったりする原因になります。

あと、Takazudo さん曰く、focus したときなどの outline が切れてしまう問題もあるみたいです。

12件のコメントがあります