Cordova Android ビルド時に「'android.useAndroidX' property is not enabled」となる場合の対処方法



カテゴリー Programming
タグ
Android Cordova Programming

はじめに

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 の画像だけ表示する方法



カテゴリー Programming
タグ
HTML Instagram JavaScript Programming Vue.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 アプリに 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
続きを読む

r17n


Softwear Engineer


Fukuoka