Onsen UIをはじめよう

Improve this

Onsen UIをはじめよう！

このガイドでは、お読みの方がHTML、CSSとJavaScriptの基本的な知識をお持ちであることを想定しています。JavaScriptを使った開発がはじめての方は、ぜひ入門書を片手に読み進めてください。

Onsen UIとは？

Onsen UIは、下のような特徴を持つライブラリです。

モバイルアプリの開発に特化したUIコンポーネントの集まりです。
ネイティブなiOSとAndroidのデザインガイドに準拠したデザインと機能を持っています。
無料で利用でき、完全にオープンソースなソフトウェアです（Apache v2 license）。

Onsen UIを使うと、モバイルWebアプリの上でネイティブUIと同等のUX（ユーザー・エクスペリエンス）を提供することができます。モバイルWebアプリ（Progressive Web Appsとも呼ばれます）や、Cordovaを用いたハイブリッドアプリ開発に最適です。詳細については、アプリとしてデプロイするを参照してください。

先進的なアーキテクチャー

Onsen UIの中身は3つのレイヤーで作られています。

CSSコンポーネント: 次世代のCSSであるcssnextで実装されています。
Web Components: JavaScriptで記述されており、どんなフレームワークともお使いいただけます。
フレームワークバインディング: 人気のフレームワークであるVue.js、AngularJS 1、Angular 2+、React向けに、拡張された機能を提供します。

一言で表現すると、Onsen UIはモバイル開発を簡単にし、どのようなフレームワークとでも使う事ができ、 将来性が保証されて います！

Onsen UIのアーキテクチャーに興味がある方は、Onsen UIアーキテクチャーをご覧ください。

どんなコンポーネントがある？

Onsen UIのすべてのコンポーネントを含んだサンプルアプリ（Kitchen Sink App）があります。下記のアプリは2つの異なった外見をしていますが、実はソースコードは共通です。この機能はOnsen UIでオートスタイルと呼ばれます。

コンポーネントの一覧に興味がある方は、CSSコンポーネントやWebコンポーネントのAPIも参照してください。

サポートするブラウザーと端末

Onsen UIは主にiOSとAndroidデバイスに向けて設計をしているため、下記のプラットフォームに最適化しテストを行っています。

モバイル環境
- iOS 9以降
- Android 4.4.4以降のWebViewやChromeブラウザ（Android 4.0以降はCrosswalkエンジンに対応）
デスクトップ環境
- 最新版のSafariブラウザ
- 最新版のChromeブラウザ

他のプラットフォームについては、いくつかのコンポーネントや機能が正しく動作しない可能性があります。詳細については旧ブラウザへの対応をお読みください。

はじめてのOnsen UIアプリ

Onsen UIを使って、実際にアプリを作ってみましょう。手っ取り早くセットアップをするために、CDNを用いて読み込みをしてみます。index.htmlという名前のファイルを作成し、下記のHTMLを張り付けてみてください。

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
  <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
</head>
<body>
  <ons-button onclick="alert('Hello World!')">Click Me</ons-button>
</body>
</html>

このコードは非常に単純ですが、Onsen UIの基本となるものです。

2つのCSSファイル（onsenui.cssとonsen-css-components.min.css）と、1つのJavaScriptファイル(onsenui.min.js)を読み込む必要があります。
上のコードでは<ons-button>コンポーネントが使われています。これはボタンを表現するためのカスタムなタグ（Onsen UIタグ）です。すべてのOnsen UIタグはons-から始まります。
他のタグ（HTML要素）と同様に、Onsen UIコンポーネントにも属性（今回の例ではonclick）、メソッド、イベントリスナーがあります。詳細は属性・プロパティ・メソッド・イベントの章を参照してください。

これでOnsen UIの基本的な説明はおしまいです。使いたいコンポーネント（<ons-input>、<ons-icon>、<ons-carousel>など）をコンポーネント一覧から探し、あなたのコードに加えるだけで、アプリ開発ができるのです。

TIPS（ネイティブなダイアログ）: 上の例で使われているalert()関数はネイティブな見た目になりません。そのため、Onsen UIではons.notificationオブジェクトを使ってダイアログを表示することができます。先述のコードでalertをons.notification.alertに置き換えてみましょう。