>>{21::gr07}{TOP}
[MyGitLab|https://gitlab.cis.iwate-u.ac.jp/2021_g07/flowchart/tree/master/work]
[参照ページ|https://www.gesource.jp/weblog/?p=7629]
<<第一回>>
全体の進行<br>
メンバーとの交流をはかった。
<<第二回>>
仕様書作成<br>
方向性を決定した。自分たちの納得がいくようなフローチャート作成ソフトをつくりたい。
<<第三回>>
機能の必要性、追加機能考案<br>
まずは図形が動くことを意識する。他にはページの保存や保存画面への遷移など考えることは多い。
<<第四回>>
モノと操作の洗い出し<br>
二年後期のソフトウェア演習を参考に洗い出しを行った。思ったより早く出来た。<br>
[モジュールわけ|http://wiki.cis.iwate-u.ac.jp/~wiki/csd/group.cgi/2021/?p=21%3A%3Agr07%3A%3A%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB%E5%8C%96]
<<第五回>>
モジュール分け<br>
前回の講義で決まったモジュール分けを深めた。また各自できそうな範囲から作業を開始した。<br>
自分は移動を担当。ライブラリを探してプログラムをより簡潔にするように工夫していきたい。
<<第六回>>
プロトタイプ作成<br>
プロトタイプの作成は前回までのモジュール分けで大方の目標が出来ていた。<br>
まずは作成スペースに画像を追加する。追加方法は図形リストから自分が使いたいオブジェクトをクリックすることで可能。自分はその追加された図形が移動できるように施策をねっていきたい。
<<第七回>>
svgとの対応<br>
私の班では図形の拡大縮小が可能なsvgを使う。svgはベクター画像である。自分はこのsvg画像を動かすプログラムを作成していく。imgタグとは違い参照が少なくライブラリとの適合が課題だ。
<<第八回>>
svg.moveについて<br>
svg.jsというライブラリを見つけた。このライブラリではヘッダファイルを読み込むことで、draggable()を使うことができる。draggable()は任意のid要素が入った変数(ここではrectとする)を用いて、rect.draggable().のように使用する。これで任意のrectはドラッグアンドドロップが可能になる。
<<第九回>>
中間発表<br>
中間発表では画像を動かすことが出来なかった。自分のみつけたライブラリが中々適合しなかったからである。移動が難しいことがわかったので画像の追加と保存画面への遷移、ツールのレイアウトだけ完成させた。
<<第述懐>>
分担わけ<br>
自分は引き続き画像の移動を担当した。svg.jsライブラリは諦め、作成画面のx,y座標をつかってドラッグアンドドロップをすることにした。画像追加担当と適宜相談をしながらすすめていきたい。
<<第十二回>>
制作<br>
大方完成した。しっかりと任意の図形を動かすことができる。
<<第十三回>>
引き続き制作
<<参考資料>>
https://userweb.mnet.ne.jp/tnomura/javascript/svg/svgmove.html