Elm0.19でCSSフレームワーク”bulma”を試してみる(1)(surprisetalk/elm-bulma packageの利用)
私的には、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://package.elm-lang.org/packages/surprisetalk/elm-bulma/latest/
ディスカッション
コメント一覧
まだ、コメントがありません