Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Copyright © Asial Corporation. All Rights Reserved. │ 1
最新UIフレームワーク Onsen UI2で
カッコイイWordPress連携アプリを作る方法
アシアル株式会社
Copyright © Asial Corporation. All Rights Reserved. │ 2
Onsen UIとは
Copyright © Asial Corporation. All Rights Reserved. │ 3
Onsen UI
• Cordovaアプリに最適化
• UIガイドラインに準拠
• ネイティブと遜色ないアニメーション
• 豊富なU...
Copyright © Asial Corporation. All Rights Reserved. │ 4
Onsen UIの使い方
独自タグを記述することで、ネイティブライクなUIを簡単に構築
することができます。
Copyright © Asial Corporation. All Rights Reserved. │ 5
Onsen UIが提供するUIパーツ群
マテリアルデザイン(Android)
フラットデザイン(iOS)
各コンポーネントの詳細 h...
Copyright © Asial Corporation. All Rights Reserved. │ 6
Onsen UIの対応フレームワーク
• jQuery
• Angular1
• Vue.js (対応作業中)
• Angular2...
Copyright © Asial Corporation. All Rights Reserved. │ 7
WordPressとAPI
Copyright © Asial Corporation. All Rights Reserved. │ 8
WordPress REST API (Version 2)
記事の取得例
/wp-json/wp/v2/posts
結果
JS...
Copyright © Asial Corporation. All Rights Reserved. │ 9
URLをたたくとJSONが返ってくる
http://j801.com/wp-json/wp/v2/posts
[{"id":6418...
Copyright © Asial Corporation. All Rights Reserved. │ 10
アプリの作成
Copyright © Asial Corporation. All Rights Reserved. │ 11
今回作成するアプリ
簡単な記事一覧アプリを作ります。アプリ内で記事詳細を出すことも可能です
が面倒なのでWebサイトにジャンプさせ...
Copyright © Asial Corporation. All Rights Reserved. │ 12
作成手順
1. 開発環境を用意(例えばMonaca)
2. Onsen UI2を組み込む
3. jQuery3を組み込む
4. H...
Copyright © Asial Corporation. All Rights Reserved. │ 13
新規プロジェクトの作成
Monacaにログインし、ダッシュボードで「新規プロジェクトの作成」ボ
タンを選択します。
Copyright © Asial Corporation. All Rights Reserved. │ 14
プロジェクトを作成する
Onsen UI V2 JS Minimum を選択
Copyright © Asial Corporation. All Rights Reserved. │ 15
プロジェクトを作成する
名前と説明(任意入力)を設定します
• プロジェクト名:WordPress連携アプリwith Onsen ...
Copyright © Asial Corporation. All Rights Reserved. │ 16
HTML側の変更
index.htmlの<body>を以下の通り修正
<body>
<!-- ナビゲーター -->
<ons-na...
Copyright © Asial Corporation. All Rights Reserved. │ 17
HTML側の変更
index.htmlの<script>タグを削除して差し替え
<script>
ons.ready(functi...
Copyright © Asial Corporation. All Rights Reserved. │ 18
jQuery3を組み込む
jQuery3を入手
Copyright © Asial Corporation. All Rights Reserved. │ 19
libフォルダの変更
ダウンロードしたjQuery3をアップロード
• ファイル名を『jquery.min.js』に変更
Copyright © Asial Corporation. All Rights Reserved. │ 20
jsフォルダの作成
フォルダを作成
• js
Copyright © Asial Corporation. All Rights Reserved. │ 21
jsフォルダの変更
ファイルを作成
• app.js
Copyright © Asial Corporation. All Rights Reserved. │ 22
記事一覧プログラムの作成
js/app.jsに以下のコードを記述します。
/* WP REST APIから記事を取得して表示する ...
Copyright © Asial Corporation. All Rights Reserved. │ 23
ブラウザを別途起動する処理(InAppBrowser)
js/app.jsに以下のコードを追記します。
/* リンクがクリックされ...
Upcoming SlideShare
Loading in …5
×

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

1,601 views

Published on

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

Published in: Engineering

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

  1. 1. Copyright © Asial Corporation. All Rights Reserved. │ 1 最新UIフレームワーク Onsen UI2で カッコイイWordPress連携アプリを作る方法 アシアル株式会社
  2. 2. Copyright © Asial Corporation. All Rights Reserved. │ 2 Onsen UIとは
  3. 3. Copyright © Asial Corporation. All Rights Reserved. │ 3 Onsen UI • Cordovaアプリに最適化 • UIガイドラインに準拠 • ネイティブと遜色ないアニメーション • 豊富なUIパーツ • SPAの構築が容易 簡単に使えてハイパフォーマンスな、HTML5ハイブリッドアプリ 向けのUIフレームワークです。 マテリアルデザイン対応verのOnsen UI 2.0をRC版として公開中
  4. 4. Copyright © Asial Corporation. All Rights Reserved. │ 4 Onsen UIの使い方 独自タグを記述することで、ネイティブライクなUIを簡単に構築 することができます。
  5. 5. Copyright © Asial Corporation. All Rights Reserved. │ 5 Onsen UIが提供するUIパーツ群 マテリアルデザイン(Android) フラットデザイン(iOS) 各コンポーネントの詳細 https://onsen.io/v2/
  6. 6. Copyright © Asial Corporation. All Rights Reserved. │ 6 Onsen UIの対応フレームワーク • jQuery • Angular1 • Vue.js (対応作業中) • Angular2(クラウドIDEは非対応) • React(クラウドIDEは非対応)
  7. 7. Copyright © Asial Corporation. All Rights Reserved. │ 7 WordPressとAPI
  8. 8. Copyright © Asial Corporation. All Rights Reserved. │ 8 WordPress REST API (Version 2) 記事の取得例 /wp-json/wp/v2/posts 結果 JSON形式 WordPressの記事を取得したり投稿や更新などを行えるAPI。 プラグインで追加可能。
  9. 9. Copyright © Asial Corporation. All Rights Reserved. │ 9 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>
  10. 10. Copyright © Asial Corporation. All Rights Reserved. │ 10 アプリの作成
  11. 11. Copyright © Asial Corporation. All Rights Reserved. │ 11 今回作成するアプリ 簡単な記事一覧アプリを作ります。アプリ内で記事詳細を出すことも可能です が面倒なのでWebサイトにジャンプさせます。 ブログ記事一覧 記事へジャンプ
  12. 12. Copyright © Asial Corporation. All Rights Reserved. │ 12 作成手順 1. 開発環境を用意(例えばMonaca) 2. Onsen UI2を組み込む 3. jQuery3を組み込む 4. HTML(index.html)を編集 5. JavaScript(app.js)を記述
  13. 13. Copyright © Asial Corporation. All Rights Reserved. │ 13 新規プロジェクトの作成 Monacaにログインし、ダッシュボードで「新規プロジェクトの作成」ボ タンを選択します。
  14. 14. Copyright © Asial Corporation. All Rights Reserved. │ 14 プロジェクトを作成する Onsen UI V2 JS Minimum を選択
  15. 15. Copyright © Asial Corporation. All Rights Reserved. │ 15 プロジェクトを作成する 名前と説明(任意入力)を設定します • プロジェクト名:WordPress連携アプリwith Onsen UI2
  16. 16. Copyright © Asial Corporation. All Rights Reserved. │ 16 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>
  17. 17. Copyright © Asial Corporation. All Rights Reserved. │ 17 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>
  18. 18. Copyright © Asial Corporation. All Rights Reserved. │ 18 jQuery3を組み込む jQuery3を入手
  19. 19. Copyright © Asial Corporation. All Rights Reserved. │ 19 libフォルダの変更 ダウンロードしたjQuery3をアップロード • ファイル名を『jquery.min.js』に変更
  20. 20. Copyright © Asial Corporation. All Rights Reserved. │ 20 jsフォルダの作成 フォルダを作成 • js
  21. 21. Copyright © Asial Corporation. All Rights Reserved. │ 21 jsフォルダの変更 ファイルを作成 • app.js
  22. 22. Copyright © Asial Corporation. All Rights Reserved. │ 22 記事一覧プログラムの作成 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); });
  23. 23. Copyright © Asial Corporation. All Rights Reserved. │ 23 ブラウザを別途起動する処理(InAppBrowser) js/app.jsに以下のコードを追記します。 /* リンクがクリックされたらInAppBrowserでサイトを開く */ $(document).on('click', 'a', function (event) { event.preventDefault(); window.open(event.target.href,"_system"); });

×