【kintone】Cloud9を使ったkintone javascript API開発環境構築

開発の知識がなくても自社の業務に合わせたシステムをかんたんに作成できるクラウドサービスであるkintone。今回はCloud9というサービスを利用したkintoneのAPI開発環境の構築方法についてご紹介します。

【kintone】Cloud9を利用した開発環境構築

20161201_1

Cloud9はいわゆる”クラウド型IDE”と言われるサービスの1つで、簡易なWebシステム開発であればブラウザひとつでコーディングから動作確認までできてしまう素晴らしいツールです。
※ 未だ日本での採用事例は多くはりません。

kintone のカスタマイズについて

kintoneでカスタマイズを行う場合はカスタマイズ用のコードを書いたcssやjsのファイルを アプリ毎に設置する必要があり、以下の2つの方法で設定を行います。


・ファイル自体をkintoneシステムにアップロード
・ファイルパスをurlで指定して紐付け

kintoneのカスタマイズはkintone JS APIを介した処理の実装が主なので確認しながら作業をしていくことになりますので、コードの記述から確認作業までをシームレスに行える状態を作ることが重要になってきます。

動作確認の都度、編集したファイルをブラウザ上からアップロードするのは少し非効率です。 理想的なのは、urlで指定されたサーバー上でテキストエディタを操作できるような環境で作業する方が効率が良さそうです。

Cloud9での環境構築

webサーバ上でコーディングができるような環境を作る手段はいくつかありますが、いずれも環境構築の手間がかかってしまいます。そこで、Cloud9の登場です。

Cloud9の場合は、テンプレートをもとにjs/cssの開発環境を5分程度で構築でき、成果物はgithub上で管理できるので、いざリリースとなった場合もスムーズに対応できてしまいます。

筆者私見として、kintone開発ではプロトタイピングの工程はかなり重要と考えていますので、環境構築を必要とせず、ブラウザ完結したIDEを操作できることはかなりのアドバンテージがあると思います。

以下に環境構築手順を説明していきます。

20161201_2

■kintone開発ワークスペースの作成

Cloud9ログイン後、ダッシュボードより「Create a new workspace」を選択して設定を進めていきます。 事前に会社かご自身のgithubアカウントでリポジトリの作成を行ってください。 作成したリポジトリのURLを下記の①のように設定します。 kintoneの開発環境では基本的にcss,jsを扱うことになりますので下記②にあるようにテンプレートを「html5」として作成してください。

20161201_3

■動作確認

ワークスペースが作成されるとブラウザ上に、テキストエディタが表示されます。(Sublime TextのようなEclipseのような、いわゆるIDEの画面)これからhtmlファイル(index.html)を作成して動作確認をします。手順は以下の通りです。

f:id:crud_lab_editor:20160218143229g:plain

・画面右のワークスペースウィンドウより右クリックで「New File」> index.htmlを作成
・エディタを起動して「hello world」と記述し保存
・画面上部の「Run」ボタンを押し、実行環境を起動
・画面下部のコンソール上に表示されるurlにブラウザアクセスして「hello world」と表示されることを確認

これで、開発環境が整いました。 次にkintoneアプリとの結合を行っていきます。

次のページ:
kintoneとの結合

 

この記事を書いた人:MIRI

miripic

ITの世界に飛び込めば世界を変えられるんじゃないかと思い、IT企業に就職。 フィリピン・セブ島で6ヶ月間のプログラミング研修を経て、現在Webエンジニア暦2年目。 やりたいことはぜんぶやる欲張り女子。好きなものは、美味しいもの、ワークアウト、旅、新たな発見。エンジニア女子の日常の妄想をゆるくお届けしているPODCASTも配信中。 Twitter:@miri4ech

関連する記事

facebook

案件情報や最新記事をお届けします。
ぜひチェックしてみてください。