# ブロックエディタチーム(８，９)
[**前回(６，７回目)**](https://hackmd.io/@ep18116/HkfJ1f9t_)
[**ここにブロックエディタチームのGithubがあります**](https://github.com/ep18116/BlockEdit-Team)
(閲覧には招待が必要なため、もし必要だったらアカウント名を教えてください)
<br>
## ６月２２日（第８回目）
## 先週の復習
#### attachMeについて
```elm
-- 先週のattachMe
attachMe : ASTxy Node -> Mouse.Event -> Model -> Model
attachMe (ASTxy xy (ASTne node bottom right)) event model =
let
f top xy0 n b r =
-- unit (AST n) |> andMap b |> andMap r
if b == (Nil, Unchanged) && insideBrick xy0 (Tuple.first xy , Tuple.second xy - brickSize) then
unit (top n) |> andMap (AST node bottom right, Changed) |> andMap r
else
if r == (Nil, Unchanged) && insideBrick xy0 (Tuple.first xy - brickSize , Tuple.second xy) then
unit (top n) |> andMap b |> andMap (AST node bottom right, Changed)
else
unit (top n) |> andMap b |> andMap r
```
* 前回、プログラムを修正し、insideBrick 1つで下に接続されたか右に接続されたかを判定できるように修正した。ここで、データを xy で持っているため、x座標だけを習得する時は Tuple.first xy 、y座標だけを習得する時は Tuple.second xy という取り出し方をしなくてはいけなかった。
* その部分を改善する方法として、各成分だけが必要ならば、初めから
```elm
attachMe (ASTxy xy (ASTne node bottom right)) event model =
```
の部分を書き換え、(x, y)という書き方にすることにより、この部分を簡潔に書くことが出来るという方法が存在する。
<br>
#### 画像表示バグについて
* 前回、Bulmaの導入を行ったが、画像が表示されないバグが発生していた。
導入のやり方自体は恐らく間違ってはいないとは思われるが、先生は別のやり方でBulmaを導入しており、それで画像が正しく表示されていたため、そのやり方を参考にすることにする。
* そのやり方とは、**ローカルに入れず、urlを読み込むことによりCDNを参照してBulmaを読み込む方法**である。(JavaScripyのフレームワークは昔から大抵どこかがCDNで配信してくれているため、ローカルにわざわざ置く必要はあんまりない。)
\<head> の部分を以下のように書くだけでそれが実現できる。
```e
<head>
<meta name=“viewport” content=“width=device-width, initial-scale=1">
<meta charset=“UTF-8”>
<title>Main</title>
<link rel=“stylesheet” href=“https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css”>
<script src=“app.js”></script>
<style>
</style>
</head>
```
<br>
* indexファイルが生成される場所は、srcファイルの上で問題は無い。
画像ファイル(ファイル名 : ase)は、srcファイルの中ではなく、srcの１つ上のファイルに置くことになる。
* 今回、これについて試してみて、画像が表示されない現象が直るかどうかの結果を確認する。
<br>
#### index.htmlについて
* 今までは、プログラムを修正するたびにindex.htmlを生成し直していたが、その度にindex.html中身を書き換えることになってしまい、手間が非常にかかってしまう。
わざわざ毎回inde.htmlを生成するのではなく、**index.jsを生成し、index.jsを読み込むようなindex.htmlを生成**してしまえば、プログラムを修正してもindex.htmlの方は書き換える必要は無くなり、作業が非常にスムーズになる。
* その方法は、 [JavaScriptとの相互運用](https://guide.elm-lang.jp/interop/) に書いてあるため、ここを見て行う。
```
-- メモ
elm make src/Main.elm --output=main.js
```
<br>
#### プログラムの改修について
* 先生の方ではコードを大きく書き換えている(しかし、変更は必須ではない)。
* 現状のコードは、AttachしたりLetMeLootをするたびに、全てのツリーのNodeを見ることになっているため、効率の良いやり方では無い。やろうとしていることは大きなプログラムではないため、実際にはそこまで効率の悪いやり方では無いのだが、上手なやり方では無いため、書き直された。
* 現状では、AttachMeの所で Changed, UnChanged を利用している。それは、Attachに成功した時のみにブロックをリストから取り除かなければならないためである(Attachに失敗しているのに取り除くと消えてしまうため)。
ここで、この時に利用している Changed, UnChanged を全面的に利用してしまおうというのが、新しいやり方である。
* 私たちが目指しているブログラムでは、一度の操作で２つ以上のツリーが同時に変更されるという動作は存在しない。１つのツリーしか変更しないということは、一回変更があったら、そのことを覚えておけば後の処理は全てスキップしてしまっても問題ないということである。
* Changed, UnChanged の型を用いて、１度変更が終わったら他の所は見ない、という書き方に変えてみた結果、コードは複雑になるどころかシンプルになり、無駄が無くすことに成功した。
その副作用として、今までやって来たような**禁則処理が恐ろしく簡単に実装できる**ようになってしまった。
* 今までのアイデアでは、末端のNodeでは処理せず、その親のNodeで処理をして禁則処理を加えるかの判断をする、というやり方であった(末端では禁則処理の判断ができないため)。
しかし、親Nodeは子Nodeを右と下の２つ持っているため、どうしても処理が重複してしまうことになっていた。
* そこで、親Nodeで禁則処理の判定はするが、その判定結果を引数として子Nodeに渡し、実際にAttachしたり切り離したりといった処理は子Nodeの方で行う、というアイデアが生まれた。
その結果、禁則処理のプログラムがほんの2,3行で実装することに成功した。
* 実際には、効率にはそこまで影響はしないため、実装の優先度は低い。そのため、急いで実装するような内容ではなく、あくまで参考程度とし、もしコードを簡単化するのに役立つなら取り入れる、程度のものとして考える。
<br>
## 今回の目標
* 画像表示バグを直すため、Bulmaの動作環境を変えてみる。
* レイアウトを引き続き行う。
<br>
## 今回行ったこと
#### 画像表示を直すため、動作環境を変えてみる。について
* Bulmaをローカルで行わずCDNを参照してBulmaを読み込み、main.jsを生成し、index.htmlはmain.jsを参照して表示するように改良した。index.htmlのコードは以下のようになった。
```e
<html>
<head>
<meta charset="UTF-8">
<title>Main</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css">
<script src="main.js"></script>
</head>
<body>
<div id="myapp"></div>
<script>
var app = Elm.Main.init({
node: document.getElementById('myapp')
});
</script>
</body>
</html>
```
<br>
* この方法により、Bulmaをローカルに置かずに利用することに成功し、main.jsからプログラムを読み込むことにも成功した。
しかし、画像が表示されない現象は解決しなかった。
 <br>
どういうことなんだろう？
<br>
#### レイアウトを引き続き行う。
今回レイアウトを行った部分は主に４つ。
1. ブロックの配置を変更。
2. Heroレイアウトを用いてトップにバナーを作成。
3. ハンバーガーメニューを追加。
4. パレット部分をスクロールボックスで囲み、中の背景を黄色に設定。
<br>
1. ブロックの配置を変更。
今までのブロックの配置位置を変え、パレットメニューらしく左端に寄せた。
また、上にバナーなどを追加したため、座標を下にズラして調整。
2. Heroレイアウトを用いてトップにバナーを作成。
[CSSフレームワーク BULMA チュートリアル②](https://qiita.com/ochiochi/items/19a4ac858483af9295b8) を参考にし、ブロックエディタと書かれたバナーをトップに表示させた。
3. ハンバーガーメニューを追加。
[BulmaのハンバーガーメニューをElmでトグルする](https://qiita.com/ikaro1192/items/fcd7e589cb0e946f969e) を参考にし、ハンバーガーメニューを追加。現時点では、クリックしても特に何も起きない。
4. パレット部分をスクロールボックスで囲み、中の背景を黄色に設定。
[HTMLでスクロールバーを表示・非表示する方法を解説](https://techacademy.jp/magazine/25158) を参考にし、パレットの部分をスクロールボックスで囲むことには成功。しかし、実際にパレットをスクロールできるわけではなく、スクロールは見せかけの状態。
<br>
今週で作成したindex.htmlは、こちらになる。
 <br>
<br>
:::spoiler **index.htmlのソースコードはこちら**
```html
<html>
<head>
<meta charset="UTF-8">
<title>Main</title>
<!-- CDNでBulmaを参照 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css">
<script src="main.js"></script>
<style>
/* スクロールボックスの設定 */
#wrapper {
height: 1000px;
width: 400px;
overflow-y: scroll;
background-color: lightyellow;
}
</style>
</head>
<!-- Heroレイアウトを用いてトップにバナーを作成 -->
<div class="hero is-info is-bold">
<div class="hero-body">
<div class="container">
<h1 class="title">ブロックエディタ</h1>
</div>
</div>
</div>
<!-- ハンバーガーメニューを追加 -->
<nav class="navbar is-white">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item brand-text" href="../index.html">
burger Sample
</a>
<div class="navbar-burger burger" data-target="navMenu">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id="navMenu" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="#">
AAA
</a>
<a class="navbar-item" href="#">
BBB
</a>
<a class="navbar-item" href="#">
CCC
</a>
</div>
</div>
</div>
</nav>
<!-- スクロールボックスの実行 -->
<div id="wrapper"></div>
<body>
<div id="myapp"></div>
<script>
var app = Elm.Main.init({
node: document.getElementById('myapp')
});
</script>
</body>
</html>
```
:::
<br>
<br>
## 今回の反省・わからなかったところ
* 画像が表示されない現象を解決することが出来なかった。環境は先生のものと同じにできたと考えられるため、原因は別の所にあると思われるが、解決の目処は立っていない。
* スクロールボックスの中にパレットを入れ、スクロールをすると、そのパレットの部分のみが動くような画面を目指していた。
しかし、現時点ではただスクロールボックスを表示させているだけで、実際にスクロールさせることすらできない状態である。
今の状態では目指しているモノを実装するアイデアが思いついていないため、これから探っていきたい。
* 今週、様々なサイトを捜索したが、なかなか目当ての情報が載っているサイトを見付けることが出来ず、そこで大きく時間を使う羽目になってしまった。HtmlやCSSの知識が不足していたため、どの情報が自分たちに役立つのかの判断が難しかったのが原因の１つだと考えられる。
<br>
## 次週(今後)の目標
* 画像を表示させる。
* スクロールボックスの中に、パレットの部分が入るようにしたい。
<br>
## 参考サイト
[JavaScriptとの相互運用](https://guide.elm-lang.jp/interop/)
[CSSフレームワーク BULMA チュートリアル②](https://qiita.com/ochiochi/items/19a4ac858483af9295b8)
[BulmaのハンバーガーメニューをElmでトグルする](https://qiita.com/ikaro1192/items/fcd7e589cb0e946f969e)
[HTMLでスクロールバーを表示・非表示する方法を解説](https://techacademy.jp/magazine/25158)
<br>
<br>
<br>
<br>
## ６月２９日（第９回目）
## 先週の復習
#### 画像表示バグについて
* htmlで分からないことがあったら、まずは情報を集めるためにデバッカーを開くべきである。(F12キー)
* 画像のこの部分を押すと、ページ上の検査対象となる要素の選択ができる。これでWebページ上の要素たちを触ると、対応するソースコードをハイライトしてくれる。
 <br>
* これを試してみると、実際は画像自体は表示はされていたが、0 × 0 px という目では見えないサイズになっていたということが判明した。
 <br>
* しかし、原因は分かったものの、解決方法が分からなかった。先生が試した方法は、Main.elm側のソースコードを書き換えることによって画像を正しく表示させていたが、その書き換えた部分を同じようにこちらで試してみても、画像は表示されなかった。
* 原因は恐らくview関数の書き方がBulmaに相応しくない書き方になっているためである所までは突き止めたので、そこを今回深く見ていくことにする。
<br>
## 今回の目標
* 先生のコードを参考にし、画像が正しく表示されない原因を突き止める。
* レイアウトを改良し、scratchに少しでも近づける。
検討している機能リスト
* スクロールボックス内にパレットを入れる。
* 左側にボタンを追加し、そのボタンを押すと、対応するブロックの種類の一番上までスクロールが動く機能
* メニューバーを押すと、対応するWebサイトに飛ぶ機能。
などなど。(随時更新)
<br>
## 今回行ったこと
#### 画像表示バグについて
* view関数を触ってみたところ、 style "position" "absolute" が画像が表示されない原因に関わっていることが判明した。
* そこで、先生のコードを参考にし、以下のようにコードを書き換えてみた。コメントアウトしている箇所は、前のプログラムから消した箇所である。
```elm
in
div
[]
-- [
-- div[style "position" "absolute"]
[ img
[ src image
, width "100"
, height "100"
, style "position" "absolute"
, style "margin" "15px 15px"
, class "image is-overray" -- Bulma必須
, style "top" "0%" -- Bulma必須
, style "left" "0%" -- Bulma必須
]
[]
-- ]
, Svg.svg
[
width <| String.fromFloat size
, height <| String.fromFloat size
, viewBox "166 70 336 336"
]
[ Svg.path [ style "position" "absolute"
, d path
, stroke "blue"
, fill color
, strokeWidth "6"
]
[]
]
]
```
<br>
* これにより、Bulmaで画像を表示させることに成功した。しかし、Bulma側だとなぜか画像のサイズがズレてしまう？状態になっている。(Elm側だと画像のサイズはズレない)
 <br>
* 画像を表示することはできたので、これでこの問題は解決とする。画像のサイズがズレてしまう問題は、こちら側で画像のサイズを調整し対応することにする。
<br>
#### ナビゲーションバーについて
* 前回実装したメニューバーは、まだ形だけ実装しただけであり、どこのサイトにも飛ばない状態であった。
そこを改良するため、[ナビゲーションバー](https://bulma.io/documentation/components/navbar/#navbar-burger) を参考にした所、良いものが見つかったため、取り入れてみた。
現時点ではこのようになっている。
<br>
<img src="https://i.imgur.com/DO93ZYU.png" width="30">
この画像を押すと、私たちのGithubのページに飛び、HackMDを押すと、私たちのHackMDの初回ページに飛ぶようになっている。(Docsの中身は現時点ではBulmaのまま)
この部分のHtmlのコードはこのようになった。
```html
<!-- ナビゲーションバーを追加 -->
<nav class="navbar is-transparent">
<div class="navbar-brand"></div>
<a class="navbar-item" href="https://github.com/ep18116/BlockEdit-Team">
<img src="ase/github.png" alt="Bulma: a modern CSS framework based on Flexbox" width="30" height="30">
</a>
<div class="navbar-burger" data-target="navbarExampleTransparentExample">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id="navbarExampleTransparentExample" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="https://hackmd.io/gfGNPeKPSjG1X1__2QhbqQ">
HackMD
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link" href="https://bulma.io/documentation/overview/start/">
Docs
</a>
<div class="navbar-dropdown is-boxed">
<a class="navbar-item" href="https://bulma.io/documentation/overview/start/">
Overview
</a>
<a class="navbar-item" href="https://bulma.io/documentation/overview/modifiers/">
Modifiers
</a>
<a class="navbar-item" href="https://bulma.io/documentation/columns/basics/">
Columns
</a>
<a class="navbar-item" href="https://bulma.io/documentation/layout/container/">
Layout
</a>
<a class="navbar-item" href="https://bulma.io/documentation/form/general/">
Form
</a>
<hr class="navbar-divider">
<a class="navbar-item" href="https://bulma.io/documentation/elements/box/">
Elements
</a>
<a class="navbar-item is-active" href="https://bulma.io/documentation/components/breadcrumb/">
Components
</a>
</div>
</div>
</div>
</div>
</nav>
```
<br>
* 何か他に思いついたら、項目を増やしたりしてみたい。
<br>
## 今回の反省・わからなかったところ
* 現時点では画像のサイズの調整ができておらず、一部の画像がブロックからはみ出してしまう状態になっているので、これを調整する。
<br>
## 次週(今後)の目標
レイアウトに関して、
* スクロールボックス内にパレットを入れる。
* 左側にボタンを追加し、そのボタンを押すと、対応するブロックの種類の一番上までスクロールが動く機能。
更に実際のScratchの機能に近づけるために、Elm側では
* ブロックを持った状態で、そのブロックをパレット部分で放すとブロックが消える機能。
* 現時点では右クリックでブロックを複製し、左クリックでブロックを動かすようになっている。
そこを変え、パレットに対しての左クリックのみブロックを複製させ、そのままドラッグするとブロックを運ぶことができ、パレット以外の左クリックに対しては複製が反応しないような機能。
これらの実装を頑張って目指したい。
<br>
## 参考サイト
[ナビゲーションバー](https://bulma.io/documentation/components/navbar/#navbar-burger)
[HtmlからElmへの変換サイト](http://mbylstra.github.io/html-to-elm/)
↑使うかも？メモ
<br>
<br>
## [次回(１０，１１回目)](https://hackmd.io/@ep18116/BkKOMgLhu)
<br>
Sign in with Wallet
Connect another wallet