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

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

このソフトがどうやって実装されているのかちょっと分かりませんが、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 にしちゃえばいいんじゃないってことで、、

って、まだなんも動きませんが一応ちゃんと 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 とかそのタイプだと思います。

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

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

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

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

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

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

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

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

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。その機能紹介およびカスタマイズの魅力を伝えます。

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

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

OS をクリーンインストールしてごにょごにょしておりましたが、WordPress のローカル環境を最後に入れてみます。 XAMPP から WordPress のインストール、それでもってテーマ表示試験用にこのサイトのデータインポートは果たして何分でできるでしょう。 操作動画でご紹介です（笑）。

1. XAMPP ダウンロード
2. XAMPP セットアップ（インストール & アップロードファイル上限設定）
3. WordPress 初期インストール
4. このサイトのデータをエクスポートしてローカルインポート

という流れになっております。

WordPress はどのバージョンからだったかちょっと失念してしまいましたが、インストーラの画面遷移が減りましたのでより速くインストールできるようになったのが分かります。 実は 5分もかからなそうです。

途中で

[tegaki]痛恨のミス![/tegaki]

をしていますが気にしないでください。 地味にかなり凹みました（笑）

XAMPP も WordPress もまじファイルダウンロードしていますので少し時間かかっているのと、インポートに mysql のコマンド使わずに phpmyadmin からやっているのもあってロスタイムしてますが、全体で 13分くらいでしょか。

お遊び動画ですがなんとか暇しないように撮ったのでよければお楽しみくださいっ。

youtube サイトで HD フルスクリーン再生すると分かりやすいかもです。 人の PC 操作しているの見るのって結構好きなんですが、みなさんはいかがでしょう。 😀