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

# はじめに
以下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](https://nodejs.org/en/download/)　

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

### 必要環境確認

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

```
$ node -v
>> v14.16.0
```

```
$ npm -v
>> 6.14.11
```

### Step1 サイト作成

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

- 適当な名前をつけてサイトを作成する (この後の質問は適当にスキップしてください)
<img width="200px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133940/dbf9792f-92bf-ab59-42d7-a35f5c748a2f.png">

その後何選んでもいいのですがとりあえず下のイメージで進みました。
<img width="200px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133940/fa76d2dd-4eb0-40b0-5d31-2c3c0aff81c9.png">

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

<img width="200px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133940/cb46abb5-c4df-b763-feab-b54d6f0a86d3.png">

<img width="200px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133940/28d35a5e-c5f7-9817-6717-80328637f994.png">

<img width="200px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133940/87badb1a-ff25-c03f-0e86-4a535e44c98d.png">

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

- 適当にフォルダ作成 atlassian-connect.jsonファイル作成して以下記述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"
                 }
             }
         ]
     }
}
```

参考イメージ
<img width="200px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133940/d5e70ebc-66ff-6cc2-bad5-b422b97e54b2.png">

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

```.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" href="https://unpkg.com/@atlaskit/css-reset@2.0.0/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>
```

参考イメージ
<img width="500px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133940/a3067238-0bfa-9a6c-d69a-b3a4b216e1b7.png">

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

- npmでhttp-serverをインストール

```
npm install http-server -g
```

- 『atlassian-connect.json、helloworld.html』がある箇所で以下のコマンドを打ちポート8000でサーバー起動

```
http-server -p 8000
```

- http://127.0.0.1:8000/ 開き以下のようになっていればOK

<img width="300px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133940/460becc0-04ca-115e-0b2c-f189259b44c1.png">

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

<font color="red">**ここから公式ページとは異なる方法で行っていきます！**</font>
理由→公開したURLの固定をしないといけないが、お金がかかるからです。
ここで使うのが『[GitHub Pages](https://pages.github.com/)』

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

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

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

<img width="300px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133940/9591b93e-f77e-a174-1866-3de8f13aacff.png">


- 先ほど作成した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をリロードして『アプリのアップロード』リンクが出てきたらタップ

<img width="300px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133940/4fcfddde-85da-23af-e115-4db37b918988.png">

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


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

<img width="300px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133940/332d7012-5402-3734-2ecc-a2005a026699.png">


<img width="300px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133940/f648a5e9-6e4a-2a3e-c118-d576af6b9411.png">


# 困ったとき！

- 一度間違えてアプリをあげてしまうと記録が残ってしまうので、再度アップロードする際は『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