kintone JavaScriptカスタマイズのためのwebpackビルド環境（Dropbox併用）

はじめに

6月頃から、kintoneのJSカスタマイズのためにwebpack & Babelのビルド環境を使ってきました。すんごい便利で、もうこれナシでは開発できません僕は！
来週kintone hack 2017 大阪予選会にも出ることですし、これまでの集大成として、webpackを使ってkintoneカスタマイズをするサンプルプロジェクトを作ってGitHubに公開しました！
https://github.com/TheRed/kintone_webpack

同じようなことやってる人は結構いる気がしますが、~~2017年9月現在、Google検索でヒットする情報は以下の2件くらい。~~2017年10月現在、Google検索でヒットする情報は以下の6件くらい。　¹

• webpackを使ったワンランク上のモダンJSカスタマイズ_門屋 亮氏 - SlideShare
• Webpackを使ってkintoneモバイルカスタマイズにCSSを入れる | kintoneを便利に使う方法を紹介するブログ
• KintoneでWebpack + Babel + Vueを使ってモダンに爆速開発していくサンプル(1/2) | ikazoy.me
• BabelでES6で書いて、webpackでビルドして、mochaでテスト書いて、power-assertでassertの出力を見やすくして、karmaで複数ブラウザのテストを自動化して、カバレッジを出力するようにした - UUUM攻殻機動隊(エンジニアブログ)
• モダンなkintoneプラグイン開発環境の例 – cybozu developer network
• R3 kintone js deployerを使ってkintoneカスタマイズをハッピーに！ - Qiita

全部とても参考になるんですが、僕はちょっとスタンスを変えて「一式のプロジェクト」になったサンプルコードを作ってみました。GitHubからcloneするだけで試せると取っ付きやすいですし、コード読める人には日本語よりもコード見せるのが早いですからね！

ビルド方法

$ git clone https://github.com/TheRed/kintone_webpack.git
$ cd kintone_webpack
$ yarn install
$ yarn watch

GitHubのREADMEに書いた通り、これだけ。
watchしながらsrcディレクトリ内のコードを編集して遊んでみてください。

webpack/Node.js/yarnなどの基本を知らない方は、
ネット上に参考になる記事色々あるので、僕が解説することはしません！
頑張って勉強してくださいね

Dropboxと併用する

プロジェクトには、kintone開発に即役立つための設定を色々と入れてます。
今日は時間がないので細かい解説はしませんが、一点だけ一番のミソを解説。

webpack.config.js

  output: {
    path: path.join(os.homedir(), 'Dropbox/kintone/projectName'),
    filename: '[name].js',
  },

ここです！
outputにホームフォルダ配下のDropboxフォルダを指定しています！
ビルド結果ファイルのDropbox URLをkintoneに指定しておけば、yarn watchで監視ビルドしながら、ビルド結果がDropbox経由でkintoneに同期されるわけです！素晴らしいでしょ！！！
outputファイルは、1アプリ1ファイル作成されるようにしています。今回の場合は「app1」「app2」の2アプリですね。

開発者サイトにある通り、kintone開発にDropbox同期を使うのは常套手段ですね。
https://developer.cybozu.io/hc/ja/articles/201308690-JavaScriptカスタマイズのデバッグをかんたんにするウラワザ

僕は最初「Dropbox同期できないから効率悪すぎじゃーん」と思って、それが理由でwebpack敬遠してたんですが、このワザを編み出してから万事がうまく回り幸せになりました！「webpackとDropboxを併用する方法」の解説は、おそらく本邦初公開だと思います。まぁ誰でも思いつきそうなことだけど、これを読んで新しく始めてくれる人が増えることを祈って投稿する次第です(`･ω･´)

もちろんプロジェクト全体をDropboxフォルダに入れても同期可能ですが、それだとnode_modulesもDropboxフォルダに入ってしまい、膨大な量のファイルがDropboxで同期されて恐ろしいことになります。。。その理由で諦めてる人がいたら、是非この方法でoutputだけDropboxに出してくださいませ！

その他のコードの解説は、また気が向いた時に書きます。GitHubのコードも、随時書き加えていきたいと思ってまーす。

おわりに

kintoneカスタマイズは、まだまだフロンティアだと思います。こういうノウハウを全国のみんなで蓄積し合って、幸せにkintoneカスタマイズしましょうぜ！特に、フロントエンド開発をバリバリやってきたJSプログラマー達の参戦をお待ちしてます！

他のkintone & webpack使いの他の人たちは、普通どうやってるんだろう？npm-scriptsでビルド結果を監視しつつAPIで自動デプロイとかもできそうですけど、Dropbox以外に良い方法あれば教えてくださいね〜。

ではまた！

1. ここ数ヶ月で一気に情報増えましたよね！この調子でkintone & webpackどんどん盛り上がってほしいです ↩