ブラウザで Node.js の Buffer を使う(CDN)



カテゴリー Programming

はじめに

ブラウザで Node.js の Buffer (相当) を使う方法を整理した。

なお、この記事で紹介するのは CDN から読み込んで使う方法なことに注意。

TL;DR

  • <script src="https://bundle.run/buffer"></script> を使う
    • jsDelivr のもの(https://cdn.jsdelivr.net/npm/buffer@5.4.3/index.min.js)だと NG
  • buffer.Buffer でアクセス
続きを読む

はじめに

MySQL で DB を複製(dump & load)する方法、リネーム(新DBに対して旧DBのテーブルを移動)する方法について整理した。

内容としては MySQLでdumpせずに “RENAME DATABASE” を実現する - Qiita の通り。

TL;DR

  • 複製(dump & load)
    • mysqldump [options] db_name > db_name.dump
    • mysql [options] new_db_name < db_name.dump
  • リネーム(旧DBのテーブルを移動)
    • RENAME TABLE db_name.table_name TO new_db_name.table_name × 全テーブル
続きを読む

はじめに

Chrome 拡張機能で、同梱しているファイルにアクセスする方法について整理した。

本記事では、画像をページ中に追加表示する例を示す。

TL;DR

続きを読む

CSS の display:none と visibility:hidden について



カテゴリー Programming

はじめに

display, visibility プロパティについて簡単に整理した。

TL;DR

  • display: none;display: block;(flex, etc…) で要素の 表示/非表示
    • 表示に影響が出る(他要素の位置が変わったりする)
  • visibility: hidden;visibility: visible; で要素の 表示/非表示
    • 表示に影響が出ない(他要素の位置は不変)
  • display: none;visibility: hidden; も、アクセシビリティ(読み上げ)に影響が出る
    • アクセシビリティを保つにはここを参考(試してない)
続きを読む

はじめに

Chrome 拡張機能で外部サイトへの HTTP リクエスト時に Request Headers をカスタマイズする方法について整理した。

User Agent を変更したり、Cookie を付与したり、色々とできるようになる。

TL;DR

  • chrome.webRequest.onBeforeSendHeaders を使う
  • 一部の内容はイベントハンドラ内で参照できないし、設定しても保証されない
  • User Agent を変更したり、Cookie を付与したりできる
続きを読む

はじめに

<img src="xxxx.png">xxxx.png が 404 エラーとなったときに、デフォルトで代わりの画像を表示する方法をまとめた。

TL;DR

  • onerror="this.src = 'alt.png'; this.removeAttribute('onerror')" を指定
    • エラー時には代替画像を読み込んで、onerror 属性自身も削除
  • onload="this.removeAttribute('onerror'); this.removeAttribute('onload'); も一緒に指定
    • エラー無し時に onerror, onload 属性を消せる
  • 上記をまとめると以下
1
2
3
4
<img src="404.png"
onerror="this.src='alt.png'; this.removeAttribute('onerror'); this.removeAttribute('onload');"
onload="this.removeAttribute('onerror'); this.removeAttribute('onload');"
>

MDN によると onerror は非推奨、ご利用は計画的に

続きを読む

はじめに

Laravelで「開始日時」と「終了日時」を登録する際に、日付と時刻の入力欄がそれぞれに用意されているようなケースで、「開始日時 < 終了日時」であることをバリデーションする方法。

追記: こっちのやり方使った方が良いかも。
Laravel でコンマ区切りのフォームデータを良い感じにバリデーションする

TL;DR

  • クロージャ内で日時データを組み立てて比較することで解決(暫定)
  • 他にも色々と試したけどダメだった
  • Laravel 歴が浅いので鵜呑みにしないこと
続きを読む

はじめに

Cordova でアプリデプロイ時に、指定した端末やエミュレータにデプロイする方法についてまとめた。

TL;DR

  • cordova run --list で利用可能なデバイスの表示。
  • cordova run ios --target=<target id>実機へのデプロイ
  • cordova emulate ios --target=<target id>エミュレータへのデプロイ
続きを読む

はじめに

GitHub などに登録されている Cordova アプリのソースコードをクローンした後に、クローンしたコードを使って Cordova 環境を構築(初期設定)する方法。

TL;DR

  • 既存ディレクトリをリネーム
    • mv <original name> <renamed name>
  • --template オプションを使って cordova create
    • cordova create <original name> --template=<renamed name>
  • リネームしたディレクトリを削除
    • rm -rf <renamed name>
続きを読む

はじめに

Vue + Cordova の iOS アプリを Xcode v11 でビルドすると Cannot read property 'toLowerCase' of undefined のエラーが出たので、解決方法について整理した。

TL;DR

  • Xcode v11 と cordova-ios v4 系は互換性がない
    • vue add cordova でインストールされるのは cordova-ios v4.5.5 (2019/11/21 現在)
  • cordova platform rm ioscordova platform add ios@latest で解決
続きを読む

r17n


Softwear Engineer


Fukuoka