前回の続きになります。前回やってみたことは、以下の通りです。
- サンプルプラグインのソース、チュートリアルの紹介
- プラグインの動作確認
- 日本語のリソースファイルを追加
- IDEでのデバッグ
今回やること
引き続きサンプルプラグインを「少し」変えてみます。
（フルスクラッチでは書けません...。また、Javaも含めプログラムに明るくない身なので、少しずつ変えてみることしかできません。ご容赦下さいませ）
やること：
- APIを少し調整
- ぺージの「添付ファイル数」を加えてみます
- 見た目を調整
- アイコン画像をアイコンフォントに置き換えてみます
- 表示される情報のリストにもアイコンフォントを適用してみます
APIを調整してみる
サンプルプラグインは、以下の動作になっています。
- Confluenceのぺージ上部（バナー領域）に、リンクを追加する
- atlassian-plugin.xmlで定義してリンクを追加
- 上記リンクをクリックすると、統計情報を表示するダイアログがポップアップ
- イイね数、コメント数、履歴数を返すREST APIを呼び出す
- Ajaxでの呼び出し
- banner-stats.js に記載
- REST APIで取得した結果を描画
REST APIは、BannerStatsResource.javaを修正していく感じです。
添付ファイルは、AttachmentManager を利用すれば良さそうなので、attachmentManager.countLatestVersionsOfAttachments(page) を追加。
"attachments" という名前で REST APIから結果が返るようになったので、soy template側も調整。
<li><a href="{contextPath()}/pages/viewpreviousversions.action?pageId={$pageId}">{getText('banner.stats.versions', $versions)}</a></li>
<!-- 追加 -->
<li><a href="{contextPath()}/pages/viewpageattachments.action?pageId={$pageId}">{getText('banner.stats.attachments', $attachments)}</a></li>
atlas-run で起動していると、プラグインのソースに変更があればプラグインのビルド 〜 再読み込みをしてくれます。
メッセージリソースファイルを調整すると、このように添付ファイル数の情報と、リンクが追加されました。
見た目を調整してみる
さて、サンプルのプラグインは、リンクの左側に画像を配置しています。
今回完全な自作プラグインではないので、違和感のないようにAtlassianのアイコンフォントに変更したい..。
ということで、調整を実施。まず、部分を削除します。
<web-item key="banner-stats" name="Banner Stats" section="page.metadata.banner" weight="80">
- <icon height="16" width="16">
- <link>/download/resources/${project.groupId}.${project.artifactId}:banner-stats-resources/images/pluginIcon.png</link>
- </icon>
<label key="banner.stats.label"/>
<tooltip key="banner.stats.label"/>
<link linkId="banner-stats" absolute="true"/>
<styleClass>aui-button aui-button-subtle</styleClass>
</web-item>
利用するアイコンフォントは、こちらを参照。(Atlassian Design Product - Iconography)
"aui-iconfont-view-card" を利用することにしました。
の部分に指定すればいいかと思ったのですが、アイコンフォントの位置がそのままではよくないので、プラグインのcssを修正しています。
/* id=banner-stats なので、リンクの前に背景画像として差し込み */
# page-metadata-banner .banner #banner-stats:before {
font-family: "Atlassian Icons";
font-weight: normal;
content: "\f1b0"; /* view-cardに対応するアイコン */
---- [ 中略 ] ---
Soy Templateを修正
次に、表示結果のダイアログのリストの見た目も修正してみます。
リストの前の黒点を無くして、お気に入りやコメントのアイコンフォントを前に持ってくるようにしいたい。
まずは、Soy Templateを修正して、 のようにタグを差し込んであげると、CSSを調整しなくてもアイコンフォントをリストの前に追加できます。
<li>
<a href="#likes-and-labels-container">
<!-- spanタグで差し込み -->
<span class="aui-icon aui-icon-small aui-iconfont-like"></span>
<span class="link-text">{getText('banner.stats.likes', $likes)}
</span>
</a>
</li>
CSSを調整
アイコンフォントが差し込まれたので、リストの黒点を無しにし、位置も微調整します。
/* Use icon-font in a dialog */
# page-metadata-banner .banner #banner-stats > span {
padding-left: 21px;
}
/* リストのスタイルを調整 */
# banner-stats-content > ul > li {
list-style: none;
}
/* アイコンフォントのあとのテキストが近すぎるので調整 */
# banner-stats-content > ul > li span.link-text{
padding-left: 6px;
}
結果
最終的にCSSを調整して、以下のようになりました。（なんとなくそれっぽい？？）
今回のまとめ
ということで、ソースも少し書き換えるところまで出来ました...。
サンプルではREST APIも含んでいますが、Confluenceの標準のREST APIを利用すれば、xml、CSS、JavaScript、Soy Templateの調整だけでも何か作れそうです。
次は、スペースのカスタマイズで対応したものを、プラグインに置き換えてみるのが目標です。
引き続き、調整しているソースコードは、フォークして以下に置いてあります。