はじめに
アプリを作っていると、最初のうちは画面のデザインはデフォルト CSS のままでもいいのだけれど、だんだん形が出来上がってくるとデザインもどうにかしたくなってくる。ただ自分で CSS をゴリゴリ書く気にはならないし、デザインフレームワークを使ったほうが楽だしきれいに出来上がる。
Vue.js や jQuery なら有名どころがいくらでも見つかるのだが、PureScript ＋ Halogen ではなかなかない。
「PureScript / Halogen でOnsen UIを使ってみよう」という記事を見て自分で Onsen UI を組み込んでみようとしたもののうまくいかなかった1。やはり出来合いのものを見つけて導入したい。
ということで見つけたものをメモしていこうと思う。
ちなみに「PureScriptのUIライブラリまとめ」という記事もあって、これはこれで大いに参考にさせていただいたのだが、この記事とはスコープが違う。
イメージとしては下の表「???」に当てはまるものを知りたい。
| 言語 | UIフレームワーク | デザインフレームワーク |
|---|---|---|
| PureScript | Halogen | ??? |
| PureScript | React | MaterialUI |
| JavaScript | Angular | Angular Material |
| JavaScript | React.js | Material-UI |
| JavaScript | Vue.js | Vuetify |
| JavaScript | jQuery | Bootstrap |
※ 表内の記述はあくまで一例であり、ほかの組み合わせも可能です。ていうかもっといい組みあわせはあると思われる…。
Ocelot
Ocelot は CitizenNet 社が自社アプリケーションで使用しているUIコンポーネントをライブラリとして外部公開したもの。
ライセンスは Apache License 2.0。
- Tailwind.css をベースにデザインが作られている
- CSS はスコープ付きでコンポーネントにバンドルされている
- 「ブロック」と「コンポーネント」に分類されている
- 「ブロック」は単純な HTML / CSS の塊（ただの render 関数）
- 「コンポーネント」はふるまいや状態を持った Halogen コンポーネント
「ブロック」はただの render 関数なので自分の作っている Halogen コンポーネントの render 関数内で呼び出せばすぐに使えそう。カスタムエレメントのような感じ。
「コンポーネント」は slot を使って読み込む必要がある。普通に Halogen コンポーネント。
documentation site で実際のコンポーネントの見た目を見ることができる。 ocelot のリポジトリにソースコードもあるので、使い方の参考にもなる。ただ Pursuit には公開されていないのでドキュメントの参照は少し手間かもしれない。
コンポーネントの品ぞろえは、BootStrapなどと比べてるとどうしても見劣りする。とくにナビゲーションやタブバー、メニューといった要素がないのが残念な感じ。
halogen-storybook
いきなり脱線気味だが気になったのでメモしておく。
halogen-storybook は Storybook をPureScript ＋ Halogen で使用できるようにしたもの。Storybook そのものの説明は割愛。
- 開発時用のものであって本番のアプリケーションには使っちゃダメだと思う
- Ocelot のドキュメントサイトもこれを使って作られている
- オリジナルな UI コンポーネントを作ったらこれでコンポーネントカタログも作っておくと後々便利そう
-
特に Tabbar。こいつがうまくできてたらもう少し頑張れてたと思う…。 ↩