WireframeSketcher でワイヤーフレームドキュメント作成

以前、サイトを眺めてすごいなぁと思っていたものの、有料($99)だったため試さなかった、WireframeSketcher を本日購入してみました。

用意された部品や操作系を元に、アプリケーション開発時のワイヤーフレームやモックアップなどのドキュメント作成を支援するソフトウェアです。 SI の世界だと、エクセル方眼紙でやっちゃうような、外設の画面設計書をつくるの、で通じるでしょうか(笑)

WireframeSketcher

WireframeSketcher is a wireframing tool that helps designers, developers and product managers quickly create wireframes, mockups and prototypes for desktop, web and mobile applications. It’s a desktop app and a plug-in for any Eclipse IDE.

デザイナー、開発者、プロダクトマネージャさん向け。

Eclipse GEF/EMF ベースでつくられており、Windows、Mac、Linux 対応。ダウンロードしすぐ実行できるオールインワンのスタンドアローン版の他、Eclipse プラグイン版も用意されています。

130422-0007

下のような、描くのも変更するのも大変そうなイラストが、

wp_tree_f

次のテキスト入力だけで作成できてしまう。。

wp-content
-plugins
--otenki
---otenki.php
-themes
--[v] twentyeleven
--[v] twentytwelve

なんてことだ...

このことだけで、なんでもっと早く試さなかったのだろうと後悔です。。15日のお試し期間中の 1 日目で購入してしまいました。

以下、これまたどう考えても描くの面倒だろうJK、と言われそうな一覧表とフォームの組み合わせも、

130422-0019

こんな感じのテキストでサクッとつくることができます。

130422-0020

あっという間。。 🙂

試しに、このサイト hiromasa.another のモックアップを作成してみました。

130422-0011

出力を手書き風味にできるのがポイントで、(お客さんなどに)まだデザインとかはイメージですよ、というようなことを表現できるとのことです。

ちなみに Screen のプロパティーを Sketch から Clear に設定することで、びしっとすることもできます。

130422-0002

びし。まっすぐ。

130422-0010

WireframeSketcher の操作はパレットビューより部品を選択し、ぺたぺた貼り付け、それぞれの個別属性を指定していく感じです。

部品は PC 用、モバイル、Android、iOS、Web フォームなどなど沢山。 これらは一般的な .svg 形式で、フォーマットに従えば自分で描いた絵も部品に取り込むことができるようです。

130422-0021

ブログのコメントフォームを描いてみたの図。

130422-0022

ドローアプリとしての操作感は、利用開始当初、レイヤー機能がないため若干厳しい部分あるかなと思いましたが、アウトラインビューなどからのZオーダ設定、グルーピング系と、そのグループへの突入(?)、またプロパティーからの位置ロック操作をうまく使えば、問題なく描くことができると感じました。

130422-0023

画面上、オブジェクトの単一選択と矩形選択の切り替えの UI がぱっと分かりませんが、(Fn + ) F3/F4 でそれぞれに切り替わります。クリック to ドラッグの範囲選択において、カーソル位置のオブジェクトを引っ張りたくないケースでは F4 を押すといいと思います。

さて、WireframeSketcher の良いところのひとつは保存形式に XML のテキスト形式が用いられていることで、さらに画像となる .svg ベクターデータと、骨組みとなる .screen データは完全に分離されています。

このため、骨組みの .screen の変更履歴をみると、どの部分が修正されたかが分かります。

130422-0016

スクリーンショットは新旧ファイル差分を出した図。–File Three が増えてその下のアイテムの y 座標が増えたことが分かります。

このように、WireframeSketcher はテキストファイルベースのデータ形式を採っているため、ローカルヒストリーの利用や Subversion、Git などバージョン管理との統合も得意です。

Eclipse マーケットから EGit や Subclipse などを追加することで Git や SVN が使えるようになるハズです。(スタンドアローン版 は Eclipse Juno ベース。自分は Eclipse Juno for JavaEE に WireframeSketcher をプラグインの形で入れました)

さて、ぼくは普段からドキュメントの作成に Eclipse Mylyn の .textile サポートを使っていましたので、今回ワイヤーフレーム作成に WireframeSketche という心強い見方が統合されたことになります。

ワイヤーフレームはもちろん、ちょっと億劫だなと思っていた図形の描画もできるようになってとても嬉しいです。 🙂

130422-0018

ブログ”徹底解析”シリーズを Eclipse で書いているの図。

日本に一人しかいないんじゃないかと思うくらいの Eclipse の利用法ですが、ソースコード見ながら記事を書くことが多いので、この使い方はすごく便利です。(ちなみに 300ページの原稿に耐えてます)

上記スクリーンショット下部は、PlantUML。これもテキストベース図形描画 & Eclipse プラグインあり。 UML を描くツールですが、これがまた色々な用途に使えるのです。

PlantUML についてはプログラマーズ雑記帳さんが非常に参考になります。(とても助かりました!)

PlantUML の使い方 | プログラマーズ雑記帳

テキストから UML を生成する PlantUML についての解説記事を書いてみました。

PlantUML の Eclipse プラグインについては、そのうちまた。 🙂

Ubuntu 12.10 登場

半年に一回のお楽しみ Ubuntu 12.10 がリリースされました。:)

Ubuntu 12.04 LST が入っていたThinkPad T420s に新規でインストールしました。さぼって Eclipse とか JDBC のドライバとか古いままになっていたりするので、半年に一回新規インストールするのはちょうど良いタイミングだったりします(笑)

インストールもすんなり終わり、無事起動して一通り設定完了しました。12.04 であった、壁紙がログイン画面にでてくるのなくなったのかな。。萌壁紙でも安心でございます。

噂の Amazon 検索はこんな感じで。 ロケールもちゃんとみているようです。wordpress で検索したの図。値段が帯ででてくるのですね。

ちなみに、Rens の透過がおかしい問題(その場の後ろの背景が計算されてブレンディングされない)が修正されたようです。 🙂

てなわけで、その他 apt-get で入れたアプリケーションをメモしておきます。 いつも Sun(Oracle) Java 使っていましたが、今回から Open JDK 7 に乗り換えました。

sudo apt-get install openjdk-7-jdk
sudo apt-get install build-essential
sudo apt-get install ubuntu-restricted-extras
sudo apt-get install adobereader-jpn
sudo apt-get install nautilus-open-terminal
sudo apt-get install nautilus-image-converter

残念ながら Nautilus は 3.6 ではなく 3.4 系が入っていますので、目新しい新機能はありませんが、いつもながら SSH マウントと open-terminal の拡張は便利です。

.ssh に秘密鍵や config ファイルをおき、「サーバに接続」に接続先SSH の設定してあげるとマウントされてファイル操作ができるようになります。

以下、このブログのレンタルサーバに接続したの図。 でもって、Nautilus 上で open-terminal 拡張から「リモート端末の中に開く」してあげると、そのまま端末エミュレータでそのパスにログインした状態になり、異様に便利です。

いつもの Eclipse は、4.2 Juno SP1 に。 PHP for Developer がリポジトリに無事追加されたようです。

Juno - http://download.eclipse.org/releases/juno
PHP Development Tools (PDT) SDK Feature    3.1.1.201209101312

Eclipse のエディタのフォントはいつも、わざわざ手持ちのMSゴシック相当のフォントをいれていたのですが、今回から Ricty に変更してみました。

プログラミング用フォント Ricty (リクティ)

Ricty (リクティ) は Linux 環境での研究・開発に適したフリーなプログラミング用 TrueType フォントです。Emacs や Vim を用いた C、C++、FORTRAN、Python、Perl、Ruby、AWK、sed、シェルスクリプト、LaTeX などのコーディングにおける使用を想定しています。以下の 2 つの等幅フォントの合成、および、プログラミング用フォントとしてのいくつかのチューニングを行う生成スクリプトの配布を行なっています。

濁点、半濁点の可読性が高くなっていて面白いですね。埋め込みビットマップフォントと違いイタリックもちゃんとでますので、Windows の Eclipse 使うときによくやる Itaric 設定全削除もやらなくてすみます。 😀

まだ使い込んでいないですが、Eclipse 4.2 Juno は、Open JDK 7 でもうまく動いてくれているようです。 Groovy-Eclipse、Subclipse、EGit、Zen Coding プラグインなどを Eclipse Market から追加インストールしています。

その他 Ubuntu のほうには、Thunderbird(メール)、Geany(テキストエディタ)、Pidgin(メッセンジャー)、Shutter(スクリーンショット取得)、GIMP(画像加工)などを入れています。Geany は日本語が変換中にでない問題が解決された模様。Pidgin は通知統合されなくなったのかな。。

てなわけで、わずかな手間で開発系が新規に作れるのは Linux の良いところ。さらに ThinkPad + Linux は、プログラムかいたりインターネット上のサーバをいじるの強いなあと感じます。

インターネット上で多く使われる Linux は、ワークステーションも Linux にしている方が都合がいいことが多く、ThinkPad のトラックポインタは GUI と CUI のハイブリット運用に適しています 🙂

Ubuntu 12.10 は 10 系ですがこなれている印象をうけました。 Wayland 化は 13.10 くらいでいけるかっ。楽しみです。

Ubuntu 12.04 にアップグレード

少し経ちましたが Ubuntu 12.04 がリリースされましたので 11.10 からアップグレードしてみました。 🙂

半年に一回のお楽しみでございます。 まだ数日しかつかっていませんが、5年サポートの LST 版だけあり、さすがにこなれた感じの仕上がりと思いました。

Win(Super)キーで起動するランチャーから。 ちなみに Unity 系の透過描画で背景に表示していないウインドウが亡霊のようにでてくるのはうちだけでしょうか。。いいんですが(笑)

Ubuntu12-01

12.04 からキーボードショートカットが表示できるようになりました。 Super キー押しっぱなしででてまいります。

Ubuntu12-00

ALT + TAB のタスクスイッチャーが少し変更になったようです。 同一アプリケーションは、まずサマって表示されます。 以下、Firefox を2窓あげた様子。

Ubuntu12-02

でもって、複数窓あるアプリの上にカーソル合わせて少し待つと各窓のプレビューがでてきます。

Ubuntu12-03

選択窓を出さないで ALT + TAB したときの挙動は以前と一緒で、同一アプリケーションでも次にフォーカスがくるようです。ハイブリット仕様で結構便利です。

Win + S の仮想デスクトップや、Win + W のアプリケーションプレビューはいっしょ。

Ubuntu12-04

Ubuntu12-05

GNOME 3.4 になっているので Nautilus もバージョンが上がっています。 「元に戻す機能」が使えるようになった模様。 GNOME 3 系の Nautilus さんはめんこくてお気に入り。

Ubuntu12-06

Unity 系ではランチャーのアプリケーションメニュー? が使えるようになっています。 Shutter というスクリーンショットを撮るアプリでは次のようにショートカットメニューがでてきます。

Ubuntu12-10

また、透過の描画が背景色を見てくれるようになったので通知が見やすくなったようです。 先日作った twitter デーモンくんもそのままうまく動きました。

Ubuntu12-11

Ubuntu 11.10 からのアップグレードインストールをしたので、リポジトリの状態などは分かってないのですが、すんなりアップグレードできました。 ThinkPad X61 にはまだ入れていないので日本語 Remix がでたら、こちらは新規インストールしてみたいと思います。

それにしても、昔は Linux で”十分”なんて言われていましたが、今や Linux じゃなきゃ”いやぁ”くらいに育ちましたねぇ。 ぼくは Ubuntu 8.04 か 9.04 にかけてクライアントのメイン OS として移行しましたが、なんでもいじれるソフトウェアのおもしろさや怪しさを残しつつ便利な感じになってきて良いと思いますです。 🙂