Kintone用 JavaScript  第1弾「タブメニュー」

2016/11/12

全部フリー!!

熊谷美威

スマイルアップでは、プラグインの提供は行いません。

その代わり、全て無料で、サポート無しですが、そのまま組み込めるJavaScriptファイルの提供をさせて頂きます。

◆機能

フォーム編集画面だけで、簡単にタブの追加と削除が可能となります。

タブは、ラベルの配置で決まるようになっていて、簡単なルールに基づきラベルを設置するだけで、タブが増えます。

編集画面←→閲覧画面の切り替わりにも対応しており、スクロールした場所を覚えておくようにしました。

タブメニューが増えた場合、横にダァーっと長くなってしまうのが難点ですが、そこはCSSファイルを直接いじって調整してください(笑)

私は、タブメニューの横幅を狭くして、文字数を3文字程度に減らして横に沢山並べるようにしています。

(ちなみに私はプログラムは全く出来ません。)

 

◆利用イメージ

%e3%82%bf%e3%83%96%e6%a9%9f%e8%83%bdgif

 

なぜ無料?

無料で公開する理由は以下のとおりです。

1,プラグインだと、サイボウズのプラグインの仕様変更や、kintoneのバージョンアップ時に
  使用不可となる可能性がある。

2,フリーで公開する事で、kintoneの利用促進や、足りない部分を手軽に補って欲しい。

3,再利用OKですので、ご自由にカスタマイズに活用可能

これをサポートとしようと思うと、様々なコストと手間がかかります。

しかし採算を取る為、有料化したとして採算が合うまで売れるかどうかわかりません。

これで、商売をしようとも思っていないので、思い切って無料で公開する事にしました。

 

◆tab.zipファイルダウンロード(zipファイルとなっておりますので展開してご利用ください。)

   http://niconico-news.com/kintone_javascript/tab.zip

  ◆参考 JavaScriptやCSSでアプリをカスタマイズする

   https://help.cybozu.com/ja/k/user/js_customize.html

  展開した、ファイルは 「tab.js」「tab.css」の2つのファイルとなります。

 

◆JavaScript / css の組込

それぞれ、組込みたい「アプリの設定」画面の「JavaScript / cssでカスタマイズ」にて、下図のように組込んでください。

tab

 

◆利用方法

タブメニューJavaScriptを組込んだら、設定画面の、フォーム編集にてフィールドの配置だけで利用できます。

 

1,「スペース」フィールドを上部に配置し、要素IDを「tab-mask」にします。

tab2

 

 

2,次にもう一つ、「スペース」フィールドを「tab-mask」の下部に配置し、要素IDを「tab-menu」にします。

tab3 

3,利用するフォームを下記の吹き出しのルールに沿って、それぞれ配置します。

 

%e5%85%a8%e9%83%a8%e3%83%95%e3%83%aa%e3%83%bc%ef%bc%81%ef%bc%81%e3%82%bf%e3%83%96%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc%e7%84%a1%e6%96%99%e5%85%ac%e9%96%8b

 

 

編集が終わったら、「フォームを保存」 → 「アプリを更新」で、有効にして動作確認を行ってください。

なお、組込方法や、動作に関するお問い合わせには一切お答えできませんので ご了承ください。

 

 

今後の公開予定JavaScript

 ○手書きJavaScript

こういうの作れないって、話したら、うちのプログラマーが、Canvasっていうのを使ってちゃちゃっと作った。

ビックリしました。

でも、画像で保存されないので、画面で見るだけです。(笑)

印刷もされません。そのうちバージョンアップするかも知れません。

tegaki2 tegaki

 

 ○取得したルックアップ値を自由に編集して保存

通常、ルックアップで取得したフィールドの値は編集できませんが、編集可能にして保存出来ます。

参照しているフィールドの値も(下図の場合だと参照フィールド)バージョンアップ前は変更して保存出来ましたが、

現在出来ません。そのうち、改良するかも。

syutoku

 

 ○関連アプリ表示JavaScript

別アプリで、関連するアプリを登録しておき、一覧画面の「関連アプリ一覧」をクリックすると

画面左に関連するアプリが表示される

kanren