Onsen UI と AngularJS をWebサイトで使ってみた


現在 Monaca というサービスを使ってスマートフォンアプリを作っているのですが、Onsen UI と AngularJS って便利だなと思い、Webサイトでも使えそうだったので試してみました。

スポンサーリンク
AMP広告用336x280Adsense

js、cssファイルの呼び出し

<head>内で次の5行を呼び出します。バージョンは一番新しいものを使ってみました。

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/onsen/2.9.1/js/onsenui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/onsen/2.9.1/js/angular-onsenui.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/onsen/2.9.1/css/onsenui.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/onsen/2.9.1/css/onsen-css-components.min.css">

サンプルコード

コードはこちらのサンプルを使ってみました。ons-splitter を使ってスワイプすると表示されるメニューを出しています。

ハイブリッドアプリとPWAのためのUIフレームワーク。Web Componentsに準拠し、React、Angular 1と2+、Vueバインディングも提供。

実際のサイト

CodePen とかを使ってカッコよく見せたかったのですが、なんだかうまく表示できなかったので、実際のサイトを公開します。

コード

参考までにコード全体はこんな感じです。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
	
	<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/onsen/2.9.1/js/onsenui.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/onsen/2.9.1/js/angular-onsenui.min.js"></script>
	<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/onsen/2.9.1/css/onsenui.css">
	<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/onsen/2.9.1/css/onsen-css-components.min.css">
	

	<script>
	ons.bootstrap()
	 .controller('AppController', function($scope) {
		$scope.message = "Hello Onsen UI and Angular.js";
	
		this.load = function(page) {
			$scope.splitter.content.load(page);
			$scope.splitter.left.close();
		};

		this.toggle = function() {
			$scope.splitter.left.toggle();
		};
	});

	ons.ready(function() {
		
	});
	</script>
</head>
<body>

  <ons-splitter ng-controller="AppController as app" var="splitter">
    <ons-splitter-side side="left" width="220px" collapse swipeable>
      <ons-page>
        <ons-list>
          <ons-list-item ng-click="app.load('home.html')" tappable>
            Home
          </ons-list-item>
          <ons-list-item ng-click="app.load('settings.html')" tappable>
            Settings
          </ons-list-item>
          <ons-list-item ng-click="app.load('about.html')" tappable>
            About
          </ons-list-item>
        </ons-list>
      </ons-page>
    </ons-splitter-side>
    <ons-splitter-content page="home.html"></ons-splitter-content>
  </ons-splitter>

  <ons-template id="home.html">
    <ons-page>
      <ons-toolbar>
        <div class="left">
          <ons-toolbar-button ng-click="app.toggle()">
            <ons-icon icon="md-menu"></ons-icon>
          </ons-toolbar-button>
        </div>
        <div class="center">
          Main<br>
		  {{message}}
        </div>
      </ons-toolbar>
      <p style="text-align: center; opacity: 0.6; padding-top: 20px;">
        Swipe right to open the menu!
      </p>
    </ons-page>
  </ons-template>

  <ons-template id="settings.html">
    <ons-page>
      <ons-toolbar>
        <div class="left">
          <ons-toolbar-button ng-click="app.toggle()">
            <ons-icon icon="md-menu"></ons-icon>
          </ons-toolbar-button>
        </div>
        <div class="center">
          Settings
        </div>
      </ons-toolbar>
    </ons-page>
  </ons-template>

  <ons-template id="about.html">
    <ons-page>
      <ons-toolbar>
        <div class="left">
          <ons-toolbar-button ng-click="app.toggle()">
            <ons-icon icon="md-menu"></ons-icon>
          </ons-toolbar-button>
        </div>
        <div class="center">
          About
        </div>
      </ons-toolbar>
    </ons-page>
  </ons-template>

</body>
</html>

CodePen

なぜ表示されないのか。。

See the Pen Onsen UI and AngularJS by BeeLabo Master (@BeeLabo) on CodePen.

0
スポンサーリンク
AMP広告用336x280Adsense
AMP広告用336x280Adsense

フォローする