Inkpodチュートリアル
ここでは、Inkpodの基本的な操作について説明します。詳細な解説は、ユーザーマニュアルを参照してください。
ここでは、Inkpodの基本的な操作について説明します。詳細な解説は、ユーザーマニュアルを参照してください。
Inkpodで描く図をマップと呼びます。
広大なキャンバス上に、ノードと、ノードを結ぶ関連線という２種類の部品を置いて、図を描いていきます。
ノードと関連線をまとめてオブジェクトと呼びます。マップ上にあるものは、すべてオブジェクトです。
Inkpodの画面です。
右側のグリッドが描かれている領域がキャンバスです。ここにマップを描きます。
ウインドウ上部にはツールバーがあります。
左側にあるのは、パレット、レイヤー一覧、プロパティ・エディタです。パレットには、よく使うスタイルや、よく使う図形を登録しておけます。プロパティ・エディタは、オブジェクトの色、形、線の種類などのオブジェクトのプロパティを編集するためのものです。
キャンバス上で、ノードを置きたい位置にマウスカーソルを移動して、ダブルクリックしてください。
ダブルクリックするとノードが配置されます。ノードの形や色、フォントなどは、ツールバーやパレット上で選んだものが適応されます。
配置されるとノードにテキストが入力できる状態になります。もし、テキスト入力状態ではない場合は、配置したノードをクリックして選択状態にして、ENTERキーかF2ボタンを押すことでテキスト入力状態になります。
ノードにテキストを入力します。入力し終わったら、Enterキーで確定してください。もし、改行を入力したい場合は、Ctrlキーを押しながらEnterキーを押してください。
以下の図のようにもう一つノードを配置してください。
次に、配置した2つのノードを関連線で接続します。以下の図のように、接続元となる左側のノードをSHIFTキーを押しながらクリックします。すると、接続元のノードの中央を始点とする関連線が表示されます。
関連線の形、色や矢尻の形は、ツールバーやパレットで指定したものが適応されます。
次に、接続先となるノードをクリックします。
接続先のノードをクリックすると、２つのノードは関連線により接続されます。
この状態では、関連線の両端に緑色の四角がついています。これは関連線が選択された状態であることと、関連線がノードに接続していることを表しています。もし、関連線の両端の四角形が白い場合は、関連線がノードに接続していないことを表しています。
次に関連線にテキストを入力してみます。関連線が選択された状態で、ENTERキーまたはF2キーを押してください。すると以下の図のようにテキスト入力状態になります。
この状態で適当にテキストを入力して、ENTERを押してください。
以下の図のように関連線にテキストが入力されます。
関連線は、原則としてノードをつなぐためのものですが、ただの図形として使用するために、ノードにつながっていなくても、単独で置くことができます。
以下の図のようにオブジェクトが存在していない場所でSHIFTキーを押しながらクリックしてください。
クリックした場所を視点として、関連線が表示されます。この状態で終点の位置までカーソルを移動します。
そして、終点の位置でクリックします。すると以下のようにノードが存在しなくても関連線だけを引くことができます。
もし、この関連線をノードに接続したい場合は、関連線の両端の白いカーソルをドラッグして、接続したいノード上にドロップしてください。
カーソルの色が緑色になれば接続完了です。
ノードや関連線に対して、テキストを編集したり、色を変えたりするには、あらかじめノードや関連線を選択しておく必要があります。
オブジェクトを選択するには、オブジェクトを左クリックします。複数選択するには、Ctrlキーを押しながら左クリックします。もう一度Ctrlキーを押しながら左クリックすると、選択が解除されます。また、Ctrlキーを押しながらドラッグしてオブジェクトを囲む操作をすると、矩形で囲んだ領域内のオブジェクトを一度に選択できます。
選択状態になったオブジェクトには編集用のハンドルが表示されます。
編集操作には、複数のオブジェクトに対して一度に適応可能な操作と、１つのオブジェクトに対してしか行えない編集操作があります。
複数のオブジェクトに対して適応可能な編集操作を行った場合、選択中のオブジェクトのすべてが対象になります。
１つの対象にしか適応できない編集操作を行った場合は、選択されているオブジェクトのうち、破線の四角のカーソル（単一選択カーソル）で囲まれたオブジェクトだけが操作対象になります。単一選択カーソルが指すオブジェクトは、複数選択されているオブジェクトのうち常に１つだけです。
上の例では、「ノード２」、「ノード３」、「ノード４」、「関連１」が複数選択されています。このうち、「ノード２」が１つのオブジェクトに対してしか行えない編集操作の操作対象となるオブジェクトとなります。
オブジェクトを選択すると、様々なハンドルが表示されます。
例えば角丸矩形のノードを選択すると次のようになります。
四隅と四辺の四角いハンドルは、サイズ変更ハンドルです。これをドラッグすることで、ノードのサイズを変更できます。
左上の丸いハンドルは、角丸矩形に固有のハンドルです。シェイプごとの細かな操作については「シェイプ固有の操作」を参照してください。上についている丸いハンドルは回転用ハンドルです。後述する回転操作に使用します。
黒いハンドルは操作ができないことを表しています。例えば、ノードの高さとテキストの高さを自動的に合わせる設定の場合は、高さは変更できません。
黄色ハンドルをダブルクリックすると、中のテキストのサイズに合わせて、ノードのサイズを自動調整します。
ノードのこれらのハンドル以外の部分をドラッグすると、ノード自体の移動になります。
単独で置いた関連線もドラッグで移動できます。ただし、関連線上のテキストボックスをドラッグした場合は、テキストボックスを関連線上で移動させる意味になります。
ノードや関連線には、いくつかの形（シェイプ）が用意されています。
オブジェクトの形は、ツールバー上のシェイプ選択コンボボックス、またはプロパティ・エディタの「オブジェクトの形」グループで変更します。
ノードの形として、矩形、角丸矩形、楕円、菱形、円柱、星形などの形が使用できます。
形を選択したいノードを選択します。
ツールバーのノード用シェイプの選択コンボボックスを開きます。
ここで、例えば楕円を選択すると、選択されているノードが楕円に変化します。変更したとき、変更前と変更後のシェイプで共通しているプロパティの内容は引き継がれます。
コンボボックスで選択されている形も楕円に変わり、新しくオブジェクトを追加するときは、この形が使用されます。
関連線の形は、直線（折れ線）、かぎ型、曲線が使用できます。（曲線は、自由曲線ではありません）
形を変更したい関連線を選んで、ツールバーの関連線用シェイプのコンボボックスを開きます。
ここで、例えば、かぎ型を選択すると、選択されている関連線の形がかぎ型に変わり、コンボボックスで選択されているシェイプが、かぎ型になります。
関連線の始点と終点の矢尻の形も、ツールバーから変更できます。
新しく追加する関連線の矢尻の形は、シェイプと同様に、コンボボックスで選択されている形になります。
ノードのシェイプには、吹き出しの形をしたものがあります。吹き出しについては、先端を他のオブジェクトと接続することができます。吹き出しの先端のハンドルをドラッグし、他のノードの上に移動して、離します。
すると、ハンドルの色が緑に変わり、接続された状態になります。
ノードを移動しても、吹き出しの先端は、関連線と同じようにノードにつながったままになります。
ノード同士が接続されているというのは、Inkpodでは例外的ですが、不可視の関連線で接続されているものとして扱われるので、アプリのAPIから関連と同じようにたどることができます。
オブジェクトは回転することができます。オブジェクトの上部に出ているのが、回転用のハンドルです。
これをつまんで動かすと、オブジェクトを回転させることができます。Ctrlキーを押しながら動かすと、45度ずつ動くようになります。
関連線も回転させることができます。ただし、どのノードともつながっていない関連線に限ります。
始点と終点の間を中心として回転します。
回転した状態で、ノードに接続されると、回転角度を変更できなくなります。回転角度を変えるには、両端のノードを一度外す必要があります。
画像ファイルをドラッグ&ドロップするか、クリップボードにある画像を「貼り付け」することで、画像付きのノードを追加することができます。
画像ファイルのファイル形式は、JPEG, PNG, SVGが使用できます。
クリップボードから貼り付けられるのは、ビットマップ形式の画像になります。クリップボードから貼り付けた画像は、PNG形式として取り込まれます。
詳細は、画像の貼り付けを参照してください。
自動レイアウトとは、木構造（ある一つのノードを根として、木の枝のようにノードが広がる構造）で接続されたノードの位置を自動的に調整するための機能です。
例えば、以下の図のように一番左側のノードから、他のノードが木の枝のように広がっているとします。一番左側のノードを選択状態にして、ツールバーの「自動レイアウト」ボタン
を押してください。
すると以下の図のようにレイアウト設定のダイアログが開きます。ここでは何も変更せずにOKボタンを押してください。
すると、一番左側のノードの横に自動レイアウトを表すアイコンが表示され、先ほど適当に配置されていたノードがきれいに配置されます。
レイアウトの方法を変更したい場合は、根となっているノード（一番左側のノード）を選択し、右クリックします。右クリックメニューのレイアウトを選択すると、レイアウトの設定ダイアログが開きます。ここでは以下の図のように関連線の表示方法（コネクタのタイプ）をかぎ型に変更してOKを押してみます。
すると、以下の図のようにノードを接続している関連線の表示が変わります。このようにレイアウトの設定ダイアログで、木構造の整列方向、ノード間の接続方法、配置するときのノード間の間隔を指定することができます。
スタイル・パレットは、よく使うオブジェクトのスタイルを登録しておき、簡単に呼び出して繰り返し使用できる機能です。スタイルとは、フォントとオブジェクトの形以外の、オブジェクトの外観です。例えば、文字色、塗りつぶし色、線の太さ等です。
ノード用と関連線用のスタイルパレットがあります。ここでは、ノード用のスタイルパレットについてのみ説明しますが、関連線用のスタイルパレットも同じように使用できます。
スタイルを適用したいノードを選択します。
ノード用のスタイルパレットを開き、適用したいスタイルをクリックします。
パレットのスタイルが変わり、選択したノードにそのスタイルが適用されます。
一度選択したスタイルは、次からはパレットのボタンをクリックするだけで適応されます。
ノードを新規作成するとき、そのスタイルは、パレットで選択されているスタイルが使用されます。
自分で作成したノードのスタイルを、スタイルパレットに登録しておくことができます。以下の図のように登録したいノードを選択し、「スタイルに追加」をクリックします。コンテキストメニューにも「スタイルに追加」があります。
スタイルパレットはグループ分けされています。複数のグループがある場合、追加先を聞かれます。
追加先グループを選んでOKを押すと、そのグループの末尾に選択したノードのスタイルが登録されます。スタイルには、色等のプロパティのみが登録され、形やフォントは登録されません。
登録されたスタイルやグループは、ドラッグ＆ドロップで順序を入れ替えたり、削除する事ができます。グループを追加することで、スタイルを好みの分類に分けることができます。
スタイルを編集するには、右クリックでコンテキストメニューを表示させます。
スタイルパレットは、マップファイル毎に保存されます。スタイルの追加、削除、編集等も、「元に戻す」操作の対象です。
別のファイルのスタイルを利用したい場合には、メニュー「ファイル」→「スタイルのインポート」からファイルを選ぶことで、現在開いているデータにスタイルを読み込むことができます。
よく使うオブジェクトを登録しておき、呼び出してマップに置くことができます。
登録オブジェクト・パレットにオブジェクトを追加するには、登録したいオブジェクトを選択し、パレットの追加ボタンを押します。
オブジェクトがパレットに登録されます。登録されたオブジェクトは「登録オブジェクト」ボタンを押すと確認できます。
パレット上の登録されたオブジェクトをクリックすると、オブジェクトがマップに追加されます。
登録したオブジェクトは、右クリックして表示されるメニューの「パレットから削除」を選ぶことで、削除できます。
登録したオブジェクトは、マップファイルに保存されます。登録オブジェクトの、追加、削除も「元に戻す」操作の対象です。