はてなブックマーク

Vue Split Panesとは Vue Split Panesは、区切り線をドラッグで可変できるコンポーネントライブラリです。 レスポンシブへの対応、タッチデバイスのサポートなども完備されています。 インストール 以下のnpm、CDNを使ってインストールします。 npm npm i --S splitpanes CDN <script src="https://unpkg.com/splitpanes"></script> <link href="https://unpkg.com/splitpanes/dist/splitpanes.css" rel="stylesheet"> gitリポジトリは以下から取得できます。 https://github.com/antoniandre/splitpanes 導入手順 1. ライブラリの取り込み （1）webpack等の場合 [注意]モジュ

<script src="https://unpkg.com/vue-select@latest"></script> <link rel="stylesheet" href="https://unpkg.com/vue-select@latest/dist/vue-select.css"> 導入手順 管理人が行った、動作確認サンプルを実装するために、以下の手順でソースコードを導入していきます。 このサンプルでは、検索機能付きのセレクトボックスを実装します。 step 1ライブラリの呼び出し ES6等で実装する場合 import Vue from 'vue' import vSelect from 'vue-select' import 'vue-select/dist/vue-select.css'; UMDで実装する場合（CDNを使用する場合） const vSelect = VueS

VeeValidateとは VeeValidateは、Vue.js用のリアルタイムバリデーションコンポーネントライブラリです。 ユーザーによって入力された値が不正な場合に、リアルタイムにエラーを表示させることができます。 バリデーションパターンは全部で27種類備えています。 さらにカスタムバリデーションとして、自作のバリデーションを実装することも可能です。 Vue.js用のバリデーションライブラリでは、最大の人気があります(vuelidateが肉薄してますが。 バリデーションライブラリで悩んだら、ひとまずこのライブラリを選択しておけば問題ありません。 【動画サイズ：154KB】

vuecsvとは vuecsvは、配列をCSV形式でダウンロードできるライブラリです。 option機能が搭載されており、改行コードを指定することができます。 インストール 以下のCDNを使ってインストールします。 CDN <link rel="stylesheet" href="https://unpkg.com/vuecsv/dist/vuecsv.min.css"> <script type="text/javascript" src="https://unpkg.com/vuecsv/dist/vuecsv.min.js"></script> gitリポジトリは以下から取得できます。 https://github.com/ynishi/vuecsv 導入手順 配列をCSV形式でダウンロードします。 1. ライブラリの取り込み Vue.component("csv-download"

Vue.jsライブラリ リンク集 回転、拡大縮小、ズームできるvue用の画像ビューア「v-viewer」 v-viewerは、回転、拡大縮小、ズームなどができるvue用の画像ビューアコンポーネントライブラリです。 Viewer.jsを素に作られており、42のオプション、23のメソッド、9つのイベントを使用できます。 >>記事はこちら コイツ動くぞ？！的なアニメーションが付けられる「vue-kinesis」 vue-kinesisは、インタラクティブなアニメーションを作成できるコンポーネントライブラリです。 テキストや画像（jpgやSVG）などに、マウスの動きやスクロールに合わせてアニメーションさせたり、audioに合わせてアニメーションさせることもできます。 >>記事はこちら マウスカーソルをポインターみたいなドットにする「vue-cursor-fx」 vue-cursor-fxは、マウス

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/styles.css"> 導入手順 管理人が行った、動作確認サンプルを実装するために、以下の手順でソースコードを導入していきます。 このサンプルでは、CDNを使ってVue.jsでシンプルなモーダルを実装します。 step 1ライブラリの呼び出し ES6等で実装する場合 import VModal from 'vue-js-modal' UMDで実装する場合 const VModal = window["vue-js-modal"].default step

vue-grid-layoutとは vue-grid-layoutは、ドラッグやリサイズが可能なグリッドレイアウトコンポーネントです。 グリッドを再構築せずにウィジェットを追加または削除できたり、レイアウトをシリアル化して復元できます。 インストール 以下のnpm、yarn、CDNを使ってインストールします。 npm npm install vue-grid-layout --save yarn yarn add vue-grid-layout CDN <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-grid-layout.umd.min.js"></script> gitリポジトリは以下から取得できます。 https://github.com/jbaysolutions/vue-grid-layou

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-qrcode-reader.css"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-qrcode-reader.browser.js"></script> 導入手順 管理人が行った、動作確認サンプルを実装するために、以下の手順でソースコードを導入していきます。 QRコードリーダーを実装します。 step 1ライブラリの呼び出し まずライブラリを呼び出す為に、以下の２通りのケースで呼び出します。 （1）webpack等の場合 ※モジュール版は未検証です。 import QrcodeStream from 'vue-qrcode-re

vue-diagramsとは 「vue-diagrams」はreact-diagramsにインスパイアされたダイアグラムを実装するライブラリです。 ノードを色を変更したり、ノード同士を連結したりすることができます。 インストール 以下のnpm、CDNを使ってインストールします。 npm npm install vue-diagrams CDN <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-diagrams.min.js"></script> gitリポジトリは以下から取得できます。 https://github.com/gwenaelp/vue-diagrams 導入手順 ダイアグラムを実装します。 1. ライブラリの取り込み （1）webpack等の場合 ※モジュール版は未検証です。 import

VueMindmapとは VueMindmapはreact-mindmapに触発されたマインドマップを実装するライブラリです。 ノードを設定し、ノード同士をオブジェクトの配列で紐付けます。 編集モードのオンオフやスタイルの変更、サブノートの設定を行う事ができます。 インストール 以下のnpm、CDNを使ってインストールします。 npm npm install --save vue-mindmap CDN <link rel="stylesheet" href="https://unpkg.com/vue-mindmap/dist/vue-mindmap.css"></link> <script src="https://unpkg.com/vue-mindmap"></script> gitリポジトリは以下から取得できます。 https://github.com/anteriovieira

vue-scrolltoとは 「vue-scrollto」は、クリックイベントによって要素までイージングスクロールを実装するライブラリです。 window.requestAnimationFrameを使用してアニメーションを実行するため、最高のパフォーマンスが得られます。 イージングはbezier-easingを使って行われます 環境 インストール 以下のnpm、yarn、CDNを使ってインストールします。 npm npm install --save vue-scrollto yarn yarn add vue-scrollto CDN <script src="https://cdn.jsdelivr.net/npm/vue-scrollto"></script> gitリポジトリは以下から取得できます。 https://github.com/rigor789/vue-scrollTo

導入手順 管理人が行った、動作確認サンプルを実装するために、以下の手順でソースコードを導入していきます。 今回のサンプルはBootstrapベースのページネーションを実装します。 ライブラリの呼び出し まずライブラリを呼び出す為に、以下の２通りの呼び出しを選択します。 コンパイラを使用しない場合は、UMDを使ってください。 ES6等で実装する場合 import Paginate from 'vuejs-paginate' Vue.component('paginate', Paginate) UMDで実装する場合 Vue.component('paginate', VuejsPaginate) ページネーションメソッドを設定 サンプル用にforを使って、リスト用の配列itemsを設定します。 dateのperPageに1ページに表示するアイテム数を設定します。 またitemsにリストを設定

vue-upload-componentとは 「vue-upload-component」は、ファイルアップロードコンポーネントです。 以下の機能を実装できます。 ファイルアップロードコンポーネント マルチファイルアップロード ディレクトリのアップロード ドラッグアップロード ディレクトリのドラッグ 同時に複数のファイルのアップロード インストール 以下のnpm、CDNを使ってインストールします。 npm npm install vue-upload-component --save CDN <script src="https://cdn.jsdelivr.net/npm/vue-upload-component"></script> gitリポジトリは以下から取得できます。 https://github.com/lian-yue/vue-upload-component 導入手順 si

vue-chartjsとは 「vue-chartjs」はVue.js製のグラフやチャートを実装するライブラリです。 元々は「Chart.js」というGithubのスター 40,000 を超えるグラフやチャートを実装できるライブラリです。 棒グラフから円グラフ、線グラフなどなど様々なチャートに対応しています。 カラーバリエーションも豊富で、ほとんど何もしなくても美しいグラフを表示してくれます。 インストール 以下のnpm、yarn、CDNを使ってインストールします。 npm npm install vue-chartjs chart.js --sa yarn yarn add vue-chartjs chart.js CDN <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></s

はじめに この記事でちょうど200記事という事で、過去に書いたVue.jsのおすすめライブラリ17選をご紹介いたします。 表示系ライブラリ Vue.Draggable ドラッグ＆ドロップを実装するライブラリです。 私が記事にし始めた2016年頃はまだまだという感じでしたが、今は超大人気ライブラリの1つとなっています。 jQuery UI の draggableやsortable のような使い方ができます。 使い方はこちら Githubはこちら Vue-Lazyload 画像の遅延読み込みを実装するライブラリです。 軽量で使いやすいです。 使い方はこちら Githubはこちら Vue-good-table 高機能のテーブルコンポーネントを実装するライブラリです。 ソートやフィルターをもちろん、セル結合やチェックボックスなど、機能が多すぎて、まだ記事にしきれていません。 時間をみて更新していき

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/hooper.css"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/hooper.min.js"></script> 導入手順 1. ライブラリの取り込み webpack等の場合 import { Hooper, Slide } from 'hooper'; import 'hooper/dist/hooper.css'; export default { name: 'App', components: { Hooper, Slide } } WEBページの場合 new Vue({ el: "#app", components: { Hoop

はじめに 「V-Calendar」は、さまざま装飾を行う事ができるVueJS製のカレンダーコンポーネントです。 V-Calendarが凄いのは、言語の翻訳設定を無しでも自動で翻訳表示してくれます。 datepickerとしての機能もあります。 使い方は以下を参考 環境 Vue.js: 2.6.10 v-calendar: 0.9.7 インストール 以下のnpm、CDNのどれか一つを使ってインストールします。 npm npm install v-calendar@next CDN <link rel='stylesheet' href='https://unpkg.com/v-calendar/lib/v-calendar.min.css'> <script src='https://unpkg.com/v-calendar'></script> gitリポジトリは以下から取得できます。 h

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-good-table.css" rel='stylesheet'> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-good-table.js"></script> 導入手順 基本の使い方は以下になります。 1. Vue-good-tableプラグインを取り込む webpack等 import VueGoodTablePlugin from 'vue-good-table'; // import the styles import 'vue-good-table/dist/vue-good-table.css' Vue.use(VueGoodTablePlugin);

vuejs-datepickerとは Vue.jsのDatepickerライブラリを探したところ「vuejs-datepicker」を見つけました。 日付フォーマット、インラインモード、言語の翻訳にも対応していて非常に便利なのでご紹介します。 環境 この記事は、以下の管理人の検証環境にて記事にしています。

はじめに Googleが推奨している構造化データの「JSON-LD」の@type って何が設定できるんだろ？と思って探して見たのですが、一覧で掲載しているサイトが無かったので、作ってみました。 ちなみに以下のJSON-LDのジェネレーターと合わせて使うと便利です。 https://technicalseo.com/seo-tools/schema-markup-generator/ JSON-LD@type一覧 対象値親

はじめに imageの遅延読み込みをするなら「Lazy Load」で、これはjQueryを使って実装するのが一般的だと思います。 対して、Vue.jsならどうしたら良いのでしょうか？ Vue.jsなら、「Vue-Lazyload」がオススメです！ 環境 vue.js : 2.5.8 Vue-Lazyload.js ：1.2.3 インストール 以下のnpm、CDNのどれか一つを使ってインストールします。 npm npm i vue-lazyload -S CDN <script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script> gitリポジトリは以下から取得できます。 https://github.com/hilongjw/vue-lazyload 導入手順 1. ライブラリの取り込み サンプルソースにはダミー画像（

Vue.Draggableは、Vue.js製のドラッグ＆ドロップコンポートネントライブラリです。 現存するVue.js製のドラッグ＆ドロップライブラリとしては、最大の人気を誇ります。 コンパイルを必要としないUMD用のJSファイルが用意されているので、jQueryからの切り替えも容易に行う事が可能です。 単純にドラッグ＆ドロップの機能が欲しければ、このライブラリを選んでおけば問題無いはずです。 主な使用用途の並び順を変更するのはもちろん、複数のエリアを移動することが可能です。 さらにスマホにも対応しており、タッチイベントによる移動も可能となっています。 基本的な使い方、ちょっとした応用などコピペで1分のサンプルを公開しています。 The post [Vue3対応]Vue.jsでドラッグ＆ドロップするなら「Vue.Draggable」がおすすめ first appeared on カバの樹.

環境 ブラウザ：vivald・iOS safari はじめに ルート営業を行うクライアントから、タブレットの契約書に手書きで署名できる機能が欲しいと言われました。 アプリで作ろうか悩みましたが、試しにHTML５で実装したものを提案してみました。 デモ See the Pen eeXqzy by カバの樹 (@kabanoki) on CodePen.0 ソース （2022/04/05 改定版） 戻る進むが機能しない不具合を修正しました。（2022/04/05） IEで動作しない不具合を修正しました。（2018/10/25） HTML <canvas id="canvassample" width="500" height="300"></canvas> <div style="padding:10px"> <button type="button" onclick="clearCanvas

仕事の備忘録を記録しています。最近はVue.jsライブラリの使い方を記事するのがマイブーム。Codeigniter、Laravel、PHP関係の記事も更新しています。