説明
Hwinote iCatch Editor は、WordPress 管理画面にブラウザベースのキャンバスエディターを追加します。外部の画像生成サービスを使わずに、アイキャッチ画像の作成・編集、選択中の画像ブロックの編集、メディアライブラリ画像の編集ができます。
エディターを開ける場所
- 対応する投稿タイプのアイキャッチ画像パネル。
- 画像ブロック連携が有効な場合の、ブロックエディターで選択中の画像ブロック。
- メディアライブラリ画像の詳細編集画面。
キャンバスと背景
- 画像サイズのプリセットと、最大4000 x 4000ピクセルまでのカスタムキャンバスサイズ。
- 現在のアイキャッチ画像、メディアライブラリ、コンピューターからのアップロード、クリップボードから背景画像を追加可能。
- 単色の背景色モード。
- 背景のズーム、位置、明るさ、コントラスト、彩度、ぼかしを調整可能。
- キャンバスサイズ変更時の背景画像の動作を選択可能。
- 自由比率、1:1、4:3、16:9に対応した背景画像のインタラクティブクロップ。
- 保存画像のサイズを変更しない、表示専用のプレビュー拡大と縮小。
テキストと描画ツール
- 投稿タイトルテキストのドラッグ、サイズ変更、回転、フォント、文字色、縁取り、影、アーチ調整。
- 横書きと縦書きのテキストボックス。
- カスタムフォント名の入力と、ユーザーごとに保存する最近使用したフォント。
- WOFF2、WOFF、TTF、OTF のフォントファイルをアップロードし、同じサイト内で一貫したキャンバス描画に使用可能。
- 長方形、円、楕円、矢印、直線、二重線、破線、点線、波線、矢印付き線。
- 尻尾を編集できる吹き出し。
- 開始値を選択できる、丸数字、丸囲み大文字、丸囲み小文字のマーカーツール。
画像レイヤーとクロップ
- メディアライブラリ、コンピューターからのアップロード、クリップボードから画像レイヤーを追加可能。
- キャンバス上の矩形、円形、楕円形の範囲をコピーし、新しい画像レイヤーとして貼り付け可能。
- 長方形、角丸長方形、円、楕円の表示マスク。
- クロップの縦横比固定を独立して設定できる、非破壊の画像レイヤークロップ。
- 画像の枠線、角丸、影、不透明度、反転、位置、サイズ、回転を調整可能。
- クロップ設定とは独立して切り替えられる画像サイズの縦横比固定。
レイヤーと編集操作
- 複数選択に対応したレイヤー一覧。
- 選択した要素をグループ化またはグループ解除可能。
- 単一レイヤーまたはグループ全体を複製可能。
- 表示、非表示、ロック、削除、前面へ移動、背面へ移動に対応。
- スナップと、独立して制御できるガイド線に対応。
- 元に戻す / やり直しの履歴に対応。
- キーボードショートカットと Escape キーの優先処理に対応。
- エディター全体と個別の編集領域をリセット可能。
- メディアの保存または置き換え前に、保存前チェックと確認メッセージを表示。
保存とメディアライブラリの動作
- 生成した画像を WordPress のメディアライブラリ添付ファイルとして登録。
- 保存後に WordPress の添付ファイルメタデータと登録済みの中間画像サイズを再生成。
- アイキャッチ画像として保存した場合、生成した添付ファイルを投稿のアイキャッチ画像に設定。
- 画像ブロック編集では、新しい添付ファイルとして保存するか、選択中の添付ファイルを直接置き換え可能。
- 画像ブロックを新しい画像として保存した場合は元の添付ファイルを保持。ブロック内の新しい添付ファイルを保持するには投稿を更新。
- 直接置き換えでは、同じ添付ファイル ID を維持したまま画像ファイルとメタデータを更新。
- メディアライブラリ編集では、新しい添付ファイルとして保存するか、元の JPEG、PNG、WebP 画像を置き換え可能。
- 非対応の形式や、元画像の幅または高さが4000ピクセルを超える場合は直接置き換えを利用不可。
- 出力形式は PNG、JPEG、または対応している場合は元画像と同じ形式を使用可能。
重要: 保存する画像はフラット化されます。テキスト、図形、レイヤー、クロップ設定、履歴は、あとから再編集できるプロジェクトとして保存されません。
重要: 直接置き換えを行うと、同じメディアライブラリの添付ファイルを使用しているすべての場所が変更され、このプラグインから元に戻すことはできません。同じ URL で画像を置き換えた場合は、ブラウザ、サーバー、CDN のキャッシュ削除が必要になることがあります。
端末と言語のサポート
- iPad および iPad Mini の縦向きと横向きを含む、デスクトップとタブレットのレイアウトに対応。
- キャンバス編集全体は大きな画面向けに設計しているため、スマートフォンではエディターの起動用操作を非表示。
- ソースのインターフェースは英語で、日本語の翻訳ファイルを同梱。
プライバシーと外部サービス
Hwinote iCatch Editor は、画像やエディターの内容を外部の画像生成サービスへ送信しません。編集はブラウザ内で行い、生成した画像とアップロードしたフォントファイルは、WordPress の機能を通じて現在のサイトに保存します。
関連リンク
- 日本語での紹介
https://hwinotes.com/icatch-editor-ver2/
スクリーンショット
インストール
- 既存のインストールを更新する前に、サイトをバックアップしてください。
- 「プラグイン」「新規プラグインを追加」「プラグインのアップロード」からプラグイン ZIP をアップロードするか、プラグインフォルダーを
/wp-content/plugins/にアップロードしてください。 - Hwinote iCatch Editor を有効化してください。
- 「設定」「Hwinote iCatch Editor」を開き、画像ブロック連携、保存形式、JPEG 品質、フォントの読み込み方式を設定してください。
- アイキャッチ画像を編集する場合は、対応する投稿または固定ページを開き、Hwinote iCatch Editor パネルを使用してください。
- 画像ブロックを編集する場合は、ブロックを選択し、設定したツールバーまたはサイドバーの操作を使用してください。
- メディアライブラリの画像を編集する場合は、画像を開いて「さらに詳細を編集」を選択し、「この画像を編集」を使用してください。
- 既存の添付ファイルを直接置き換える前に、保存方法をよく確認してください。
1.6.0から更新する場合は、本番サイトを更新する前にステージングサイトで、アイキャッチ画像の保存、画像ブロックの編集、メディアライブラリの置き換え、生成画像のサイズ、キャッシュの動作を確認してください。
FAQ
-
外部 API やアカウントは必要ですか ?
-
いいえ。キャンバスエディターはブラウザで動作し、WordPress Ajax を通じて保存します。外部の画像生成サービス用アカウントは必要ありません。
-
エディターはどこから開けますか ?
-
アイキャッチ画像パネル、選択中の画像ブロック、またはメディアライブラリ画像の詳細編集画面から開けます。
-
保存した画像をすべてのレイヤーを保持した状態で再編集できますか ?
-
いいえ。プラグインはフラット化した画像を保存します。テキスト、図形、レイヤー、クロップ設定、履歴は、再編集可能なプロジェクトとして保存されません。
-
どの画像形式で保存できますか ?
-
設定した出力形式は PNG、JPEG、または対応している場合は元画像と同じ形式を使用できます。直接置き換えは、編集後の出力が同じ対応形式の場合に JPEG、PNG、WebP に対応します。
-
「新しい画像として保存」と「元画像を直接置き換える」の違いは何ですか ?
-
「新しい画像として保存」では新しいメディアライブラリの添付ファイルを作成し、元の添付ファイルは変更しません。直接置き換えでは同じ添付ファイル ID を維持し、その添付ファイルが使われているすべての場所を変更します。
-
編集した画像ブロックを新しい画像として保存するとどうなりますか ?
-
元の添付ファイルはメディアライブラリに残ります。現在のエディターセッションでは、選択中のブロックが新しい添付ファイルに変更されます。その変更を保持するには、閉じる前に投稿を更新してください。
-
メディアライブラリの元画像を置き換えられますか ?
-
はい。対応する編集モードで「元画像を直接置き換える」を選択してください。添付ファイル ID は維持され、WordPress の画像サイズを再生成します。置き換え前の画像はこのプラグインから復元できません。
-
非対応の形式や、元画像の幅または高さが4000ピクセルを超える場合は直接置き換えを利用できません。「新しい画像として保存」は引き続き利用できます。
-
置き換え後に古い画像が表示されることがあるのはなぜですか ?
-
ブラウザ、WordPress のキャッシュプラグイン、Web サーバー、リバースプロキシ、CDN に以前の画像が残っている場合があります。該当するキャッシュを削除してページを再読み込みしてください。
-
保存後に WordPress はサムネイルを生成しますか ?
-
はい。プラグインは添付ファイルのメタデータを再生成するため、WordPress は登録済みのサムネイル、中、大、テーマ定義の画像サイズを生成できます。
-
クリップボードから画像を貼り付けられますか ?
-
はい。ブラウザがクリップボードに対応している場合は、エディターを開いた状態で「画像を追加」メニューを使用するか、Ctrl/Command + V で貼り付けられます。
-
プレビューの拡大と縮小で保存画像のサイズは変わりますか ?
-
いいえ。プレビューの拡大と縮小は画面上の表示だけを変更します。保存する画像のサイズはキャンバスサイズ設定で決まります。
-
スマートフォンで編集できますか ?
-
iPhone や Android スマートフォンを含むスマートフォンでは、起動用の操作を非表示にしています。タブレットとデスクトップコンピューターには対応しています。
-
このプラグインは多言語対応ですか ?
-
はい。ソースのインターフェースは英語で、日本語の翻訳ファイルを同梱しています。
評価
このプラグインにはレビューがありません。
貢献者と開発者
変更履歴
2.0.1
- プレビューの拡大・縮小を修正し、表示中のプレビュー領域より幅の広いキャンバスを、縦方向だけでなく横方向にもスクロールできるようにしました。
- プレビューが表示領域に収まる場合は中央に表示し、拡大して表示領域を超える場合は、横スクロールで左端から右端まで確認できるようにしました。
- クリップボードからの貼り付けは背景画像ではなく画像レイヤーで利用できることが明確になるよう、READMEの説明を修正しました。
2.0.0
1.6.0以降の開発内容を統合した大型機能リリース。
- ブロックエディターに、有効化できる画像ブロック連携と、ツールバーおよびサイドバーからの起動用操作を追加。
- 画像の詳細編集画面からメディアライブラリ添付ファイルを編集できる機能を追加。
- 対応する編集モードに、新しい添付ファイルを作成する方法と既存の添付ファイルを直接置き換える方法の2つの保存方法を追加。
- 形式、サイズ、権限、バックアップ、メタデータ、復旧の確認を含む、より安全な直接置き換えを追加。
- 添付ファイル置き換え後の WordPress 画像サイズ再生成と投稿エディター同期を追加。
- 背景画像のインタラクティブクロップと、独立した縦横比調整を持つ画像レイヤーの非破壊クロップを追加。
- 背景画像の追加元としてメディアライブラリとコンピューターからのアップロードを追加し、画像レイヤーの追加元としてメディアライブラリ、コンピューターからのアップロード、クリップボードを追加しました。
- 画像レイヤーのマスク、枠線、角丸、影、不透明度、反転、回転、クロップ操作を追加。
- キャンバス上の矩形、円形、楕円形範囲のコピーと貼り付けを追加。
- 複数選択、グループ化とグループ解除、グループ全体の複製、表示と非表示、ロック、レイヤー順変更を追加。
- スナップと、独立して制御できるガイド線表示を追加。
- すべての対応編集モードに、「画面に合わせる」、スライダー、倍率表示、段階調整を備えた表示専用のプレビュー拡大と縮小を追加。
- 描画ツール、線種、矢印、吹き出し、テキストボックス、アーチ文字、丸囲みマーカーツールを拡張。
- カスタムフォント名、最近使用したフォント、WOFF2、WOFF、TTF、OTF の同一サイト内フォントファイルアップロードを追加。
- 元に戻す / やり直し、リセット動作、インライン文字編集、キーボードショートカット、Escape キーの優先処理、選択枠、当たり判定を改善。
- 新しい画像として保存する場合と、元に戻せない直接置き換えを行う場合の保存前検証と明確な警告を追加。
- iPad および iPad Mini の各向きを含む、デスクトップとタブレットのレスポンシブレイアウトを改善。
- 英語と日本語のローカライズを改善し、言語が混在するインターフェースラベルを解消。
- 確定済みの設定パネル順を変更せず、JavaScript 構成を役割別の12モジュールファイルに統合して監査。
- 未使用と確認できたコードを削除し、構文、依存関係、API、認可処理の入口、パッケージ整合性の監査を完了。
- 編集した画像ブロックを新しい添付ファイルとして保存した際、元画像と新画像が繰り返し切り替わることなく、選択中のブロックが新しい添付ファイルへ確実に切り替わるよう修正。
- 画面の高さが低い環境でも操作ボタンを完全に利用できるよう、保存前チェックのレイアウトを修正。
- 画像ブロックのキャンバスサイズをアイキャッチ画像編集から分離し、編集対象を切り替えたときに正しい作業領域サイズへ戻るよう修正。
- 同梱の日本語 PO/MO ファイルと翻訳テンプレートを、最終版2.0.0のソース文字列と同期。
1.6.0
- 背景画像をメディアライブラリから選択できる機能を追加。
- メディアライブラリの画像を画像レイヤーとして追加できる機能を追加。
- 開始値を選択できる、数字、大文字、小文字の丸囲みマーカーツールを追加。
- キャンバスサイズ変更時の背景サイズ変更方法を選べるようにした。
- プレビュー倍率と日本語ラベルを改善。
1.5.0
- ユーザーごとに最近使用したフォントを保存するカスタムフォント名機能を追加。
- タイトルテキスト、テキストボックス、吹き出しのカスタムフォント対応を追加。
- タイトルテキストとテキストボックスに、強さを調整できるアーチテキストスタイルを追加。
1.4.5
- 塗りつぶしの不透明度の動作を修正し、アセットのキャッシュ更新処理を改善。
- 生成画像のファイル名に
icatch-{post_id}-{timestamp}.png形式を追加。 - 波線の高さと幅の調整を追加。
1.4.1
- プラグイン名を Hwinote iCatch Editor に変更し、プラグインスラッグ、テキストドメイン、ファイル、接頭辞、Ajax フックを更新。
1.4.0
- ツールバーアイコン、互換性メタデータ、リクエストのサニタイズ、モーダル出力の翻訳を改善。
1.3.0
- ソースのインターフェースを英語に変更し、日本語の翻訳ファイルを追加。
- PHP と JavaScript のインターフェース文字列をローカライズ。
1.2.0
- モーダルエディターを拡張し、図形、線、テキストボックス、吹き出し、画像レイヤー、レイヤー操作、スナップ、ガイド、リセット、元に戻す / やり直しを追加。
1.1.0
- 画像サイズのプリセット、カスタムキャンバスサイズ、タイトル装飾、ドラッグ配置、サイズ変更、回転、メディアライブラリへの添付ファイル保存を追加。
1.0.0
- 初回リリース。