kintone devCamp 2016 Spring 『アプリ開発なんて怖くない！gusukuでお手軽kintoneアプリ管理+α♪』
•
1 like•3,680 views
2016年5月27日（金）に開催された kintone devCamp 2016 Spring の gusuku ハンズオン資料です。 #kintone #kintonedevcamp #r3gusuku 【gusuku（グスク）】 kintoneアプリケーションの利用・開発・運用を強力にサポートするプラットフォームです。 https://gusuku.io/
kintone devCamp 2016 Spring 『アプリ開発なんて怖くない！gusukuでお手軽kintoneアプリ管理+α♪』
- 1. kintone devCamp 2016 Spring 【C-4】 アプリ開発なんて怖くない！ gusukuでお手軽kintoneアプリ管理+α 2016年5月27日 アールスリーインスティテュート いけがみ みどり
- 2. 自己紹介 池上 緑（いけがみ みどり） アールスリーインスティテュート クラウドエンジニア gusukuエバンジェリスト 業務に関すること クラウド使ったソリューション・構築・お客様への要 件のヒアリングもやります！ 展示会ではコスプレエンジニア 普段の姿もOLコスプレ 心はわりと低レイヤー思考 インフラエンジニアと思われ〼 実際インフラもやってる！ ネットワーク、サーバー、ストレージ、クラウドイ ンフラ、ミドルウェア好き #このへん語ります 世の中のエバンジェリストと言われるエバの中でお そらく最もエバっぽくない人種 p526CA p52_rocca 業務外のこと コミュニティ運営したり登壇したり 競技イベント参加したり #インフラセキュリティ系 多め 最近女子会コミュニティの立ち上げやフォロー多め JAWS-UG 関西女子会 運営コア kintone Café 大阪/関西女子会 運営コア kintone Café 沖縄女子会 立ち上げフォロー このあたりに書いてあるので見てください！ https://www.r3it.com/community/
- 5. 本日のアジェンダ 4 I. gusukuについての説明 II. 事前準備 ～gusukuを操作する前に～ III. gusukuを実際にさわってみよう！ IV. 登録したアプリのバージョンを管理してみよう！ V. 登録したアプリを異なる環境へ配布してみよう！（異なる サブドメイン） VI. もっとkintoneが便利になる！gusukuプラグインのご紹介 VII.gusukuプラグインを使ってみよう！
- 8. gusukuとは？ -機能（１） バージョン管理《基本機能》- 7 kintoneアプリケーション開発をサポートするプラットフォーム（SaaS） フリーアカウント（無料）であれば 10appid まで管理が可能 任意のkintoneのアプリを環境別に管理することが可能 ★ハンズオン ※開発環境 ～ ステージング環境（本番環境） ～ 本番環境（ゲストスペース） と段階的に管理が可能
- 9. システム開発における３つの環境 8 開発環境 • 開発作業のための環境 • 自身のPC端末等、ローカル環境の場合も • ユーザーやクライアントには見えない環境が多い ステージング 環境 • 開発環境で動作検証済みのシステムを、ユーザー/クライアントがテストを行うための環境 • 本番を想定した環境 • 本番と近い、あるいは同一の環境で構築する（場合によっては本環境がないケースも） 本番環境 • ユーザー/クライアントが実際に利用する環境 • ステージング環境でレビュー済みの機能が適用される環境 今回gusuku上で作成させて頂く環境も、上記3環境に準拠した形で進めていきます 実際にご活用頂く場合は、ご自身の開発現場に合わせた環境設定を行って下さいね
- 10. gusukuとは？ -機能（２） プラグイン機能- 9 gusukuと連携して動作するkintoneプラグインを配布 添付ファイルプラグイン： ★ハンズオン 1ファイル1GB以上の添付ファイルのアップロードが可能 （kintone標準の場合）1ファイル1GB 理論上は5TBまでアップロードが可能 Excel帳票プラグイン： ★今回ハンズオンはなし 使い慣れたExcelを利用して帳票をデザインすることが可能 作成したExcel帳票テンプレートと印刷したいkintoneフィール ドを紐付けることで帳票の出力が可能
- 13. gusukuを作ろうと思ったきっかけ（１） 12 本番運用中にkintoneアプリに修正を加えたい！ でも運用中のアプリに直接変更を加えるのってリスクがあるよね 本番運用してるし、ダウンタイム発生させたくないよね・・・ じゃあ開発用にアプリをコピーしてテストしなきゃね！ 開発用のアプリでテストまでできたけど、本番運用中のアプリに適用しなきゃいけないよ ね・・・ ↑の作業って手間もかかるしミスも増えるよね めんどくさいし そんなサービス 作っちゃえばいいんじゃね？
- 14. gusukuを作ろうと思ったきっかけ（２） 13 実際にkintoneを使って開発してるわたしたちエンジニアのナマの声がそのまま反映される！ とにかく要望として上げれば、まずは検討してもらえる！ サービスとしてどんどん成長する！ （リリースしたからといって作って放置のサービスではない） kintoneで開発するアプリを守る城になりたい ↓ ↓ ↓ ↓ 『gusuku』が誕生しました！！！！
- 15. ハンズオン前の注意事項 14 1. 本ハンズオンではkintoneの環境を2つ使用します 2. kintoneのアカウントをひとつしかお持ちでない場合は、 「Ⅱ. 事前準備」>「②kintoneお試しアカウントの作成」 の手順に沿って、2つ取得しておいて下さい 3. 本ハンズオンでは、Administratorもしくは同等のユー ザーでの操作を前提としています 4. それ以外のユーザー、例えば既存kintone環境をお持ち で、その環境を利用して作業される方は、事前に挙手を お願いします
- 19. gusukuアカウントの作成 18 Facebookもしくはgmailのアカウントをお持ちの方 いずれかを選択してサインインすることでgusukuの利用 が可能 お持ちでない方 アカウントを作成して下さい
- 30. ①kintoneの準備 29
- 56. いよいよ本題です！ 55
- 59. gusukuで環境をつくる -gusukuにログイン- 58 Facebookもしくはgmailのアカウントをお持ちの方 いずれかを選択してサインインすることでgusukuの利用 が可能 お持ちでない方 作成済みのアカウントでログインします
- 61. gusukuで環境をつくる -プロジェクトを作成する（２）- 60 新規プロジェクト追加の画面で、プロジェクト名を入力します 今回は「kintone devCamp 2016 Spring」として下さい ※特にルールはありませんが、実際の開発現場で利用することを想定す ると、「案件名」「プロジェクト名」を登録するのが一般的です 入力が終わったら「作成」をクリックします
- 62. gusukuで環境をつくる -環境を作成する（１）《開発環境》- 61 プロジェクト一覧画面に「kintone devCamp 2016 Spring」プロジェクト が追加されました！ ※（プロジェクトがすでにいくつか作成されている場合）同じポータル上に 上記のように複数プロジェクトが並びます 次はこのプロジェクト名をクリックします
- 64. gusukuで環境をつくる -環境を作成する（３）《開発環境》- 63 gusukuの環境作成では、kintoneのアプリ情報との紐付けが必要となります kintoneにログインし「開発環境」スペースにアクセスし、URLの情報を確 認しておきます サブドメイン情報（■印の部分） スペース情報（URLの「#/space/★」の★部分。この画面上では「3」） スレッド情報（URLの「/thread/☆」の☆部分。この画面上では「3」）
- 66. gusukuで環境をつくる -環境を作成する（５）《開発環境》- 65 新規環境作成画面でそれぞれ下記のように設定し 「作成」をクリックします 新規に作成する環境名：開発環境 （任意ですが、今回はkintoneのスペース名と合わせます） kintoneアプリサブドメインとドメイン サブドメイン：先ほどメモした■印の部分を入力 ドメイン：「cybozu.com」で変更なし スペース種別設定：「スペース」を選択して「スペース 情報」の数字を入力 スレッドID指定：先ほどメモした「スレッド情報」の数字 を入力 kintoneユーザ名： Administratorもしくは Administratorに相当するアカウント kintoneパスワード：該当するパスワード
- 67. gusukuで環境をつくる -環境の追加 《ステージング環境》- 66 開発環境同様に、新規環境作成画面からステージング環境を追 加します 新規に作成する環境名：ステージング環境 前の環境（指定の環境の後に追加されます）：開発環境 kintoneアプリサブドメインとドメイン：開発環境で入力し たサブドメインとは異なります kintoneの「ステージング環境」のURLの情報を確認して gusukuに設定して下さい スペース種別設定 / スレッドID指定 kintoneユーザ名 / kintoneパスワード
- 68. gusukuで環境をつくる -環境の追加（１） 《本番環境》- 67 ステージング環境同様に、新規環境作成画面から本番環境を追 加します 新規に作成する環境名：本番環境 前の環境（指定の環境の後に追加されます）：ステージン グ環境 kintoneアプリサブドメインとドメイン：ステージング環境 と同一 kintoneの「本番環境（ゲストスペース）」のURLの情報を 確認してgusukuに設定して下さい スペース種別設定 / スレッドID指定 kintoneユーザ名 / kintoneパスワード
- 78. その前に！ 77
- 84. kintoneアプリの変更作業 -アプリにフィールドを追加（４）- 83 「数値」フィールド フィールド名：No フィールドコード：no 文字列（１行）フィールド フィールド名：カテゴリ フィールドコード：category 上記のように設定して「保存」をクリックします
- 85. kintoneアプリの変更作業 -アプリにフィールドを追加（５）- 84 「一覧の追加」の「設定済みの一覧」プルダウンから 「イベント一覧（リスト）」を選択して、先ほど追加した フィールドを追加します
- 91. ここまでできたら・・・ 90
- 93. gusukuでのアプリ取り込み -差分取り込み（１）- 92 「kintone devCamp 2016 Spring」プロジェクトの「開発環境」をクリックします ※gusukuで登録済みのkintoneアプリに対して何か操作を行う場合は、まず「環 境」に入る操作が基本となります
- 99. gusukuでのアプリ取り込み -差分取り込み（７）- 98 ヒストリ画面では下記項目の確認が可能です 日時 アプリ名 作業ユーザー（ログインユーザー） 詳細（現在のアプリのバージョン情報） アプリ取り込み時に入力したメモ内容
- 102. 配布前の事前準備 101
- 104. kintoneアプリへのデータインポート作業（１） 103 「花見スポット2016.xlsx」というExcelファイルをkintoneの「イベン ト・フェアカレンダー」アプリにインポートします
- 116. ここまでできたら・・・ 115
- 118. 開発環境→ステージング環境への配布（１） 117 gusukuの「kintone devCamp 2016 Spring」プロジェクトから 「開発環境」をクリックします
- 125. 開発環境→ステージング環境への配布（８） 124 「開発環境」でインポートしたデータは移行できていません ※gusukuではデータの移行までは行えません ※データは手動でインポートする必要があります
- 138. gusuku添付ファイル保存プラグイン -インストール（３）- 137 先ほどダウンロードしたプラグインを読み込みます 「読み込む」をクリックして、プラグインのzipファイル を選択して下さい
- 143. gusuku添付ファイル保存プラグイン -プラグイン有効化（２）- 142 プラグインを利用するにあたり、フィールドの設置が必要となります まずは「フォームの編集」から必要なフィールドを設置します
- 149. gusuku添付ファイル保存プラグイン -プラグイン有効化（８）- 148 項目を下記のように設定します gusuku APIキー：先ほどgusukuで取得したAPIキー（■の部分） ファイル名保存フィールド：文字列（1行）フィールドに設定したフィールドコード ファイルアップロードスペース：スペースに設定した要素ID ラベル：「現場写真（gusuku利用）」 ※アプリの画面に表示される名前です