2021 ソフトウェア設計及び演習用の班Wiki

全体の進行
メンバーとの交流をはかった。

仕様書作成
方向性を決定した。自分たちの納得がいくようなフローチャート作成ソフトをつくりたい。

機能の必要性、追加機能考案
まずは図形が動くことを意識する。他にはページの保存や保存画面への遷移など考えることは多い。

モノと操作の洗い出し
二年後期のソフトウェア演習を参考に洗い出しを行った。思ったより早く出来た。
モジュールわけ

モジュール分け
前回の講義で決まったモジュール分けを深めた。また各自できそうな範囲から作業を開始した。
自分は移動を担当。ライブラリを探してプログラムをより簡潔にするように工夫していきたい。

プロトタイプ作成
プロトタイプの作成は前回までのモジュール分けで大方の目標が出来ていた。
まずは作成スペースに画像を追加する。追加方法は図形リストから自分が使いたいオブジェクトをクリックすることで可能。自分はその追加された図形が移動できるように施策をねっていきたい。

svgとの対応
私の班では図形の拡大縮小が可能なsvgを使う。svgはベクター画像である。自分はこのsvg画像を動かすプログラムを作成していく。imgタグとは違い参照が少なくライブラリとの適合が課題だ。

svg.moveについて
svg.jsというライブラリを見つけた。このライブラリではヘッダファイルを読み込むことで、draggable()を使うことができる。draggable()は任意のid要素が入った変数(ここではrectとする)を用いて、rect.draggable().のように使用する。これで任意のrectはドラッグアンドドロップが可能になる。

中間発表
中間発表では画像を動かすことが出来なかった。自分のみつけたライブラリが中々適合しなかったからである。移動が難しいことがわかったので画像の追加と保存画面への遷移、ツールのレイアウトだけ完成させた。

分担わけ
自分は引き続き画像の移動を担当した。svg.jsライブラリは諦め、作成画面のx,y座標をつかってドラッグアンドドロップをすることにした。画像追加担当と適宜相談をしながらすすめていきたい。

制作
自分の担当していた移動については大方完成した。しっかりと任意の図形を動かすことができるプログラムが出来た。図形の作成との適合を以降の講義で勧めていきたいと思う。

引き続き制作
自分が作ったプログラムでは基本図形しか移動が出来ないことがわかった。理由はsvgには基本図形以外にもpathタグやベジェ曲線などのx,y座標に頼らない図形があり、台形や長円などはそれらを使用して作られていたからである。また画像生成時にid要素を動的に追加できないことが判明したので<div>でまとめてクラスを割り当てて図形を移動することになったため自分のプログラムが完成品に使うことが出来なかった。

発表会
発表会に向けて班wikiを仕上げた。自分はプロジェクトの説明・READMEを担当した。できるだけ簡素に、でもわかりやすく使用方法を表記した。
そして今回の最終発表に満足行く完成品を提出したかったが、自分たちの納得行く形で発表できたのでそこはよかった。残りの数日で完成させたい。

完成品に関われていなかったが、周りのメンバーが作成してくれた。最後まで自分が手をかけたプログラムがソフトに使われることはなかったが、班員と話し合ってプロジェクトを進めていくことはとても新鮮で難しかった。

https://userweb.mnet.ne.jp/tnomura/javascript/svg/svgmove.html