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 はまだわからないことが多いので色々と作りながら試していけたらと思います.
Author And Source
この問題について(ElmとElectronでデスクトップアプリを作ってみた), 我々は、より多くの情報をここで見つけました https://qiita.com/calmery/items/b80ee5a9c3aa0b268d02著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .