Cordova アプリに Twitter Timeline の埋め込み



カテゴリー Programming
タグ
Android Cordova HTML JavaScript Node.js Programming Twitter Vue.js iOS

はじめに

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

Instagram の埋め込みコードに関する調査メモ



カテゴリー HTML
タグ
HTML Instagram

はじめに

Instagram の埋め込みコードについて調べたので簡単に整理した。

TL;DR

  • 埋め込みコード取得は、Instagram 投稿の右上「…」から「埋め込み」を選択
  • 画像だけにしたい場合は「キャプションを追加」のチェックを外す
  • 読み込み完了までの代替表示が不要な場合は blockquote と script だけでも OK
続きを読む

Cordova iOS axios で Network Error となる場合の回避策



カテゴリー Programming
タグ
Cordova JavaScript Node.js Programming axios iOS

はじめに

Cordova iOS アプリで axios を使っての API Request が Network Error となる場合の回避策。

TL;DR

続きを読む

Laravel でモデルの 作成/更新/削除 を検知してログ出力



カテゴリー Programming
タグ
Laravel PHP Programming

はじめに

Laravel でモデルの 作成/更新/削除 を検知してログ出力する方法

TL;DR

  • bootXXXX を持つ trait を作成して、ログ取得したいモデルに設定
  • beginTransaction などのログも合わせて取得すると正確性が増す
  • クエリログも合わせて取得すると where()->update() のようなケースも取得できる
  • 要件/環境 によってはボトルネックになりかねないので注意が必要
続きを読む

Laravel でメール送信イベントを検知してログ出力



カテゴリー Programming
タグ
Laravel PHP Programming

はじめに

Laravel でメール送信イベントを検知してログ出力する方法

TL;DR

  • MessageSent イベントを監視
    • app/Providers/EventServiceProvider.php の protected $listen に設定
  • リスナ(イベントハンドラ)内でログを出力
    • getTo, getSubject で送信先、件名を取得可能
  • 要件/環境 によってはボトルネックになりかねないので注意が必要
続きを読む

Laravel Tinker(PsySH) などで日本語入力できない場合の対処



カテゴリー Programming
タグ
Laravel PHP Programming

はじめに

Laravel の Tinker(PsySH)、php -a で起動する PHP の対話シェル(インタラクティブシェル)などで、日本語が入力できない(※)場合の対処方法。

(※イメージとしては 'ほげ' って入力しても Enter を押して確定した瞬間に '' となるような動作)

TL;DR

  • 恒久的な対処としては libedit の更新
  • 一時的な対処としては Unicode デコード可能な関数を定義して利用
続きを読む

Vuex の状態を robinvdvleuten/vuex-persistedstate で永続化



カテゴリー Programming
タグ
HTML JavaScript Node.js Programming Vue.js

はじめに

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

TL;DR

  • npm i vuex-persistedstate でインストール
  • plugins で設定するだけで OK
  • localStorage 以外を使いたい場合は storage オプションで設定
    • sessionStorage, Cookie, localStorage + 暗号化, etc
続きを読む

Vue.js のライブラリを探すなら awesome-vue を使うと便利



カテゴリー Programming
タグ
Node.js Programming Vue.js

はじめに

「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)



カテゴリー Programming
タグ
HTML JavaScript Node.js Programming Vue.js

はじめに

Vue.js で PeachScript/vue-infinite-loading を使った無限スクロール(Infinite Scroll)の実装方法。

TL;DR

  • npm i vue-infinite-loading でインストール
  • <infinite-loading @infinite="infiniteHandler" /> を記述
  • infinite イベントのハンドラ内でデータの追加や、読み込み完了などの処理を実施
続きを読む

r17n


Softwear Engineer


Fukuoka