# $ is not a functionのエラーが表示される

**URL:** <https://community.cybozu.dev/t/topic/5857>\
**Category:** kintone 開発相談\
**Created:** [2022 年 4 月 4 日午前 8:32 UTC](https://community.cybozu.dev/t/topic/5857 "2022-04-04T08:32:49Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account395](https://avatars.discourse-cdn.com/v4/letter/l/53a042/32.png) [@Legacy\_Account395](https://community.cybozu.dev/u/Legacy_Account395)\
**Post date:** [2022 年 4 月 4 日午前 8:32 UTC](https://community.cybozu.dev/t/topic/5857/1 "2022-04-04T08:32:49Z")

</div>

[https://developer.cybozu.io/hc/ja/articles/204528874-spin-js-%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6-%E3%82%B9%E3%83%94%E3%83%8A%E3%83%BC-%E3%83%AD%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3-%E3%82%92%E8%A8%AD%E5%AE%9A%E3%81%97%E3%82%88%E3%81%86-](https://developer.cybozu.io/hc/ja/articles/204528874-spin-js-%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6-%E3%82%B9%E3%83%94%E3%83%8A%E3%83%BC-%E3%83%AD%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3-%E3%82%92%E8%A8%AD%E5%AE%9A%E3%81%97%E3%82%88%E3%81%86-)

&nbsp;

上記の記事を参考にカスタマイズボタンが押されたときにスピナーを動作させるようにしております。

jQueryの読み込みがうまくいっていない？のか、「if ($(‘.kintone-spinner’).length == 0) { 」の行で

「 $ is not a function」と表示されてしまいます。

ソースコードのどこが間違っているのかご教授いただけないでしょうか。

&nbsp;

URLは以下を指定しています。

[https://js.cybozu.com/jquery/3.6.0/jquery.min.js](https://js.cybozu.com/jquery/3.6.0/jquery.min.js)

[https://js.cybozu.com/spinjs/2.3.2/spin.min.js](https://js.cybozu.com/spinjs/2.3.2/spin.min.js)

■ソースコード

(function($) {

&nbsp; kintone.events.on(‘app.record.index.show’, function(event) {

&nbsp; &nbsp;&nbsp;

const Button = document.createElement(“button”);

&nbsp; &nbsp; &nbsp; &nbsp; Button.id = “invoiceButton”;

&nbsp; &nbsp; &nbsp; &nbsp; Button.innerHTML = “ボタン”;

&nbsp; &nbsp; &nbsp; &nbsp; Button.onclick = function(){

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; showSpinner();

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; hideSpinner();

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; };

&nbsp; &nbsp; &nbsp; &nbsp; invoiceButton.classList.add(“kintoneplugin-button-normal”);

&nbsp; &nbsp; &nbsp; &nbsp; invoiceButton.classList.add(“Button”);

&nbsp;

&nbsp;

function showSpinner() {

&nbsp; &nbsp; &nbsp; &nbsp; // 要素作成等初期化処理

&nbsp; &nbsp; &nbsp; &nbsp; if ($(‘.kintone-spinner’).length == 0) {

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // スピナー設置用要素と背景要素の作成

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var spin\_div = $(‘\<div id =“kintone-spin” class=“kintone-spinner”\>\</div\>’);

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var spin\_bg\_div = $(‘\<div id =“kintone-spin-bg” class=“kintone-spinner”\>\</div\>’);

&nbsp; &nbsp;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // スピナー用要素をbodyにappend

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(document.body).append(spin\_div, spin\_bg\_div);

&nbsp; &nbsp;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // スピナー動作に伴うスタイル設定

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(spin\_div).css({

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ‘position’: ‘fixed’,

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ‘top’: ‘50%’,

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ‘left’: ‘50%’,

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ‘z-index’: ‘510’,

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ‘background-color’: ‘#fff’,

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ‘padding’: ‘26px’,

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ‘-moz-border-radius’: ‘4px’,

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ‘-webkit-border-radius’: ‘4px’,

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ‘border-radius’: ‘4px’

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(spin\_bg\_div).css({

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ‘position’: ‘fixed’,

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ‘top’: ‘0px’,

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ‘left’: ‘0px’,

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ‘z-index’: ‘500’,

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ‘width’: ‘100%’,

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ‘height’: ‘200%’,

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ‘background-color’: ‘#000’,

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ‘opacity’: ‘0.5’,

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ‘filter’: ‘alpha(opacity=50)’,

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ‘-ms-filter’: “alpha(opacity=50)”

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // スピナーに対するオプション設定

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var opts = {

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ‘color’: ‘#000’

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; };

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // スピナーを作動

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; new Spinner(opts).spin(document.getElementById(‘kintone-spin’));

&nbsp; &nbsp; &nbsp; &nbsp; }

&nbsp; &nbsp; &nbsp; &nbsp; // スピナー始動（表示）

&nbsp; &nbsp; &nbsp; &nbsp; $(‘.kintone-spinner’).show();

&nbsp; &nbsp; }

&nbsp; &nbsp; // スピナーを停止させる関数

&nbsp; &nbsp; function hideSpinner() {

&nbsp; &nbsp; &nbsp; &nbsp; // スピナー停止（非表示）

&nbsp; &nbsp; &nbsp; &nbsp; $(‘.kintone-spinner’).hide();

&nbsp; &nbsp; }

&nbsp;

&nbsp; kintone.app.getHeaderMenuSpaceElement().appendChild(Button);

&nbsp;

&nbsp; return event;

&nbsp; &nbsp; });

})(jQuery);

---

<div class="post-metadata">

**Author:** ![Legacy\_Account63](https://avatars.discourse-cdn.com/v4/letter/l/6de8d8/32.png) [@Legacy\_Account63](https://community.cybozu.dev/u/Legacy_Account63)\
**Post date:** [2022 年 4 月 5 日午前 12:00 UTC](https://community.cybozu.dev/t/topic/5857/2 "2022-04-05T00:00:44Z")

</div>

一番最初に怪しむべきは、jQueryがよみこめてるかなんですが、

JavaScriptのURL指定に、jQuery のURLが指定できているか  
できているとして、順序が正しいか（jQueryが一番上にくるように）

をまずは確認するといいと思うんですが、いかがでしょうか。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account395](https://avatars.discourse-cdn.com/v4/letter/l/53a042/32.png) [@Legacy\_Account395](https://community.cybozu.dev/u/Legacy_Account395)\
**Post date:** [2022 年 4 月 5 日午前 1:18 UTC](https://community.cybozu.dev/t/topic/5857/3 "2022-04-05T01:18:18Z")

</div>

[村濱一樹](https://community.cybozu.dev/hc/ja/profiles/1118414956-%E6%9D%91%E6%BF%B1%E4%B8%80%E6%A8%B9)&nbsp;様

URLは一番上にしていたため、ソースコードが複数あるため該当のソースコードを一番上にしてみたところ、無事動きました。

お世話になりました。