elmでやってみるシリーズ4: 画像ギャラリー

elmでやってみるシリーズ4: 画像ギャラリー。

論文「"Concurrent FRP for Functional GUIs"」にものってた、画像ギャラリー的なもの。キーボードの矢印キーの左右で画像を選択できます。

import Keyboard

-- WikipediaのURL(各画像URLの共通部分)
base = "http://upload.wikimedia.org/wikipedia/commons/"

-- 画像情報(タイトルとURL)をレコード型で表現する
picts = [{title="Het melkmeisj",
          url=base++"2/20/Johannes_Vermeer_-_Het_melkmeisje_-_Google_Art_Project.jpg"},
         {title="Girl with a Pearl Earring",
          url=base++"c/ce/Girl_with_a_Pearl_Earring.jpg" },
         {title="Womanholdingabalance vermeer",
          url=base++"7/7e/Womanholdingabalance-vermeer.jpg" },
         {title="Le Moulin de la Galette",
          url=base++"2/21/Pierre-Auguste_Renoir%2C_Le_Moulin_de_la_Galette.jpg"},
         {title="Luncheon of the Boating Party",
          url=base++"e/ea/Auguste_Renoir_-_Luncheon_of_the_Boating_Party_1880-1881.jpg"}
        ]

-- 画像情報のリストからn番目の画像情報を得る。nが負の場合やリスト長を越える場合、リスト長の剰余(mod)を取る。
nthPict n = let x = n `mod` (length picts)
            in (head (drop x picts))

-- 左右の矢印キーを入力シグナル(+1,-1)を累積的に保存した値をfoldpで作って、「n番目の画像を表示する」にリフト適用。
main = let f n = let {title, url} = nthPict n
                 in flow down [plainText title,
                               fittedImage 200 300 url,
                               plainText "prev<- ->next"]
       in f <~ foldp (\it acc-> acc+it.x) 0 Keyboard.arrows

ブラウザ内で編集したり実行したい場合はこちらからどうぞ。

気づいたこと

• nthがない(定義はできる。Writing a 2048 clone in elm · Scrambled Eggsにinfixl 9 !の例がある。)

• ElemのRecordは構造的同値型を採用とのこと。名前をつけるときはnewtypeではなくdataでやると公称型になるのかな。要確認。Haskellではどうなってたっけ。
• プログラムはブラウザ上のREPL(try-elm)で作成してます。C-hで関数の型含む説明がでます。こんなもんで十分やったんや…。

関連エントリ

「Elmでやってみる」シリーズのまとめエントリ - uehaj's blog