SVGをBracketsで使用・作成・編集するのに便利な拡張機能
この記事は約6分ぐらいで読めます
はい、今年も始まりましたね。アドベントカレンダーです。WEBCRE8.jpではたびたびアドベントカレンダーについて記事を書いていますが、今年は去年大して参加できなかったこのお祭りにフルコミットする所存です。一日2本書くこともあるでしょう。そしてこのWEBCRE8.jpに書くのが相応しくない記事については以下の場所に書いていきますので興味のある人は読んでやってください。
で、このシリーズではAdobeのコードエディター、Bracketsに関するネタを集めます。小ネタでも感想でもなんでもいいんですが、私は多分拡張機能を中心に記事を書くことになるかなーと思います。というか今月はほぼBracketsブログみたいになりますw
この記事ではBracketsでSVGを使う際に役に立つ拡張機能を紹介します。
BracketsでSVGを使う場合
行きます！
あとSVG自体についての参考資料は以下をどうぞ。
SVGを編集するとき
SVGファイルを表示させ、リアルタイムに修正
デザイナーの場合はSVGはIllustlatorなんかでベクター画像を作成してSVG形式で書き出すというのが普通でしょう。しかし既に完成してしまったものをちょっと直す、または納品された側が修正しなければならない場合もあると思います。そんなときに便利なのがSVG Preview。
通常Brackets上でSVGファイルを開いた場合はXMLファイルとして開きます。もちろんそのまま編集してもいいんですが、SVG Previewを使うとその画像としての表示をプレビューしてくれます。中身もそのまま見られるのでリアルタイムにプレビューしながら編集できます。
コードヒント
SVGの他にもデフォルトで様々な言語や形式に対応している
デフォルトではBracketsはSVGのコードヒントやハイライトが出せないですが、Bracket SVG Code Hintsで問題なく対応できます。デフォルトでもかなりの種類の言語に対応してはいると思うんですが、してなくても需要のあるものについてはこのように拡張が作られたりします。
SVGフォントのプレビュー
アイコンフォントなどのUnicodeも確認できる
SVGフォントを一覧することもできます。Brackets SVG Fontを使うとフォントそれぞれの形状が確認でき、マウスオーバーでUnicode文字列も確認できます。個人的にはSVGフォントを使うこともうあんまりないですが。
あと、フォントによってはBrackets上で表示しようとすると完全にフリーズしてしまうことがあるのでSVGフォントファイルをクリックするときは気をつけてください。
Snap.svgを使う
Snap.svgはSVGにおけるjQueryの様な存在
Snap.svgはSVGを少ない行数で書くことができるようになるJSライブラリーです。これのドキュメントをBrackets上に表示してくれるのがSnap.svg。機能としてはSnap.svgをダウンロードしたときに付いてくるものがそのままBracketsに表示されるだけです。
Snap.svg自体についてはSnap.svgの使い方まとめも参考になるでしょう。Raphaël.jsも触ってみたかったんですけど、結局乗り遅れたのでこっちをやってみたいですね。その前にSVG自体をもっと勉強しないとですが…。
おわりに
ひと昔前に比べてSVGの利用はやっと本格化してきています。小さな画像はアイコンフォントで、背景に使うなどで大きかったりリピートしたり、ちょっとしたアニメーションを含むコンテンツはSVG、という感じですかね。
明日の担当はいがらしたけしさんです★ほとんど参加者のいないBrackets Advent Calendarに参加してくれて嬉しい限りです…ブログでBracketsの文字を見るだけでも嬉しいですよ！w
まだカレンダーはスカスカなので埋まらない場合は私が書きますが、心やさしいBrackets使いの方、これから参加してくれても非常に嬉しいです。
Brackets Advent Calendar 2014 – Adventar
Bracketsがどんなエディターなのかをご存じない方は以下のエントリーをどうぞ。