canvas要素にwebフォントを確実に描画する方法
webページをデザインする上で，必要に応じてフォントをダウンロードすることが出来るwebフォント機構は非常に魅力的で利便性の高い仕組みですが，使い方によっては色々と面倒な作業が必要なようです．今回解説するcanvas要素との連携はこの最たるもので，場合によっては正しい処理結果が得られません． ※2017現在ではより良いAPI（FontFaceSet/FontFace）がありますので, そちらを使ったほうが良いでしょう. http://defghi1977.html.xdomain.jp/tech/canvasMemo/canvasMemo.htm にて解説しています. (FontFaceSet/FontFaceで検索して下さい) webフォントとは 今日のwebブラウザの大部分ではcssにおける@font-face規則を記述することで，webサーバー上のフォントファイルを必要に応じてダウン
svgの印刷結果をクロスブラウザ化する
svgはxml記述で自由にグラフィックを描くことが出来る上，今日ほとんどのwebブラウザで表示・印刷することが可能であるなど，使い勝手が良いのが魅力です． そこで，レポート用紙などの用紙テンプレートをsvgで作ることを考えてみました．一般のテンプレートファイルはオフィスアプリケーションで作られていたりpdfで配布されているため，専用のツールを利用する必要があります．これをsvgで作っておけば環境を選ばずに出力可能となるためより利便性が高まるはずです． しかし実際に試してみるとwebブラウザ毎に出力結果が異なる等，中々思い通りには行かないようです．そこで，今回はsvgをwebブラウザで印刷する際の挙動についてまとめて見ました． svgを印刷用途で用いる svgは一般にディスプレイ上にグラフィックを描画するものとして考えられていますが，かつてのsvg1.2ではsvg printとして印刷用途と
svgフィルターのクロスブラウザ化手法
svgではfilter要素により元々の画像に様々な効果を与えることができます．これはこれで非常に魅力的な機能なのですが，一つ大きな壁が存在しています．それはブラウザ間の動作の違いです． 単純なフィルターであればそれほど問題は無いのですが，原始フィルターの掛け合わせが複雑になるに連れ，ブラウザの実装度合いにより動いたり動かなかったりと悩ましい問題が露見してきます．今回紹介するさざなみフィルターもアイディア自体はかなり前に思いついたものなのですが，クロスブラウザの問題から1ファイルで実現することが出来ず頓挫したものの一つです． 今回，ようやくその問題を解消することが出来たのでまとめて見ることとします． さざなみフィルターは次のようなアイディアから構成されています． 波のようなグラデーションを作ってアニメーションさせてみよう そのグラデーションをフィルタの入力として任意の画像にさざなみのような効
svgを使う上でwebkitを嫌いになる理由
html5がsvgをサポートすることとなってから数年が経ちました．このような状況ですからさぞsvgが世の中に広まったのか…というと別にそんなこともなくて，むしろ解像度に依存しない特徴のみが強調され，ラスタ画像の置き換え程度にとどまっている印象があります．毎年svg元年と叫ばれている中，なぜこのような状況なのでしょうか？ その答えとして筆者はwebkit系ブラウザのsvgにおける機能の貧弱さが一因として挙げられると考えています．chromeやsafariは実に先進的なwebブラウザと言った印象があるのですが，svgに限って言えばむしろ他のブラウザに大きく劣っているなど，実は非常に偏った癖のある環境なのです． 本記事では筆者がこれまでsvgを調査してきた上で気になったwebkit（主にchrome）の問題点についてまとめてみます．将来的に改善されることを期待しつつも，現状svgをクロスブラウザ
svgでリンク先を詐称する
svgは使いこなせてこそ，そのパワーを実感することが出来るのですが，使い方を間違えれば危険な面も併せ持っています．今回紹介する方法はかつてjavascriptで問題となったセキュリティホールをsvgの機能を使って再現するものです． 実証コード それでは次のリンクを見てみましょう．一見何の変哲もないリンクに見えます．それではこのリンクにカーソルを当ててみてください．おそらく「http://www.google.co.jp」へのリンクであることがステータスバーに表示されるでしょう． それでは実際にこのリンクをクリックしてみてください．意図した通りgoogleが表示されたでしょうか？ 意図した通りの結果だった人はそのブラウザではセキュリティ対策がなされています． が，google chromeを使っている方はどうだったでしょう？はからずも「http://www.yahoo.co.jp」が表示さ
svgの描画品質に影響を与える操作・まとめ
一般にsvgを使ったグラフィック描画は出力デバイスの種類に依らず美しい結果が得られるとされています．ですが本当にそうなのでしょうか？ここではsvgを使ったのに品質の低下を招いてしまうパターンについてまとめて見ることとします． svgの出力結果が美しい理由 まず，「出力デバイスの種類に依らず美しい結果が得られる」とは具体的にはどのようなことを指しているのでしょうか？ ディスプレイやプリンターを含めた出力デバイスは通常ラスタ画像の出力に特化しています．これらのデバイスには解像度と呼ばれる固有の値が定義されており，この値に従って画像を細かい部分に分割することでグラフィックを表現しています． 一方のsvgはベクタ形式と呼ばれる方法で画像を表現しており，そのままではラスタ画像を扱うデバイスでは表示することができません．従ってコンピュータはベクタ形式からラスタ形式への変換を自動的に行うことでベクタ形式
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
