スポンサーリンク

Elm0.19でCSSフレームワーク”bulma”を試してみる(1)(surprisetalk/elm-bulma packageの利用)

2019年3月25日

私的には、WEBアプリにCSSフレームワークは必須です。

bulmaを試してみたいと思います。
以下のパッケージを試してみたいと思います。

https://package.elm-lang.org/packages/surprisetalk/elm-bulma/latest/

スポンサードリンク

開発環境

Windows 10 Pro
Chrome
VisualStudioCode 1.32.3
git version 2.20.1.windows.1
nvm 1.1.7
node 10.2.0
npm 6.4.1
elm 0.19.0-bugfix6
elm-format 0.8.1
VisualStudioCodeの拡張機能でelmをインストールして、settings.jsonに以下のようにelmを設定。
(『Alt + Shift + F』と『Ctrl + S』を使用。)

Elm-Bulma利用の流れ

公式サイトの通りにやってみたいと思います。

→上記の2.は説明が古く、Elm0.19では

elm install surprisetalk/elm-bluma

と入力します。

新規Elmプロジェクトの作成

C:/elm/ フォルダ内に、bulma-example/ というフォルダを作成し、VisualStudioCodeで開きます。

Ctrl+@ で、ターミナル画面を出してから、elm init (+Enter)で新規プロジェクトを作成します。

elm-bulma packageのインストール

elm package install --yes surprisetalk/elm-bulma

なんか、いきなりパッケージがインストールできない。。。

ググってみます。
https://guide.elm-lang.org/install.html

elm install surprisetalk/elm-bulma

何か聞かれたら、Enter を押す。

これでやっと、surprisetalk/elm-bulma 6.1.5 packageがインストールされたようです。パッケージの説明ページが古いまま。。。

src/Example.elm ファイルの作成

https://github.com/surprisetalk/elm-bulma/blob/master/src/Example.elm
のコードをコピペします。(古くて動かないらしい。。。)

ターミナル画面でelm reactor

ターミナル画面にelm reactorと入力し、Chromeで

http://localhost:8000 

を開きます。

一応、それっぽい画面は表示された。が、まだまだ素人が触るのには非常に難しいかも。。。

リンク

https://bulma.io/

https://package.elm-lang.org/packages/surprisetalk/elm-bulma/latest/

スポンサーリンク