html

Elmを利用して、画像を選択してそれを表示するアプリを作る。 ファイル読み込みの方法 Select.file関数を利用する。これはファイル選択用のエクスプローラを開くためのCmd Msgを作成してくれる。選択したファイルはMsgに載せられる。 適切なMIMEタイプを指定すると、エクスプローラ上にてそのタイプのファイルしか選択できなくなる。例えば、text/plainを選択しておけば、拡張子.txtのファイルしか選択できなくなる。 1 Select.file "MIMEタイプのリスト" "Msg" 画像ファイルへの変換 こうして得られたファイルはFileと呼ばれる型で保持される。 もしファイルを文字列として扱いたいなら、File.toStringを利用する。 もし画像として扱いたいなら、File.toUrlを利用する。これは画像をBase64符号化した文字列を作る。これをimgタグのsrc属性に指定すれば、画像が表示される。 画像を選択し、それを表示するアプリの作成 準備 プロジェクトを作成して、elm/fileをインストール。 $ elm init $ elm install elm/file src/Main.elmの雛形を作る。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 module Main exposing (....