最新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連携アプリを作る方法

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (19)

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

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

Mehr von アシアル株式会社

Mehr von アシアル株式会社 (20)