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

はじめに

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

今回は、「Kintone Portal Designer」の「Import Sample Template」の中にある「basic-1column-photo」を元に作成しています。

カスタマイズのイメージ

使い方

こちらの記事は「Kintone Portal Designer」を使いながら操作する前提でお話しいたします。
「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の内容を変更します。

1. アプリIDを変更

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

2. レコード番号を変更

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

3. フィールドコードを変更

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

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

コードの解説

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

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

画像のfileKeyの取得

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

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

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

kintoneのレコード情報取得REST APIを使用しています。

画像の取得と表示

1. [3]で取得したfileKeyを使って画像のblobURLを作成

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

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

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

style部分の解説

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

指定している内容は以下です。

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が入ります。

実行

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

おわりに

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

このTipsは、2019年07月版 kintoneで確認したものになります。