JavaScript カスタマイズ入門
1
kintone university アプリデザイナープラス
JavaScript カスタマイズ入門編 演習問題回答
演習問題 「第 2 章 サンプルで試そう」
① cybozu.com developer network の「サンプルで試そう」（以下、「サンプル」と 略）にある「ガントチャートプラグイン」を、下記の手順で利用してみましょう。 ●「ガントチャートプラグイン」をダウンロードし、kintone に読み込む
● kintone のアプリストアから「To Do」アプリを作成する ● 「To Do」アプリにガントチャートプラグインを追加する ● プラグインの設定画面で、ガントチャートに表示するフィールドを指定する ● サンプルデータを数件追加してガントチャートが表示されることを確認する 【必須】 上記の手順がすべて行われ、結果として「ToDo」アプリにサンプルデータのガント チャートが表示されることを確認します。
② 「サンプル」の「入力値チェックプラグイン」を、下記の手順で利用してみましょ う。 ●「入力値チェックプラグイン」をダウンロードし、kintone に読み込む ● Step4 で利用した「顧客リスト」アプリに入力値チェックプラグインを追加する ● プラグインの設定画面で、「郵便番号」「電話番号」「FAX 番号」「メールアドレス」 のフィールドコードを指定する ● 郵便番号、TEL、FAX、メールアドレスの各フィールドに対して入力値チェック が行われることを確認する 【必須】 上記の手順がすべて行われ、結果として「顧客リスト」アプリの新しいレコードの追 加画面で、郵便番号、TEL、FAX、メールアドレスの各フィールドに対して入力値 チェックが行われることを確認します。
JavaScript カスタマイズ入門
3
③ 「サンプル」の「kintone JavaScript API」の「顧客訪問リストを地図にピン表示 する」を、下記の手順で利用してみましょう。 ●「顧客訪問リストを地図にピン表示する」のサンプルプログラムを 1 行目から最 終行まですべて選択してコピーし、エディタに貼り付け、文字コードを「UTF-8」、 「BOM なし」、拡張子を「.js」にして保存する ●「顧客リスト」アプリの「PC 用の JavaScript ファイル」の Step4 で設定したプ ログラムを削除し、保存したプログラムをアップロードして追加する ●「顧客リスト」アプリのレコード一覧画面とレコード詳細画面で地図が表示され ることを確認する 【必須】 上記の手順がすべて行われ、結果として「顧客リスト」アプリのレコード一覧画面と レコード詳細画面で地図が表示されることを確認します。
④ 「サンプル」の「kintone JavaScript API」の「回答の条件によって別フィールド の表示/非表示を切り替える」を、下記の手順で利用してみましょう。 ●「回答の条件によって別フィールドの表示/非表示を切り替える」のサンプルプロ グラムを 1 行目から最終行まですべて選択してコピーし、エディタに貼り付け、 文字コードを「UTF-8」、「BOM なし」、拡張子を「.js」にして保存する ● kintone のアプリストアから「問診票」アプリを作成する ●「問診票」アプリの「PC 用の JavaScript ファイル」に、保存したプログラムを アップロードして追加する ●「問診票」アプリのレコード登録画面で、設問の回答によってフィールドの表示/ 非表示が切り替わることを確認する 【必須】 上記の手順がすべて行われ、結果として「問診票」アプリのレコード登録画面で、設 問の回答によってフィールドの表示/非表示が切り替わることを確認します。
JavaScript カスタマイズ入門 5
演習問題 「第３章 カスタマイズのための基礎知識」
①教材「5-2 サンプル.html」を複製して「演習問題第 3 章.html」を作成し、以下の 指示に従って HTML ファイルを修正してください。 ●「見出し 1」の下に<h2>タグを使用して「見出し 2」を追加してください。 ● その下に<h3>タグを使用して「見出し 3」を追加してください。 ●「他のページへのリンク」のリンク先を、演習問題で使用する kintone のポータ ルに変更してください。 （解答例は次の②を参照してください） ②CSS ファイルを新規に「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>
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」で指定した書式が反映 されていることを確認してください。
JavaScript カスタマイズ入門 7 ③kintone アプリストアから「ファイル管理」アプリを追加し、以下の指示に従って ください。 ●「ファイル管理」アプリに新規レコードを追加し、「演習問題第 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」が添付されていることを確認し てください。
演習問題 「第４章 カスタマイズしてみよう」
①「cybozu.com developer network」の Tips にある「はじめよう kintone JavaScript API」の「第 3 回 レコード詳細にもボタンを設置しよう！」に従って、レコード詳 細画面にボタンを配置して動作するようにしましょう。
「ボタンの設置(2)」までやってみましょう。
【必須】
「cybozu.com developer network」の Tips にある「はじめよう kintone JavaScript API」の「第 3 回 レコード詳細にもボタンを設置しよう！」の手順に従い、「Step8」 で使用したサンプルアプリのレコード詳細画面のメニュー右側にボタンが設置され ていることと、スペースフィールドを利用したボタンが設置されていることを確認し ます。
