こんにちは、ジョイゾーでエンジニアをしている新卒1年目の戀塚です。
今回は、弊社プラグイン「フルスクリーンプラグイン」を 初心者の方でも簡単に活用できるCSSカスタマイズ術 とともにご紹介します。
フルスクリーンプラグインは、kintoneの一覧画面を大きく表示するときにとても便利です。
ただし実際に使ってみると、次のようなお悩みを感じる方も少なくありません。
- 「色が少し見づらい…」
- 「オフィスの雰囲気やコーポレートカラーに合わせたい…」
実はこうした悩みも、CSSをほんの少し調整するだけで解決可能です。
CSS（Cascading Style Sheets）とは、Webページのデザインや見た目を整えるための仕組みです。
「CSSは難しそう」と思われるかもしれませんが、ご安心ください！
私自身もプログラミングを学び始めたばかりですが、今回ご紹介する方法なら初心者の方でもすぐに試すことができます。ぜひ参考にしてみてください。
弊社では初回開発無料の定額39万円でkintoneアプリを開発する定額型開発サービス「システム３９」を提供しております。kintoneの導入やアプリ開発でお困りの方は、お気軽にご相談ください。
＊Webでの打ち合わせも可能です。
フルスクリーンプラグインとは？
フルスクリーンプラグインとはkintoneに登録されているレコードデータを、デジタルサイネージとしてお好きなデザインでフルスクリーンに表示することができる kintone のプラグインです。
kintone基本機能では一覧を大きく表示することはできません。
そのため、お好みのデザインで表示するにはカスタマイズの知識が必要となります。しかし、本プラグインを使うことで、設定したデザインをボタン一つで外部ディスプレイなどにデジタルサイネージとして表示させることができます。
フルスクリーンプラグインを設定してみよう
今回は営業部のオフィスで活用することを想定した「受注管理アプリ」を利用したフルスクリーンプラグインの活用例をご紹介します。
1.受注管理アプリの用意をします。
今回、フルスクリーンプラグインで表示したい情報は「顧客名」、「受注確度」、「担当営業」、「金額」の4つの項目です。そのため、内容に沿ったアプリを作成します。
2.アプリにフルスクリーンプラグインを適用します。
アプリの設定＞プラグイン画面にて、フルスクリーンプラグインを追加します。
追加後、歯車マークを押下してプラグイン設定画面を開きます。
3.プラグインの設定を行います。
ライセンスキーを入力し、以下の設定欄にて、行の追加を選択し、自分が表示したいフィールドを設定しましょう。
今回は以下のように設定を行いました。
行の設定以外にも、表示するレコード件数やデータリフレッシュ間隔も設定可能です。
設定が完了したらプラグインの設定を保存し、アプリを更新します。
実際の動作を確認します。
一覧画面にある再生ボタンを押下してください。
以下のように画面が切り替わります。
しかし、デフォルトの設定は全体的に色味が暗めであるため、場所によっては視認性が下がり、やや見づらく感じられる場合があります。また、オフィスの雰囲気によっては調和しない可能性も考えられます。
CSSカスタマイズをしてみよう
そこでCSSカスタマイズの出番です。
今回は JSEdit for kintone を活用して、CSSを設定します。
JSEdit for kintoneは、「cybozu developer network」にて無償提供されているサンプルプラグインです。kintoneのプラグイン設定画面上でJavaScriptやCSSファイルを作成し、直接アプリに適用できる機能を備えています。
また今回活用するCSSについては、弊社で提供している以下のフルスクリーンプラグイン用のCSS仕様書を参考に設定します。
https://www.joyzo.co.jp/download/plugin/fullscreen/fullscreen_css.pdf
1.全体の色を変えてみましょう。
まずはJSEdit for kintoneを開いてください。
①「PC用のCSSファイル」を選択
②新規作成を押下
③新規ファイル名を入力
今回は水色をテーマに作成したいと思います。
ヘッダーは水色に、奇数行は灰色に、偶数行は白色に、カスタマイズを行います。
以下のようにカスタマイズを反映させると、、、
/*ヘッダーを水色(#20b1ff)に、ヘッダーの文字色は白色(#ffffff)に*/
body #fsp-container .head {
background-color: #20b1ff;
color: #ffffff;
}
/*奇数行を灰色(#d7e5ed)に、奇数行の文字色は黒色(#29292e)に*/
body #fsp-container .record-even {
background-color: #d7e5ed;
color: #29292e;
}
/*偶数行を白色(#ffffff)に、偶数行の文字色は黒色(#29292e)に*/
body #fsp-container .record-odd {
background-color: #ffffff;
color: #29292e;
}
水色を基調にした素敵なフルクリーンになりました！
2.受注確度もカスタマイズしてみましょう！
これだけでも十分便利ですが、さらに「受注確度」をExcelの条件付き書式のように色分けできれば、ひと目で状況を把握しやすくなると思います。
そこで今回は、水色ベースのデザインにアクセントカラーとして黄色を取り入れ、より見やすい表示にカスタマイズしてみたいと思います。
「受注確度」は条件分岐できるようにドロップダウンフィールドで作成します。
フルスクリーンプラグインが出力する要素には、フィールドコードと選択肢の番号（インデックス）を組み合わせたクラス名が付与されます。
例えばフィールドコードが 受注確度 の場合、1番目の選択肢は body .fsp-受注確度-0、2番目は body .fsp-受注確度-1、3番目は body .fsp-受注確度-2 のように指定できます。
ここでの「インデックス」は、選択肢の並び順を表す番号（0から始まる） を指します。
たとえばチェックボックスに「A、B、C」の選択肢があれば、それぞれのインデックスは 0, 1, 2 になります。
選択肢を追加・並べ替えるとインデックスが変わるため、インデックス指定でCSSを当てる場合はその点にご注意ください。
それでは早速カスタマイズを行いましょう！以下のように反映すると、、、
/*受注確度Sの色を変更*/
body .fsp-受注確度-0 {
background-color: #ffc700;
color: #ffffff;
}
/*受注確度Aの色を変更*/
body .fsp-受注確度-1 {
background-color: #f6dc81;
color: #303342;
}
/*受注確度Bの色を変更*/
body .fsp-受注確度-2 {
background-color: #ddd9ca;
color: #303342;
}
/*受注確度Cの色を変更*/
body .fsp-受注確度-3 {
background-color: #efefef;
color: #303342;
}
受注確度もカスタマイズできました！受注確度も色によって判断できることでより見やすい表示に変わりました。
今回の記事では、フルスクリーンプラグインの基本操作から、CSSを使ったちょっとした色のアレンジ方法までをご紹介しました。
デフォルトのままでも使えますが、色を少し変えるだけで「もっと見やすい！」「操作しやすい！」と感じられるはずです。
カスタマイズと聞くと難しそうに思えるかもしれませんが、実際はとてもシンプル。初心者の方でも安心して取り入れられます。
他の活用例
今回は「受注管理アプリ」を例にご紹介しましたが、実はアルバイトのシフト管理や空き会議室の管理など、さまざまなアプリでもフルスクリーンプラグインは活用できます。
運用シーンに合わせて、ぜひ色のカスタマイズも試してみてください！
30日間無料でお試しいただけます
今回は「受注管理アプリ」を用いた活用例をご紹介しました。
デフォルトではシンプルな配色ですが、今回のようにカスタマイズを加えることで、自社の運用により適したデザインにすることが可能です。
フルスクリーンプラグインは30日間無料でお試しいただけます。
ぜひ下記ページの「30日間無料お試し」ボタンよりお申し込みください。
フルスクリーンプラグイン
