2019年5月29日水曜日

ELMでドラッグ&ドロップ

ELMでドラッグ&ドロップを使ったアプリを作ってみた。
すっきりしたプログラムが作れる。Maybeを使えば 例外なども必要ない。
case ofでパターンマッチングも便利。覚えるコマンドも最小限で済む。
その分、うまく組み立てる必要があるが。けっこう楽しめる言語かもしれません。

※ただ、残念ながら、複数のターゲットをマウス操作はできるけれど、タブレット等でタッチ操作がうまくいかないようです。1つのターゲットならできるようなのだけど。
 今回は、タブレットで使いたかったので、、、ELM使用はいったん保留です。

2019年5月1日水曜日

ELMで文字入りの円をドラッグ&ドロップするには

文字入りの円をドラッグ&ドロップするアプリをELMで作れないか考えてみた。
ググると、Svgを使って四角をドラッグ&ドロップする例があった。
https://package.elm-lang.org/packages/zaboco/elm-draggable/latest/
Svgライブラリの説明もあり
https://package.elm-lang.org/packages/elm/svg/latest/Svg
SVG描画で円の中心にテキストを表示する方法も参考にさせてもらいました。
ELMはエラーメッセージが詳しいので、それも助けになります。

いろいろ試行錯誤しながら 結局、ライブラリの説明の中の
g,circle,text_はList (Attribute msg) -> List (Svg msg) -> Svg msg
textがString -> Svg msg
という型の説明をもとに、組み立てるといいようでした。

一つ目のリンクのMultipleTargetsExample.elmのSvg.rectの部分を、以下のようにするとうまくいきました。

Svg.rect
        [ num Attr.width <| getX boxSize
        , num Attr.height <| getY boxSize
        , num Attr.x (getX position)
        , num Attr.y (getY position)
        , Attr.fill color
        , Attr.stroke "black"
        , Attr.cursor "move"
        , Draggable.mouseTrigger id DragMsg
        , onMouseUp StopDragging
        ]
        []
を、以下のように変更

   Svg.g
     [     Attr.cursor "move"
        , Draggable.mouseTrigger id DragMsg
        , onMouseUp StopDragging]
     [
      Svg.circle
       [
          num Attr.r <| getY boxSize
        , num Attr.cx (getX position)
        , num Attr.cy (getY position)
        , Attr.fill color
        , Attr.stroke "black"
 
       ]
       [ ]
       ,
       Svg.text_ [
         num Attr.x (getX position)
        , num Attr.y (getY position)
         ,  Attr.stroke "black"
             ]
         [Svg.text "abcde"]
     
     ]
   

   

ELMについて

ELMでフロントエンド開発はどうかと思い、試してみている。
〇まずは、設定
npmをインストールしたら
コマンドプロンプトで
npm install -g elm
npm install -g elm-format
・VS Codeのインストール>拡張機能 ビュー>検索用のテキストボックスに elm >elm の インストール 
・日本語にするには[EXTENSIONS]ビューの一番上にある検索ボックスで「japanese」などを検索
・ファイル - 基本設定 - 設定>右上の {} をクリック>
ユーザー設定
{
    "elm.compiler": "C:\\Users\\win_user\\AppData\\Roaming\\npm\\elm.cmd",
    "elm.formatCommand": "C:\\Users\\win_user\\AppData\\Roaming\\npm\\elm-format.cmd",
}

〇実際に使ってみる
・ Elm のプロジェクト用のディレクトリを作成、そこでelm init を実行
 elm.json を作成するかどうか確認されるので Y を入力
・エクスプローラービューの src ディレクトリ上でElm のソースファイルを作成
・ Alt + Shift + F を入力すると module 文等が追加されます
・Ctrl + Shift + P を入力してコマンドパレット表示>elm reactor start 
 これでWeb サーバが起動し http://localhost:8000/src/elmファイル名
 でアクセスできる
・不要であれば Elm Reactor を停止させる。コマンドパレットで elm reactor stop 

以上はhttps://qiita.com/ossan_pg/items/5c3ce00b74036139507eを参考にさせていただきました。とても詳しく説明されており助かりました。

〇elm makeについて
elm makeを使ってElmプロジェクトをビルドし、HTMLファイルなど作成できます。
elm make Main.elm --output=main.html
なお、足りないパッケージがあるとメッセージで要求されるので
elm install elm/http
elm install elm/json
のようにして、追加していく必要があります。

https://guide.elm-lang.jp/install.htmlを参考にさせていただきました。