初心者の僕がkintoneでプラグインを作るまで【Mac】

All
スポンサーリンク

 kintone プラグインの開発準備

kintoneで使えるプラグインを作ってみようと思って実際に作ってみたんですが、いろんなとこでつまずいてしまいました。kintoneアプリの開発(カスタマイズ)のやり方については cybozu developer network に書いています。kintone プラグインの開発についても cybozu developer network kintone プラグインの開発準備という記事に書いているのですが…

アプリのカスタマイズをやりやすくするプラグインについても記事を書いているのでぜひ、そちらもみてみてください。kintoneでアプリをCSSや、javascriptでカスタマイズする時便利なプラグイン!

記事(kintone プラグインの開発準備)をみながら作業を進めていったものの難しくて…ポイントだけ整理して、載せたいと思うのでぜひ、参考にしてみてください!あ、、その前にプラグインってなんだ?って思ったあなた!プラグインとはアプリケーションソフトに機能を追加、拡張するためのプログラムのこと。今あるアプリにもっと使いやすい機能をいれるためのプログラムをパッケージ化したものがプラグインみたいですね!

この記事と(kintone プラグインの開発準備)を見比べながらぜひ、プラグインの開発に挑戦してみてください。

作業の手順としては

  1. plugin-sdk(パッケージングファイル)のDownload
  2. プラグインに必要なファイルの作成
  3. パッケージング化
  4. 実装

 

 plugin-sdk(パッケージングファイル)のDownload

パッケージング化するためにplugin-sdk-master.zipというファイルを ここ からダウンロードしないといけません。

Download ZIP をクリックしダウンロードします。

 プラグインに必要なファイルの作成

plugin-sdk-master.zipを展開したら pakage.sh というファイルがあるので、そこにプラグインにしたいファイルを作ってあげます。ここではsampleというファイルを作成しました!

sampleファイルの中身にはCSS、html、image、js、manifest.jsonという4つのファイルがあります。

CSSの中身はkintoneで、スタイルシートを使いたい場合はここにファイルを置いてあげます。

一番左がプラグインでスタイルシートを使う場合のcssで真ん中がプラグイン設定画面に必要なcss一番右にあるのが実際動作する画面できくcssになっています!

htmlの中身は、設定画面で表示されるものになります。ファイル名がconfig.html

imageの中身はプラグインのiconになるものをいれてあげます。

jsの中身はプラグインの設定画面できくconfig.jsと実際使用する画面で動くjsをいれてあげます。

あとは、そのファイルを定義してあげるmanifest.jsonの作成になります。

Point

このmanifest.jsonでちゃんと設定ができていなかった場合プラグインを実装する前にエラーがでてしまいます!

manifest.jsonの設定については この記事 を参考にしてください!

{
    "manifest_version": 1,
    "version": 1,
    "type": "APP",
    "name": {
        "ja": "サンプルプラグイン",
        "en": "sample plugin",
        "zh": "插件的例子"
    },
    "description": {
        "ja": "これはサンプルプラグインです。",
        "en": "This is sample plugin.",
        "zh": "这是插件的例子"
    },
    "icon": "image/sample.png",
    "desktop": {
        "js": [
            "https://js.cybozu.com/jquery/jquery-1.11.0.min.js",
            "js/sample.js"
        ],
        "css": [
            "css/51-modern-default.css",
            "css/sample.css"
        ]
    },
    "config": {
        "html": "html/config.html",
        "js": [
            "https://js.cybozu.com/jquery/jquery-1.11.0.min.js",
            "js/config.js"
        ],
        "css":[
            "css/51-modern-default.css",
            "css/sample.css"
        ]
    }
}

これでプラグインに必要なファイルは全て整いました!次にパッケージング化についてです。

Toshikazu Hirano

Nagasaki→Tokyo→China(Shenzhen)

1992/07/02
宮崎産まれ、長崎育ち。

前職は、東京のベンチャー企業(IT関連)で仕事をしておりその経験からホームページ作成。運営を行なっています。現在は、中国(深圳市)に住んでおりホームページの運営からYouTube動画の作成等いろいろな活動をしています。

Toshikazu Hiranoをフォローする
All
スポンサーリンク
Toshikazu Hiranoをフォローする
All One's Life

コメント

Translate »