confluenceのエディターを改造する方法 at atlassian users group japan vol.10

Copyright © 2013 Knowledge on Demand Inc.

ナレッジオンデマンド株式会社

JavaScript と Closure Template のみでできる Confluenceプラグイン

Confluence のエディタを改造する方法

伊藤貴史


自己紹介

WEB 制作者基本は LAMP （ Linux ＋ Apache ＋ MySQL ＋PHP ）と JavaScript– Java は Confluence のプラグインで学びだした程度

Atlassian 製品は、 Confluene メインで JIRAを少々– 最近触れた JIRA Agile に感動

SNS– http://fb.me/tohokuaiki – https://twitter.com/tohokuaiki

http://fb.me/tohokuaiki

https://twitter.com/tohokuaiki

https://twitter.com/tohokuaiki


アジェンダ

Confluence のリッチテキストエディタ愛を語る

プラグインの作り方について

デモ


Confluence のリッチテキストエディタ

自分が Confluene が素晴らしいと感じる一番の要因– 職業柄、 WEB ベースのリッチエディタはいくつか

試した• TinyMCE

http://tinymce.ephox.com/online-demo • CKEditor/FCKEditor

http://ckeditor.com/demo • Mediawiki や WordPress などに付属の編集エディタ

– 実際に使ってみると、なんかいまいち・・・・。

http://tinymce.ephox.com/online-demo

http://tinymce.ephox.com/online-demo

http://ckeditor.com/demo

http://ckeditor.com/demo



別にこれらの WYSIWYG エディタが悪いわけではない– 最初は感動するし、改造も容易になっている。– ただ、 WEB 制作の一端や Wiki などの記事を書かせ

るのにはちょっと不都合な面や、敷居が高いところがある。

こんなタグ見ても理解できない・・・

float:right を持った CSS を充てる必要がある



最初に Confluence のエディタを見た時の自分の反応– Wiki 記法の方が書きやすいし、早いじゃん！

• ということで、しばらく 3 系を使ってました。

が、キーショートカットとインテリセンス（風味）を使って– 構造や内容がわかりやすいし、入力も早い！– マクロの入力も間違えないし、早い！– Wiki 記法もそこかしこに残ってて使える！

大絶賛！！


Confluence のリッチテキストエディタの魅力

WYSIWYG のうち、 WYG （画面のプレビュー）は文書の構造にとどめるという割り切り– 構造以外のスタイルなんてただの飾りです。– 本当に最終見た目が欲しければプレビューボタン

で。– マクロは、インラインとブロックのタイプで構造を

把握しやすく

Wiki を入力する上でエディタに求められるのは– 直感的にストレスなく（できればキーボードのみ

で）入力できること。– 文書の見た目ではなく、構造がわかること


ということで、

この素晴らしいエディタをさらに自分好みに改造した

い！！

という方に贈るプレゼン


Confluence の改造はプラグインが基本

ユーザーマクロを使ったり、テーマの設定で無理やりなんとかなることもありますが、基本的にはプラグインを作りましょう。

–とはいえ、ユーザーマクロでもかなりのことができます


プラグインの作り方

Atlassian SDK をインストール– 先に JDK1.6 をインストールしておく– SDK の bin にパスを通す

任意の場所で atlas-create-confluence-plugin コマンドを実行– ウィザードに従って入力していけばひな形が作成– ひな形ディレクトリで atlas-run コマンドで開発環

境起動

詳細は、「 confluence プラグイン作成」で検索– 私か弊社菊池のブログ記事に詳細記述しています。


開発環境

ほぼ JavaScript のみなので、 Eclipse やNetBeans ・ IntelliJ IDEA などの統合開発環境は不要

簡単なテキストエディタ（ not メモ帳）で OK

JavaScript がメインなので、 GoogleChromeか、 Firefox+Firebug は必須で。


今回の目標

よく使うマクロ（今回は「情報」マクロ）をエディタにボタンとして加え、キーショートカットも有効にする。


使う技術

JavaScipt– 初歩の jQuery の知識（セレクタとイベント）

Closure Template– Google が開発した Java と JavaScipt のためのテン

プレート– 拡張子は .soy– https://developers.google.com/closure/

templates/


改造 1：　 atlassian-plugin.xml を編集

プラグイン全体の設定ファイル

Closure Template を使うための設定値

プラグインに WEBリソースを追加するモジュールを組み込む

使用するClosure Templateファイル処理を行うJavaScriptファイルとConfluence のどの画面でこの JSを表示するかの指定


改造 2： Closure Template を記述

Firebug などでボタン 1 つの HTML をコピーする

このあたりのHTML をコピー


改造 2： Closure Template を記述

– namespace宣言• JavaScript変数にアサインされる際のオブジェクトになる

– コメント• @param で変数宣言するとテンプレートのコール時に使用可能

– template宣言• 下記の場合だと

Confluence.Templates.CustomEditor.button() でコールができる


改造 3： JavaScript を記述する

割と泥臭く、どの部分に追加するかを検討して記述



リッチテキストエディタの初期化時に実行する関数を登録

必要な変数を宣言・リッチテキストエディタ・ページ ID・割り込ませるツールバー・新規ボタンの ID

Closure Template から引数を指定して HTML を取得

ボタンをクリック時に行う動作を登録



キーボードショートカットを登録

キーボードショートカットの設定値・ context: フォーカスがどこにあるときに有効か・ descKey: ショートカットのヘルプで表示・ keys: 有効なショートカットの指定（複数可能）・ op：どういう操作を行うか。・ param: op の引数。この場合、「 id=rte-button-information のボタンをクリックした」という操作になる。


デモ

デモ


まとめ

Confluence のリッチエディタ、素晴らしいよ

プラグインも簡単に作れて楽しいよ– JavaScript部分は API 無くてちょっと大変かも

プラグイン開発や DITA の案件があればお声掛けください。


[ お問い合せ ]伊藤貴史

ナレッジオンデマンド株式会社http://www.kodnet.co.jp/

E-mail : [email protected]

ナレッジオンデマンドは、ナレッジエクスチェンジの未来を探求します。

http://www.kodnet.co.jp/

confluenceのエディターを改造する方法 at atlassian users group japan vol.10

Technology