質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

解決済

monacaで、Onsen UI V2 JS Splitterスライドメニューのどれかをクリックすると、WP REST APIから取得した記事リストが消えてしまう

yyamag
yyamag

総合スコア0

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

1回答

0評価

0クリップ

2069閲覧

投稿2017/06/27 09:05

monacaを使ってWPの記事をJSONで取得して表示するアプリ開発をしています。

jQueryのバージョンは「jquery-3.2.1.min.js」です。

【index.thml】

html

<!DOCTYPE HTML> <html> <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:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> <script src="components/loader.js"></script> <script src="lib/onsenui/js/onsenui.min.js"></script> <link rel="stylesheet" href="components/loader.css"> <link rel="stylesheet" href="lib/onsenui/css/onsenui.css"> <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css"> <link rel="stylesheet" href="css/style.css"> <script src="lib/jquery.min.js"></script> <script src="js/app.js"></script> <script> ons.ready(function() { console.log("Onsen UI is ready!"); }); window.fn = {}; window.fn.open = function() { var menu = document.getElementById('menu'); menu.open(); }; window.fn.load = function(page) { var content = document.getElementById('content'); var menu = document.getElementById('menu'); content .load(page) .then(menu.close.bind(menu)); }; </script> </head> <body> <ons-splitter> <ons-splitter-side id="menu" side="left" width="220px" collapse swipeable> <ons-page> <ons-list> <ons-list-item onclick="fn.load('list.html')" tappable> Home </ons-list-item> <ons-list-item onclick="fn.load('settings.html')" tappable> settings </ons-list-item> <ons-list-item onclick="fn.load('about.html')" tappable> about </ons-list-item> </ons-list> </ons-page> </ons-splitter-side> <ons-splitter-content id="content" page="list.html"></ons-splitter-content> </ons-splitter> <ons-template id="list.html"> <ons-page id ="listPage"> <ons-toolbar style="background-color:#111;"> <div class="left"> <ons-toolbar-button onclick="fn.open()"> <ons-icon icon="ion-navicon, material:md-menu" style="color:orange;"></ons-icon> </ons-toolbar-button> </div> <div class="center" style="color:#999;"> Home </div> </ons-toolbar> <ons-list > </ons-list> <div id="articles"></div> </ons-page> </ons-template> <ons-template id="settings.html"> <ons-page> <ons-toolbar> <div class="left"> <ons-toolbar-button onclick="fn.open()"> <ons-icon icon="ion-navicon, material:md-menu"></ons-icon> </ons-toolbar-button> </div> <div class="center"> settings </div> </ons-toolbar> <ons-list > </ons-list> <div id="articles2"></div> </ons-page> </ons-template> <ons-template id="about.html"> <ons-page> <ons-toolbar> <div class="left"> <ons-toolbar-button onclick="fn.open()"> <ons-icon icon="ion-navicon, material:md-menu"></ons-icon> </ons-toolbar-button> </div> <div class="center"> about </div> </ons-toolbar> </ons-page> </ons-template> </body> </html>

【app.js】

javascript

// This is a JavaScript file /* WP REST API から記事を取得して表示する */ $.ajax('http://xxxxxxx.com/wp-json/wp/v2/posts?_embed') .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>' + '<div class="sample">' + '<img src="' + json[i]._embedded['wp:featuredmedia'][0].source_url + '" width="100%"><p><a href="' + json[i].link +'">'+ json[i].title.rendered + '</a></p>' + '</div><div style="margin-top:-5px;padding:2px;width:100%;text-align:right;color:#fff;background-color:orange;">update:' + date.getFullYear() + "/" + (date.getMonth() + 1) + "/" + date.getDate() +'</div></ons-row>'; //item.innerHTML = '<ons-row>' + '<a href="' + json[i].link +'">' + json[i].title.rendered+ '</a><img src="' + json[i]._embedded['wp:featuredmedia'][0].source_url + '" style="width:100%;">' + '</ons-row>'; item.setAttribute('data-index' , i); df.appendChild(item); } /*フラグメントを反映*/ document.querySelector('#articles').appendChild(df); }); /* リンクがクリックされたらInAppBrowserでサイトを開く */ $(document).on('click' , 'a' , function (event) { event.preventDefault(); window.open(event.target.href,"_blank"); });

参考にしたスライドはこちらです。
https://www.slideshare.net/AsialCorp/ui-onsen-ui2wordpress

プログラム初心者がスライドを見ながら見よう見まねで作ってみたのですが、
WP REST APIから取得した記事一覧が、アプリ立ち上げ時は表示されるのですが、
スライドメニューのHomeや他のページをクリックして戻ると、
リストが消えて真っ白になってしまいます。(切り替えはできます)

色々調べたのですが、どこが悪いのか分からず…
できれば悪いところを指摘、修正のアドバイスをいただければ幸いです。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。