Firefoxのバージョンを特定するJavaScript関数(by chatgpt)

function isFirefox() {
  return navigator.userAgent.toLowerCase().includes('firefox');
}

if (isFirefox()) {
  console.log("このブラウザは Firefox です。");
} else {
  console.log("このブラウザは Firefox ではありません。");
}

function getFirefoxVersion() {
  const userAgent = navigator.userAgent;
  const match = userAgent.match(/Firefox\/(\d+\.\d+)/);
  if (match && match[1]) {
    return parseFloat(match[1]);
  }
  return null; // Firefoxでない場合やバージョンが取得できない場合
}


const version = getFirefoxVersion();
if (version) {
  console.log(`このブラウザはFirefoxバージョン ${version} です。`);
} else {
  console.log("このブラウザはFirefoxではありません。");
}

補足

• navigator.userAgent でブラウザのユーザーエージェント文字列を取得します。
• 正規表現 /Firefox\/(\d+.\d+)/ によって Firefox/XX.XX の形式からバージョン番号を抽出します。
• 他のブラウザでは null を返します。
• メジャーバージョン（整数）のみが欲しい場合は parseFloat を parseInt に変更しても構いません。

BetterTouchToolの最新版でのウィンドウの移動とリサイズ設定

設定のUIが変わってだいぶ手こずった

設定画面に以前の設定がみつからず、OSのメニューから[設定]を選択
→別の設定画面表示され無事設定できました。

Screenshot

yt-dlp(brew)を使って簡単にYoutube動画をダウンロード(MacOS)

$ brew install yt-dlp
$ yt-dlp 'https://www.youtube.com/watch?v=PNgq0k4ISFU'

MacのコマンドラインからYoutube動画のダウンロード

yt-dlpとffmpegをインストール

• yt-dlp：動画ダウンロード
• ffmpeg：動画編集

$ brew install yt-dlp
$ brew install ffmpeg

ダウンロード

$ yt-dlp https://www.youtube.com/watch?v=5T0-_WfT5Qc

webm形式でダウンロードされます

2024年10月時点WebP画像対応のOSブラウザのメモ

2024年10月時点WebP画像対応のOSブラウザのメモ
基本ほぼブラウザが対応してきているので大手サイトなどでも問題無いレベルになってきている。

モバイル

モバイルの対応がおそいところだと、Safariの対応が2020年9月で4年以上経過している
その他モバイルはだいぶ前なので問題なさげ

デスクトップ

デスクトップもSafariが maxOS11 Big Sur のSafari14〜サポートリリースが2020年6月と4年以上経過している
その他ブラウザもだいぶ前からなの問題なさげ

参考URL
https://caniuse.com/?search=webp

2024年サファリのシェアまとめ

safari-share

PHPStormでUI(プロジェクトビュー)などの文字サイズの変更方法

• 設定ウィンドウを開く(Cmd+,)
  • Appearance & behavior
    • Appearance
      • Use custom font にチェック、Sizeを選択

Illustratorイラストレーターで画面がちらつくと時の対応(Mac Studio Apple M2 Max)

イラレを使ってると原因不明の画面のチラつきあり
画面の拡大、図形の移動などアクションを起こすたびに発生、何もしないと発生しない

対処

イラレを終了、再起動後に、ウィンドウの緑ボタン(全画面ボタン）をクリックで収まる。
発生のトリガーは不明。なんとなくイラレのウィンドウが全画面になっていない際に発生しているような気もする。

環境

• Mac Studio Apple M2 Max
• DELL 28 4K (USB-C)
• LG 28 4K (USB-C)

透明動画をWEBサイトに埋め込む方法2024年10月時点

以下の流れ、

1. After Effects で透明の動画作成
2. Media Encoder でアルファチャンネル付きのmov(コーデック:AppleProRes)でレンダリング
3. ffmpegを使ってwebm(コーデック:vp9)に変換
4. composerを使ってmov(コーデック:H265)に変換
5. videoタグで埋め込み

前提知識

• safari → mov(コーデック:H265)を利用
  • MacOSではAppleProRes再生可だが、iOSではH265でないとだめなため工程4が必要
• その他 → webm(コーデック:vp9)を利用

1.After Effects で透明の動画作成

コンポジションの背景を透明にしてアニメーション作成

Screenshot

Media Encoder のキューに追加

Screenshot

2.Media Encoder でアルファチャンネル付きのmovでレンダリング

書き出し形式で “QuickTime” “Alphaを含むAppleProRes4444XQ”を選択してエンコード→mov(コーデック:AppleProRes4444XQ)ができる

Screenshot

3.ffmpegを使ってwebm(コーデック:vp9)に変換

ffmpeg -i video.mov -c:v libvpx-vp9 video.webm

4.composerを使ってmov(コーデック:H265)に変換

※composerはMacの有料ソフト、他にフリーなソフトなどもありそうだけど、未検証

4.videoタグで埋め込み

<!-- ※movから先に書く -->
<video muted playsinline autoplay loop width="1080" height="1080">
    <!-- Safari用 -->
    <source src="./video.mov" type="video/quicktime" />
    <!-- その他用 -->
    <source src="./video.webm" type="video/webm" />
</video>

Macで不要(不可視)ファイルを除いてZipする

例）dataフォルダをdata.zipに圧縮
//ディレクトリを圧縮
$ zip data.zip -r data/ -x "*.DS_Store"
//解答確認
$ unzip data.zip -d test
$ find ./test/data

GoogleAnalytics GA4でカスタムイベントのレポートを作る

ライブラリを選択

Screenshot

新しいコレクションを作成

任意のコレクション名をつけて、レポートをドラッグ

レポートはイベントのレポート画面で、フィルタなどで絞り込んで新しい名前で保存しておく

コレクションを公開して完了