More than 5 years have passed since last update.

Onsen UI 2でモバイルWebアプリを作るための準備（ローカル環境）

Last updated at 2016-10-27Posted at 2016-10-27

ローカル環境で、Onsen UI 2を使ったモバイルWebアプリを作る方法です。
（ハイブリッドアプリではありません。）

ライブラリのダウンロード

下記のサイトからOnsen UI 2のライブラリをダウンロードします。
Onsen UI配布リリース

最新バージョンのDownloadsからSource code (zip)をクリックしてタウンロードします。（執筆時点の最新は2.0.2でした。）
ダウンロードしたzipファイルOnsenUI-dist-2.0.2.zipを解凍すると、OnsenUI-dist-2.0.2のフォルダが出来上がります。

Webアプリへの組み込み

OnsenUI-dist-2.0.2フォルダを、これから作るWebアプリのフォルダにコピーします。
この時フォルダ名をonsenuiなどに変更してコピーすると良いでしょう。

フォルダ構成

onsenui_sample
  \onsenui    <-- ここにコピー
    \css
    \js
    \stylus
  index.html

HTMLにcssとjsを追加

Onsen UI 2を使うために必要なのは、以下の３行です。

<link rel="stylesheet" href="onsenui/css/onsenui.css" />
<link rel="stylesheet" href="onsenui/css/onsen-css-components.css" />
<script src="onsenui/js/onsenui.min.js"></script>

Onsen UI 2を組み込んだHTMLテンプレート

Onsen UI 2を組み込んだ、スマートフォン向けHTMLテンプレート¹です。

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Onsen UI サンプル</title>

    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="">

    <meta name="mobile-web-app-capable" content="yes">
    <link rel="icon" sizes="196x196" href="">
    <link rel="apple-touch-icon" sizes="152x152" href="">

    <!-- Onsen UI 2 -->
    <link rel="stylesheet" href="onsenui/css/onsenui.css" />
    <link rel="stylesheet" href="onsenui/css/onsen-css-components.css" />
    <script src="onsenui/js/onsenui.min.js"></script>
</head>
<body>

    ・・・

</body>
</html>

これでUnsen UIを使う準備ができました。

テンプレートは下記のサイトを参考にさせていただきました。HTML5でWebページを作成する時用の必要最小限をまとめたシンプルなテンプレート（IE8以下も配慮） | コリス ↩

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up