DIYCADに必要な機能を調査し設計・実装を始める

◎構想記録                                                                  
  ・パース図を簡単に書けるようにする補助線。                                                
  ・直感的に使える操作方法を考えながら実装する。                                              
◎概要                                                                    
  ・アプリケーションタイプ  Webアプリ                                                   
  ・図形表示         SVG                                                      
  ・描画操作         補助線を使って直接パース図を書きながら三面図で確認、補正する                         
◎開発計画                                                                  
  ・操作フレーム開発                                                            
  ・補助線表示                                                               
  ・入力方法の検討                                                             
  ・                                                                    
◎仕様(第一バージョン)                                                           
  ・概要                                                                  
    ・目的                                                                
      ・作成するものを図示しイメージを膨らませ設計に活かす                                       
      ・SVGツールシリーズの基本技術を確立する                                            
      ・UIや操作性を検証する土台とする                                                
    ・機能                                                                
      ・ファイルを作成し、読みだして、編集して、上書きもしくは別名で保存できる                             
      ・線を引くことができ。それを選択して移動し、太さを変えられ、削除もできる                             
    ・このバージョンで見送る機能                                                     
      ・拡大縮小表示                                                          
      ・色の指定、変更                                                         
      ・終端の指定、変更                                                        
      ・文字の表示                                                           
      ・寸法の表示                                                           
      ・認証                                                              
      ・グリッド、パース用グリッド、補助線                                               
      ・HTMLとの重ね合わせ                                                     
    ・画面構成                                                              
      ・1画面構成で上部にメニューを配置、その他は作図領域とする                                    
    ・操作イメージ                                                            
      ・起動                                                              
      ・線を書く                                                            
      ・線を選択する                                                          
      ・線の太さを変える                                                        
      ・線端を選択する                                                         
      ・線端を移動する                                                         
      ・図形を保存する                                                         
  ・検証課題                                                                
    ・描画系メニューの構成と呼び出し方、表示位置                                             
    ・図形選択とメニュー操作の操作順                                                   
  ・詳細                                                                  
    ・画面構成                                                              
      ・メニュー                                                            
        ・新規  作画エリアをクリア、ファイル名をクリア                                       
        ・開く  ファイルダイアログを開いてディレクトリおよびファイルを指定して開く(APIを呼び出す)               
        ・保存  ファイルダイアログを開いてディレクトリを指定し、ファイルを選択するかファイル名を入力して保存する(APIを呼び出す)
        ・太さ  太さ変更ダイアログを開いて、太さの一覧から選択する                                 
      ・作画エリア                                                           
        ・右クリックメニュー                                                     
    ・操作イメージ                                                            
      ・(起動)                                                            
      ・作画エリアを初期化する                                                     
      ・(作画エリアで左ボタンを押す)                                                 
      ・線端を表示                                                           
      ・(そのままドラッグする)                                                    
      ・古い線分を消し、新しい線分を書く                                                
      ・(左ボタンを離す)                                                       
      ・線分を書く                                                           
      ・(線分の上で左ボタンでクリックする)                                              
      ・近くの線分を選択状態にする                                                   
      ・線の太さを変える                                                        
      ・線端を選択する                                                         
      ・線端を移動する                                                         
      ・図形を保存する                                                         

◎予定変更                                                                  
  ・デモサイト用に訪問者自身のデータだけ読み書きできるようにして公開しながら開発していく                          
  ・まずは、線を置き、端点を移動できるだけで、他のページに埋め込むSVGを作成するツールを作る                       
◎目的整理                                                                  
  ・他のページに埋め込むためのSVG図形を書く                                               
  ・たとえば、DIY日記に作ったものの略図としてSVGで書いた図を付ける                                  
  ・テキストエディタでの作図では大変な、座標の調整をGUIでできるようにする                                
◎要件整理                                                                  
  ・要件に入れるもの                                                            
    ・線を書ける                                                             
    ・端点を移動できる                                                          
    ・線を削除できる                                                           
    ・HTMLで使うSVGタグを含めたデータをエクスポートおよびインポートできる                             
  ・要件から外すもの                                                            
    ・図形の保存     最初のバージョンでは除き、ファイルアクセス関連のモジュール化が進んだ段階で実装する               
    ・UNDO、REDO とにかく使えるものを早く仕上げるため最初のバージョンでは除外                          
◎仕様概要                                                                  
  ・画面構成                                                                
    ・ワークエリア                                                            
    ・右クリックメニュー                                                         
    ・エクスポート、インポートエリア                                                   
  ・描画操作イメージ                                                            
    ・起動                                                                
    ・線を描く                                                              
      ・線の始点で右クリックし、メニューの「線を描く」を選択                                      
      ・線の終点で左クリックする                                                    
    ・端点を移動する                                                           
      ・マウスを端点に重ね、マウスポインタが編集マークになったら右クリックし、メニューの「端点を移動」を選択              
      ・マウスを移動先に移動またはカーソルキーで端点を移動                                       
      ・移動先が確定したら左クリック                                                  
    ・線分を削除する                                                           
      ・マウスを端点に重ね、マウスポインタが編集マークになったら右クリックし、メニューの「線分を削除」を選択              
    ・エクスポートする                                                          
      ・適当な位置でマウスの右クリックをクリックし、メニューの「エクスポート」を選択                          
    ・インポートする                                                           
      ・適当な位置でマウスの右クリックをクリックし、メニューの「インポート」を選択                           
◎モジュール化キーワード                                                           
  ・ページフレーム                                                             
  ・メニューブロック                                                            
  ・右クリックメニュー                                                           
  ・ダイアログ                                                               

<TODOと状況>