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 で動作を確認しています。