2019年7月に、 kintone のポータルを簡単にカスタマイズするための Kintone Portal Designer が発表されました。
このツールを使って、ポータルの背景をアプリで管理できるようなカスタマイズを作成しました。

今回は、 Kintone Portal Designer の「Import Sample Template」の中にある「basic-1column-photo」を元に作成しています。
カスタマイズのイメージは以下のとおりです。

こちらの記事は Kintone Portal Designer を使いながら操作する前提でお話します。
Kintone Portal Designerの使い方については、 Kintone Portal Designerを使ってポータルをデザインしよう を参照してください。

アプリの作成

まずは、kintoneでアプリを作りましょう。
今回必要なフィールドは添付ファイルフィールド1つだけです。
添付ファイルフィールドが設置できたらアプリを公開しましょう。

あとで必要になるので、添付ファイルフィールドのフィールドコードをメモしておきましょう。
フィールドコードはフィールドの設定から確認・変更ができます。

レコードの登録

次に、今作成したアプリにレコードを1つ登録します。
背景画像で設定したい画像を添付ファイルフィールドに追加してレコードを登録しましょう。

あとで必要になるので、以下の内容をメモしておきましょう。

• アプリのアプリID
• 適用したいレコードのレコード番号

URLを見ることでアプリIDとレコード番号を確認できます。
例：https://{subdomain}.cybozu.com/k/{ アプリID }/show#record={ レコード番号 }

以下のzipファイルをダウンロードして、解凍してください。

basic-1column-photo-selector.zip

先ほど解凍したファイルの「basic-1column-photo-selector.json」を「Kintone Portal Designer」でインポートしましょう。
インポートの方法がわからない場合は、 Kintone Portal Designerを使ってポータルをデザインしよう を参照してください。

ここからは、「Kintone Portal Designer」を使いながら、メモした内容に合わせて、JavaScriptの内容を変更します。

アプリIDを変更

以下の部分の「12345」をメモしたアプリIDに変更しましょう。

1
2

// 取得するアプリの指定
var APP_ID = 12345;

レコード番号を変更

以下の部分の「1」をメモしたレコード番号に変更しましょう。

1
2

// 取得するレコードの指定
var RECORD_ID = 1;

フィールドコードを変更

以下の部分の「background_img」をメモしたフィールドコードに変更しましょう。

1
2

// 取得するフィールドコードの指定
var IMAGE_FIELD_CODE = 'background_img';

ここまでの変更ができたら「Save」を押して、ポータルに戻ってみましょう。
ポータルの背景で、レコードに登録した画像が適用されているはずです。

ここからは、詳しくJavaScriptの内容について解説していきます。

今回使用したコードでは大きく分けて「画像のfileKeyの取得」と「画像の取得と表示」の2つで構成しています。
それぞれに分けて説明していきます。

アプリIDとレコードIDを入力

1
2
3
4

//  取得するアプリの指定
var APP_ID = 12345;
//  取得するレコードの指定
var RECORD_ID = 1;

画像のデータがはいる添付フィールドのコードを入力

1
2

// 取得するフィールドコードの指定
var IMAGE_FIELD_CODE = 'background_img';

レコードで登録された画像に当てられているfileKeyを取得

1
2
3
4
5
6
7
8
9

var fetchImageFileKey = function() {
  var params = {
    'app': APP_ID,
    'id': RECORD_ID
  };
  return kintone.api(kintone.api.url('/k/v1/record', true), 'GET', params).then(function(resp) {
    return resp.record[IMAGE_FIELD_CODE].value[0].fileKey;
  });
};

1件のレコードを取得するAPI を使用しています。

取得したfileKeyを使って画像のblobURLを作成

ファイルをダウンロードするAPI を利用しています。
添付ファイルのダウンロードはドキュメント内の サンプルコード を参考にしました。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

var loadImage = function(imageFileKey) {
  var domain = document.domain;
  var url = 'https://' + domain + '/k/v1/file.json?fileKey=' + imageFileKey;
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url);
  xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
  xhr.responseType = 'blob';
  xhr.onload = function () {
    if (xhr.status === 200) {
      // success
      var blob = new Blob([xhr.response]);
      var url = window.URL || window.webkitURL;
      var imageURL = url.createObjectURL(blob);
      renderImage(imageURL);
    } else {
      // error
      console.log(xhr.responseText);
    }
  };
  xhr.send();
};

特定のクラスが当たっている部分にstyleを追加

今回は、全体を囲う部分の背景backgroundに画像を追加します。

1
2
3
4

var renderImage = function(imageURL) {
  var portalBackground = document.getElementsByClassName('designportal designportal-basic');
  portalBackground[0].setAttribute('style', 'background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(' + imageURL + ');');
};

style部分の解説

今回は、背景画像を表示する箇所に、style属性を追加し、CSSのbackgroundプロパティを利用して画像を表示しています。
指定している内容は以下です。

1

background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(' + imageURL + ');`

• linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4))

  画像を少し暗くするために指定しています。

• url(' + imageURL + ')

  ここには画像のblobURLが入ります。

最後の行で、今までのコードを実行しています。

1

fetchImageFileKey().then(loadImage);

今後も、kintoneのポータルのカスタマイズに関する記事を発信していく予定です。
ぜひ楽しみにお待ちください。

このTipsは、2019年7月版kintoneで動作を確認しています。