最新uiフレームワーク onsen ui2でカッコイイwordpress連携アプリを作る方法

Copyright © Asial Corporation. All Rights Reserved. 　│ 　 1

最新 UI フレームワーク Onsen UI2 でカッコイイ WordPress 連携アプリを作る方法

アシアル株式会社


Onsen UI とは


Onsen UI

• Cordova アプリに最適化

• UI ガイドラインに準拠

• ネイティブと遜色ないアニメーション

• 豊富な UI パーツ

• SPA の構築が容易

簡単に使えてハイパフォーマンスな、 HTML5 ハイブリッドアプリ向けの UI フレームワークです。

マテリアルデザイン対応 ver の Onsen UI 2.0 を RC 版として公開中


Onsen UI の使い方

独自タグを記述することで、ネイティブライクな UI を簡単に構築することができます。


Onsen UI が提供する UI パーツ群

マテリアルデザイン（ Android）

フラットデザイン（ iOS）

各コンポーネントの詳細　 https://onsen.io/v2/


Onsen UI の対応フレームワーク

• jQuery• Angular1• Vue.js ( 対応作業中 )• Angular2 （クラウド IDE は非対応）

• React （クラウド IDE は非対応）


WordPress と API


WordPress REST API (Version 2)

記事の取得例

/wp-json/wp/v2/posts結果

JSON 形式

WordPress の記事を取得したり投稿や更新などを行える API 。プラグインで追加可能。


URL をたたくと JSON が返ってくる

http://j801.com/wp-json/wp/v2/posts[{"id":64183,"date":"2016-08-25T07:48:40","date_gmt":"2016-08-24T22:48:40","guid":{"rendered":"http:\/\/j801.com\/?p=64183"},"modified":"2016-08-25T07:48:40","modified_gmt":"2016-08-24T22:48:40","slug":"post-64183","type":"post","link":"http:\/\/j801.com\/archives\/64183","title":{"rendered":"\u51fa\u5f35\u3057\u3059\u304e\u3066View\u30ab\u30fc\u30c9\u306e\u4e0a\u9650\u304c\u8d8a\u3048\u3001\u4e88\u7d04\u3057\u305f\u30c1\u30b1\u30c3\u30c8\uff08\u3068\u9818\u53ce\u66f8\uff09\u304c\u30d0\u30e9\u30d0\u30e9\u306b\u3001\u3001\u3001"},"content":{"rendered":"<p>\u540d\u53e4\u5c4b\u51fa\u5f35\u306e\u305f\u3081\u306e\u30c1\u30b1\u30c3\u30c8\u3092\u8cfc\u5165\u3057\u305f\u3089\u4e0a\u9650\u3092\u8d85\u3048\u305f\u305f\u3081\u3001\u4e2d\u9014\u534a\u7aef\u306b\u30c1\u30b1\u30c3\u30c8\u304c\u51fa\u529b\u3055\u308c\u3066\u3057\u307e\u3063\u305f\u3002<\/p>


アプリの作成


今回作成するアプリ

簡単な記事一覧アプリを作ります。アプリ内で記事詳細を出すことも可能で

すが面倒なので Web サイトにジャンプさせます。

ブログ記事一覧記事へジャンプ


作成手順

1. 開発環境を用意（例えば Monaca ）

2. Onsen UI2 を組み込む

3. jQuery3 を組み込む

4. HTML(index.html) を編集

5. JavaScript(app.js) を記述


新規プロジェクトの作成

Monaca にログインし、ダッシュボードで「新規プロジェクトの作成」

ボタンを選択します。


プロジェクトを作成する

Onsen UI V2 JS Minimum を選択


プロジェクトを作成する

名前と説明（任意入力）を設定します

• プロジェクト名： WordPress 連携アプリ with Onsen UI2

HTML 側の変更

index.html の <body> を以下の通り修正

<body>  <ons-navigator page="list.html" id="navi"></ons-navigator>

 <ons-template id="list.html"> <ons-page id="listPage"> <ons-toolbar> <div class="center"> ブログ記事一覧 </div> </ons-toolbar> <ons-list > </ons-list> <div id="articles"></div> </ons-page> </ons-template></body>


HTML 側の変更

index.html の <script> タグを削除して差し替え

<script> ons.ready(function() { console.log("Onsen UI is ready!"); });</script>

<script src="lib/jquery.min.js"></script><script src="js/app.js"></script>


jQuery3 を組み込む

jQuery3 を入手


lib フォルダの変更

ダウンロードした jQuery3 をアップロード

• ファイル名を『 jquery.min.js 』に変更


js フォルダの作成

フォルダを作成

• js


js フォルダの変更

ファイルを作成

• app.js


記事一覧プログラムの作成

js/app.js に以下のコードを記述します。

/* WP REST API から記事を取得して表示する */$.ajax('http://j801.com/wp-json/wp/v2/posts') .then(function(json) { /* 書き込みたい内容をフラグメントとして用意 */ var df = document.createDocumentFragment();

for(var i=0;i < json.length;i++){ var item = document.createElement('ons-list-item'); var date = new Date(json[i].modified); item.innerHTML = '<ons-row>' + '<ons-col width="70px">' + (date.getMonth() + 1) + " 月 " + date.getDate() + " 日 " +'</ons-col>' + '<ons-col><a href="'+ json[i].link +'">' + json[i].title.rendered + '</a></ons-col>'+'<ons-row>'; item.setAttribute('data-index', i); df.appendChild(item); } /* フラグメントを反映 */ document.querySelector('#articles').appendChild(df); });


ブラウザを別途起動する処理 (InAppBrowser)

js/app.js に以下のコードを追記します。

/* リンクがクリックされたら InAppBrowser でサイトを開く */$(document).on('click', 'a', function (event) { event.preventDefault(); window.open(event.target.href,"_system");});

最新uiフレームワーク onsen ui2でカッコイイwordpress連携アプリを作る方法

Engineering