Improve this

Onsen UIをはじめよう!

この章の内容は動画でも用意しています。読み飛ばしたい方は、こちらの動画をご利用ください。

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

Onsen UIとは?

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

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

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

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

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

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

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

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

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

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

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

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

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

はじめての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の基本となるものです。

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

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

Webアプリ、ハイブリッドアプリをネイティブに近づける

iPhoneやAndroidアプリの外見をまねただけでは、ユーザーの期待するレベルのUXを表現できたとは言えません。タッチしたときのインタラクションやモーションを含めてネイティブの動きに近づける必要があります。

このギャップを埋めるために、Onsen UIはページ遷移などのアニメーション、リップル効果などのエフェクト、精度の高いコンポーネントのデザインを行っています。神は細部に宿るのです。

上の例では<ons-page>コンポーネントで2つのページが定義されています。次に、<ons-navigator>コンポーネントがネイティブ同等の遷移アニメーションを実現します。このようにアプリの挙動をよりネイティブに近づけたい場合は、Onsen UIの基礎に進んでください。

Onsen UIでは、ビジュアル面から詳細な実装まで、アプリケーションがネイティブに近づけるための仕組みが備わっています。

参考リソース

Onsen UIの学びをより簡単にするため、下記のようなリソースを提供しています。英語での提供とはなりますが、ぜひご活用ください!