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 プラグインについては、そのうちまた。 🙂

MacBook Pro 購入

CSS Nite などにいくと、OS のシェアが逆転したんじゃないかと錯覚するほど MacBook を使われている方が多いことに気がつきます。WordPress ハンズオンなどでも MacBook を持ってこられる方が多く、貸してもらって操作をするたびに Mac OS X におびえているのです(笑)

WordPress入門ハンズオン1巻にてハムさん。:)

てなわけで、そろそろ覚えておかないといかんのじゃないの?ということで、買いましたぞ MacBook Pro。:)

15インチの安い方に、非光沢 1680×1050 解像度のパネルに替えて 16万なにがしでした。(ぼくは圧倒的にソースコードみる時間が長いので液晶は非光沢にしているのです)

とりあえず、アプリは Eclipse さえ入っていればなんとかなるので一番最初にインストール。 cocoa-swt もきれいに動きますね。:)

Mac で便利なのは control キーの存在。ぼくは Linux とかも CapsLock に CTRL あてていますが、これはあくまで CTRL キー。 control として別キーにアサインできるのが良い感じです。 というわけで、Eclipse にも emacs キーアサインできるです。いつも忘れるので書いておきます。

Previous Column ^B
Next Column ^F
Line Up ^P
Line Start ^A
Line End ^E
Line Down ^N
Delete Previous ^H

ほかにもたくさんありますが、とりあえず。:)

Firefox は何もしなくてもこのキーアサインききました。Adobe さんのアプリはきかなかったような?

Eclipse は先日でました最新版 4.2 な Juno を使っています。 せっかくなので入れているプラグインのアップデートサイトも書いておきましょう。

Groovy Update Site – http://dist.springsource.org/release/GRECLIPSE/e4.2/
https://svn.codespot.com/a/eclipselabs.org/jsdt-jquery/updatesite
org.eclipse.php.repository – http://download.eclipse.org/tools/pdt/updates/3.1.1/nightly
Subclipse 1.8.x Update Site – http://subclipse.tigris.org/update_1.8.x

PHP Developer Tool のバージョンが Juno の標準リポジトリでは 3.0  のままになっています。SP1 あたりで 3.1 が入りそうな雰囲気ですが、とりあえず nightly をいれています。まだちょっとバグっぽい動作するようですがなんとか。

Java 系で、cocoa な SWT と LWJGL で OpenGL を動作させたの図。

いい感じに動きます!

ただ、ぼくの MacBook Pro では OpenGL 動かしたり、でかいプログラムコンパイルしたりするとあっという間にパームトップが熱くなってしまうのがいたい。長時間の開発は厳しいくらい熱せられるので、外部キーボード使うか、マシンの下にすのこたんとかファンをおくとかしないといけなそうです。ここは継続調査で。

てなかんじで、届いたのは水曜日くらいで Mac の操作をちょっと覚えましたら、土曜日の WordPress ハンズオンで早速役立ってくれました。よかった 🙂

8/25 のWordPress入門ハンズオン2巻もがんばりますので、よろしくお願いいたします!

Redmine 1.2.1 on JRuby/Tomcat

少し前に VPS の Tomcat7 にデプロイしようとして失敗していました、Redmine 1.2.1 さんですが本日また再挑戦してみました。 前回の失敗は JRuby のバージョンを間違っていたという寒いオチなことが分かりましたので、今回は割とすんなりいきました。。 🙂

Rednime は Ruby 1.8 系で動作なのですね、見落としていました。

Redmineのインストール | Redmine.JP

RedmineはたいていのUNIX, Linux, Mac, Windowsシステム等、Rubyが利用可能なシステムで実行できます。

Redmineの各バージョンで必要となるRailsのバージョンは以下の通りです。

というわけで、対応する JRuby は 1.5 系。 前回は 1.6 系つまり Ruby 1.9 でやってしまっていたのでした。 とほほ。

ちなみに JRuby を使うとこういう時に便利で、たとえば OS の Ruby パッケージとか気にしなくても依存関係なくポータブルにインストールすることができます。

というわけで、環境は以下の感じです。

[root@capibara redmine-1.2.1]# java -version
java version "1.6.0_26"
Java(TM) SE Runtime Environment (build 1.6.0_26-b03)
Java HotSpot(TM) 64-Bit Server VM (build 20.1-b02, mixed mode)
 
[root@capibara bin]# /opt/apache-tomcat-7.0/bin/version.sh 
Using CATALINA_BASE:   /opt/apache-tomcat-7.0
Using CATALINA_HOME:   /opt/apache-tomcat-7.0
Using CATALINA_TMPDIR: /opt/apache-tomcat-7.0/temp
Using JRE_HOME:        /usr
Using CLASSPATH:       /opt/apache-tomcat-7.0/bin/bootstrap.jar:/opt/apache-tomcat-7.0/bin/tomcat-juli.jar
Server version: Apache Tomcat/7.0.19
Server built:   Jul 13 2011 11:32:28
Server number:  7.0.19.0
OS Name:        Linux
OS Version:     2.6.18-274.3.1.el5
Architecture:   amd64
JVM Version:    1.6.0_26-b03
JVM Vendor:     Sun Microsystems Inc.
 
[root@capibara redmine-1.2.1]# jruby -v
jruby 1.5.6 (ruby 1.8.7 patchlevel 249) (2010-12-03 9cf97c3) (Java HotSpot(TM) 64-Bit Server VM 1.6.0_26) [amd64-java]

適当に JRuby 1.5 を展開してパスを通して Redmine に必要な gem を追加。

# jruby -S gem install rack -v=1.1.1 --no-rdoc --no-ri
# jruby -S gem install rake -v=0.8.7 --no-rdoc --no-ri
# jruby -S gem install i18n -v=0.4.2 --no-rdoc --no-ri
# jruby -S gem install activerecord-jdbcpostgresql-adapter -v=0.9.7  
# jruby -S gem install warbler

ポスグレで動作させるために、activerecord-jdbcpostgresql-adapter を入れていますが、最新バージョンであるとプロジェクト操作時に以下のエラーで落ちてしまうため、0.9.7 に落としています。

   1: ActiveRecord::StatementInvalid (ActiveRecord::JDBCError: ERROR: column "issues.id" must appear in the GROUP BY clause or be used in an aggregate function: SELECT COUNT(*) AS count_all, tracker_id AS tracker_id FROM (SELECT DISTINCT "issues".id FROM "issues"  LEFT OUTER JOIN "projects" ON "projects".id = "issues".project_id  LEFT OUTER JOIN "issue_statuses" ON "issue_statuses".id = "issues".status_id  LEFT OUTER JOIN "trackers" ON "trackers".id = "issues".tracker_id WHERE (((projects.id = 1 OR (projects.lft > 1 AND projects.rgt < 2))) AND issue_statuses.is_closed='f') AND (projects.status=1 AND projects.id IN (SELECT em.project_id FROM enabled_modules em WHERE em.name='issue_tracking'))  GROUP BY tracker_id ) count_all_subquery):

Rails の O/R が生成している SQL が不正してしまっているように見えますね。 とりあえず、古いバージョンならうまく動くようです。

次にポスグレに DB を作成。

# su - postgres
-bash-3.2$ createuser -P redmine
Enter password for new role: 
Enter it again: 
Shall the new role be a superuser? (y/n) n
Shall the new role be allowed to create databases? (y/n) y
Shall the new role be allowed to create more new roles? (y/n) n
CREATE ROLE
-bash-3.2$  createdb redmine -O redmine
CREATE DATABASE
-bash-3.2$ psql -l
        List of databases
   Name    |  Owner   | Encoding  
-----------+----------+-----------
 postgres  | postgres | SQL_ASCII
 redmine   | redmine  | SQL_ASCII
 template0 | postgres | SQL_ASCII
 template1 | postgres | SQL_ASCII
(4 rows)

Redmine の database.yml を作成。

[root@capibara redmine-1.2.1]# pwd
/root/install/redmine-1.2.1
[root@capibara redmine-1.2.1]# cat config/database.yml
# MySQL (default setup).
 
production:
  adapter: jdbcpostgresql 
  driver: org.postgresql.Driver
  database: redmine
  host: localhost
  username: redmine 
  password: 
  encoding: utf8

この状態で Rails の DB マイグレートを実行。

# jruby -S rake generate_session_store
# jruby -S rake db:migrate RAILS_ENV="production"

Tomcat にインストールしたいので warble。 まずは config 作成その後に war 作成。

# jruby -S warble config
# cat config/warble.rb 
# 下の方に追加
config.dirs = %w(app config lib log vendor tmp lang)
config.gems << "activerecord-jdbcpostgresql-adapter" 
config.gems << "i18n" 
config.gem_dependencies = true
config.webxml.rails.env = 'production'
config.gems["rack"] = "1.1.1" 
config.gems["rake"] = "0.8.7"
config.gems["activerecord-jdbcpostgresql-adapter"] = "0.9.7" 
# jruby -S warble

あとはできた war を Tomcat7 にデプロイしてあげれば動作します。

添付ファイル格納域が WEB-INF/files になってしまいますので、シンボリックリンクで消えないところに飛ばしてあげています。(これは config で設定できたような気もします)

といわけで、

redmine51

無事動きました。 🙂

さて全然関係ないですが、以上 VPS に SSH つないで操作していますが、実は今までさぼってターミナルマルチプレクサ系を入れていませんでした。 yum update 中に回線切れたら、がびーんということで、併せて本日インストール。

tmux です。 CentOS 5.7 にはパッケージないっぽかったので、ソースからインストール。 以下のライブラリに依存するようでしたので、devel を入れています。

# yum install libevent-devel ncurses-devel

あとは、普通に ./configure && make && make install でいけると思います。 😀

redmine50

らいらい。と。