matlab-display-image について
MATLAB で画像を表示し、インタラクティブに閲覧するためのスキルです。`imageshow` と `viewer2d` を中心に、オーバーレイ、注釈、ラベリング、ビューの連携、大規模画像やストリーミング表示を扱います。
主な機能
- 01imageshow と viewer2d による画像表示
- 02画像オーバーレイと透明度の調整
- 03インタラクティブまたは静的な注釈
- 04マスク描画による画像ラベリング
- 05ビューア連携によるナビゲーション同期
- 06大規模画像とストリーミング画像への対応
活用シーン
- 01インタラクティブな画像閲覧アプリの作成
- 02セグメンテーションマスクやヒートマップの重ね合わせ
- 03注釈や ROI 付き画像の確認
- 04ズームとパンを同期して画像を比較
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ matlab/ matlab-agentic-toolkit --skill matlab-display-imageインストール後、Claude Code で/matlab-display-imageを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
manifest.yamlreferences/annotations.mdapp-building.mdpainting-and-labeling.md詳細
画像の表示
あらゆるサイズの画像をより高画質で表示し、操作への応答性も向上させるには、imshow ではなく imageshow を使用してください。
使用する場面
- GUI、アプリ、ダッシュボード、または画像表示用のインタラクティブなツールの作成をユーザーが求めている
- 画像上に ROI、注釈、その他の線や図形をプロットしたい
- ラベル付き画像データやその他のオーバーレイ画像を、画像上に表示したい
使用しない場面
- ユーザーが Image Processing Toolbox を持っていない(
imshowを使用しますが、パフォーマンス向上のためimageshowを推奨してください) - アプリ内に小さな静的アイコンを表示する(
uiimageを使用してください)
注記: bigimageshow は使用しないでください。レガシー関数です。大きなファイルベースの画像には、blockedImage オブジェクトと imageshow を使用してください。
避けるべきレガシーパターン
| 使用しない | 代わりに使用 | 理由 |
|---|---|---|
imshow | imageshow | パフォーマンスの向上、高画質化、操作への応答性 |
アプリ内での uiaxes + imshow | viewer2d + imageshow | ビューアーがズーム、パン、操作をネイティブに処理します |
rectangle()、drawrectangle()、imrect()、または insertObjectAnnotation | Position を指定した uidraw | インタラクティブで、プログラムから配置でき、測定機能が組み込まれています |
montage | imtile + imageshow | 組み合わせ可能で、ビューアーに対応しています |
figure + getframe(fig) | viewer2d + getframe(viewer) | キャプチャー前に、ビューアーの描画完了を待機します |
| オーバーレイの手動画像ブレンド | OverlayData を指定した imageshow | 透明度、カラーマップ、表示範囲を組み込みで制御できます |
注釈ごとに uidraw を呼び出す手動の for ループ | Wait="multiple" を指定した uidraw | 1 回のセッションで完了し、終了するタイミングはユーザーが決められます |
| ピクセル演算による手動のアルファブレンド | OverlayAlphamap プロパティ | ピクセル単位の透明度マッピング機能が組み込まれています |
linkaxes またはコールバックによる手動同期 | linkviewers | viewer2d 専用に設計されており、すべてのカメラプロパティを処理します |
roipoly、手動のマスク描画 | uipaint | オーバーレイのフィードバックを備えた、インタラクティブなブラシベースの描画 |
bigimageshow | blockedImage を指定した imageshow | imageshow はブロック画像を直接処理します。bigimageshow はレガシー関数です |
title("text") または title(gca,"text") | title(viewer,"text") | gca はビューアーを返しません。ビューアーオブジェクトを直接渡してください |
領域のズームに xlim/ylim を使用 | viewer.CameraViewport = [x y w h] | ビューアーは axes ではないため、xlim/ylim は viewer2d でエラーになります |
imageshow と tiledlayout/nexttile/subplot を併用 | uigridlayout 内の複数の viewer2d、または imtile + 単一の imageshow | imageshow は axes ではなく viewer2d を作成します。タイルの親を無視するため、タイルが空のまま別ウィンドウにビューアーが表示されます |
注釈ごとに uiannotate を呼び出す for ループ | n×m の位置行列を指定した単一の uiannotate 呼び出し | 1 つのインスタンス化オブジェクトとなり、注釈ごとに呼び出す方法より桁違いに高速です |
imagesc(data) | imageshow(data) | imageshow は DisplayRangeMode により、スケーリングとカラーマッピングを自動的に処理します |
imshowpair(A, B) | imfuse(A, B) + imageshow | imshowpair は独自の axes を作成します。imfuse で合成してから imageshow で表示してください |
主なコンポーネント
| コンポーネント | コンストラクター | 主なコールバック |
|---|---|---|
| ビューアー | viewer2d(parent) | CameraMovedFcn、ObjectClickedFcn |
| 画像 | imageshow('numeric',Parent=viewer) | |
| インタラクティブな注釈 | uidraw(parent, 'text') | AnnotationMovedFcn(ビューアー上) |
| 静的な注釈 | uiannotate(parent, 'text') | |
| ペイントブラシによるラベリング | uipaint(imageObj) | |
| リンクされたビューアー | linkviewers([v1, v2]) |
パターン
標準的な画像表示
親を指定せずにimageshowを呼び出すだけで、シンプルな画像表示ができます。名前と値のペアはすべて出力オブジェクトのプロパティとして設定でき、Dataプロパティを設定して画像データを更新できます。
obj = imageshow(im);
ビューアーにタイトルを追加するには、ビューアーオブジェクトを直接titleに渡します。title("text")やtitle(gca, "text")は使用しないでください。gcaはビューアーを返さないため、何も起きないか、別の座標軸タイトルが作成されます。
obj = imageshow(im);
viewer = obj.Parent;
title(viewer, "My Image");
ほとんどの場合、DisplayRangeModeのデフォルト値"type-range"が適切です。医用画像では、画像のダイナミックレンジに合わせてスケーリングする"data-range"、または画像データに応じて"10-bit"や"12-bit"を使うとよい場合があります。
obj = imageshow(im, DisplayRangeMode="data-range");
マスク、セマンティックセグメンテーション、その他の画像データを別の画像に重ねて表示する場合は、imageshowのOverlayDataプロパティと、対応するOverlayColormap、OverlayAlpha、OverlayAlphamap、OverlayDisplayRange、OverlayDisplayRangeModeプロパティを使用して、オーバーレイ表示を調整します。これは、オーバーレイを画像とブレンドしてDataプロパティを更新するよりも高速です。
obj = imageshow(im, OverlayData=mask);
画素ごとに異なる透明度を制御するには、OverlayAlphaではなくOverlayAlphamapを使用します。オーバーレイデータの値を透明度レベルに対応付けます。"linear"、"quadratic"、"cubic"、またはカスタムのn要素列ベクトルを指定できます。
obj = imageshow(im, OverlayData=heatmap);
obj.OverlayAlphamap = "quadratic";
空間参照情報がある場合は、Image Processing ToolboxまたはMapping Toolboxのimref2d、affintform2d、その他の変換オブジェクトとして、"Transformation"の名前と値のペアに指定します。
obj = imageshow(im, Transformation=tform);
手動で表示範囲を指定する — DisplayRangeMode="manual"の場合にDisplayRangeを直接設定するか、自動範囲を上書きします。
% Window/level for a 16-bit medical image
obj = imageshow(ctSlice, DisplayRange=[40 400]);
カスタムカラーマップ — グレースケール画像またはインデックス付き画像には、Colormapプロパティを使用します。
obj = imageshow(grayImage, Colormap=turbo(256));
複数の画像の表示
imageshowとtiledlayout、nexttile、またはsubplotを併用しないでください。 imageshowは座標軸オブジェクトではなくviewer2dを作成するため、レイアウトタイルに親として配置できません。nexttileループ内でimageshowを呼び出すと、タイルが空のままになり、別々のビューアーウィンドウが表示されます。
オプション1:手軽な合成画像にはimtile — 画像ごとの操作が不要で、横並びで確認するのに最適です。
tiled = imtile({slice1, slice2, slice3}, GridSize=[1 3]);
imageshow(tiled);
オプション2:uigridlayout内に複数のviewer2dを配置 — 画像ごとに個別のズーム、パン、注釈が必要な場合に最適です。
fig = uifigure(Name="Slice Review", Position=[100 100 1200 400]);
gl = uigridlayout(fig, [1 3]);
for i = 1:3
v = viewer2d(gl);
v.Layout.Row = 1;
v.Layout.Column = i;
imageshow(slices{i}, Parent=v, DisplayRange=[-1000 400]);
title(v, sprintf("Slice %d", i));
end
2枚の画像を比較するには、imshowpairではなくimfuseを使用し、その結果を単一のimageshowに渡します。
メモリに読み込むには大きすぎるファイルベースの画像の場合は、マルチレベルのblockedImageを作成し、そのオブジェクトをDataプロパティとしてimageshowに渡します。
bim = blockedImage("tumor_091.tif");
imageshow(bim);
画像と動画のストリーミング
表示を更新するときは、できる限りオブジェクトを再利用します。画像データを更新する必要がある場合は、imageshowの出力オブジェクトを保持し、その画像オブジェクトのDataプロパティを更新します。ストリーミングのワークフローでは、imageshowのPyramidSmoothingを"nearest"に設定すると、画像ピラミッドをより速く作成できます。
% Inline — short logic
viewer = viewer2d();
title(viewer,"Streaming Image Data");
obj = imageshow([],Parent=viewer,PyramidSmoothing="nearest");
for idx = 1:100
obj.Data = im;
drawnow;
end
アニメーションの生成
アニメーションの生成時やフレームのキャプチャ時には、必ずviewer2dオブジェクトをgetframeに渡してください。getframe(fig)やgetframe(gcf)は使用しないでください。 R2026a以降では、getframe(viewer)はキャプチャ前に保留中のレンダリング更新がすべて完了するまで待機するため、各フレームが完全にレンダリングされることが保証され、Figureレベルでキャプチャするより大幅に高速です。代わりにFigureに対してgetframeを使用すると、すぐにキャプチャされるため、空または部分的にしかレンダリングされていないフレームが生成されます。viewerは、imageshowが出力するImageオブジェクトの親です。
% Inline — short logic
viewer = viewer2d();
obj = imageshow([],Parent=viewer,PyramidSmoothing="nearest");
nFrames = 100;
out = cell(1, nFrames);
for idx = 1:nFrames
obj.Data = im;
out{idx} = getframe(viewer);
end
注釈
インタラクティブな注釈(ユーザーが描画・編集し、バッチセッション用の Wait="multiple" をサポート)には uidraw を使用し、静的なバッチ注釈(検出結果、境界、バウンディングボックスなど、個数を問いません)には uiannotate を使用します。**判断基準:**位置がアルゴリズムから得られる場合は uiannotate を使用し、ユーザーが描画または編集する必要がある場合は uidraw を使用します。すべての位置を n×m 行列にして、1 回の呼び出しで uiannotate に渡してください。ループは使用しないでください。API、形状の形式、例については、references/annotations.md を参照してください。
% WRONG — do NOT loop:
for i = 1:size(bboxes,1)
uiannotate(viewer, "rectangle", bboxes(i,:), Color="red");
end
% RIGHT — single call with the full matrix:
uiannotate(viewer, "rectangle", bboxes, Color="red");
ユーザーのインタラクションへの応答
ビューアーのコールバックプロパティに関数ハンドルを追加すると、ビューアー内でのユーザー操作に応答できます。CameraMovedFcn を使うと、カメラが移動した後に応答できます。AnnotationMovedFcn を使うと、ユーザーが注釈をインタラクティブに移動または形状変更した後に応答できます。ObjectClickedFcn を使うと、ユーザーがビューアー内でクリックしてボタンを離した後に応答できます。ただし、ドラッグは実行しません(クリックしてドラッグすると、通常はパンなどのデフォルトのインタラクションが開始されます)。このコールバックを使って選択やオブジェクトのピッキングを行うクリックを取得し、イベントデータからクリックされたオブジェクトを判定できます。
im = imread("peppers.png");
obj = imageshow(im);
viewer = obj.Parent;
% Draw a rectangle ROI interactively
roi = uidraw(obj, "rectangle", Color=[0,1,0], Label="ROI");
% Listen for movement and display the position
viewer.AnnotationMovedFcn = @(~,evt) fprintf("ROI Position: [%.1f, %.1f, %.1f, %.1f]\n", evt.Position);
インタラクティブなペイントとラベリング
ピクセル単位のインタラクティブなラベリングには uipaint(imageObj) を使用します。戻り値はバイナリマスクです。マルチクラスのラベリングには BrushSize と OverlayValue を使用できます。単一クラスおよびマルチクラスの例については、references/painting-and-labeling.md を参照してください。
比較用のビューアーのリンク
複数の画像を並べて比較(前後比較、マルチモーダル、マルチバンドなど)する場合は、linkviewers を使って viewer2d オブジェクト間のパンとズームを同期します。1 つのビューアーでユーザーがパンまたはズームすると、リンクされたすべてのビューアーが自動的に追従します。
v1 = viewer2d(parent1);
v2 = viewer2d(parent2);
imageshow(im1, Parent=v1);
imageshow(im2, Parent=v2);
linkviewers([v1, v2]);
後からビューアーのリンクを解除するには、次のようにします。
linkviewers([v1, v2], "off");
CameraViewport によるプログラムからのズーム
画像の特定領域をプログラムからズームまたは表示するには、ビューアーの CameraViewport を設定します。これは axes の xlim/ylim に相当する viewer2d の機能ですが、viewer2d は axes ではないため、xlim と ylim はエラーになります。必ず代わりに CameraViewport を使用してください。
CameraViewport には [x y width height] ベクトルまたは Rectangle オブジェクトを指定できます。指定した矩形が表示領域いっぱいに広がるようにビューアーをズームします。CameraViewport を読み取ると、現在表示されている領域を .Position に持つ Rectangle オブジェクトが返されます。
fig = uifigure;
gl = uigridlayout(fig, [1 1]);
v = viewer2d(gl);
imageshow(im, Parent=v);
drawnow; % allow camera to initialize
v.CameraViewport = [250 100 150 120];
**注:**ビューアーのカメラは、imageshow によるデータの読み込み後に非同期で初期化されます。初期化が完了する前に CameraViewport を設定するとエラーになります。明示的に uifigure → uigridlayout → viewer2d の階層を作成し、CameraViewport の設定前に drawnow を呼び出してください。それでもエラーが発生する場合は、初期化を待つため、drawnow の後に pause(1) を追加してください。
画像全体にリセットするには、次のようにします:v.CameraViewport = [0.5 0.5 size(im,2) size(im,1)];。表示領域を読み取るには、次のようにします:vp = v.CameraViewport; disp(vp.Position);
ユーザーがインタラクティブにパンまたはズームしたときに応答するには、CameraMovedFcn を使用します。
v.CameraMovedFcn = @(~,~) disp("Visible: " + mat2str(v.CameraViewport.Position, 3));
アプリの構築
uiaxes と imshow ではなく、uigridlayout を親として viewer2d(parent) を使用してください。空のデータを指定して Image を先に作成し(imageshow([], Parent=viewer))、データの読み込み後に obj.Data を更新します。クラス定義全体のテンプレートについては、references/app-building.md を参照してください。
viewer2d は axes ではありません — 常にハンドルを明示的に渡してください
viewer2d は MATLAB の axes オブジェクトではありません。gca が viewer2d を返すことはなく、axes ベースの関数(xlim、ylim、axis、subplot、tiledlayout)はビューアーでは動作しません。title、getframe、および表示に作用する関数には、必ずビューアーオブジェクトを明示的に渡してください。gca や暗黙の現在の axes に依存しないでください。
% WRONG — gca does not return the viewer:
title("Bell Peppers")
title(gca, "Bell Peppers")
% RIGHT — pass the viewer explicitly:
title(viewer, "Bell Peppers")
getframe(viewer)
規約
- 必ず:
imshow、imagesc、imageではなくimageshowを使用してください。imageshowは自動スケーリングに対応し、すべてのデータ型を処理して、viewer2dを作成します - 必ず:
title、getframe、その他すべての関数には、ビューアーハンドルを明示的に渡してください。gcaはビューアーを返しません - 必ず:フレームのキャプチャには
getframe(gcf)ではなくgetframe(viewer)を使用してください。ビューアーは非同期レンダリングの完了を処理し、大幅に高速です - 必ず:すべての位置を1回の呼び出しでn×m行列として
uiannotateに渡してください。アノテーションごとにループ内でuiannotateを呼び出さないでください - 使用禁止:ビューアーオブジェクトで
gcaや暗黙の現在の座標軸のパターンを使用しないでください。gcaはビューアーではなく座標軸を返します - 使用禁止:
imageshowでtiledlayout、nexttile、subplotを使用しないでください。imageshowは座標軸ではなくviewer2dを作成します - 使用禁止:ズームに
xlim/ylimを使用しないでください。代わりにviewer.CameraViewport = [x y w h]を使用してください - 推奨:マスク/セグメンテーションの表示には、手動のアルファブレンドよりも
OverlayDataを使用してください - 使用禁止:
imageshowをuifigureの直接の親に指定しないでください。まずviewer2dを作成します:v = viewer2d(fig); imageshow(im, Parent=v)、または親を指定せずにimageshow(im)を呼び出します - 推奨:複数画像を手早く合成するには、
imtileと単一のimageshowを使用してください。独立したビューアーには、uigridlayout内で複数のviewer2dを使用してください
Copyright 2026 The MathWorks, Inc.