フロント側画面デザイン作成

サーバ側WordPress構築

ということで、再度フロント側に戻り、WordPressのデータを参照します。

いやー、あきらめそうになりましたが、かろうじて持ちこたえました。

$http.getの使用

サンプルを探し始めてすぐに見つかったのが、こちら。
Monaca Onsen UI V2 Vue Navigation 上でサーバサイドから取得したjsonが画面に反映されない
この中で使用されているthis.$http.getを使用したいのですが、そのままこの記述を使わせていただくと、
Cannot read property ‘get’ of undefined
となります。このエラーメッセージも分かりにくいですが、ただ、比較的すぐに、this.$httpが参照できていないということが分かります。

では$httpは何なのかというと、これもvue-resoureぽいな、ということが分かり、Axiosにとって代わられそうだということも分かります。

が、これらをどう参照したらよいのかが分からず、苦労しました。

先に結論を書くと、monacaのターミナルで、npm install axiosを叩きます。

Vue.js 単一ファイルコンポーネント

結論にたどり着くまでに時間がかかった一つの理由が、多くのサンプルが、単一ファイルコンポーネントの構成を前提にしていないことです。

未だに理解しきっていませんが、単一ファイルコンポーネントの場合は、srcの中で.vueファイルに記述をしていき、Monacaの場合は、保存すると、Webpackが動いてwwwにファイルが作成される、ということのようです。
ですから、src側に外部ライブラリをセットしなければいけないのでは、と考え、しかし、Monacaで用意されている「JS/CSS コンポーネントの追加と削除」では反映されているように見えないし、と悩みました。

CDNで参照したらどうだろう、なども試しましたがダメでした。
(逆に、CDNで参照する方法は取れないの?という疑問は残ります・・・)

また、Monacaのターミナル機能は最近の追加機能だと思いますが、それまではどうしていたの??という疑問も・・・

とりあえずは先に進めるようにはなりましたが、axoss.getでの参照はSSLでの接続が要求されているので、それをどうするか(接続先のWordPressはGCE上に構築しており、無償範囲での利用にトライしているため)、またアプリがMonacaでJSON取得先がGCEの場合に、クロスドメイン制約に引っかかるだろう、など乗り越えるべき壁はまだまだありそうです・・・

浮気

もうダメだと思って、ちょっと浮気も考えました。クロスプラットフォーム開発の基盤として、まずUnity。
ゲーム以外にでも使えるだろうとは思うのですが、はてさて。。。
次に考えたのはXamarin。iOS用のビルドにMac端末が必要とのことで、もうしばらく様子見。
浮気せずにすんだのは、良かったのかな・・・