NOTA2 プラグイン仕様書

NOTA2 で遊ぼう！ by 洛西一周

NOTA開発室¶-----------¶NotaAPIとは？¶できること・メリット¶作品例¶¶NOTAプラグインの開発¶NOTA APIの利用¶関数一覧¶サンプルプロジェクト¶¶使用方法¶サーバーへの設置¶「ファイルを貼る」から貼り付け¶¶-----------¶NOTAネットワーク¶謝辞¶http://rakusai.org/image/wiki/bg_05h.gif¶

NOTA開発室

このサイトはTiddlyWikiを改良したKamiWikiで動作しています。¶詳しい情報は¶http://rakusai.org/kamiwiki/¶を参照してください。¶¶このWikiは、TiddyWikiをベースに作られています。¶公開にあたり、この場を借りてTiddyWikiの開発者である¶JeremyRuston氏に感謝します。¶http://www.tiddlywiki.com/¶¶また、TiddyWikiの保存の問題を解決したPhpTiddyWikiも大いに参考に¶しました。開発者に感謝します。¶http://www.patrickcurry.com/tiddly/¶¶素材は@WEBからいただきました。運営者のSANO氏に感謝します。¶http://www4.plala.or.jp/a-Web/

実際に開発済みもしくは開発中の作品を紹介します。¶¶NOTA2標準のプラグイン¶・アクセスカウンター¶・掲示板¶・ツールバーの背景色変更¶・Webカメラ¶¶NOTAネットワークによって開発中のプラグイン¶・テレビ会議システム (by千葉さん)¶¶・マルチレイヤーマップ：書き込み可能なマップ、カテゴリー分けして各カテゴリーをレイヤーごとに表示することも可能。（by 武蔵工大 真行寺さん、上野研卒論生）¶¶¶-------------------------------¶＊みなさんも、付け加えてください。

NOTA APIの利用方法を説明します。¶¶・NotaAPIを呼び出すには？¶・プラグインを選択したり大きさを変更するには？¶・サーバー上のデータを読み書きするには？¶・NOTAのページの情報を取得するには？¶・プラグインを連携させるには？¶・その他できること

//APIの定義¶NotaAPI = new NotaAPI(this);¶¶//オブジェクト操系関数¶//解説：プラグインを選択したり大きさを変更する¶selectObject¶resizeObject¶¶//データの読み書き系関数¶//解説：サーバー上のデータを読み書きする¶loadData ...*¶writeData ...*¶onWriteData(resultObj) ...*¶onLoadData(resultObj) ...*¶¶//情報取得系関数¶//解説：NOTAのページの情報を取得する¶getObjectID¶getObjectProperty¶getPageID¶getPageLock¶getPageWidth¶getPageHeight ¶getPageAuthor ¶getUserID¶getUserPower¶getEditMode¶getNotaVersion¶getPageScale¶getPageNumber¶getPageCount¶getLang¶¶//プラグイン連係関数¶findObject(plugin,index) ...*¶¶//リンクを利用したコマンドの呼び出し¶linkCommand¶onCommandLink(string)¶¶//NOTA Global関数¶//解説：その他できること¶MessageBox¶showMyCursor¶Replace¶HLStoRGB¶playSound¶¶¶[注]¶*マークは、プラグインとしてサーバーに配置したFlashのみ利用可能。

サーバーにデータを保存し、呼び出す方法を説明します。¶¶NOTAプラグインは、プラグイン別に、固有の情報（プロパティ）をサーバーに保存しておくことができます。¶¶【使用例】¶例えば、アクセスカウンターのプラグインを想定してみましょう。アクセスカウンターは、サーバーに現在のアクセス回数が記録されており、ブラウザでページが読み込まれる度に、その回数を取得し、数字を１足して、またサーバーに保存します。¶¶【サーバーの保存場所】¶情報はXML形式で、サーバーのNOTAデータフォルダ内に「プラグインのID名.xml」という名前で保存されます。¶¶例：¶/home/notadata/default/img/20051021001/213447238.xml¶¶プラグインは、NOTAが自動で決定するファイルとは異なるファイルにアクセスことはできません。しかし、下記の関数を用いることで、サーバーのファイルに関して意識することなく、情報を扱うことができます。¶¶【具体的な流れ】¶¶下記のようになります。¶詳しくは、それぞれの関数をクリックしてください。¶¶//1. NOTA APIを呼び出す¶NotaAPI = new NotaAPI(this);¶¶//2. サーバーからデータを読み込み開始¶NotaAPI.loadData();¶¶//3.読み込みが完了したら通知される¶function onLoadData(resultObj){¶ //データが読み込まれた¶ //ここで、適当な処理を行う¶}¶¶//4.データをサーバーに書き込む¶NotaAPI.writeData(newObj);¶¶//5.サーバーの書き込みの結果が通知される¶function onWriteData(resultObj){¶ //書き込み結果がOKか失敗か¶}¶¶¶

クリックしたときに、オブジェクトを選択します¶→selectObject¶¶オブジェクトのサイズを動的に変更した場合に、選択枠のサイズを変更する¶→resizeObject¶

NOTAの様々な情報を取得して、利用する方法について解説します。¶¶取得したい情報について関数をクリックすると、詳細が表示されます。¶¶プラグインのオブジェクトの固有IDを取得する¶→getObjectID¶¶プラグインの各種プロパティを取得する¶→getObjectProperty¶¶現在開いているNOTAページのIDを取得する¶→getPageID¶¶現在開いているNOTAページが凍結されているか取得する¶→getPageLock¶¶現在開いているページの幅を取得する¶→getPageWidth¶¶現在開いているページの高さを取得する¶→getPageHeight¶¶現在開いているページの作者IDを取得する¶→getPageAuthor¶¶ログインしているユーザーのIDを取得する¶→getUserID¶¶ログインしているユーザーの権限（管理者・メンバー・ゲスト）を取得する¶→getUserPower¶¶現在、編集モードか閲覧モードか取得する¶→getEditMode¶¶NOTAのバージョンを取得する¶→getNotaVersion¶¶現在開いているページの表示倍率を取得する¶→getPageScale¶¶現在開いているページの現在ページを取得する¶→getPageNumber¶¶現在開いているページのページ数を取得する¶→getPageCount¶¶表示言語を取得する¶→getLang

メッセージを表示するには？¶→MessageBoxを使います¶¶カーソルを変更するには？¶→showMyCursorを使います¶¶文字を置換するには？¶→Replaceを使います¶¶HLSカラーをRGBカラーに変換¶→HLStoRGBを使います¶¶効果音を再生するには？¶→playSoundを使います

→NotaAPIを呼び出す

NOTAの機能と連係することで、簡単にリッチなFlashアプリを構築できます。¶NOTA APIを用いて迅速にFlashアプリ開発できます。¶¶NOTAプラグインで、想定している作品¶・アンケート、掲示板など¶　　多数のユーザーの情報を集めるもの¶・ストリーミング通信¶　　ビデオチャット、ストリーミング放送など動画を用いたもの¶・インタラクティブゲーム¶　　さまざな楽しいゲーム¶・簡易ボタン¶　　押すと他のサイトにジャンプできるアーティスティックなボタン¶・表作成¶　　表を作成したり、計算できる¶・ショッピングカート¶　　既存のものよりずっとインタラクティブなショッピングカート¶・ツールバー¶　　自分好みにデザインを変えたツールバー¶¶などを開発できます。¶ポイントは、すべての作品が「ネットワーク性」を持っていることではないでしょうか。プラグインを開発するときは、いつも、リアルタイムに複数人が使用することを考慮する必要があります。また、その点が魅力でもあります。¶

NOTA2 では、NOTA上でFlashアプリケーションを自由に動かすことができる機能が追加されました。NOTAはWeb上の基本的なコミュニケーション機能を提供します。プラグインを使うことで、用途に合わせて、NOTAを拡張することができます。¶¶Flash アプリケーションは、サーバーとのデータ通信の開発が難しいと言われてきましたが、NOTAではこの通信部分が関数化(Nota API)されており、プラグインからこれらの機能を簡単に利用できます。XMLを用いたサーバーへのデータ保存、読み込みを数行のコーディングで実現します。¶¶Flashアプリケーションを手軽に作ってみたい人に、NOTAは優れたプラットフォームを提供します。迅速な開発とテストができることをお約束します。¶¶NOTAとFlashを使ったインタラクションの世界を体験してみませんか？¶¶　　　　　　　　　　　　　　2005/1/23　洛西一周

NOTAは、プログラマーだけでなく、一般市民も参加する「NOTAネットワーク」というプロジェクトを通じて、配布、開発、サポート、事例紹介などの活動を行っています。興味を持たれた方は、気軽に私たちにご連絡ください。¶¶NOTAネットワーク・ポータル¶http://nota.jp/network/¶

NOTA プラグインは、サーバーの特定のフォルダにswf ファイルを設置すれば、ブラウザ上でNOTA のメニューにプラグイン名が表⺬され、簡単にページに配置することができるため、ユーザーが⼿軽に利用できます。¶¶具体的手順：¶1. プラグインの情報ファイルを用意します。¶プラグインのswfファイルと同名のxmlファイルを作ります。¶例えば、作成したプラグインのファイル名が「game.swf」なら¶「game.xml」というファイルを作ります。¶ファイルは、最初からNOTAに附属しているプラグインのXMLファイルをコピーすると編集が簡単です。¶¶そのファイルを開き、以下のように、英語名、日本語名、著作者名、著作者への連絡先、著作者のWebを記入して保存します。文字コードは必ずUTF-8にしてください。¶¶<?xml version="1.0" encoding="utf-8"?>¶<nota>¶ <head>¶ <title>Camera Window</title>¶ <title-ja>Webカメラ窓</title-ja>¶ <author>Rakusai</author>¶ <email>rakusai@kamilabo.jp</email>¶ <web>http://rakusai.org</web>¶ <version>2.0</version>¶ </head>¶</nota>¶¶2. FTPを利用して、NOTAが設置されているサーバーの「Plugins」フォルダ内に作成したswfファイルとxmlファイルをアップロードしてください。¶¶3. NOTAをブラウザから開き、「貼る」タブの中に、プラグインが表示されているか確認します。プラグイン名をクリックすると、ページに貼り付けられます。

プラグインは、ブラウザ上で「貼る」タブの「ファイルを貼る」から、直接ページに貼り付けて利用することができます。¶¶ただし、この場合はプラグインの動作に関していくつかの制限があります（悪意のある第3者によって、不正な処理を行うプラグインを貼り付けられないようにするためです）。¶¶具体的には、サーバー上のデータを読み書きするための関数と、プラグインを連携させるための関数が利用できなくなります。詳しい関数名に関しては、関数一覧を確認してください。¶

プラグインのアクションスクリプトを記述するフレーム内に¶¶NotaAPI = new NotaAPI(this);¶¶というようにNOTA APIのオブジェクトを呼び出します。¶()内の引数には、NOTAのイベントを受け取るMovieClipを指定します。通常、「this」を入れます。¶¶この記述は、スクリプトの始めのほうで、プロジェクト一つにつき一度だけ呼び出してください。¶¶これで、準備は完了です。

プラグイン上のテキストボックスやボタンなどをクリックしたときに、プラグインがNOTA上で選択されるようにするために呼び出します。¶¶バージョン：～2.10¶¶使用例：¶¶//NOTA APIを呼び出す¶NotaAPI = new NotaAPI(this);¶¶okbutton.onPress = function(){¶ //プラグインの選択¶ NotaAPI.selectObject();¶};¶¶¶

プラグインのサイズを動的に変更した場合に、選択枠のサイズ調整のため呼び出すようにしてください。¶¶バージョン：～2.10¶¶使用例：¶¶//NOTA APIを呼び出す¶NotaAPI = new NotaAPI(this);¶¶okbutton.onPress = function(){¶ //フォームのサイズ変更¶ back._height = 200;¶ //NOTAにサイズ変更を通知¶ NotaAPI.resizeObject();¶};

サーバーの指定されたファイルから情報を読み出します。¶引数の指定はありません。¶¶呼び出すと、onLoadData(resultObj)関数に結果が返ります。¶onLoadDataをかならず記述するようにしてください。¶¶バージョン：～2.10¶¶使用例：¶//NOTA APIを呼び出す¶NotaAPI = new NotaAPI(this);¶¶//サーバーからデータを読み込む¶NotaAPI.loadData();¶¶//読み込みが完了したら通知される¶function onLoadData(resultObj){¶ //データが読み込まれた¶ //ここで、適当な処理を行う¶ //詳しくはonLoadDataを参照¶}¶¶

サーバーからデータの読み込みが完了すると呼び出されます。¶resultObjパラメータに、結果が入っています。¶¶バージョン：～2.10¶¶resultObj解説¶¶【読み込みが失敗したとき：】¶サーバーからの返答がない、タイムアウト、XMLファイルが壊れているなど予期しないエラーが発生した場合¶resultObjがundefinedになります。¶if (!resultObj){ }によって判定できます。¶¶使用例：¶function onLoadData(resultObj){¶ //データが読み込まれた¶ if (!resultObj){¶ //読み込みエラー¶ MessageBox("掲示板：読み込みエラー");¶ return;¶ }¶}¶¶【読み込みが成功したとき】¶var value = resultObj["id.name"];¶という形式で、値を取得することができます。¶¶"id.name"の部分は、「.（半角ドット）」で挟んで、¶左に「属性グループのID」、右に「属性名」を指定します。¶¶「属性グループ]は、掲示板プラグインなどで、複数のアイテムを管理する必要があるときにアイテムを区別するために使用します。¶¶その必要がないときは「default」という文字を使ってください。¶¶【一つの属性しか使わない例：】¶名刺プラグインの場合¶このプラグインでは、一つのプラグインは、一人の情報を保存し、それを名刺風に表示します。この場合は、以下のように、記述します。¶¶var name = resultObj["default.name"];　　//名前の取得¶var email = resultObj["default.email"]; //メールの取得¶var company = resultObj["default.company"]; //会社の取得¶¶【複数の属性を管理する例：】¶アドレス帳プラグインの場合¶このプラグインでは、複数の人を管理します。それぞれの人は、名前、メール、会社の３つの属性を持っています。これを処理するためには、一人づつにIDを割り当て、そのIDごとに属性を管理します。以下のようにfor文を使うと、すべてのIDをループして、属性を取得できます。¶¶for (var i=0;i<resultObj.idlist.length;i++){¶ var id = resultObj.idlist[i];¶¶ var name = resultObj[id + ".name"];　　//名前の取得¶ var email = resultObj[id + ".email"]; //メールの取得 ¶ var company = resultObj[id + ".company"]; //会社の取得¶}¶＊resultObj.idlistに、idの配列が入っています。¶¶¶また、特定のIDの人の属性だけを呼び出す場合は以下のようにします（ID=1番の人の属性を呼び出す場合）。¶¶var name = resultObj["1.name"];　　//名前の取得¶var email = resultObj["1.email"]; //メールの取得¶var company = resultObj["1.company"]; //会社の取得¶

データをサーバー上に書き込みます。¶¶バージョン：～2.10¶¶引数としてnewObjが必要です。¶writeDataを呼び出す前に、newObjというオブジェクトを作り、そこに属性の名前と値をセットします。属性の記述方法は、onLoadDataのときに使用したresultObjectと同じです。¶¶newObjの解説¶¶newObj["id.name"] = value;¶という形式で、値をセットすることができます。¶¶"id.name"の部分は、「.（半角ドット）」で挟んで、¶左に「属性グループのID」、右に「属性名」を指定します。¶¶「属性グループ]は、掲示板プラグインなどで、複数のアイテムを管理する必要があるときにアイテムを区別するために使用します。¶¶その必要がないときは「default」という文字を使ってください。¶¶【一つの属性しか使わない例：】¶名刺プラグインの場合¶このプラグインでは、一つのプラグインは、一人の情報を保存し、それを名刺風に表示します。この場合は、以下のように、記述します。¶¶使用例：¶¶//サーバーに保存するデータを用意します。¶var newObj = new Object;¶newObj["default.name"] = name.text　　//名前のセット¶newObj["default.email"] = email.text; //メールのセット¶newObj["default.company"] = company.text;//会社のセット¶¶//サーバーに書き込みます。¶NotaAPI.writeData(newObj);¶¶【複数の属性を管理する例：】¶アドレス帳プラグインの場合¶このプラグインでは、複数の人を管理します。それぞれの人は、名前、メール、会社の３つの属性を持っています。これを処理するためには、一人づつにIDを割り当て、そのIDごとに属性を管理します。新しくIDを追加するときには、IDをそのときの日付にすると、IDの重複がなく、便利です。¶¶使用例：¶¶//サーバーに保存するデータを用意します。¶var newObj = new Object;¶var myDate = new Date;¶var id = myDate.getTime();¶¶newObj[id + ".name"] = name.text　　//名前のセット¶newObj[id + ".email"] = email.text; //メールのセット¶newObj[id + ".company"] = company.text;//会社のセット¶ ¶//サーバーに書き込み¶NotaAPI.writeData(newObj);¶¶¶¶＊スクリプトの文字コードは、すべてUTF-8を利用してください。¶ActionScriptに古い文字コードの指定をつけないでください。¶サーバーに送信できる文字列に制限はありません。

サーバーへデータの書き込みが完了すると呼び出されます。¶resultObjパラメータに、結果が入っています。¶¶バージョン：～2.10¶¶resultObj解説¶¶サーバーからの返答がない、タイムアウト、XMLファイルが壊れているなど予期しないエラーが発生した場合¶resultObjがundefinedになります。¶if (!resultObj){ }によって判定できます。¶¶使用例：¶function onWriteData(resultObj){¶ //書き込み結果¶ if (!resultObj){¶ MessageBox("掲示板：書き込みに失敗しました。");¶ return;¶ }else{¶ //書き込み成功¶ ¶ }¶}

NOTAに貼り付けられたプラグイン同士は、互いに連携できます。¶¶プラグインAからプラグインBに指示を送ることができます。¶¶執筆中¶

NOTAプラグインを実際に理解するには、すでにあるプラグインのソースコードを見ていただくのが一番です。¶¶NOTA Flashソースコード（コア部分を除く）¶http://nota.jp/package/nota210_fla.zip¶¶内容：¶・アクセスカウンター¶・掲示板¶・ツールバーの背景色変更¶・Webカメラ¶¶＊Pluginsフォルダにflaファイルが入っています。¶＊同梱の利用規約を遵守してください。¶　→商業利用不可、改変時は同一条件許諾、原著作者クレジット表示

メッセージボックスを表示します。¶¶バージョン：～2.10¶¶MessageBox(string)¶¶使用例：¶¶MessageBox("Hello NOTA!");¶¶

カーソルの表示・非表示の切り替えを行います。¶¶バージョン：～2.10¶¶showMyCursor(isshow, type, color)¶¶使用例：¶¶//カーソルを非表示にする¶MessageBox(false);¶¶//カーソルを表示する¶MessageBox(true,"hand");¶¶typeパラーメータの種類：¶pen ペン¶shape 図形¶eraser　消しゴム¶text　文字挿入¶hand 手（ページスクロール）¶resize　サイズ調整¶cross 地点指定¶rotation　回転

効果音を再生します。¶¶バージョン：～2.10¶¶playSound(sound)¶¶使用例：¶¶//ページ切り替え音を再生¶playSound("KASHA");¶¶¶soundパラーメータの種類：¶SHU¶PAGE¶KON¶KASHA¶COIN¶POU¶

1.NotaAPIとは？¶2.できること・メリット¶3.作品例¶¶4.NOTAプラグインの開発¶　4.1 NOTA APIの利用¶　4.2 関数一覧¶　4.3 サンプルプロジェクト¶¶5.NOTAプラグインの使用方法¶　5.1 サーバーへの設置¶　5.2 「ファイルを貼る」から貼り付け¶¶http://nota.jp/img/notan_as.gif

必須構造¶<nota>¶ <head>¶ </head>¶ <body>¶ </body>¶</nota>¶¶↑これは絶対必要です。¶¶利用例¶<nota>¶<head>¶ <width>800</width>¶ <author>auto</author>¶ <date>2004/04/01 00:00:00</date>¶ <title>NOTAのサンプルページを作</title>¶ <edit>default</edit>¶ <height>1131</height>¶ <update>2006/02/24 19:43:11</update>¶ <version>2.0</version>¶</head>¶<body>¶ <item id="1106601313689">¶ <author>admin</author>¶ <tool>SHAPE</tool>¶ <date>2005/01/25 06:15:13</date>¶ <update>2005/01/29 23:19:16</update>¶ <x>288</x>¶ <y>102</y>¶ <width>470</width>¶ <height>105</height>¶ <shape>circle</shape>¶ <bgcolor>0xb4ea6a</bgcolor>¶ <transparent>100</transparent>¶ <rotation>0</rotation>¶ </item>¶ </body>¶</nota>¶¶詳細¶-----------------------------------------------¶headタグ¶属性　なし¶子要素¶author 必須¶作成者アカウント。現在は半角英数字のみだが、将来は日本語もありうる¶date 必須¶ページの作成日¶update 必須¶ページの更新日。itemに変更があった場合、その日付になる¶width 省略可¶ページの幅(単位：pixel、デフォルト：800)¶height 省略可¶ページの高さ(単位：pixel、デフォルト：1131)¶version 必須¶このファイルのバージョン¶title 必須¶ページのタイトル(自動で決定。全角30字まで)¶edit 必須¶ページの編集権限（adminかdefaultのどちらか。将来拡張ありうる）¶ admin 管理者のみ編集可能（凍結状態）¶ default だれでも編集可能¶-----------------------------------------------¶itemタグ¶属性¶　id 必須¶itemのID。同一ndf内で、ユニークでなければならない。通常日付を使用。半角¶英数のみ使用可¶¶子要素¶tool 必須¶ オブジェクトの種類¶ TEXT テキスト¶ DRAW 手書き線¶ SHAPE 図形¶ FILE ファイル/画像¶ PLUGIN プラグイン¶ のどれか¶author 必須¶ オブジェクトの作成者¶date 必須¶ オブジェクトの作成日¶update 必須¶ オブジェクトの更新日¶x 必須¶ オブジェクトのx値。マイナスもありうる。¶y 必須¶ オブジェクトのy値。マイナスもありうる。¶width 任意¶ オブジェクトの幅¶height 任意¶ オブジェクトの高さ¶rotation 任意¶ オブジェクトの回転角度（デフォルト：0　値は0-359）¶transparent 任意¶ オブジェクトの透過率 (100が透過なし、50なら半透明。）¶ デフォルト値：100¶ 値：0-100¶ 注：バージョンアップでtransparentが0になるバグあり。このため0→100と解釈¶text 任意¶ オブジェクトの文字列（NOTAでは、htmlタグ付きで保存。タグなし読み取り可）¶fname 任意¶ オブジェクトに関連づけられたimgフォルダ内のファイル名。日本語も可。¶shape 任意¶ オブジェクトの形状、型抜きの形状¶ デフォルト値：rectangle¶ 値：rectangle,roundrect,circle,triangle,star,hexagon,pentagon,¶ heart,thorn,nota,notan（将来拡張あり）¶fgcolor 任意¶ オブジェクトの前景色¶ デフォルト値：色なし ¶ 値：0x6363f1などのRGB値¶bgcolor 任意¶ オブジェクトの背景色¶ デフォルト値：色なし ¶ 値：0x6363f1などのRGB値¶thickness 任意¶ オブジェクトの線の太さ¶ 値：1-∞¶plugin 任意¶ プラグイン名¶ 値：bbs,counterなど¶scale 任意¶ fnameファイルのオリジナルサイズに対する拡大率¶ デフォルト値：100:100¶ 値： *:* の形式。50:200なら横50%、縦200%の大きさ¶¶-----------------------------------------------¶toolごとの取り得る値¶TEXT¶ tool,author,date,update,x,y,width,height,text,bgcolor¶¶DRAW¶ tool,author,date,update,x,y,fgcolor,thickness¶ x,yは、点の配列が入る。3次元ベジェの始点とアンカーポイントが「^」で結¶ ばれる。¶¶SHAPE¶ tool,author,date,update,x,y,width,height,shape,rotation,transparent¶¶FILE¶ tool,author,date,update,x,y,width,height,fname,shape,scale,rotation,transparent¶ fnameの拡張子が、swf,jpgのときは、NOTA上で展開して表示¶ swfのときは、scaleでサイズを指定する¶ jpgのときは、shapeで画像の型抜きができる¶¶PLUGIN¶ tool,author,date,update,x,y,width,height,plugin,fname,scale¶ fnameは、プラグインが使用する設定ファイルの名前(*.xml)¶¶¶-----------------------------------------------¶今後の改良点¶指摘を受けて、案を考えてみました。¶ご意見ください。¶¶1.DBの予約後を避ける¶¶date → createdate¶update → lastupdate¶にする。¶¶2.DRAWのx,y値を変える¶x → xline¶y → yline¶にする¶さらに、¶x → 手書き線の左端の値¶y → 手書き線の上端の値¶width → 手書き線の右端の値 - 左端の値¶height → 手書き線の下端の値 - 上端の値¶をいれておくと使い勝手がよさそう。¶

123