今月の初め から作ってきた Kaku の画像挿入機能。とりあえず、img タグの挿入と画像ファイルのアップロードを支援する、シンプルなものですが、完成に近づいてきたと思います。そこで、この機能をどんな考えで作っているか、書いてみようと思います。
Kaku イメージタグ
画像挿入機能といえば、ecto のように WYSIWYG でやってしまう方法、MarsEdit のように img タグの挿入を支援する方法がありますが、いずれも少しデメリットがあると思います。
前者は、作るのがすごく難しそうなこと(おい)。後者は、タグを挿入する前に、まず画像ファイルをアップロードする必要がある こと。画像がいくつか入った記事をプレビューで確認しながら書くなら、アップロードのたびに手を止めることになります。
そこで Kaku では、ecto のように、画像を入れた記事を速攻で確認でき、画像( img タグ )のパラメータは GUI から変更でき、なおかつアップロードは投稿時にまとめてやってくれる上に、作るのも簡単、という、両者の中間を実現するために、Kaku イメージタグ という独自タグを作り、それを使うことにしました。
Kaku イメージタグの形式は、今のところ、次のような形式になっています:
[画像:”ss_ecto_textfilter_popup.jpg” 52D5FC43-290C-48EE-AC84-E74FB0627967]
仕組みはだいたい想像がつくかもしれませんが、Kaku はこのタグを、プレビュー時と投稿時に、img タグに変換する、というわけです。
記事に挿入した画像は、「イメージマネージャ」ウィンドウで確認でき、ここから画像(をもとに生成される img タグ)のパラメータをいつでも変更できます。直接 img タグを挿入する場合とは異なり、パラメータを変更しても、新たにタグを挿入し直したりする必要はありません。
どっからでももっていけること
記事に画像( Kaku イメージタグ )を挿入するまでの操作ですが、正式には:
- 画像ファイルを「ライブラリ」に登録
- 「ライブラリ」から、使いたい画像を記事にアサイン
- アサインした画像の中から、使いたいものを選んで Kaku イメージタグを挿入
という、ちょっとまどろっこしい操作をしなければならないようになっています。なぜこんな仕組みになっているかというと、同じ画像を複数のブログ、記事で再利用する場合(実際、こんなシチュエーションはほとんどないと思いますが、これができないとちょっと違和感がある)、また、WYSIWYG じゃないけど GUI で画像を管理することを考えると、仕方がない部分があるのです。
しかし Kaku では、画像ファイルを直接編集エリアにドラッグ&ドロップすることで、上記の操作をワンアクションで実行 できるようにしました(実際にはこっちを使ってもらいたい)。
また、一部のソフトを使っていて、僕がちょっとがっかりするのは、「 URL を扱うソフトなのに、なんで Safari からドラッグしてきた URL をアプリケーションアイコンにドロップして開けないんだ?」とか、「アプリケーションアイコンにドロップできるのに、なんでウィンドウ内のテーブルにはドロップできないんだ?」という類のことです。
Kaku では、できるだけ どっからでももっていける ことに注意を払いました(これがちょっと大変だった!)。例えば、以下のような操作ができるようにしてあります:
- 画像ファイルをアプリケーションアイコンにドロップ → 「ライブラリ」に登録
- 画像ファイルを「ライブラリ」のテーブルにドロップ → 「ライブラリ」に登録
- 画像ファイルを「この記事」のテーブルにドロップ → 画像ファイルを「ライブラリ」に登録して、編集中の記事にアサインする
- 画像ファイルを編集エリア内にドロップ →(前述)
- 「ライブラリ」の画像を編集エリア内にドロップ → 画像を編集中の記事にアサインして、カーソルの位置に Kaku イメージタグを挿入
- 「この記事」の画像を編集エリア内にドロップ → カーソルの位置に Kaku イメージタグを挿入
舞台裏の仕組みはややこしいですが、最初に述べた「画像ファイルを編集エリア内にドロップ」を使えば、それを意識することなく、次の瞬間から、画像を含めた記事のプレビューや、画像のパラメータの変更が行えるようにしています。
…では、また進捗があれば、ご報告します。