はじめに

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

続きを読む

はじめに

NativeScript で入力範囲外エリアのタップでキーボードを非表示にする方法

TL;DR

  • Android: dismissSoftInput() を使う
  • iOS: tns-core-modules/application/ios を使って ios.nativeApp.sendActionToFromForEvent('resignFirstResponder', null, null, null)
  • ScrollView あたりに tap イベントのハンドラとして設定
  • iOS は以下の問題があるため使用に注意
    • ロングタップによる入力補助が上手く効かなくなる
    • iOS 12以下だと入力エリアへのフォーカスが効かなくなる
続きを読む

はじめに

NativeScript(NativeScript-Vue) の ListView の表示を強制的に更新する方法。

シチュエーションとしては、「お知らせ一覧」のようなものがあって、詳細を確認したら未読アイコンが消える、というような状況。

「お知らせ詳細」から戻るボタンで ListView に戻ってきても、未読アイコンが消えずにかなりハマった。

なお、Android だと上記の問題は起きなかったため、主に iOS 向けの内容。

TL;DR

  • Pageloaded イベントなどにハンドラを設定
  • ハンドラ内で ListView.refresh() を実行する
  • NativeScript-Vue の場合は $refs を使うと楽
続きを読む

はじめに

NativeScript(NativeScript-Vue) でプラットフォームごとにファイルやプロパティを切り替える方法。

チートシート

種別 iOS Android
View ファイル分割 xx.ios.vue xx.android.vue
View 内で分岐 <ios></ios> <android></android>
プロパティで分岐 ios:prop android:prop
スタイルシートファイル分岐 xx.ios.(s)css xx.android.(s)css
JS ファイル分岐 xx.ios.js xx.android.js
JS 内で分岐 isIOS isAndroid

TL;DR

  • ios, android をファイル名や、プロパティの prefix などに使う
  • 詳細は チートシート や各事例を参照
続きを読む

r17n


Softwear Engineer


Fukuoka