WIZ-CODE.blogMENUWIZ-CODE.blogについてWIZ-CODE.blogJavaScriptやAjaxをテーマとしたブログです。Shadowがあります。Shadowを実装するのにいくつか方法がありますが、もっともポピュラーなのがCSS3を用いた方法です。SVGも独自のドロップシャドウ効果を実装している他、HTML5のCanvasでもそれは実装できます。CSS3について言えば、最新ブラウザでほぼすべての機能が実装されていて、IEバージョン9以下に実装していない機能が多いことを除けば、大部分のユーザーがWebサイトの視覚効果を体験できるようになっています。実際のところ、CSS3さえあればテキストの視覚効果を実装するには十分でしょう。確かにHTML5のいち機能であるCanvasにも図形描画の他にテキスト描画機能があります。最近ほとんどのブラウザでCanvasのテキスト描画機能がサポートされたとはいえ、その処理機能はとても貧弱です。複数行のテキストを表示できないといった問題から、フォントの種類とサイズを同時に指定しないといけない不便な仕様の他に、Canvasには文字間を調整する、CSSでいうletter-spacing機能が存在しないという欠点があります。フォントによってデフォルトの文字間だと文字の間が狭まっていて見にくい種類があり大変不便です。これでは素のAPIじゃ相手にならない、というかこれを使って何かやろうという気が起こらないのではないですか。これに比べると、アニメーションも自由自在のCSS3が輝いて見えますね。Canvas用のライブラリを見てみると、EaselJSというのがテキスト表示機能を含めて、非常に充実した機能を備えています。テキストアニメーションも得意であるらしく、兄弟ライブラリにはサウンド系のやプリロード系のライブラリがあります。EaselJSのライブラリにTxt.jsというライブラリがあり、これには文字の並びを弧の字に変形する機能などがあります。一方でこれらは、ゲームなどのグラフィック系コンテンツのためのツールであるととらえた方がいいのではないでしょうか。多くのサイトを見ていると、CSS3エフェクト全開なサイトはまだ珍しい方だし、随所でアニメーションしているサイトはさらに少ないわけで、これら派手なエフェクトやアニメーションはまだWebサイト必須の技術とはなっていないと感じます。このライブラリを少しかじったところ、日本語の改行がうまくいかないという問題があったり、出力するテキストのフォントやスタイルがすべて同じで、ある単語やフレーズだけ変えることが難しいそうです。Template.jsというのがあります。実はオープンソースの紹介サイトMOONGIFTで知らないうちに紹介されていました。ありがたいことであります。Template.jsをリメイクすることにしまして、これまでに使っていて変だなおかしいなと感じたところを改善、テンプレートの書式も新たに設定し直しました。日本語の改行にもちろん対応しています。単語/フレーズ単位で細かくスタイルを決められるようになっています。以前のバージョンとは互換性がなく、前に使用していたテンプレートはそのままでは動きませんのでご了承ください。Shadowの省略形はshでしたが、新バージョンではtsになりました。グラデーション機能を追加しました。半角の{}()[]をテキストとして記述するときの回避方法。テキストの変形(移動・回転・拡大)の順序。テンプレとは別に一行のテキストを即時出力する、quickEffect()メソッドを追加。見出しや画像にちょこっとのせる短いテキストを簡易に出力できます。JavaScriptで関数型プログラミングをサポートする軽量ライブラリのUnderscore.js(圧縮版は約6KB)に依存します。このライブラリはこちらのサイトでダウンロードできます。JavaScriptで様々なデータ処理をするときに役立つライブラリです。RubyやAjax黎明期に多く利用され、jQueryとの戦いに敗れて後に化石化したPrototype.jsとよく似たメソッドを持ちます。Canvasで作成したテキストは画像とみなされるのでコピペ対策にも。その代わりSEO効果が......テキストに適用するスタイルは三つのレベルに分かれていて、文章全体に効果のあるグローバルスタイル、行単位で有効になるラインスタイル、個々の単語やフレーズごとに有効になるフレーズスタイルがあります。これは前バージョンの仕様と同じです。これらのうちグローバルスタイルは、CanvasTextTemplateを初期化するとき、ハッシュ形式で第2引数に指定します。このため、グローバルスタイルはテンプレートに記述することはありません。ラインスタイルとフレーズスタイルは、テンプレート内に記述する形になります。文章全体でよく使うスタイルをグローバルスタイルまたはそれより下位のラインスタイルに記述することで、もっとも下位のフレーズスタイルで指定するスタイル数を減らすことができます。y)と描画される幅を指定グローバルスタイルで指定可能なプロパティmaxWidth......廃止しました。テキスト表示幅はoutput()メソッド実行時に指定する形になりました。lineWidth......文字の枠線の太さを指定します。border......文字の枠線の色を指定します。デフォルトでは枠線が透明になっているため、枠線が表示されないようになっています。color......文字の塗りつぶし色を指定します。fontStyle......font-styleを指定します。デフォルトは””(空文字)=normalです。fontVariant......廃止しました。fontWeight......font-weightを指定します。デフォルトは””(空文字)=normalです。fontSize......文字サイズを指定します。単位は数値で”px”表記は不要になりました。デフォルトは10です。fontFamily......フォントファミリーを指定します。lineHeight......プロパティ名をlineHeightに変更。行の縦の間隔を調整します。単位はフォントの高さを基準にした倍数で、デフォルトは1.0です。textIndent......行のインデント幅を指定します。単位は数値でデフォルトは0です。textShadow......それぞれshadowOffsetXやshadowOffsetYといったCanvasのAPIのプロパティ名で指定する方法に変更。letterSpacing......文字の間隔を調整します。文字サイズ基準ではなくピクセル数に変更。translate......新規プロパティ。テキストの表示位置をピクセル単位で変更します。第1引数がX座標の移動量、第2引数がY座標の移動量でコンマで区切ります。デフォルトは0,0です。rotate......テキストに回転効果を付加します。テキストの左上を基準に回転するため、そのままでは実用性がありません。そこでtextAlignをcenterにすると、単一行で単一スタイルのテンプレートであればテキストの中心位置から回転するスタイルに変えられます。単位は度数で0~360の整数を指定します。scale......新規プロパティ。テキストを拡大縮小します。第1要素にX方向の縮尺、第2要素にY方向の縮尺を整数で指定します。textAlign......新規プロパティ。テキストの描画位置を指定します。デフォルトはstartで左から描画されます。centerにすると、複数のフレーズや複数行にわたるテキストの場合表示が崩れますが、単一の行でスタイルも単一であると、テキストの中心部分から描画され、結果としてテキストの配置が描画開始位置を中心に左右に均等になります。textBaseline......新規プロパティ。フォントの縦の描画位置を決めます。デフォルトのideographicはフォントの底の部分を基準の描画なので、テキスト表示位置のY座標を指定しない場合、Canvas画面の上に文字が隠れてしまうためY方向の調整が必要です。これはtopに指定することでも解決できます。大きな変更点は各プロパティを仕切る記号が”,“から”|“になったことです。255,255,.7))があります。{(c=#000)オッス、{(color=rgb(255,255,0))おらゴクウ}}複数の値が要求されるプロパティは、コンマ(,)で区切ります。{(ts=1,1,2,#333|sc=1,2|gr=-180,0,150,0|gs=1,.85,.67,.5,.33,.16,0|gc=#f00,#f0f,#00f,#0ff,#0f0,#ff0,#f00)オッス、おらゴクウ}text-shadowプロパティを指定するときは、引数の順番が影のX座標、Y座標、ぼかしの強さ、カラーとなりますぼかしの強さとカラーは省略可能です。Y1)を入れ(例:gr=0,0,300,0)、次にgsまたはgradStopsにグラデーション範囲を0-1の数値で指定、そしてgcまたはgradColorsにgradStopsで区切った数ぶんのカラーを指定します。このグラデーションの指定方法はCanvasのAPIに沿ったもので、各用語についてはこちらのサイトに詳しく説明されています。ちなみにこのライブラリは、グラデーションの種類を線形のみサポートしています。Templateのような非常に素晴らしいライブラリーの公開をありがとうございます。こちらのライブラリーを使用させていただきたいのと、機能追加の件でご相談がありましてご連絡いたしました。お仕事としてのお願いとなるかと思うのですが、もしよろしければ後連絡先を教えていただければと思います。不躾なメッセージご容赦ください。それでは何卒よろしくお願いいたします。コメントをキャンセルメールアドレスが公開されることはありません。前回紹介した宇宙フライトシミュレーションに、いくつかの機能を追加しました。前回紹介した宇宙フライトシミュレーションに、いくつかの機能を追加しました。TemplateリニューアルJavaScriptやAjaxをテーマとしたブログです。