WordPress10周年記念! SaCSS WordPress 特集2013

札幌のウェブデザイナー・コーダーのためのセミナー・勉強会 SaCSS(sapporo.css)にて、5/24 に催されました「WordPress10周年記念! SaCSS WordPress特集2013」に行ってまいりました。

WordPress10周年記念! SaCSS WordPress特集2013

@hiromasa :「WordPress10周年記念でひろましゃが語る!WordPress の新機能と最新動向」
@se_ino :「WordPress を初めて使って」
@komomoaichi :「WordPressで覚えるPHP入門」
@h2ham :「Webデザイナーの仕事におけるWordPressとテンプレート」

WordPress 日本語化チーム、Multibyte Patch Plugin でおなじみの倉石さんも来られまして、札幌からも 10周年おめでとうのメッセージを送ることができて良かったです!

パチリ。:)

DSC00399

SaCSS にて自分の方は、次期バージョンになります WordPress 3.6 の新機能などについてをお話させてもらいました。

スライドに動画を使ってしまっていたので、ここではダイジェストのスクリーンショットを掲載することにします。(以下開発中の WordPress 3.6 trunk の画面です)

オーディオ・ビデオサポート

WordPress 3.6 より audio、video ショートコードが追加になり、youtube などに頼らずに自前でメディア再生ができるようになります。

video01

音声は、’mp3′, ‘ogg’, ‘wma’, ‘m4a’, ‘wav’、動画は、’mp4’, ‘m4v’, ‘webm’, ‘ogv’, ‘wmv’, ‘flv’に対応しています。プレイヤーには html5、フラッシュ、マイクロソフト系は Silverlight が選択されるようです。

ちなみにメディア系のファイルは大きいですので、ファイルアップロードの際に PHP のサイズ制限にかかるかもしれません。そのような場合は、php.ini で次の設定をすると良いと思います。

upload_max_filesize = 100M
max_post_size = 100M

記事リビジョン(履歴)操作の UI のアップグレード

記事間の diff 操作や、リビジョンを戻す操作も直感的になってとても使いやすくなります。

revision

なお、リビジョン数はデフォルト無制限です。履歴数に制限をかけたい場合は、wp-config.php で次のように WP_POST_REVISIONS 定数で設定してください。

define('WP_POST_REVISIONS', 20);

投稿ロック

編集中の記事がロック状態に遷移し、複数人の編集争いで内容の破壊が防がれるようになります。

lock01

他の人が編集中を表す「鍵マーク」の記事を開いたときの図。「編集を引き継ぐ」でロックを解除することもできます。

lock02

自分が編集中の記事が他の人に引き継がれた場合は、ほぼリアルタイムで下の画面がポップアップしてきてリビジョンに保存されます。すごい。

lock03

投稿フォーマット

カスタム分類「投稿フォーマット」とカスタムフィールドを使った、投稿管理画面の入力項目変更 UI が搭載されます。(テーマで投稿フォーマットをサポートをした時のみ機能が現れます)

format01 format02

投稿フォーマット名や入力項目など、管理画面がまだカスタマイズできないため、クライアントさんに入れるような WordPress では採用しにくいところもありますが、将来的には面白い機能になるのではないかと思います。

以上、WordPress 3.6 にはローカルストレージへの記事保存などまだまだ新機能あるとおもいますが、SaCSS で紹介させていただいた内容でした。 🙂

WordPress 10周年、おめでとうございます!

DSC00369

(…ひろまさ老けたんじゃないか?と言っているのは誰ですか…)

Ubuntu 13.04 リリース!

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

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

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

ubuntu1304-01

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

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

ubuntu1304-02

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

ubuntu1304-03

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

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

ubuntu1304-04

便利すなぁ。

デフォルトインストールから追加したのは、次の開発系と 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 が使えなかったこと。

ubuntu1304-05

この画面は既に設定済みなので、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 編集でプレビューができるようになりました。(下のプレビュータグがでてきます)

ubuntu1304-06

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

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

ubuntu1304-07

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

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

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

20130425_215355

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

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

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

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

このことだけで、なんでもっと早く試さなかったのだろうと後悔です。。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 プラグインについては、そのうちまた。 🙂