はじめに
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の内容を変更します。
アプリIDを変更
以下の部分の「12345」をメモしたアプリIDに変更しましょう。
|
|
レコード番号を変更
以下の部分の「1」をメモしたレコード番号に変更しましょう。
|
|
フィールドコードを変更
以下の部分の「background_img」をメモしたフィールドコードに変更しましょう。
|
|
ここまでの変更ができたら「Save」を押して、ポータルに戻ってみましょう。
ポータルの背景で、レコードに登録した画像が適用されているはずです。
コードの解説
ここからは、詳しくJavaScriptの内容について解説していきます。
今回使用したコードでは大きく分けて「画像のfileKeyの取得」と「画像の取得と表示」の2つで構成しています。
それぞれに分けて説明していきます。
画像のfileKeyの取得
アプリIDとレコードIDを入力
|
|
画像のデータがはいる添付フィールドのコードを入力
|
|
レコードで登録された画像に当てられているfileKeyを取得
|
|
1件のレコードを取得するAPIを使用しています。
画像の取得と表示
取得したfileKeyを使って画像のblobURLを作成
ファイルをダウンロードするAPIを利用しています。
添付ファイルのダウンロードはドキュメント内の
サンプルコードを参考にしました。
|
|
特定のクラスが当たっている部分にstyleを追加
今回は、全体を囲う部分の背景background
に画像を追加します。
|
|
style部分の解説
今回は、背景画像を表示する箇所に、style属性を追加し、CSSのbackground
プロパティを利用して画像を表示しています。
指定している内容は以下です。
|
|
-
linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4))
画像を少し暗くするために指定しています。
-
url(' + imageURL + ')
ここには画像のblobURLが入ります。
実行
最後の行で、今までのコードを実行しています。
|
|
おわりに
今後も、kintoneのポータルのカスタマイズに関する記事を発信していく予定です。
ぜひ楽しみにお待ちください。
このTipsは、2019年7月版kintoneで動作を確認しています。