Atlassian Connect の Static アドオンはえらい

Author

廣田 隆之Takayuki Hirota

廣田 隆之

はじめに

昨年に続き、Atlassian Cloud 向けアドオン開発基盤である Atlassian Connect について書きます。

Server 版のアドオン開発

Server 版の Jira や Confluence のアドオン開発では、Java 言語で書いたソースコードをビルドして jar ファイルを作ります。
Atlassian Marketplace でアドオンを配布する場合は、できあがった jar ファイルを Atlassian Marketplace にアップロードしておきます。
世界中の Atlassian ユーザーは、この jar ファイルをダウンロードして各自の Jira や Confluence にインストールする、という仕組みです。

Server 版のアドオン開発

Cloud 版のアドオン開発

Cloud 版のアドオン開発では、jar ファイルではなく Web サービスを用意します。
Atlassian Marketplace には、この Web サービスの URL を登録します。
Atlassian Cloud の各アプリケーション（Jira, Confluence など）とは REST API や Web フック経由でやり取りを行います。
アドオンを Marketplace に公開するのであれば、24時間365日、世界中の Atlassian ユーザーからアクセスできる状態にしておかねばなりません。

Cloud 版のアドオン開発

サーバーレスアーキテクチャ

「Web サービスを用意」と言うは易しですが、可用性の高い Web サービスを運用するのは簡単ではありません。
特に Server 版のアドオン開発を中心に行ってきたエンジニアにとっては少々ハードルが高いのも事実。
そんなときはサーバーレスアーキテクチャを効果的に採用して、エンジニアはアプリケーション開発に注力したいものです。
幸い、Atlassian Connect の仕組みはサーバーレスアーキテクチャと相性が良く、最小構成であれば HTML ファイルと JSON ファイルを用意するだけで Cloud 版アドオン（Static アドオンといいます）を実現できます。
静的ファイルを用意するだけであれば、Web サーバーにファイルを置いておくだけなので、アプリケーションサーバーの拡張やデータベースサーバーのチューニングに頭を悩ませることもなさそうですね。

Bitbucket Cloud の Static アドオンを作る

本ブログでは Bitbucket Cloud 向けのアドオンを Bitbucket Cloud の機能で作ってみようと思います。
まずは Web サービスを用意する必要があるので、Publishing a Website on Bitbucket Cloud を参考にして、Bitbucket に静的なファイルを配置してみます。

リポジトリの作成

https://bitbucket.org/ でリポジトリを作成します。

ダッシュボード

リポジトリ名は "アカウント名.bitbucket.io" とします。

新規リポジトリの作成

リポジトリをクローンして適当な index.html をコミット＆プッシュします。

コミット＆プッシュします

ブラウザで https://アカウント名.bitbucket.io/index.html にアクセスし、画面が表示されることを確認します。

画面が表示されることを確認

アドオン定義ファイルの作成

Server 版アドオンの atlassian-plugin.xml に相当する、アドオン定義ファイルを作成します。
以下のコードは、Repo Page モジュールを使用してリポジトリ画面のサイドバーにメニューを一つ追加し、アドオン独自のページを表示するものです。

[html] { "key": "hello-app", "name": "Hello App", "description": "Hello app for Bitbucket", "vendor": { "name": "Ricksoft", "url": "https://www.ricksoft.jp/" }, "baseUrl": "https://rshirota.bitbucket.io", "authentication": { "type": "none" }, "modules": { "repoPage": [ { "url": "/hello.html?repoPath={repo_path}", "name": { "value": "Hello Page" }, "location": "org.bitbucket.repository.navigation", "key": "hello-repo-page", "params": { "auiIcon": "aui-iconfont-doc" } } ] }, "scopes": ["account", "repository"], "contexts": ["account"] } [/html]

ページの HTMLファイル

all.js ファイルは Atlassian Connect フレームワークの本体ともいうべきファイルで、この js ファイルを使ってクライアント側の様々な処理を実装します。

[html] <!DOCTYPE html> <html> <head> <script src="https://bitbucket.org/atlassian-connect/all.js"></script> </head> <body> Hello bitbucket! </body> </html> [/html]

2つのファイルをリポジトリにコミット＆プッシュします。

2つのファイルをリポジトリにコミット＆プッシュします

以上でアドオン側の実装は完了です。

アドオンのインストール

Bitbucket 設定 > 統合の管理 でアドオンの URL を指定してインストールします。

URLからアドオンのインストール

インストールが成功すると、アドオンの一覧に表示されます。

アドオンの一覧に表示されます

動作を確認する

リポジトリ画面のサイドバーにメニューが表示され、クリックすると hello.html の中身が表示されました。

動作を確認する

おわりに

今回はシンプルな Static アドオンで実装してみましたが、REST エンドポイントを作ったり、Atlassian Cloud のイベントをフックしたりといった場合は、サーバー側での作り込みが必要になります。

AtlasCamp 2017 のプレゼンテーション（Atlassian Connect on Serverless Platforms: Low Cost Add-Ons | Atlassian）では、サーバーレス Connect アドオンを実現するヒントや Tips が紹介されているので興味のある方はご覧ください。

Atlassian Cloudについて、または価格などは下記より製品ページをご覧ください。

Atlassian Cloudページ

また、Atlassian Cloudについてのご相談などがありましたら、下記よりお気軽にご相談ください。

お問い合わせ