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