Tag: SVG

SVGタグの付いた記事

RSS

Gapplin 1.1

アプリケーションアイコン
Gapplin

先日1.0をMac App StoreからリリースしたSVGビューアGapplinですが、数日前から1.1が公開されています。

1.1では以下の点が新しくなりました。

  • 自動ダークモード機能を追加(イメージが白ベースのときに自動的にダークモードに切り替わります)
  • SVG(Z)ファイルのQuick Lookサポート
  • 現在のファイルサイズを情報バーに表示
  • 書き出しフォーマットにTIFFを追加
  • イメージを常にウインドウの中心に表示
  • ダークモードのときはスクロールバーが明るい色調に
  • フルスクリーンに対応
  • 対応言語にドイツ語を追加
  • 修正: SVGのソースにwidth/heightの記述がない際に、書き出されるイメージのキャプチャ範囲が間違っていることがあった
  • 修正: 初回のイメージ読み込み中にウインドウタイトルが表示されなかった
  • 修正: カラーパネルのアルファチャンネルスライダーが表示されないことがあった
  • 修正: いくつかのメモリリーク
  • ほか微調整

おもに1.0で間に合わなかった機能の追加になりますが、結構変わってます。目玉は自動ダークモード、Quick Lookの2つになるかと思います。

App Storeで1.0をダウンロードした方はおそらく既に自動的にアップデートされていることでしょう。

そもそもGapplin入れてない人はこれを機会にぜひー。

read more

Gapplin 1.0公開

アプリケーションアイコン
Gapplin on Mac App Store

先日つくったよ、と書いた OS X用のSVGビューア Gapplinですが、このたびめでたくMac App Storeで公開のはこびとなりました。というか、10日ほど前から既に公開されていたのですが、こちらのブログでの連絡が遅くなってしまいました。

もしβ版を使ってみた方がいらしたら、ぜひApp Storeから正式版をインストールして下さい。

詳しい説明は前回のブログに譲りますが、簡単に書くとGapplinはSVG画像ビューアです。WebKitレンダリングで、普通のSVGを始めSVGZやアニメーションSVGのプレビューをします。このソフトウェア自体にはSVGの編集機能はありませんが、Gapplinで開いたSVGを外部ソフトウェアで編集すると、リアルタイムでビューを更新してくれるので、テキストエディタでのSVG編集の際の表示確認に特に最適な仕様になっております。

SVGを頭っからテキストエディタで書く奇特な人はあまりいないでしょうが、IllustratorやSketchなどで作成したSVG画像を最後テキストエディタでクリーンナップするようなことは多いと思います1

もちろん単なるプレビューアとしても。OS Xで気軽にSVGZ開けないの不便よねー。

また、そもそもこのGapplinは私が以前から開発していたCotEditor用のSVG編集スイートをもっと便利にしたいがために開発されたので、このGapplinの公開を受けて、大元のSVG編集スイートの方もGapplinを使う仕様に書き換えました。こちらもあわせてお使いください。

つまり、Gapplin + CotEditor + CotEditor用SVG編集スイートの3つがあれば、OS XでのSVGテキスト編集はカンペキということになります。CotEditorでサクサクSVG書いて、表示はGapplinで確認。CotEditorでセーブしたら自動的にGapplinは更新されるし、xmlにシンタックスエラーがあればそれも表示されるし。べんりー。

β版から大きく変わったところは...なんだろう。安定性が向上しました。あとソースコードはもうAppleScriptObjCじゃなくなっちゃいました。今は全部普通のObjective-Cで書かれています。

正直最初のAppStoreの申請は、落ちるんじゃないかと高をくくっていて、さらにAppStoreはレビューに入るまでに最低1週間かかると聞いていたものですから、こんなにすんなり申請が通ってしまうとは思わなかったのです。submmitしてから4日ほどで In Review になり、そのレビューを抜けたのがなんと12分後。速すぎだろ...。いやたしかに問題がない限りはボタン一個押すだけくらいの流れ作業なんだろうけれども。ちょっとダメ出しとか受けてみたかった気もする。ということで心とサイトの準備が何もできていないまま公開してしまったのでした。

なお、ただいまQuick Lookプレビュー等を搭載したv1.1を申請中なので、うまくいけば今年中にさらに強化されたGapplinをお届けできることと思います。1.0は書き出しの範囲指定にちょっとミスがあるのでその辺りは1.1で直ります。GUIのプログラミングもたのしいねー。

ということで、よろしくお願いします。というか、宣伝活動を全然していないのでだれか広めて...。

  1. このようなGUIソフトの吐くSVGソースは大概ムダが多いので、テキストエディタで最後掃除をするとけっこうファイルサイズを抑えることができます。

Gapplin 1.0β公開

アプリケーションアイコン
Gapplin

OS X用のSVGビューア、Gapplinというソフトウェアを開発してみました。現在、専用サイトでβ版を配布中です。(JAVAとかAppleScriptとかを除けば)一応1024jp史上初のMacネイティヴアプリケーションになります。

SVG専用のビューアということでこのソフトウェアが必要な人口は少ないかとは思いますが、その分使う人にはかなり便利なソフトウェアに仕上がったと思うので、SVG愛好家の皆様におかれましては、ぜひ使ってみて下さい。

read more

SVG導入のためのレガシーブラウザ振り分け

やっと少しずつ現実的になってきた、webで使える夢のベクター画像SVG。拡大し放題だししかもテキストデータでXMLだわ容量小さいわってことで何ともかわいいヤツ。 当方ものすごくSVG好きです。

13.5pxでの表示
拡大してもなめらかSVGちゃん (ちなみにこの画像自体はPNG)

SVGが使いたい

もともとサイトの素材画像はIllustatorで作ってたのもあり、実はローカル環境ではだいぶ前から画像はSVGにしてたんだけど、webでってなるとやはりネックになってくるのが、いつもの我らがInternet Explorer。caniuse.comによれば、SVG画像を普通の画像と同じ様に扱えるのはどうやらIE9以降。いくらなんでも現時点で8を切るわけにもいかず、SVG導入は将にIE待ち状態。いつも通りです。しかたなくSVGクオリティーはローカルで個人的に楽しむにとどまり、webに上げる用は別途PNG-24に書き出してました1

それでもヘッダの蛙ちゃんとかサイトロゴとかポイントになってて且つ管理しやすい部分はPHPとかCSSの方で振り分けてモダンブラウザにはSVGを渡すようにしていたのですが、いかんせん個別対応なので全部に対してやるのはしんどいしソースも汚くなるから最低限しかやってなかった。

しかしiPadもRetinaになり今後本格的にHiDPI時代がやってくるかと思うと、そろそろさらりと一足先に対応しておきたいところです。もう我慢できん。

で、「てかそもそもApacheが画像渡す時点で選別してもらえばいいんじゃん!」と気付き .htaccess で振り分けることにした。

read more

SVG

最近ノート取ったりするのにXHTMLとか使ってみてるんですけど、ノートってのは自分で見るだけなんで(人に配ったりもするけど)自分の環境でさえ見られれば良い。後方互換性気にする必要なし。つまり、最新技術てんこもり放題なんですよ。そしてふと気づけばSafariはSVG見られるらしいじゃん。

ってことで、使ってみましたSVG!!

使ってみるったって、Illustratorで作ったのをPNG-8で書き出してたところSVGで書き出すだけなだけど。んで、img要素使ってたのをobject要素へ。このobject要素もかなり好きです。入れ子にできるのがすごい。便利。ユニバーサルデザイン。「貴方色に合わせます」って感じだ。img要素なんてなくなれば良いと思う。

そもそものきっかけは、今までずっと画面で見ていたノートを印刷してみた時、PNGの印刷の悪さに愕然としたから。やはりビットマップというものは画面で見るためのモノであって印刷には向かない。で印刷ならやっぱりベクター情報のSVG。というか、印刷抜きにしてもラスター方式しか選択肢がなかった今までのwebデザインにベクター方式が加わるだけてすばらしい。もともとIllustratorとかで書いてたモノをビットマップに落とす時点でかなりの情報劣化が起こっていたわけだし。使ってみたかったのよ、そんな素晴らしいSVGを。W3Cテクノロジーだし。

もちろんベクターデータってのが最大の利点なんだけど、SVG上の文字とか普通に選択できるのに驚いた。そうだよな、文字データも持ってるんだもんな。すごいよSVG。Safariがすごいのか? 分かってはいたけど、これがやはりSVGの一番の利点か。ユーザビリティ(なのか?)もばっちりだ。概念図とか、今までどうしようもなかったものがテキスト情報も持った状態で扱える利点はでかい。

ひとつ贅沢を言うとすると、Safariでフォントサイズ上げた時、一緒にSVG画像も拡大して欲しかった。そしたら最強。でもあれは "フォントのサイズ上げる" なんで、SVGも一緒に拡大しろなんていうのは酷か。むしろ違う行動しちゃうわけだもんな。

それに、object要素にwidthheightを指定しないと等倍で表示されず縮小されてしまう = widthheightを絶対書かないと使いものにならないのもめんどい。もちろん実際にWWW上に上げて多くの人が閲覧する場合はwidthheightも書きますが、自分だけが見るノートで、しかも極力速く楽に書きたいこの場合、いちいち縦横の長さ調べて書くのは正直めんどい。これはSafariが悪いのかIllustratorが悪いのかSVGが悪いのか分かんないけど。

あと、一回拡大しただけなのに大きくし過ぎだと思う。もう少し倍率は細かく設定して欲しい。

まぁしかしこの辺はほとんどブラウザ側の課題。

こんな不満を挙げてもなおあまりある魅力がSVGにはあるわけで。早くSVGが普通に使える時代にならないかなぁ。