最新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/64
183","title":{"rendered":"u51fau5f35u3057u3059u304eu30
66Viewu30abu30fcu30c9u306eu4e0au9650u304cu8d8au3048
u3001u4e88u7d04u3057u305fu30c1u30b1u30c3u30c8uff08
u3068u9818u53ceu66f8uff09u304cu30d0u30e9u30d0u30e9
u306bu3001u3001u3001"},"content":{"rendered":"<p>u540d
u53e4u5c4bu51fau5f35u306eu305fu3081u306eu30c1u30b1
u30c3u30c8u3092u8cfcu5165u3057u305fu3089u4e0au9650
u3092u8d85u3048u305fu305fu3081u3001u4e2du9014u534a
u7aefu306bu30c1u30b1u30c3u30c8u304cu51fau529bu3055
u308cu3066u3057u307eu3063u305fu3002</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連携アプリを作る方法

More Related Content

What's hot

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

More from アシアル株式会社