Confluenceのエディターを改造する方法 at Atlassian Users Group Japan Vol.10

Confluenceのエディタを改造する方法
JavaScriptとClosure TemplateのみでできるConfluenceプラグ
イン

伊藤貴史
ナレッジオンデマンド株式会
Copyright © 2013 Knowledge on Demand Inc.
社

自己紹介

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

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

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


アジェンダ

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

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


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

自分がConflueneが素晴らしいと感じる一番の要
因
– 職業柄、WEBベースのリッチエディタはいくつか試し
た
• TinyMCE
http://tinymce.ephox.com/online-demo
• CKEditor/FCKEditor
http://ckeditor.com/demo
• MediawikiやWordPressなどに付属の編集エディタ

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



別にこれらの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 を編集

プラグイン全体の設定ファイル
プラグインにWEBリ
ソースを追加する
モジュールを組み
込む
Closure
Templateを使う
ための設定値
使用するClosure
Templateファイル
処理を行う
JavaScriptファイ
ルとConfluenceの
どの画面でこのJS
を表示するかの指
Copyright © 2014 定
Knowledge on Demand Inc.

改造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-buttoninformationのボタンをクリックした」という操作にな
る。

デモ

デモ

まとめ

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

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

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


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

[ お問い合せ ]
伊藤貴史
ナレッジオンデマンド株式会社
http://www.kodnet.co.jp/
E-mail : itoh@kodnet.co.jp


Confluenceのエディターを改造する方法 at Atlassian Users Group Japan Vol.10

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Empfohlen

Empfohlen (20)

Confluenceのエディターを改造する方法 at Atlassian Users Group Japan Vol.10