はじめに

Cordova Android で iframe 内のリンクをシステムデフォルトブラウザで開く方法。


前置きなどは 親 Window で iframe からのデータ受信、イベント検出する方法 の「前置き」と同じ。

以下はとあるプロジェクトの要件など。

  • Cordova で iOS/Android まとめて開発
  • コンテンツ内部は先方が作成
    • コンテンツ内に先方管理外のサイトへのリンクがある
  • ガワはこちらで作成して、コンテンツを iframe で読み込む
  • iframe 内のリンクをシステムデフォルトブラウザで開きたい

iOS は問題なかった(意図通りに動作した)が、Android だけ上手く動かなかった。具体的には、リンクをタップすると iframe 内で開こうとするが、X-Frame-Options の設定により net::ERR_BLOCKED_BY_RESPONSE となる、というもの。

TL;DR

  • iframe 側: postMessage でリンク先 URL を送信
    • 送信後 preventDefault で元イベント(リンク先を iframe 内で開こうとするアクション)を抑止
  • アプリ(Cordova App)側: apache/cordova-plugin-inappbrowser でシステムデフォルトのブラウザを呼び出す
  • 他ページで余計な動作をしないように注意
続きを読む

はじめに

親 Window で iframe から送られてきたデータを受信したり、iframe 内のイベントを検出する方法。

※イベント検出もデータ送受信機能で実現しているので、厳密にはイベント検出(addEventListener 相当)ではない。

TL;DR

続きを読む

はじめに

Cordova iOS アプリで長押し(ロングタップ, ロングプレス)によるコンテキストメニューを無効化する方法。

TL;DR

  • テキスト選択、3Dタッチを無効化する場合は config.xml を設定
    • SuppressesLongPressGesture, Suppresses3DTouchGesturetrue
  • 画像などの長押しを無効化する場合は CSS で設定
  • 意図通りに動くか、他箇所で不具合が出ないかはしっかり検証が必要
続きを読む

はじめに

HTML で非表示(※)の <input required> に対して「入力が必要」のダイアログを表示する方法。

※厳密には非表示ではないが、人間的には非表示という感じ。詳細は後述。

TL;DR

続きを読む

はじめに

HTML5/JavaScript でファイルのドラッグ&ドロップ、画像ファイルのプレビューの実装方法。

TL;DR

続きを読む

はじめに

plotly/plotly.js で、ズームやパン(移動)と連動して Y軸の表示範囲を自動で調整(オートスケール)する方法

TL;DR

  • ズームや移動時は plotly_relayout イベントが発火
  • .on('plotly_relayout', handler) でハンドラを設定
  • 表示する Y 軸範囲を決定し relayout を実行
  • Plotly.relayout()plotly_relayout イベントが発火するので無限ループにならないように注意
続きを読む

はじめに

Vue.js で Lottie を使ったアニメーションを表示する方法。

Vue.js 向けのライブラリとして以下があるがメンテが止まってるようなので、(いまでも問題なく使えるかもしれないが)本記事では airbnb/lottie-web を使う。

※Latest commit は 2020/09/28 時点の確認結果

TL;DR

  • npm i lottie-web でインストール
  • lottie-web と JSON データを import
  • lottie.loadAnimation を実行
  • Creative Commons License の要件、対象アニメーションのライセンスを要確認して対応
続きを読む

はじめに

Chart.js (vue-chartjs) でツールチップの表示内容を変更する方法

TL;DR

  • テキストは tooltips.callbacks.xxxx で設定
    • tooltips.callbacks.title
    • tooltips.callbacks.label
    • tooltips.callbacks.footer
  • 色などを変更する場合は以下、他は Tooltip Configuration を参照
    • tooltips.backgroundColor
    • tooltips.titleFontColor
    • tooltips.bodyFontColor
    • tooltips.footerFontColor
    • tooltips.titleFontStyle
    • etc…
続きを読む

はじめに

Chart.js(vue-chartjs) で凡例の一部を非表示にする方法。

例えば円グラフ(Doughnut, Pie)で、値が 0 のものを取り除く、など。
(※この例だと、そもそも datasets から除外するのが良いけど、他に良い例がパッと思いつかないので…)

TL;DR

  • options.legend.labels.filter で設定
    • item.indexchart.datasets[n].data[item.index] を見て 表示/非表示 を決定
    • return true で表示、return false で非表示
続きを読む

r17n


Softwear Engineer


Fukuoka