はじめに

Laravel で 全角カタカナ・半角英数記号 に変換しつつバリデーションする方法について整理した。

要件としては下記。

• バリデーションの前にデータを変換
  • 「全角かな・半角カナ」→「全角カナ」
  • 「全角英数記号」→「半角英数記号」
• 変換したデータに対してバリデーション
  • バリデーション OK ならその後の処理も変換後のデータを利用
    • レコードの 作成/更新 とか検索とか

TL;DR

• prepareForValidation でバリデーション前の処理
  • mb_convert_kana で全角・半角の変換
    • 変換できない文字もあるので注意
• regex ルールで正規表現を使ってバリデーション
  • バリデーション通れば後はいつも通り

はじめに

ツールチップを簡単に表示できる atomiks/tippyjs を触る機会があったので、簡単に使い方を整理した。

デモページ

TL;DR

• tippy(<target>, { content: 'my tooltip' }) でツールチップを設定
  • <target> はセレクタ(#id など)でも、Node(document.querySelector('#id') など)でも OK
• content に HTML も設定可能
  • tippy(<target>, { content: '<strong>my tooltip</strong>' })
  • tippy(<target>, { content: 'my<br>tooltip', allowHTML: true })
• 既存テーマを利用する場合は CSS を読み込んで theme: 'light のように指定

はじめに

「画像クリックで拡大」を簡単に実現できる imgix/luminous を触る機会があったので、簡単に使い方を整理した。

デモページ を見ると、何ができるのかがすぐわかる。

TL;DR

• npm i luminous-lightbox でインストール
  • CDN: <script src="https://cdnjs.cloudflare.com/ajax/libs/luminous-lightbox/2.3.2/luminous.min.js"></script>
• <a href="拡大画像"><img src="サムネイル"></a> に対して以下を実行
  • new Luminous(document.querySelector('a'))
• ギャラリー表示の場合は LuminousGallery を使用
  • new LuminousGallery(document.querySelectorAll('a'))

はじめに

Rails で sitemap_generator を使って sitemap(sitemap.xml.gz)を作成する方法にについて整理した。

実運用で使うであろう whenever と組み合わせたバッチ処理についても合わせて整理した。

TL;DR

• Gemfile に sitemap_generator, whenever を追加してインストール
• [bundle exec] rails sitemap:install で config/sitemap.rb を作成
  • sitemap.xml.gz に出力したい内容を記述
• [bundle exec] rails sitemap:refresh で public/sitemap.xml.gz の作成や更新
• [bundle exec] wheneverize で config/schedule.rb を作成
  • 定期的に処理したい内容(rake 'sitemap:refresh')を記述
• [bundle exec] whenever --update-crontab で cron ジョブの設定

はじめに

Laravel でネストした構造(リレーション)において、取得するカラムを絞りつつ Eager Load する方法についてまとめた。

TL;DR

• カラムの絞り込み: : の後に , 区切りでカラムを列挙
• ネスト構造: . で繋げる
• 上記の組合せ: with に渡す引数を分けて書く
  • with(['posts:title', 'posts.images:url'])

はじめに

/events?areas=1,2,3 のような URL で検索などの処理を行う際に、良い感じにバリデーションする方法を調べた。

※なるべく自前で各値が DB の値と一致するかを検証したくないよね、というお話。

TL;DR

• prepareForValidation 内でデータを変更すると幸せになれる
• getValidatorInstance でもいけるかも（試してない）

はじめに

Cordova の iOS ビルドなどで ios-deploy を使っていて、以下のエラーが出た場合の対処方法。

1
2
3
4
5

...
[100%] Installed package /Users/hoge/app/platforms/ios/build/device/AppName.app
------ Debug phase ------
2019-11-28 12:38:08.078 ios-deploy[24906:291578] [ !! ] Error 0xe800007f: Device doesn't support wireless sync. AMDeviceStartService(device, CFSTR("com.apple.debugserver"), &gdbfd, NULL)
ios-deploy: Command failed with exit code 253

ちなみに、自分の環境ではビルド・デプロイまではできるが、Mac に繋いで Safari 経由でのデバッグができない(iOS デバイスを認識しない)という状態だった。

TL;DR

• ios-deploy をアンインストール→再インストール で解決
  • rm ~/Library/Developer/Xcode/DerivedData/ios-deploy-*
    • 削除が不安なら一度 mv でリネームするのが良い
  • npm un -g ios-deploy
  • npm i -g ios-deploy

はじめに

JavaScript で 16進数 ランダム文字列を簡単に生成する方法を調べた。

CDN を使う方法(chance.js)、npm からインストールする方法(crypto-random-string)についてまとめた。

TL;DR

• CDN なら chance.js
  • chance.string({length: 8, pool: '0123456789abcdef'})
• npm なら crypto-random-string
  • cryptoRandomString({length: 8})

はじめに

JavaScript で 16進数の固定長文字列を判定する方法を調べた。

TL;DR

• /^[0-9a-f]{64}$/i.test(target) で確認できる
• 元ネタ: javascript - How to check if a string is a valid hex color representation? - Stack Overflow

はじめに

ブラウザで 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 でアクセス