Help us understand the problem. What is going on with this article?

ElectronでJIRAの未解決のチケット一覧を確認できるツールを作ってみた。

More than 3 years have passed since last update.

勢いだけでNodejs Advent Calenderに登録した。
後で、やりたかったのはElectronじゃないかと気がついたけど、
Node.jsのAdvent Calenderに投稿させていただきます。🙇

JIRAのチケットを確認したい🎫

わざわざサイト開いてボードみるの嫌😣なんて思っていたところ、このAPIを見つけたのでとりあえず今まだ解決していないチケットを見たくてElectronでアプリ作りました。

事の発端は日報文化📄

会社で毎日日報書く必要があり、日々の予定思い起こすの面倒😣だし、
担当してるタスク書くのも😣なあ、APIでとって半自動でやりたいなと思ったところにあります。
そこで、Electronはずっと興味はあったものの小さくても何かを作ったことがなかったが、
この機会に乗じて最初の練習としてJIRA APIと連携する何かを作ることにしました。

JIRAのREST API、色々できそうです🤗

パッケージの選定📦

node-jiraとかjira-connectorとか、JIRAのAPIに対応したパッケージは存在しますが、
メンテナンスのされ具合と、認証周りのシンプルさからjira-connectorを選びました。

API : jira-connector

接続する

一番大元のJiraClientを用いて機能を使います。
インスタンスを生成する際に認証情報を渡します。

JiraClient
    let jira = new JiraClient( {
        host: "hogehoge.atlassian.net",
        basic_auth: {
            username: "kawabata_lemon",
            password: "xxxxxxxxxx"
        }
    });
検索する

SearchClientというのがJiraClientにぶら下がっているのでそれを用います。

SearchClient
    let jql = 'resolution=Unresolved'
    jira.search.search({ 
        jql: jql
    }, (error, result)=>{

      if (error) {
        console.log(error);
        return;
      }
    });
  });

JQL

JQLはJIRAのSearchAPIを叩く際に用いるクエリです。チケットの担当者、プロジェクトなど様々な条件で絞り込めます
例えば、pairsというプロジェクトで、自分が担当しており、未解決のチケットを取得するときのJQLは次のようになります。

JQL
project=pairs&assignee=lemon.kawabata&resolution=Unresolved

かなり多くのパラメータを使えるので、よく使う設定をしらべたほうがいいです。
具体的にはJIRAのサイト上で、検索画面のURLにパラメータが付与されてるのでそれを参考にするといいとおもいます。

ex:jira_url.png

=> jira-connectorのドキュメントをみていただくとかなりのことができることが確認できます

Electron

Nodeでデスクトップアプリを作るのに必要なライブラリです。
レンダリングプロセスとバックエンドとなるプロセスのやりとりが少しなれるまでややこしい。
割と結構自由なことができます。electron-sample-appをみていただくと良いかと思います。
乱暴なことを言えば、WebなのでWebでできることはできる。
サンプルにもあるんですが、WebGL動かしたりもできるのでかなりリッチなことができることがわかりますね。

IPC

electron_process.png
electronでは、フロントエンド側をBrowserWindow/バックエンド側をAppが動かします。
フロント・バックのプロセス間処理においては、レンダリングプロセスからバックエンドにイベントを送るときにipcRendererを使い、バックエンドからレンダリング側へはipcMainを使ってイベントを送ります。これによりイベントの通知でバックとフロント間でデータのやりとりをしたり画面遷移を行うことができます。

とにかく最小構成で何か作ってみる

最終的に日報の半自動化を目的なので、今回は限りなく最小構成で作りました。

雰囲気: [ ログイン ]->[ 画面遷移 ] -> [ チケットの一覧がテーブルで表示される ]
結果:
ログイン
スクリーンショット 2016-12-15 16.10.46.png

=>シンプルにボタンのイベントを通じて、メインプロセスにイベントを送っています。

  function proceed() {
        const { ipcRenderer } = require('electron');
        let url      = document.getElementById('url').value
        let username = document.getElementById('username').value
        let password = document.getElementById('password').value
        ipcRenderer.send('login-jira',url,username,password);
        document.location.href = "tickets.html"
    }

バックのプロセスはイベントを受けて待機するようになっています

  // イベント送信
  ipcMain.on('login-jira',(event, atlassian,username,password)=>{

    // 受けた名前とパスワードをつかって
    let jira = new JiraClient({
        host: atlassian,
        basic_auth: {
            username: username,
            password: password
        }
    });

    // プロジェクトのチケットを取得する
    jira.search.search({
        jql: 'resolution=Unresolved'
    }, (error, result)=>{

      if (error) {
        console.log(error);
        return;
      }

      var tickets = []

      for (let i = 0; i < result.issues.length; i++) {

        let issue = result.issues[i];
        tickets.push(issue.fields.summary)
        console.log(`${issue.fields.summary} : `)
      }

      // チケットを見つけた通知をする
      event.sender.send('onFindIssues',tickets)
    });
  });

// チケット取得
スクリーンショット 2016-12-15 16.11.00.png
チケット表示画面では、チケット取得後のイベントを待機し、受けた後表示するようになってますね。

const { ipcRenderer } = require('electron');

  ipcRenderer.on('onFindIssues',(event, issues)=>{
    document.getElementById("loading").style.visibility = "hidden";
    for(let i = 0; i < issues.length;i++) {
    var ul = document.getElementById("tickets");
        var li = document.createElement("li");
    li.appendChild(document.createTextNode(`${issues[i]}`));
    li.className += 'ticket'
    ul.appendChild(li);
    }
  });

終わりに

非常にわずかなコードで小さくともアプリーケションが作れることがわかりました。
jQueryやRxなどを使ってアプリケーションに深みを出していけばしっかりしたものも作れそうですね。
がっつりいろんなライブラリを合わせて作ってみたいなあと思いました。

こちらに今回作ったものをあげておきますので興味がございましたら...!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした