モバイルアプリUIデザイン支援ツール「Onsen UI Components」
この記事は約5分ぐらいで読めます
アシアル株式会社はPHPやHTML5が得意なWeb制作会社。以前も[プレゼントあり]HTML5やPHPを得意とするアシアル株式会社に行ってきましたという記事で紹介してますねー。ちなみにHTML5KARUTAのスポンサーとしても名を連ねてくれています！ありがとうございます★
アシアルはMonacaというiPhone、Android、Windows 8でハイブリッドアプリを作るためのWebサービスを提供してるんですけど、そのサービス上でも使えて普通に使用することもできるOnsen UIというフレームワークを提供してました。今回はそのOnsen UIチームがそのインターフェイスをコンポーネントとして自由にバラバラに利用できるサービスとして開発したみたいです。
Onsen UI Componentsの使い方
Onsen UI Components
Onsen CSS Componentsは基本的には欲しいUIを選んで上部バーのDownloadsから丸ごとダウンロードするかパーツごとにソースコードをコピペするか、というだけで利用できます。その際に各パーツの色を変えたりすることができるくらいですね。
各コードはパターンとコンポーネントに分かれていて、実際の見た目を確認しながら選べます。
パターンの選択画面
パターンはアプリケーションの一つのページ丸ごとを指し、
- Login
- Grid Menu
- Time Line
- Profile
- Card
- Image View
- Resister
- Search
- Signup
- List with Header
- List Icons
- List with Mini Pictures
- List with Pictures
- Buttons Different Sizes
- Icon Buttons
- Ranges
- Checkboxes
- Radio Buttons
といったページをさっくりと作れます。
コンポーネントの選択画面
コンポーネントはそのページに置かれたUIパーツで、パターンというのはこれの集合体というわけです。
- Switch
- Range
- Navigaion Bar
- Navigaion Bar Item
- Bottom Bar
- Navigaion Bar with Segment
- Button
- Quiet Button
- Large Button
- Large Quiet Button
- Call To Action Button
- Large Call To Action Button
- Button Bar
- Segment
- Icon Tab Bar
- Tab Bar
- Icon Only Tab Bar
- Notification
- Icon Button
- Checkbox
- No Border Checkbox
- List
- No Border List
- Category List Header
- Tappable List
- Radio Button
- Search Input
- Text Input
- Transparent Text Input
- Underbar Text Input
- Textarea
- Textarea Transparent
といったものが設置できます。
ソースコードを展開してコピーすることもできます
ここからそれぞれのコードを参照することもできますが、丸ごとダウンロードしてしまっても大丈夫です。BEMっぽい感じになってますね。そのまま使っちゃえばUI作るのにはかなり手っ取り早いと思いますし、普通にコードの参考にしてもいいかもしれないですね★
ざっくり紹介しましたけど、自分でも触ってみてくださいー！