QGraphicsViewの表示を極める:centerOn()以外の代替メソッド徹底解説
QGraphicsView
とは
QGraphicsView
は、QtのGraphics View Frameworkの一部であり、QGraphicsScene
の内容を表示するためのウィジェットです。QGraphicsScene
は、図形アイテム(QGraphicsItem
)を管理し、そのアイテム間の相互作用を処理する論理的なキャンバスを提供します。QGraphicsView
は、このシーンをスクロール可能なビューポートとしてユーザーに表示します。
centerOn()
の機能
centerOn()
メソッドは、QGraphicsView
のビューポートの中心が、シーン内の特定の座標、または特定の QGraphicsItem
の中心に一致するようにビューをスクロールします。これにより、ユーザーが注目したいエリアやアイテムを簡単にビューの中心に配置できます。
centerOn()
のオーバーロード
centerOn()
にはいくつかのオーバーロードがあります。
-
pos
で指定されたシーン座標にビューの中心を合わせます。- 例:
view->centerOn(QPointF(100, 50));
// シーン上の(100, 50)がビューの中心になるようにスクロール
-
void QGraphicsView::centerOn(const QGraphicsItem *item)
item
で指定されたQGraphicsItem
の中心がビューの中心になるようにスクロールします。- 例:
view->centerOn(myItem);
// myItem の中心がビューの中心になるようにスクロール
-
void QGraphicsView::centerOn(qreal x, qreal y)
x
とy
で指定されたシーン座標にビューの中心を合わせます(上記QPointF
のオーバーロードのショートカット)。- 例:
view->centerOn(100, 50);
centerOn()
の挙動と注意点
ensureVisible()
との違い:centerOn()
が指定されたポイントやアイテムを「中心に配置する」ことを目的としているのに対し、QGraphicsView::ensureVisible()
は、指定された領域やアイテムが「確実に表示される」ようにすることを目的としています。ensureVisible()
は必ずしも中心に配置するわけではなく、必要であればビューポートをスクロールして表示範囲内に収めます。- ビューポートの更新:
centerOn()
を呼び出すと、ビューポートが自動的に更新されます。 - 境界線付近の挙動: ドキュメントによると、「アイテムが境界線に近い、または境界線の外にある場合、それはビューに表示されますが、必ずしも中央に配置されるわけではありません。」これは、ビューがシーン全体を表示しようとする際に、シーンの端を越えてスクロールできないためです。
- スクロールバーの調整:
centerOn()
を呼び出すと、内部的にビューの水平および垂直スクロールバーが調整され、指定されたポイントやアイテムがビューの中心にくるように表示が更新されます。
#include <QApplication>
#include <QGraphicsScene>
#include <QGraphicsView>
#include <QGraphicsRectItem>
#include <QPushButton>
#include <QVBoxLayout>
int main(int argc, char *argv[]) {
QApplication a(argc, argv);
// シーンを作成
QGraphicsScene *scene = new QGraphicsScene();
scene->setSceneRect(0, 0, 800, 600); // シーンのサイズを設定
// いくつかのアイテムをシーンに追加
QGraphicsRectItem *rect1 = new QGraphicsRectItem(0, 0, 50, 50);
rect1->setBrush(Qt::red);
scene->addItem(rect1);
QGraphicsRectItem *rect2 = new QGraphicsRectItem(700, 500, 80, 80);
rect2->setBrush(Qt::blue);
scene->addItem(rect2);
// ビューを作成し、シーンを設定
QGraphicsView *view = new QGraphicsView(scene);
view->setRenderHint(QPainter::Antialiasing); // アンチエイリアシングを有効にする
// UIのセットアップ
QWidget *window = new QWidget();
QVBoxLayout *layout = new QVBoxLayout(window);
layout->addWidget(view);
QPushButton *centerOnRect1Button = new QPushButton("赤色の四角形を中心に表示");
QObject::connect(centerOnRect1Button, &QPushButton::clicked, [=]() {
view->centerOn(rect1); // 赤色の四角形を中心に表示
});
layout->addWidget(centerOnRect1Button);
QPushButton *centerOnRect2Button = new QPushButton("青色の四角形を中心に表示");
QObject::connect(centerOnRect2Button, &QPushButton::clicked, [=]() {
view->centerOn(rect2); // 青色の四角形を中心に表示
});
layout->addWidget(centerOnRect2Button);
QPushButton *centerOnPointButton = new QPushButton("シーンの(400, 300)を中心に表示");
QObject::connect(centerOnPointButton, &QPushButton::clicked, [=]() {
view->centerOn(400, 300); // シーンの中心に表示
});
layout->addWidget(centerOnPointButton);
window->setWindowTitle("QGraphicsView::centerOn() の例");
window->resize(800, 600);
window->show();
return a.exec();
}
centerOn() を呼び出すタイミングが早すぎる
これは最もよくある問題の一つです。特に、QMainWindow
のコンストラクタ内や、ウィジェットがまだ画面に表示されていない段階で centerOn()
を呼び出すと、期待通りに機能しないことがあります。
原因
QGraphicsView
は、自身が実際に表示され、そのサイズが確定するまで、ビューポートのサイズやシーンの表示範囲を正確に計算できません。centerOn()
はこれらの情報に基づいてビューポートをスクロールするため、情報が不正確な状態では意図した結果になりません。
トラブルシューティング
-
showEvent() をオーバーライドする
ウィジェットの表示イベントハンドラであるshowEvent()
内でcenterOn()
を呼び出すこともできます。これにより、ウィジェットが表示される際に確実に処理されます。
class MyGraphicsView : public QGraphicsView { Q_OBJECT public: MyGraphicsView(QGraphicsScene *scene, QWidget *parent = nullptr) : QGraphicsView(scene, parent) {}
protected:
void showEvent(QShowEvent *event) override {
QGraphicsView::showEvent(event);
// 最初の表示時にシーンの中心に合わせる
centerOn(0, 0);
}
};
```
シーンのサイズが適切に設定されていない
QGraphicsView
は、QGraphicsScene
の sceneRect
を使ってシーンの論理的な境界を決定します。sceneRect
が適切に設定されていない場合、centerOn()
が期待通りに動作しないことがあります。特に、アイテムを追加しても sceneRect
が自動的に調整されない場合、centerOn()
の計算がずれる可能性があります。
原因
- アイテムが
sceneRect
の外側に配置されている。 setSceneRect()
が呼び出されていない、または不適切な値が設定されている。
トラブルシューティング
-
itemsBoundingRect() を使用する
シーン内のすべてのアイテムを含む最小の矩形を取得し、それをsceneRect
に設定することもできます。scene->setSceneRect(scene->itemsBoundingRect()); // その後で centerOn() を呼び出す view->centerOn(myItem);
-
QGraphicsScene::setSceneRect() を明示的に設定する
シーンの論理的なサイズと位置を正確に指定します。これにより、QGraphicsView
はシーンの全体像を把握し、centerOn()
がより正確に機能します。QGraphicsScene *scene = new QGraphicsScene(); scene->setSceneRect(-1000, -1000, 2000, 2000); // 例えば、中心が (0,0) で、各辺が1000の範囲
アイテムがシーンに登録されていない、または有効でない
centerOn(const QGraphicsItem *item)
を使用する場合、そのアイテムが有効であり、かつ目的のシーンに登録されている必要があります。
原因
- アイテムがシーンから削除された後、
centerOn()
が呼び出された。 - アイテムが
QGraphicsScene::addItem()
でシーンに追加されていない。 - アイテムが
new
されていない(スタックに作成され、スコープ外で破棄される)。
トラブルシューティング
- アイテムのポインタが有効であることを確認する:
centerOn()
を呼び出す前に、渡すアイテムのポインタがnullptr
でないこと、およびアイテムがまだシーンに存在することを確認します。 scene->addItem(item)
で追加する: アイテムをシーンに追加することを忘れないでください。- アイテムをヒープに作成する (
new
):QGraphicsItem
をスタックで作成すると、関数が終了すると同時に破棄されてしまいます。必ずnew
でヒープに作成し、所有権を適切に管理するか、親を設定してQtのオブジェクトツリーに任せます。
シーンの変換やビューの変換が影響している
QGraphicsView
と QGraphicsScene
はそれぞれ独自の変換行列(行列変換、スケール、回転など)を持つことができます。これらの変換が複雑に絡み合うと、centerOn()
の動作が予期せぬものになることがあります。
原因
QGraphicsItem
にカスタムの変換が適用されている。QGraphicsView::setTransform()
やQGraphicsView::scale()
、QGraphicsView::rotate()
などが不適切に設定されている。
トラブルシューティング
mapToScene()
やmapFromScene()
を理解する: 複雑な変換がある場合、ビュー座標とシーン座標間のマッピング関数を理解することがデバッグに役立ちます。- アイテムの変換を考慮に入れる:
centerOn()
はアイテムのローカル座標系ではなく、シーン座標系で動作します。アイテムに変換が適用されている場合、その変換後のシーン座標における中心が使われます。 - ビューの変換をリセットしてテストする:
一時的に
view->resetTransform();
を呼び出してからcenterOn()
を試してみてください。これにより、変換が問題の原因であるかどうかが分かります。
QGraphicsView のアライメント設定
QGraphicsView::setAlignment()
は、シーン全体がビューに収まる場合に、ビュー内でシーンがどのように配置されるかを制御します(デフォルトは Qt::AlignCenter
)。シーン全体がビューに収まらない場合、centerOn()
の動作には影響しませんが、誤解を生む可能性があります。
トラブルシューティング
setAlignment()
が意図しない設定になっていないか確認します。通常はデフォルトのQt::AlignCenter
で問題ありません。
-
fitInView()
との比較:centerOn()
が中心に合わせるのに対し、fitInView()
は指定された矩形またはアイテムがビューポート内に収まるようにズームとスクロールを行います。問題が解決しない場合、目的によってはfitInView()
の方が適していることもあります。 -
qDebug()
を活用する:view->rect()
: ビューポートのピクセル座標での矩形view->mapToScene(view->rect()).boundingRect()
: ビューポートがシーン座標で表示している範囲item->scenePos()
: アイテムのシーンにおける位置item->boundingRect()
: アイテムのローカル座標系での境界矩形item->mapToScene(item->boundingRect()).boundingRect()
: アイテムのシーン座標系での境界矩形scene->sceneRect()
: シーンの論理的な境界
これらの情報を出力することで、ビューとシーンの間の関係性や、アイテムの位置が期待通りになっているかを確認できます。
例1:シーンの特定の座標を中心に表示する
この例では、QGraphicsScene
を作成し、その中心(400, 300)に QGraphicsView
のビューポートを合わせます。
#include <QApplication>
#include <QGraphicsScene>
#include <QGraphicsView>
#include <QGraphicsRectItem> // 四角形アイテム用
int main(int argc, char *argv[]) {
QApplication a(argc, argv);
// 1. QGraphicsScene を作成
QGraphicsScene scene;
// シーンの論理的な矩形を設定。広めに設定することで、スクロール範囲が確保されます。
// 中心が (0,0) の場合、例えば -400, -300 から +400, +300 の範囲
scene.setSceneRect(0, 0, 800, 600);
// シーンの中心に何か描画して確認しやすくする
QGraphicsRectItem *centerRect = new QGraphicsRectItem(390, 290, 20, 20);
centerRect->setBrush(Qt::red);
scene.addItem(centerRect);
// 2. QGraphicsView を作成し、シーンを設定
QGraphicsView view(&scene);
view.setWindowTitle("QGraphicsView::centerOn(QPointF) の例");
view.resize(600, 400); // ビューのウィンドウサイズ
// 3. シーンの特定の座標を中心に表示
// この例では、シーンの論理的な中心 (400, 300) をビューの中心に合わせる
view.centerOn(400, 300);
view.show();
return a.exec();
}
解説
view.centerOn(400, 300);
は、ビューポートの中心がシーン座標の(400, 300)
に来るようにビューをスクロールします。この場合、作成した赤い四角形がビューの中心に表示されます。scene.setSceneRect(0, 0, 800, 600);
で、シーンが(0,0)
から(800,600)
の範囲を持つことを定義しています。
例2:特定の QGraphicsItem
を中心に表示する
この例では、複数の QGraphicsItem
をシーンに追加し、ボタンを押すと特定のアイテムがビューの中心に表示されるようにします。
#include <QApplication>
#include <QGraphicsScene>
#include <QGraphicsView>
#include <QGraphicsEllipseItem> // 楕円アイテム用
#include <QGraphicsRectItem> // 四角形アイテム用
#include <QPushButton>
#include <QVBoxLayout>
#include <QWidget>
int main(int argc, char *argv[]) {
QApplication a(argc, argv);
// 1. QGraphicsScene を作成
QGraphicsScene *scene = new QGraphicsScene();
scene->setSceneRect(-500, -500, 1000, 1000); // シーンの広さを設定 (中心が 0,0)
// 2. いくつかのアイテムをシーンに追加
QGraphicsRectItem *rectItem = new QGraphicsRectItem(-200, -200, 100, 100);
rectItem->setBrush(Qt::blue);
rectItem->setPos(-200, -200); // アイテムのシーン上の位置
scene->addItem(rectItem);
QGraphicsEllipseItem *ellipseItem = new QGraphicsEllipseItem(100, 100, 150, 150);
ellipseItem->setBrush(Qt::green);
ellipseItem->setPos(100, 100); // アイテムのシーン上の位置
scene->addItem(ellipseItem);
// 3. QGraphicsView を作成し、シーンを設定
QGraphicsView *view = new QGraphicsView(scene);
view->setRenderHint(QPainter::Antialiasing); // アンチエイリアシングを有効にすると滑らかに表示されます
view->setWindowTitle("QGraphicsView::centerOn(QGraphicsItem*) の例");
// 4. UI部品(ボタン)の作成とレイアウト
QPushButton *centerRectButton = new QPushButton("青い四角形を中心に表示");
QPushButton *centerEllipseButton = new QPushButton("緑の円を中心に表示");
QPushButton *centerOriginButton = new QPushButton("シーン原点(0,0)を中心に表示");
QVBoxLayout *layout = new QVBoxLayout();
layout->addWidget(view);
layout->addWidget(centerRectButton);
layout->addWidget(centerEllipseButton);
layout->addWidget(centerOriginButton);
QWidget *window = new QWidget();
window->setLayout(layout);
window->resize(800, 600);
// 5. ボタンと centerOn() メソッドの接続
QObject::connect(centerRectButton, &QPushButton::clicked, [=]() {
view->centerOn(rectItem); // 青い四角形を中心に表示
});
QObject::connect(centerEllipseButton, &QPushButton::clicked, [=]() {
view->centerOn(ellipseItem); // 緑の円を中心に表示
});
QObject::connect(centerOriginButton, &QPushButton::clicked, [=]() {
view->centerOn(0, 0); // シーンの原点(0,0)を中心に表示
});
window->show();
return a.exec();
}
解説
centerOn(0, 0)
は、シーンの原点(中心)をビューの中心に合わせます。centerOn(rectItem)
やcenterOn(ellipseItem)
を呼び出すことで、対応するアイテムの中心がビューポートの中心に来るようにスクロールします。scene->setSceneRect(-500, -500, 1000, 1000);
は、シーンの座標系が(-500,-500)
から(500,500)
の範囲を持ち、中心が(0,0)
になるように設定しています。
前述のトラブルシューティングで述べたように、QGraphicsView
がまだ表示されていない、またはサイズが確定していない状態で centerOn()
を呼び出すと問題が発生することがあります。これを避けるための一般的な方法は、QTimer::singleShot(0, ...)
を使用することです。
#include <QApplication>
#include <QMainWindow>
#include <QGraphicsScene>
#include <QGraphicsView>
#include <QGraphicsTextItem>
#include <QTimer> // QTimer::singleShot のために必要
class MyMainWindow : public QMainWindow
{
Q_OBJECT // QObject を継承するクラスには Q_OBJECT マクロが必要
public:
MyMainWindow(QWidget *parent = nullptr)
: QMainWindow(parent)
{
// 1. シーンとビューの作成
scene = new QGraphicsScene(this);
scene->setSceneRect(0, 0, 1000, 800); // 広めのシーンを設定
view = new QGraphicsView(scene, this);
setCentralWidget(view); // QMainWindow の中央ウィジェットにビューを設定
// 2. アイテムをシーンに追加
QGraphicsTextItem *bigText = new QGraphicsTextItem("Hello, Qt Graphics View!");
bigText->setFont(QFont("Arial", 48));
bigText->setPos(100, 100); // シーン上の位置
scene->addItem(bigText);
QGraphicsRectItem *targetRect = new QGraphicsRectItem(700, 500, 150, 100);
targetRect->setBrush(Qt::magenta);
scene->addItem(targetRect);
// 3. ウィンドウが表示され、レイアウトが完了した後に centerOn を呼び出す
// QTimer::singleShot(0, ...) は、現在のイベントループの処理が完了した直後にスロットを呼び出します。
// これにより、ビューのサイズが確定してから centerOn が実行されます。
QTimer::singleShot(0, this, [this, targetRect]() {
// targetRect をビューの中心に表示する
view->centerOn(targetRect);
qDebug() << "centerOn() が実行されました。";
});
setWindowTitle("QGraphicsView::centerOn() 遅延実行の例");
resize(800, 600);
}
private:
QGraphicsScene *scene;
QGraphicsView *view;
};
// moc を生成するために必要
#include "main.moc"
int main(int argc, char *argv[]) {
QApplication a(argc, argv);
MyMainWindow window;
window.show();
return a.exec();
}
- これにより、
centerOn()
が実行される時点でビューポートの正確なサイズが利用可能になり、期待通りにアイテムが中心に表示されます。 QTimer::singleShot(0, this, [this, targetRect]() { ... });
のラムダ式は、centerOn(targetRect)
を呼び出します。0
ミリ秒の遅延は、イベントループの次のサイクルで実行されることを意味し、これによりMyMainWindow
とQGraphicsView
の初期化とレイアウトが完了するのを待ちます。MyMainWindow
クラスを作成し、そのコンストラクタ内でシーンとビューを初期化しています。
QGraphicsView::fitInView()
centerOn()
が「中心に合わせる」ことに特化しているのに対し、fitInView()
は指定された矩形やアイテムが「ビューポート内に収まる」ようにズームとスクロールを調整します。
特徴
- 用途: シーン全体、特定の大きな領域、または特定のアイテムが画面全体に表示されるようにしたい場合に最適です。
- アスペクト比の保持:
Qt::KeepAspectRatio
フラグなどを指定することで、元のアイテムのアスペクト比を保ちつつ、ビューに収めることができます。 - ズームも調整: 指定された領域がビューポートにぴったり収まるように、ビューのスケール(ズームレベル)も調整します。
使用例
// シーン全体をビューに収める
view->fitInView(scene->sceneRect(), Qt::KeepAspectRatio);
// 特定のアイテムがビューに収まるようにズームとスクロール
view->fitInView(myItem, Qt::KeepAspectRatio);
// 指定した矩形をビューに収める
QRectF targetRect(100, 100, 300, 200); // シーン内の矩形
view->fitInView(targetRect, Qt::KeepAspectRatio);
QGraphicsView のスクロールバーを直接操作する
QGraphicsView
は QAbstractScrollArea
を継承しているため、そのスクロールバーにアクセスして手動でスクロール位置を制御できます。
特徴
- 用途: 特定のオフセットでビューを移動させたい場合や、独自のスクロールロジックを実装したい場合に有用です。
- アニメーション:
QPropertyAnimation
などと組み合わせることで、カスタムのスムーズなスクロールアニメーションを実装できます。 - 細かい制御: ピクセル単位で正確なスクロール位置を設定できます。
使用例
// 水平スクロールバーを取得し、値を設定
QScrollBar *hBar = view->horizontalScrollBar();
hBar->setValue(hBar->maximum() / 2); // 水平方向を中央に
// 垂直スクロールバーを取得し、値を設定
QScrollBar *vBar = view->verticalScrollBar();
vBar->setValue(vBar->maximum() / 2); // 垂直方向を中央に
// 特定のシーン座標 (x, y) がビューポートの左上に来るようにスクロール
// ただし、この計算はビューの現在のスケールと変換に依存します。
// より正確な計算は以下のようになります。
QPointF scenePoint(100, 100);
QPointF viewPoint = view->mapFromScene(scenePoint);
// ビューポートの左上を目的のシーン座標に合わせる
view->horizontalScrollBar()->setValue(view->horizontalScrollBar()->value() + viewPoint.x());
view->verticalScrollBar()->setValue(view->verticalScrollBar()->value() + viewPoint.y());
// または、scroll() メソッドを使用する(ただし、これは相対的な移動)
// view->scroll(dx, dy);
注意点
setValue()
で設定する値は、ビュー座標系でのスクロールバーの位置に対応します。QGraphicsView
のスクロールバーの範囲はsceneRect
とビューポートのサイズによって動的に決定されます。
ビューの変換行列を直接操作する
QGraphicsView
は内部的に QTransform
を使用してシーンを変換し、ビューポートに表示します。この変換行列を直接操作することで、パン(平行移動)、ズーム、回転などを細かく制御できます。
特徴
- 用途: カスタムのナビゲーション(例:マウスドラッグによるパン、マウスホイールによるズーム)を実装する場合に適しています。
- 高性能: 一度変換を設定すれば、すべての描画に適用されます。
- 柔軟性: ズーム、回転、パンなど、あらゆる種類の変換を組み合わせることができます。
関連メソッド
view->rotate(qreal angle)
: 回転view->scale(qreal sx, qreal sy)
: スケールを変更(ズーム)view->translate(qreal dx, qreal dy)
: 相対的に平行移動view->setTransform(const QTransform &matrix)
: 新しい変換行列を設定view->transform()
: 現在の変換行列を取得
centerOn() の代替としての使用例(手動パン)
centerOn(QPointF pos)
のロジックは、実際にはビューポートの中心が pos
に来るようにビューの変換行列を調整することと等価です。手動でこれを行うには、現在のビューポートの中心を pos
に移動させるためのオフセットを計算し、translate
を適用します。
// 例: シーンの (100, 50) をビューの中心に持ってくる
QPointF targetScenePoint(100, 50);
// ビューポートの現在の中心をシーン座標にマッピング
QPointF currentViewCenterInScene = view->mapToScene(view->viewport()->rect().center());
// 目的の点と現在のビュー中心の差を計算
QPointF delta = targetScenePoint - currentViewCenterInScene;
// その差分だけビューを平行移動させる
// 注意: translate は相対的な移動なので、複数回呼び出すと累積されます
view->translate(delta.x(), delta.y());
// または、新しい変換行列を構築して設定する(より制御が容易)
QTransform currentTransform = view->transform();
QTransform newTransform = currentTransform.translated(delta.x(), delta.y());
view->setTransform(newTransform);
より制御されたパン操作
マウスドラッグによるパン機能は、現在の変換行列を基準にして translate
を呼び出すことで実装されます。
// (カスタム QGraphicsView サブクラス内)
void MyCustomView::mousePressEvent(QMouseEvent *event) {
if (event->button() == Qt::LeftButton) {
lastPanPoint = event->pos(); // マウスが押された位置を記録
event->accept();
} else {
QGraphicsView::mousePressEvent(event);
}
}
void MyCustomView::mouseMoveEvent(QMouseEvent *event) {
if (event->buttons() & Qt::LeftButton) {
QPointF delta = mapToScene(event->pos()) - mapToScene(lastPanPoint);
translate(delta.x(), delta.y()); // ビューを移動
lastPanPoint = event->pos();
event->accept();
} else {
QGraphicsView::mouseMoveEvent(event);
}
}
これは centerOn()
と似ていますが、目的が異なります。ensureVisible()
は、指定されたシーンの矩形またはアイテムが「確実にビューポート内に表示される」ようにスクロールします。必ずしも中心に配置するわけではありません。
特徴
- 用途: 特定の要素がユーザーから見えていれば十分で、必ずしも中心にある必要がない場合に有用です。
- ズームは調整しない: スケールは変更せず、スクロールのみを行います。
- 可視性の保証: アイテムが一部でも画面外にある場合、スクロールして表示範囲内に収めます。
// 特定のアイテムがビューポートに表示されるようにスクロール
view->ensureVisible(myItem);
// シーンの特定の矩形が表示されるようにスクロール
QRectF areaToSee(50, 50, 200, 100);
view->ensureVisible(areaToSee);
// オフセットを指定して、アイテムの周囲に余白を持たせる
// (x, y, width, height) の矩形がビューポートに収まるようにする
qreal x_margin = 10;
qreal y_margin = 10;
view->ensureVisible(myItem, x_margin, y_margin);
メソッド | 目的 | スケール調整 | スクロール調整 |
---|---|---|---|
centerOn() | 指定の要素をビューの中心に配置する | しない | する |
fitInView() | 指定の要素をビューポートに収める | する | する |
スクロールバー操作 | スクロール位置を直接数値で設定する | しない | する |
変換行列操作 (translate ) | ビューを相対的にパン(平行移動)する | しない | する |
ensureVisible() | 指定の要素がビューポート内に表示されるようにする | しない | する |