HTML5手習い

ウェブフォントの描画

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
代表的なWebフォントの配布サイトであるGoogle Fontsを紹介し、webfontloaderライブラリを利用してWebフォントをHTMLに組み込んで、Canvasに描画する方法について学びます。
講師:
08:53

字幕

このレッスンでは Web フォントを使って Canvas にテキストを描画する為の 方法について学びます Web フォントとはユーザーの環境に インストールされていないフォントを HTML から使用する為の仕組みです 最も有名な Web フォントの ホスティングサービスの一つとして Google Fonts が挙げられます Google Fonts上の Web フォントを使うには まずこちらの www.google.com/fonts の サイトを開いて 自分が使いたいフォントを選びます その上で各フォントの こちらの真ん中にある Quick-use ボタンをクリックすると このような画面に遷移します そして使用したいフォントの種別に チェックを入れた上で ページ下部の こちらのリンクタグの書き方の例をコピーして 自分のサイトの HTML の head タグの中に書き込めば Web フォントが使用できるようになります 使用する場合には CSS に このような font-family 属性を記述します 普通の HTML で Web フォントを 使用するだけであれば これだけで OK なのですが Canvas にテキストとして書き込む為には 少し特殊なやり方が必要です Canvas の JavaScript から 利用する為には まず JavaScript が実行される時点で フォントのデータがブラウザ内に ダウンロードされていなければなりません フォントデータのダウンロードの 完了を待つ為に こちらの webfontloader という ライブラリを使用します webfontloader はこちらの GitHub の typekit/webfontloader という URL から ダウンロードできます それではアセットの webfonts.html を まずはテキストエディタで開いてみて下さい 中身にはこのように Web フォントの ロードのコードが記述されています こちらの script の行が先程の webfontloader を使用する為の行になります そしてこの WebFont. という行からが 実際に Web フォントをロードする為の 処理になります webfont の load メソッドには オブジェクトを渡し google というプロパティに 更に入れ子にしてオブジェクトを記述し ロードしたい Web フォントの family を記述します ロードしたい Web フォントの 種別は配列で複数渡せます この場合には Droid sans フォントと Shadows Into Light フォントを ロードしています そして active プロパティには ロードが完了した後に呼び出される コールバック関数を指定します ここではコールバックの中で コンソールログに出力しています 実際に呼び出されるかどうか 確認して見ましょう 尚今回のような外部サイトの script を 読み込んでいる場合には ローカルサーバーから HTML を読み込む 必要があります http サーバーを先ずは起動しましょう Console をもう一つ立ち上げます その上で webfonts.html が置かれている ディレクトリを カレントディレクトリにします 私は webfonts.html を ホームフォルダに置いたので カレントディレクトリの変更は必要ありません ls コマンドで確認すると webfonts.html があります この状態で http-server ドット 現在のディレクトリを意味するドットです これを打って実行すると ホームディレクトリをドキュメントルートとして Web サーバーが起動しました さてこの状態で― ブラウザから localhost:8080/webfonts.html を 開いてみましょう コンソールログに文字列が出力されています これで Web フォントが JavaScript から 正しくロードされたことが確認できました それでは実際にソースコードを編集して Web フォントをキャンバスに 描画してみましょう 描画の処理はロードが完了されてから 行う必要があるので こちらのコールバックの中に書いていきます まずは Canvas オブジェクトと Context オブジェクトの取得です context の取得 getContext 2d ですね これで Context の取得ができましたので 描画してみましょう context 分かり易いように先ずは 背景を黒で塗りつぶしてからにします これで背景が黒に塗りつぶされる筈です ここで一旦確認してみましょう 黒く塗りつぶされました 黒だと少し色が強過ぎるので 50 50 50 の 1 位にしてみましょう この位でいいですね では context の font プロパティの設定 こちらで Web フォントを指定します ライブラリでロードした Shadows Into Light フォントを指定します フォント名は引用符で囲む必要がありますので ここで二重引用符で囲んでおいて下さい そして fillStyle は rgba の 100 100 100 位にしておきましょう そして実際に fillText で 何か文字列を入れてみます 座標は適当に 40 70 位にしてみます 描画されました これが Shadows Into Light フォントに なります もう一つロードしておいた Droid sans フォントでも描画してみましょう 少し小さめにして Droid sans 色も少し明るくしてみましょう 描画する文字列は一緒でいいです 少し下にずらして y を 140 あたりにして 描画 Droid sans フォントは このような形になります デフォルトのフォントも 比較の為に描画してみましょう sans-serif 体とただ単に指定します そしてもう少し色を変化をつけてみます 今度は y を 200 位にして 再度描画 デフォルトのフォントと Droid sans のフォントの違いが 分かったかと思います このレッスンでは Web フォントを利用して Canvas にテキストを描画する 方法について学びました

HTML5手習い

このコースではHTML5 APIを中心に、HTML5でのプログラミングについて学びます。HTTPや文字コード、バイナリデータやアニメーションの原理など実際のアプリケーション開発で必要となる基本的な知識を学びます。HTML5 Canvasを中心として、Web APIとの通信やWebフォントなどWebプログラミングで必要な技術を習得します。

6時間01分 (44 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2015年04月22日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。