kintone cafe Tokyo Vol.17 ハンズオン資料

by ishii kentaro

Slide 1

Slide 1 text

kintone kintone Cafe Tokyo Cafe Tokyo V o l . 1 7 ｲｼｲｹﾝﾀﾛｳ

Slide 2

Slide 2 text

自己紹介はあとでします自己紹介はあとでします

Slide 3

Slide 3 text

まず時間かかるところから！まず時間かかるところから！

Slide 4

Slide 4 text

開発環境を作ろう開発環境を作ろう

Slide 5

Slide 5 text

1-1 cybozu developer network 1開発環境を作ろう https://cybozu.dev/ja/ 【操作】検索かURLで開き、「開発環境を取得」リンクをクリック

Slide 6

Slide 6 text

1-2 kintone開発者ライセンス画面 1開発環境を作ろう【操作】利用規約を確認して「開発者ライセンスを申し込む」をクリック

Slide 7

Slide 7 text

1-3 申込みフォーム 1開発環境を作ろう【操作】指示された内容を入力して「申し込む」ボタンをクリック

Slide 8

Slide 8 text

メールを待つ！メールを待つ！

Slide 9

Slide 9 text

この間に自己紹介しますこの間に自己紹介します

Slide 10

Slide 10 text

@kentaro1sh11 #資格怪獣 #自意識だけアカデミア #脱毛と心臓手術 11 YEARS !!!! 11 YEARS !!!! 株式会社マルテー大塚株式会社マルテー大塚創業以来110年ハケとローラーを造っていますｲｼｲｹﾝﾀﾛｳｲｼｲｹﾝﾀﾛｳ kintone 認定資格全冠 kintoneエバンジェリスト kintoneEPC ４代目会長

Slide 11

Slide 11 text

なんかベテラン多くない？ｗなんかベテラン多くない？ｗ

Slide 12

Slide 12 text

ベテラン勢はメンターお願いベテラン勢はメンターお願い

Slide 13

Slide 13 text

03. 2-1 ホップ☆ステップきとみちゃん《合言葉はがまんしない！》 2 【おまけ】きとみちゃんグッズ応募！！ https://kintone.cybozu.co.jp/jp/kitomi/ 【操作】「おまけプレゼント♥」ボタンをクリック

Slide 14

Slide 14 text

2-2 お悩み解決レシピ 2 【おまけ】きとみちゃんグッズ応募！！【操作】「♪は・じ・め・る♪」ボタンをクリック

Slide 15

Slide 15 text

2-3 あなたのお仕事をおしえてね！ 2 【おまけ】きとみちゃんグッズ応募！！【操作】希望するにチェックして各種入力後「回答する」ボタンをクリック

Slide 16

Slide 16 text

2-3 あなたのお仕事をおしえてね！ 2 【おまけ】きとみちゃんグッズ応募！！【操作】お仕事を選択して「次へ」ボタンをクリック

Slide 17

Slide 17 text

メール来た？メール来た？

Slide 18

Slide 18 text

３-1 ログイン後の初期画面３開発環境利用開始の準備【操作】「CYBOZU.COM 共通管理」ボタンをクリック

Slide 19

Slide 19 text

３-2 契約状況画面３開発環境利用開始の準備【操作】「詳細な契約状況」リンクをクリック

Slide 20

Slide 20 text

３-３詳細な契約状況画面３開発環境利用開始の準備【操作】ドメイン名の「変更」リンクをクリック

Slide 21

Slide 21 text

３-4 詳細な契約状況ドメイン名変更画面３開発環境利用開始の準備【操作】新しいドメイン名を入力し「保存」ボタンをクリック

Slide 22

Slide 22 text

開発環境完成です開発環境完成ですおめでとう！おめでとう！

Slide 23

Slide 23 text

モバイルアプリを入れようモバイルアプリを入れよう

Slide 24

Slide 24 text

4-1 モバイルアプリ入手 4 モバイルアプリ入れよう AppStoreからダウンロード GooglePlayで手に入れよう

Slide 25

Slide 25 text

4-2 サブドメイン入力 4 モバイルアプリ入れよう【操作】開発環境のサブドメイン入力→次へタップ

Slide 26

Slide 26 text

4-3 ログイン 4 モバイルアプリ入れよう【操作】ログイン名とパスワード入力→ログインタップ

Slide 27

Slide 27 text

試用環境をつくろう試用環境をつくろう

Slide 28

Slide 28 text

5-1 サイボウズドットコムストアにログイン 5 試用環境をつくろう https://store.cybozu.com/login

Slide 29

Slide 29 text

5-2 契約管理画面 5 試用環境をつくろう【操作】「お試し」ボタンをクリック

Slide 30

Slide 30 text

5-3 無料お試しダイアログ 5 試用環境をつくろう【操作】kintoneにチェックして「お試し」ボタンをクリック

Slide 31

Slide 31 text

5-4 完了ダイアログ 5 試用環境をつくろう

Slide 32

Slide 32 text

5-5 ドットコムストアで確認 5 試用環境をつくろう

Slide 33

Slide 33 text

テンプレートからアプリつくってテンプレートからアプリつくって csv読み込みもしてみよう csv読み込みもしてみよう

Slide 34

Slide 34 text

6-1 たのしくなるなる10Days 6 【おまけのおまけ】たのしくなるなる10Days https://kintone.cybozu.co.jp/jp/kitomi/10days/

Slide 35

Slide 35 text

6-2 ダウンロードファイルの取得 6 【おまけのおまけ】たのしくなるなる10Days 【操作】2つのファイルをダウンロード

Slide 36

Slide 36 text

6-3 スペースを作成する 6 【おまけのおまけ】たのしくなるなる10Days 【操作】開発環境でスペースの「＋」→「スペースを作成」をクリック ① ②

Slide 37

Slide 37 text

6-3 スペースを作成するその２ 6 【おまけのおまけ】たのしくなるなる10Days 【操作】「はじめから作る」をクリック

Slide 38

Slide 38 text

6-4 「きとみちゃん10Days」スペースを設定する 6 【おまけのおまけ】たのしくなるなる10Days 【操作】スペース名入力→2つ目チェック→「保存」クリック ① ③ ②

Slide 39

Slide 39 text

6-5 ダウンロードしたテンプレートからアプリを作成する 6 【おまけのおまけ】たのしくなるなる10Days 【操作】アプリの「＋」をクリック

Slide 40

Slide 40 text

6-5 ダウンロードしたテンプレートからアプリを作成する 6 【おまけのおまけ】たのしくなるなる10Days 【操作】「テンプレートファイルを読み込んで作成」をクリック

Slide 41

Slide 41 text

6-5 ダウンロードしたテンプレートからアプリを作成する 6 【おまけのおまけ】たのしくなるなる10Days 【操作】zipファイルを選んで「アプリを作成」をクリック ① ②

Slide 42

Slide 42 text

6-6 ダウンロードしたcsvをアプリに読み込む 6 【おまけのおまけ】たのしくなるなる10Days 【操作】「たのしくなるなる」10Daysアプリをクリック

Slide 43

Slide 43 text

6-6 ダウンロードしたcsvをアプリに読み込む 6 【おまけのおまけ】たのしくなるなる10Days 【操作】「・・・」クリック→「ファイルから読み込む」をクリック

Slide 44

Slide 44 text

6-6 ダウンロードしたcsvをアプリに読み込む 6 【おまけのおまけ】たのしくなるなる10Days 【操作】csv選択→「はい」→「UTF-8」→「読み込む」クリック ① ③ ④ ②

Slide 45

Slide 45 text

6-7 利用開始！ 6 【おまけのおまけ】たのしくなるなる10Days

Slide 46

Slide 46 text

プラグイン入れてみようプラグイン入れてみよう

Slide 47

Slide 47 text

7-1 試験対策プラグインダウンロードファイル入手 7 プラグイン入れてみよう【操作】3種類のファイルをダウンロード https://note.com/kentaro1sh11/n/n4bf966c01d51

Slide 48

Slide 48 text

7-1 試験対策プラグインダウンロードファイル入手 7 プラグイン入れてみよう【操作】解答してそれぞれcsvダウンロード・・・はしないで、 https://cybozu.co.jp/kintone-certification/aa_practice/questions.html

Slide 49

Slide 49 text

7-1 試験対策プラグインダウンロードファイル入手 7 プラグイン入れてみよう【操作】今日だけ特別ですcsvダウンロードできあがったものがこちらw できあがったものがこちらw

Slide 50

Slide 50 text

7-2 開発環境にプラグインをインストール 7 プラグイン入れてみよう【操作】歯車アイコン→「kintoneシステム管理」クリック ① ②

Slide 51

Slide 51 text

7-2 開発環境にプラグインをインストール 7 プラグイン入れてみよう【操作】「プラグイン」クリック

Slide 52

Slide 52 text

7-2 開発環境にプラグインをインストール 7 プラグイン入れてみよう【操作】「読み込む(黒)」→ファイル選択→「読み込む(青)」クリック ① ③ ②

Slide 53

Slide 53 text

7-2 開発環境にプラグインをインストール 7 プラグイン入れてみよう

Slide 54

Slide 54 text

7-3 スペースを作成する 7 プラグイン入れてみよう【操作】さっきやったから省略するよ！！

Slide 55

Slide 55 text

7-4 テンプレートを読み込んでアプリを作成する 7 プラグイン入れてみよう【操作】これもさっきとおなじ！練習問題と成績管理２つつくって

Slide 56

Slide 56 text

7-5 成績管理アプリのアプリIDをメモ（画像の例だと369） 7 プラグイン入れてみよう【操作】記憶でもいいしコピーしてもいいですおまかせ

Slide 57

Slide 57 text

7-6 練習問題アプリにプラグインを追加 7 プラグイン入れてみよう【操作】歯車右のv→カスタマイズ/サービス連携→プラグイン ① ③ ②

Slide 58

Slide 58 text

7-6 練習問題アプリにプラグインを追加 7 プラグイン入れてみよう【操作】「＋追加する」クリック

Slide 59

Slide 59 text

7-6 練習問題アプリにプラグインを追加 7 プラグイン入れてみよう【操作】チェック→「追加」クリック ① ②

Slide 60

Slide 60 text

7-6 練習問題アプリにプラグインを追加 7 プラグイン入れてみよう【操作】設定の歯車アイコンクリック

Slide 61

Slide 61 text

7-6 練習問題アプリにプラグインを追加 7 プラグイン入れてみよう【操作】成績管理アプリのアプリID→70→「保存する」 ① ②

Slide 62

Slide 62 text

7-6 練習問題アプリにプラグインを追加 7 プラグイン入れてみよう【操作】「アプリの設定に戻る」クリック

Slide 63

Slide 63 text

7-6 練習問題アプリにプラグインを追加 7 プラグイン入れてみよう【操作】「アプリの更新」クリック

Slide 64

Slide 64 text

7-7 練習問題アプリでCSV読み込み 7 プラグイン入れてみよう【操作】これもさっきやったので省略

Slide 65

Slide 65 text

7-8 完成！！ 7 プラグイン入れてみよう

Slide 66

Slide 66 text

7-9 スマホから確認 7 プラグイン入れてみよう

Slide 67

Slide 67 text

フォームブリッジ使ってみようフォームブリッジ使ってみよう

Slide 68

Slide 68 text

8-1 フォームブリッジサイトから無料お試し申し込み 8 フォームブリッジ使ってみよう https://www.kintoneapp.com/form-bridge

Slide 69

Slide 69 text

8-1 フォームブリッジサイトから無料お試し申し込み 8 フォームブリッジ使ってみよう【操作】入力項目を埋めて確認する→申し込む ① ②

Slide 70

Slide 70 text

メールを待つ！メールを待つ！

Slide 71

Slide 71 text

メール来た？メール来た？

Slide 72

Slide 72 text

8-2 Toyokumo kintoneAppにログインする 8 フォームブリッジ使ってみよう https://account.kintoneapp.com/app

Slide 73

Slide 73 text

8-2 Toyokumo kintoneAppにログインする 8 フォームブリッジ使ってみよう【操作】メールアドレスでログイン→入力して送信 ① ②

Slide 74

Slide 74 text

8-2 Toyokumo kintoneAppにログインする 8 フォームブリッジ使ってみよう【操作】届いたメールのリンクをクリック

Slide 75

Slide 75 text

8-3 フォームブリッジを開く 8 フォームブリッジ使ってみよう【操作】「開く」をクリック

Slide 76

Slide 76 text

8-4 kintone情報の設定 8 フォームブリッジ使ってみよう【操作】サブドメインを入力して「保存」クリック

Slide 77

Slide 77 text

8-5 スペースを作成する 8 フォームブリッジ使ってみよう【操作】本日3回目もう大丈夫ですね！

Slide 78

Slide 78 text

8-6 フォームの内容を保存するアプリを作成する 8 フォームブリッジ使ってみよう【操作】1番下問い合わせ管理の「このアプリを追加」→「追加」 ① ②

Slide 79

Slide 79 text

8-7 フォーム作成準備 8 フォームブリッジ使ってみよう【操作】アドレスバーのアプリURLをまるっとコピー

Slide 80

Slide 80 text

8-8 フォームを作成する 8 フォームブリッジ使ってみよう【操作】「＋フォームを作成」クリック

Slide 81

Slide 81 text

8-8 フォームを作成する 8 フォームブリッジ使ってみよう【操作】「はじめから作成」クリック

Slide 82

Slide 82 text

8-9 アプリ情報を登録する 8 フォームブリッジ使ってみよう【操作】コピーしたurl貼り付け→「APIトークン生成はこちら」クリック ① ②

Slide 83

Slide 83 text

8-9 APIトークンを生成する 8 フォームブリッジ使ってみよう【操作】生成する→APIトークンをコピー→レコード追加チェック →メモにフォームブリッジ→保存→アプリ更新 ① ② ③ ④ ⑤

Slide 84

Slide 84 text

8-10 生成したAPIトークンをフォームに設定する 8 フォームブリッジ使ってみよう【操作】APIトークン貼り付け→保存 ① ②

Slide 85

Slide 85 text

8-11 フォームのフィールドを設定する 8 フォームブリッジ使ってみよう【操作】フォームのデザイン→顧客名 ① ②

Slide 86

Slide 86 text

8-11 フォームのフィールドを設定する 8 フォームブリッジ使ってみよう【操作】フィールド名「顧客名」を「会社名」に変更

Slide 87

Slide 87 text

8-11 フォームのフィールドを設定する 8 フォームブリッジ使ってみよう【操作】フィールドコードも「会社名」に変更

Slide 88

Slide 88 text

8-11 フォームのフィールドを設定する 8 フォームブリッジ使ってみよう【操作】フィールド名「ご担当者名」を「お名前」に変更

Slide 89

Slide 89 text

8-11 フォームのフィールドを設定する 8 フォームブリッジ使ってみよう【操作】フィールドコードも「お名前」に変更

Slide 90

Slide 90 text

8-11 フォームのフィールドを設定する 8 フォームブリッジ使ってみよう【操作】「受付日時」を選んで削除クリック ① ②

Slide 91

Slide 91 text

8-11 フォームのフィールドを設定する 8 フォームブリッジ使ってみよう【操作】「対応状況」を選んで削除クリック ① ②

Slide 92

Slide 92 text

8-11 フォームのフィールドを設定する 8 フォームブリッジ使ってみよう【操作】「期限」を選んで削除クリック ① ②

Slide 93

Slide 93 text

8-11 フォームのフィールドを設定する 8 フォームブリッジ使ってみよう【操作】「受付日時」テーブル全体を選んで削除クリック ① ②

Slide 94

Slide 94 text

8-11 フォームのフィールドを設定する 8 フォームブリッジ使ってみよう【操作】「文字列（1行）」をドラッグして配置

Slide 95

Slide 95 text

8-11 フォームのフィールドを設定する 8 フォームブリッジ使ってみよう【操作】文字列1行のフィールド名を「メールアドレス」に変更

Slide 96

Slide 96 text

8-11 フォームのフィールドを設定する 8 フォームブリッジ使ってみよう【操作】フィールドコードも「メールアドレス」に変更

Slide 97

Slide 97 text

8-11 フォームのフィールドを設定する 8 フォームブリッジ使ってみよう【操作】入力値の種類をメールアドレスに変更→フォームのデザインに戻る ① ②

Slide 98

Slide 98 text

8-11 フォームのフィールドを設定する 8 フォームブリッジ使ってみよう【操作】「保存」クリック→メニューを表示 ① ②

Slide 99

Slide 99 text

8-12 回答確認画面を設定する 8 フォームブリッジ使ってみよう【操作】回答確認画面→チェック→保存→回答保存プロセス ① ③ ② ④

Slide 100

Slide 100 text

8-13 自動返信メールを設定する 8 フォームブリッジ使ってみよう【操作】＋追加→自動返信メール ① ②

Slide 101

Slide 101 text

8-13 自動返信メールを設定する 8 フォームブリッジ使ってみよう【操作】保存クリック

Slide 102

Slide 102 text

8-13 自動返信メールを設定する 8 フォームブリッジ使ってみよう【操作】「自動返信メール」を上にドラッグして順番を入れ替える

Slide 103

Slide 103 text

8-14 フォームを公開する 8 フォームブリッジ使ってみよう【操作】「公開」をクリック→もう1回「公開」をクリック ① ②

Slide 104

Slide 104 text

8-15 フォームをテストする 8 フォームブリッジ使ってみよう【操作】公開中リンクをクリック→回答してアプリに保存されるか確認

Slide 105

Slide 105 text

完走！おめでとう！完走！おめでとう！

Slide 106

Slide 106 text

おまけクイズおまけクイズ k i n t o n e C a f e 京都からいただく 1 0 秒問題！

Slide 107

Slide 107 text

一覧の名前は？（理由も！）

Slide 108

Slide 108 text

万が一時間余ったら万が一時間余ったらハートでも描いててｗハートでも描いててｗ

Slide 109

Slide 109 text

9-1 ここまで来れた方なら1人でできるでしょ！ 9 ハート描こう https://note.com/kentaro1sh11/n/ne63186727f0d