baserCMS テーマの github 公開と Gradle による Sass ビルド

baserCMS テーマコンテスト受賞作品の「Cafe Debut」と「basercart」テーマのソースコードを github に公開しました。 🙂

h1romas4/basercart

basercart

h1romas4/cafedebut

cafedebut

普通に baserCMS に導入してみたい方は、baserマーケットから .zip をダウンロードしていただければと思います。「Cafe Debut」は先日 baserCMS 3.0.4 に対応され、プラグイン同梱機能や、新しいコーディングスタンダードに対応した新板になっています。(調整していただきまして、どうもありがとうございました!)

今回公開した github のソースコードは、テーマの修正や開発用を想定したものです。

basercart のソースツリーには開発時に用いた sass ファイルと、gradle によるビルド定義を加えています。( .sass ファイルウォッチから .css への自動コンパイルができるように準備しています)

本テーマの製作時は grunt で sass のコンパイルを行っていたのですが、nodejs や Ruby の環境を導入したり、それらのバージョンを開発メンバー間で合わせたりするのが大変と感じましたので、github 公開版ではビルダーを Gradle に変更しました。

Gradle はウェブ制作の方にはあまり馴染みがないかとは思いますが、最近の Java 界隈で良く採用されているビルドツールです。ここでは、grunt と同じようなタスクランナーとして考えてもらって良いと思います。

Gradle が依存するのは Java の環境だけですので、Windows、Mac、Linux ともにほとんど準備なしに(Java が入ってなければ入れるだけ、nodejs や Ruby、各周辺ツールの導入なしに)動作させられ、いつでもポータブルに同一の結果が得られるのが、grunt から変更したポイントになります。

github に公開されているソースには Gradle から生成できる gradlew と呼ばれる Gradle 自体の環境を自動で準備するラッパープログラムもコミットされています。なので事前に Gradle を導入することすら不要です。

というわけで、github から git clone するか .zip をダウンロードしていただいた後、./gradlew watch するだけで .sass のウォッチ・ビルドが開始できます。(初回起動時のみ、環境をオートでつくるため時間が少々かかります)

cd basercart
./gradlew watch
#Windows の場合は、gradlew.bat watch

簡単あるね。 🙂

build.gradle では、次のプラグインを使わせて頂いています。

A SASS / Compass plugin for Gradle は、JRuby を用いて gem の取得や処理を行い、Sass / Compass のコンパイルを行います。この動きにより、ビルドを行う PC には事前に Ruby の導入が不要になる仕掛けになっています。

その他にも同様な動きで Java に含まれる JavaScript の実装(Rhino)を用い、CoffeeScript をコンパイルするプラグインもあるようです。(TypeScript も同じ実装、早くでないかなぁ。Nashorn だと面白そう :))

Gradle Watch Plugin は Java の NIO を用いて、各 OS のファイル監視 API からの通知を元に変更時のタスクが定義できます。(ちなみに、A SASS / Compass plugin だけでも watch はできそうでした)

Gradle の build.gradle 定義は、Groovy が持つ AST 変換や各種シンタックスシュガーなどの効果で、非常に簡潔にかくことができます。 これに慣れてしまうと、JS の (function() { }) とか .pipe(“”) などがずいぶん冗長に見えてしまいますね。 😛

というわけで、ウェブ制作にも Gradle いかがでしょうか。配布先に環境をつくらなくてよいのは、大きなメリットのように思います。

ちなみに、あんまり関係ないですが Groovy 版 Ruby on Rails の新板である Grails 2.3 からは同梱される Asset Pipeline Plugin により sass、less、coffeescript が標準サポートされるようです。ごくり。

ぐる。

Eclipse EGit の使い方(2/2)

前回に続き、EGit の使い方です。

目次

  1. 導入
  2. ローカルリポジトリの作成
  3. ファイル操作
  4. リモートリポジトリに接続
  5. ローカルブランチの作成
  6. リベースインタラクティブ
  7. ブランチからのマージ1
  8. ブランチからのマージ2
  9. コンフリクトの解消
  10. リベース
  11. コミットコメント修正
  12. コミットリセット
  13. リバートコミット

このページでは、7〜13までを記載しています。

ブランチからのマージ1

develp ローカルブランチのコミットを origin/master に接続している master ブランチにマージしてプッシュする操作です。この操作では、devel に行ったコミット操作が master に統合されます。

develp ローカルブランチは次のようになっています。

egit-rebasei05

1. master ブランチにスイッチします。

egit-margea01

2. プロジェクト右クリックから、Team -> Marge を選択します。

egit-margea02

3. devel ブランチを指定し Merge ボタンを押下すると、master ブランチに devel ブランチのコミットがマージされます。devel と master でコンフリクトがなく、Fast forward option で、If a fast-foward, only update the branch pointer を選択しているため、master のおしりに devel のコミットが結合されます。

egit-margea03

egit-margea04

4. リモートリポジトリにプッシュされていないコミットがあると↑印で分かります。 Team -> Push to Upstream でプッシュします。( devel ブランチで行った rebase -i で修正したコミットはプッシュされていないのが分かります)

egit-margea05

egit-margea07

egit-margea08

b03

5. 不要になったローカルブランチは、Git Repository View から右クリック Delete Branch で削除できます。

egit-margea09

ブランチからのマージ2

develp ローカルブランチのコミットを origin/master に接続している master ブランチにSquash マージしてプッシュする操作です。この操作では、devel ブランチに行ったコミット全てをひとつにまとめて master にコミットできます。

1. Team -> Swicth To -> New Branch から devel2 ローカルブランチを作成します。

egit-margeb01

2. devel2 で作業を行い、(恥ずかしい)コミットをいれます。

egit-margeb02

3. Team -> Swich To -> master から master ブランチに切り替えます。

egit-margea03

4. Team -> Merge を選択します。

egit-margeb03

5. devel2 ブランチを選択し、Merge options で Squash を選択し、Merge ボタンを押下すると、ソースコードがマージされます。(コミットはされません)

egit-margeb04

egit-margeb05

egit-margeb06

6. マージされたソースを master ブランチにコミットすると、devel2 の修正が新しいコミットとして作成できます。なお、Commit Changes ダイアログでは Commit and Push を押下すると、コミット後自動的にリモートブランチにプッシュが行えます。

egit-margeb07

egit-margeb08

b04

コンフリクトの解消

マージやプル操作などで、ソースに衝突が発生した場合は、次の手順でマージを行います。

master からブランチした devel3 ローカルブランチで作業中に、起点とした master に別な修正がかかりコンフリクトした例です。

egit-confrict01

master にスイッチして devel3 をマージしたところ衝突が起きました。該当のモジュールに赤印がつき、プロジェクトのマーカーに Conficts がつきます。

egit-confrict02

egit-confrict03

1. 衝突したモジュールを右クリックし、Maege Tool を選択します。

egit-confrict04

2. Select a Merge Mode で Use HEAD を選択します。

egit-confrict05

3. Merge Tool でソースコードのマージを解消します。

egit-confrict06

4. マージして赤くなっているモジュールを右クリックから、Team -> Add to Index を選択し、インデックスに戻してあげると、プロジェクトのマーカーが Merged に変わります。

egit-confrict07

egit-confrict08

5. コミットを行います。(マージコミットが作成されます)

egit-confrict09

egit-confrict10

b05

リベース

ローカルブランチで作業中に、ブランチの起点となったコミットを動かし、なるべくマージ(コミット)しないようにリベースする手順です。

master からブランチしたローカルブランチの devel4 をリベースし、最新の master を起点に追従します。

1. devel4 で作業中の master にリベースしたいタイミングで、Team -> Rebase を選択します。

egit-rebase01

2. master ブランチを選択し、Rebase を押下します。

egit-rebase02

3. rebase 時に不運にもソースコードにコンフリクトが起きた場合は、Start Merge Tool to resolve conflicts を選択し OK ボタンを押下します。

egit-rebase03

4. コンフリクトを解消するとマージ印がつきます。プロジェクトのマーカーは Rebase interractive になっており、まだ rebase 操作中であることが分かります。

egit-rebase04

5. Team -> Rebase -> Continue Rebase を選択し、全ての衝突を解消すると、リベースが完了します。

egit-rebase05

egit-rebase06

コミットコメント修正

コミットした直前のコミットコメントは修正できます。

egit-amend01

1. モジュールに修正をかけない状態で、再びコミットを行おうとすると、No files to commit ダイアログが表示されるので、はいを押下します。

egit-amend02

2. コミットダイアログが表示されるので、コミットコメントを修正し、Commit を押下すると直前のコミットコメントが修正されます。

egit-amend03

egit-amend04

コミットリセット

プッシュ前であれば、コミットを取り消す(HEADを移動させる)ことができます。

egit-reset01

1. ヒストリービューからいらないコミットの前(HEADにしたい)のコミットにカーソルを合わせて、Reset -> Mixed を選択すると、そこまでのコミットがなかったことになります。(Mixed を選択した場合、ワーキングディレクトリのファイルの内容はそのままになります。ファイルの内容も抹消したい場合は Hard を選択します)

egit-reset02

egit-reset03

egit-reset04

リバートコミット

プッシュしてしまったコミットを取り消すには、打ち消しのコミットを入れてプッシュします。

機能G追加のコミットが不要でしたが、リモートリポジトリにプッシュしてしまったので取り消します。

b06

egit-revert01

1. ヒストリービューから、取り消したいコミットを右クリックして Revert Commit を選択すると、取り消しとなるリバートコミットが行われます。

egit-revert02

egit-revert03

3. リバーとコミットをプッシュします。

egit-revert04

b07

以上、Egit の操作系の紹介でした。(実はプルを書き忘れていたりしますがそのうちなおしておきます…)

EGit ではその他にも、stash とかタグうちとか、ブランチ同士の比較なども同じような操作でできますので試してがってん。3.3.1 にて自分がやりそうな操作はひと通りできるようになっているようです。(3.4 も後少しで Eclipse Luna とともにリリースされるハズです)

気になっているのが JGit のコマンドラインインターフェースがあるような雰囲気なのですが、どうやって使うんでしょうか。

…てなわけで、オチがないので滝にうたれてきます。

Eclipse EGit の使い方(1/2)

Eclipse から Git 操作を行う、EGit の使い方についてまとめてみました。

この記事は 2014/3/25 にリリースされた EGit 3.3.1 を使い、Ubuntu もしくは Windows で操作しています。(たぶん Mac でも大丈夫です)

リポジトリを破壊したり、ファイルが多くあると遅くなっていたりしていたお騒がせな EGit でしたが、現在の所、通常の操作では問題なくなったように思います。

目次

  1. 導入
  2. ローカルリポジトリの作成
  3. ファイル操作
  4. リモートリポジトリに接続
  5. ローカルブランチの作成
  6. リベースインタラクティブ
  7. ブランチからのマージ1
  8. ブランチからのマージ2
  9. コンフリクトの解消
  10. リベース
  11. コミットコメント修正
  12. コミットリセット
  13. リバートコミット

このページでは、1〜6までを記載しています。(続きは力尽きたので次回…

導入

EGit は Eclipse 用の Git プラグインです。

JavaEE 版の Eclipse Kepler であれば、初期状態でバージョン 3.2 が導入されていますが、不具合の修正も多数ありますので、以下のアップデートサイトを登録し 3.3.1 の最新版をいれたほうが良いでしょう。

EGit – Download

To install via one of the update site URLs listed below, copy and paste it into the “Help > Install new software” dialog.

EGit can be installed in the following ways:

Main Update Site: http://download.eclipse.org/egit/updates (Recommended)

ヘルプ->新規ソフトウェアのインストールに、アップデートサイトを登録し、Eclipse Git Team Provider と JGit を導入します。

egit-install01

なお、EGit は Java の Git 実装である JGit を使って動きますので、別途 Git のコマンドラインツールなどを入れる必要はないです。

導入が完了すると、以下のビューが使えるようになります。

egit-install02

Git Repositories からリポジトリを操作するので出しておくと便利でしょう。

ローカルリポジトリの作成

新規プロジェクトを作成し、そのモジュールを Git のローカルリポジトリで管理するまでの手順です。既存のプロジェクトでも 2. 以降の手順で Git 管理下におくことができます。

1. Eclipse のプロジェクトを作成します。

egit-init01

2. プロジェクトを右クリックし、Team からプロジェクトの共有を選択します。

egit-init02

3. Git を選択します。

egit-init03

4. Use or create repositoru in parent folder of project にチェックを入れ、Create Repository をクリックします。

# Creation of reoisitories  in parent folder the Eclipse workspace は非推奨。ワークスペース上に Git のファイルがあると Eclipse が遅くなるのでということのようです。(が、特に問題無さそうなので自分はこちらを使っています)

egit-init04

5. ワークスペースと同じフォルダに .git リポジトリが作成されるので、完了をクリックします。

egit-init05

6. プロジェクト右クリックから、Team -> Commit をクリックします。

egit-init06

7. コミットダイアログが表示されます。 が、コミットの必要がない Eclipse の設定ファイルなどがあるので、いったんキャンセルします。

egit-init07

9. Eclipse 標準のフィルターだと隠しファイルが見えないため、見えるようにビューを一度カスタマイズします。

egit-init08

10. フィルターから .* リソースのチェックを外します。

egit-init09

11. 隠しファイルが見えるようになったので、コミットが不要なファイルを右クリックし、Team -> Ignore を指定し、Git の管理下から外します。(.gitignore が編集されます)

egit-init10

egit-init11

12. 管理するファイルが決まったので、再び Team -> Commit を選択します。

egit-init12

13. コミットダイアログで、コミット(インデックス)するファイルにチェックをつけ、コミットボタンを押下します。ヒストリービューからコミットの履歴を見ることができます。

egit-init13

egit-init14

ファイル操作

コミット後に修正を行ったファイルには > 印がつきます。

egit-edit01

コミット(HEAD)に戻したい(上書きしたい)時は、ファイル右クリック->置換->HEAD Revision を選択します。

egit-edit02

HEAD と比較したい場合は、比較-> HEAD Revision を選択します。(このへんの操作は Subclipse などと同様です)

egit-edit03

egit-edit04

ファイルの追加や削除は、Eclipse の右クリックの操作から行なってください。(OS からファイル操作をすると Git のインデックスがおかしなことになります)

ファイルの移動もドラッグアンドドロップを使うことで、Git が追従してきます。

egit-edit05

egit-edit06

リモートリポジトリへの接続

作成したローカルリポジトリを、リモートリポジトリに接続します。(ここでは Bitbucket のプライベートリポジトリに接続します)

1. ベアリポジトリを作成します。(Bitbucket 上に egit-test を作成しました)

b01

2. Git Repository ビューから、ローカルリポジトリの Remotes 指定し、Create Remote を押下します。

egit-remote01

3. Remote name を origin とし、Configure fetch を指定して OK ボタンを押下します。

egit-remote02

5. リモートリポジトリに 1. で作成したベアリポジトリを指定すると、Remotes が作成されます。

egit-remote03

egit-remote04

6. master ブランチをリモートと同期するために、ローカルブランチの master を選択し、Configure Branch を押下します。

egit-remote05

7. Remote に origin を、Upstream Branch を refs/heads/master とし、リモートリポジトリを追跡ブランチとして指定すると、Remote Traking が作成されます。

egit-remote06

egit-remote07

8. プロジェクトを右クリックし、Team -> Push to Upstream を押下し、リモートリポジトリにローカルリポジトリをプッシュします。

egit-remote08

b02

ローカルブランチの作成

Git の利点の一つは、ローカルブランチを手軽に作成でき、自分のタイミングで好きなようにコミット操作ができることです。それはドラクエのセーブに似ています。保存域は3箇所と言わず無限に(←真面目さがなくなってきた…

EGit でのローカルブランチの作成操作は次のようになります。

1. プロジェクト右クリックから Team -> Swicth To -> New Branch を選択します。

egit-branch01

2. Brach name を指定します。(ここでは devel ブランチにしました) master からブランチを作成したので、ヒストリーをみると、devel、master、origin/master の位置が一致しているのが分かります。

egit-branch02

egit-branch03

3. ワーキングディレクトリがdevel ローカルブランチにスイッチしたので、好きなように(恥ずかしい)コミットを入れながら、作業をしていきます。

egit-branch04

コミットを改変する場合

ふと次の日見た devel のコミットは、やっぱりあんまりだったので、コミットを改変して正しいものにするなどの手順です(?)。(rebase -i)

1. ヒストリーから親にするコミットを右クリックし、Rebase Interactive を押下します。プロジェクトのマーカーが Rebase Interactive に変わります。

egit-rebasei01

egit-rebasei02

2. Git Interractive Rebase ビューを開き、編集したいコミットに対してそれぞれの操作を指定して Start を押下します。(ここでは、2つのコミットを SQUASH 指定し、コミットをひとつにまとめています)

egit-rebasei03

3. 本コミットのメッセージを指定し、OK ボタンを押下すると、コミットが指定通りに改変されます。

egit-rebasei04

egit-rebasei05

というわけで次回は、できあがった devel を master にマージしてリモートリポジトリにプッシュする「ブランチからのマージ1」から書きます。

続く…

baserCMS ショッピングカートコンセプトテーマ baserCart

第2回 baserCMS デザインテーマコンテストで「店舗系テーマ賞」を頂きました!第1回に続き、2回目の受賞となり嬉しく思っています 😀

受賞者発表!! | 第2回 baserCMS デザインテーマコンテスト

制作:こもりこめろましゃ
baserCart (basercart-1.0.0)
デザイン性と機能性が両立できる baserCMS を活かすべく制作したショッピングカートサイトテーマです。
森のお店をイメージしたかわいいデザインにしてみました。
デザイン、イラスト、レスポンシブを含むマークアップ、商品・注文管理を含むコンテンツ管理と、ウェブサイトで使われる重要な要素を盛り込み、baserCMS の性能をめいいっぱい活用したテーマとなっています。
[ 審査員からのコメント ]
baserCMSの機能を存分に活用した作品です。プラグインを使って簡易ショッピングカート機能を実現している所など、baserCMSの可能性を広げてくれた作品です。

制作は「こもりこめろましゃ」ということで、コモモ(デザイン・ライティング・テーマ部)、モリコ(HTML・JS)、マリメロ(イラスト)、ひろましゃ(プラグイン部)の4人チームで行いました。

テーマを basercms.net に配置していただいておりますので、以下から実際に動いているところをみることができます。ファイルのダウンロードは 3/28 から始まる「baserマーケット」からダウンロードできるようになるとのことです!

商品一覧|basercart

モリコママは、ちょっとおせっかいで、ちょっとおっちょこちょいなシマリスのおかあさん。不思議の森のみんなは、モリコママの手づくりお菓子がだ〜い好き。モリコママは、美味しい手づくりお菓子を世界中の人たちに届けたいなぁって思いました。

コンテストでは応募の多くが汎用的なテーマとなることを予想しつつ、独自の世界観と baserCMS の可能性を表現することを目標に制作を進めました。思い描いていた通り完成できて、賞もいただけて本当に良かったです。メンバーのみなさまありがとうございました 😀

かわいらしい見た目とともに、広範囲に baserCMS の機能を活用したテーマとなっています。このブログのエントリーをサポートサイト代わりにして紹介してみたいと思います。

公開サイト部分

サイトの訪問者が見える部分の構成は次のようになっています。

  • 商品一覧(トップページ)

basercart-publish-01

  • 商品一覧(タグ分類)

basercart-publish-02

  • 商品詳細

basercart-publish-03

  • ショッピングカート

basercart-publish-04

  • 固定ページ・ブログ・お問い合わせメール(baserCMS基本機能)

商品は一覧・タグ分類ができ、商品名や最大4種類の画像、価格の情報を持っています。また、ショッピングカートには注文フォームが用意されています。

少しだけ baserCMS 使われたことがある方には、これはどうやったんだろうと思われる部分だと考えますが、バックエンドの実装的には今回のキモとして定めた部分でした。

baserCMS のソースコードなどを見ると「Based Website Development Project」とあります。つまり、baserCMS は CMS のベースともなるソフトウェアです。

WordPress がシステムの持つデータの形にサイトを当てはめる CMS とすれば、baserCMS はデータの形ごと作成できる CMS です。

今回の応募したテーマを WordPress でつくれば、商品情報を投稿タイプとカスタムフィールドに、タクソノミーで条件抽出するような実装となると思いますが、baserCMS ではテーブル構成やそのリレーション・インデックスを1から設計することが可能です。

作成したデータの形は、スキーマ管理、ユーザ権限やファイルのアップロード、テーマシステム、管理画面用の部品などなど、baserCMS が持つ力をたくさん借りながらウェブサイトとして構成することができます。

管理画面

  • 商品管理

basercart-admin-01

basercart-admin-02

  • タグ管理

basercart-admin-03

basercart-admin-04

  • 注文管理

basercart-admin-10

basercart-admin-11

商品系では、商品の一覧・編集、画像のアップロードや、多対多で関連するタグなどを使うことができます。注文ではステータスの変更や、注文明細の閲覧をすることができます。

おそらくテーブル構成などは、管理画面からのご想像通りです。実はタグやスラッグなどの部分は WordPress に由来してつくったりしています。テーマのダウンロードまでお楽しみにです。

CakePHP 初挑戦なのもあって、モデルとコントローラが、エンティティとサービスよりに心がブレている部分なんかがあるのですが、少しづつ修正していきたいです。

うまくできたら、本テーマはひと通りやりそうな実装がそろっていのではないかと思いますので、どこかで時間をつくって「baserCartの作り方」的なドキュメントを書こうかと思っています。 🙂

最後になりましたが、baserCMS テーマコンテスト実行委員のみなさま、大変お世話になりました。ありがとうございました!

SaCSS with WordBench 札幌, Late 2013 札幌のフォローアップ

12/14 札幌にて「SaCSS with WordBench 札幌, Late 2013」が開催され、スピーカーとして登壇させていただきました!

71A_5406-miniWordBench 札幌」は現在、年一度の OSC 北海道のセミナー・ブースが主な活動の拠点となっておりますが、今回はハムさんのご支援をうけ SaCSS(sapporo.css) と共同開催。東京よりまがりんさん、新潟よりをかもとにーさんをお招きするという豪華な内容となりました。 🙂

SaCSS WordBench Sapporo,Late2013

『SaCSS(サックス)』は札幌で主にコーダー(マークアップエンジニア)やWebデザイナー向けに、HTMLやCSS、JavaScriptなどフロントエンドの内容を中心にほぼ毎月勉強会を開催している団体です。
SaCSSは「Sapporo Cording Study & Seminar」もしくは「Sapporo.CSS」を省略した形で、参加者に「サックス」の愛称でよばれております。

1470304_632103803523442_1341714777_n自分は「WordPress を取り巻くセキュリティー設計」ということでお話させていただきました。 フォローアップ的に、ここに内容をまとめてみたいと思います。

  • 情報セキュリティーとは大きく、機密性・完全性・可用性という3つの要素で構成されている。
  • WordPressにおいて三要素を保つために必要なこと。
    • FTP、SSH、MySQL、WordPress などのユーザ・パスワード管理運用
    • ネットワーク経路の安全化
    • ソフトウェアのアップデート
    • データのバックアップ
    • 日々のサイト監視
    • 必要ならば、DoS 攻撃などによるサイトダウンを防ぐ対策

セキュリティーを保つために行うことはコンピュータ的な要素ももちろんありますが、サイト監視やパスワード管理など人間が日常的に運用しなければいけない部分も沢山あります。また、インシデント発生時の連絡系統や、回復手順などの運用フローを事前に作成することも大切です。

勉強会アンケートにて、WordPress サイトのバックアップ法の具体的な方法についてご質問をいただきました。ここでいくつか紹介いたします。 🙂

VaultPress – WordPress Backup and Security
WordPress の開発元 automattic 社が運用している、WordPress のバックアップサービスです。有料となりますが、プラグインの導入とアカウントの登録だけで、バックアップ・リストアが可能になります。
WordPressエンタープライズサポート|め組用心棒
デジタルキューブさんが運営している、きめ細かなユーザサポートサービスです。バックアップもお任せすることができます。こちらは日本語でサービスを受けることができます。
BackWPup Free – WordPress Backup Plugin
WordPress のプラグインによるバックアップの実装です。導入すると、メールや各種クラウドのストレージに WordPress サイトのバックアップを行うことができます。

ちなみに、このサイト hiromasa.another は、cron と シェルスクリプト(mysqldump と rsync)を自宅のサーバに配置し、週次でバックアップを行なっています。

WordPress のバックアップは各種サービスやプラグインのおかげで随分手軽になりましたが、意外とリストア(戻し)をした経験がある方は少ないのではないでしょうか。転ばぬ先のバックアップ。機会を見て、戻しの練習もしてもらえたら良いなと思います。 🙂

さて、勉強会の翌日は SaCSS メンバー&まがりんさんと支笏湖丸駒温泉へ。

529539_479694562149871_742478106_n

まがりんにより寒中全裸待機(露天風呂!)といった大技も繰り出され、楽しいひと時でした。 ありがとうございました。 😀

WordPress 3.6 リリースとメディアプレーヤー

WordPress 3.6 日本語版が 8/3 にリリースされました!

WordPress 3.6 “Oscar”

以下は、Matt Mullenweg が書いた WordPress.org 公式ブログの記事、「WordPress 3.6 “Oscar”」を訳したものです。

WordPress 3.6 日本語版リリースのお知らせ

WordPress 3.6 日本語版をリリースしました。

投稿のリビジョン管理の強化や、複数人で記事を編集した際の編集ロック・引継ぎ機能の追加など、コンテンツを管理する上で大切な機能が強化されました。また、ついに音声や動画が再生できるメディアプレーヤーが内蔵されました。待っていました。 😀

この記事ではリビジョン管理と、メディアプレーヤーを取り上げてみます。

リビジョン管理

3.6 よりリビジョンの差分管理の UI が刷新され、比較や戻しの操作がかなり使いやすくなっています。

wordpress36-02

wordpress36-03

また歳をとった diff が見ることができました。。記事は戻せど、時は戻らず。。

さて、SaCSS でもご質問いただきましたが保管するリビジョン数はデフォルトで無制限(-1)です。

変更したい場合、wp-config.php に新設する WP_POST_REVISIONS 定数、もしくは functions.php の wp_revisions_to_keep フィルターで設定できます。投稿タイプや記事ごとで設定したい場合はフィルターで分岐して使うとよいでしょう。

wp-config.php

// リビジョンがサポートされている投稿タイプ全体の履歴を10記事にする
define('WP_POST_REVISIONS', 10);

functions.php (PHP 5.3 以降、PHP 5.2 以下の場合はクロージャを崩してください)

add_filter('wp_revisions_to_keep', function($num, $post) {
    // 記事や投稿タイプで分岐したい場合 $post で条件判定
    return 10;
}, 10, 2);

なお、履歴をとらない場合は 0 を設定します。

メディアプレーヤー

おまちかね、メディアプレーヤー。 外部サイトにたよることなく、記事中に音声や動画を埋め込めるようになりました!

wordpress36-04

MP3 などの ID3 も読み取ってくれるすぐれもの。

バンドのウェブサイトをつくるにも良いのではないでしょうか。スマートフォンでも再生できるハズです。 🙂

というわけで、わたくしの作曲と友人ササミによる編曲、現在製作中のゲーム「Legend Of Moriko」よりメイン曲 “Ghost Moon” ピアノバージョンとエンディングバージョン。 2005年につくたれた「あなたにDoS」のササミボーカロイドアレンジを紹介して、この記事を終えることにしましょう。

この曲たちは札幌と山形の仙台の遠距離、インターネット上だけで作詞・作曲・アレンジされています。すごい時代になったものです!

Ghost Moon (Piano ver)
作曲・ひろましゃ / 編曲・ササミ

Ghost Moon (Ending ver)
作曲・ひろましゃ / 編曲・ササミ

あなたにDoS (VOCALOID ver)
作詞・aka & ひろましゃ / 作曲・ひろましゃ / 編曲・ササミ

お楽しみください。 :) (サンキューササミ)

Kindle Fire HD 購入

Kindle Fire の 3000円割引最終日に、Grails2 系の洋書がいくつかでていることに気がついてしまったのが運の尽き・・・。 スマートフォンや 10インチ Android タブレットの Kindle アプリで読んでみたものの、小さすぎ大きすぎ。。

以前から Kindle Paperwhite は持っていて、小説を読むのにこれ以上のものはないと思っていたのですが、技術書を出力するにはちょっとページ送りの速度や、画面の大きさに難があり。小説と違って、ペラペラ戻ったり飛んだりしますゆえ。

というわけで、Kindle Fire HD を買ってしまいました。 割引入って 12,800 円。:)

20130714_111847

手前 Paperwhite、奥 Fire HD。こうしてみると、Paperwhite の紙っぽさはさすがですね。今後も小説はこちらで!

さて、Kindle Fire HD で The Defintive Guide To Grails2 を読んでみている図。良い感じです。

Screenshot_2013-07-14-11-15-03

Kindle 版の Grails 書籍は、紙版よりずいぶん安くなっています。 たぶん、Groovy in Action Second Edition も今後でてくるとと思うので楽しみです。当たり前なんですが、洋書でも送料もかからないのが良いですなぁ。:)

Screenshot_2013-07-14-10-56-07

Kindle Fire は、普通の Android に近いですので .apk ファイルさえあれば Kindle Store にないアプリも(たぶん大抵)動作します。 XBMC を入れてみた図。

Screenshot_2013-07-14-10-53-10

GPU は PowerVR SGX 540。 残念ながら XBMC では動画再生支援が効いていないのかコマ落ちします。 Twitter クライアントや FIrefox などはずいぶん機敏に動作します。 🙂

重量は若干あるものの、カバンのサイドぽけっとに入れておくにも丁度良いです。純正ケースも良い意味で存在感がなく、これは本なんだなって感じがしてお気に入りました。

ちなみに、洋書を買っていますが英語が読めません。(←壮大なオチ

WordPress for Android のビルド

突然ですが WordPress の Android スマートフォン投稿アプリ「WordPress for Android」のビルドの仕方です。

事の発端は、スマートフォンを Galaxy SII から S4 に変えたこと…。なんと S4 は写真の画素を VGA に落とせず、サーバのメモリ不足にて WordPress の写真ブログに投稿できないという衝撃の事実。(←時代についていっていないひろましゃくん…

まぁ、ついでに好きなように WordPress for Android のソースコードを修正できたら面白いのではないかと始めたのでした。

wp-android10

どうやら次世代 WordPress には、JSON ベースの REST API も付きそうな雰囲気ですので、こういった WordPress が備える Web 管理画面外からの投稿アプリの研究をしておくのも良いかもしれませんね。 🙂

てなわけで、自分でも忘れそうなのでビルド方法を記しておきます。

Android SDK や ADT はインストール済みとします。 画面は Ubuntu の 英語版 Eclipse より。 他の環境の方は適宜読み替えください。

依存ライブラリのセットアップ

WordPress for Android をビルドするには 、ActionBarSherlockandroid-menudrawer ライブラリが必要です。 何気に pom.xml とかがないので dependency がよく分からないのですが、、とりあえずそれぞれの master ブランチを使っています。

両ライブラリともに github で公開されていますのでクローンします。

ActionBarSherlock
android-menudrawer

Eclipse に EGit が入っていると思いますので、Git Repository ビューより。

wp-android01

2つのライブラリがクローンできたら双方とも Eclipse のワークスペースに持ってきます。

File -> New -> Other -> Android Existing Code

wp-android02

Next ボタン押下後にパスの指定がでますので、さきほどクローンした 2ライブラリを追加します。

ActionBarSherlock はリポジトリに複数のプロジェクトが含まれていますが、「actionbarsherlock」ディレクトリを指定します。通常は次のパスになるでしょう。

~/git/ActionBarSherlock/actionbarsherlock
~/git/git/android-menudrawer

ワークスペースにプロジェクトが持ってこれたら、それぞれに API レベルとライブラリ利用の指定をします。

プロジェクト名右クリック -> Properties -> Android

android-menudrawer のマスターブランチは、Jerry Beans でないとコンパイルが通らないようだったので、双方とも 4.2.2 (API 17) に設定しました。 また、Library の「Is Library」のチェックを忘れずにつけます。

wp-android03

以上で依存関係の操作は終わりです。

WordPress for Android コアのビルド

WordPress for Android は SVN でソースが公開されていますので、いつも通り Eclipse の SVN ビューからチェックアウトし、ワークスペースにのせます。

http://android.svn.wordpress.org/

次に先ほど入れた依存ライブラリのパスを設定していきます。

wp-android プロジェクト右クリック -> Properties -> Android

チェックアウト後は、Library がパス切れ(バッテン)していると思いますので、一度 Remove して先ほどワークスペースに追加したふたつのライブラリを Add し直します。

wp-android04

wp-android05

次にデプロイ時に含むライブラリを選択します。

wp-android プロジェクト右クリック -> Properties -> Other and Export

SDK(Android 4.2.2) と Android Private Libraries と Android Dependencies にチェックがついていることを確認してください。(指定できていないと ClassNotFound Exception します)

wp-android07

ここでいよいよ、ライブラリも含めてビルド(クリーン)します。

Project -> Clean

3つのプロジェクトを選択して OK を押します。

wp-android08

ビルド通りましたか? 😀

ビルドパスにライブラリの jar が追加されていることを確認します。

wp-android プロジェクト右クリック -> Properties -> Java Build Path

wp-android06

では、アプリを実行してみます。

wp-android 右クリック -> Run as -> Android Application

wp-android09

おめでとうございます。 WordPress for Android はあなたの手の中に 😀

wp-android11

動かない場合は、おそらく依存関係の欠如だと思いますので Marker ビューで追っていけばなんとかなると思います。

ビルドができれば、あとは知恵と勇気でなんとかなるですね。これくらいの大きさの実装だと Android アプリ作成の勉強にもちょうど良いです。

これよりソースをいじってみたいと思います。 🙂

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 ネタという前フリらしい)