2021 ソフトウェア設計及び演習用の班Wiki
21::gr07::木下祐貴
活動記録
第1回 4/16 ->第1回(詳細はこちら)
- 班決め
- テーマの話し合い
第3回 4/30 ->第3回
-
ものと操作の洗い出し
必要なもの・機能についての話し合い
第4回 5/14 ->第4回
-
ものと操作の洗い出し(前回のものに付け加える)
必要な機能・ページと実現の仕方について - 中間発表までの目標の決定
グループ内での分担作業 - レイアウトについての話し合い
- 過去に使用したサイトの参照
第7回 6/4(遠隔講義) ->第7回
-
svg画像を出力、移動する方法について調べた
担当
・画像保存
・svg作成を手伝う
第9回 6/18 ->第9回
-
中間発表を行った
担当 - 保存についてサンプルを作った
表示されているものを範囲を決めて保存するプログラム
URLから画像として保存できる
(目標)保存画面で表示できるようにしたい
第10回 6/25 ->第10回
-
再度モジュール分けを行い、分担を決めた
担当
画面遷移後に画像を表示できなかった
→ポップアップなど別の方法でも調べてみる
テキストボックスの実装の仕方について調べる
第11回 7/2 ->第11回
-
各自プログラムを作成
担当
・画像を保存できるようにした(①画像を作成→②保存の手順)
(時間があれば)
・1つのボタンでできるようにしたい
・ポップアップは改善できれば実装したい
・テキストボックスの作り方について調べた(わからない)
・移動、拡大縮小と適応できるようにしたい(svgで作る?)
第12回 7/9 ->第12回
-
各自プログラムを作成
担当
・テキストボックスの作り方について調べた
下はメモ
contenteditable=trueで文字を書けるようになる
ダブルクリックでtrueになって普段とシングルクリックではfalseにしたい(シングルクリックで移動?)
移動に対応するには?svg?
第13回 7/16 ->第13回
- 各自プログラム作成
- 部分的に統合
担当
・画像の作成、保存を1つのボタンでできるようにした
・mainと統合しても実行できた
・テキストボックスはダブルクリックでcontenteditableを変更することができなかった
・テキストボックスを解決できれば、続きから作成するための保存形式も考えたい(時間的に厳しいかも)
第14回 7/30 ->第14回
-
最終発表を行った
担当
・テキストボックスをcontenteditableで実装するのではなく、他の方法を試した
→入力ホームを別に作成して、反映させる?(mainとの統合がどうなるかわからない、複数個作ったときに同じになる?)
8/5 ->8/5
- テキストを入力、移動できるようにした
感想
htmlやJavascriptについて知識がなかったので、最初はとても大変でした。今回のフローチャート作成ソフトでは保存とテキストについて担当しました。画像としての保存は実装することができましたが、再度編集できるような保存を作ることができなかったです。テキストは図形の１つとして文字が書けるオブジェクトを用意することで、実装することができた。図形と文字が別になってしまったことが、少し悔しいです。実装したかったことが全てできたわけではなかったけど、グループでソフトウェアを作る経験や新しい言語の知識を多く得ることができたので良かったです。
参考サイト
-
html2canvas
https://qiita.com/youwht/items/8b681a856f59aa82d671
https://keymaso.com/programemory/javascript/html-to-image/ - svg作成
http://www.yamatyuu.net/computer/html/svg/arc.html - canvas→img
https://kurage.ready.jp/jhp_g/html5/cvs-save.html - ボタンで実行
https://www.ipentec.com/document/javascript-exec-javascript-on-button-click - ポップアップ
https://qumeru.com/magazine/380 - テキストボックス
https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Editable_content - ダブルクリックでtrueとfalseを切り替える(けどcontenteditable属性に反映できない?)
http://javascript123.seesaa.net/article/108875442.html - contenteditableをボタンタグを利用して切り替える
http://javascript123.seesaa.net/article/381247915.html - テキストボックスの文字を受け取る
https://techacademy.jp/magazine/21069 - 入力した文字をリアルタイムで反映させる
https://qiita.com/furukouji/items/c45e0bc0606d9501c640
最終更新日：2021/08/06 23:35:33
