ElmとElectronでデスクトップアプリを作ってみた

これは Elm Advent Calendar 2017 の 15 日目の記事です．

はじめに

Elm と Electron を使って Twitter のハッシュタグである #elm をストリーミングするアプリを作ってみました．完成したものは GitHub - calmery/elm-advent-calendar-2017 で見ることができます．

実装

コミット毎にまとめていきます．

Hello World

GitHub - calmery/elm-advent-calendar-2017 at 6490533e51c1fb4afea9e03aa9562e4762f52207

Elm が undefined になった

早速というか．Electron から Elm を参照すると undefined となってしまいました．

Elm.Main.fullscreen() // Uncaught ReferenceError: Elm is not defined

実際に生成されたコードを見ると module.exports が優先されてしまうようです．

if (typeof module === "object")
{
  module['exports'] = Elm;
  return;
}

var globalElm = this['Elm'];
if (typeof globalElm === "undefined")
{
  this['Elm'] = Elm;
  return;
}

なので module.exports から直接参照するようにしました．

const Elm = module.exports

// require を使って読み込むこともできる
const Elm = require( './app.js' )

この問題は webpack を使用することで気にならなくなります．

webpack を追加する

GitHub - calmery/elm-advent-calendar-2017 at 55e80b6a4e1e11bb8713177fcbbaabc13d90732d
webpackその1 · Elm Tutorial の説明が参考になりました．

Twitter から取得したツイートをプロセス間通信と Port で送る

GitHub - calmery/elm-advent-calendar-2017 at 45fff5fea0170ef369d8554a4dbcbe0f020abe81
Electron はメインプロセスとレンダラプロセスが別れています．なので，その間でやりとりを行うためにプロセス間通信を行う必要があります．ここは ipcMain | Electron を見るといいかなと思います．

// src/entry.js
// In main process.
stream.on( 'data', event => {
  const tweet = event.text
  window.webContents.send( 'newTweet', tweet )
} )

// src/public/entry.js
// In renderer process.
ipcRenderer.on( 'newTweet', ( _, tweet ) => {
  // do something ...
} )

ひとまずツイートの本文だけをレンダラプロセスに渡すようにしました．ここから，さらに受け取ったデータを Elm に Port を使って渡します．ここは JavaScript · An Introduction to Elm の Step 2: Talk to JavaScript とか ElmのPortでJSを使う。 - Qiita が参考になります．

// src/public/entry.js
ipcRenderer.on( 'newTweet', ( _, tweet ) => {
  app.ports.newTweet.send( tweet )
} )

-- src/public/elm/Main.elm
port newTweet : (String -> msg) -> Sub msg

type Msg
    = NewTweet String

subscriptions : Model -> Sub Msg
subscriptions model =
    newTweet NewTweet

JSON をデコードする

GitHub - calmery/elm-advent-calendar-2017 at 39ab6b701fcfbbf29a46ec706286c2f4c76a5f1f
ツイートの本文だけでは物足りないのでユーザの情報なども一緒に渡すようにしました．

// src/entry.js
stream.on( 'data', event => {
  const tweet = {
    text: event.text,
    created_at: event.created_at,
    user: {
      profile_image_url: event.user.profile_image_url,
      name: event.user.name,
      screen_name: event.user.screen_name,
    }
  }

  window.webContents.send( 'newTweet', JSON.stringify( tweet ) )
} )

Elm で JSON をデコードします．JSON · An Introduction to Elm や [Elm] Decoder a からいろいろ理解ってしまおう - Qiita が参考になります．

-- src/public/elm/Main.elm
type alias Tweet =
    { user : User
    , text : String
    , created_at : String
    }

decodeTweet : String -> Result String Tweet
decodeTweet response =
    decodeString tweetDecoder response

tweetDecoder : Decoder Tweet
tweetDecoder =
    map3 Tweet
        (field "user" userDecoder)
        (field "text" string)
        (field "created_at" string)

通知する

GitHub - calmery/elm-advent-calendar-2017 at 5ee82825bd10cd5c3b0705f21b0804ba33455ca3
Elm から Port を通して Notification - Web API インターフェイス | MDN を呼び出すことでツイートを受け取った際に通知を表示するようにしました．

-- src/public/elm/Main.elm
port notification : String -> Cmd msg

...

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
  ...
    Ok tweet ->
      ( List.append [ tweet ] <| List.take 100 model, notification tweet.text )

// src/public/entry.js
app.ports.notification.subscribe( message => {
  new Notification( message )
} )

見た目を整える

GitHub - calmery/elm-advent-calendar-2017 at c72da54e9bfb6d0aff18446d4313bfd31af246c5
Elm にも elm-styled とか style-elements とかあるようですが，今回は普通に CSS を使いました．

まとめ

躓いたところもいくつかあったけれど，思っていたよりすんなりできたかなと思います．Elm はまだわからないことが多いので色々と作りながら試していけたらと思います．