はじめに
Chart.js (vue-chartjs) でツールチップの表示位置を変更する方法
TL;DR
Chart.Tooltip.positionersに{ x, y }で表示位置を返却する関数を追加options.tooltips.positionに追加したkeyを指定
はじめに
Vue でローソク足(OHLC)チャートをプロットする方法。
TL;DR
npm i chart.js vue-chartjs vue-chartjsfinancialでインストール- JS ファイルと Vue ファイルに分けて実装するのが良い
- リアクティブにグラフを更新できる (癖があるので注意)
- 全部
from 'vue-chartjs-financial'でimportするのが安全そう - 細かい設定は chart.js 本家のドキュメントを参照
はじめに
Laravel で Vue を使うときに実施したことなどのメモ。
TL;DR
以下について簡単に整理した
- Laravel + Vue の利用方法
- Vue コンポーネントの利用方法
- 一部ページでのみ Vue を利用する方法
- Vue で Laravel の多言語化ファイルを利用する方法
はじめに
Instagram の画像だけ表示する(埋め込む)方法。
Instagram の投稿を普通に埋め込むと以下のように表示されるが、これの画像だけ表示したいという話。
JavaScript, HTML が分かる人向け。あと、Post ID(https://www.instagram.com/p/CCCxoXvBX0_/ の CCCxoXvBX0_ 部分)が予め分かっている、という前提条件あり。
通常の Instagram の投稿埋め込みについては Instagram の埋め込みコードに関する調査メモ を参照
TL;DR
- oEmbed API を使う
GET https://api.instagram.com/oembed/?url=https://instagram.com/p/xxxx- レスポンスの
thumbnail_urlを使えば OK
- Vue での実装例あり
はじめに
Cordova iOS アプリ, Android アプリで Twitter Timeline の埋め込みを実現する方法。
TL;DR
- ライブラリを使わずに自前で実装
- tonickkozlov/vue-tweet-embed 使ってたがどうやってもダメだった
- cordova-plugin-whitelist を使用
config.xmlに<allow-navigation />を追加
1 | <allow-navigation href="https://*twitter.com/*" /> |
はじめに
Vuex の状態を robinvdvleuten/vuex-persistedstate で localStorage などに永続化する方法。
TL;DR
npm i vuex-persistedstateでインストールpluginsで設定するだけで OKlocalStorage以外を使いたい場合はstorageオプションで設定sessionStorage,Cookie,localStorage+ 暗号化, etc
はじめに
「Vue.js で○○を実現するライブラリを探したい」というときは Awesome Vue.js を使うと便利、というだけの話。
リポジトリは vuejs/awesome-vue。
公式ページ上でも、GitHub(リポジトリ トップ) 上でも情報を探せるようになっている。
GitHub 上で見る場合は、スクロールバーのサイズ(ページの長さ)や目次のデカさを見て探す気が失せるかもしれないが、目次の「Components & Libraries」を見て自分の見たい箇所だけチェックするという使い方で OK。
もしくは 「Ctrl(Cmd) + F」 で探すとかでも良いと思う。
あとは各ライブラリのリポジトリで詳細を確認し、自分のプロジェクトにマッチするかどうか、スター数、コミット頻度(放置されてないか)などで、どれを使うかを判断すれば良い。
その他・メモ
わかりにくいけど公式ドキュメントにも awesome-vue へのリンクはある。(自分は Google 検索から、たまたま awesome-vue にたどり着いた)
プラグインの使用 の下記
コミュニティの貢献による膨大なプラグインやライブラリは awesome-vue で確認できます。
Using a Plugin の下記
Checkout awesome-vue for a huge collection of community-contributed plugins and libraries.
もしくは
エコシステムを調べる の下記
The Awesome Vue Page: 他の素晴らしい人々によって公開された素晴らしいリソースを参照します。
The Awesome Vue Page: See what other awesome resources have been published by other awesome people.
参考文献
はじめに
Vue.js で PeachScript/vue-infinite-loading を使った無限スクロール(Infinite Scroll)の実装方法。
TL;DR
npm i vue-infinite-loadingでインストール<infinite-loading @infinite="infiniteHandler" />を記述infiniteイベントのハンドラ内でデータの追加や、読み込み完了などの処理を実施
はじめに
NativeScript でデバイスの輝度(明るさ)を制御する方法。
TL;DR
- NativeScript/nativescript-brightness を使う
brightness.set({ intensity: <value> })で輝度設定(0(暗) <-> 100(明))brightness.get()で現在の輝度取得- 以下と組み合わせることで特定画面(or パーツ)の 表示/非表示/遷移 などの際に輝度調整が可能
- Application Lifecycle の
suspendEventなど PageやxxxxLayoutなどのloadやunloadイベント- Android: Android Activity Events
- iOS: iOS UIApplicationDelegate (UIApplicationDelegate | Apple Developer Documentation)
- Application Lifecycle の
