Blog

Published on

RSS

Gapplin 1.0β公開

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

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

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


SVGビューア

[スクリーンショット]
スクリーンショット (ダークモード)

私1024jpがSVGに首ったけなのは、過去の配布物や制作物からもわかるかもしれません。基本的に私の作るSVGは少なくても最後の行程でCotEditor(テキストエディタ)で手を入れます。時には全ての行程をテキストエディタだけで仕上げることも。

そうすると、欲しくなってくるのは編集時の確認用のSVGのプレビューアで、今までは、これも自分で書いたCotEditorのマクロを使っていたのですが、それでも欲しい機能全部は賄えてなかった。

ということでこのGapplinは私が欲しいSVG用アプリケーションを形にしたものです。

配布ファイルの中のREADMEにも書いているのですが、改めてGapplinの特長を抜き出し。

Gapplinの特長

  • SVGZをプレビュー
  • アニメーションSVGをプレビュー
  • WebKitレンダリング
  • 自動リロード機能
  • 背景切り替え
  • PNGやPDFへの書き出し
  • 画像サイズに合わせてウインドウをコンパクトに表示
  • 指定したテキストエディタにファイルを渡す

この辺りが特徴になります。実際に現在OS XでSVGを扱っている人なら、この特長で挙げたことの利便性がわかっていただけると思うのです。

SVGの表示

そもそもwebブラウザで見られることを前提にコード本意で作成されたSVGは、IllustratorやGimpなどSVGを編集"できる"と言われてるソフトウェアではちゃんと描画を再現できない。奴らCSSとか全然ですよ。となると今度は実際にブラウザに渡すことになると思うのですが1、そうすると今度はSVGZファイルは単純なドラッグ&ドロップじゃ認識してくれない。Webブラウザの適切なウインドウサイズと画像ビューアのそれとは違うし。GapplinはSafariと同じWebKitでレンダリングをしているので、Webブラウザで表示されるのと同じ画を確認できます。

書き出し

そして、そもそも、そのように作ったSVGファイルをPNGなんかにラスタライズするまともな手段というのが今まで皆無だったんです。私もCotEditor用マクロのためにラスタライズの方法を模索してみたのですが、私の希望する「背景がちゃんと透過」されて「余白なくSVG画像のサイズ通りに書き出される」方法はまずない。大概SVGの解釈がいい加減か背景が白い。これもWebKitでみたままラスタライズして欲しいのよ。それに透過してなきゃ使えないじゃない。

テキストエディタの傍らに

また、自動リロード機能や背景切り替えは、実際にテキストエディタでSVGを編集しながら、Gapplinをプレビューアとして使うときに効力を発揮すると思います(このような使い方をしたい人がどれくらいいるかは疑問ですが)。自動リロード機能はMarkedの使い心地を目指しました。また背景切り替えは、真っ白なアイコンなんかを編集したいときに有効だと思います。アニメーションSVGなんかも、普通のグラフィックソフトだと確認しづらい部分でしょう。

成り立ち

ドロップレット -PhantomJS + AppleScript

そもそもこのソフトウェアは、複数のSVGファイルを一気にPNGにラスタライズするバッチ処理用のドロップレットとして構想・開発されました。PhantomJS2という、WebKitにコマンドラインからJavaScriptでアクセスできるライブラリがあるのですが、それを使えばSVG画像を希望のPNG画像にラスタライズできるのではと思い立ち、そのためのJavaScriptを作成、それにドラッグ&ドロップで実行できるAppleScriptのドロップレットラッパをつけたもの、が最初のGapplinの形です。

で、せっかく作ったから配布しようかなと、アプリケーションアイコンやら名前やら配布用webページを用意するのと平行してXcodeでユーザインターフェイスを整えだした頃から、SVG画像に対するもうひとつの願望「SVGのビューア」が頭をもたげ始めてきたのです。

ビューア -AppleScriptObjC

Xcodeを使えばWebKitを通した表示がすぐ作れるというのは、様々なObjective-Cの教本やら雑誌連載ですぐにブラウザ作成が挙げられることからも察しがついていたので、WebKitを使ったSVGの表示も結構楽にいけるのではなかという考えがむくむくと。しかもAppleScriptはMavericksでAppleScriptObjCという名前でかなりObjective-Cの対応の強化がされたとのこと。もしやASOC (以下、AppleScriptObjCのこと)でこのままビューアのインターフェイスがつけられるのでは。

案の定web上のチュートリアルを見ながらブラウザを作るというのをやってみたらすぐできたのでますます、ビューアを作るという目的にすり替わっていったのです。

で、結局このようにASOCでSVGビューアを作成・配布するまでに至ったのですが、予想外にネックになったのはdocument-based applicationという概念。Gapplinはそのソフトウェアの性質上document-basedなのですが、document-basedは普通のシングルウィンドウのアプリケーションと比べて作法が多い。まずはその仕組みを一通り習得するというところから始めるハメに。さらに真面目に作り始めてみると、ネットにASOCの情報なんてほぼ転がっておらず、実際にはObjective-Cの情報を適宜ASOCに置き換えながら開発をするという作業。ネットで使えそうなコード見つけてもコピペするわけにはいかずASOCに翻訳。途中から「これだったら最初からObjective-Cで書いた方が早いのでは?」という疑問も。ただ、元々私はObjective-Cをぼんやりとしか知らず、自分では書いたことはない人間だったので、このASOCというブリッジを通して、Objective-Cに触れ、OS X用のソフトウェアを作れたというのは良かったんじゃないかなと思います。もともと(ドロップレットとして)ASOCで作られていたソフトウェアだし。

とはいえ、作ってるとどうしてもASOCでは実現できない機構とかも出てくるので、今後は緩やかにObjCに書き換えていくかもしれません。すでにObjCで書いてるクラスもいくつか。ObjCの書き方も大分わかったし。それに今やPhantomJSも使ってないし、もともとのドロップレットだったころのAppleScriptらしい書きぶりももうほぼ皆無。いや、好きなんだけどASOC自体は。愉快な言語だなぁ。

アイコン

まぁ、一応アプリケーションアイコンを作るのを趣味としてる人間なので、ここは手を抜かない方がいいよなぁと。ソフトウェアにキャラクター3を与えてそれをアイコンにする、という手法が私は好きなので、このGapplinもオバケというキャラクターを使っています。

元々はドロップレットとして作成していたので、ドロップしたくなる意匠というのが当初の要件でした。ドロップしたくなると言えば矢印とか箱ですが、可愛くしたかったのでドロップされるファイルを待ち受けて口を開けてるモンスターにしようということになり、当時自分の中で熱が上がってたオバケの意匠にしました。このおばけにSVGを与えると、せっせとPNGにしてくれる感じをイメージして。シッポがカクカクなのは、ラスタライズされる感じを表してます。透けてるのはアルファチャンネルを正しく扱えるという自負の現れです。

ドロップレットではなくなってしまったのでこの意図は意味がなくなってしまったのですが、アイコン自体はせっかくかわいいのができたし徐々に愛着が湧いてきたので引き続き使うことにしました。

Gapplinという名前

GapplinはAppleScript(りんご)で動いているおばけなので、りんごのおばけ→ガップリン という流れです。私はFF派ですがね。

最初のうちはずっとsvgConverterという名前だったのですが、公開することを決めたのにあたって、これじゃああまりにも味気ないから(既存のと被りそうだし)と、もう少し可愛げのある名前をひねり出したのです。アルファベットで表記した時の字面も悪くないし。 アイコン的にはガップリンの要素はひとつもありません。名前だけ。あまりにも体を表していない名前ですが、いいじゃない、かわいいし。

専用ページ

せっかくなので専用ページも作ってみました。たまにはこってこての今風フラットも。Twitter Bootstrapっぽくもあるけどフルスクラッチです。今はまだ簡素なんで、正式リリースまでにはもう少し賑やかにします。しかし、いざ自分の制作物のサイトとなるととたんに面倒になるな。

developer ID

と、ついでについに、AppleのMac Developerプログラムの有料会員になってみました。昨今AppStoreにソフトウェアを並べるためには、もしくはDeveloper IDで署名をするためには、この有料アカウントが必要なのです。Developerアカウント自体はなにかと要り用なので持っていましたが、これは「Macのソフトウェアを開発しますよ」という有料登録。まー、年間1万円未満、趣味に払うお金としては悪くないかな。iCloudもOS Xも今は無料だし。

現在配布中のはDeveloper IDでコードサイン済みです。正式版は、できたらAppStoreで配布しようかなと思います。そのためにも一応SandBoxで作ってます。より多くの、SVGビューアが欲しい人に届くように。私は宣伝力がないのでAppStoreに置いて欲しい人に勝手に見つけてもらおうと。通らなかったら、普通にサイトで配布します。

ということで、β公開しました。もちろんもっと整えるべきなのですが、そのめんどくささで結局公開しないよりは、ラフでも公開した方が実りが多かろう。とりあえず私が欲しい機能はほぼ盛り込んだ。ひとまず1回1.0をAppStoreに提出して、その後不完全なところは1.1で盛り込もうと考えています。

まぁ、興味ある人は使ってみてください。あとフィードバックも歓迎します。

  1. 拙作のCotEditorマクロなんかはこれが狙いでした。
  2. そういえばこれもオバケがキャラクターだ。
  3. キャラクターは生き物じゃなくても無機物でも何でも良い。Transmitのトラックとか、TwitterrificのOllieとかShiiraのシイラとかそういうの。

Comment

leave your comment