OmniGraffle for iOS で使える数多くのジェスチャー

弊社では、iPad 用の OmniGraffle の開発を始めたとき、iOS で実行可能なジェスチャー機能の幅をさらに広げる必要性を感じていました。確かに OmniGraffle には、通常の iOS アプリに備わっている基本的なジェスチャーがすべて用意されています。たとえば、タップして選択する動作や、ピンチしてキャンバスを拡大または縮小する動作などです。これらはすでに人々の頭に刻み込まれているため、考えるまでもなく、自然と指が動いてしまうジェスチャーです。

しかし、OmniGraffle には、非常にパワフルで、かつ洗練された多数のカスタムジェスチャーの機能が備わっています。たとえば、キャンバス間やレイヤー間の切り替え、グループ化/グループ化解除、キャンバス上のテキストオブジェクトからラベルへの変換、それらのオブジェクトの分離などを行うジェスチャーです。

この章では、OmniGraffle 2 for iOS に組み込まれているすべてのジェスチャー(20 種類以上)を紹介します。 iPad または iPhone を持って(最新の OmniGraffle はすべての iOS デバイスで使用できるユニバーサル版です)、これらのジェスチャーをぜひお試しください。

ジェスチャーに関する重要な概念

最も基本的なジャスチャーはタップであり、その次にタップしてホールドと続きます。ただし、キャンバス上のオブジェクトをタップしてホールドするということは、セカンダリジェスチャーの開始を意味します。これは Mac 上で言うと、キーボードショートカットを実行するのに Command キーを押すようなものです。つまり、Command-C キーでコピー、 Command-V キーでペーストというように、次のキーを押すことによってメニュー項目を実行できます。

タップしてホールドする指は、目的の操作を開始する前に使用する最初の指であるため、プライマリフィンガーと呼ばれます。この章では、次の図を使って「タップしてホールド」ジェスチャーを示します。

タップしてホールドジェスチャー

オブジェクト用のセカンダリジェスチャー

プライマリフィンガーでタップしてホールドした後、以下のセカンダリジェスチャーを使用できます。

  • 1 本指でスワイプ: オブジェクトを副グリッドに沿って少しずつ進めます。
  • 2 本指で上下にドラッグ: オブジェクトの積み重ねを前後に動かします。
  • 別のオブジェクトをタップ: そのオブジェクトを選択内容に追加、または選択内容から削除します。このジェスチャーは、キャンバス上の連続していない複数のオブジェクトを選択するときに便利です。
  • 2 本指でキャンバスをタップ: 複製します。
  • ドラッグしながら、1 本の指を別の図形につける: 2 番目の図形から位置揃えガイドが表示されるので、ドラッグしているオブジェクトをその図形に対して揃えることができます。
  • ドラッグしながら、指をどこか別の場所につける: グリッドを切り替えます。

キャンバス用のセカンダリジェスチャー

キャンバスを操作する際には、以下のセカンダリジェスチャーを使用できます。

  • 1 本指で上下にドラッグ: キャンバスを切り替えます。ただし、書類に複数のキャンバスが含まれている必要があります。
  • 2 本指でタップ: コピーしたオブジェクトを、2 本指でタッチしたところにペーストします。
  • ドラッグ: ドラッグしてキャンバス上の複数のオブジェクトを選択します。

ジェスチャーに関する一般的なルール

実世界のあらゆるものと同様に、OmniGraffle で使用するジェスチャーにもいくつかの基本的ルールがあります。

  • いったんセカンダリジェスチャーが有効になると、そのジェスチャーはプライマリフィンガーを放すまで有効のままとなります。
  • (オブジェクトまたはキャンバスのいずれかを)タップしてホールドするとき、OmniGraffle がホールド動作を認識してからセカンダリジェスチャーの実行が可能になるまでわずかな遅延(約 300 ミリ秒)が生じます。
  • (オブジェクトまたはキャンバスのいずれかを)タップしてホールドした後、セカンダリジェスチャーを実行する前にその指を放すと、コンテクストメニューが表示されます。

基本的なジェスチャー

タップ操作などは最も基本的なジェスチャーの 1 つですが、それが実にパワフルに感じることがあります。OmniGraffle では、タップ操作を通じてオブジェクトを選択および選択解除できます(タップするものによります)。

ここで、あなたはおそらく「オブジェクトを選択するだけなのに、どこがパワフルなんだろう」と思うかもしれません。確かに、選択すること自体にパワフルさはありません。しかし、選択したものを使えば、すばらしい操作を行ったり、時間を大幅に節約したりできるのです。どちらにしても嬉しいことに変わりはありません。

以下のセクションでは、OmniGraffle で使用できる「一般的な」iOS ジェスチャーのいくつかについて説明します。

オブジェクトを選択する

オブジェクトをタップします。すると、そのオブジェクトが青でハイライトされ、そのコントロールポイントの使用が可能になります。

タップジェスチャー

複数のオブジェクトを選択する

キャンバス上で複数のオブジェクトを選択する必要がある場合には、いくつかのジェスチャーを使用できます。

ドラッグ-選択
キャンバスをタップし、指をドラッグして、選択したいオブジェクトをハイライトします。
ドラッグ-選択ジェスチャー
互いに近い位置にある複数のオブジェクトを選択する必要がある場合には、この方法が最も便利です。
複数-選択
最初のオブジェクトをタップしてホールドすることにより選択します。
別の指(同じ手でも別の手でもかまいません)を使って追加のオブジェクトをタップして選択していきます。
複数-選択ジェスチャー
キャンバス上で互いに離れている複数のオブジェクトを選択する必要がある場合には、この方法が便利です。

オブジェクトの選択を解除する

キャンバス上でハイライトされているオブジェクトの選択を解除するには、キャンバス上の任意の場所(別のオブジェクトがないところ)をタップします。

タップジェスチャー

キャンバス上のオブジェクトを移動する

キャンバス上のオブジェクトを別の場所に移動する場合は、以下のいずれかの方法を使用できます。

  • オブジェクトタップして選択し、新しい場所までドラッグします。オブジェクトを別のオブジェクトに揃えたい場合は、位置揃えガイドを使用します。
    移動ジェスチャー
  • オブジェクトの位置をより正確に制御したい場合は、オブジェクトをタップし、ジオメトリインスペクタを開きます。そして、「X 位置」/「Y 位置」メーターを使用してオブジェクトを再配置します。
    タップジェスチャー
ジオメトリインスペクタ

キャンバス上で拡大/縮小するためのピンチジェスチャー

ピンチジェスチャーは、キャンバス上で拡大/縮小するときに使用します。何かを拡大して見たい場合は、親指と人差し指を同時に使って、指の間隔を広げるようなジェスチャーをします。キャンバスを縮小してイラスト全体を見たい場合は、親指と人差し指を同時に使って、つまむような動作をします。

  • ピンチして拡大
    拡大
  • ピンチして縮小
    縮小

参考
Finder アイコン、このジェスチャーが OmniGraffle for Mac でも使用できることを示すピンチして拡大/縮小ジェスチャーは OmniGraffle for Mac でも使用できます。そのためには、OmniGraffle の環境設定で Multi-Touch トラックパッドでのジェスチャーの使用を有効にする必要があります。

画面に合わせて図形またはキャンバスを拡大/縮小する

オブジェクトまたはキャンバスを拡大するには、そのオブジェクトまたはキャンバスを 2 本の指でダブルタップします。

2 本指でオブジェクトをダブルタップ

オブジェクトのサイズを変更する

オブジェクトのサイズを変更するには、以下の手順で操作します。

  • オブジェクトハンドルをタップしてドラッグします。
  • オブジェクトのサイズを縦横比を保ちながら変更するには、ハンドルをタップし、青い破線に従いながらドラッグします。
    オブジェクトのサイズを縦横比を保ちながら変更するには、青い線に沿ってサイズ変更ハンドルをドラッグ

グリッドに沿ってオブジェクトを移動する

オブジェクトを描画内のグリッドに沿って正確に配置したい場合は、以下の手順で操作します。

  1. オブジェクトの周りに水色のボックスが現れるまで、そのオブジェクトをプレスします。
  2. もう 1 本の指でキャンバスをプレスアンドホールドします。このとき、キャンバス内の別のオブジェクトまたは同じオブジェクトをプレスアンドホールドしないように注意してください。
  3. 最初の方の指を使ってオブジェクトを動かします。すると、オブジェクトに十字のグリッド線が表示されます。これは、そのオブジェクトが見えないグリッドに沿って(自由にではなく)一定の間隔ごとに移動できることを意味します。
    グリッドに沿って移動ジェスチャー
    グリッドに沿ってオブジェクトを移動

オブジェクトを少しずつ進める

オブジェクトをほんの少しだけ動かしたいことがあります。つまり、オブジェクトを目的の場所に向かって少しずつ押し進めたい場合です。

  1. オブジェクトをタップしてホールドします。
  2. 別の指を使って上、下、右、または左へスワイプします。すると、オブジェクトはその方向に少しだけ移動します(このときのオブジェクトの移動はグリッド設定に従います)。
ナッジジェスチャー

オブジェクトを前面または背面に移動する

1 つのレイヤー上に複数のオブジェクトを積み重ねている場合は、以下のジェスチャーを使用すると、選択したオブジェクトを積み重ねの最前面または最背面にすばやく移動できます。

上方向または下方向にダブルスワイプすると、オブジェクトが前面または背面に移動したことを知らせるメッセージがツールバーの下に表示されます。

オブジェクトを積み重ねの最前面に移動するには:

  1. 1 本の指でオブジェクトをタップしてホールドします。
  2. 2 本の指で上方向にスワイプします。すると、そのオブジェクトが積み重ねの最前面に移動します。
    前面へジェスチャー
    オブジェクトを最前面に移動

オブジェクトを積み重ねの最背面に移動するには:

  1. 1 本の指でオブジェクトをタップしてホールドします。
  2. 2 本の指で上方向にスワイプします。すると、そのオブジェクトが積み重ねの最背面に移動します。
    背面へジェスチャー
    オブジェクトを最背面に移動

オブジェクトのコンテクストメニューを開く

コンテクストメニューを使用すると、カット、コピー、ペーストなどの標準の編集機能にすばやくアクセスできます。

  1. オブジェクトを 1 回タップします。
    タップジェスチャー
  2. オブジェクトをプレスし、1 ~ 2 秒間ホールドしてから放します。そのオブジェクトの上にコンテクストメニューが表示されます。
    タップしてホールドジェスチャー

オブジェクトから指を放すと、選択したオブジェクトのすぐ上にコンテクストメニューが表示されます。

オブジェクトのコンテクストメニュー

コンテクストメニューの右端にある矢印をタップすると、オブジェクトを操作するためのオプションがさらに表示されます。

コンテクストメニューの追加項目

オブジェクトをコピーしてペーストする(簡単な方法)

オブジェクトを複製する際には、まずオブジェクトのコンテクストメニューを開き、「コピー」をタップした後、キャンバス上をタップしてから別のコンテクストメニューで「ペースト」を選択するという方法があります。しかし、オブジェクトを複製するだけなのに操作が複雑すぎると思いませんか。

キャンバス上のオブジェクトを簡単にコピーしてペーストする方法があります。

  1. 複製するオブジェクトをタップしてホールドします。
  2. 別の手の 2 本指を使って、コピーしたオブジェクトのペースト先となる場所をタップします。
コピーしてペーストジェスチャー
OmniGraffle でコピーしてペースト

オブジェクトをペーストした直後、画面上に小さな「複製」メッセージが表示されます。

キャンバスを動かす

キャンバスのサイズには制限がありません。また、作業中にはオブジェクトをかなり拡大することもあります。そのため、キャンバスを動かして、画面外にあるものを見たいことがあります。

このような場合には、キャンバスを動かしたい方向にスワイプします。

任意の方向にスワイプ

キャンバス間を切り替える

このジェスチャーは、書類に複数のキャンバスが含まれているとき、特にキャンバス間でオブジェクトのアクションを設定するときに便利です。

  1. キャンバスをプレスアンドホールドします。
  2. 上方向または下方向にスワイプして書類内のキャンバス間を移動します。
    キャンバス間を切り替えるジェスチャー

キャンバス間を切り替える際には、前のキャンバスまたは次のキャンバスに切り替えたことを知らせる小さなメッセージが画面に表示されます。

OmniGraffle でキャンバス間を切り替える

「キャンバス」サイドバーの表示と非表示を切り替える(iPad/iPhone 6 Plus のみ)

サイドバーの表示と非表示を切り替えるには、画面の左側からスワイプインします。

画面の左側からスワイプインしてサイドバーを表示/隠す

同じジェスチャー(左側からスワイプイン)で両方の操作を行うことができます。

参考
iPhone 6 Plus の場合、このジェスチャーを使用できるのは横向き(画面が横長になる状態)のときのみです。iPad の場合は、どちらの向きでも使用できます。より小さな画面のデバイスで「キャンバス」サイドバーの表示と表示を切り替えるには、「キャンバスを表示/隠す」ボタン をタップします。

線やラベルを操作するためのジェスチャー

OmniGraffle が優れている点の 1 つとして、組織図やフローチャートを作成するための内蔵ツールがあります。複雑なフローチャートを作成する際には、オブジェクト間を線でつなぐ機能や接続線にラベルを追加する機能が必要になります。

OmniGraffle には、線やラベルを操作するためのユニークな機能がいくつかあります。

2 つのオブジェクトを線でつなぐ

OmniGraffle は、組織図やワークフローダイアグラムなどの作図に優れています。組織図内の階層やプロセス内の各ステップを表す、さまざまな形状のオブジェクトを作成できます。しかし、これらの図やダイアグラムを意味のあるものにするためには、オブジェクトを線でつなぐ機能が鍵となります。以下、その方法について説明します。

  1. キャンバス上に 2 つのオブジェクトを描きます。
    キャンバス上の 2 つのひし形オブジェクト
  2. 線ツール 線ツール を選択します。
  3. 1 つのオブジェクトをタップし、もう 1 つのオブジェクトまでドラッグして、オブジェクト間を線でつなぎます。
    線でつながれた 2 つのひし形オブジェクト

テキストラベルを追加する

ラベルを追加したい箇所をダブルタップします。以下はその例です。

  • オブジェクト内にラベルを追加するには、そのオブジェクトをダブルタップします。
  • 線にラベルを追加するには、その線をダブルタップします。
  • キャンバス上にテキストラベルを追加するには、そのキャンバスをダブルタップします。
ダブルタップジェスチャー

テキストオブジェクトを線ラベルに変換する

キャンバス上のテキストラベルは、以下の簡単な操作で線ラベルに変換できます。

  1. テキストオブジェクトをタッチアンドホールドします。
    タップしてホールドジェスチャー
    線でつながれた 2 つのひし形とその下のテキストラベル
  2. 線をタップします。すると、テキストオブジェクトがキャンバス上の現在の位置から移動し、その線のラベルになります。
    1 本指のタップジェスチャー
    線でつながれた 2 つのひし形(テキストラベルが追加された状態)

線から線ラベルを切り離す

キャンバス上の線ラベルは、以下の簡単な操作でテキストラベルに変換できます。

  1. テキストラベルをタッチアンドホールドします。
    タップしてホールドジェスチャー
  2. キャンバス上の任意の場所をタップします。
    タップジェスチャー

操作後も、線にはテキストラベルがくっついているように見えますが、実際にはテキストオブジェクトに変換されており、タップして別の場所にドラッグすることも、完全に削除することもできます。

オブジェクトを回転する

オブジェクトを回転するにはジオメトリインスペクタを使用できますが、2 本指のスピンジェスチャーを使えば、よりすばやくオブジェクトを回転できます。

  1. 2 本の指でオブジェクトをタッチします。オブジェクトの上に、現在の回転角度を示すボックスが現れます。
  2. 1 本の指または両方の指をスピンさせて、オブジェクトを回転します。
    回転ジェスチャー
    オブジェクトを回転

指をスピンさせるにつれ、キャンバス上のオブジェクトが回転し、角度インジケータの数値も現在の角度に更新されます。

参考
Finder アイコン、OmniGraffle for Mac でもこのジェスチャーを使用できることを示すこのジェスチャーは OmniGraffle 6 for Mac でも使用できます。

描画用のジェスチャー

OmniGraffle には、描画用のツールが備わっています。基本的な図形を描けるほか、ベジェ曲線を使って複雑な図形を作成し、それらの図形を組み合わせたり、グラデーション/透明の塗りつぶしを使ってオブジェクトを塗りつぶしたり、その他さまざまな操作を行うことができます。

これらのジェスチャーを使用する際には、まず描画ツールの 1 つ(図形ツールフリーハンドツール、または )をタップする必要があります。

図形を描く

図形は、OmniGraffle で何らかの図を作成する際の基本的な構築ブロックです。たとえば、円などのシンプルな図形を描いた後、その頂点を編集し、ベジェ曲線を使うことによって、さまざまなものを作成できます。

キャンバス上に図形を描くには、以下の手順で操作します。

  1. 画面の下部にあるツールバーで、図形ツール をタップして選択します。
  2. 選択ツールを選択すると、キャンバスの下に図形選択 ツール が現れます。これをタップすると、「図形ツール」が開きます。
  3. ここでは現在キャンバス上にある図形の 1 つを選ぶか、または「お気に入り」の中から図形を選ぶことができます。また、「カスタムスタイル」をタップして、OmniGraffle に組み込まれている一連の図形の中から選ぶこともできます。その場合は、「カスタムスタイル」をタップすると、使用可能な図形が表示されます。
  4. キャンバス上に描きたい図形を選択します。
  5. 最後に、キャンバス上をタップし、指をドラッグします。そうすれば、目的の図形が描かれます。

フリーハンド図形を描く

自分だけのオリジナルアートを作成している場合などは、型にはまった図形だけでは物足りないことがあります。もっと自分のアイデアを生かしたものを描いてみましょう。

  1. ツールバーのフリーハンドツール フリーハンドツール をタップして、そのツールを有効にします。
    フリーハンドツールが選択された空白のキャンバス
  2. フリーハンド選択ツール フリーハンド選択ツール を選択すると、デフォルトのお気に入りセットの中から選択できます。また、「カスタムスタイル」をタップすれば、塗りつぶしやストロークを調整できます。
    フリーハンドツール
    フリーハンドオブジェクトの塗りつぶしを調整
    フリーハンドオブジェクトのストロークを調整
    カスタムストロークのスタイル
  3. 描画し始める前に、描画するオブジェクトの「接続を受け入れる」を無効にするとよいかもしれません。このオプションを無効にしておけば、描画中、キャンバス上の他のオブジェクトに自動的につながることがなくなります。
    「接続を受け入れる」オプションはデフォルトで有効になっているため、フリーハンドオブジェクトを描くときにはこの機能を無効にするとよいでしょう。
    「接続を受け入れる」オプションが無効になっている状態

これで、希望の塗りつぶしやストロークを使って実際に描き始めることができます。次の図は、2 つの図形(花の中心部分と 1 枚の花びら )だけを使って構成したものです。目的の形状の花びらを作成した後、それをコピーして何度もペーストし、回転させています。さらに、オブジェクトの積み重ねの中で、それぞれの花びらを前方または後方に移動させています。

OmniGraffle で作成した花の絵

OmniGraffle での描画について詳しくは、このマニュアルで後述している「描画の基本」を参照してください。また、その章の「ベジェ曲線を操作する」セクションをぜひご覧ください。