githubPages使ってJIRAアプリ開発お金かけずに作ってみる(【Hello World】)

12253 ワード
github-pages HelloWorld jira jira テキストリンク

はじめに

以下URLを参考に進めました。
https://developer.atlassian.com/cloud/jira/platform/getting-started-with-connect/

公式のままの手順だと上手くいかない、公式手順通りに行うとなると+課金が必要そうだなと感じたためgithubPagesを使ってなんとかお金をかけないで作ってみました！の記録となります！(｡･ω･｡)

ちなみにgithubアカウント持っててある程度githubいじいじ出来る方でないとStep6のところで????になるかと思います、、

以下はgithubPage用に作成したリポジトリです！
https://github.com/sachiko-kame/JIRAAPP-Sachiko-kame

事前に必要環境

  • お気に入りのIDEまたはテキストエディタ
  • Node.js（v12.1.0以降） url　

↑と書きましたが今回の手順のまま行う+ Step5飛ばす形ならなくても大丈夫です。

必要環境確認

↑と書きましたが今回の手順のまま行う+ Step5飛ばす形ならなくても大丈夫です。

$ node -v
>> v14.16.0

$ npm -v
>> 6.14.11

Step1 サイト作成

  • 以下ログイン

    http://go.atlassian.com/cloud-dev
    ※ タブ等でJIRA開いているとログインできないのでその際は開いているタブを閉じてください。

  • 適当な名前をつけてサイトを作成する (この後の質問は適当にスキップしてください)

その後何選んでもいいのですがとりあえず下のイメージで進みました。

Step2 開発モードを有効にする

Step3 必要な設定ファイルの作成

  • 適当にフォルダ作成 atlassian-connect.jsonファイル作成して以下記述jsonをそのまま記述
{
     "name": "Hello World",
     "description": "Atlassian Connect app",
     "key": "com.example.myapp",
     "baseUrl": "https://<placeholder-url>",
     "vendor": {
         "name": "Example, Inc.",
         "url": "http://example.com"
     },
     "authentication": {
         "type": "none"
     },
     "apiVersion": 1,
     "modules": {
         "generalPages": [
             {
                 "url": "/helloworld.html",
                 "key": "hello-world",
                 "location": "system.top.navigation.bar",
                 "name": {
                     "value": "Greeting"
                 }
             }
         ]
     }
}

参考イメージ

Step4 サンプルインターフェースの作成

<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" href="https://unpkg.com/@atlaskit/[email protected]/dist/bundle.css" media="all">
        <script src="https://connect-cdn.atl-paas.net/all.js" async></script>
    </head>
    <body>
        <section id="content" class="ac-content">
            <h1>Hello World</h1>
        </section>
    </body>
</html>

参考イメージ

Step5 ローカルウェブサーバーでアプリをホストする (今回の場合は開発ようにということで)

  • npmでhttp-serverをインストール
npm install http-server -g
  • 『atlassian-connect.json、helloworld.html』がある箇所で以下のコマンドを打ちポート8000でサーバー起動
http-server -p 8000

Step6 アプリファイルをインターネットで利用できるようにする

ここから公式ページとは異なる方法で行っていきます！
理由→公開したURLの固定をしないといけないが、お金がかかるからです。
ここで使うのが『GitHub Pages』

  • 適当にgithubのパブリックブランチ作成、そこに今回作成したファイルを入れる。以下参考URL

作ったもの
https://github.com/sachiko-kame/JIRAAPP-Sachiko-kame

  • githubの設定のGithubPageでbranchをmainにしてsaveする。以下参考　urlが表示されるのでアクセスしてみても可能

  • 先ほど作成したURLをbaseUrlに記述。

参考
https://sachiko-kame.github.io/JIRAAPP-Sachiko-kame/atlassian-connect.json

  • 記述したURLの後ろに /atlassian-connect.jsonをつけたURLを記録しておく

以下サンプルです

https://sachiko-kame.github.io/JIRAAPP-Sachiko-kame/atlassian-connect.json

Step7 アプリをインストールしてテストする

  • Step2で開いたURLをリロードして『アプリのアップロード』リンクが出てきたらタップ

  • 先ほど記録したURLを入れてアップロードボタンタップ

  • うまくいくと以下のようにアプリがインストール(アプリタップでみれます)されているのでクリックしてアプリ実行します　表示確認できればoK(中身変えてます、、すみません。)

困ったとき！

  • 一度間違えてアプリをあげてしまうと記録が残ってしまうので、再度アップロードする際は『atlassian-connect.json』の『value』部分を変更してください。
atlassian-connect.json
"name": {
     "value": "Greeting"
}

  • 今回無料の固定アドレスがほしかったのでgithubを作成して行ったので手順通り行ってくれれば問題ないのですが公式の場合そのまま使うと固定アドレスにならないもの『ngrok』を使用するように進めています。固定にするためには課金が必要で設定が必要そうです。

  • 『ngrok』を使う場合、手順は作成したファイルがあるところでhttp-server -p 8000、他のターミナル の開いて作成したファイルがあるところでngrok http 8000のようにしないとうまくいきません。『http-server』したままで『ngrok http 8000』する必要があるという感じです。

メモ

Jira Cloud platform Developer