JavaScript カスタマイズ入門 kintone university アプリデザイナープラス JavaScript カスタマイズ入門編演習問題回答 演習問題 第 2 章サンプルで試そう 1 cybozu.com developer network の サンプルで試そう ( 以下 サンプル と略 ) にある ガントチャートプラグイン を 下記の手順で利用してみましょう ガントチャートプラグイン をダウンロードし kintone に読み込む kintone のアプリストアから To Do アプリを作成する To Do アプリにガントチャートプラグインを追加する プラグインの設定画面で ガントチャートに表示するフィールドを指定する サンプルデータを数件追加してガントチャートが表示されることを確認する 必須 上記の手順がすべて行われ 結果として ToDo アプリにサンプルデータのガント チャートが表示されることを確認します 1
2 サンプル の 入力値チェックプラグイン を 下記の手順で利用してみましょう 入力値チェックプラグイン をダウンロードし kintone に読み込む Step4 で利用した 顧客リスト アプリに入力値チェックプラグインを追加する プラグインの設定画面で 郵便番号 電話番号 FAX 番号 メールアドレス のフィールドコードを指定する 郵便番号 TEL FAX メールアドレスの各フィールドに対して入力値チェックが行われることを確認する 必須 上記の手順がすべて行われ 結果として 顧客リスト アプリの新しいレコードの追加画面で 郵便番号 TEL FAX メールアドレスの各フィールドに対して入力値チェックが行われることを確認します 2
JavaScript カスタマイズ入門 3 サンプル の kintone JavaScript API の 顧客訪問リストを地図にピン表示する を 下記の手順で利用してみましょう 顧客訪問リストを地図にピン表示する のサンプルプログラムを 1 行目から最終行まですべて選択してコピーし エディタに貼り付け 文字コードを UTF-8 BOM なし 拡張子を.js にして保存する 顧客リスト アプリの PC 用の JavaScript ファイル の Step4 で設定したプログラムを削除し 保存したプログラムをアップロードして追加する 顧客リスト アプリのレコード一覧画面とレコード詳細画面で地図が表示されることを確認する 必須 上記の手順がすべて行われ 結果として 顧客リスト アプリのレコード一覧画面と レコード詳細画面で地図が表示されることを確認します 3
4 サンプル の kintone JavaScript API の 回答の条件によって別フィールドの表示 / 非表示を切り替える を 下記の手順で利用してみましょう 回答の条件によって別フィールドの表示/ 非表示を切り替える のサンプルプログラムを 1 行目から最終行まですべて選択してコピーし エディタに貼り付け 文字コードを UTF-8 BOM なし 拡張子を.js にして保存する kintone のアプリストアから 問診票 アプリを作成する 問診票 アプリの PC 用の JavaScript ファイル に 保存したプログラムをアップロードして追加する 問診票 アプリのレコード登録画面で 設問の回答によってフィールドの表示/ 非表示が切り替わることを確認する 必須 上記の手順がすべて行われ 結果として 問診票 アプリのレコード登録画面で 設 問の回答によってフィールドの表示 / 非表示が切り替わることを確認します 4
JavaScript カスタマイズ入門 演習問題 第 3 章カスタマイズのための基礎知識 1 教材 5-2 サンプル.html を複製して 演習問題第 3 章.html を作成し 以下の 指示に従って HTML ファイルを修正してください 見出し 1 の下に <h2> タグを使用して 見出し 2 を追加してください その下に <h3> タグを使用して 見出し 3 を追加してください 他のページへのリンク のリンク先を 演習問題で使用する kintone のポータルに変更してください ( 解答例は次の 2 を参照してください ) 2CSS ファイルを新規に lesson3.css のファイル名で作成し 演習問題第 3 章.html を CSS ファイルにリンクするように修正して 書式を以下のように指定してください 見出し 2 のフォントサイズを任意のサイズに変更してください 見出し 3 のフォントの色を任意の色に変更してください その他の任意の要素について 任意の書式を指定してください 必須 演習問題第 3 章.html は <h2> <h3> タグが追加され <a> タグが修正され CSS ファイルへのリンクが追加された 以下のようなソースコードとなります 演習問題第 3 章.html の例 1 <!DOCTYPE html> 2 <html> 3 <!-- コメント --> 4 <head> 5 <title> ページのタイトル </title> 6 <link rel="stylesheet" type="text/css" href=" lesson3.css"> 7 </head> 8 <body> 9 <h1> 見出し 1</h1> 10 <h2> 見出し 2</h2> 11 <h3> 見出し 3</h3> 5
12 <p> 本文 </p> 13 <p> 本文の途中で改行 <br /> 14 <a href= https://******.cybozu.com/k/#/portal > 他のページへのリンク </a> 15 </p> 16 <ul> 17 <li> 箇条書きの項目 </li> 18 <li> 箇条書きの項目 </li> 19 </ul> 20 </body> 21 </html> 必須 lesson3.css は <h2> <h3> と任意の要素への書式を指定した 以下のようなソースコードとなります lesson3.css の例 1 h2 {font-size:18px;} 2 h3 {color:green;} 3 ul {background-color:gray;} 確認 演習問題第 3 章.html をブラウザで開き lesson3.css で指定した書式が反映 されていることを確認してください 6
JavaScript カスタマイズ入門 3kintone アプリストアから ファイル管理 アプリを追加し 以下の指示に従ってください ファイル管理 アプリに新規レコードを追加し 演習問題第 3 章.html と lesson3.css を添付して保存してください 添付ファイル以外のフィールドは任意に入力してください JavaScript ファイルを新規に lesson3.js のファイル名で作成し ファイル管理 アプリを開いたときに 演習問題第 3 章完成 とメッセージを表示するようにしてください 必須 lesson3.js は 以下のようなソースコードとなります lesson3.js の例 1 function () { 2 "use strict"; 3 window.alert(' 演習問題第 3 章完成 '); 4 })(); 確認 ファイル管理 アプリを開いたときに 演習問題第 3 章完成 とメッセージが表示され 演習問題第 3 章.html と lesson3.css が添付されていることを確認してください 7
演習問題 第 4 章カスタマイズしてみよう 1 cybozu.com developer network の Tips にある はじめよう kintone JavaScript API の 第 3 回レコード詳細にもボタンを設置しよう! に従って レコード詳細画面にボタンを配置して動作するようにしましょう ボタンの設置(2) までやってみましょう 必須 cybozu.com developer network の Tips にある はじめよう kintone JavaScript API の 第 3 回レコード詳細にもボタンを設置しよう! の手順に従い Step8 で使用したサンプルアプリのレコード詳細画面のメニュー右側にボタンが設置されていることと スペースフィールドを利用したボタンが設置されていることを確認します 8