svgを表示する魔法なんて存在しない-SVGMagic解説

ここ最近，svg非対応のブラウザで「魔法のように」svgを表示できるjQueryプラグインなるものとしてSVGMagicを紹介しているサイトが見受けられますが，ちょっと待ってくださいよっと．
その動作原理を解説しないってのはフェアじゃないよという記事．
※脊髄反射で公開しているので間違いがあるかも知れません．

SVGに対する誤解を紐解く

憎きieがようやっと世代交代するにあたり，今年こそSVG元年となるべく，(個人的に)頑張らにゃいかん，そんな気がするんですが，そうは行っても世間的にはsvgはまだまだマイナーな存在であってwebを眺めると結構な思い込みとか偏見とかが見受けられます．まぁ別に構いやしないんですが，SVGのポテンシャルを引き出すにはより良いSVGへの理解は必須ですから，ひとつ私見ではありますがよくあるSVGに対する誤解に意見してみようかと．

つーかHIT数多すぎてびっくりしているんよ
ちょこちょこ追加していくよ
Thanx @rikuo .

注意・2014/01/16
この記事はある程度SVGについて調べた上で読むことをおすすめします．そうすることでSVGを”理解した後に生まれてくる”数々のモヤモヤが解消することでしょう．（筆者もかつてそうでした）
逆にSVGに不慣れな人が読んだ場合，却って理解を妨げる危険があります．

svgのセキュリティについて考える

便利な道具も使い方によっては凶器になりうるというのは洋の東西を問わず真理であり，svgそのものは非常に便利な仕組みですが，誤った認識のまま普及してしまうことは実に危ういことです．とりわけsvgの歴史的な経緯を鑑みるに，svgを取り巻く現状は非常に危ない状態にあると言えます．

今回はsvgは「なぜ危ないか」と言った面に焦点を当て，筆者の見解を述べて見ることとします．
※まとめを追加しました．（なんか書き忘れてたので・・・）

年賀状2013のプレビュー

珍しくカラーで描いてもらったのさ！毎年モノクロでもカラーでも印刷代が同じだったからのぅ・・・
今回もやっぱり妹画伯の筆が冴えてます．

svgはpdfとも競合する技術かも知れない→知れなかった

前々から感じていたことに，svgの文書としての特性を考えると，出力装置の解像度に依存しない点やハイパーリンクを貼ることが出来たりする点でpdf形式の文書にも近い点がある．もちろんpdfの方が目次を挿入することが出来たりと高機能なんだけれども．

svgのenable-background="new"属性の意味

svgのfilter機能に関わる属性にenable-background="new"というものがある．これはfilterから図形の背景画像を取得するのを許すプロパティなのだが，ようやくその存在意義が判った．

canvas要素の基本的な使い方

svg要素の基本的な使い方の姉妹編です．
（このどこが基本的なんだ？というツッコミはまあ横によけておいて）
http://www.h2.dion.ne.jp/~defghi/canvasMemo/canvasMemo.htm

勢いまとめはじめたcanvas要素のチュートリアルがとりあえず書き上がったので公開してみます．
こんなにも仕様が広大だったとは恐れ入る．
そんでもって改めて機能が足りないことに気づいて悶絶．
そんでもって更にapiが増えそうな気配にああやっぱりと．・・・疲れた．

後はちまちま更新したり，項目を追加したりすることもありますが，お見知りおきを．

ラスタ画像からsvgを作るアプリpotraceHtml更新

拙作svg生成スクリプトpotraceHtmlを更新してみた．

• 画像にフィルタを掛けてからトレース処理を行う為の機能を追加．
  特定の色情報だけを取り出して処理したい場合に使える（かもしれない）．

ぶっちゃけ前回の調査によりsvgのフィルタを流用できないという結論に至ったので，canvasを利用することとした．こんなありふれた処理なんだから，ライブラリも見つかるだろうと高をくくっていたが，意外なことにcanvasに対するフィルタ処理だけのライブラリって見つからないのですね．仕方が無いので，ライブラリも自作することに．

フィルタの仕様はsvg1.1seのものと，filter effects1.0のものを参考にして実装してみた．だが動作検証させてみるとコンボリューションフィルタの結果が違っているように見える．スクリプトのバグも疑ってみたが，gimpでのフィルタ結果とほぼ同様なので，svgにおける処理とは若干動作原理が異なるのかもしれない．

ブラウザ上でラスタ画像をsvgに変換するの続きの続き

と，この前まではpotrace.jsをコリコリと弄ってたのですが，これだけでは芸がない．そこで色々調べてみたら，HTML5で追加されたfileAPIと組み合わせて，ブラウザ上でローカルに保存されたラスタ画像にフィルターを施す処理を実現している方がいた．
http://d.hatena.ne.jp/scalar/20101026/1288068169

これはつまりgetImageDataメソッドが実行可能ということなので，これを応用すればブラウザ上でpotraceを実行させて，ローカルのファイルをsvg化できる筈．それでやってみたのがコレ．おお，結構使い物になりそうな感じなので，ちょこっと公開してみる事とする．

ケイブショップ閉店

標題の通り．
http://www.cave-shop.jp/

惜しむべき事態ではあるが，その戦略を紐解くに長続きしそうも無いなと感じていたところもある．

怪作・FEZであなたも倒れよう

最近xblaでリリースされたFEZというゲームの出来がヤバい．未体験の方は是非体験版だけでも手にとって見て．

「キューブを集めないと世界が滅ぶの」
何の脈絡もなく突然こんな感じで大きな使命を背負わされた少年ゴメス．2次元フィールドと3次元フィールドを切り替えて隠されたキューブを集めよう…というのがこのゲームの導入．これだけだと単なるアクションゲームに聞こえてしまうかしれないけれど，実はそんな生やさしいものではなかった．

Ubuntu 12.04 LTS アップグレードしてみたメモ

先日Ubuntuのメジャーアップデートがあったので早速12.04（コードネーム：Precise Pangolin ）にアップグレードしてみた．もともと気になるところもあったけれど，それほど気になる点もなかったのでそのままGO．
（そもそもUbuntuでのアップグレードは禁忌事項なんだが…）

で，処理完了後やっぱり不具合が発生したのでメモ．その都度更新するつもり．素人判断での対処なのでご利用は計画的に．

• Unityが起動しない．
  →例によってCompizの設定でUnityプラグインが外れている．（11.04→11.10の時も同じ状況が・・・）
  思い余って「unity --reset」を実行してしまったのは秘密だ．
  管理アプリが削除されてしまったのでcompiz-plugins-extraを導入する．
  
  1. Unity2d等でログインし，端末エミュレータにて下記のコマンドを実行．
  2. sudo apt-get install compiz-plugins-extra
  3. CompizConfig設定マネージャを起動し，「Ubuntu Unity Plugin」のチェックを入れる．
  4. 一旦ログアウトして再度Unityにてログインする． 
• wine上のギコナビのフォントが変化．
  →wineのバージョンが変更となったことによる影響．
  経験上wineの設定を下手にいじると元に戻らない（ギコナビだけ動かなくなる…）ので，ギコナビの設定のみ微調整．
  （ちなみに文字化けする場合は何らかの日本語フォントをwineのc:/windows/fontsディレクトリに突っ込んでおくと良い．）
• メモリを2.9GBまでしか認識できていない．
  →おそらくlinuxカーネルがpae非対応のものとなってしまっているからだろう．
  synaptic等で次のモジュールが導入されているか確認する．
  
  • linux-image-3.2.0-23-generic-pae
    今回↑のモジュールが外れていた．
  • linux-headers-generic-pae
  • linux-headers-3.2.0-23-generic-pae
  なお，12.04では最初からpaeに対応しているはずだとか… 
• RabbitVCSが動作するようになった．
  11.10ではnautilusがエラーを吐いて死んでいたのが治った！個人的にかなり嬉しい．
  （正常に動作するかはまだ試していないが）
• Audaciousでwinampのスキンを読み込んだ際に，イコライザー部が正しく表示されない．

Skullgirlsを購入してみた→

BGMの作曲者が山根ミチル氏といったつながりで以前より気になっていたゲーム「SKULL GIRLS」を購入してみた．このゲームは海外の対戦格闘ゲームフリークが作ったもので，いろいろな部分で日本の格闘ゲームのエッセンスが組み入れられており，その筋には割と評判がいいようなのだが…

svgにおけるjavascript覚書

単なる自分用の覚書．HTMLにおけるスクリプティングに近く，それほど違和感は感じられないが，細かい部分で引っかかる．下記の注意点を抑えておけば基本的なプログラミングは可能か？
随時更新中．

シネモラで痛感するシューティングゲームのご法度集

要するに，制作者・ゲーマーの間では長い時間をかけ，「これをしたらゲームをつまらなくする」といった禁じ手について暗黙的に認識を共にしてきたわけですね．様々なシューティングの文法を知っているがゆえ，シネモラをプレイしているうちにおかしな点が気になるのです．普段シューティングゲームを遊ばない人から見ると，単なる「難しさ」に感じられてしまうだけなのかもしれませんがこれはちょっとマズイ気がします．
シネモラを遊んでいて気になった点を書きだしてみましょう．

シネモラをプレイする際のヒント

愚痴ばっかりでもいかんからね，攻略する上で大切なところをメモしておこう．ストーリーモードを前提．プレイ時間でコンティニュー数が増えるとは言え，焼け石に水．きちんとした対処法を考慮しないと先には進めない．

シネモラの気になった点の続き

決して喧嘩を売っているのじゃなくて，ここが何とかなったらもっと遊びやすかったのにという嘆きです．

シネモラをプレイして本当に気になったこと

久々の横シューティングの完全新作「シネモラ」をプレイ．

うーん，惜しい出来だなあ．とにかくストレスフルなゲームデザインには閉口．

演出とかグラフィックとか弾幕とかオリジナリティにあふれていて，一見面白そうに見えるのだが，一般的なシューティングゲームにおける救済措置が一切ないことにより意味不明なほど難易度が上がっている．

2段熟カレー販売対決！

だそうで，ラジオの番宣でかなーり気になっていたので行ってみた．場所はベイシア前橋モール店．車で飛ばせば自宅から15分くらいの近場である．ちなみに前橋みなみモールは去年コストコがオープンしたところで，名前は似ているのに店舗の規模としては倍以上違うのだ．

内容はTBSラジオ「爆笑問題の日曜サンデー」の生放送中の1時間で何個グリコ2段熟のカレーを販売できるかといったもので，販売タレントとしてこちらはテツandトモの御両人．むこうははなわさんで実に過去3連勝という実績の持ち主．要は，おいらはたまたまチャレンジャー側についたわけです．ちなみに有名人を間近に見るのは，記憶を辿るにずっと昔に仙台の24時間テレビの会場で見たダンプ松本と，東京の劇場の裏口から出てきた田村正和(かなりの遠目)に続き3回目だったりする．

ブラウザに表示されている画像をとにかく保存しにくくする方法

知名度の向上を目指して秘蔵の画像をWebで公開したいが，コンテンツの保護の観点から無闇にコピーされたくないってのは割と考えられ得るケースなんだけれど，そもそもインターネットがデータのコピーを授受することで成り立っている以上，このような要件を完全に満たすことは出来ない．つまりブラウザ単体では，どんなに頑張ってもせいぜいローカルコンピュータに保存するのを妨害するくらいが関の山である．

じゃあどれくらい妨害できるのかってことを考えてみた．ブラウザの環境としてはcss3，HTML5，javascriptを想定する．なお，ユーザビリティーなんてものは一切考慮しない．そもそもユーザーの権利を妨害している時点で使い勝手は最悪なはず．