Atlassian Connect の Static アドオンはえらい – リックソフト公式ブログ（Ricksoft Blog）

HOME

2017/12/15
Atlassian Connect の Static アドオンはえらい

Author

廣田隆之Takayuki Hirota

廣田隆之

このエントリーは、 Atlassian（JIRA , Confluence, Trello, Bitbucket）のTips Advent Calendar 2017 – Qiitaの17日目です

はじめに

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

Server 版のアドオン開発

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

Cloud 版のアドオン開発

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

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

「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 モジュールを使用してリポジトリ画面のサイドバーにメニューを一つ追加し、アドオン独自のページを表示するものです。

{
    "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ファイル

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

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

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

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

アドオンのインストール

Bitbucket 設定 > 統合の管理でアドオンの 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についてのご相談などがありましたら、下記よりお気軽にご相談ください。

お問い合わせ