Eclipse Indigo リリース

少し前になりますが統合環境 Eclipse の新版 Indigo がリリースされました。 :)

てなわけで休日をつかって Ubuntu にインストールです。 Linux 版 Eclipse ってあんまりスクリーンショット載せてる人見かけないので見てってください= ヨーロッパでは Eclipse ユーザの 3割くらいは Linux とどっかに書いてたのですが(笑)。

Eclipse.org – Indigo Simultaneous Release

Indigo is the annual release of Eclipse projects on June 22 2011;
this year 62 project teams are part of the release.

Eclipse最新版「Eclipse Indigo」登場 – 62プロジェクト同時公開 | エンタープライズ | マイコミジャーナル

Eclipse Foundationは6月22日(カナダ時間)、Eclipseの最新リリース版となる「Eclipse Indigo」を公開した。EclipseはJavaをはじめ様々なプログラミング言語に対応した統合開発環境。プラグイン構造を採用した高い拡張性が特徴で、代表的な開発環境のひとつとされている。

今回は残念ながら PHP Developer 版はメンテナさん不足で本家からのリリースはないそうで、その場合は Pleiades All in One さんからディストリビューションリリースされているので使わせていただくと良いと思われます。

というわけで、ぼくは本家 JEE 版から入れてみました。 今回のリリースのポイントのひとつとなっている WindowsBuilder は EE には入っていないので別途入れてみました。 SE 版では標準です。

WindowBuilder

WindowBuilder is composed of SWT Designer and Swing Designer and makes it very easy to create Java GUI applications without spending a lot of time writing code.

アップデートサイトがありますので、いつも通りの感じでインストールできます。

いざ実行。

indigo02

XWT がちょっと目を引きますね。 :)

Indigo にあわせて SWT 3.7 もリリースされています。 Linux で SWT 使っている人もあまり Web でみかけないので WindowBuilder / SWT のスクリーンショットのせておきますです。

indigo01

この手のは案外レイアウトマネージャのこととか知らないと、うまく使えなかったりするので逆に難しい時もありますが、固定位置合わせとかは便利そうですね。 イベントハンドらの生成とか JFace のデータバインディングとかまだみていませんが、そのうち遊んでみるです。

その他、Groovy-Eclipse とか Subclipse とかいつも使っているものは、ぱらっとさわった限り Indigo でも大丈夫そうです。 Android のプラグインも入りました(ただ、こちらはまだ入れてみただけです)

統合環境新しくなると、なんかつくってみたくなるのはなぜなんでしょう。(←逆ですわな。

mikumiku

さて、DX7 色。 こちらも届きましたぞ。 すごいね、ねんどろいど。 :)

WordPress を dotCloud にデプロイ

デプロイ田中です、みなさんこんにちは!!。。

本日は、最近ちらほら聞きます PaaS 型クラウド dotCloud さんに WordPress をデプロイしてみるです。 まぁ無料版のでやっているのでお遊びなのですが、まずはなかなかうまく動くようですぞ。 :)

dotCloud は、さまざまなプラットフォームのアプリケーションを配置できるいわゆる PaaS のサービスです。 Java はもちろん Ruby や PHP、サーバサイド JavaScript の node.js なんかも動作するようです。 また各種データベースも動作します。

wp3203

DotCloud – Deployment made simple

DotCloud lets you create the best cloud stack for your application. We give developers and IT professionals the freedom and flexibility to mix and match languages, databases, caching and messaging components without the need for additional servers or infrastructure.

PHP を扱っているとアプリケーションをサーバにインストールする行為というのは、FTP か何かでファイルを「置く」みたいな感じなので感覚が違うかもしれませんが、PaaS というのは OS にアプリをインストールするようなイメージで使います。 ここでいっている “OS” にあたるのがアプリケーションサーバというやつです。

まぁそうは言っても PHP にはアプリのインスタンスを保持するような仕組みはないので実質的にはファイルが置かれるだけなのですが、dotCloud の管理ツールの使い方的には PHP でもそんな感じになります。

さて、PaaS が普通の Web レンタルサーバと何が違うかというと、OS 的な部分が隠ぺい(クラウド)されていることです。 メモリとかファイルシステムとかネットワークとかリソースをあんまり考えずに使えるようになっていて、また必要であれば動的に付け足すことができます。

あとスナップショットバックアップのような、その時のサーバそのものをバックアップ保持するような機能がついているのも多いですね。 アプリケーションを簡単に動作させて運用するために特化した機能がついたサーバが PaaS。 この技術の後ろに見え隠れそるのがサーバ仮想化技術になります。

ぼく的な PaaS の感覚は、いろんな言語や動作プラットフォームを使ってインターネット上にアプリを公開できてわーい、、という感じなものです(笑)

てなわけで早速、Groovy のアプリをデプロイ、、といきたいところですが、ここは勝手知ったる WordPress でまずはお試しデプロイです。

dotCloud には便利な管理操作用 CLI インターフェースが用意されていますので、こちらで操作します。 python が必要なのでお使いの OS にいれて、、最初 easy_install というのが何かさっぱりわからなかったのは秘密です。。(マニュアル参考

$ sudo apt-get install python-setuptools
$ sudo easy_install pip && sudo pip install dotcloud

Ubuntu 11.04 の場合はこれで準備完了。 簡単アルネ。

API キーなど入れながら、アプリケーション(名)作成。(誰かとかぶらない任意の名前)

$ dotcloud create maple4ever

あとは WordPress をローカルのどこかのディレクトリに展開し、そのルートに dotcloud.yml ファイルを以下のようにして PHP と MySQL サービス設定。

wp:
  type: php
 
db:
  type: mysql

でもって、このディレクトリをカレントにおいて push します。

$ dotcloud push maple4ever .

これでデプロイ完了。

起動した MySQL インスタンスに WordPress 用の DB を create databese します。 とりあえず MySQL の情報閲覧。 「アプリケーション名.サービス名」で info コマンドしてあげます。

$ dotcloud info maple4ever.db
build_revision: rsync-1309187922.37
cluster: wolverine
config:
    mysql_password: nyoron
    mysql_serverid: -1
created_at: 1309187925.281122
ports:
-   name: ssh
    url: ssh://dotcloud@ugogogo.dotcloud.com:9284
-   name: mysql
    url: mysql://root:mogemoge@hogehoge.dotcloud.com:9344
state: running
type: mysql

WordPress に設定する DB ホストは hogehoge.dotcloud.com:9344 のところなのでメモ。(デフォルトポートと違うので全部いれる)

create table & ユーザ作成。 こんなかんじ。 キャラセットは指定するとはじかれたので、そのまま行きました。

$ dotcloud run maple4ever.db -- mysql -u root -p[パスワード]
# mysql -u root -p[パスワード]
 
mysql> CREATE USER 'wp' IDENTIFIED BY '[任意のパスワード]';
mysql> create database wp;
mysql> GRANT ALL ON wp.* to 'wp'@'%';

上はデータベース名 wp 、ユーザ名 wp で設定の図。

次に info コマンドで php サービスの URL を取得して普通にブラウザアクセス。

$ dotcloud info maple4ever.wp
-   name: http
    url: http://d84fa7d5.dotcloud.com/
state: running
type: php

あとはいつもの通り WordPress をインストールすれば、

wp3202

ようこそ WordPress の世界へ。 :)

wp3201

動いた~!

WordPress 3.2 RC2 日本語版キタ。  サイト中身はめ組さんの「日本語版インポートテストデータ」です。 試験に大変便利なので見てみてください。 :)

http://d84fa7d5.dotcloud.com/

(そのうち消えます。)

残念ながら dotCloud 無料版ではドメインマッピングできないので変なホスト名ですが、なかなかよく動きますね~。 memcached のインスタンスもあげられるようなので、追加してみるといいかもしれません。

httpd は nginx を使っているようです。 いじればパーマリンクも設定できると思います。 ファイルのアップロードなども問題なく動きます。(ちなみに Java のアプリケーションサーバは Jetty のようです)

てなわけで、ネットワーク上に好きなアプリを簡単に配置して使う。 そんなことができるようになるかもしれない PaaS プラットフォームのお話でした。 他にも cloudBees とか同様のサービスがありますので探してみるのも面白いでしょう。

ばいっ。(←芸風がおかしい。。

ぎゃらぎゃらぎゃらくし~。

持ってそうで持ってなかったぼくですが、ついに小宇宙を燃焼させ買ってきましたスマートフォン。 :)

今まで使っていたケータイさんは 3年もので、ポケうちは相変わらず素早いし、じぐついさんは賢いしで悪くなかったのですが、電池が持たなくなってきたのと、ついったーとかで出力できない Unicode 文字があるという、もういじれる範囲では如何ともしがたい問題がでてきましたのでついに機種変更となりました。

あ、いまどきは「変更」とはいわないですか。 周りの人も Android が多くなってきたので操作を覚えておこうなんてのもありでござる。 :)

というわけで、なんだかとても速くてよさそうだった Samsung Galaxy SII です。

 galaxy00

とりあえずファーストインプレッションは画面でっかくてぬるぬる動いていいですねぇ。

で、ややしばらくぽちぽちいじって、…なんとなくつかんだ!

sp モードでの iモードメール送受信も、うまく動いているようです。

galaxy00

ちゃんと iチャネルも動いております。

Songbird とか Firefox とかあるのが Android さんの自由な部分。 :D

galaxy01

ちなみに音のほう。 上部端子ヘッドフォンアンプは、なんというか遠路はるばる走り切り疲れ切ったような音がするようです(笑) まぁまぁぼくの初代 iPod touch も似たような感じで、こんだけ無線とばす機械でオーディオ的な音を期待するのも厳しいのでしょう。 外で聴く分には十分です。 おしりのラインアウトからだしてみるのも面白そうですね。

音楽とかメディア系ファイルは適当に USB のマスストレージで送りつけると、転送後サーチして認識してくれるようで、Linux にも優しい作りになっております。 何を隠そう、Windows で iTunes を起動するのが面倒で、永遠に同じ曲しか再生されないぼくの iPod touch くん。。

てなわけで、Android の SDK は Linux での開発もサポートされております。 Ubuntu 11.04 でも以下の方法で実機とデバッグ接続できました。

USB を設定。 ファイルつくって権限つけます。 (ベンダーID は Samsung さんのです)

$ pwd
/etc/udev/rules.d
$ cat 51-android.rules 
SUBSYSTEM=="usb", SYSFS{idVendor}=="04e8", MODE="0666"
$ ls -laF 51-android.rules 
-rwxr-xr-x 1 root root 56 2011-06-25 22:39 51-android.rules*

でもって、実機側の設定 –> アプリケーション –> 開発あたりで debug をオンにして から Ubuntu に USB 接続。

あとは SDK と Eclipse のプラグイン入れて、プロジェクトつくって、、

galaxy02

AndroidManifest.xml の Debuggable を true にして Java のプログラムを Android Application 実行すれば実機転送されプログラムが実行されます。

実は以前も実機なしですがちょっと Eclipse 上で遊んでいたことがあって、エミュレータおっそいなぁと思っていたのですが、実機転送のほうが全然快適なんですね。。 こりゃええわ。

お気にいった!

いろいろ遊んでみたいと思います。 :D

ぐるぐるぐる~び~。

ぐるぐるぐる~び~(挨拶) というわけで、プログラム言語 Groovy。

最近、このブログをみてくれている会社の人から仕事でぐる~び~という言葉を聞いたり、帳票作成 Jasper Reports の標準スクリプトが Groovy に設定されていたり、あなたの生活にそっと忍び寄る Groovy。 ぼくも内部的なツールをつくるときや、エクセルからソースを起こすときなんかに大変便利に使っております。 :)

さて、Groovy の楽なところの一つにランタイムがポータブルであるというところがあげられると思います。 JVM と Groovy の jar がひとつだけあれば動作。 インストールいらないし、埋め込んで executeble jar にしてしまえばもう Groovy であったことすらわかりません。

$ java -jar groovy-all-1.8.0.jar hoge.groovy

 

カレントに jar 置いておけば、スクリプトファイルもこんなんでコンパイルかかってプログラムが動作してしまいますしとても便利です。

もうひとつ面白いなぁと思うのが、Groovy は Java と同じコメント形式をもちますが、先頭行のシェバングを読み飛ばせること。 というわけで、UNIX 上であれば以下のようにシェルスクリプトっぽい使い方ができるようになっています。

#!/opt/groovy-1.8.0/bin/groovy
 
println "*Groovy"
new File(".").eachFile {
    println it.name
}

 

これもなかなか便利ですね~。 ちなみに String が拡張されていて外部コマンドもすぐ呼び出せますので UNIX コマンドと合わせ技で、

#!/opt/groovy-1.8.0/bin/groovy
 
println "*Unix Command"
def command = "ls -l".execute() | "grep ^-".execute() 
command.text.eachLine {
    println it.split()[7]
}

 

こんなんもできます。 awk 使えというつっこみはなしで(笑)

Process クラスにオーバーロードかかっていて、パイプが | でかけたりして奥が深い。。

というわけで Ubuntu 生活も java-gnome あたりを使って Groovy ということで。 :)

loader.groovy。

#!/opt/groovy-1.8.0/bin/groovy
 
// java-gnome クラスロード
this.getClass().classLoader.rootLoader.addURL(
    new File("/usr/share/java/gtk.jar").toURL())
 
// 本体スクリプト評価
evaluate(new File('notify.groovy'))

 

notify.groovy。

import org.gnome.gtk.Gtk
import org.gnome.gdk.Pixbuf
import org.gnome.notify.Notify
import org.gnome.notify.Notification
 
// GTK & NotifyOSD 初期化
Gtk.init([] as String[])
Notify.init("notify.groovy")
 
// アイコン取得
def pixbuf = new Pixbuf("./torimaki.png", 40, 40, true)
 
// NotifyOSD 表示設定
def notify = new Notification(
    "γ(@ω@)γ "
    , "私は不変であることすら破壊する。"神の領域を侵犯し私は私であり続ける。ぐるぐる。"
    , null)
notify.setIcon(pixbuf)
 
// 通知!
notify.show()

 

loader.groovy で java-gnome の jar を動的クラスロードして実行してみました。 gtk.jar は apt-get install java-gnome あたりで入ります。(パッケージ名ちがったかも)

groovy02 

まぁこのサンプルは "notify-send".execute() でいけたりするのですが、ちょっとしたプログラムの中から gnome を簡単に呼べるのはいろいろ遊べそうですね。 :)

というわけでそんな Groovy さんですが、日本初(発)の Groovy 本がでるそうです!

Amazon.co.jp: プログラミングGroovy: 関谷 和愛, 上原 潤二, 須江 信洋, 中野 靖治: 本

GroovyはJavaと抜群の親和性を持つハイブリッド言語です。簡潔で強力な記述力と高い柔軟性を持っており、Javaを補完・強化する究極のパートナーになります。 本書はGroovyの基本的な文法を丁寧に説明するほか、Groovy API、Groovy JDK、Grape、メタプログラミング、ASP変換などの応用的な話題もカバーします。また、GrailsをはじめとするGroovyの関連プロダクトについても解説します。

さっそく予約しました~。

あなたのシステムにも Groovy ひとつ、そっといかがでしょうか。 ぐるぐる。

ノート PC に USB オーディオ

ノート PC にも内蔵のサウンドチップが乗っていて、ヘッドフォンとかラインとかついています。 ただその構造上やはりノイズがのりやすく、まぁなんとなく鳴ればいいくらいのイメージ。

ぼくは ThinkPad でプログラムかきながら音楽とか、枕元で IdeaPad とかおいてお休み音楽するときもありますので、ここで環境改善ということでポータブルの USB オーディオを買ってみました。 。

songbird03

なんだか暗くて分かりにくいですが、Creative さんの USB です。 1980円くらい。

ThinkPad、IdeaPad ともに Ubuntu 11.04 で動作させていますがうまく鳴ってくれています。 音は初代 iPod touch のヘッドフォンアンプくらいの音質?。 内蔵からみると相当良くなりますので二千円の価値は十分にあると思うです。 アンプも少し大きなヘッドフォンでも鳴らせるくらいはできるようです。

てなわけでソフトのほうもいじってみようということで、おなじみ(?) Songbird さん。

songbird01 

本家での Linux 公式サポートは終わってしまっているのですが、実はひそかにバイナリ配布は行われています。 その他 getdeb とかにもありますね。

Contributed Builds – Songbird Wiki

Linux Provided by Songbird.

これでうまく動作するのですが、せっかく Ubuntu で動かすので曲名を notifyOSD 通知してみます。 アドインがあるのですが、古くなってしまって現在そのままだと動きませんのでパッチしますぞ。

ubuntu-notifyOSD – Songbird Add-ons

Displays playing artist info using ubuntu notifyOSD library.

Songbird のアドインは Firefox のそれとほぼいっしょの構成です。 基本は XUL + JavaScript です。

てなわけで、まずは対応バージョンをあげてしまいます。

install.rdf

<?xml version="1.0" encoding="UTF-8"?>
<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"
     xmlns:songbird="http://www.songbirdnest.com/2007/addon-metadata-rdf#">
 
  <Description about="urn:mozilla:install-manifest">
    <em:id>ubuntu-notifyOSD@songbirdnest.com</em:id>
    <em:name>ubuntu-notifyOSD</em:name>
    <em:version>0.2.0.2</em:version>
    <em:creator>Tuna Celik</em:creator>
    <em:description>Displays playing artist info using ubuntu notifyOSD library.</em:description>
    <em:iconURL>chrome://ubuntu-notifyOSD/skin/icon.png</em:iconURL>
    <em:optionsURL>chrome://ubuntu-notifyOSD/content/options.xul</em:optionsURL>
    <em:homepageURL>http://www.tunacelik.info/</em:homepageURL>
    <em:targetPlatform>Linux</em:targetPlatform>
    <em:targetApplication>
      <Description>
        <em:id>songbird@songbirdnest.com</em:id>
        <em:minVersion>1.2.0</em:minVersion>
        <em:maxVersion>2.0.0</em:maxVersion>
      </Description>
    </em:targetApplication>
  </Description>
</RDF>

maxVersion を適当に 2.0.0 とかに。

chrome.manifest

overlay chrome://songbird/content/xul/layoutWithBrowserOverlay.xul         chrome://ubuntu-notifyOSD/content/overlay.xul
content ubuntu-notifyOSD                      chrome/content/
locale  ubuntu-notifyOSD  en-US                  chrome/locale/en-US/
skin    ubuntu-notifyOSD  classic                chrome/skin/

アドインのせる overlay を変更。

あとはインストール後に、~/.songbird/ の下に donotify.py ってありますのでそれに実行権限をつけてあげれば動くと思います。 :)

songbird04

うむ。 まんぞくまんぞく。 :D

OSC 北海道 2011 WordPress 出展

昨日、6/11(土) に札幌市産業振興センターで開催されました、オープンソースカンファレンス北海道 2011 に WordBench 札幌として WordPress ブースとセミナーの出展を yuriko さんとしてきました。 今年はなんと来場者数 600 人とのこと、東京を除く1番の数字とのことでなんだか頼もしい感じでした。 :)

セミナー資料とかは後日記載しますので少々お時間をください。

今回はスクリーンキャスト動画でプレゼン行っていたのですが、実は動画総時間が 41分あることが事前に分かっておりまして、45分のセミナーで時間足りないのは自明。 かなり飛ばしたのもありまして分からない感じですいません。 動画は編集しまして分かりやすい感じで公開したいと思いますので、お待ちいただければと思います。

319000280

何人かの方にご質問をいただいておりましたが、持ち込んでいたのは Linux(Ubuntu 11.04)で、gtkRecordMyDesktop で録画したスクリーンキャストを動画再生して合わせてしゃべっていた感じです。 初の試みでしたがかなり難しいかったです。。すんません。。

さて、ブースの様子です。 :)

おきゃやまの WordPress ユーザの雄、Masayan さんよりいただいたぼくの愛用キャラ、木製 Pidgin ハトを絡めまして構成です。 みなさんにこれは何ですかときかれるたびに、WordPress 写真部と工作部? のご説明を差し上げました(笑)

DVC00288

yuriko さんが着てくれましたので当然モバイル系も充実。

IMG_0111

こうして、いろいろなものが絡むことができるのも WordPress の魅力の一つではないでしょうか。

さて、実はこんなコラボ企画で OSC 持ち込みが残念ながら間に合わなかったものがありますので、ここで紹介いたします。

おきゃやま WordPress 工作部 Masayan さんより、愛と勇気のバイクチーム Manukeno Masayan Racing Team 、M.M.R.T ロゴステッカーとなんと Pidgin ステッカーが届いておりました。

正直者が徳をする世界に・・・ – MMRT daily life

MMRTステッカー、インテル風ステッカー、ちょっぱー風ステッカーの3枚をセットで1名に・・

本日になってしまいましたが早速張ってみました。

やっべー、かっちょよすぎ。

IMG_0116

…ピットに置きたい(笑)

というわけで、いろいろな方がいろいろな形で参加できるオープンソースは楽しいですね!!

最後になりましたが、OSC 北海道運営スタッフの方々本当にお疲れ様でした。 おかげさまで楽しい一日でした。 :)

痛 iPod touch に挑戦

表題の通りでございます(笑)。。。

ずっといいなと思っていたのです。

認めたわけではない – MMRT daily life

違う、そうじゃない by まーちん

PC にステッカー。 MMRT に WP に ちょっぱ~に、雨男 inside :)

Masayan さんは秘密兵器をもってらっしゃる。

鬼に金棒、ツインカムにターボ! – MMRT daily life

STIKA買っちゃったんだもん。(でへ)

見るたびにうらやましすぎます。。(笑)

そして道具もそうですが Masayan さんには工作の腕があるという・・・。 ぼくない。 しょんぼり。。

工作とか、yutaka さんみたくテレビ直せるとかにぼくはあこがれが強いです。 :)

でもここで諦めるのも寂しい、、ちょっとサプライ品を見ていると 1000円くらいでインクジェット用のシール紙が売っているようでしたので、ここで試験的に大挑戦です!

Amazon.co.jp: 手作りステッカー(透明) EDT-STSC: 文房具・オフィス用品

製品概要:インクジェットプリンタでオリジナルデザインのステッカーが作れる!ガラス面などでの使用にも最適な手作りステッカー(クリア)。

透明、、ってことは白がでないということですなぁ。 白地のものも売っているのですが、周りを綺麗にカッティングできる自信がまったくなかったのでごまかしのきく透明を。。

ターゲットはシルバーの iPod touch に、、お馴染みらい子ちゃんこと(?)、Microsoft さんが世に放った奇跡、藍澤光さんでございます。 さぁどうなるか。

まず背景を白でぬいた感じで印刷します。

light01

ここまではソフトの世界なので簡単。。 次は UV カットコーティングを上に貼り付けます。 どきどき。

light02

てかてか。

でもってここからが問題。 周りをそれっぽく切り抜きます。 シールなので

まるぅくまるぅく

切り抜くのがはがれにくく、あと素人のごまかしもきくようです。(笑)

でもって、指紋がつかないようにはがして、、

とりゃ~~!

light03

…うん、ちょっと厚手なので違和感はありますが、、、透明でさりげなく痛くて悪くはない。。。。(笑)

ぼくのスノーボードは白。 張り方はなんとなく分かった!ので、WordPress ロゴを入れてあげようかと画策中です。 :D

Groovy + SWT + WebKit + jQuery Mobile でデスクトップアプリケーションをつくる

最近のいわゆる OS 上で直接動作するデスクトップアプリも、iPhone の影響かぴょこぴょこ動くのが多くなってきた気がします。 Linux のアプリでもこの手のがありますが、だいたいは WebKit + Python でやっている模様。 じゃー、Groovy でもやってやろうじゃないかというのがこの企画でありまして、でもって結果 SWT + WebKit はなかなか強力な感じな気がします。 :)

どういう風にするかというと、まずウインドを作成して WebKit のコンポーネントをぺたっと張ります。 でもって、Groovy 側から処理したいタイミングがあれば、JavaScript 経由で処理結果を WebKit の HTML に描画。 WebKit 側から Groovy を呼びたければ、これまた JavaScript を経由して処理をして値をもらう、みたいな感じです。

Groovy 側では JavaScript では処理できないような、ローカル資源を扱う処理をかいてあげて、WebKit 側にはビューを担当させます。 ここでは HDD にある画像ファイル一覧を読み出して画面に表示するようにしています。 まぁ HTML5 とか使うとこれはできるのかもですが、なんちゃってサンプルということで。  Java のライブラリで EXIF でも読めばそれっぽかったですね。

さて、HTML + JavaScript をビューに使うメリットは多くの派手な画面を描けるライブラリが使えることで、ここでは jQuery + jQuery Mobile を使って iPhone ちっくな画面とアニメにしてみました。 :)

画像サイズが不揃いでかっこわるくてすいません、すいません。。

webkitgtk02

デバッグ用にツールバーとか、タブとかつけていますが、本来的にはこれはなくなるもので、ミニブラウザと言うべきものがアプリの体裁となります。

webkitgtk01

上の画面から下の拡大画面にアニメで遷移、、ということでこれは動画にて。 :D

 

Groovy – JavaScript インターフェースは、このスクラップコードでいいますと「HTML ソース表示」の部分が Groovy –> JavaScript 呼び出し。 ローカルファイル表示の部分が JavaScript –> Groovy 呼び出しとしています。

Groovy –> JavaScript は簡単で SWT の browser コンポーネントにメソッドが用意されています。

Groovy 側。(タブ切り替えたときのイベント)

tabFolder.addSelectionListener([
  widgetSelected : { SelectionEvent e ->
    if(e.item == tabSource) {
      source.setText(screen.evaluate('return getContentHtml()'))
    }
  },
  widgetDefaultSelected : {}] as SelectionListener)

 

JavaScript 側。

// タブ切替時にソース表示を行う。
function getContentHtml() {
    return $('html').html(); 

}

 

抜粋コードなのであれですが、Groovy から evaluate を発行して JavaScript から返値を string でもらっています。 evaluate の中身に return をかくのを忘れてしばらくはまっていたのはここだけの秘密です(笑)

今度は逆パターン。 (たとえば) jQuery の ready を契機に Groovy のメソッドを呼び出すパターン。

JavaScript 側。 getFileList() がそれです。 値もらって HTML くみたてています。

$(document).ready(function() {
  var fileList = eval("(" + getFileList() + ")");
  for (var name in fileList) {
    $("#filelist").prepend(
      "<li class='ui-li-has-thumb ui-li ui-li-static ui-body-b'>"
      + "<a href='#bar' class='ui-link-inherit'"
      + "onclick='imageChange(\"" + fileList[name] + "\")'>"
      + "<img src='" + fileList[name] + "' class='ui-li-thumb'/>"
      + "<h3 class='ui-li-heading'>" + name + "</h3></li>\n")
      + "</a>";
  }
  $('ul').listview('refresh');
});

 

Groovy 側、 JavaScript とのインターフェースをとるために SWT には BrowserFunction というクラスが用意されています。 これがエロい。

event = new BrowserFunction(screen, "getFileList") {
  public Object function(Object[] arguments) {
    return getFileList(arguments);
  }
}
 
def getFileList(args) {
  def files = [:]
  new File("${imagePath}").eachFileMatch(~/.*\.jpg/) {
    files[it.name] = it.path 
  }
  return new JsonBuilder(files).toString()
  //return [10, 20] as Object[]
}

 

ここで我らが Groovy。 ということで返値に JSON を使っています。 JSON で Map を構築して return して JavaScript 側で eval すれば良い感じでデータの受け渡しができます。

インターフェース的には、org.eclipse.swt.browser.WebKit:convertToJS() あたりをみると分かりますが、String、Boolean、Number、Object[] がやりとりできるようです。 Object[] はこれらの再起です。 上の最後のソースの再下位行が Object[] で返す場合の記述です。

以上、まぁアプリの作りとしては若干強引な気もしますが、既存 GUI コンポーネントを使わずに、特にリキットデザインにしたい UI の場合はこの方式は楽かもしれません。

てなわけで、、シルバーらい子ちゃんをだしておいて、なぜ Silverlight じゃないんだっ、WPF じゃないんだっ。 しかも Windows じゃないし! ゆ、ゆるさないんだからね! となど聞こえてきそうですが、ここはご勘弁ください。。

あぁ、らい子ちゃん・・・。(←はまりすぎ

あ、そうそう SWT + WebKit は Ubuntu 11.04 だと SWT 3.7 の現在 head を使わないと貼り付けられないのでご注意ください。 あとね、、なぜかその WebKit で jQuery Mobile を使うとアプリ終了時に WebKitGTK+ がセグるようです。 なんだろうなぁ。 ちょっと調べてみます。

—-

以下、スクラップソースなので全然アプリケーションの体裁になっていませんが、一応動くコードをおいておきます。

Groovy 側、

import groovy.json.JsonBuilder
import org.eclipse.swt.*
import org.eclipse.swt.browser.Browser;
import org.eclipse.swt.browser.BrowserFunction
import org.eclipse.swt.browser.ProgressListener
import org.eclipse.swt.custom.CTabFolder
import org.eclipse.swt.custom.CTabItem
import org.eclipse.swt.events.SelectionEvent
import org.eclipse.swt.events.SelectionListener
import org.eclipse.swt.layout.GridData
import org.eclipse.swt.layout.GridLayout
import org.eclipse.swt.widgets.Display;
import org.eclipse.swt.widgets.Label
import org.eclipse.swt.widgets.Shell;
import org.eclipse.swt.widgets.Text
import org.eclipse.swt.widgets.ToolBar
import org.eclipse.swt.widgets.ToolItem
 
class BrowserApplication {
 
    Display display
    Shell shell
    CTabFolder tabFolder
    CTabItem tabScreen
    CTabItem tabSource
    Browser screen
    Text source
    Label statusBar
    ToolItem toolbarReload
    
    boolean ready
    def event
    def url
    
    def imagePath = "/home/hiromasa/ピクチャ/wallpaper/"
    
    def init() {
        display = new Display()
        
        // シェル
        shell = new Shell(display)
        shell.setSize(540, 640)
        shell.setLayout(new GridLayout())
        shell.setText("シルバーらい子ちゃん")
        
        // ツールバー作成
        ToolBar toolbar = new ToolBar(shell, SWT.NULL)
        toolbarReload = new ToolItem(toolbar, SWT.PUSH)
        toolbarReload.setText("リロード")
 
        // CTabFolder
        tabFolder = new CTabFolder(shell, SWT.BORDER)
        tabFolder.setTabPosition(SWT.BOTTOM)
        tabFolder.setSimple(false)
        tabFolder.setTabHeight(20)
        tabScreen = new CTabItem(tabFolder, SWT.NONE)
        tabScreen.setText("スクリーン")
        tabSource = new CTabItem(tabFolder, SWT.NONE)
        tabSource.setText("ソース")
        tabFolder.setSelection(0)
        // CTabFolder - Layout
        GridData tabLayout = new GridData()
        tabLayout.horizontalAlignment = GridData.FILL
        tabLayout.verticalAlignment = GridData.FILL
        tabLayout.grabExcessHorizontalSpace = true
        tabLayout.grabExcessVerticalSpace = true
        tabFolder.setLayoutData(tabLayout)
        
        // WebKit
        url = new File(".").getAbsolutePath()
        screen = new Browser(tabFolder, SWT.WEBKIT)
        screen.setUrl("file:///${url}/script/screen.html")
        tabScreen.setControl(screen)
 
        // ソース
        source = new Text(tabFolder, SWT.MULTI | SWT.H_SCROLL | SWT.V_SCROLL)
        tabSource.setControl(source)
 
        // ステータスバー
        statusBar = new Label(shell, SWT.LEFT)
        statusBar.setLayoutData(new GridData(GridData.FILL_HORIZONTAL))
    }
    
    def handle() {
        // screen.html 読み込み終了検知
        screen.addProgressListener([
            changed : { },
            completed : {
                ready = true
                statusBar.setText("Ready")
            }] as ProgressListener)
        // リロードボタン
        toolbarReload.addSelectionListener([
            widgetSelected : {
                screen.refresh()
            },
            widgetDefaultSelected : {}] as SelectionListener
        )
        // Groovy からブラウザの JavaScript を呼び出して HTML テキストをもらう。
        tabFolder.addSelectionListener([
            widgetSelected : { SelectionEvent e ->
                if(e.item == tabSource) {
                    source.setText(screen.evaluate('return getContentHtml()'))
                }
            },
            widgetDefaultSelected : {}] as SelectionListener)
        // JavaScript から Groovy を呼び出すための JS 関数を登録する。
        event = new BrowserFunction(screen, "getFileList") {
            public Object function(Object[] arguments) {
                return getFileList(arguments);
            }
        }
    }
    
    // ファイル一覧を取得して JSON 形式で返却
    def getFileList(args) {
        def files = [:]
        new File("${imagePath}").eachFileMatch(~/.*\.jpg/) {
            files[it.name] = it.path 
        }
        return new JsonBuilder(files).toString()
        //return [10, 20] as Object[]
    }
    
    def loop() {
        try {
            shell.open();
            while (!shell.isDisposed()) {
                if (!display.readAndDispatch()) display.sleep();
            }
        } catch (Exception e) {
            // TODO:
            e.printStackTrace()
        } finally {
            display.dispose()
        }
    }
 
    def BrowserApplication() {
        init()
        handle()
        loop()
    }
    
    def static main(def args) {
        new BrowserApplication();
    }
}

 

JavaScript + HTML。

<!DOCTYPE html>
<html>
<head>
<title>jQuery Moblie test</title>
<link rel="stylesheet" href="./css/jquery.mobile-1.0a4.1.css" />
<link rel="stylesheet" href="./css/style.css" />
<script src="./js/jquery-1.6.1.js"></script>
<script src="./js/jquery.mobile-1.0a4.1.js"></script>
<script language="JavaScript">
$(document).ready(function() {
    // 右クリックでコンテキストメニューを表示しない。
    $('body').live('contextmenu', function(e){
        e.preventDefault();
    });
    // ファイル一覧取得
    var fileList = eval("(" + getFileList() + ")");
    for (var name in fileList) {
        $("#filelist").prepend(
            "<li class='ui-li-has-thumb ui-li ui-li-static ui-body-b'>"
            + "<a href='#bar' class='ui-link-inherit'"
            + "onclick='imageChange(\"" + fileList[name] + "\")'>"
            + "<img src='" + fileList[name] + "' class='ui-li-thumb'/>"
            + "<h3 class='ui-li-heading'>" + name + "</h3></li>\n")
            + "</a>";
    }
    $('ul').listview('refresh');
});
 
// 詳細画面に遷移
function imageChange(path) {
    $("#image").attr({src: path});
    return true;
}
 
// タブ切替時にソース表示を行う。
function getContentHtml() {
    return $('html').html(); 
}
 
</script>
</head>
<body>
 
<!-- メインページ -->
<div data-role="page" data-theme="b" class="setting">
    <div data-role="header" data-position="fixed">
        <h1>らい子ちゃん</h1>
    </div>
    <ul data-role="listview" data-theme="b" id="filelist">
    </ul>
    <div data-role="footer" data-id="footer" id="footer" data-position="fixed">
        <h4>ばよえ〜ん</h4>
    </div>
</div>
 
<!-- サブページ -->
<div data-role="page" id="bar" data-theme="b" class="setting">
    <div data-role="header">
        <h1>らい子ちゃん</h1>
    </div>
    <div data-role="content">
        <img id="image" src="" />
    </div>
    <div data-role="footer" data-id="footer" id="footer" data-position="fixed">
        <h4>ぱんなこった〜</h4>
    </div>
</div>
 
</body>
</html>

WordPress Live Writer が欲しい

ぼくは家では基本的に Linux を使っているのですが、ブログを書くときは Windows 。 というのは Windows Live Writer を使っているためなのです。 このソフトはできが良いので Windows 起動するのはやぶさかではないのですが、他の OS でも動くの欲しいじゃないですか、ということで contenteditable のお話です。 :)

Windows Live Writer のキモはブログの CSS をそのままもってきて、編集時の表示にそのまま使えること。 <p> の改行幅から引用表記からそのままで書けますので出来上がりの想像がつきやすいので気に入って使っています。 画像やソースコードの挿入が簡単なのも良いですね。

live03

このソフトがどうやって実装されているのかちょっと分かりませんが、IE の contenteditable か、、いや DOM で外からつっこんでるのかなぁ。 Trident いじったことないので一瞬の動きでわからないひろまさくん。

さて contenteditable というのはもともと IE 独自の HTML 属性で最近は HTML5 に入ったのかな、ちょっと詳しくないですけども。 ajax の基盤記述 XMLHttpRequest も実は IE 5 の独自実装が始まりですし、嫌われ者のくせに意外と世界を変えている IE くん。(笑)

これが何かって言うと、、デモ見てもらった方が早いですね。

HTML5 Demo: ContentEditable

Any elements with the contenteditable attribute set will have a grey outline as you hover over. Feel free to edit and change their contents. I’m using local storage to maintain your changes.

HTML の属性に contenteditable=true って記述すればその中があろうことかブラウザから編集可能になる技術です。

じゃあ、Linux でうごく Live Writer をつくるには WebKit をウインドウにはって サイトの CSS と HTML を読んで、コンテンツのところを contenteditable=true にしちゃえばいいんじゃないってことで、、

live02

って、まだなんも動きませんが一応ちゃんと CSS もってきて編集できていますぞ。 表示形式がこのサイトになっているところに注目です。

 

Groovy + SWT + WebKit でつくっているので JVM さえ入っていれば Windows / Linux / Max OS X で動くはずです。

ただ SWT は 3.7 M7 、、でも Ubuntu 11.04 ではそれでも動かなくて head を使っています。 Mac とか Windows は 3.7 M7 で WebKit ぺたっとできるはずです。(Windows は safari 入れるらしい)

Ubuntu 11.04 はこの修正で直っています。

Bug 343454 – XULRunner 2.0 kills Eclipse when opening anything Browser related

1. WebKitGTK 1.4 is not ABI-compatible with 1.2, so the initial attempt to use it is failing.  This is fixed with the patch in comment 19, so SWT.NONE-style Browsers should no longer fall back to using Mozilla when WebKit 1.4 is present.

まぁ動きを見ているといろいろ苦難はありそうですが、知恵と勇気でなんとかなるレベルの気がします。

実のところ、SWT と WebKit のインターフェースは JS のみで、Trident (IE) のように直接 DOM にアクセスできないので処理的に厳しい部分もあります。

でも最近この WebKit 張ってクライアントアプリつくるパターンって結構見ますね。 たとえば、Linux の gwibber とか Hotot とかそのタイプだと思います。

live01

Hotot はネイティブとのインターフェースに JS の alert だしてそのイベントハンドルからアラート文字列で Python と通信しあうという無茶をしてるようです(笑) ネイティブは設定ファイルの読み書きとか、ネイティブの通知を出すとかだけでほとんどの処理を JS に依存しています。

たとえば jQuery + jQuery Mobile を使うと iPhone 風のアプリとかすぐつくれそうですね。 クライアントアプリなんかかいたことないけど、JavaScript は得意だぜって方はこの方式は面白いかもしれません。 chrome extention とか chrome os とかの考え方に近そうです。

contenteditable 自体は別にブラウザでも動きますので、WordPress 自体にサイトを管理画面に入らずに直接編集できる機能がついたりしても楽しそうですぞ。 管理バーからぴっとするとそのままの画面で編集モードとかね。 :D

WordPress 3.2 から文書編集にも力が入っているようなので、こんな直接編集のも将来入ったらいいなと思っております。

SaCSS vol.24 コーディング勉強会と OSC 北海道 2011 WordPress セミナー告知

5/14 のハムさん主催、SaCSS 勉強会に参加させていただきました。 こちらの勉強会におじゃまさせていただきますのは 2回目となりますが、Web 製作の方とお話できるのでいつも楽しみにしています。 今回は東京から WordPress メンバもこられていましたのでさらに楽しかったです。 :)

SaCSS vol.24 札幌コーディング勉強会 開催 | THE HAM MEDIA BLOG

今月のテーマ者WordPress。何度かテーマとしてとりあつかっていましたけど、今月は少し内容も時間も盛りだくさんになる予定です!

ぼくはライトニングトークということで「PHPをかくときに便利なツール・手法の紹介」をちょっとだけしゃべらせていただきました。

sacss2402

Eclipse for PHP Developer に WordPress をのせた紹介にしてみましたが、やっぱりカーソルが動いた方が面白いということでスクリーンキャスト形式で。(実は最近スクリーンキャストネタが多いのはちょっと練習も兼ねていました(笑)

当日使ったものを、youtube のほうに編集してアノテーションとかつけてアップロードしましたので良ければご覧ください。 LT なのですぐ見れる長さです。

 

そしていつも通りカメラもっているのに写真を撮っていないぼく。。 どなたかください(笑)

みなさんのプレゼンも、、分かる限りでリンクさせていただきます。

SaCSS vol. 24に参加してきました | diary | understandard.net

今回僕は、「WordPress を自分好みに」というタイトルで、functions.php にちょっと書き足すだけでできるカスタマイズ方法を紹介しました。

SaCSS Vol.24参加レポート(講演資料公開) | Simple Colors

私の方は、「WordPressでの企業WEBの作り方」と題して、基本的な構成方法、設定、プラグインと簡単な利用方法の紹介、設定などをお話させていただきました。

みなさん果敢にライブ WordPress 操作に挑戦されていたのが印象的でした。 さすがに普段から慣れているだけのことはあります。

たくさんの方が集まりましたので、初めましての方、実は初めましての方(笑)、ご無沙汰しておりますの方、どうもありがとうございました。 夜の方も楽しかったです。

さてもうすぐ 6月てなわけで、OSC 北海道が 6/11 に開催されます。 今年も WordBench 札幌よりブースと、あとぼくが WordPress のセミナーをやらせていただくことになりました。 Ktai Style ゆりこさんも去年に引き続きまして来てくださいます。

オープンソースカンファレンス2011 Hokkaido – イベント案内 | 2011-06-11 (土): 世界標準ウェブ制作ツール WordPress の魅力

講師:田中 広将

担当:WordPress 地域コミュニティー「WordBench 札幌」

対象者:WordPress ユーザー、CMS に興味のある人、ウェブ制作者など
レベル:初級~中級者向け

ブログツールから汎用のウェブ制作ツールへと用途が広がりつつある WordPress。その機能紹介およびカスタマイズの魅力を伝えます。

去年もセミナぼくでしたので、もうひろまさならいいや、、と言わず良ければ遊びに来てください(笑) セミナーは長くて、、という向きはブースのほうにどぞどぞ。

ぼくはいつも通りふらふらしていると思いますので、見つけたら声をかけてやってください。 最近は知っている方が増えてきたので心強いです。 :)