JavaScript
jQuery
confluence
NIFTYDay 20

一回クリックでConfluenceのページを作成する

こんにちは!Nifty Advent Calendar 2017 20日目の記事です。
前回は@5_21maimaiさんの記事でした。傘忘れがちの雨女として使ってみたいと思いました!

はじめに

私はニフティで2年目のエンジニアです。入社前は韓国で日本語教育を勉強したので、プログラミングの経験がない文系出身ですが楽しく頑張っています!
あと、日本語が変な部分があったら教えてください。:confounded:

なまけもの

会社でとても便利なConfluenceをウィキとして使っていますが、定例会で使うページを毎回作るのをなんとか自動でページ作ってくれないかなとふと思いました。そもそも以前のページをコピーして日付だけ修正するだけなので「そのくらい別にいいじゃんなまけものめ!」ですけど、Confluence Server REST APIもあるので勉強がてらAPIを使ってみることにしました。

ConfluenceのAPI

ConfluenceのAPIはREST APIになっていてパラメータを指定してURLにアクセスするとディフォルトにJSONで返ってきます。メソッドは標準HTTPメソッドとしてGET, PUT, POST,DELETEが使えます。
ドキュメントが英語だけですが、例が分かりやすくなっているのでこれを使って簡単に動作確認をしてみました。

curlコマンドでページを作成してみる

まずは本当に作れるのかcurlで確認してみましょう。以下のパラメータを渡すとページが新しく作成できます。

curl -u 【ID】:【Password】 -X POST -H 'Content-Type: application/json' -d'{"type":"page","title":"【作成するページ名前】", "ancestors":[{"id":【親pageId】}], "space":{"key":"【スペースキー】"},"body":{"storage":{"value":"<p>【ページの内容】</p>","representation":"storage"}}}' http://【URL】/confluence/rest/api/content/

パラメータの説明

  • 【親pageId】: 作成したいページの親IDです。URLのpageId=XXXXXXXXの部分です。
  • 【スペースキー】: スペースディレクトリ(画像参考)で確認できます。

jQueryでページを作成してみる

次はjQueryで書いてみました。
Confluenceに直接埋め込む こともできるし、ドキュメントのexampleにjQueryの例があったので少し修正して使いました。

作成したいページ

  • タイトル:個人進捗_20171212(火) ← 今日の日付
  • 内容:子ページの一覧を表示

コード

コードの内容は大きく3STEPです。

  • 日付取得
  • 作成したいページ内容をjsondataに入れる
  • ajaxでAPIにPOSTする
create_page.html
<script type="text/javascript">
$(function(){
$('#btn').click(function() {
  // 1.タイトル用の日付を取得
  var today = new Date();
  var y = today.getFullYear()
  var m = ("0"+ (today.getMonth() +1)).slice(-2);
  var d = ("0"+ today.getDate()).slice(-2);
  var w = today.getDay();
  var wd = ['日', '月', '火', '水', '木', '金', '土'];
  var title="個人進捗_"+ y + m + d + "("+ wd[w] + ")";
  //★自分のID,PWを入れます
  var username = "";
  var password = "";

  //2.作成したいページの内容
  var jsondata = {"type":"page",
 //★親ページのページIDを入れます
   "ancestors":[{"id":""}],
   "title":title,
  //★スペースキーを入れます
   "space":{"key":""},
   "body":{"storage":{"value":"<p><h1>個人進捗一覧</h1></p><p><ac:structured-macro ac:name=\"children\"/></p>","representation":"storage"}}};
 
  //3.ajaxでPOSTメソッドを送信します
  $.ajax
    ({
      type: "POST",
   //★atlassianのURLを入れます
      url: "【atlassianのURL】/confluence/rest/api/content",
      contentType:"application/json; charset=utf-8",
      dataType: "json",
      async: false,
      headers: {
          "Authorization": "Basic " + btoa(username+ ":" + password),
          "content-type":"application/json"
      },
      data: JSON.stringify(jsondata),
      //成功した場合ページのタイトルを表示
      success: function (){
                    $('#res').html(title + "  page created!");
      },
      //失敗場合エラーメッセージを表示
      error : function(xhr, errorText){
                   res = $.parseJSON(xhr.responseText);
                   $('#res').html(res.message);
      }
    });
})
})
</script>

<button id="btn" >Create Page</button>
//結果を表示してくれる
<a id="res"></a>

結果

このコードをhtmlコードブロックのマクロを使ってページに埋め込めばボタンをクリックするだけでで作成ができます。

create_page.gif

※HTMLコードブロックに書く時に注意

  • 「src=」 のCDNの指定は不要で、以下だけで大丈夫です。
<script type="text/javascript">
  • htmlのbody、headタグも不要です。confluenceページが崩れるので怖くなります。

最後に

今はPythonで新しく書いたスクリプトを使って会議の前日にページを作成しています。
clone使えますがまだ設定しておりません。

一番残念なのはページをコピーする機能はないことです。他API機能を組み合わせて自作できるかもしれませんが。

後はサーバに負荷がかかる点も注意すべきところです。

次回は@machinanetteさんの記事になります!よろしくお願いします。