kintoneプラグイン開発でつまずきやすいポイント

フォローする

(著者:Cstap 武井 琢治)

Index

 

こんにちは。サイボウズスタートアップスの武井です。

ここでは、kintoneでプラグインを開発する際、
よくつまずいてしまうポイントや、プラグイン開発において避けては通れない道など、
あるあるネタを中心としたTipsをまとめていきたいと思います。

なお、基本的な開発手順につきましては、こちらの記事を参照してください。

①Windows版プラグイン開発環境構築

私自身、少々ここでハマったため、
Windowsにおける開発環境の構築方法をド丁寧に書いていきます。
ここでは2通りの方法をご紹介します。

  • Cygwin」を利用した構築方法
    →ローカルで開発したい人向け。
  • Cloud9」を利用した構築方法
    →クラウドで開発したい人向け。
    環境構築に手間をかけたくない人にもオススメ。
    ※クレジットカード情報入力が必須。

「Cygwin」を利用した構築方法

1.Cygwinウェブサイトにアクセスします。

2.画面左上の「Install Cygwin」をクリックします。

3.下図のどちらかのリンクをクリックします。
32bitのOSであれば上部リンクを、64bitのOSであれば下部のリンクをクリックします。

※OSが何bitかを調べるには、コマンドプロンプトにて「echo %PROCESSOR_ARCHITECTURE%」を入力し、
 返り値に「AMD64」など、"64"が含まれていれば64bit、「x86」などであれば32bitとなります。




4.ダウンロードしたファイルを実行します。
※以下、参考画像は64bit版のものとなります。


5.「次へ」を押します。


6.「次へ」を押します。


7.「次へ」を押します。


8.「次へ」を押します。


9.「次へ」を押します。


10.一番上のURLを選択して「次へ」を押します。


11.Select Packagesの画面になったら、画面上部の「Search」に"zip"と入力します。


12.画面の中から「Archive」をクリックします。


13.表示された行の中からPackage列の先頭が「zip」と「unzip」になっているものを見つけ、
New列の「Skip」になっているところをクリックし、最終的に下図のようになるようにします。


14.「次へ」を押します。


15.インストールの完了を待ちます。

16.「Create icon on Desktop」にチェックを入れて「完了」を押します。
※説明の用に供するため。不要であればチェックを入れなくても可。


17.インストール時に指定した場所にフォルダができていることを確認します。
上記例の場合は「C:\cygwin64」。
これで環境構築は完了です。
続けてパッケージングの方法を説明します。

18.plugin-sdkからファイルをzipでダウンロードします。

19.zipを解凍し、「package.sh」を「C:\cygwin64\usr\src」のフォルダ内にコピーします。


20.「C:\cygwin64\usr\src」のフォルダ内にパッケージングしたいプラグインソース一式が入ったフォルダを配置します。
ここでは、例として「appIndex」フォルダを配置しました。


21.デスクトップにできたCygwinアイコンから実行します。


22.「cd /」を入力します。


23.「sh usr/src/package.sh usr/src/appIndex/」を入力すると、以下のようになります。


24.「C:\cygwin64\usr\src\plugins」配下のフォルダに、plugin.zipが生成されました!!


※一度作成したプラグインを更新する場合は、
「sh usr/src/package.sh usr/src/appIndex/ usr/src/keys/appIndex.fnpjkphlgfmgeefjkcbkkoemholmncdb.ppk」のように、
コマンドの最後に秘密鍵のパスを追加します。

「Cloud9」を利用した構築方法

この方法は2016年10月現在、クレジットカード情報の入力が必須となってしまいました。
有料プランを選択しない限り、課金されることはないようです。
もし、それでも登録される方はこちらのサイトに従って登録してください。

ここでは、アカウント登録完了後からの構築・パッケージング方法について書いていきます。

1.画面中央の「Create a new workspace」を選択します。

2.画面上部の「Workspace name」を入力し、画面下部の「Create Workspace」ボタンを選択します。

3.少し待つと下図のような画面に遷移します。

4.「File」タブ内の「Upload Local Files」を選択します。

5.下図のようなポップアップが出るため、plugin-sdkからダウンロードした「package.sh」をポップアップ内にドラッグ&ドロップします。

6.ルートフォルダ配下に、パッケージングしたいプラグインソース一式が入ったフォルダを配置します。
アップロードの方法は「package.sh」と同じです。
ここでは、例として「appIndex」フォルダを配置しました。

7.画面下部のコマンドラインにて「sh package.sh appIndex/」を入力すると、以下のようになります。

8.「ルートフォルダ\plugins」配下のフォルダの中にプラグインファイルが生成されました!!

※一度作成したプラグインを更新する場合は、
「sh package.sh appIndex/ keys/appIndex.amcnoplgnlpkafegakjlohhmcjkaagak.ppk」のように、
コマンドの最後に秘密鍵のパスを追加します。
また、Cloud9のコマンドラインではタブを押すと入力補完をしてくれるので便利です。

②既に設定値がある場合は、プラグイン設定画面表示時に設定値をセットする

せっかくプラグイン設定画面で規定値をセットしてもらっても、
プラグイン設定画面再表示時に、何を設定していたか表示してあげないと不親切ですね。
(例:プラグイン設定で「埼玉県」を選択したのに、再びプラグイン設定画面を開いた時にデフォルトの「北海道」に戻ってしまう)

これはプラグインのプラグイン設定画面に対するJavaScriptの中に、以下のような記述をすることで解決できます。

この場合、保存時にconf['elm']をsetConfigで保存しておき、
それが入っていれば、これは2度目以降のアクセスなのだということが分かります。
従って、$('#element')は入力必須であるか、必須でない場合は保存時にconf['elm']にデフォルト値を入れてあげる必要があります。

※jQueryライブラリを読み込む必要があります。
※上記は文字列フィールド等の場合で、プルダウンやチェックボックス等の場合にはデータの授受方法がやや異なります。

③プラグインで使用するフィールドを自動的に追加する

既存のアプリではなく、新規アプリを作成してもらうことを前提としたプラグインというものがよくあります。
その場合、フィールドまで作ってもらうのは少々気が引けます。

そこで、以下のコードを書くことで、プラグインで使用するフィールドを自動的に追加してしまいましょう。

この例では「名前」という文字列フィールドと、
「ID」という数値フィールドを追加しています。

なお、追加処理終了後にリロードしているのは、
次の章段で説明するような、作ったフィールドをすぐにプラグイン設定画面で使用したいためです。
もし「フィールドは作るだけで、別にプラグイン設定画面では使わないよ」ということであれば、リロードは不要です。

④プラグインで使用するフィールドコードを直接入力させず、存在するフィールドの中からプルダウンで選択させる

これはすなわち下図のようなUIです。

フィールドコードを直接入力させると、開発者側は楽なのですが、
ユーザー側としては「フィールドコードを確認して入力する」という手間が発生してしまいます。

これは以下のようなHTML、コードにて実現可能です。

HTML

プラグイン設定画面のJavaScript

少々ややこしいですが、概ね以下のような処理をしています。

1.フォーム情報を取得。
2.フィールドの数だけ回す。
3.そのプルダウンで表示したいフィールドタイプ(上記例の場合、文字列と日付)のものだけプルダウンに追加する。
4.ただし、既に規定値がある(以前に保存したことがある=confがある)場合は、規定値が最上位に来るようにする。

また、プラグイン設定画面の表示上は「フィールド名」にしたいため、
optionタグのテキストはフィールド名を挿入し、name属性にフィールドコードを挿入しています。
これは、後のカスタマイズでこのフィールドコードを使用するためです。

プラグイン設定保存時にプルダウンで選択された選択肢のname属性をsetConfig関数で保存しておくことで、
後のカスタマイズでそのフィールドコードを使用することが可能になります。

※「51-modern-default.css」が必要です。

⑤プラグインで使用するカスタマイズビューを自動的に追加する

プラグインでカスタマイズビューを使用することがありませんか?
私はよくあります。

そこで、以下のようにカスタマイズビューを自動的に用意してあげたら、ユーザーは楽チンですね。

終わりに

プラグイン開発のあるあるTipsをお送りしましたが、いかがでしたでしょうか。
概ねどれもプラグインを作ろうと思うと通る道だったのではないかと思います。

皆様の素晴らしいkintoneプラグイン開発ライフの一助になれたら幸いでございます。

留意事項

本記事は、2016年10月現在の内容となります。
Windows10・Chrome 53.0.2785.143 m (64-bit)での動作を確認しています。

記事に関するフィードバック

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

ログインしてコメントを残してください。
Powered by Zendesk