SVGで自作フォント使ってHTMLで読み込む

世間一般的に需要はものすごく少ないと思うのだけれども、HTMLに埋め込んであるSVG画像内で独自フォントを使ってにゃんにゃんしたい場面が出てきた。HTMLで独自フォント使うだけならハードルはまだ低いと思うのだが、SVGを一枚噛ませるというのが曲者だ。

そもそも独自フォントってあれっしょ?作るの大変っしょ?と思ってたのだが、どーやらInkscapeでSVGフォント作ってから、そいつをクラウドの変換くんにぶちこめばTrueTypeFont(ttf)がサクッと作れるらしい。詳しい作り方については「inkscape svg font」とかでググったらそこそこ情報出てくるので、ここでは割愛しとくわね。
続きを読む SVGで自作フォント使ってHTMLで読み込む

Vue.jsでDOM要素を増やす(&JSFiddleおためし)


▲パワポで描いたJSFiddleのロゴ(パチもん)

最近Vue.jsを始めたのだけれど、動的に要素を追加するにはどうすればいいんだろうかという所で小一時間悩んだ。jQueryだと何も考えずにappend()なり使ってペペペペッてやってたんだけどね。ちょっと調べてみると、Vue.jsではappendTo()とかいうのがあるかと思ったらバージョン2からは削除されててネイティブAPI使えだとかいう話になってるみたい。

しかしせっかくVue.js使ってるんだし、もうちょいなんかこう・・・スマートに実装できないもんかね?ググり回ってもトレンドなお作法がよく分からんので「JSFiddle」ってやつで試行錯誤しながらやってみた。

JSFiddleってのは、WEB上でサクッと組んだコード(HTML/CSS/JS)がサクッと動かせるサービスで、ブログへのコード貼り付けも簡単にできる。しかも、jQueryだとかVue.jsだとかの有名所のライブラリなんかは、「script src=・・・」とかわざわざ書かなくても、予め「このライブラリのこのバージョン使うかんね!!」って設定しとけば、勝手にロードしてくれる。うほっ、超べんりー。
続きを読む Vue.jsでDOM要素を増やす(&JSFiddleおためし)