ポータルの背景画像をkintoneのアプリで管理しよう!〜kintoneのポータルカスタマイズ紹介 #1〜

目次

はじめに

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

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

使い方

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

STEP1画像を管理するアプリの準備

アプリの作成

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

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

レコードの登録

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

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

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

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

STEP2カスタマイズに必要なファイルのダウンロード

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

basic-1column-photo-selector.zip

STEP3カスタマイズの変更

先ほど解凍したファイルの「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つで構成しています。
それぞれに分けて説明していきます。

画像のfileKeyの取得

アプリ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のポータルのカスタマイズに関する記事を発信していく予定です。
ぜひ楽しみにお待ちください。

information

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