jQueryプラグインの使い方が分かりません（初心者）

ちょっとしたWEBアプリを作るにあたり、「リッチなタイポグラフィを実現するjQueryプラグイン10選」というサイトから
「CircleType.js」https://github.com/peterhry/circletype

というプラグインを使わせてもらおうと思ったのですが、ダウンロード先のGitHubというサイトにも慣れていないのもあり、ここからどうすれば良いのかが分かりません。

jQuery自体はProgate等で使い方は学習しており、GitHubのページを見ると、以下のように書いてあります：

Installation
In a browser:

↑とりあえずこの<script>タグを入れるというのは分かるのですが、以下の

Using npm:

$ npm i circletype --save
Load ES module:

import CircleType from `circletype`;

この辺がちょっとわかりません。
ファイル一式をダウンロードしましたが、これはindex.html(jQueryを使いたいファイル)と同じフォルダに、何か別のファイルを入れなければ動かないのでしょうか？

それとも普通のjQueryのように、ここでのダウンロードとかは何もする必要がなく、

このタグさえ入れておけば簡単に使えるのでしょうか？

というかこれ、説明も全て英語だし、英語力+JavaScriptの知識もある程度必要だったりしますか？プラグイン借りるだけだし、簡単に使いたいのですが・・・

行動規範の内容に同意します

回答2件

こんにちは！

Using npm:

$ npm i circletype --save
Load ES module:

import CircleType from `circletype`;

この辺りは気にしなくて大丈夫です！こちらはNode.jsで便利なパッケージを管理するためのツールです。

それとも普通のjQueryのように、ここでのダウンロードとかは何もする必要がなく、
<script src="circletype.min.js"></script>
このタグさえ入れておけば簡単に使えるのでしょうか？

この認識でほぼほぼ合っているかと思います。ただうまくいかないという事は恐らく存在しないURLを指定しているのではないでしょうか？
例えば該当のjQueryライブラリを使いたい所がhttp://ninnikumaru.com/というURLであったとき

<script src="circletype.min.js"></script>

上記のようにhtmlファイル上で指定するとhttp://ninnikumaru.com/circletype.min.jsというURLでアクセスできるファイルが読み込まれます。
もしこのURLでアクセスしても何も見つからない場合はパス指定に誤りがあります。

因みにcircletype.min.jsはdist配下に置いてあるのでこちらをhttp://ninnikumaru.com/circletype.min.jsで読み込めるようパスを指定すれば使えるようになるはずです！

お力になれたか分かりませんが頑張ってください????

投稿2019/12/26 01:07

Recaldent

総合スコア17

ninnikumaru

2019/12/26 14:32

index.html ファイルの<head>内に、 jQuery のCDNと一緒に <script src="js/circletype.min.js"></script> という風に置き、（jsフォルダ内に circletype.min.js ファイルをダウンロードして置きました）それからどうやって使うのか分からなかったので、こちらの使用例のページ（https://circletype.labwire.ca/）にあるように、 <h2 id="demo1">Here’s some curved text flowing clockwise.</h2> という文をindex.html　内に置いてみましたが、文字はそのまま出るだけで装飾効果が出てきていません。そもそも、h2タグを使えば文字効果が出るのか？ id指定なのか？その辺も分からないのです。どこかに書いてありますか？？たびたびすみません（汗）

Recaldent

2020/01/07 00:56 編集

こちら回答が遅くなってしまいましたがまだ未解決な感じでしょうか？ > <h2 id="demo1">Here’s some curved text flowing clockwise.</h2> > という文をindex.html　内に置いてみましたが、文字はそのまま出るだけで装飾効果が出てきていません。 <script src="js/circletype.min.js"></script> が正しく読み込まれているのなら、あとはjsで処理を書くだけです！ https://circletype.labwire.ca/#demo-box1 こちらを例にすると <script> new CircleType(document.getElementById('demo1')).radius(384); </script> </body>直前に↑の<script>を設置してあげれば恐らく文字が装飾されます！うまくいかない場合は、各種ブラウザのデベロッパーツールを開けば何が問題か教えてくれます。 https://saruwakakun.com/html-css/basic/chrome-dev-tool > そもそも、h2タグを使えば文字効果が出るのか？ h2に限定される訳ではないと思います、上の手順でうまく装飾されたらh1やstrongなどで試してみると面白いかもしれません！ > id指定なのか？先ほどscript内に書いたjsコードに`document.getElementById('demo1')`という記述があったかと思います。これは、今表示されているhtmlドキュメント上に存在する`id='demo1'`の要素を取得するという処理なのでここを変更すればid指定か、それともclass指定か、はたまたname指定か、という風に好きにできると思います。ただ一点注意していただきたいのは、id指定は現在表示しているhtmlドキュメント上で唯一の存在であることです。他のclass名などは複数つけれてしまうので、要素の特定が少々ややこしい事になる恐れがあります。このライブラリの公式リファレンスでもid指定のデモしかないので、よっぽどのことがない限りはid指定で装飾するのが良いかもしれません。頑張ってください！

行動規範の内容に同意します