見出し画像

「初心者がVue.jsに触れてみた」HTMLファイルにコピペしてドットカーソルを使う（vue-cursor-fx)

はっしゅ

はっしゅです。

最近Vue.jsの勉強をはじめました。


Vueに限らずJavaSprictのコピペって動かなくないですか！？


Vue.jsの情報もまだまだ少なく、フレームワークやライブラリの使い方がそもそも分かってないとコピペすら躓く方も多いかと。

後で触れていますが外部JSの読み込みは順序だったりお作法を知っていないとコピペだけではうまくいかないことに気づきました。

とりあえず動かすことはモチベーションにもなり、少しいじって理解を深めるなどなど学習に有効な手段かと思います。

コピペすらつまづくとやる気なくなりますよね。。

ツイートにもあるように、おそらくなんでもないことに半日をついやしてしまったので同じ目に合う方が一人でも減るように書いておきます。

このnoteで出来ること

vue-cursor-fxカーソル - Google Chrome 2020_03_20 17_28_08 (2)

.htmlにコピペするだけ。Vue.jsを使ってマウスカーソルを上の画像のように変更できます。

カーソルの動きの様子はツイートからも確認できます。


さっそく使いたい方はなんでもよいので.htmlファイルに次のコードをそのまま張りつけて使って下さい。コードの後にわかる範囲の説明を書いておきます。エディタはVScodeを使用しています。

<!DOCTYPE html>
<html lang="ja">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>vue-cursor-fxカーソル</title>

 <!--vue-cursor-fx.cssのCDN-->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luxdamore/vue-cursor-fx@1.4.0/dist/CursorFx.css">
</head>

<body>

 <div id="app">
   <cursor-fx color="#f08080"></cursor-fx>
 </div>

 <!--Vue.jsのCDN-->
 <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 <!--vue-cursor-fx.js-->
 <script src="https://cdn.jsdelivr.net/npm/@luxdamore/vue-cursor-fx@1.4.0/dist/CursorFx.umd.min.js"></script>
 <script>
   const CursorFx = window['CursorFx'].CursorFx;
   Vue.component(
     CursorFx.name,
     CursorFx
   );

   new Vue({
     el: '#app'
   });
 </script>
</body>

</html>


githubにも同じコード置いてます。



ここから簡単にですが説明していきます。まあまあ時間ある方向けです。

まずはこれ。

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luxdamore/vue-cursor-fx@1.4.0/dist/CursorFx.css">

</head>の上に貼り付けます。CSSのCDNをインストールしています。

次はこれ。

 <div id="app">
   <cursor-fx color="#f08080"></cursor-fx>
 </div>

<body>内に貼り付けてください。これでカーソルの設置は完了です。


次はJavaSprict(Vue.js)のCDNを読み込ませます。


 <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 <script src="https://cdn.jsdelivr.net/npm/@luxdamore/vue-cursor-fx@1.4.0/dist/CursorFx.umd.min.js"></script>

1行目はVue.jsのCDN。これがないとVue.jsは動きません。

1行目に書くことが重要です。

がおそらく当たり前すぎてなかなかここを書いてくれている、そもそもこの一行を追加することを書いている記事をみつけられずかなり時間がかかりました。

CDNはVue.js公式ページにあります。


2行目はvue-cursor-fxのCDN。vue-cursor-fxについては元ネタが参考になります。


最後の<sprict>はvue-cursor-fxライブラリを取り込み、さらにそれをVue.componentに取り込みます。

<script>
   const CursorFx = window['CursorFx'].CursorFx;
   Vue.component(
     CursorFx.name,
     CursorFx
   );

   new Vue({
     el: '#app'
   });
 </script>

<sprict>はまとめて</body>の上に書いてください。このような外部JSの読み込みには順序があるようです。初心者なりにかなり悩みましたが、次の記事を参考に順序を変えるという発想に至りました。



説明は以上です。ここからは余談ですのでかなり時間のある方の暇つぶし向けです。

カーソルのカラーを変更する方法。<body>内カーソルを設置したコードです。

<div id="app">
   <cursor-fx color="#f08080"></cursor-fx>
 </div>

このコード内のcolor="　 "の「”　 ”」内を変更するとカラーを変更できます。



CSSのCDNについてです。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luxdamore/vue-cursor-fx@1.4.0/dist/CursorFx.css">

このコード内のhttps//部分をブラウザで見てみるとCSSのコードが書かれています。

.is-cursor-fx-active,.is-cursor-fx-active *{
 cursor:none
}

.cursor-fx[data-v-2f69e36a]{
 color:var(--color,#333);
 -webkit-transition:all .18s ease;transition:all .18s ease
}
.cursor-fx--hover[data-v-2f69e36a]{
 color:var(--color-hover,#333)
}
.cursor-fx__inner[data-v-2f69e36a]{
 position:absolute;
 top:0;
 left:0;
 border-radius:100%;
 -webkit-transition-timing-function:ease;
 transition-timing-function:ease;
 -webkit-transition-duration:.23s;
 transition-duration:.23s;
 -webkit-transition-property:color,width,height,background-color,border-radius,border-color;transition-property:color,width,height,background-color,border-radius,border-color;pointer-events:none;will-change:auto
}
.cursor-fx__inner__outside[data-v-2f69e36a]{
 border:1px solid
}
.cursor-fx__inner__custom[data-v-2f69e36a],.cursor-fx__inner__outside[data-v-2f69e36a]{
 width:64px;height:64px
}.cursor-fx__inner__inside[data-v-2f69e36a]{
 width:6px;height:6px;background-color:currentColor
}
.cursor-fx--shape-square>.cursor-fx__inner[data-v-2f69e36a]{
 border-radius:0
}

となっておりコピーしてstyle.cssなんかで保存すると

<link rel="stylesheet" href="style.css">

CDNの部分を置き換えてローカルに読み込ませることもできます。


Vue.jsをとりあえず始めたい方は

がおすすめです。実際にエディタを触りながら分かりやすく学習できるので最初に本や公式ガイドを見て挫折しそうな方はぜひ。


以上でnoteは終わりです。JavaSprictのコピペがスムーズにできると

CODEPENやJSFiddleからコピペするなどかなりJavaSprictの引き出しが増えるかと。


さいごに

最後まで読んでいただきありがとうございます。今回初めてのnoteでした。


おまけ













この記事が気に入ったらサポートをしてみませんか？