JavaScript カスタマイズ入門 kintone university アプリデザイナープラス JavaScript カスタマイズ入門編演習問題回答演習問題第 2 章サンプルで試そう 1 cybozu.com developer network のサンプルで試そう ( 以下サンプルと

Size: px

Start display at page:

Download "JavaScript カスタマイズ入門 kintone university アプリデザイナープラス JavaScript カスタマイズ入門編演習問題回答演習問題第 2 章サンプルで試そう 1 cybozu.com developer network のサンプルで試そう ( 以下サンプルと"

ふじよしあいしま
7 years ago
Views:

1 JavaScript カスタマイズ入門 kintone university アプリデザイナープラス JavaScript カスタマイズ入門編演習問題回答演習問題第 2 章サンプルで試そう 1 cybozu.com developer network のサンプルで試そう ( 以下サンプルと略 ) にあるガントチャートプラグインを下記の手順で利用してみましょうガントチャートプラグインをダウンロードし kintone に読み込む kintone のアプリストアから To Do アプリを作成する To Do アプリにガントチャートプラグインを追加するプラグインの設定画面でガントチャートに表示するフィールドを指定するサンプルデータを数件追加してガントチャートが表示されることを確認する必須上記の手順がすべて行われ結果として ToDo アプリにサンプルデータのガントチャートが表示されることを確認します 1

2 サンプルの入力値チェックプラグインを下記の手順で利用してみましょう入力値チェックプラグインをダウンロードし kintone に読み込む Step4 で利用した顧客リストアプリに入力値チェックプラグインを追加するプラグインの設定画面で郵便番号電話番号 FAX 番号メールアドレス

2 2 サンプルの入力値チェックプラグインを下記の手順で利用してみましょう入力値チェックプラグインをダウンロードし kintone に読み込む Step4 で利用した顧客リストアプリに入力値チェックプラグインを追加するプラグインの設定画面で郵便番号電話番号 FAX 番号メールアドレスのフィールドコードを指定する郵便番号 TEL FAX メールアドレスの各フィールドに対して入力値チェックが行われることを確認する必須上記の手順がすべて行われ結果として顧客リストアプリの新しいレコードの追加画面で郵便番号 TEL FAX メールアドレスの各フィールドに対して入力値チェックが行われることを確認します 2

js にして保存する顧客リストアプリの PC 用の JavaScript ファイルの Step4 で設定したプログラムを削除し保存したプログラムをアップロードして追加する顧客リスト

3 JavaScript カスタマイズ入門 3 サンプルの kintone JavaScript API の顧客訪問リストを地図にピン表示するを下記の手順で利用してみましょう顧客訪問リストを地図にピン表示するのサンプルプログラムを 1 行目から最終行まですべて選択してコピーしエディタに貼り付け文字コードを UTF-8 BOM なし拡張子を.js にして保存する顧客リストアプリの PC 用の JavaScript ファイルの Step4 で設定したプログラムを削除し保存したプログラムをアップロードして追加する顧客リストアプリのレコード一覧画面とレコード詳細画面で地図が表示されることを確認する必須上記の手順がすべて行われ結果として顧客リストアプリのレコード一覧画面とレコード詳細画面で地図が表示されることを確認します 3

4 4 サンプルの kintone JavaScript API の回答の条件によって別フィールドの表示 / 非表示を切り替えるを下記の手順で利用してみましょう回答の条件によって別フィールドの表示/ 非表示を切り替えるのサンプルプログラムを 1 行目から最終行まですべて選択してコピーしエディタに貼り付け文字コードを UTF-8 BOM なし拡張子を.js にして保存する kintone のアプリストアから問診票アプリを作成する問診票アプリの PC 用の JavaScript ファイルに保存したプログラムをアップロードして追加する問診票アプリのレコード登録画面で設問の回答によってフィールドの表示/ 非表示が切り替わることを確認する必須上記の手順がすべて行われ結果として問診票アプリのレコード登録画面で設問の回答によってフィールドの表示 / 非表示が切り替わることを確認します 4

5 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.

6 12 <p> 本文 </p> 13 <p> 本文の途中で改行 <br /> 14 <a href= > 他のページへのリンク </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

7 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

8 演習問題第 4 章カスタマイズしてみよう 1 cybozu.com developer network の Tips にあるはじめよう kintone JavaScript API の第 3 回レコード詳細にもボタンを設置しよう! に従ってレコード詳細画面にボタンを配置して動作するようにしましょうボタンの設置(2) までやってみましょう必須 cybozu.com developer network の Tips にあるはじめよう kintone JavaScript API の第 3 回レコード詳細にもボタンを設置しよう! の手順に従い Step8 で使用したサンプルアプリのレコード詳細画面のメニュー右側にボタンが設置されていることとスペースフィールドを利用したボタンが設置されていることを確認します 8

< 目次 > Ⅰ. プラグインの設定 ( 管理者権限 ) P 1 Ⅱ. 帳票の設定 ( 管理者権限 ) 1. 帳票の追加 / 削除 (1) 帳票の追加 P 3 (2) 設定済帳票の削除 P 4 2. 帳票への表示 / 削除 (1)kintone フィールドの表示 1フィールドの表示 P 5 2サブテ

RepotoneU 設定マニュアル (2016 年 1 月 ) 株式会社ソウルウェア < 目次 > Ⅰ. プラグインの設定 ( 管理者権限 ) P 1 Ⅱ. 帳票の設定 ( 管理者権限 ) 1. 帳票の追加 / 削除 (1) 帳票の追加 P 3 (2) 設定済帳票の削除 P 4 2. 帳票への表示 / 削除 (1)kintone フィールドの表示 1フィールドの表示 P 5 2サブテーブルフィールドの表示

JavaScript カスタマイズ入門 kintone university アプリデザイナープラス JavaScript カスタマイズ入門編演習問題回答 演習問題 第 2 章サンプルで試そう 1 cybozu.com developer network の サンプルで試そう ( 以下 サンプル と

JavaScript カスタマイズ入門 kintone university アプリデザイナープラス JavaScript カスタマイズ入門編演習問題回答演習問題第 2 章サンプルで試そう 1 cybozu.com developer network のサンプルで試そう ( 以下サンプルと