こんにちは！サイボウズのしんしんです。
kintoneカスタマイズコンテストkintone hackの運営をしてきた僕から、2024年のチャンピオン株式会社現場サポート/KAIZENの永田亮介さんにお話を伺います。

kintone hack (本戦名 kintone show+case unlimited) 2022 登壇の様子

はい、永田亮介です。
現場サポートという会社に所属しています。そこではkintoneを自社で活用しています。
またKAIZENでは個人事業主としてkintoneを使ったシステム開発や、プラグイン販売などkintoneビジネスをしています。

2021年から挑戦しています！
毎年さまざまなアイデアを元に、発表しています。

• 2021年 ダイエットをkintoneでサポートするソリューション
• 2022年 kintoneスペース/アプリの一元管理機能
• 2023年 kintoneカスタマイズ用 JavaScript/CSSエディタプラグイン
• 2024年 帳票画面でのデータ入力機能

こう見ると、1年目は少しふざけすぎてしまった感じがしますね笑。

今回焦点を当てるのは、永田さんが2023年kintone hackで発表されたCustomize Editorというプラグインです。kintoneはJavaScriptやCSSを使ったカスタマイズが可能です。
ただし、カスタマイズ適用は、ローカルからのファイルアップロードが必要になります。

実際のCustomize Editorの動作イメージ

JavaScriptやCSSでkintoneをカスタマイズされる方向けの開発エディタプラグインです。
kintone上から直接コードを編集、反映できます。
具体的には、コードのハイライト表示や、入力補完機能、さらにkintoneカスタマイズ専用エディタならではのkintone各種API検索やAPI入力補助、Cybozu CDNとの連携が可能です。

もともと僕はkintoneユーザーでした。しかもkintoneの導入当初は、業務効率化のためカスタマイズを積極的に行っていました。
当初は、サイボウズ提供のサンプルプラグイン JSEdit for kintone を使って開発していましたが、自分の生産性をあげるために、多機能なエディタプラグインを作ることを決めました。

まず意識した点は、いつも使っているようなエディタと同様の使い心地にすることです。

たとえば、全画面表示、ファイルの並び替え、Ctrl+Sでのファイル保存。
そして、kintoneの各種APIの検索と、それをそのまま引用できるところですね。

ワンクリックで、kintone各種APIを引用できる機能

苦労したのはファイルの上書き動作です。
JavaScript / CSSカスタマイズ設定を変更するAPI を活用しています。
ただ、エディタ専用に作られているAPIではなかったのでファイル一意のIDがなく、上書きを実現する為に少し工夫が必要でした。

対処方法として、同一のファイル名で差し替えて更新するようにしています。そのため、同じファイル名を作らせない制御をしています。 ユーザー側からみると、ただファイルが上書き更新しているように見えるはずですが、こだわって作った部分です。

kintone hack 2023の後に公開したのですが、僕の個人事業KAIZENのサイトで、一番ダウンロードされているプラグインです。
皆さんに、KAIZENや僕を知ってもらうきっかけのひとつになっていると思います。 多くの方に使っていただけていることはうれしいですし、kintoneのカスタマイズをしている人が多いことに気付いたのは、発見でした。

kintone hack/show+case unlimited2023での発表の様子(Cybozu days内)

はい！もちろん使っています。

KAIZENで、お客様環境のkintoneカスタマイズを行う際に使っています。 その場で、すぐにコーディングを始められることが強みだと思っています。

自社サービスを公開した経験があったので、ハードルは高くなかったです。
またCustomize Editorは無料なので、運用の優先順位を下げて公開しています。そして僕も使っているので、不具合対応をはじめとするアップデートは適宜行っています。
プラグインを公開してみたい方は、まず無料でもいいので公開してみるといいと思います。

しかし有料版のプラグイン公開は、責任が伴いますね。少し公開のハードルは高かったです。 でも僕は不具合があった際、超スピードで解決すればいいと思っています笑。

kintone未経験の状態から、kintoneビジネスの個人事業を立ち上げ、kintoneカスタマイズコンテストで優勝するまでに至った永田さんにkintoneのカスタマイズの特徴や、学習方法について伺いました。

すでにプログラミングを経験されている方なら、フロントサイドだけ実装すればいいことが大きいでしょうね。そして、豊富にAPIが準備されているのでスピーディーに開発できます。

kintoneカスタマイズをする際は、プロトタイプがスピーディーに作れるkintoneの特徴を活かし、まずアプリを作成し、依頼者に確認しながら進めることが重要だと思っています。

はい。kintoneが初めてのプログラム実装でした。 ユーザー時代には、800行にも及ぶif文、for文を書いていたこともあります笑。 もちろん今はちがいますよ笑。

大きくは、APIを理解し、実際に使って動かすことが重要だと思います。

まず、困ったことがあった時は、「kintone “したいこと”」で検索しました。 たとえば、「kintone 値コピー」 「kintone ボタン設置」などですね。 そうすると、だいたいcybozu developer networkが検索結果にでます。その検索結果を元に学んでいました。
特に、 cybozu developer community は重要で、自分と近しい悩みを持っている人が必ずいます。 質問に対応した回答のコードを解析し、その後、自分なりにコードを書いて動作させていました。 自分で動いた瞬間に理解ができたので、実際にコードを書いて動かすことは重要だと思います。

cybozu developer communityは 技術者同士で、困りごとや悩みを具体的に相談、解決していくことを目的とするコミュニティ

また僕が始めたころは今よりもkintone関連の情報が少なかったので、聞ける人も少なかったです。 割と根性で乗り切ったかもしれませんね笑。

根性…といいたいところですが…笑。

今はkintone関連の記事も、kintoneカスタマイズに関わっている人も増えているので、他の方に聞いてみるのもいいと思います。 cybozu developer communityで質問すれば回答してくれるかもしれません。 ただcybozu developer communityで質問する際は回答を理解すること。 そして回答を元に改善し動かし、そこから学ぶ。知識を自分のものにするという真の想いがないとスキルは身につきません。

cybozu developer communityはつまずいた時に、糸口を見つけるぐらいのつもりで使うのがいいと思います。 あと簡単なコードならChatGPTも教えてくれますよ。

はい、ときどき回答していました。 まず、質問一覧をみて自分の技術レベルを測れます。 もし自分にわからないものがあっても、あとで回答をみて学ぶことができます。

そして回答する際は、自分の回答を完璧だと思わないのが重要です。 違う回答がきた時、「そういう方法もあるんだ！学びになった！」そう思えるといいですね。

ぜひ皆さんもチャレンジしてみてください！

cybozu developer communityは様々な内容の質問が並ぶ

皆さんいかがでしたでしょうか？

今は、kintoneの技術情報は数多く提供されており、習得しやすい環境が整っています。
永田さんのように、プログラミング未経験の状態から、kintoneカスタマイズコンテストに優勝することもできます。 ぜひ、永田さんの学習方法を参考にしてみてください。

そして、永田さんは2025年、kintone hackの本戦にシードで挑戦されます。
今年も永田さんの活躍が楽しみですね！

永田 亮介（ながた りょうすけ）
鹿児島にある建設業向けのクラウドサービスを提供するITベンチャー株式会社現場サポートで自社製品やkintoneの導入支援に従事。一方で、個人事業として立ち上げた「KAIZEN」にて、kintoneの導入や、1社1社の業務に合わせたアプリ開発及び業務改善、プラグイン開発・提供などを行う。

株式会社現場サポート： https://www.genbasupport.com/

KAIZEN（個人事業）： https://kaizen-style.com/

kintone hackは、技術とアイデアでkintoneの新たな可能性を切り拓くコンテストです。
毎年Cybozu Daysの人気セッションとして注目を集める、kintone hackというイベントの場で、あなたのアイデアと技術力を披露しませんか？
今年は、8月22日に予選（QUALIFIER）、10月27日に本戦（SHOW+CASE Unlimited）を開催します。

申込期限：6/20（金）※定員になり次第締め切り
詳しくは エントリーサイト をご覧ください。