【19-F-2】 #devsumiF #r3gusuku

kintoneアプリのバージョン管理はgusukuにおまかせ！

2016年2月19日

アールスリーインスティテュート

いけがみ みどり

池上 緑（いけがみみどり）

アールスリーインスティテュート

よく間違われますが正真正銘のエンジニア

肩書きは（一応）クラウドエンジニア

業務はkintoneメイン？いやむしろコスプレエンジニア（普段の姿がむしろOLコスプレ）

見るたびに髪型変わってたりウィッグかぶってたりコスプレしてたりするため、中の人が認識されないレベル

心はわりと低レイヤー思考なので「え、インフラエンジニアですよね？」とよく言われ〼

ネットワーク、サーバー、ストレージ、クラウドインフラ、ミドルウェア好き #このへんしゃべれるので誰か呼んでください！（ぇ

最近ギークな動きが出来ていないので若干不完全燃焼気味

コミュニティ運営したり勉強会参加したり。 ＃kintone Café関西女子会も立ち上げました！

このあたりに書いてあるので見てね！

https://www.r3it.com/community/

最近はどりぃって呼んでくれる人も増えてるので

初めての方は どりぃ（＾ω＾）で覚えてください！(๑・౩・๑）

@p52_rocca

p526CA

自己紹介（2016年版）

本日のアジェンダ

2

I. gusukuについての説明

II. 事前準備 ～gusukuを操作する前に～

III. gusukuを実際にさわってみよう！

IV. 登録したアプリのバージョンを管理してみよう！

V. 登録したアプリを異なる環境へ配布してみよう！（同一サブドメイン）

VI. 登録したアプリを異なる環境へ配布してみよう！（別サブドメイン）

gusuku関連のハッシュタグ#r3gusuku

3

kintoneハンズオンセッション#devsumiF #kintone

4

Ⅰ. gusukuについての説明

5

gusukuとは？

6

kintoneアプリケーション開発をサポートするプラットフォーム（SaaS）

フリーアカウント（無料）であれば 10appid まで管理が可能

任意のkintoneのアプリを環境別に管理することが可能（★ハンズオンでやります）

※開発環境～本番環境（ステージング環境）～本番環境と段階的に管理が可能

gusukuを作ろうと思ったきっかけ（１）

7

本番運用中にkintoneアプリに修正を加えたい！

でも運用中のアプリに直接変更を加えるのってリスクがあるよね

本番運用してるし、ダウンタイム発生させたくないよね・・・

じゃあ開発用にアプリをコピーしてテストしなきゃね！

開発用のアプリでテストまでできたけど、本番運用中のアプリに適用しなきゃいけないよね・・・

↑の作業って手間もかかるしミスも増えるよね

めんどくさいしそんなサービス

作っちゃえばいいんじゃね？

gusukuを作ろうと思ったきっかけ（２）

8

実際にkintoneを使って開発してるわたしたちエンジニアのナマの声がそのまま反映される！

とにかく要望として上げれば、まずは検討してもらえる！

サービスとしてどんどん成長する！

（リリースしたから作って作りっぱなしのサービスではない）

kintoneで開発するアプリを守る城になりたい↓ ↓ ↓ ↓

『gusuku』が誕生しました！！！！

Ⅱ. 事前準備～gusukuを操作する前に～

9

①gusukuアカウントの作成

10

https://app.gusuku.io/

11

gusukuアカウントの作成

12

Facebookもしくはgmailのアカウントをお持ちの方 いずれかを選択してサインインすることでgusukuの利用が可能

お持ちでない方 アカウントを作成して下さい

②kintoneお試しアカウントの作成

13

https://kintone.cybozu.com/jp/trial/

14

メールを送信

15

ご利用のメールアドレスを入力して「メールを送信」をクリック！

『登録用Eメールを送信しました』の画面が出たら・・・

16

cybozu.com Storeからメールが届いていることを確認

17

メール本文にあるURLをクリックして下さい

無料お試しアカウント登録画面で入力

18

必須項目を入力して「お試し開始」をクリック！

無料お試しアカウント登録完了

19

おめでとうございます！あとは準備完了メールが届くのを待つだけです

メールが届いたらお試しアカウントでログイン確認

20

メールが届いたらkintoneにログインできることを確認して下さい※こちらは30日間の無料トライアルのアカウントとなり、開発者アカウントとは異なりますのでご注意下さいね！

kintone開発者アカウントを事前にとってない人？

21

事前にとっていない人は・・・異なるメールアドレスでお試しアカウントをもうひとつ取得しておいて下さい

22

Ⅲ. gusukuを実際にさわってみよう！

23

①kintoneの準備

24

kintoneの準備 -kintoneへログイン-

25

kintone開発者アカウントでkintoneにログインして下さい※もし、開発者アカウントをお持ちでない場合は、2つ取得されているうちのお試しアカウントのうちのひとつにログインして下さい

kintoneの準備 -kintoneの画面を開く-

26

kintoneをクリックします

kintoneの準備 -開発環境スペースの作成（１）-

27

「スペースを作成」をクリックします

kintoneの準備 -開発環境スペースの作成（２）-

28

「はじめから作る」を選択します

kintoneの準備 -開発環境スペースの作成（３）-

29

スペース名に「開発環境」と入力「参加メンバーだけにこのスペースを公開する」にのみチェックが入った状態で保存します同様の方法で「ステージング環境」のスペースも作成して下さい

kintoneの準備 -本番環境スペースの作成（１）-

30

「ゲストスペースを作成」をクリックします

kintoneの準備 -本番環境スペースの作成（２）-

31

「はじめから作る」を選択します

kintoneの準備 -本番環境スペースの作成（３）-

32

スペース名に「本番環境（ゲストスペース）」と入力「参加メンバーだけにこのスペースを公開する」にのみチェックが入った状態で保存します

kintoneの準備 -本番環境スペースの作成（４）-

33

最終的に上記のようにスペースが3つある状態にして下さい 開発環境 ステージング環境 本番環境（ゲストスペース）

②kintoneへのアプリ登録

34

http://bit.ly/20ywnSS

35

kintoneへのアプリ登録 -テンプレートのダウンロード-

36

devsumi2016_19-F-2_survey.zip をクリックしてPCに保存して下さい※zipファイルは展開しないようにご注意下さい

kintoneへのアプリ登録 -テンプレートの読み込み（１）-

37

kintoneに管理者権限のあるアカウント（AdministratorもしくはAdministratorに相当するアカウント）でログイン右上の歯車から「kintoneシステム管理」をクリックします

kintoneへのアプリ登録 -テンプレートの読み込み（２）-

38

「kintoneシステム管理」ページの「アプリテンプレート」をクリックします

kintoneへのアプリ登録 -テンプレートの読み込み（３）-

39

「アプリテンプレート」ページの画面上「読み込む」をクリックします

kintoneへのアプリ登録 -テンプレートの読み込み（４）-

40

「参照」をクリックして先ほどダウンロードしたファイルを選択します

kintoneへのアプリ登録 -テンプレートの読み込み（５）-

41

devsumi2016_19-F-2_survey.zip を選択して「開く」をクリックします

kintoneへのアプリ登録 -テンプレートの読み込み（６）-

42

devsumi2016_19-F-2_survey.zip が選択されていることを確認して「読み込む」をクリックします

kintoneへのアプリ登録 -テンプレートの読み込み（７）-

43

テンプレートの一覧画面に devsumi2016_19-F-2_surveyが出来ていることを確認します

kintoneへのアプリ登録 -テンプレートの読み込み（８）-

44

「開発環境」スペースにアプリを作成しますポータル画面に戻り、先ほど作成した「開発環境」スペースをクリックします

kintoneへのアプリ登録 -テンプレートの読み込み（９）-

45

「開発環境」スペースに入ったら画面右上の「…」ボタンをクリックし「アプリを追加」を選択します

kintoneへのアプリ登録 -テンプレートの読み込み（10）-

46

アプリの作成画面で「テンプレートから選ぶ」を選択します

kintoneへのアプリ登録 -テンプレートの読み込み（11）-

47

devsumi2016_19-F-2_survey 横の「アプリを作成する」をクリックします

kintoneへのアプリ登録 -テンプレートの読み込み（12）-

48

アプリ欄に「参加者アンケート」アプリが追加されればOKです

前置きが長かったですが・・・

49

いよいよ本題です！

50

③gusukuで環境をつくる

51

https://app.gusuku.io/

52

gusukuで環境をつくる -gusukuにログイン-

53

Facebookもしくはgmailのアカウントをお持ちの方 いずれかを選択してサインインすることでgusukuの利用が可能

お持ちでない方 作成済みのアカウントでログインします

gusukuで環境をつくる -プロジェクトを作成する（１）-

54

チュートリアルの画面が表示されるので、その手順に沿って登録します「プロジェクト追加へ」をクリックします

gusukuで環境をつくる -プロジェクトを作成する（２）-

55

新規プロジェクト追加の画面で、プロジェクト名を入力します今回は「Developers Summit 2016」として下さい※特にルールはありませんが、実際の開発現場で利用することを想定すると、「案件名」「プロジェクト名」を登録するのが一般的かも

入力が終わったら「作成」をクリックします

gusukuで環境をつくる -プロジェクトを作成する（３）-

56

プロジェクト一覧画面に「Developers Summit 2016」プロジェクトが追加されました！

gusukuで環境をつくる -環境を作成する（１）-

57

プロジェクト名「Developers Summit 2016」をクリックします

gusukuで環境をつくる -環境を作成する（２）-

58

チュートリアルの画面が表示されるので「環境作成へ」をクリックします

gusukuで環境をつくる -環境を作成する（３）-

59

gusukuの環境作成では、kintoneのアプリ情報との紐付けが必要となりますkintoneにログインし「開発環境」スペースにアクセスし、URLの情報を確認しておきます サブドメイン情報（■印の部分） スペース情報（この画面上では「3」） スレッド情報（この画面上では「3」）

gusukuで環境をつくる -環境を作成する（４）-

60

また、kintoneアプリのアプリID（appId）もこの時点で確認しておきますさきほどテンプレートから作成した「参加者アンケートアプリ」をクリックしてURLを確認します アプリID（この画面上では「11」が該当します）

gusukuで環境をつくる -環境を作成する（５）-

61

新規環境作成の画面でそれぞれ下記のように設定し、「作成」をクリックします 新規に作成する環境名：開発環境（任意ですが、今回はわかりやすいようにkintoneのスペース名と合わせます） kintoneアプリサブドメインとドメイン サブドメイン：先ほどメモした■印の部分を入力 ドメイン：「cybozu.com」で変更なし

スペース種別設定：「スペース」を選択すると「スペースID」の入力画面がでてくるので、先ほどメモした「スペース情報」の数字を入力

スレッドID指定：（デフォルトの「ポータル」が選択されている状態では入力項目はでてきません）先ほどメモした「スレッド情報」の数字を入力

kintoneユーザ名： AdministratorもしくはAdministratorに相当するアカウント

kintoneパスワード：該当するパスワード

gusukuで環境をつくる -環境の中にkintoneアプリを追加（１）-

62

チュートリアルの画面が表示されるので「アプリ追加ボタンをクリックしてください」をクリックします

gusukuで環境をつくる -環境の中にkintoneアプリを追加（２）-

63

kintoneアプリを登録し、「作成」をクリックしてください先ほどメモしたアプリIDはここで登録します kintoneアプリappId：先ほどメモしたアプリID※「詳細設定」のチェックは、一番最初のアプリ登録時には不要です

gusukuで環境をつくる -環境の中にkintoneアプリを追加（３）-

64

kintoneアプリがgusukuに登録されました！登録した段階では、バージョンは「1」となります※gusukuにアプリを登録した段階で、kintoneアプリのバージョン管理が行われていることになります！

gusukuで環境をつくる -環境の追加（ステージング環境）-

65

「Developers Summit 2016」プロジェクトをクリックし、新規環境作成画面から、ステージング環境を追加します 新規に作成する環境名：ステージング環境 前の環境（指定の環境の後に追加されます）：開発環境 kintoneアプリサブドメインとドメイン：開発環境と同一

kintoneの「ステージング環境」の情報を調べてgusukuに設定して下さい スペース種別設定 / スレッドID指定 kintoneユーザ名 / kintoneパスワード

【ToDo】gusukuで環境をつくる -環境の追加（本番環境）-

66

kintoneの「本番環境」の情報を調べてgusukuの「Developers Summit 2016」プロジェクトの中に「本番環境」として追加して下さい

※最終的に、下記の【最終完成図】の状態にして下さい スペース種別設定：ポータル？スペース？ゲストスペース？

【最終完成図】

「開発環境」： kintoneアプリが登録されている「ステージング環境」： 未デプロイ（アプリ未登録）「本番環境」 ： 未デプロイ（アプリ未登録）

※順番が「開発環境 👉 ステージング環境 👉 本番環境」となるように！

Ⅳ.登録したアプリのバージョンを管理してみよう！

67

①kintoneアプリの変更作業

68

kintoneアプリの変更作業 -アプリにフィールドを追加（１）-

69

kintoneの「開発環境」スペースにある「参加者アンケート」アプリに変更を加えます「アプリの設定を変更」をクリックします※変更を加えることで、gusukuで管理されているアプリのバージョンと差分が発生します

kintoneアプリの変更作業 -アプリにフィールドを追加（２）-

70

「フォームの編集」をクリックします

kintoneアプリの変更作業 -アプリにフィールドを追加（３）-

71

E-mailフィールドの右隣に「文字列」フィールドを追加し、フィールド名を「電話番号」とします

kintoneアプリの変更作業 -アプリにフィールドを追加（４）-

72

上記のように「電話番号」フィールドを設置して変更を保存します

②gusukuでのアプリ取り込み

73

gusukuでのアプリ取り込み -差分取り込み（１）-

74

「Developers Summit 2016」プロジェクトの「開発環境」をクリックします※gusukuで登録済みのkintoneアプリに対して何か操作を行う場合は、まず「環境」に入る操作が基本となります

gusukuでのアプリ取り込み -差分取り込み（２）-

75

「参加者アンケート」をクリックします

gusukuでのアプリ取り込み -差分取り込み（３）-

76

「参加者アンケート」アプリ詳細画面にて「アプリ取り込み」をクリックします※gusukuは、一度登録されたkintoneアプリと自動で同期は取りません「アプリ取り込み」をクリックした段階で、kintoneアプリの変更の可否（差分）がチェックされます

gusukuでのアプリ取り込み -差分取り込み（４）-

77

「アプリの取り込み」画面で「yyyymmdd 電話番号フィールドの追加」と入力し、「保存して実行」をクリックします※フリーフォーマットで特に書き方に決まりはありませんが、トラブルシュート時に有用な場合があるので、どのような変更を加えたのかを書くことをオススメします（Gitのコミットメッセージみたいなイメージ）

gusukuでのアプリ取り込み -差分取り込み（５）-

78

取り込みが完了すると、アプリのバージョンが「1」から「2」に上がります※kintoneアプリ側で仮に変更が加えられていなかった場合でも、「アプリ取り込み」を実行すればgusukuでのバージョンは上がります

gusukuでのアプリ取り込み -差分確認（１）-

79

バージョンが上がると、過去のバージョンとの差分を確認できるようになります画面では、さきほど追加した「電話番号」フィールドが差分として見えています

gusukuでのアプリ取り込み -差分確認（２）-

80

差分はデフォルトで左が新しいバージョン、右が古いバージョンになっているのですが・・・一般的にdiffを取る時は左が古いバージョン、右が新しいバージョンっていうビジュアルが多いと思いますプルダウンからバージョンを選択して「差分の確認」をクリックすれば、ビジュアル切り替えることも可能だよ！※上の図は左が古いバージョンになっている例です

②gusukuを使って変更前の状態に戻す

81

gusukuを使って変更前の状態に戻す（１）

82

kintoneの「開発環境」スペースの「参加者アンケート」アプリに「電話番号」フィールドが存在していることを確認します

gusukuを使って変更前の状態に戻す（２）

83

gusukuの「Developers Summit 2016」プロジェクト＞「開発環境」の中の「参加者アンケート」のアプリ詳細画面を開きますまず、現在のバージョンが「2」になっていることを確認して下さい確認したら「バージョン指定 / 他の環境への配布」で「バージョン1」を選択します

gusukuを使って変更前の状態に戻す（３）

84

「他の環境への配布」で「開発環境」を選択「即時運用開始する」にチェックを入れ「指定バージョンの配布」をクリックします

gusukuを使って変更前の状態に戻す（４）

85

「指定バージョンアプリの配布」画面で「yyyymmdd 古いバージョンに戻す」と入力し、「保存して実行」をクリックします※「アクセス権の配布を試みる」は今回は不要です※アプリにアクセス権を設定している場合は、アクセス権の移行をするためにチェックが必要となります

gusukuを使って変更前の状態に戻す（５）

86

「バージョン1」が適用されて、gusukuのバージョンが「3」にあがりました！※変更前の状態に戻しても、gusukuで管理されているバージョン番号は上がっていきます

gusukuを使って変更前の状態に戻す（６）

87

kintoneの「開発環境」スペースの「参加者アンケート」アプリを見て、「電話番号」フィールドがなくなったことを確認して下さい

【ToDo】gusukuを使って「電話番号」フィールドを復活する

88

gusukuを使って「電話番号」フィールドを復活させて下さいkintoneアプリ側でフィールドを追加するのはだめです！gusuku上の操作のみで完結して下さい

※最終的には以下の状態にして下さい gusukuの「開発環境」の「参加者アンケート」アプリのバージョン：4 kintoneの「開発環境」スペース内の「参加者アンケート」アプリ：「電話番号」フィールドが戻っている状態

【最終完成図】

【回答】gusukuを使って「電話番号」フィールドを復活する（１）

89

gusukuの「Developers Summit 2016」プロジェクト＞「開発環境」の中の「参加者アンケート」のアプリ詳細画面「バージョン指定」で「バージョン2」を選択します

【回答】gusukuを使って「電話番号」フィールドを復活する（２）

90

「他の環境への配布」で「開発環境」を選択し、「即時運用開始する」を選択して「指定バージョンの配布」をクリックします

Ⅴ. 登録したアプリを異なる環境へ配布してみよう！

（同一サブドメイン）

91

①開発環境→ステージング環境への配布

92

開発環境→ステージング環境への配布（１）

93

gusukuの「Developers Summit 2016」プロジェクトから「開発環境」をクリックします

開発環境→ステージング環境への配布（２）

94

「開発環境」の「参加者アンケート」をクリックします

開発環境→ステージング環境への配布（３）

95

今回は最新バージョンではなく、初回取り込み時の「バージョン1」を「ステージング環境」に配布します「バージョン指定」で「バージョン1」を選択します

開発環境→ステージング環境への配布（４）

96

「バージョン1」を指定し、配布先を「ステージング環境」にセットして「指定バージョンの配布」をクリックします※「即時運用開始する」のチェックを入れるのを忘れないようにしてください

開発環境→ステージング環境への配布（４）

97

「指定バージョンアプリの配布」画面で「yyyymmdd 初回取り込み時のバージョンでステージング環境に配布」と入力し「保存して実行」をクリックします※「アクセス権の配布を試みる」は今回は不要です※アプリにアクセス権を設定している場合は、アクセス権の移行をするためにチェックが必要となります

開発環境→ステージング環境への配布（４）

98

配布が完了すると「ステージング環境」で従来「未デプロイ」となっていた箇所にアプリ情報が入りました！

kintoneの「ステージング環境」スペースの確認（１）

99

kintoneの「ステージング環境」スペースの中に「開発環境」スペースにしかなかった「参加者アンケート」アプリが新しく追加されていることが確認できます

kintoneの「ステージング環境」スペースの確認（２）

100

「参加者アンケート」アプリの設定画面を確認し、gusukuの「開発環境」最新のバージョンでは追加されている「電話番号」フィールドが存在していないことを確認して下さい

②開発環境→ステージング環境への差分の適用

101

【ToDo】開発環境→ステージング環境への差分の適用

102

gusukuの「開発環境」の「参加者アンケート」アプリの最新バージョンを「ステージング環境」に適用して下さい

※最終的に、下記の【最終完成図】のような状態にして下さい

【最終完成図】

「開発環境」 ： version 4「ステージング環境」： version 2「本番環境」 ： 未デプロイ（アプリ未登録）

③ステージング環境→本番環境への配布

103

【ToDo】ステージング環境→本番環境への配布（１）

104

gusukuの「本番環境」に「ステージング環境」の「参加者アンケート」アプリを配布して下さい「開発環境」「ステージング環境」「本番環境」はすべてgusukuの「開発環境」の最新バージョンのアプリの状態に合わせてください

※最終的に、下記の【最終完成図】のようになればOKです

【最終完成図】

「開発環境」 ： version 4「ステージング環境」： version 2「本番環境」 ： version 1

【ToDo】ステージング環境→本番環境への配布（２）

105

「ステージング環境」「本番環境」のkintoneアプリが最新バージョンになっていることを確認するために、以下を確認して下さい

kintoneの「本番環境」スペース内：「参加者アンケート」アプリがある kintoneの「ステージング環境」＆「本番環境スペース内の「参加者アンケート」アプリ：「電話番号」フィールドが存在している

Ⅵ. 登録したアプリを異なる環境へ配布してみよう！

（別サブドメイン）

106

【ToDo補習】別サブドメインに本番環境スペースを作成する

107

最後はちょっと難しい？以下のような条件で環境を作成してみて下さい

【kintone】 「開発環境」「ステージング環境」：ハンズオン中に利用していたkintoneの環境のまま 「本番環境（ゲストスペース）」：異なるkintoneの環境（「Ⅱ.事前準備」で作成したお試しアカウント環境に作成）

【gusuku】1. 「Developers Summit 2016」プロジェクトの中の「本番環境」の環境設定を「異なるkintoneの環

境」のものに変更する2. もともとgusukuの「本番環境」に登録されていた「参加者アンケート」アプリを削除する3. 「ステージング環境」に登録されている「参加者アンケート」アプリから変更した「本番環境」に

アプリを配布する

【ToDo補習】gusukuからアプリを削除する

108

プロジェクト名＞「○○環境」の中の「参加者アンケート」のアプリ詳細画面の右上の×印で削除が可能です※gusuku上で削除しても、kintoneの環境下にはアプリは残ります※gusuku上での「削除」は「gusukuにおけるバージョン管理を解除する」という意味での削除になります

【便利機能紹介】設計情報のダウンロード

109

実はgusukuでこんな便利機能もあるのでご紹介です！gusukuの「Developers Summit 2016」プロジェクト＞「開発環境」の中の「参加者アンケート」のアプリ詳細画面を開きます画面右上のアイコンで「設計情報 download」をクリックしてみて下さいどんなファイルがダウンロードされるかな…？

こちらはgusukuにログインして行うものではなく、kintoneに組み込んで利用するプラグインになります

プラグインのダウンロードURLhttps://docs.gusuku.io/plugin/fileattach/plugin-2.0.4.zip

1ファイル1GB以上の添付ファイルをアップロードすることが可能

理論値でいうと5TBまでのファイルのアップロードが可能ただしインターネット経由であることを加味すると、実際5TBとかの容量のファイルをアップロードするのは事実上困難かも。

gusukuのプランでファイルサイズの制限はあるので、gusukuをフリープランで利用する場合は1GBの制限となります

添付ファイルがkintone側でなくgusuku上に保存されるので、kintoneの容量を消費しない

プラグインの使用方法に関しては本セッション内では説明しません

https://docs.gusuku.io/plugin/fileattach/

【便利機能紹介】添付ファイルプラグイン

110

これを機に是非gusukuを

使ってみて下さいね！

111

使ってみてお気づきの点やフィードバックがあれば是非↓へ！

butler@gusuku.io

112