Elm0.19でCSSフレームワーク”bulma”を試してみる(1)(surprisetalk/elm-bulma packageの利用)
私的には、WEBアプリにCSSフレームワークは必須です。
bulmaを試してみたいと思います。
以下のパッケージを試してみたいと思います。
https://package.elm-lang.org/packages/surprisetalk/elm-bulma/latest/
![](https://i-doctor.sakura.ne.jp/font/wp-content/uploads/2019/03/image-71.png)
開発環境
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利用の流れ
公式サイトの通りにやってみたいと思います。
![](https://i-doctor.sakura.ne.jp/font/wp-content/uploads/2019/03/image-72.png)
→上記の2.は説明が古く、Elm0.19では
elm install surprisetalk/elm-bluma
と入力します。
新規Elmプロジェクトの作成
C:/elm/ フォルダ内に、bulma-example/ というフォルダを作成し、VisualStudioCodeで開きます。
![](https://i-doctor.sakura.ne.jp/font/wp-content/uploads/2019/03/image-73.png)
Ctrl+@ で、ターミナル画面を出してから、elm init (+Enter)で新規プロジェクトを作成します。
![](https://i-doctor.sakura.ne.jp/font/wp-content/uploads/2019/03/image-75.png)
elm-bulma packageのインストール
elm package install --yes surprisetalk/elm-bulma
![](https://i-doctor.sakura.ne.jp/font/wp-content/uploads/2019/03/image-77.png)
なんか、いきなりパッケージがインストールできない。。。
ググってみます。
https://guide.elm-lang.org/install.html
![](https://i-doctor.sakura.ne.jp/font/wp-content/uploads/2019/03/image-78.png)
elm install surprisetalk/elm-bulma
何か聞かれたら、Enter を押す。
![](https://i-doctor.sakura.ne.jp/font/wp-content/uploads/2019/03/image-79.png)
これでやっと、surprisetalk/elm-bulma 6.1.5 packageがインストールされたようです。パッケージの説明ページが古いまま。。。
src/Example.elm ファイルの作成
https://github.com/surprisetalk/elm-bulma/blob/master/src/Example.elm
のコードをコピペします。(古くて動かないらしい。。。)
![](https://i-doctor.sakura.ne.jp/font/wp-content/uploads/2019/03/image-80.png)
ターミナル画面でelm reactor
ターミナル画面にelm reactorと入力し、Chromeで
http://localhost:8000
を開きます。
![](https://i-doctor.sakura.ne.jp/font/wp-content/uploads/2019/03/image-81.png)
![](https://i-doctor.sakura.ne.jp/font/wp-content/uploads/2019/03/image-82.png)
![](https://i-doctor.sakura.ne.jp/font/wp-content/uploads/2019/03/image-83.png)
一応、それっぽい画面は表示された。が、まだまだ素人が触るのには非常に難しいかも。。。
![](https://i-doctor.sakura.ne.jp/font/wp-content/uploads/2019/03/image-84.png)
![](https://i-doctor.sakura.ne.jp/font/wp-content/uploads/2019/03/image-85.png)
リンク
https://package.elm-lang.org/packages/surprisetalk/elm-bulma/latest/
ディスカッション
コメント一覧
まだ、コメントがありません