astah*

Japanese | English
Home 機能 MindClip(マインドクリップ)

MindClip(マインドクリップ)を使ってみよう

Eメール 印刷

MindClip(マインドクリップ)とは、マインドマップにWebの情報をクリッピングし、それらの情報をつなぎ合わせたり、色付けしたりコメントを追加することで、情報に新しい意味づけを与えたり、思考を支援したりするプラグインです。

astah* think! 3.0のインストーラには、同梱されています。
astah* professional、UMLでは、MindClipプラグインをインストールしてご利用ください。

 

使い方

1. マインドマップの作成

それでは、Web上の情報をクリッピングするマインドマップを作成します。astah* think!では、メインメニューの[図]-[新規マインドマップ] からマインドマップを作成できます。

mindmap_menu

 

次のように新しいマインドマップが作成されます。

new_mindmap

マインドマップでは、キーワードを自由に入力し、枝を放射状に広げながらグラフィカルなノートを作成することで、アイディアを発散させたり、または考えを整理したり、発想を生み出す時など、自分の思考を見える化できます。
なお、マインドマップの詳しい機能については、astah* think!に同梱のマニュアルをご参照ください。([ヘルプ]-[astah* リファレンスマニュアル])

2. Web上の情報をマインドマップにクリッピングする

マインドマップを作成したのち、MindClipがサンプルとして用意しているクリップしたい情報にブラウザでアクセスし、URLをマインドマップにドラッグ&ドロップしてください。
例えば、twitterのtweetのURLを、マインドマップにドラッグ&ドロップすることで、URL先の情報をマインドマップにクリッピングできます。

drag_drop

このように、マインドマップにクリッピングされた情報を自由に配置し、色やアイコンを付けて、思考の支援に役立てて下さい。

3.クリッピングしたい情報を追加する

マインドマップでWeb上の情報をクリッピングし始めると、amazonや価格.comでの商品の比較、またはサイボウズデヂエのようなWebデータベースなど、クリッピングしたいサイトや抜き出したい情報を自分でカスタマイズしたくなるでしょう。

MindClipでは、クリッピングしたい情報をユーザーが追加、カスタマイズできます。
今回は、サイボウズデヂエを例にクリッピングの設定を追加してみましょう。 サイボウズのオンラインデモから 飲食業向け - メニュー管理 をブラウザで開いてみてください。

dezie_menu_s

MindClipでは、同じレイアウトの一覧情報と詳細情報をもつWebページから情報をクリッピングできます。
それでは「レコードを閲覧する」リンクをクリックし、クリッピングしたい情報のWebページを見てみましょう。

dezie_view

 

今回は、メニュー名と略称、そして写真を抜き出してクリッピングしてみます。

dezie_view2

astah* think!のインストールフォルダ/clipフォルダに、dezie-menu.jsonというファイルを作成し、次のテキストを貼り付けてください。

{
  url_pattern : "http://onlinedemo.cybozu.co.jp/scripts/dezie8/db.exe?page=DBRecord&did=208",
  description : "サイボウズデヂエ メニュー用のクリップです。",
  topic : {
    label : {
      template : " - %s\n - 略称:%s",
          path : [
            "//td[text()='メニュー名']/following-sibling::td[position()=1]",
            "//td[text()='略称']/following-sibling::td[position()=1]"
          ]
    },
    image : {
          path : "//td[text()='写真']/following-sibling::td[position()=1]/img",
          width : 160,
          height : 160
    }
  }
}

astah* think!の メインメニュー ‣ ツール ‣ マインドクリップ一覧 を選択し、「再読込」ボタンを押下してください。

refresh

すると、追加したdezie-menu.jsonというファイルが一覧に追加されたはずです。

それでは、メニューの一覧ページに戻り、「レコードを閲覧する」をドラッグし、マインドマップにドロップしてみてください。

drop_dezie_s

 

すると、マインドマップに次のようにクリッピングされたはずです。

dezie_menu_after

このようにMindClipでは「ファイル名.json」という設定ファイルを用意することで、ユーザーが独自にクリップしたいサイトを追加できます。

jsonファイルでの詳細な設定については、MindClipのクリッピング設定ファイル リファレンス を参照してください。

サンプルサイト

Amazon

example_amazon_s

Century21

example_century21_s

Trac

example_trac

価格.com

example_kakaku_s

twitter

example_twitter_s

サイボウズデヂエ

example_cybozu_s

 

MindClipのクリッピング設定ファイル リファレンス

Web上の情報をクリッピングする設定ファイルのリファレンスです。
MindClipは、クリップファイルという設定ファイルで、どのWeb上(URL)の情報からどのような項目をクリッピングするか設定しています。クリッピングファイルは、<<astah*のインストールフォルダ>>/clipに、<<ファイル名>>.jsonというm名称で配置されています。
(例: c:/Program Files/astah-think/clip )
(例: c:/Program Files/astah-professional/clip )

設定ファイルの構造

設定ファイルは JSONフォーマット で記述します。また、設定ファイルでは XPath で取得したいWebページのHTMLの要素を特定します。

なお、クリッピングファイルはUTF-8エンコードで記述してください。

 

クリッピングファイルは、次のようなノードで構成されています。

  • Parser : 全体の設定ノード
  • Authentication : 認証ノード
  • Topic : マインドマップ上に展開するトピックへの設定をまとめるノード
  • Label : トピックの文字列部の情報を設定するノード
  • Image : トピックの画像部の情報を設定するノード
  • Path : 取得する要素をXPathで特定する設定ノード

構造

Parser
  |- Authentication
  |- Topic
  |   |- Label
  |   |   |- Path
  |   |- Image
  |   |   |- Path

JSONでの構造

{
  url_pattern : "http://www.change-vision.com",
  description : "クリップの概要です",
  javascript_enable : "false",
  topic : {
    label : { 
      template : "- No1:%s\n - No2:%s\n - No3:%s",
      path : [
      "No1の%sに埋め込むテキストへのxpath",
      "No2の%sに埋め込むテキストへのxpath",
      "No3の%sに埋め込むテキストへのxpath"
    ]
    },
    image : { 
      path : "<<イメージ画像へのxpath>>",
      width : <<イメージの横サイズ(pixel)>>,
      height : <<イメージの横サイズ(pixel)>>
    }
  }
}

Parserノード

Parserノードでは解釈するURLのパターンを設定したり、JavaScriptを有効にした上で解釈するかなど、パーサー全体で有効になる値を設定します。

設定値

  • url_pattern : 文字列 : 解釈するURLの前方一致パターン。
  • authentication : Authentication : 認証機構を設定するかどうか
  • javascript_enable : boolean : JavaScriptを有効にするか。有効にした場合、解析速度が落ちます。一部のページではJavaScriptのDOM操作を用いており、そういったページでは有効にしてください。
  • topic : Topic : Topicノードを参照

Authentication

パーサーが使用する認証機構を設定します。認証が必要なWebサイトから情報を取得する場合に利用します。

設定値

  • type : 文字列 : 特別な種別を設定する。dezie、formを指定できる。formの場合は指定しなくてもよい。通常はform
  • id : Path : IDを入力するテキストフォームを指定する。
  • password : Path : パスワードを入力するテキストフォームを指定する。
  • login_element : Path : ログインを実行するボタンやリンクなどのエレメントへのパスをXPathで指定する。

Topicノード

Topicノードは、マインドマップにトピックとして取り込まれる情報を設定します。

設定値

  • label : Label : Labelノードを作成
  • image : Image : Imageノードを作成

Labelノード

Labelノードではトピックの文字列部の情報を設定する。

設定値

  • template : 文字列 : 指定したURLから取得した複数の文字列をString.format形式で整形するための設定値
  • path : Path,文字列,配列 : 取得するXPath、もしくはPathノードを指定する。配列で指定した場合、複数の文字列を取得する。

Imageノード

Imageノードではトピックの画像部の情報を設定する。

設定値

  • path : Path,文字列,配列 : 取得するXPath、もしくはPathノードを指定する。配列で指定した場合、複数の文字列を取得する。
  • width : 数値 : 画像の幅を数値で指定する。
  • height: 数値 : 画像の高さを数値で指定する。

Pathノード

Pathノードでは指定したURLからXPathで情報を取得するためのパスを指定する。取得できない場合、いくつかの候補を指定したり、全て失敗した場合に表示する文字列を指定できる。

設定値

  • 短縮のため、このノードのみ直接文字列を指定できる
  • candidate : 文字列 : 取得先の候補を指定
  • failed_scrape_message : 取得できなかった場合に表示する文字列を指定。ただし、Imageノードから指定されてもなにも表示されない


登録商標

  • サイボウズ、Cybozu、サイボウズのロゴマーク、デヂエ、Dezie、ガルーンはサイボウズ株式会社の登録商標です。
  • AmazonおよびAmazon.co.jpロゴは、Amazon.com, Inc.またはその関連会社の登録商標です。
  • TwitterおよびTwitterロゴは、Twitter, Incの登録商標です。
  • 記載されているロゴ、商品名、製品名は各社及び商標権者の登録商標あるいは商標です。
 
twitter-a はてなブックマークに登録 Yahoo!ブックマークに登録