さくらの VPS と Apache Tomcat7

突然ですが、さくらの VPS を借りてみることにしました。 :)

当初はこの VPS に家から VPN でつなぎっぱなしにして、うちのローカルサーバの一部の機能を外に出す使い方を考えていたのですが、まぁ実際そこまでする要件もなさそうなので断念(一応、Android からの接続もできたのですが)。

というわけで、Groovy とか Rails とか PHP 以外のアプリケーションが動作するお遊びサーバとしてスタートです。

最近だとたまにこのサイトでもでてきます、Cloud Bees とか dotCloud とか無料の PaaS つかってもその手のアプリは割と簡単に動かすことができるのですが、無料だとドメインマッピングに制限があったり、ちょっと不自由。 お金を払うとなると VPS と同じくらいかもっと高い料金になりますので、自由度の高いほうに転んだ感じです。

あ、ちなみにここ .another はそのままコアサバです(笑)

というわけで、アプリケーションサーバ選択。 OS はさくら標準の CentOS 5.5 のままです。

Jetty にしようか Tomcat6 、いやいや Tomcat7 でしょ、とか、ここで GlashFish とか。。 しばし考えて、あまり根拠もなく Tomcat7 が選択される。 7 は初めて触りますが、勝手知ったるなんとかでなんとなかるでしょう? :D

Java6 は Oracle 提供の .rpm を、Apache httpd と PostgreSQL は CentOS のパッケージのものを。 Tomcat7、Groovy は それぞれからの提供のものを /opt に展開インストール。

そういえばバーチャルホストでトム設定するの初めてだったので微妙にてこずりました。。

Groovy のパス設定。(ファイルつくる)

[root@capibara ~]# cat /etc/profile.d/groovy.sh 
# groovy
PATH=/opt/groovy-1.8/bin:${PATH}

ポスグレの表領域位置指定。(標準で /home にパーティションきられているので表領域を /home/postgres に移動。 サービス起動前に前に以下のファイルつくる)

[root@capibara postgres]# cat /etc/sysconfig/pgsql/postgresql 
PGDATA=/home/postgres
[root@capibara postgres]# chkconfig postgresql on
[root@capibara postgres]# service postgresql start

ポスグレ initdb 等。(たとえばユーザつくって redmine の DB 作成の図)

[root@capibara home]# su - postgres
-bash-3.2$ 
-bash-3.2$ initdb -D /home/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

Tomcat7 バーチャルホスト設定。 $CATALINA_HOME/conf/server.xml の Engine に追加。

<Engine name="Catalina" defaultHost="localhost">
  <Host name="apps.maple4ever.net"
     appBase="apps.maple4ever.net"
     unpackWARs="true"
     autoDeploy="true" />
</Engine>

$CATALINA_HOME/apps.maple4ever.net のディレクトリを作成。 ちなみに adduser tomcat して、$CATALINA_HOME 配下を tomcat 権限に、また Tomcat は同ユーザで commons-deamon 起動しています。クラスパスの jar が 6 と違うので要注意。

このディレクトリに .war 入れるとファイル名をコンテキストパスとしてデプロイされます。

Apache のバーチャルホスト及び mod_proxy_ajp 設定。 指定のコンテキストパスを Tomcat になげます。 /etc/hosts や /etc/sysconfig/network なども設定のこと。

[root@capibara www]# cat /etc/httpd/conf.d/proxy_ajp.conf 
 
LoadModule proxy_ajp_module modules/mod_proxy_ajp.so
 
NameVirtualHost *:80
 
<VirtualHost *:80>
   ServerName unknown 
   <Location />
      Order deny,allow
      deny from all
   </Location>
</VirtualHost>
 
<VirtualHost *:80>
   ServerName apps.maple4ever.net 
   <Location /captcha-grails>
      ProxyPass ajp://apps.maple4ever.net:8009/captcha-grails
   </Location>
   <Location /click-examples>
      ProxyPass ajp://apps.maple4ever.net:8009/click-examples
   </Location>
</VirtualHost>

Location でおしり / なしにすると、スラつけなくてもいい感じに飛ばしてくれるようです。

てなかんじで、端折っているのであんまりメモにもなっていませんが(笑) 実際には、iptables の設定なども加わるでしょう。

Groovy + Grails のサンプルアプリ。(そのうち消えます)

sakura2011072402

Apache Click のサンプルアプリ。(そのうち消えます)

sakura2011072403

やぁ、動いた!

さすがに JVM だけあってさくさく動きますね。

sakura2011072401

さくら VPS はメモリ 1G のサーバにしていますが、これで残りメモリ 400M ほど。 ポスグレがフル稼働していないのでなんともですが、アプリが 1つか 2つは動きそうな感じです。

さて、何して遊びましょう。 :)

プログラミング Groovy キタ!

楽しみにしていました書籍「プログラミング GROOVY」が Amazon さんより到着しました。 日本初(発)の Groovy 本ということで、著者の方々も Web で Groovy のこと検索すると必ずお世話になる方ばかりですごいす :) 。。

てなわけで早速。

groovy20

出たばかりの Groovy 1.8 についても網羅されていますし、 イデオムや GDK の API が一覧できるとても良い本でした。 Groovy の歴史的経緯など背景的なことなども知ることができて楽しく読み終えることができました。 ぼくはまだ全然 Groovy のボキャブラリが少ないので、今後も座右の書として活躍です。 :)

同僚の人が、仕事で Groovy をやりはじめたようなのでお勧めしておきましょう。(←どうやら貸さないらしい(笑)

最近ぐるぐる言い出したのは、実はふと買ってみた Groovy In Action が面白すぎたせいなのです。 おもしろい技術書というの非常に大切な存在ですね。 In Action 1st は既に絶版(Amazon で 1.5万円くらい。。)ですので、プログラミング Groovy がその役目を果たすのではないかと思います。 :)

てなわけで(??)、本日は Groovy スクリプトをひとつかいてみました。

以前、shiroica さんがつくられていました XREA/CORESERVER への SSH 許可ホストを登録する Python スクリプトの Groovy 移植版です。 なんとなく移植(笑)

XREAのサーバーに設置したWordPressを自動バックアップする環境を整える

さて、とりあえず手動で登録すればよいことは分かりましたが、登録の有効期限は30日間だけに限られています。また、出先でSSHで繋ぐために別の IPアドレスを登録した場合、上書きされてしまい、再度登録しないと繋がらなくなってしまいます。そのため、ホスト情報の登録も自動化する必要があります。そこでこんなスクリプトをPythonで書いてみました。

Groovy は JVM と Groovy の jar ひとつあれば動作しますので Windows でも動作させやすいのではないかと思います。(下のソースは手元の Ubuntu で動かしていますので1行目にシェバングが入っています)

動作環境のグローバル IP アドレス調べて、レンタルサーバの管理画面に GET で送信してあげるプログラムです。

#!/opt/groovy-1.8.0/bin/groovy
 
// ここを書き換えてください
def server = 'サーバ名'
def username = 'ユーザ名'
def password = 'パスワード'
def ipaddressResponder = 'グローバルIPを教えてくれるPHP等のURL'
 
def adminURL = "http://$server/jp/admin.cgi"
 
if(!(ipaddressResponder.toURL().text ==~
    /\d+\.\d+\.\d+\.\d+/)) {
    println "Failed ($ipaddress)"
    System.exit(1)
}
 
def values =
    [ 'id' : username, 'pass' : password,
    'remote_host' : ipaddress, 'ssh2' : 'SSH登録']
def param = ""
values.each {
    param += 
        "${it.key}=${URLEncoder.encode(it.value, "UTF-8")}&"
}
param = param[0..param.size()-2]
 
if(!("$adminURL?$param".toURL().getText("Shift_JIS") =~
    /データベースに追加しました。/)) {
    println "Failed (unmutch)"
    System.exit(1)
}
 
System.exit(0)

 

Linux で groovy シェルを動かすと Exception したときに echo $? が 1 返してくれるようなので、例外処理は思い切って削除しちゃいました。

ほとんど調べることなくホントにのりでかけますので便利ですねぇ。 こんな感じじゃない?って書き方が普通に動くのはちょっと感動します。 Java だけでなく、Web 制作で PHP とかやられている人にもとっつきやすいのではないでしょうかっ。

さて大抵の OS でいけるこの Groovy スクリプトの簡単な動作のさせ方は、、

  1. とりあえず上のソースの 1行目を消す。 ソース内にあるサーバ設定とかする。
  2. Groovy をダウンロード してきて、アーカイブの中に入っている embeddable\groovy-all-1.8.0.jar を上のソースを保存したファイル(たとえば registhost.groovy)といっしょのフォルダに置く。
  3. コマンドプロンプトやコンソールをそのディレクトリに開いて以下のコマンドを入力。
java -jar groovy-all-1.8.0.jar registhost.groovy

 

Keep on Groovy – ing!

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 色。 こちらも届きましたぞ。 すごいね、ねんどろいど。 :)

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

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

今まで使っていたケータイさんは 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

痛 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>

デスクトップマスコット MaCoPiX

新しい OS をインストールするといろいろいじりたくなるものですが、今度は MaCoPix さんでデスクトップマスコットを入れてみました。 えへ。。

MaCoPix さんは GTK+ でかかれたデスクトップマスコットエンジンです。 いわゆるウインドウにお座り動作できる何かですが、Ubuntu のパッケージにも入っているんですね! 知りませんでした!

MaCoPiX : Mascot Constructive Pilot for X

MaCoPiX (Mascot Constructive Pilot for X の略 : "まこぴっくす"と読んでください) は、UNIX系OS(要X Window System)、もしくはMicrosoft Windows(2000/XP以降)で動作するマスコットプログラムです。

GTK+ / Cairo に対応していますので、きれいに半透明とかできてとてもめんこすな感じであります。 :)

Ubuntu 11.04 の場合、インストールは apt-get でいけます。

sudo apt-get install macopix-gtk2

あとは端末から macopix で起動して、メニューの追加からありがたくダウンロードされたマスコットを読んであげれば起動完了です。(Unity の場合グローバルメニューにインストールメニューがいきますのでご注意を)

MaCoPiX : Mascot Constructive Pilot for X

■おすわりマスコット■

初音さんもいらっしゃいました。 :)

【Project】MaCoPiXマスコットDancingMikuα3&MikuMikuWall?【Mikunchu♪】

ではありがたく…。 ごほん。

ごう!MaCoPix!

スプラッシュの上にのった~。 かわええ。。

macopix01

ちなみに全然関係ないですが、Eclipse を使っている方なら感じる窓右下の白三角の違和感。 これは Ubuntu 11.04 でウインドウサイズ変更をつかみやすいようにするという改良の副作用で、スプラッシュ窓とかまで大きさが可変になってしまった様子です。 まぁ Eclispe はパッケージ外なのでしょうがない(笑)

MaCoPix は技術的には GTK の非矩形ウインドウというやつだと思うのですが、これがなかなか高度で・・・。

macopix02

上の初音さんでは、外側だけではなくミクの首とツインテールの間もウインドウあたり判定がなくなっているのが分かります。 透過画像からこのような形状のウインドウをつくりだすのって結構大変だと思いますが、難なくという感じですごいですね。

てなわけで、やっぱりマスコットは動いてるのがめんこいということで動画も撮ってみました。

むは! 萌えしぬる。。

・・今年度はこの調子でオチをつけていきますぞ。(←無理オチは不要です)

Ubuntu 11.04 インストール(ソフト編)

というわけで、前回はハードに攻めましたので Ubuntu 11.04 インストール・ソフト編です(?)。。

Unity/Compiz が動作している様子を動画で撮りましたのでインストールしていない方もお楽しみください。 :)

クリーンインストールしました USB HDD にて初期設定から。

Adobe Flash などのサードパーティソフトウェアと、Unity の設定ができる Compiz 設定マネージャ。

sudo apt-get install ubuntu-restricted-extras
sudo apt-get install compizconfig-settings-manager

サードパーティソフトはライセンスをご確認の上インストールを。 CUI からやるとライセンス認証もテキストででます。 TAB とエンターで操作です。

次は Eclipse 動かすために sun-java6 をインストールしました。 まずは Synaptic パッケージマネージャを起動して、設定->リポジトリから Canonical パートナーパッケージにチェック。

ubuntu1104-30

でもって、以下のコマンドでまずは sun-java6-jdk が入ります。

sudo apt-get install sun-java6-jdk sun-java6-plugin
sudo update-alternatives --config java

下の update-alternatives コマンドでおそらく初期状態 OpenJDK に向いている Java を sun-java6 に向ければ準備完了。

あとは適当に Eclipse 展開して実行すれば動くはずです。 本来は /opt とかに入れたいところですが、Linux 版の Eclipse で shared モード動作させるとうまくインストールできないプラグインがでたことがありましたので、ぼくは /home/hiromasa/apps とかに入れています。

でもって、このようなパッケージ外のアプリケーションを入れると Unity ランチャーくんがアイコン表示してくれなかったり、うまくピン留めできなかったりちょっと悲しい感じになります。

この方法であっているか分からないのですが、このような場合、以下の場所に .desktop ファイルを作成してダブルクリック起動するとアイコンとかちゃんとでますので、その状態でピン留めとかするとうまい感じに動くようです。

cat ~/.gnome2/panel2.d/default/launchers/eclipse.desktop
#!/usr/bin/env xdg-open
 
[Desktop Entry]
Version=1.0
Type=Application
Terminal=false
Icon[ja_JP]=/home/hiromasa/apps/eclipse-jee-helios-SR2-linux-gtk/icon.xpm
Exec=/home/hiromasa/apps/eclipse-jee-helios-SR2-linux-gtk/eclipse
Name[ja_JP]=Eclipse JEE
Name=Eclipse JEE
Icon=/home/hiromasa/apps/eclipse-jee-helios-SR2-linux-gtk/icon.xpm

こんな感じに設定ファイルつくると Songbird とかもちゃんとアイコンだせるようになりますぞ。 :D

ubuntu1104-33

うーむ、よしよし。 あとは適当にソフト入れて完了です。

ubuntu1104-31

最後にぴょこぴょこ動く Unity/Compiz を動画でお楽しみください。 :)

 

萌え。(2回目)