kintoneを便利に使うgusukuを体験してみた!

はじめましての方ははじめまして!インフラ屋あがりでちょっと前にプログラマーに転身した與那城(よなしろ)といいます。

プログラマーに転身してかかわったプロジェクトでkintoneのカスタマイズをやってたのですが、びみょーにこまかいところで不便だなぁ…っておもっていたところで、gusukuというプロダクトがあるよ!使ってみて紹介してよ!というお話をいただいたので、gusukuを体験してみたことを書いていこうかなと思います。

gusukuってなーに?という方はgusukuの紹介資料のページへ!

どうでもいい話ですが、沖縄っぽい名前ですが、沖縄からリモートプログラマーやってます。gusukuという名前もものすごく親近感があります。

gusuku体験の準備

kintoneとgusukuのアカウント

kitnoneの開発者アカウントはcybozu developer networkのページからgusukuのアカウントはgusukuのサイトから取得してください

kintoneでのアプリインストール

今回はkintoneアプリストアにある「商品見積書パック」でいろいろ試してみたいと思います。

kintoneのアプリストアから「商品見積書パック」をインストールします。

kintoneアプリストアから商品見積パックを選択

インストールすると右側のアプリ一覧に「見積書」と「商品リスト」が出てきます。

ここで「見積書」をクリックして、見積書アプリにアクセスします。

kintone商品見積パックの見積書アプリ

その時のURLが

https://example.cybozu.com/k/236/

みたいな感じになってると思います。そこの/k/のあとの数字をメモしておいてください。
これがインストールした見積書アプリのアプリIDになります。

まずはgusukuの基本機能を試してみよう!

gusukuにアクセスして、作成したgusukuのアカウントでサインインします。
URLはこちら! https://app.gusuku.io/

gusukuのサインイン画面

アクセスしてサインインすると下記のような画面がでてきます。

モザイクかかってるところは実際に業務で使用中のプロジェクトです

プロジェクトが無い場合にはプロジェクト一覧のところが何も無いかとは思います。

プロジェクトの作成/環境の作成/異なる環境へのアプリの配布

まずはプロジェクトを作成します。画面下のほうにある「プロジェクト新規作成」をところに作成するプロジェクトの名前を入れます。
今回は「商品見積カスタム」という名前にしました。

入力が終わったら「作成」ボタンをクリックします。クリックしてしばらくするとプロジェクト一覧に作成したプロジェクトが表示されます。

プロジェクトが作成できたら「プロジェクト名」がボタンになっているのでクリックします。そうすると「新規環境作成」の画面が出てきます。

ここで「環境」についての情報を入力します。
ここでいう「環境」はいわゆる「開発環境」「ステージング環境」「本番環境」といった文脈で使われる「環境」のことです。

まずは「開発環境」を登録します。

新規に作成する環境名には「開発」といれます。

kintoneアプリ サブドメインとドメイン はみなさんのkintone開発者アカウントのcybozu.comのサブドメインを入力してください。

kintone ユーザ名とkintone パスワードは開発者アカウントでアプリの管理ができる権限をもったユーザー名とそのユーザーのパスワードを入れます。
ここでは作業用アカウントとして「builder」というアカウントを作ってあるのでbuilderとそのパスワードを入れています。
作成していない場合は「Administrator」とそのパスワードを入力してください。

残りの項目は無視して「作成」ボタンを押します。

作成に成功すると作った環境の名前のボタン(今回は「開発」)がでてきます。そのボタンをクリックします。

するとその環境に含まれるkintoneアプリの一覧がでてきます…が、登録していないのでまだ何もありません。
というわけで「アプリ追加」ボタンをクリックします。

新規kintoneアプリ追加の画面

クリックするとアプリ追加の画面が出てきます。ここではkintoneアプリappIdのところに、先程kintoneでアプリをインストールした時にメモした見積書アプリのアプリIDを入力します。
(画面の例では「236」になっています)

入力したら「作成」ボタンをクリックすることでアプリが追加されます。

うまく追加されると↓のような画面になります

追加後の画面

ここで「商品見積カスタム」プロジェクトの「開発」環境の見積書アプリがgusukuで管理できるようになりました。

この時点できることは

* アプリのバージョン管理
* 別の環境(同じ環境も可)に指定したバージョンをアプリの配布(アプリのコピーや差分適用)

になります。

まずはバージョン管理から…といいたいのですが、差分適用とかもろもろの関係があるのでまずは「別の環境にアプリの配布」から試してみたいと思います。

「別の環境に」っていうことでまずは「商品見積カスタム」プロジェクトに「別の環境」を作るためのプロジェクトのページで
移動します。

パンくずを辿っていってもいいですし、gusukuのロゴをクリックして表示されるプロジェクト一覧にある「商品見積カスタム」をクリックしても大丈夫です。

プロジェクトのページの下のほうにある「新規環境作成」のフォームから今回は「本番」という環境を作ります。

入力内容は開発環境を作る時とほぼ同じです。

新規に作成する環境名には「本番」といれます。

前の環境 のところはとりあえずそのままにしておいてください(おそらく「開発」が選択されているはず)。これは複数環境がある場合に環境の表示順を指定するものです。

kintoneアプリ サブドメインとドメインはみなさんのkintone開発者アカウントのcybozu.comのサブドメインを入力してください。

kintone ユーザ名とkintone パスワードは開発者アカウントでアプリの管理ができる権限をもったユーザー名とそのユーザーのパスワードを入れます。

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

作成に成功すると↓の画面のようになります。

あとは…いかにも開発から本番にコピーできそうなアイコンがあるのでそれをクリックします。

すると「最新バージョンの配布」という画面が出てくるのでメモ欄にメモを残して「保存して実行」をクリックします。

配布に成功すると「未デプロイ」だった本番のところに配布したアプリのアプリIDやバージョン等が表示されるようになりました。
というわけで(?)、とりあえずクリックできそうなappIdのところをクリックしてみます。

クリックすると「本番」環境の「見積書」アプリの情報が表示されています。kintoneアプリURLのところに本番環境用のkintoneアプリのURLが表示されているのでクリックしてみましょう!

クリックすると自分でインストールした「見積書」アプリとまったく同じものが表示されたと思います。アプリ一覧を見ても…

「見積書」アプリが2つ!!!
これでは見分けがつかないので新しく作ったほうの見積書アプリ もしくは 開発環境の見積書アプリはアプリ名の変更をしておくことをおすすめします。今回は本番のほうのkintoneアプリを変更しました。

kintoneアプリのバージョン管理とカスタマイズしたkintoneアプリの配布

※注: ここでいう「カスタマイズ」はJavaScriptカスタマイズのことではなく、kintoneアプリのフィールドをイジったりすることを指してます。もちろんJavaScriptカスタマイズした部分もバージョン管理できます

ここからがgusukuの真骨頂、kintoneアプリのバージョン管理とカスタマイズしたkintoneアプリの配布を体験します。

まずは開発環境に登録したkintoneアプリのほうの「見積書」にアクセスします。そこからアプリの設定へ移動し、フォームの変更を行ないます。
今回は…最後に「通信欄」という枠(文字列(複数行))を追加します。

↓のような感じで通信欄を追加しました。

通信欄を追加

追加してアプリを更新します。

アプリを更新して、レコードの追加画面にフィールドが追加されていることを確認します。

追加されていることを確認したら、これを本番環境のほうのkintoneアプリにも同じように反映させたいと思います。
通常であれば同じようなフィールド変更の作業を行うのですが、ここでgusukuを使うことで間違えずに同じ作業を行なうことができます。

まずはgusukuの「商品見積」プロジェクトの「開発」環境の画面へ移動します。

この時点では見積書アプリのバージョンは「1」になっています。ここで先程編集した見積書kintoneアプリを一度gusukuに取り込みます。
1つしかないのでしたら「全アプリを取り込み」ボタンをクリックすれば取り込まれます。
ここではあえて特定のアプリを取り込む操作を体験するためにアプリ名のところにある「見積書」をクリックします。

ここにある「アプリの取り込み」ボタンをクリックするとメモ入力欄が出てくるので入力後に「保存して実行」をクリックします。

そうするとバージョンが「2」に上がってるのが確認できるかと思います。

よく見てみると、その画面のちょっと下に「バージョン指定 / 他の環境への配布」というのがあります。
そこの「開発」っていうところを「本番」に変えます。
そのまま本番環境を運用開始できるようにしたいので「即時運用開始する」にチェックをいれて「指定バージョンの配布」をクリックします。

メモ欄の入力をもとめられるのでメモを入力して「保存して実行」をクリックします。

うまく配布できると本番環境の見積書アプリに通信欄が追加されていることが確認できます。

…どの環境のkintoneアプリかわかりずらくて申し訳ないですが、本番の見積書アプリの追加されてることを確認できます(スクリーンショットも本番環境の見積書アプリです…)。

gusukuを使ってみて

gusukuを使ってみて一番いいなーと思ったのは開発環境から本番環境への配布が楽チンなことでした。特に差分適用はミスすると大変なことになるので、できれば手動でやりたくないことです。それをgusukuをつかってやればきちんと適用してくれるっていうのはものすごいメリットだと感じました。

また、同じアプリを複製して他のユーザーに使わせるようなこと自体はkintoneの機能でできるのですが、それを配布したユーザーに最新版を使わせようとしたりすと大変なのをgusukuでカバーできるのはいいなぁ…って思いました。

次回予告?

今回の体験記はgusukuの中でも基本中の基本の機能でできることを体験してきました。次回はもっと素敵なkintoneライフが見えてくる(といわれた))gusukuのオプション機能を使って体験記を書いていきたいと思っています!