はじめに

Vue でローソク足(OHLC)チャートをプロットする方法。

TL;DR

  • npm i chart.js vue-chartjs vue-chartjsfinancial でインストール
  • JS ファイルと Vue ファイルに分けて実装するのが良い
    • リアクティブにグラフを更新できる (癖があるので注意)
  • 全部 from 'vue-chartjs-financial'import するのが安全そう
  • 細かい設定は chart.js 本家のドキュメントを参照
続きを読む

はじめに

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

1
2
3
4
<allow-navigation href="https://*twitter.com/*" />
<allow-navigation href="https://cdn.syndication.twimg.com/*" />
<allow-navigation href="about:*" />
<!-- <allow-navigation href="*" /> 1つでも OK -->
続きを読む

はじめに

Vuex の状態を robinvdvleuten/vuex-persistedstatelocalStorage などに永続化する方法。

TL;DR

  • npm i vuex-persistedstate でインストール
  • plugins で設定するだけで OK
  • localStorage 以外を使いたい場合は 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: 他の素晴らしい人々によって公開された素晴らしいリソースを参照します。

Explore the Ecosystem の下記

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

続きを読む

r17n


Softwear Engineer


Fukuoka