はじめに
apertureless/vue-chartjs でチャートの高さ(や幅、サイズ)を変更する方法
TL;DR
- チャート要素に
widthやheightを設定- 本家 Chart.js ではなく vue-chartjs のドキュメント に記載
options.responsiveやoptions.maintainAspectRatioも合わせて指定
- 親要素の
widthやheightをvw,vhで指定する方法もある - ウィンドウのリサイズなども考え出すと割と茨の道っぽい
- ベストプラクティスが見つかってない(自分的には)
はじめに
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 本家のドキュメントを参照
はじめに
Simonwep/pickr でカラーピッカー(Color Picker)を作成する方法
TL;DR
- Simonwep/pickr について簡単に整理した
- テーマが3つ用意されており、細かいカスタマイズも簡単にできる
- イベントが一通り揃っておりユーザー操作に合わせて独自処理を行うなども簡単に対応できる
はじめに
NPM でインストール可能なカラーピッカー(Color Picker)について調べたので簡単にメモ。
TL;DR
- 以下の4つをピックアップ
- デモページ、ドキュメントなどを見て好きなもの、扱いやすそうなものを選ぶと良い
はじめに
mailto スキームについて調べたので、mailto リンクを使って 宛先(To)/CC/BCC/件名(Subject)/本文 を指定する方法を簡単に整理した。
TL;DR
cc,bcc,subject,bodyで CC/BCC/件名/本文 を設定可能- 複数宛先は
,区切り - 改行などは URL エンコード
- 複数宛先は
- JS なら
new URL('mailto:to@example.com')を使うと楽ccなどはsearchParams.set()で設定toString()でエンコードもやってくれる
- 過度なデータの埋め込みには注意(最大長を超過するかも)
はじめに
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/*" /> |
