ゆう's Blog
Imagick 画像縮小コマンド

resizeImageは高品質なリサイズが必要な場合に適しており、thumbnailImageは小さなサムネイルを素早く生成するのに適しています。

resizeImage with EXIF removal

$image = new Imagick('path/to/image.jpg'); $image->resizeImage($width, 0, Imagick::FILTER_LANCZOS, 1, true); // 幅を指定し、高さは自動計算 $image->stripImage(); // EXIF情報を削除 $image->writeImage('path/to/resized_image.jpg');

thumbnailImage with EXIF removal

$image = new Imagick('path/to/image.jpg'); $image->thumbnailImage($width, 0, true); // 幅を指定し、高さは自動計算 $image->writeImage('path/to/thumbnail_image.jpg');

片方のサイズを0に設定することで、縦横比を維持しながらリサイズすることができます。

thumbnailImageは、関連付けられたプロパティをすべて削除します。

10進数を任意のn進数に変換

function convertToBaseN(decimalNumber, base) { return decimalNumber.toString(base); } // 例: 10進数の255を16進数に変換 console.log(convertToBaseN(255, 16)); // 出力: "ff" // 例: 10進数の255を2進数に変換 console.log(convertToBaseN(255, 2)); // 出力: "11111111"

この関数では、decimalNumberを指定されたbaseに変換します。toStringメソッドは、基数(2から36まで)を引数として受け取り、その基数で表現された文字列を返します。

function convertToBaseN(decimalNumber, base) { const digits = "0123456789abcdefghijklmnopqrstuvwxyz"; let result = ""; let number = decimalNumber; if (base < 2 || base > 36) { throw new Error("Base must be in the range 2-36"); } while (number > 0) { result = digits[number % base] + result; number = Math.floor(number / base); } return result || "0"; } // 例: 10進数の255を16進数に変換 console.log(convertToBaseN(255, 16)); // 出力: "ff" // 例: 10進数の255を2進数に変換 console.log(convertToBaseN(255, 2)); // 出力: "11111111"

この関数では、digitsという文字列を使って各桁の文字を取得し、whileループを使って10進数を指定された基数に変換しています。numberが0になるまでループを続け、各桁をresultに追加していきます。

:last-of-type が効かない

<style> .customize_tag:last-of-type { border-bottom: dashed 3px blue; padding-bottom: 1em; } </style> <div> <p class="customize_tag"> AAA </p> <p class="customize_tag"> BBB </p> </div> <p> CCC </p>

<div>要素で囲むことで、<p> 要素の最後の子要素が正しく認識されるようになります。

JavaScript で秒単位のタイムスタンプを取得する

// 現在の時刻を取得 const now = new Date(); // ミリ秒単位のタイムスタンプを取得 const timestampInMilliseconds = now.getTime(); // 秒単位のタイムスタンプを取得 const timestampInSeconds = Math.floor(timestampInMilliseconds / 1000); console.log(timestampInSeconds);

タグ挿入ボタン

タグ欄のタブ1個はスペース2個に変換。

「automatic_unique_text」ユニーク文字列に置換。(アルファベット小文字,数字,当分8桁)

当分8桁→2059年05月26日02:38:27 (日本時間)まで。

phpMyAdminでデフォルト値を「空文字」に設定する

GUIでは「Null」にはできるが「空文字」にはできなかった。
なので、phpMyAdminの「SQL」タブを使用して、直接SQLクエリを実行した。

ALTER TABLE テーブル名 ALTER COLUMN カラム名 SET DEFAULT '';

CUI画面

・等幅フォント
・半角スペース・タブ・改行,および,それらの連続は,そのまま表示します。

「2個以上連続する半角スペース」を「半角スペースの数と同数の&nbsp;」に置換する

<?php function replaceSpaces($input) { return preg_replace_callback('/ {2,}/', function($matches) { return str_repeat('&nbsp;', strlen($matches[0])); }, $input); } $input = "これは テスト です。"; $output = replaceSpaces($input); echo $output; ?>

画像拡大

<p> <img src="../../blog-media/bz12/img-xxxxx.webp" alt="" style="cursor: zoom-in;" id="zoomImage-xxxxx"> </p> <div style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); justify-content: center; align-items: center; z-index: 1000;" id="overlay-xxxxx"> <img src="../../blog-media/bz12/img-xxxxx_o.webp" alt="" style="max-width: 90%; max-height: 90%;"> </div> <script> const img-xxxxx = document.getElementById('zoomImage-xxxxx'); const overlay-xxxxx = document.getElementById('overlay-xxxxx'); img-xxxxx.addEventListener('click', () => { overlay-xxxxx.style.display = 'flex'; }); overlay-xxxxx.addEventListener('click', () => { overlay-xxxxx.style.display = 'none'; }); </script>

画像ファイル名と"ID"を編集。
拡大画像(元画像)の幅が 922px 以下ならば、「img-xxxxx_o.webp」は存在しない。「img-xxxxx.webp」が元画像と同じサイズなので、「img-xxxxx_o.webp」を「img-xxxxx.webp」に読み替えてください。

画像 - アップロード

・画像は、Webp フォーマットに変換され、Exif情報は削除されます。
作成される画像サイズは、「サムネイル用(150×150px)」と「元画像と同じサイズ」と「幅が922pxを越えるものは、幅922pxに縮小されたもの」です。なお、元画像自体はサーバ上に保存されませんので別に保存をしておいてください。
・「画像の説明」は必須です。
・アップロードされると、画像の一部分のサムネイルが、下にリスト化して表示されます。
・サムネイルの下の「img-番号.webp」がファイル名となります。(元画像のファイル名は使用されません)

Sample Image

右上に表示されている円グラフ(ドーナツグラフ)は、画像保存フォルダの容量を示しています。「画像 - 制限設定」のページで保存容量限度を設定できます。また、不要であれば不使用,非表示にもできます。