Embed Size (px)
Citation preview
JavaScript カスタマイズ入門
1
kintone university アプリデザイナープラス
JavaScriptカスタマイズ入門編 演習問題回答
演習問題 「第 2 章 サンプルで試そう」
① cybozu.com developer network の「サンプルで試そう」（以下、「サンプル」と
略）にある「ガントチャートプラグイン」を、下記の手順で利用してみましょう。
●「ガントチャートプラグイン」をダウンロードし、kintone に読み込む
● kintone のアプリストアから「To Do」アプリを作成する
● 「To Do」アプリにガントチャートプラグインを追加する
● プラグインの設定画面で、ガントチャートに表示するフィールドを指定する
● サンプルデータを数件追加してガントチャートが表示されることを確認する
【必須】
上記の手順がすべて行われ、結果として「ToDo」アプリにサンプルデータのガント
チャートが表示されることを確認します。
2
② 「サンプル」の「入力値チェックプラグイン」を、下記の手順で利用してみましょ
う。
●「入力値チェックプラグイン」をダウンロードし、kintone に読み込む
● Step4 で利用した「顧客リスト」アプリに入力値チェックプラグインを追加する
● プラグインの設定画面で、「郵便番号」「電話番号」「FAX 番号」「メールアドレス」
のフィールドコードを指定する
● 郵便番号、TEL、FAX、メールアドレスの各フィールドに対して入力値チェック
が行われることを確認する
【必須】
上記の手順がすべて行われ、結果として「顧客リスト」アプリの新しいレコードの追
加画面で、郵便番号、TEL、FAX、メールアドレスの各フィールドに対して入力値
チェックが行われることを確認します。
JavaScript カスタマイズ入門
3
③ 「サンプル」の「kintone JavaScript API」の「顧客訪問リストを地図にピン表示
する」を、下記の手順で利用してみましょう。
●「顧客訪問リストを地図にピン表示する」のサンプルプログラムを 1 行目から最
終行まですべて選択してコピーし、エディタに貼り付け、文字コードを「UTF-8」、
「BOM なし」、拡張子を「.js」にして保存する
●「顧客リスト」アプリの「PC 用の JavaScript ファイル」の Step4 で設定したプ
ログラムを削除し、保存したプログラムをアップロードして追加する
●「顧客リスト」アプリのレコード一覧画面とレコード詳細画面で地図が表示され
ることを確認する
【必須】
上記の手順がすべて行われ、結果として「顧客リスト」アプリのレコード一覧画面と
レコード詳細画面で地図が表示されることを確認します。
4
④ 「サンプル」の「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>
6
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」が添付されていることを確認し
てください。
8
演習問題 「第４章 カスタマイズしてみよう」
①「cybozu.com developer network」の Tipsにある「はじめよう kintone JavaScript
API」の「第 3 回 レコード詳細にもボタンを設置しよう！」に従って、レコード詳
細画面にボタンを配置して動作するようにしましょう。
「ボタンの設置(2)」までやってみましょう。
【必須】
「cybozu.com developer network」のTipsにある「はじめよう kintone JavaScript
API」の「第 3 回 レコード詳細にもボタンを設置しよう！」の手順に従い、「Step8」
で使用したサンプルアプリのレコード詳細画面のメニュー右側にボタンが設置され
ていることと、スペースフィールドを利用したボタンが設置されていることを確認し
ます。
