Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
kintone devCamp 2016 Spring 【C-4】
アプリ開発なんて怖くない!
gusukuでお手軽kintoneアプリ管理+α
2016年5月27日
アールスリーインスティテュート
いけがみ みどり
自己紹介
池上 緑(いけがみ みどり)
アールスリーインスティテュート
クラウドエンジニア
gusukuエバンジェリスト
業務に関すること
 クラウド使ったソリューション・構築・お客様への要
件のヒアリングもやります!
 展示会ではコスプレ...
登壇する時の中の人(注:すべて同一人物です)
2
弊社アールスリーのご紹介
3
www.r3it.com
アールスリーインスティテュート
(以下R3)は・・・
クラウドを駆使してお客様の課題解
決を行う大阪のシステム開発会社
※東京支社もあります
 ハイスピードSI(=kintoneや
AW...
本日のアジェンダ
4
I. gusukuについての説明
II. 事前準備 ~gusukuを操作する前に~
III. gusukuを実際にさわってみよう!
IV. 登録したアプリのバージョンを管理してみよう!
V. 登録したアプリを異なる環境へ配...
本セミナー関連のハッシュタグ
#kintone #kintonedevcamp #r3gusuku
5
Ⅰ. gusukuについての説明
6
gusukuとは? -機能(1) バージョン管理《基本機能》-
7
kintoneアプリケーション開発をサポートするプラットフォーム(SaaS)
フリーアカウント(無料)であれば 10appid まで管理が可能
任意のkintoneのアプ...
システム開発における3つの環境
8
開発環境
• 開発作業のための環境
• 自身のPC端末等、ローカル環境の場合も
• ユーザーやクライアントには見えない環境が多い
ステージング
環境
• 開発環境で動作検証済みのシステムを、ユーザー/クライア...
gusukuとは? -機能(2) プラグイン機能-
9
gusukuと連携して動作するkintoneプラグインを配布
添付ファイルプラグイン: ★ハンズオン
1ファイル1GB以上の添付ファイルのアップロードが可能
(kintone標準の...
gusukuとは? -機能(3) バックアップ・リストア機能-
10
近日中に公開されるので
サイトをチェックして下さい!
そもそもgusukuを作ろうと
思ったきっかけは?
11
gusukuを作ろうと思ったきっかけ(1)
12
 本番運用中にkintoneアプリに修正を加えたい!
 でも運用中のアプリに直接変更を加えるのってリスクがあるよね
 本番運用してるし、ダウンタイム発生させたくないよね・・・
 じゃあ開...
gusukuを作ろうと思ったきっかけ(2)
13
 実際にkintoneを使って開発してるわたしたちエンジニアのナマの声がそのまま反映される!
 とにかく要望として上げれば、まずは検討してもらえる!
 サービスとしてどんどん成長する!
...
ハンズオン前の注意事項
14
1. 本ハンズオンではkintoneの環境を2つ使用します
2. kintoneのアカウントをひとつしかお持ちでない場合は、
「Ⅱ. 事前準備」>「②kintoneお試しアカウントの作成」
の手順に沿って、2つ取得...
Ⅱ. 事前準備
~gusukuを操作する前に~
15
①gusukuアカウントの作成
16
https://app.gusuku.io/
17
gusukuアカウントの作成
18
 Facebookもしくはgmailのアカウントをお持ちの方
 いずれかを選択してサインインすることでgusukuの利用
が可能
 お持ちでない方
 アカウントを作成して下さい
②kintoneお試しアカウントの作成
19
https://kintone.cybozu.com/jp/trial/
20
メールを送信
21
ご利用のメールアドレスを入力して「メールを送信」をクリック!
『登録用Eメールを送信しました』の画面が出たら・・・
22
cybozu.com Storeからメールが届いていることを確認
23
メール本文にあるURLをクリックして下さい
無料お試しアカウント登録画面で入力
24
必須項目を入力して「お試し開始」をクリック!
無料お試しアカウント登録完了
25
おめでとうございます!
あとは準備完了メールが届くのを待つだけです
メールが届いたらお試しアカウントでログイン確認
26
メールが届いたらkintoneにログインできることを確認して下さい
※こちらは30日間の無料トライアルのアカウントとなり、開発者
アカウントとは異なりますのでご注意下さいね!
Ⅲ. gusukuを実際にさわってみよう!
27
gusukuでアプリのバージョン管理をしてみよう
28
②お試しアカウントで以下の環境を作成
 ステージング環境
 本番環境
①開発者アカウントで
以下の環境を作成
 開発環境
①kintoneの準備
29
kintoneの準備 -kintone(開発環境用)へログイン-
30
お持ちのアカウント(開発者アカウント)でkintoneにログ
インして下さい
kintoneの準備 -kintoneの画面を開く-
31
kintoneをクリックします
kintoneの準備 -開発環境スペースの作成(1)-
32
「スペースを作成」をクリックします
kintoneの準備 -開発環境スペースの作成(2)-
33
「はじめから作る」を選択します
kintoneの準備 -開発環境スペースの作成(3)-
34
スペース名に「開発環境」と入力
「参加メンバーだけにこのスペースを公開する」「スペースのポー
タルと複数のスレッドを使用する」にチェックが入った状態で保存し
ます
kintoneの準備 -開発環境スペースの作成(4)-
35
「開発環境」スペースがkintoneのポータル上に作成されました!
kintoneの準備 -kintone(本番環境用)へログイン-
36
お持ちのアカウント(お試しアカウント)でkintoneにログ
インして下さい
※先ほど作成した開発環境とは異なるkintoneアカウントに
ログインすることに注意して下さい!
kintoneの準備 -ステージング環境スペースの作成(1)-
37
「スペースを作成」をクリックします
kintoneの準備 -ステージング環境スペースの作成(2)-
38
「はじめから作る」を選択します
kintoneの準備 -ステージング環境スペースの作成(3)-
39
スペース名に「ステージング環境」と入力
「参加メンバーだけにこのスペースを公開する」「スペースのポー
タルと複数のスレッドを使用する」にチェックが入った状態で保存し
ます
kintoneの準備 -本番環境スペースの作成(1)-
40
「ゲストスペースを作成」をクリックします
kintoneの準備 -本番環境スペースの作成(2)-
41
「はじめから作る」を選択します
kintoneの準備 -本番環境スペースの作成(3)-
42
スペース名に「本番環境(ゲストスペース)」と
入力し、他のチェックはステージング環境と同様に
して保存します
kintoneの準備 -本番環境スペースの作成(4)-
43
ステージング環境と本番環境(ゲストスペース)がポータル画面上に作成され
ました!
「本番環境」スペースの左上に紫色の帯がついていることを確認してください
②kintoneへのアプリ登録
44
kintoneアプリストアからの
アプリの作成
45
kintoneアプリストアとは
46
サイボウズさんがすでに用意されているアプリサンプル群です。
【アプリストアからアプリを作成するメリット】
 1から考えなくてもワンクリックでアプリを作成することが可能
 作成後に必要に応じてアプリを変更...
さっそくアプリを作成してみましょう
47
kintoneアプリ作成 -アプリストアからの作成(1) -
48
作成済みの「開発環境」スペースにアクセス
アプリ右横の+ボタンをクリック
kintoneアプリ作成 -アプリストアからの作成(2) -
49
「アプリストアから選ぶ」をクリックします
kintoneアプリ作成 -アプリストアからの作成(3) -
50
「広報・マーケーティング」内の「イベン
ト・フェアカレンダー」アプリを選択します
kintoneアプリ作成 -アプリストアからの作成(4) -
51
「このアプリを追加」ボタンをクリックして下さい
kintoneアプリ作成 -アプリストアからの作成(5) -
52
「追加」ボタンをクリックして下さい
kintoneアプリ作成 -アプリストアからの作成(6) -
53
「開発環境」スペースに「イベント・フェアカレンダー」
アプリが追加されました!
前置きが長かったですが・・・
54
いよいよ本題です!
55
③gusukuで環境をつくる
56
https://app.gusuku.io/
57
gusukuで環境をつくる -gusukuにログイン-
58
 Facebookもしくはgmailのアカウントをお持ちの方
 いずれかを選択してサインインすることでgusukuの利用
が可能
 お持ちでない方
 作成済みのアカウントでロ...
gusukuで環境をつくる -プロジェクトを作成する(1)-
59
チュートリアルの画面が表示されるので、その手順に沿って登録します
「プロジェクト追加へ」をクリックします
gusukuで環境をつくる -プロジェクトを作成する(2)-
60
新規プロジェクト追加の画面で、プロジェクト名を入力します
今回は「kintone devCamp 2016 Spring」として下さい
※特にルールはありませんが、実際の開発現...
gusukuで環境をつくる -環境を作成する(1)《開発環境》-
61
プロジェクト一覧画面に「kintone devCamp 2016 Spring」プロジェクト
が追加されました!
※(プロジェクトがすでにいくつか作成されている場合)同じポ...
gusukuで環境をつくる -環境を作成する(2)《開発環境》-
62
チュートリアルの画面が表示されるので
「環境作成へ」をクリックします
gusukuで環境をつくる -環境を作成する(3)《開発環境》-
63
gusukuの環境作成では、kintoneのアプリ情報との紐付けが必要となります
kintoneにログインし「開発環境」スペースにアクセスし、URLの情報を確
認しておきま...
gusukuで環境をつくる -環境を作成する(4)《開発環境》-
64
kintoneアプリのアプリID(appId)もこの時点で確認しておきます
さきほど作成した「イベント・フェアカレンダー」アプリをクリックしてURL
を確認します
 アプ...
gusukuで環境をつくる -環境を作成する(5)《開発環境》-
65
新規環境作成画面でそれぞれ下記のように設定し
「作成」をクリックします
 新規に作成する環境名:開発環境
(任意ですが、今回はkintoneのスペース名と合わせます)
...
gusukuで環境をつくる -環境の追加 《ステージング環境》-
66
開発環境同様に、新規環境作成画面からステージング環境を追
加します
 新規に作成する環境名:ステージング環境
 前の環境(指定の環境の後に追加されます):開発環境
 ...
gusukuで環境をつくる -環境の追加(1) 《本番環境》-
67
ステージング環境同様に、新規環境作成画面から本番環境を追
加します
 新規に作成する環境名:本番環境
 前の環境(指定の環境の後に追加されます):ステージン
グ環境
 ...
gusukuで環境をつくる -環境の追加(2) 《本番環境》-
68
「前の環境(指定の環境の後に追加されます)」の選択を
間違えると、環境作成後に変更ができませんのでご注意下
さい
※選択を間違えた場合は削除して再度作成しなおして下さい
Po...
gusukuで環境をつくる -環境の追加(3) 《本番環境》-
69
最終的に上記のような順番で環境が並びます!
環境が作成できたら、次はkintoneのアプリを登録してみましょう!
gusukuで環境をつくる -環境の中にkintoneアプリを追加(1)-
70
作成された環境の中の「開発環境」をクリックします
gusukuで環境をつくる -環境の中にkintoneアプリを追加(2)-
71
チュートリアルの画面が表示されるので
「アプリ追加ボタンをクリックしてください」をクリックします
gusukuで環境をつくる -環境の中にkintoneアプリを追加(3)-
72
「開発環境」配下にアプリを登録(=kintoneアプリをgusukuに紐付け)します
「アプリ追加」ボタンをクリックします
gusukuで環境をつくる -環境の中にkintoneアプリを追加(4)-
73
kintoneアプリを登録して「作成」をクリック
「環境を作成する(4)」でメモしたアプリIDを登録します
 kintoneアプリappId:メモしたアプリID...
gusukuで環境をつくる -環境の中にkintoneアプリを追加(5)-
74
kintone上の「イベント・フェアカレンダー」アプリがgusukuに登録されました!
※gusukuの環境配下へkintoneアプリを新規登録した時点では、バー...
Ⅳ. 登録したアプリのバージョンを
管理してみよう!
75
①kintoneアプリの変更作業
76
その前に!
77
アプリにインポートするデータを
確認してみましょう!
78
kintoneアプリの変更作業 -インポートするExcelデータの確認-
79
「花見スポット2016.xlsx」というExcelファイルを開きます
「No」「カテゴリ」は、「イベント・フェアカレンダー」アプリにもと
もと存在していない項目なの...
kintoneアプリの変更作業 -アプリにフィールドを追加(1)-
80
kintoneの「開発環境」スペースにある「イベント・フェアカレンダー」
アプリに変更を加えます
右上の「・・・」から「アプリの設定を変更」をクリックします
※変更を加え...
kintoneアプリの変更作業 -アプリにフィールドを追加(2)-
81
「フォームの編集」をクリックします
kintoneアプリの変更作業 -アプリにフィールドを追加(3)-
82
「数値」フィールドと文字列(1行)フィールドを設置します
kintoneアプリの変更作業 -アプリにフィールドを追加(4)-
83
「数値」フィールド
 フィールド名:No
 フィールドコード:no
文字列(1行)フィールド
 フィールド名:カテゴリ
 フィールドコード:category
上記...
kintoneアプリの変更作業 -アプリにフィールドを追加(5)-
84
「一覧の追加」の「設定済みの一覧」プルダウンから
「イベント一覧(リスト)」を選択して、先ほど追加した
フィールドを追加します
kintoneアプリの変更作業 -アプリにフィールドを追加(6)-
85
「No」フィールドと「カテゴリ」フィールドを一覧に追加します
kintoneアプリの変更作業 -アプリにフィールドを追加(7)-
86
上記のように一覧に設置し「保存」をクリックします
kintoneアプリの変更作業 -アプリにフィールドを追加(8)-
87
「設定完了」をクリックします
※「設定完了」をクリックしないとアプリの設定が
反映されませんのでご注意下さい
kintoneアプリの変更作業 -アプリにフィールドを追加(9)-
88
アプリの一覧画面に戻りますので、下向きのプルダ
ウンから「イベント一覧(リスト)を選択します
kintoneアプリの変更作業 -アプリにフィールドを追加(10)-
89
上記のように「No」「カテゴリ」「開催日」・・・の順に
並んでいることを確認して下さい
ここまでできたら・・・
90
②gusukuでのアプリ取り込み
91
gusukuでのアプリ取り込み -差分取り込み(1)-
92
「kintone devCamp 2016 Spring」プロジェクトの「開発環境」をクリックします
※gusukuで登録済みのkintoneアプリに対して何か操作を行う場合は、まず...
gusukuでのアプリ取り込み -差分取り込み(2)-
93
「イベント・フェアカレンダー」をクリックします
gusukuでのアプリ取り込み -差分取り込み(3)-
94
「イベント・フェアカレンダー」アプリ詳細画面にて「アプリ取り込み」をクリックします
※この時、現在のバージョンが初回取り込み時の「1」となっていることを確認して下さい
※gusuku...
gusukuでのアプリ取り込み -差分取り込み(4)-
95
「アプリの取り込み」画面で「yyyy/mm/dd (履歴に残したいメモ内容)」を入力し、
「保存して実行」をクリックします
※フリーフォーマットで書き方に決まりはありません
※ただト...
gusukuでのアプリ取り込み -差分取り込み(5)-
96
取り込みが完了すると、アプリのバージョンが「1」から「2」に上がります
左下に「バージョン2にバージョンアップしました」と表示され、画面のリロー
ドがかかります
※kintoneアプ...
gusukuでのアプリ取り込み -差分取り込み(6)-
97
アプリ取り込み時に入力したメモはアプリ詳細画面右上の
「ヒストリ」から確認が可能です
gusukuでのアプリ取り込み -差分取り込み(7)-
98
ヒストリ画面では下記項目の確認が可能です
 日時
 アプリ名
 作業ユーザー(ログインユーザー)
 詳細(現在のアプリのバージョン情報)
 アプリ取り込み時に入力したメモ内容
gusukuでのアプリ取り込み -差分確認-
99
バージョンが上がると、「指定バージョン間の差分」から過去のバージョン
との差分を確認できるようになります
差分確認時に古いバージョンと新しいバージョンのどちらを先に表示させる
かを選択すること...
Ⅴ. 登録したアプリを
異なる環境へ配布してみよう!
(異なるサブドメイン)
100
配布前の事前準備
101
kintoneアプリへの
データインポート作業
102
kintoneアプリへのデータインポート作業(1)
103
「花見スポット2016.xlsx」というExcelファイルをkintoneの「イベン
ト・フェアカレンダー」アプリにインポートします
kintoneアプリへのデータインポート作業(2)
104
kintone「開発環境」スペース「イベント・フェアカレンダー」アプリ画
面右上の「・・・」をクリック。 「ファイルから読み込む」をクリック
します
kintoneアプリへのデータインポート作業(3)
105
参照から「花見スポット2016.xlsx」を選択して下さい
kintoneアプリへのデータインポート作業(4)
106
アプリのフイールドと読み込むデータの列の対応付けが
上記のようにマッチしているか確認して下さい
※初回インポートなので、「一括更新のキー」のチェッ
クは不要です
kintoneアプリへのデータインポート作業(5)
107
プレビュー画面を確認したら「読み込む」をクリック
kintoneアプリへのデータインポート作業(6)
108
「インポートの結果は通知を確認してください・・・」で
「OK」をクリック
kintoneアプリへのデータインポート作業(7)
109
青い帯で「ファイルの読み込みが完了しました」と表示されていれば
正常にインポートが完了しています
kintoneアプリへのデータインポート作業(8)
110
アプリの一覧画面で下向きのプルダウンから「イベント一覧(リスト)」
を選択します
kintoneアプリへのデータインポート作業(9)
111
上記のように9件データが入っていればOKです
おまけのToDo
(※時間的に余裕がある人向け)
112
【ToDoおまけ】kintoneアプリへのデータインポート作業 -画像ファイル添付-
113
「イベント・フェアカレンダー」アプリの各レコード
を編集して、「現場写真」フィールドに桜の写真を添付し
て下さい。
※ファイル名は、各レコードの「No...
【ToDoおまけ】kintoneアプリへのデータインポート作業 -画像ファイル添付-
114
追加が完了したら、アプリ一覧画面の下向きのプルダウ
ンから「イベント一覧(現場写真)」を選択して下記の
ようにカレンダーに添付画像が表示されていること...
ここまでできたら・・・
115
①開発環境→ステージング環境への配布
116
開発環境→ステージング環境への配布(1)
117
gusukuの「kintone devCamp 2016 Spring」プロジェクトから
「開発環境」をクリックします
開発環境→ステージング環境への配布(2)
118
「開発環境」の「イベント・フェアカレンダー」をクリックします
開発環境→ステージング環境への配布(3)
119
最新の「バージョン2」を「ステージング環境」に配布します
「バージョン指定/他の環境への配布」で「バージョン2」を選
択し、配布先を「ステージング環境」に指定し「指定バージョ
ンの配布」をクリッ...
開発環境→ステージング環境への配布(4)
120
「指定バージョンアプリの配布」画面でメモを入力し「保存して実行」を
クリックします
※「アクセス権の配布を試みる」は今回は不要です
※アプリにアクセス権を設定している場合は、アクセス権の移行をす...
開発環境→ステージング環境への配布(5)
121
配布が完了すると「ステージング環境」で従来「未デプロイ」
となっていた箇所にアプリ情報が入りました!
ステージング環境にアプリがデプロイされたかを確認するため
に、appidをクリックします
開発環境→ステージング環境への配布(6)
122
ステージング環境のアプリ詳細画面の「kintoneアプリURL」のURL
をクリックすると・・・
開発環境→ステージング環境への配布(7)
123
kintoneの「ステージング環境」にリダイレクトします!
ここでアプリが正常に作成されていれば、図のようにア
プリの画面が表示されます!
では先ほど開発環境のアプリで入力したデータがどのよ
う...
開発環境→ステージング環境への配布(8)
124
「開発環境」でインポートしたデータは移行できていません
※gusukuではデータの移行までは行えません
※データは手動でインポートする必要があります
③ステージング環境→本番環境への配布
(※時間的に余裕がある人向け)
125
【ToDoおまけ】ステージング環境→本番環境への配布
126
gusukuの「本番環境」に「ステージング環境」の「イベント・フェアカレン
ダー」アプリを配布してみて下さい
「開発環境」「ステージング環境」「本番環境」はすべてgusukuの
「開...
【ToDoおまけ】gusukuからアプリを削除する
127
kintoneアプリをgusukuの管理から除外したい時!
プロジェクト名>「○○環境」の中のアプリ詳細画面の右上の×印で削除が
可能です
gusuku上で削除しても、kintone側...
Ⅵ. もっとkintoneが便利になる!
gusukuプラグインのご紹介
128
kintoneに組み込んで利用するプラグイン
1ファイル1GB以上の添付ファイルをアップロードすることが可能
1ファイル5GB程度のファイルをアップロードされているユーザーも
理論値でいうと5TBまでのファイルのアップロードが可能
た...
Ⅶ. gusukuプラグインを使ってみよう!
130
gusuku添付ファイル保存プラグインを
kintoneアプリに設定してみよう!
131
gusuku添付ファイル保存プラグイン -ダウンロード(1)-
132
gusukuのプロジェクト一覧の画面右上「ヘルプ」をクリックします
gusuku添付ファイル保存プラグイン -ダウンロード(2)-
133
gusukuのドキュメントページが開きますので「添付ファ
イル保存プラグイン」をクリックします
gusuku添付ファイル保存プラグイン -ダウンロード(3)-
134
画面中ほどの「kintoneへのプラグインのインストー
ル」に「こちらよりダウンロード」のリンクがあるので、
プラグインをここからダウンロードします
※ダウンロードしたプラ...
gusuku添付ファイル保存プラグイン -インストール(1)-
135
プラグインをkintoneにインストールしましょう!
まずは開発環境にインストールしたいと思うので、開発環境の
kintoneにログインした状態で、「kintoneシステム...
gusuku添付ファイル保存プラグイン -インストール(2)-
136
kintoneシステム管理画面の「その他」から
「プラグイン」を選択します
gusuku添付ファイル保存プラグイン -インストール(3)-
137
先ほどダウンロードしたプラグインを読み込みます
「読み込む」をクリックして、プラグインのzipファイル
を選択して下さい
gusuku添付ファイル保存プラグイン -インストール(4)-
138
プラグインがkintoneにインストールされました!
gusuku添付ファイル保存プラグイン -APIキー作成(1)-
139
プラグインをkintoneで利用するためにgusukuでAPIキーを発行
します
gusuku左メニューの「APIキー」をクリックし、わかりやすいよ
うに作成するAPIキ...
gusuku添付ファイル保存プラグイン -APIキー作成(2)-
140
APIキーが作成されたら「i」のアイコンをクリックしてAPIキー
(■の部分)を控えておきます
gusuku添付ファイル保存プラグイン -プラグイン有効化(1)-
141
いよいよプラグインを使います!
開発環境のkintone「イベント・フェアカレンダー」アプリの「ア
プリの設定画面」を開きます
gusuku添付ファイル保存プラグイン -プラグイン有効化(2)-
142
プラグインを利用するにあたり、フィールドの設置が必要となります
まずは「フォームの編集」から必要なフィールドを設置します
gusuku添付ファイル保存プラグイン -プラグイン有効化(3)-
143
まずは文字列(1行)フィールドを設置します
文字列フィールドにはフィールドコードを設定し
ます
 フィールドコード:attachmentFilenames
gusuku添付ファイル保存プラグイン -プラグイン有効化(4)-
144
次にスペースを設置します
スペースの要素IDを以下のように設定します
 要素ID:gusukuAttachment
設定できたら「保存」をクリックします
gusuku添付ファイル保存プラグイン -プラグイン有効化(5)-
145
フォームの編集が終わった後に、プラグインの設定を行います!
アプリの設定画面「詳細設定」のプルダウンから「プラグイ
ン」をクリックします
gusuku添付ファイル保存プラグイン -プラグイン有効化(6)-
146
「プラグインの追加」をクリックすると、先ほどkintoneにインス
トールしたgusuku添付ファイル保存プラグインが出てきます!
プラグイン名横のチェックを付けて「追...
gusuku添付ファイル保存プラグイン -プラグイン有効化(7)-
147
アプリにプラグインを追加することができました!
次にアプリでプラグインを利用するための設定を行います
gusuku添付ファイル保存プラグイン -プラグイン有効化(8)-
148
項目を下記のように設定します
 gusuku APIキー:先ほどgusukuで取得したAPIキー(■の部分)
 ファイル名保存フィールド:文字列(1行)フィールドに...
gusuku添付ファイル保存プラグイン -プラグイン有効化(9)-
149
プラグインの設定が完了しました!
「アプリの設定画面」から「設定完了」をクリックしないと反
映されないため、アプリの設定画面に戻ります
gusuku添付ファイル保存プラグイン -プラグイン有効化(10)-
150
最後に「設定完了」を押して完了です!
ファイルをアップロードしてみよう!
151
gusuku添付ファイル保存プラグイン -ファイルを添付する(1)-
152
No.1のレコードの詳細画面を開きます
gusuku添付ファイル保存プラグイン -ファイルを添付する(2)-
153
詳細画面から右上の編集ボタンをクリックします
gusuku添付ファイル保存プラグイン -ファイルを添付する(3)-
154
こちらがgusukuの添付ファイル保存プラグインを利用したファイル
の添付フィールドです!
※比較するためにkintoneの添付ファイルフィールドの横に設置して
います
gusuku添付ファイル保存プラグイン -ファイルを添付する(4)-
155
「devcamp2016 _spring」フォルダに入っている「1-gusuku.jpg」と
いうファイルをアップロードしてみましょう
gusuku添付ファイル保存プラグイン -ファイルを添付する(5)-
156
アップロードして保存したらサムネイル画像が表示されますので、
そのサムネイル画像をクリックします
gusuku添付ファイル保存プラグイン -ファイルを添付する(6)-
157
画像のプレビュー画面がブラウザで開きますので、アドレスバー
をチェックしてみて下さい!
URLがS3のアドレスになっていることが確認できます
つまりこの画像はS3上に...
今後もgusukuでは
便利な機能が追加される予定!
158
これを機に
是非gusukuを
使ってみて下さいね!
159
使ってみてお気づきの点や
フィードバックがあれば是非↓へ!
butler@gusuku.io
160
Upcoming SlideShare
Loading in …5
×

kintone devCamp 2016 Spring 『アプリ開発なんて怖くない!gusukuでお手軽kintoneアプリ管理+α♪』

2,794 views

Published on

2016年5月27日(金)に開催された kintone devCamp 2016 Spring の gusuku ハンズオン資料です。 #kintone #kintonedevcamp #r3gusuku

【gusuku(グスク)】
kintoneアプリケーションの利用・開発・運用を強力にサポートするプラットフォームです。
https://gusuku.io/

Published in: Technology
  • Be the first to comment

kintone devCamp 2016 Spring 『アプリ開発なんて怖くない!gusukuでお手軽kintoneアプリ管理+α♪』

  1. 1. kintone devCamp 2016 Spring 【C-4】 アプリ開発なんて怖くない! gusukuでお手軽kintoneアプリ管理+α 2016年5月27日 アールスリーインスティテュート いけがみ みどり
  2. 2. 自己紹介 池上 緑(いけがみ みどり) アールスリーインスティテュート クラウドエンジニア gusukuエバンジェリスト 業務に関すること  クラウド使ったソリューション・構築・お客様への要 件のヒアリングもやります!  展示会ではコスプレエンジニア  普段の姿もOLコスプレ  心はわりと低レイヤー思考  インフラエンジニアと思われ〼  実際インフラもやってる!  ネットワーク、サーバー、ストレージ、クラウドイ ンフラ、ミドルウェア好き #このへん語ります  世の中のエバンジェリストと言われるエバの中でお そらく最もエバっぽくない人種 p526CA p52_rocca 業務外のこと  コミュニティ運営したり登壇したり  競技イベント参加したり #インフラセキュリティ系 多め  最近女子会コミュニティの立ち上げやフォロー多め  JAWS-UG 関西女子会 運営コア  kintone Café 大阪/関西女子会 運営コア  kintone Café 沖縄女子会 立ち上げフォロー  このあたりに書いてあるので見てください! https://www.r3it.com/community/
  3. 3. 登壇する時の中の人(注:すべて同一人物です) 2
  4. 4. 弊社アールスリーのご紹介 3 www.r3it.com アールスリーインスティテュート (以下R3)は・・・ クラウドを駆使してお客様の課題解 決を行う大阪のシステム開発会社 ※東京支社もあります  ハイスピードSI(=kintoneや AWS等のクラウドサービスを活 用し、お客様が今必要なシステム を可能な限り早くご提供するサー ビス)の会社  インフラからアプリケーションま で幅広くサポート
  5. 5. 本日のアジェンダ 4 I. gusukuについての説明 II. 事前準備 ~gusukuを操作する前に~ III. gusukuを実際にさわってみよう! IV. 登録したアプリのバージョンを管理してみよう! V. 登録したアプリを異なる環境へ配布してみよう!(異なる サブドメイン) VI. もっとkintoneが便利になる!gusukuプラグインのご紹介 VII.gusukuプラグインを使ってみよう!
  6. 6. 本セミナー関連のハッシュタグ #kintone #kintonedevcamp #r3gusuku 5
  7. 7. Ⅰ. gusukuについての説明 6
  8. 8. gusukuとは? -機能(1) バージョン管理《基本機能》- 7 kintoneアプリケーション開発をサポートするプラットフォーム(SaaS) フリーアカウント(無料)であれば 10appid まで管理が可能 任意のkintoneのアプリを環境別に管理することが可能 ★ハンズオン ※開発環境 ~ ステージング環境(本番環境) ~ 本番環境(ゲストスペース) と段階的に管理が可能
  9. 9. システム開発における3つの環境 8 開発環境 • 開発作業のための環境 • 自身のPC端末等、ローカル環境の場合も • ユーザーやクライアントには見えない環境が多い ステージング 環境 • 開発環境で動作検証済みのシステムを、ユーザー/クライアントがテストを行うための環境 • 本番を想定した環境 • 本番と近い、あるいは同一の環境で構築する(場合によっては本環境がないケースも) 本番環境 • ユーザー/クライアントが実際に利用する環境 • ステージング環境でレビュー済みの機能が適用される環境 今回gusuku上で作成させて頂く環境も、上記3環境に準拠した形で進めていきます 実際にご活用頂く場合は、ご自身の開発現場に合わせた環境設定を行って下さいね
  10. 10. gusukuとは? -機能(2) プラグイン機能- 9 gusukuと連携して動作するkintoneプラグインを配布 添付ファイルプラグイン: ★ハンズオン 1ファイル1GB以上の添付ファイルのアップロードが可能 (kintone標準の場合)1ファイル1GB 理論上は5TBまでアップロードが可能 Excel帳票プラグイン: ★今回ハンズオンはなし 使い慣れたExcelを利用して帳票をデザインすることが可能 作成したExcel帳票テンプレートと印刷したいkintoneフィール ドを紐付けることで帳票の出力が可能
  11. 11. gusukuとは? -機能(3) バックアップ・リストア機能- 10 近日中に公開されるので サイトをチェックして下さい!
  12. 12. そもそもgusukuを作ろうと 思ったきっかけは? 11
  13. 13. gusukuを作ろうと思ったきっかけ(1) 12  本番運用中にkintoneアプリに修正を加えたい!  でも運用中のアプリに直接変更を加えるのってリスクがあるよね  本番運用してるし、ダウンタイム発生させたくないよね・・・  じゃあ開発用にアプリをコピーしてテストしなきゃね!  開発用のアプリでテストまでできたけど、本番運用中のアプリに適用しなきゃいけないよ ね・・・  ↑の作業って手間もかかるしミスも増えるよね めんどくさいし そんなサービス 作っちゃえばいいんじゃね?
  14. 14. gusukuを作ろうと思ったきっかけ(2) 13  実際にkintoneを使って開発してるわたしたちエンジニアのナマの声がそのまま反映される!  とにかく要望として上げれば、まずは検討してもらえる!  サービスとしてどんどん成長する!  (リリースしたからといって作って放置のサービスではない) kintoneで開発するアプリを守る城になりたい ↓ ↓ ↓ ↓ 『gusuku』が誕生しました!!!!
  15. 15. ハンズオン前の注意事項 14 1. 本ハンズオンではkintoneの環境を2つ使用します 2. kintoneのアカウントをひとつしかお持ちでない場合は、 「Ⅱ. 事前準備」>「②kintoneお試しアカウントの作成」 の手順に沿って、2つ取得しておいて下さい 3. 本ハンズオンでは、Administratorもしくは同等のユー ザーでの操作を前提としています 4. それ以外のユーザー、例えば既存kintone環境をお持ち で、その環境を利用して作業される方は、事前に挙手を お願いします
  16. 16. Ⅱ. 事前準備 ~gusukuを操作する前に~ 15
  17. 17. ①gusukuアカウントの作成 16
  18. 18. https://app.gusuku.io/ 17
  19. 19. gusukuアカウントの作成 18  Facebookもしくはgmailのアカウントをお持ちの方  いずれかを選択してサインインすることでgusukuの利用 が可能  お持ちでない方  アカウントを作成して下さい
  20. 20. ②kintoneお試しアカウントの作成 19
  21. 21. https://kintone.cybozu.com/jp/trial/ 20
  22. 22. メールを送信 21 ご利用のメールアドレスを入力して「メールを送信」をクリック!
  23. 23. 『登録用Eメールを送信しました』の画面が出たら・・・ 22
  24. 24. cybozu.com Storeからメールが届いていることを確認 23 メール本文にあるURLをクリックして下さい
  25. 25. 無料お試しアカウント登録画面で入力 24 必須項目を入力して「お試し開始」をクリック!
  26. 26. 無料お試しアカウント登録完了 25 おめでとうございます! あとは準備完了メールが届くのを待つだけです
  27. 27. メールが届いたらお試しアカウントでログイン確認 26 メールが届いたらkintoneにログインできることを確認して下さい ※こちらは30日間の無料トライアルのアカウントとなり、開発者 アカウントとは異なりますのでご注意下さいね!
  28. 28. Ⅲ. gusukuを実際にさわってみよう! 27
  29. 29. gusukuでアプリのバージョン管理をしてみよう 28 ②お試しアカウントで以下の環境を作成  ステージング環境  本番環境 ①開発者アカウントで 以下の環境を作成  開発環境
  30. 30. ①kintoneの準備 29
  31. 31. kintoneの準備 -kintone(開発環境用)へログイン- 30 お持ちのアカウント(開発者アカウント)でkintoneにログ インして下さい
  32. 32. kintoneの準備 -kintoneの画面を開く- 31 kintoneをクリックします
  33. 33. kintoneの準備 -開発環境スペースの作成(1)- 32 「スペースを作成」をクリックします
  34. 34. kintoneの準備 -開発環境スペースの作成(2)- 33 「はじめから作る」を選択します
  35. 35. kintoneの準備 -開発環境スペースの作成(3)- 34 スペース名に「開発環境」と入力 「参加メンバーだけにこのスペースを公開する」「スペースのポー タルと複数のスレッドを使用する」にチェックが入った状態で保存し ます
  36. 36. kintoneの準備 -開発環境スペースの作成(4)- 35 「開発環境」スペースがkintoneのポータル上に作成されました!
  37. 37. kintoneの準備 -kintone(本番環境用)へログイン- 36 お持ちのアカウント(お試しアカウント)でkintoneにログ インして下さい ※先ほど作成した開発環境とは異なるkintoneアカウントに ログインすることに注意して下さい!
  38. 38. kintoneの準備 -ステージング環境スペースの作成(1)- 37 「スペースを作成」をクリックします
  39. 39. kintoneの準備 -ステージング環境スペースの作成(2)- 38 「はじめから作る」を選択します
  40. 40. kintoneの準備 -ステージング環境スペースの作成(3)- 39 スペース名に「ステージング環境」と入力 「参加メンバーだけにこのスペースを公開する」「スペースのポー タルと複数のスレッドを使用する」にチェックが入った状態で保存し ます
  41. 41. kintoneの準備 -本番環境スペースの作成(1)- 40 「ゲストスペースを作成」をクリックします
  42. 42. kintoneの準備 -本番環境スペースの作成(2)- 41 「はじめから作る」を選択します
  43. 43. kintoneの準備 -本番環境スペースの作成(3)- 42 スペース名に「本番環境(ゲストスペース)」と 入力し、他のチェックはステージング環境と同様に して保存します
  44. 44. kintoneの準備 -本番環境スペースの作成(4)- 43 ステージング環境と本番環境(ゲストスペース)がポータル画面上に作成され ました! 「本番環境」スペースの左上に紫色の帯がついていることを確認してください
  45. 45. ②kintoneへのアプリ登録 44
  46. 46. kintoneアプリストアからの アプリの作成 45
  47. 47. kintoneアプリストアとは 46 サイボウズさんがすでに用意されているアプリサンプル群です。 【アプリストアからアプリを作成するメリット】  1から考えなくてもワンクリックでアプリを作成することが可能  作成後に必要に応じてアプリを変更したり、複数のアプリを組み合わせての 利用もOK
  48. 48. さっそくアプリを作成してみましょう 47
  49. 49. kintoneアプリ作成 -アプリストアからの作成(1) - 48 作成済みの「開発環境」スペースにアクセス アプリ右横の+ボタンをクリック
  50. 50. kintoneアプリ作成 -アプリストアからの作成(2) - 49 「アプリストアから選ぶ」をクリックします
  51. 51. kintoneアプリ作成 -アプリストアからの作成(3) - 50 「広報・マーケーティング」内の「イベン ト・フェアカレンダー」アプリを選択します
  52. 52. kintoneアプリ作成 -アプリストアからの作成(4) - 51 「このアプリを追加」ボタンをクリックして下さい
  53. 53. kintoneアプリ作成 -アプリストアからの作成(5) - 52 「追加」ボタンをクリックして下さい
  54. 54. kintoneアプリ作成 -アプリストアからの作成(6) - 53 「開発環境」スペースに「イベント・フェアカレンダー」 アプリが追加されました!
  55. 55. 前置きが長かったですが・・・ 54
  56. 56. いよいよ本題です! 55
  57. 57. ③gusukuで環境をつくる 56
  58. 58. https://app.gusuku.io/ 57
  59. 59. gusukuで環境をつくる -gusukuにログイン- 58  Facebookもしくはgmailのアカウントをお持ちの方  いずれかを選択してサインインすることでgusukuの利用 が可能  お持ちでない方  作成済みのアカウントでログインします
  60. 60. gusukuで環境をつくる -プロジェクトを作成する(1)- 59 チュートリアルの画面が表示されるので、その手順に沿って登録します 「プロジェクト追加へ」をクリックします
  61. 61. gusukuで環境をつくる -プロジェクトを作成する(2)- 60 新規プロジェクト追加の画面で、プロジェクト名を入力します 今回は「kintone devCamp 2016 Spring」として下さい ※特にルールはありませんが、実際の開発現場で利用することを想定す ると、「案件名」「プロジェクト名」を登録するのが一般的です 入力が終わったら「作成」をクリックします
  62. 62. gusukuで環境をつくる -環境を作成する(1)《開発環境》- 61 プロジェクト一覧画面に「kintone devCamp 2016 Spring」プロジェクト が追加されました! ※(プロジェクトがすでにいくつか作成されている場合)同じポータル上に 上記のように複数プロジェクトが並びます 次はこのプロジェクト名をクリックします
  63. 63. gusukuで環境をつくる -環境を作成する(2)《開発環境》- 62 チュートリアルの画面が表示されるので 「環境作成へ」をクリックします
  64. 64. gusukuで環境をつくる -環境を作成する(3)《開発環境》- 63 gusukuの環境作成では、kintoneのアプリ情報との紐付けが必要となります kintoneにログインし「開発環境」スペースにアクセスし、URLの情報を確 認しておきます  サブドメイン情報(■印の部分)  スペース情報(URLの「#/space/★」の★部分。この画面上では「3」)  スレッド情報(URLの「/thread/☆」の☆部分。この画面上では「3」)
  65. 65. gusukuで環境をつくる -環境を作成する(4)《開発環境》- 64 kintoneアプリのアプリID(appId)もこの時点で確認しておきます さきほど作成した「イベント・フェアカレンダー」アプリをクリックしてURL を確認します  アプリID(この画面上では「32」が該当します)
  66. 66. gusukuで環境をつくる -環境を作成する(5)《開発環境》- 65 新規環境作成画面でそれぞれ下記のように設定し 「作成」をクリックします  新規に作成する環境名:開発環境 (任意ですが、今回はkintoneのスペース名と合わせます)  kintoneアプリサブドメインとドメイン  サブドメイン:先ほどメモした■印の部分を入力  ドメイン:「cybozu.com」で変更なし  スペース種別設定:「スペース」を選択して「スペース 情報」の数字を入力  スレッドID指定:先ほどメモした「スレッド情報」の数字 を入力  kintoneユーザ名: Administratorもしくは Administratorに相当するアカウント  kintoneパスワード:該当するパスワード
  67. 67. gusukuで環境をつくる -環境の追加 《ステージング環境》- 66 開発環境同様に、新規環境作成画面からステージング環境を追 加します  新規に作成する環境名:ステージング環境  前の環境(指定の環境の後に追加されます):開発環境  kintoneアプリサブドメインとドメイン:開発環境で入力し たサブドメインとは異なります kintoneの「ステージング環境」のURLの情報を確認して gusukuに設定して下さい  スペース種別設定 / スレッドID指定  kintoneユーザ名 / kintoneパスワード
  68. 68. gusukuで環境をつくる -環境の追加(1) 《本番環境》- 67 ステージング環境同様に、新規環境作成画面から本番環境を追 加します  新規に作成する環境名:本番環境  前の環境(指定の環境の後に追加されます):ステージン グ環境  kintoneアプリサブドメインとドメイン:ステージング環境 と同一 kintoneの「本番環境(ゲストスペース)」のURLの情報を 確認してgusukuに設定して下さい  スペース種別設定 / スレッドID指定  kintoneユーザ名 / kintoneパスワード
  69. 69. gusukuで環境をつくる -環境の追加(2) 《本番環境》- 68 「前の環境(指定の環境の後に追加されます)」の選択を 間違えると、環境作成後に変更ができませんのでご注意下 さい ※選択を間違えた場合は削除して再度作成しなおして下さい Point
  70. 70. gusukuで環境をつくる -環境の追加(3) 《本番環境》- 69 最終的に上記のような順番で環境が並びます! 環境が作成できたら、次はkintoneのアプリを登録してみましょう!
  71. 71. gusukuで環境をつくる -環境の中にkintoneアプリを追加(1)- 70 作成された環境の中の「開発環境」をクリックします
  72. 72. gusukuで環境をつくる -環境の中にkintoneアプリを追加(2)- 71 チュートリアルの画面が表示されるので 「アプリ追加ボタンをクリックしてください」をクリックします
  73. 73. gusukuで環境をつくる -環境の中にkintoneアプリを追加(3)- 72 「開発環境」配下にアプリを登録(=kintoneアプリをgusukuに紐付け)します 「アプリ追加」ボタンをクリックします
  74. 74. gusukuで環境をつくる -環境の中にkintoneアプリを追加(4)- 73 kintoneアプリを登録して「作成」をクリック 「環境を作成する(4)」でメモしたアプリIDを登録します  kintoneアプリappId:メモしたアプリID ※「詳細設定」のチェックは、初回アプリ登録時には不要です
  75. 75. gusukuで環境をつくる -環境の中にkintoneアプリを追加(5)- 74 kintone上の「イベント・フェアカレンダー」アプリがgusukuに登録されました! ※gusukuの環境配下へkintoneアプリを新規登録した時点では、バージョンは 「1」となります ※gusukuにアプリを登録した時点から、kintoneアプリのバージョン管理が行われ ます
  76. 76. Ⅳ. 登録したアプリのバージョンを 管理してみよう! 75
  77. 77. ①kintoneアプリの変更作業 76
  78. 78. その前に! 77
  79. 79. アプリにインポートするデータを 確認してみましょう! 78
  80. 80. kintoneアプリの変更作業 -インポートするExcelデータの確認- 79 「花見スポット2016.xlsx」というExcelファイルを開きます 「No」「カテゴリ」は、「イベント・フェアカレンダー」アプリにもと もと存在していない項目なので、この項目をアプリに追加します
  81. 81. kintoneアプリの変更作業 -アプリにフィールドを追加(1)- 80 kintoneの「開発環境」スペースにある「イベント・フェアカレンダー」 アプリに変更を加えます 右上の「・・・」から「アプリの設定を変更」をクリックします ※変更を加えることで、gusuku登録された時点のバージョンとの差異が 発生します
  82. 82. kintoneアプリの変更作業 -アプリにフィールドを追加(2)- 81 「フォームの編集」をクリックします
  83. 83. kintoneアプリの変更作業 -アプリにフィールドを追加(3)- 82 「数値」フィールドと文字列(1行)フィールドを設置します
  84. 84. kintoneアプリの変更作業 -アプリにフィールドを追加(4)- 83 「数値」フィールド  フィールド名:No  フィールドコード:no 文字列(1行)フィールド  フィールド名:カテゴリ  フィールドコード:category 上記のように設定して「保存」をクリックします
  85. 85. kintoneアプリの変更作業 -アプリにフィールドを追加(5)- 84 「一覧の追加」の「設定済みの一覧」プルダウンから 「イベント一覧(リスト)」を選択して、先ほど追加した フィールドを追加します
  86. 86. kintoneアプリの変更作業 -アプリにフィールドを追加(6)- 85 「No」フィールドと「カテゴリ」フィールドを一覧に追加します
  87. 87. kintoneアプリの変更作業 -アプリにフィールドを追加(7)- 86 上記のように一覧に設置し「保存」をクリックします
  88. 88. kintoneアプリの変更作業 -アプリにフィールドを追加(8)- 87 「設定完了」をクリックします ※「設定完了」をクリックしないとアプリの設定が 反映されませんのでご注意下さい
  89. 89. kintoneアプリの変更作業 -アプリにフィールドを追加(9)- 88 アプリの一覧画面に戻りますので、下向きのプルダ ウンから「イベント一覧(リスト)を選択します
  90. 90. kintoneアプリの変更作業 -アプリにフィールドを追加(10)- 89 上記のように「No」「カテゴリ」「開催日」・・・の順に 並んでいることを確認して下さい
  91. 91. ここまでできたら・・・ 90
  92. 92. ②gusukuでのアプリ取り込み 91
  93. 93. gusukuでのアプリ取り込み -差分取り込み(1)- 92 「kintone devCamp 2016 Spring」プロジェクトの「開発環境」をクリックします ※gusukuで登録済みのkintoneアプリに対して何か操作を行う場合は、まず「環 境」に入る操作が基本となります
  94. 94. gusukuでのアプリ取り込み -差分取り込み(2)- 93 「イベント・フェアカレンダー」をクリックします
  95. 95. gusukuでのアプリ取り込み -差分取り込み(3)- 94 「イベント・フェアカレンダー」アプリ詳細画面にて「アプリ取り込み」をクリックします ※この時、現在のバージョンが初回取り込み時の「1」となっていることを確認して下さい ※gusukuは、一度登録されたkintoneアプリと自動で同期は取りません ※「アプリ取り込み」をクリックした段階で、kintoneアプリの変更の可否(差分)がチェックさ れます
  96. 96. gusukuでのアプリ取り込み -差分取り込み(4)- 95 「アプリの取り込み」画面で「yyyy/mm/dd (履歴に残したいメモ内容)」を入力し、 「保存して実行」をクリックします ※フリーフォーマットで書き方に決まりはありません ※ただトラブルシュート時に有用な場合があるので、どのような変更を加えたのか、変 更履歴を書くことをオススメします(Gitのコミットメッセージみたいなイメージ)
  97. 97. gusukuでのアプリ取り込み -差分取り込み(5)- 96 取り込みが完了すると、アプリのバージョンが「1」から「2」に上がります 左下に「バージョン2にバージョンアップしました」と表示され、画面のリロー ドがかかります ※kintoneアプリ側で変更が加えられていなかった場合でも、「アプリ取り込 み」を実行すればgusukuでのバージョンは上がります
  98. 98. gusukuでのアプリ取り込み -差分取り込み(6)- 97 アプリ取り込み時に入力したメモはアプリ詳細画面右上の 「ヒストリ」から確認が可能です
  99. 99. gusukuでのアプリ取り込み -差分取り込み(7)- 98 ヒストリ画面では下記項目の確認が可能です  日時  アプリ名  作業ユーザー(ログインユーザー)  詳細(現在のアプリのバージョン情報)  アプリ取り込み時に入力したメモ内容
  100. 100. gusukuでのアプリ取り込み -差分確認- 99 バージョンが上がると、「指定バージョン間の差分」から過去のバージョン との差分を確認できるようになります 差分確認時に古いバージョンと新しいバージョンのどちらを先に表示させる かを選択することが可能です (一般的にdiffを取る場合、左が古いバージョン、右が新しいバージョンの ビジュアルが多いと思います) ※画面では、さきほど追加した「No」フィールドと「カテゴリ」フィールド が差分として表示されています
  101. 101. Ⅴ. 登録したアプリを 異なる環境へ配布してみよう! (異なるサブドメイン) 100
  102. 102. 配布前の事前準備 101
  103. 103. kintoneアプリへの データインポート作業 102
  104. 104. kintoneアプリへのデータインポート作業(1) 103 「花見スポット2016.xlsx」というExcelファイルをkintoneの「イベン ト・フェアカレンダー」アプリにインポートします
  105. 105. kintoneアプリへのデータインポート作業(2) 104 kintone「開発環境」スペース「イベント・フェアカレンダー」アプリ画 面右上の「・・・」をクリック。 「ファイルから読み込む」をクリック します
  106. 106. kintoneアプリへのデータインポート作業(3) 105 参照から「花見スポット2016.xlsx」を選択して下さい
  107. 107. kintoneアプリへのデータインポート作業(4) 106 アプリのフイールドと読み込むデータの列の対応付けが 上記のようにマッチしているか確認して下さい ※初回インポートなので、「一括更新のキー」のチェッ クは不要です
  108. 108. kintoneアプリへのデータインポート作業(5) 107 プレビュー画面を確認したら「読み込む」をクリック
  109. 109. kintoneアプリへのデータインポート作業(6) 108 「インポートの結果は通知を確認してください・・・」で 「OK」をクリック
  110. 110. kintoneアプリへのデータインポート作業(7) 109 青い帯で「ファイルの読み込みが完了しました」と表示されていれば 正常にインポートが完了しています
  111. 111. kintoneアプリへのデータインポート作業(8) 110 アプリの一覧画面で下向きのプルダウンから「イベント一覧(リスト)」 を選択します
  112. 112. kintoneアプリへのデータインポート作業(9) 111 上記のように9件データが入っていればOKです
  113. 113. おまけのToDo (※時間的に余裕がある人向け) 112
  114. 114. 【ToDoおまけ】kintoneアプリへのデータインポート作業 -画像ファイル添付- 113 「イベント・フェアカレンダー」アプリの各レコード を編集して、「現場写真」フィールドに桜の写真を添付し て下さい。 ※ファイル名は、各レコードの「No」と一致したものを 選択して下さい
  115. 115. 【ToDoおまけ】kintoneアプリへのデータインポート作業 -画像ファイル添付- 114 追加が完了したら、アプリ一覧画面の下向きのプルダウ ンから「イベント一覧(現場写真)」を選択して下記の ようにカレンダーに添付画像が表示されていることを確 認して下さい
  116. 116. ここまでできたら・・・ 115
  117. 117. ①開発環境→ステージング環境への配布 116
  118. 118. 開発環境→ステージング環境への配布(1) 117 gusukuの「kintone devCamp 2016 Spring」プロジェクトから 「開発環境」をクリックします
  119. 119. 開発環境→ステージング環境への配布(2) 118 「開発環境」の「イベント・フェアカレンダー」をクリックします
  120. 120. 開発環境→ステージング環境への配布(3) 119 最新の「バージョン2」を「ステージング環境」に配布します 「バージョン指定/他の環境への配布」で「バージョン2」を選 択し、配布先を「ステージング環境」に指定し「指定バージョ ンの配布」をクリックします ※「即時運用開始する」のチェックを入れるのを忘れないように してください
  121. 121. 開発環境→ステージング環境への配布(4) 120 「指定バージョンアプリの配布」画面でメモを入力し「保存して実行」を クリックします ※「アクセス権の配布を試みる」は今回は不要です ※アプリにアクセス権を設定している場合は、アクセス権の移行をするた めにチェックが必要となります
  122. 122. 開発環境→ステージング環境への配布(5) 121 配布が完了すると「ステージング環境」で従来「未デプロイ」 となっていた箇所にアプリ情報が入りました! ステージング環境にアプリがデプロイされたかを確認するため に、appidをクリックします
  123. 123. 開発環境→ステージング環境への配布(6) 122 ステージング環境のアプリ詳細画面の「kintoneアプリURL」のURL をクリックすると・・・
  124. 124. 開発環境→ステージング環境への配布(7) 123 kintoneの「ステージング環境」にリダイレクトします! ここでアプリが正常に作成されていれば、図のようにア プリの画面が表示されます! では先ほど開発環境のアプリで入力したデータがどのよ うになっているか見てみましょう! 「イベント一覧(リスト)」をクリックします
  125. 125. 開発環境→ステージング環境への配布(8) 124 「開発環境」でインポートしたデータは移行できていません ※gusukuではデータの移行までは行えません ※データは手動でインポートする必要があります
  126. 126. ③ステージング環境→本番環境への配布 (※時間的に余裕がある人向け) 125
  127. 127. 【ToDoおまけ】ステージング環境→本番環境への配布 126 gusukuの「本番環境」に「ステージング環境」の「イベント・フェアカレン ダー」アプリを配布してみて下さい 「開発環境」「ステージング環境」「本番環境」はすべてgusukuの 「開発環境」の最新バージョンのアプリの状態に合わせてください ※最終的に、下記の【最終完成図】のようになればOKです 【最終完成図】
  128. 128. 【ToDoおまけ】gusukuからアプリを削除する 127 kintoneアプリをgusukuの管理から除外したい時! プロジェクト名>「○○環境」の中のアプリ詳細画面の右上の×印で削除が 可能です gusuku上で削除しても、kintone側にはアプリは残ります ※gusukuの「削除」=gusukuにおけるkintoneアプリの管理を解除する
  129. 129. Ⅵ. もっとkintoneが便利になる! gusukuプラグインのご紹介 128
  130. 130. kintoneに組み込んで利用するプラグイン 1ファイル1GB以上の添付ファイルをアップロードすることが可能 1ファイル5GB程度のファイルをアップロードされているユーザーも 理論値でいうと5TBまでのファイルのアップロードが可能 ただしインターネット経由であることを加味すると、実際5TBとかの容量の ファイルをアップロードするのは事実上困難かも。 gusukuのプランでファイルサイズの制限はあるので、gusukuをフリープラ ンで利用する場合は1GBの制限 添付ファイルはkintone側でなくgusuku上に保存(バックエンドはS3) kintoneの容量を消費しなくていいのでコスト節約でオトク! gusukuプラグイン -添付ファイル保存プラグイン- 129
  131. 131. Ⅶ. gusukuプラグインを使ってみよう! 130
  132. 132. gusuku添付ファイル保存プラグインを kintoneアプリに設定してみよう! 131
  133. 133. gusuku添付ファイル保存プラグイン -ダウンロード(1)- 132 gusukuのプロジェクト一覧の画面右上「ヘルプ」をクリックします
  134. 134. gusuku添付ファイル保存プラグイン -ダウンロード(2)- 133 gusukuのドキュメントページが開きますので「添付ファ イル保存プラグイン」をクリックします
  135. 135. gusuku添付ファイル保存プラグイン -ダウンロード(3)- 134 画面中ほどの「kintoneへのプラグインのインストー ル」に「こちらよりダウンロード」のリンクがあるので、 プラグインをここからダウンロードします ※ダウンロードしたプラグインは解凍しないで下さい!
  136. 136. gusuku添付ファイル保存プラグイン -インストール(1)- 135 プラグインをkintoneにインストールしましょう! まずは開発環境にインストールしたいと思うので、開発環境の kintoneにログインした状態で、「kintoneシステム管理」を開き ます
  137. 137. gusuku添付ファイル保存プラグイン -インストール(2)- 136 kintoneシステム管理画面の「その他」から 「プラグイン」を選択します
  138. 138. gusuku添付ファイル保存プラグイン -インストール(3)- 137 先ほどダウンロードしたプラグインを読み込みます 「読み込む」をクリックして、プラグインのzipファイル を選択して下さい
  139. 139. gusuku添付ファイル保存プラグイン -インストール(4)- 138 プラグインがkintoneにインストールされました!
  140. 140. gusuku添付ファイル保存プラグイン -APIキー作成(1)- 139 プラグインをkintoneで利用するためにgusukuでAPIキーを発行 します gusuku左メニューの「APIキー」をクリックし、わかりやすいよ うに作成するAPIキーに名前をつけます 今回は「添付ファイルプラグイン用」とします
  141. 141. gusuku添付ファイル保存プラグイン -APIキー作成(2)- 140 APIキーが作成されたら「i」のアイコンをクリックしてAPIキー (■の部分)を控えておきます
  142. 142. gusuku添付ファイル保存プラグイン -プラグイン有効化(1)- 141 いよいよプラグインを使います! 開発環境のkintone「イベント・フェアカレンダー」アプリの「ア プリの設定画面」を開きます
  143. 143. gusuku添付ファイル保存プラグイン -プラグイン有効化(2)- 142 プラグインを利用するにあたり、フィールドの設置が必要となります まずは「フォームの編集」から必要なフィールドを設置します
  144. 144. gusuku添付ファイル保存プラグイン -プラグイン有効化(3)- 143 まずは文字列(1行)フィールドを設置します 文字列フィールドにはフィールドコードを設定し ます  フィールドコード:attachmentFilenames
  145. 145. gusuku添付ファイル保存プラグイン -プラグイン有効化(4)- 144 次にスペースを設置します スペースの要素IDを以下のように設定します  要素ID:gusukuAttachment 設定できたら「保存」をクリックします
  146. 146. gusuku添付ファイル保存プラグイン -プラグイン有効化(5)- 145 フォームの編集が終わった後に、プラグインの設定を行います! アプリの設定画面「詳細設定」のプルダウンから「プラグイ ン」をクリックします
  147. 147. gusuku添付ファイル保存プラグイン -プラグイン有効化(6)- 146 「プラグインの追加」をクリックすると、先ほどkintoneにインス トールしたgusuku添付ファイル保存プラグインが出てきます! プラグイン名横のチェックを付けて「追加」をクリックします
  148. 148. gusuku添付ファイル保存プラグイン -プラグイン有効化(7)- 147 アプリにプラグインを追加することができました! 次にアプリでプラグインを利用するための設定を行います
  149. 149. gusuku添付ファイル保存プラグイン -プラグイン有効化(8)- 148 項目を下記のように設定します  gusuku APIキー:先ほどgusukuで取得したAPIキー(■の部分)  ファイル名保存フィールド:文字列(1行)フィールドに設定したフィールドコード  ファイルアップロードスペース:スペースに設定した要素ID  ラベル:「現場写真(gusuku利用)」 ※アプリの画面に表示される名前です
  150. 150. gusuku添付ファイル保存プラグイン -プラグイン有効化(9)- 149 プラグインの設定が完了しました! 「アプリの設定画面」から「設定完了」をクリックしないと反 映されないため、アプリの設定画面に戻ります
  151. 151. gusuku添付ファイル保存プラグイン -プラグイン有効化(10)- 150 最後に「設定完了」を押して完了です!
  152. 152. ファイルをアップロードしてみよう! 151
  153. 153. gusuku添付ファイル保存プラグイン -ファイルを添付する(1)- 152 No.1のレコードの詳細画面を開きます
  154. 154. gusuku添付ファイル保存プラグイン -ファイルを添付する(2)- 153 詳細画面から右上の編集ボタンをクリックします
  155. 155. gusuku添付ファイル保存プラグイン -ファイルを添付する(3)- 154 こちらがgusukuの添付ファイル保存プラグインを利用したファイル の添付フィールドです! ※比較するためにkintoneの添付ファイルフィールドの横に設置して います
  156. 156. gusuku添付ファイル保存プラグイン -ファイルを添付する(4)- 155 「devcamp2016 _spring」フォルダに入っている「1-gusuku.jpg」と いうファイルをアップロードしてみましょう
  157. 157. gusuku添付ファイル保存プラグイン -ファイルを添付する(5)- 156 アップロードして保存したらサムネイル画像が表示されますので、 そのサムネイル画像をクリックします
  158. 158. gusuku添付ファイル保存プラグイン -ファイルを添付する(6)- 157 画像のプレビュー画面がブラウザで開きますので、アドレスバー をチェックしてみて下さい! URLがS3のアドレスになっていることが確認できます つまりこの画像はS3上に配置されていることがわかります Point
  159. 159. 今後もgusukuでは 便利な機能が追加される予定! 158
  160. 160. これを機に 是非gusukuを 使ってみて下さいね! 159
  161. 161. 使ってみてお気づきの点や フィードバックがあれば是非↓へ! butler@gusuku.io 160

×