HTML img タグで画像が 404 エラーのときに代替画像を表示する方法



カテゴリー Programming
タグ
HTML JavaScript Programming

はじめに

<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 で「開始日時 < 終了日時」であることをバリデーションする



カテゴリー Programming
タグ
Laravel PHP Programming

はじめに

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

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

TL;DR

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

Cordova で端末やエミュレータを指定してデプロイする



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

はじめに

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

TL;DR

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

Git リポジトリや既存の Cordova アプリ向けコードを使って Cordova 環境を構築する方法



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

はじめに

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

TL;DR

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

Xcode v11 + Cordova(iOS) で Cannot read property 'toLowerCase' of undefined のエラーの解決方法



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

はじめに

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 ios → cordova platform add ios@latest で解決
続きを読む

TypeScript で「Property 'xxxx' does not exist on type 'Window'」エラーの解決方法



カテゴリー Programming
タグ
CDN JavaScript Programming TypeScript Vue.js

はじめに

Vue.js + TypeScript で CDN からスクリプトを読み込んで、xxxx.ts で window.hoge にアクセスするコードをビルドすると Property 'hoge' does not exist on type 'Window'. のビルドエラーが出たので、解決方法を調べて整理した。

TL;DR

  • declare global を使う
    • declare global { interface Window { hoge: any } }
  • ↑ の後に window.hoge = window.hoge || {};
続きを読む

GitHub で 2FA 設定済アカウントの Private Repository をクローン



カテゴリー Programming
タグ
Git GitHub Programming

はじめに

GitHub で 2FA(2段階認証・2要素認証) を設定したアカウントの Private Repository を Clone する方法。

サーバなど普段使いの PC 以外で Private Repo をクローンしたい時など。

TL;DR

  • 2FA 未設定
    • git clone https://<user>@github.com/<repo user>/<repo>.git でいける
  • 2FA 設定済
    • New personal access token で新規トークンを作成
    • git clone https://<user>@github.com/<repo user>/<repo>.git のパスワードにトークンを入力
  • パスワード/トークン を保持したい場合
    • credential.helper を設定
      • git config credential.helper cache で一時保持
      • git config credential.helper store で保存
続きを読む

Git で自分のログだけを表示するエイリアス



カテゴリー Programming
タグ
Bash Git Programming

はじめに

Git で自分の変更履歴だけを見たいことがあったので、--author オプションと Bash のコマンド置換($()) を組み合わせてエイリアスにした。

TL;DR

  • git log --author=$(git config user.email) で自分の変更だけを取得できる
  • エイリアスに logme = !git log --author=$(git config user.email) などを追加
続きを読む

Node.js で @bluecrypt/keypairs と node-forge を使って RSA 暗号化( + node-rsa の使い方)



カテゴリー Programming
タグ
Node.js Programming npm 暗号化

はじめに

Node.js で node-rsa の代わりに、@bluecrypt/keypairs と node-forge を使って鍵の生成や 暗号化/復号化 を行う方法を整理した。

なお node-rsa を使わない理由は単純に処理速度の観点から。

TL;DR

  • node-rsa 以外の RSA 暗号化関連ライブラリについて整理
  • 鍵生成は @bluecrypt/keypairs が速い(※)
  • 暗号化/復号化 などは node-forge が速い(※)
  • 記事が長くなったので、計測結果詳細は別途まとめる(と思う)

※あくまで「自分の計測した範囲では」なので、環境や状況で結果は異なると思う。

続きを読む

r17n


Softwear Engineer


Fukuoka