# ブロックエディタチーム

## メンバー
**大月
渡邉
村松**
<br>

[**中間発表**はこちら](https://hackmd.io/@ep18116/rkuXr21WY)
<br>

[**ここにブロックエディタチームのGithubがあります**](https://github.com/ep18116/BlockEdit-Team)
<br>

## ４月１３日（第１回目）
## ブロックエディタの開発　目標
>奥居先生と田中さんが作った基本的なエディタを発展させてScratchに匹敵するような実用的なブロックエディタに発展させる。
パレット・メニューなどが最低限必要。インタープリタ班と協力してデバッグ支援機能等。
言語はElm/Javascript（Typescript）/HTML5等を使用。

基本はElm、JSで作りやすい箇所はJSが担当する予定。
(JSはVue.jsを活用していく)

<br>

目標としてはScratchのようなページを作成する。
[**[Scratch]**](https://scratch.mit.edu/projects/editor/?tutorial=home)


<br>

また、ゼミナールBでも使用したmakecodeも参考にし、面白そうだと感じた箇所を取り入れる。
[**[makecode]**](https://makecode.microbit.org/#editor)

<br>
<br>

下の画像は既に先輩が作成したエディタ。これにブロックエディタなどの機能を追加していきたい。
<img src="https://i.imgur.com/Ls7PBhz.png" width="300">

## チーム間の連携
**Aチーム（ブロックエディタ）**
Bチーム（WebUSB）
Cチーム（WebBluetooth）
Dチーム（インタプリタ・シミュレータ）
Eチーム（ファームウェア）

**A** <-抽象構文木(AST)-> B <-ブロック配置データの通信-> E
**A** <-抽象構文木(AST)-> C <-ブロック配置データの通信 -> E
**A** <-抽象構文木(AST)-> D

Aチームは他チームとの連携(ブロックの配置データに関する情報など)が多いため、情報共有も念頭に置いて進めていく。
<br>

## これからの段取り
私たちAチームは以下のようなステップで研究を進めていく。
<br>

**1：受け継いだソースコードを理解する**
ソースコードを１行１行しっかりと読み、実行し、何をしているのかを理解する。
奥居先生と田中さんが作ったブロックエディタがどこまで実装されているのかを調べ、次のステップの足がかりにする。
<br>

**2：自分たちが付け足して行きたい機能を決める**
ブロックエディタの機能や、実際にScratchを触ってみて必要そう・取り入れたい機能と、逆に改善できそうな点を決めていく。
<br>

**3：必要な情報を調べる**
それに伴い、Elmではどのように実装することが出来るのかを各自で調べ、グループ内で情報共有する。
<br>

**4：検証する**
直接卒業研究のソースコードに実現したいプログラムを書き足してしまうとエラーが大量に出てしまう事態が想定される。それを少しでも避けるため、付け足してみたい機能を簡易的なプログラムで実装して試してみる。
<br>

**5：プログラム作業**
4で実装することが出来たプログラムを元のプログラムに書き加え、実現する。
<br>

**6：他グループとHackmdで情報共有する**
毎週必ず、どのような作業を行ったのかをこのHackmdに記録する。
その内容を他グループと共有をし、必要に応じて連携を取る。
<br>

**毎週3~6の内容を繰り返して行い、卒研を進めていく。**
(必要になったら2も行う)
<br>
<br>

## ４月２０日（第２回目）

## 今回の目標
* １回目の反省を行う
* 修正箇所をまとめる
* 今後の目標を決める
* レジュメの完成度を高める
<br>

## １回目の反省
**全体の反省**

* 基礎は必要だが、それは役に立たない。(勉強しなくてはならないことはいくらでもある)
必要なことから後退推論で調べていかないと時間が足りなくなってしまう。

* レジュメの反省として、レジュメがただのメモになっている。
(今日聞いていない人でも、レジュメを見るだけでどんな内容だったのかわかるレベルが必要)

* パラグラフライティング的には、文章には必ず導入が必要。序論・本論・結論は必須である。
そして、トピックセンテンス、サポートセンテンスが必要。

* 更にはアブストラクトが欲しい(本文の要約)
<br>

**ブロックエディタチームの反省**

１回目の時点では配列の配置データを扱おうとしていたが、以下の理由により、抽象構文木(AST)の方が優れているといえる。

* 実機だとブロックの範囲は決まっているが、Webではそうではない
* 配置データだと余分なデータが出来てしまう
* 配置がどの位置に置かれているのか、という情報も不要である。(連結さえできれば良い)

イメージとしては下の画像になる。

　<img src="https://i.imgur.com/APSx8il.jpg" width="500">

<br>

## 修正箇所

* 主にレジュメを修正する。(パラグラフライティングを意識して)
今回の反省で触れた箇所を修正し、前回のレジュメの完成版を作成する。
* 反省を踏まえ、抽象構文木(AST)でブロックエディタを作成していくように方針を定める。
<br>

## 今後の目標

* 先輩のコードの理解に着手する。
* 4月終わるまでにソースコードをある程度まで理解する。(他のチームとの連携に大きくかかわるため、なるべく早めに)
* if制御の条件の例を把握する。(main.elmには14箇所にif文が存在する)
* for while文は使わないのがミソなので、実装することは無い

<br>
<br>

## ５月１１日（第３回目）

## 今回の目標

#### 足並みを揃える
まだElmを導入できていない人がいた(村松直幸)ので、
[Elmをインストールする](https://guide.elm-lang.jp/install/elm.html) を頼りに実装。

### 先輩のElmのコードの理解に着手する
ただ眺めているだけでは時間の無駄なので、しっかりとコードを動かしながら理解するように努める。
**[オンラインエディタ(Try Elm!)](https://elm-lang.org/try)**　も使うときは使う。

**今回で、先輩のコードを422行中の258行まで理解する予定。**

<br>

## 分かったこと
* 145行まではおおよそ理解。
* elm replを扱うとElmの動作を試すことができる。
* 非空は葉が空ではない抽象構文木という意味。
* init : Modelの中身
ブロックの大きさや初期位置、ブロックの形やコマンドに関して定義していた。
* MsgCloneUsは、右クリックを押した時、複製を作成するメッセージ
* MsgLetMeRootは、葉を分けるメッセージ
このメッセージが無いと、葉の部分をドラッグしても切り離せなくなる。
* MsgMoveUsは、マウスを動かす際のメッセージ
* MsgAttachMeは、ブロックがくっつく判定のメッセージ
このメッセージが無いと、ブロックとブロックがくっつかなくなる。
* MsgStartDnDは、DnD(ドラッグ＆ドロップ)が開始した際のメッセージ
これがないとドラッグが反応せずブロックが動かせない。
* List.foldrの意味
関数foldr f vは、空リストを値vに変換する。空でないリストに対しては、「先頭の要素」と「残りのリストに対し自分自身を呼び出した結果」に関数fを適用する。ただ実際には、foldr f vは再帰的に理解するのではなく、単にcons演算子を関数fに置き換え、末尾の空リストを値vに置き換えると理解する方がいい。
* Change関数は、受け取ったa,bが両方UnchangedならUnchangedを、それ以外ならChangedを返す関数
* unit関数は受け取ったaにUnchangedの属性を付与する関数
unchangedではないとcorの結果が必ずChangedになってしまうのを防ぐため？
* viewが大事なので理解する。

<br>

## 今回の反省
* 理解できない箇所が多かった。
* 定義されている関数がどのように動作しているのかが分からない。
* 定義された関数がまた別の関数の定義に使用されていたりして、その関数の役割の理解が難しい。
* 切り取ってエラー構文を確認しても、サイトに飛ばされるだけでいまいち原因が分からない。
<br>

## わからないところ
* Html.KeyedとHtml.lazyの動作。
* 3種類の構文木ASTの使い分け
* Writerアプリカティブ？
elmには型クラスがないのでChangeモノイドに特化？
この２行のコメントの意味が調べても要領を得ない。
* andMap関数がどのような役割をしているのか。
* ListMap関数の役割、中身。
* pairMap2関数の役割、中身。
* recurAST関数の役割、中身。
<br>

## 次週の目標
* 今週で理解できなかった箇所を理解し、できる限りコードの理解を進める。
* 複数の見た目のノードを実装することを目的とし、それを踏まえてviewを理解、改良する。
<br>

## 参考サイト
先輩のコードを理解するうえで利用したサイトたち

[elmpackages](https://package.elm-lang.org/)

[Html.Keyedの解説](https://guide.elm-lang.jp/optimization/keyed.html)
[Html.lazyの解説](https://guide.elm-lang.jp/optimization/lazy.html)

[Elmの基礎 sandbox編](https://heimdal.hatenablog.com/entry/elm-0.19-sandbox)

[typeとtype aliasの違い](https://qiita.com/kuropp/items/4cf5052ba56a12a89cb1)

[>> (関数合成) について](https://qiita.com/aimy-07/items/429e6b1b6ad64bbf0b49)

[ファンクタ, アプリカティブ, モナドの説明](https://gist.github.com/kohyama/5856037)

## 参考書籍
[基礎からわかるElm](https://www.amazon.co.jp/%E5%9F%BA%E7%A4%8E%E3%81%8B%E3%82%89%E3%82%8F%E3%81%8B%E3%82%8B-Elm-%E9%B3%A5%E5%B1%85-%E9%99%BD%E4%BB%8B/dp/4863542224/ref=tmm_pap_swatch_0?_encoding=UTF8&qid=1619959523&sr=1-1)
<img src="https://i.imgur.com/3gOIzh4.png" width="150">

[プログラミングElm](https://www.amazon.co.jp/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0Elm-%E5%AE%89%E5%85%A8%E3%81%A7%E3%83%A1%E3%83%B3%E3%83%86%E3%83%8A%E3%83%B3%E3%82%B9%E3%81%97%E3%82%84%E3%81%99%E3%81%84%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E9%96%8B%E7%99%BA%E5%85%A5%E9%96%80-Jeremy-Fairbank/dp/4839970041/ref=sr_1_1?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&dchild=1&keywords=Elm&qid=1620711058&s=books&sr=1-1)
<img src="https://i.imgur.com/C7ZyreH.png" width="150">
<br>

## [次回(４，５回目)](https://hackmd.io/@ep18116/BkgT3Vuwd)
<br>