はじめに

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

続きを読む

はじめに

mailto スキームについて調べたので、mailto リンクを使って 宛先(To)/CC/BCC/件名(Subject)/本文 を指定する方法を簡単に整理した。

TL;DR

続きを読む

はじめに

Cordova Android アプリのビルド時に This project uses AndroidX dependencies, but the 'android.useAndroidX' property is not enabled. Set this property to true in the gradle.properties file and retry. のエラーとなる場合の対処方法。

TL;DR

  • platforms/android/gradle.properties を修正する
  • before_compile フックを使うと良い
    • JS ファイルを作成して config.xml に追加
  • Vue + Cordova で npm run cordova-serve-android を使う場合は after_prepare フックも設定
1
2
3
4
5
6
7
8
9
<?xml version='1.0' encoding='utf-8'?>
<widget id="example.app" version="1.0.4" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
...
<platform name="android">
...
<hook type="after_prepare" src="scripts/android_before_compile.js" /> <!-- ***追加*** -->
<hook type="before_compile" src="scripts/android_before_compile.js" /> <!-- ***追加*** -->
</platform>
</widget>
続きを読む

はじめに

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 -->
続きを読む

r17n


Softwear Engineer


Fukuoka