hiromasa.another :o)

have a lot of interests.

Ubuntu 13.04 リリース!

投稿日時: 2013 年 4 月 26 日投稿者: ひろましゃ

返信

半年に一度のお楽しみ、Unbutu の 13.04 がリリースされました。 😀

日本語 Remix を待ちきれずに、早速愛機 ThinkPad T420s にインストールしてみました。もともと Ubuntu 12.10 がのっていた機械ですが、アップグレードせずに、クリーンインストールしております。

インストールプロセスでは特に困ったこともなく、いつも通りそのままブートされ、無線LAN などやトラックポインタなどのデバイスもそのまま使えるようになりました。

利用を開始して最初に気がついたのが、Super(Win) + S のワークスペーススイッチャーが効かないこと。

どうやらデフォルトで仮想デスクトップが無効になったようです。システム設定->外観から「ワークスペースを有効にする」にチェックをつけてあげます。

とりゃ。でてきよった。 🙂

ワークスペース切り替え Win + S と Alt + Tab のタスクスイッチャーの切り替えはいつもながらかなり強力です。 🙂

ちなみに、このようなショートカットは Super(Win) キー長押しで知ることができます。（これは前のバージョンからの機能）

便利すなぁ。

デフォルトインストールから追加したのは、次の開発系と flash などのサードパーティー製品です。

sudo apt-get install build-essential
sudo apt-get install ubuntu-restricted-extras
sudo apt-get install openjdk-7-jdk

最近は、Oracle のではなく OpenJDK7 を利用中。 Eclipse や JVM 系開発用。

で、その Eclipse でちょっと困ったのが、Internal Browser が使えなかったこと。

この画面は既に設定済みなので、Use Internal web Browser（内部ブラウザを使う）が有効になっていますが、デフォルトインストール直後は非活性でした。

この事象、いつもだったか、 Ubuntu を設定しているうちにそのうち入って動いていたのか、いままで気にしたことがなかったのですが、理由は Eclipse の SWT が webkit の 1系を要求するためで、入ってないと enable にできません。 13.04 のデフォルト webkit は 3系でした。

てなわけで、1 系をインストールすれば使えるようになります。

sudo apt-get install libwebkitgtk-1.0-0

これにより、いつも使っている Eclipse Mylyn Doc textile 編集でプレビューができるようになりました。（下のプレビュータグがでてきます）

さて、WebKit 関係ありませんが、先日購入しました WireframeSketcher もうまく動作しました。

SWT Spy 恐るべしの図（既存の SWT 画面を吸い取ってスケッチ化できるっ）

やはり Linux はソフトウェアをつくる環境として便利で、ほとんど何もしなくても好みの動きをしてくれるのが良いところです。

インターネットの場合、開発時の接続先のサーバも Linux であることが多いので、ワークステーションとの親和性の高さもポイントですね。 🙂

OS の群雄割拠を見るような自分の机。 Linux 勢優勢。

てなわけで、奥のディスプレイはこの部屋に新星のように現れた Windows 8。　ようやく入れましたぞ！

（次のブログは Windows 8 ネタという前フリらしい）

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

投稿日時: 2013 年 4 月 22 日投稿者: ひろましゃ

以前、サイトを眺めてすごいなぁと思っていたものの、有料($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 プラグイン版も用意されています。

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

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

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

[tegaki]なんてことだ…[/tegaki]

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

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

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

あっという間。。 🙂

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

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

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

びし。まっすぐ。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

WordPress for Android 更新

投稿日時: 2013 年 4 月 19 日投稿者: ひろましゃ

返信

WordPress for Android がアップデートしてバージョン 2.3 になっていましたので、アンドロイドタブレットと普通(?)のスマートフォンで試してみました。

今時はサイト更新をスマートフォンでやりたいという要件も増えている気もしますので、研究に触ってみるといいかもしれません。 🙂

ここで使っているのは ICONIA TAB A700 と Bluetooth 接続キーボード & GALAXY SII です。　ギャラクシーで撮影したので、自分自身の画像はなし。。

今回のアップデートから上の写真のようにタブレットを横置きで実行した場合でも、画面スペースが有効活用されるようになり見やすくなっています。（サイドメニューがでるようになりました）

新規投稿は右上の＋ボタンです。投稿までの操作が少なく便利になりました。 🙂

普通のスマートフォンで縦画面表示だと次のような感じになります。　左から操作メニューがひょこっとでてきます。

このようなブログ投稿アプリは、投稿にネットワークを使わないローカル編集ができるのが良いところのひとつ。WordPress for Android では編集画面の「状態」を「ローカル下書き」することで途中保存が可能です。

ここの状態を「下書き」にするとサーバ側のいつもの下書きになりますので、途中から PC で引き続きといったこともできます。

画像を含めた投稿の編集については、「ローカル下書き」まではエディターに画像プレビューが表示され、「下書き」を含むサーバ保存後の再編集はイメージタグの状態となります。

ローカル編集中。

サーバ保存後。

普段 HTML を扱わない方にはやや分かりづらいですが、サーバ保存後に wpautop 形式や HTML になったデータをプレビューしながら編集するのはかなり難しい処理ですので、ここはしょうがない仕様です。

Masayan「･･･」

画像に関しては残念ながら「本文に入れずに画像（メディア）だけアップロードする」処理はできません。これは、WordPress の Web 管理画面のようにメディアライブラリのみの登録を行う UI がないためです。

ただし、アイキャッチ画像の設定に関してはこの操作が可能で、挿入するしている画像の長押し操作からでてくる「画像の設定」画面で「アイキャッチ画像として使用」を設定した場合、「投稿本文中に画像を含める」の選択を使うことが出来ます。

さて、WordPress デザインワークブックのサンプルサイトとなり、関係者一同、写真を見ておなかがすいてしまい制作が進まなかったことがあると噂の、札幌の nino クレープさんのブログも WordPress for Android で更新されております。　写真とコメント付きでクレープが載り、ついつい行きたくなりますゆえ。

スマートフォンは身近にあり気軽に使えますので、画像の扱いや操作系など研究の上、WordPress サイト更新の選択肢の一つとして検討してみると良いかもしれません。 iOS 版ももちろんあります。

これらの WordPress クライアントで使われている xmlrpc インターフェースは、自分でも利用することができます。　サイトに合わせた特別なアプリをつくるのも便利そうですね。いつかやってみたいです。 🙂