Programmers Office

フロント側画面デザイン作成 ↓ サーバ側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端末が必要とのことで、もうしばらく様子見。 浮気せずにすんだのは、良かったのかな・・・   速習webpack 速習シリーズ posted with カエレバ 山田祥寛 WINGSプロジェクト 2018-04-27 関連記事 VSUG DAY 2013 Summer とりあえずxamarinチュートリアル中（初心者の超入門編）

GCPのファイアウォール GCEにインストールしたMariaDBに、その中のWordPressから接続できていますが、ここにプラグイン用のテーブルを追加したり、データをいじったりしたい。 その際に、全てコマンドベースでやるのもつらいし、さらにphpMyAdminをインストールするのもはまりそうな匂いがプンプン。 ということで、ローカルのツールから接続することにします。 まずは、GCPのファイアウォールルール追加です。 場所は、VPCネットワークの中にあります。 設定するのは、上りで、tcp:3306を許可します。 しかし、これだけではつながりません。 リスナー追加 netstat -tlpn を叩くと、 Proto Recv-Q Send-Q Local Address Foreign Address State PID/Program name tcp 0 0 127.0.0.1:3306 0.0.0.0:* LISTEN – と表示されます。 これだと、ローカルからしか接続できないわけです。 これを変更するためには、bind-addressの記述をコメントアウトする、という情報が見つかります。 問題は、この記述がどこにあるかです。 結論としては、 /etc/mysql/mariadb.conf.d/50-server.cnf にありました。 これを修正して、sudo /etc/init.d/mysql restart　すると、 tcp6 0 0 :::3306 :::* LISTEN – となってくれました。 しかし、実はこれでもつながりませんでした。 select user, host from mysql.user;すると +—————+———–+ | user | host | +—————+———–+ | hoge | localhost | | xxxxxxxxxxxxx | localhost |

今回でWordPressインストールまでたどり着こう。 参考は、こちら。 https://qiita.com/yuichiyuichi447/items/4bb3b9dbb69ee5a693cf GCEへのApacheインストール これは sudo apt install apache2 だけ。 ただ、この時点でちゃんと動作を確認すべき・・・ GCEへのPHP7インストール sudo apt install -y php php-mysql libapache2-mod-php ここでも、動作確認すべき。 GCEへのWordpressインストール さらに、こちらを参考。 https://qiita.com/seijikohara/items/f34753b2a783e03d7db4 /etc/apache2/apache2.conf へのWPインストール先追記は、あえて自分のHOME配下に変更。 そして、そのディレクトリを作成しておく。 curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar こちらでは、curlを使用。wgetとはあまり差はないのですかね。趣味の範囲？ wp core download –locale=ja –path=/var/www/html/wordpress –allow-root を叩くときに、apache2.confで指定したパスに変更。 また、wp-config.phpの修正で、AUTH_KEY等はコピペが必要です。 この際、AWS Cloud9でviに張り付ける場合は、右クリックコピーではダメで、必ずCtrl-C Ctrl-Vです。 また、いつも忘れますが、viで複数行削除は、 削除範囲の開始行で「ms」 削除範囲の終了行で「me」 「:’s,’ed」と入力し、Enter です。 さて、これで動くと思いきや、そうは問屋が卸さないのがいつものこと。 まず、手順を二つ参照したために、そもそもWP用のDBを作る作業が抜けていました。 これは CREATE DATABASE xxx DEFAULT CHARACTER SET utf8 COLLATE utf8_unicode_ci; GRANT ALL ON xxx.* TO ‘xxx’@’localhost’; だけしておけばOK。 しかし、wp option get homeを叩くと

さて、環境を定めたら、WordPressをインストールします。 Cloud Launcherではない GCP・WordPressで検索すると、コンソールのCloud Launcherからインストールする方法が多数ヒットすると思います。 確かに、メニューから選択して簡単にインストールできそうです。

この流れは魅力的。 しかし、これは、WordPress用にインスタンスを立ち上げるサービスになります。 そうすると、結局二つ目のインスタンスになってしまい、Always Freeから外れてしまいます。 今回やりたいのは、既存のGCEインスタンスにWPをインストールするということです。 （完全に言葉が間違っていたので追記） GCP（Google Cloud Platform）はGoogleのクラウドの状のサービス諸々ですね。 ですから、GCP・WordPressで検索すれば当然GCP上にWordPressのサービスを立ち上げる方法がヒットするでしょう。 GCE（Google Compute Engine）は、GCPのサービスの中の一つで、IaaS環境を提供してくれているというものです。今やろうとしているのは、そのGCE環境の中にWordPressをインストールする、ということなので、GCE・WordPressで検索すべきです。そうすると、もう少し違う情報も出てきます。 GCEへのMySQLインストール さて、WordPressをインストールするとなると、必要なのがMySQLです。 方法としては、外部に接続する方法も「あり」かとは思います。 元々さくらレンタルサーバに環境作ろうとしたくらいですので、さくらのDBに繋ぎに行ってもよいわけです。 しかし、ここは、怖いもの見たさで、GCE内にMySQLもインストールします。 そして、ここでも、GCPコンソールから「SQL」という魅力的なアイコンが見えます。 これをクリックすると、簡単にMySQLがインストールできそうです。

しかし、これも、データベース用のインスタンス立ち上げサービスです。 あくまでも、既存のインスタンス内にインストールしたいので、これは使用しません。 MariaDB そこで、一番参考になりそうなのがこちら。 https://qiita.com/mekabuko/items/d0ef4492f60e40f84f84 そして、MariaDBという名前が気になりつつ、MySQL入っていないかなと思って、mysqlを叩いてみました。 $ mysql The program ‘mysql’ can be found in the following packages: mysql-client-core-5.7 mariadb-client-core-10.0 Ask your administrator to install one of them 出た、mariadb。MariaDBって何？ 基本情報はググれば分かるとして、最近は利用が伸びていて、PL/SQLに対応し始めた、というのが趣深いですね。 ということで、Mariaをインストールすることにします。 上記では、yumでインストールしていますが、こちらの環境はUbuntuなので、sudo apt-get install mariadb-server。 インストール成功しましたが、こちらと同じ状態になっています。 https://jyn.jp/ubuntu-16-04-mariadb-password-bug/ 書いていただいている対応により、接続できるようになりました。  いったん休憩にします。

画面デザインはそれっぽくなってきたので、いったんバックエンドに入ろうと思います。 そして、最初の宣言（Monacaでハイブリッドモバイルアプリ開発）通り、AWS Cloud9＋さくらレンタルサーバで作ろうと思いました。 が、結論としては、諦めました。以下、できる方法をお探しの方には、あまりお役に立てません。 さくらレンタルサーバへのSSH公開鍵接続 これに関しては、割と情報はそろっていると思います。肝は、各フォルダへのパーミッション設定のようです。 今回、これに成功したかは不明です。

この画面で「AWS Cloud9 couldn’t connect to SSH server」エラーが出続けました。 このメッセージからはSSHでの接続に失敗しているのではと思い、ずっと調べていました。 こちらの情報は良いと思いました。 https://qiita.com/fukusuke/items/6eb9f8593a296a95798c しかし、これはさくらレンタルサーバでは、root権限がなく、自分のHOME配下外のファイルの参照も厳しいです。 で、ふと思いました。Cloud9はNode.jsが必須だったと。それが原因でこのメッセージなのではないか。 さくらレンタルサーバへのNode.jsインストールは不可 ということで、Node.jsインストールを試みますが、これまた、いろいろ情報がありつつも、難しいという結果。 gmakeで失敗したのは、 logging.cc:(.text._ZN2v84base13DumpBacktraceEv+0x24): undefined reference to backtrace’ logging.cc:(.text._ZN2v84base13DumpBacktraceEv+0x31): undefined reference to backtrace_symbols’ というものですが、最終的には、そもそもインストール禁止だということで納得しました。 そもそも、レンタルサーバは複数のユーザが同じサーバーを共有するのであり、他の利用者に迷惑をかけるような利用は不可です。 正直、レンタルサーバというものを、ちゃんとイメージできていなかったのですが、今回 ls /homeをしてそういうことか、と理解しました。 そうであれば、下記のような禁止事項も納得です。 https://www.sakura.ne.jp/terms.html ・・・daemonとしてサーバーに常駐するプログラムの実行 ということで、さくらへの接続は止めて、今回もGCPで開発環境を構築することにしました。 AWS Cloud9からGCE（Google Compute Engine）への二つ目の接続 さて、すでに開発環境を作ってあるGCP（Google Cloud Platform）のGCE（Google Compute Engine）ですが、せっかくなので、別の環境を作ろうと思いました。 バイブルは、こちら。 https://qiita.com/j-un/items/f5d72d21f67d384d3c84 プロジェクトとして今回用のプロジェクトを作り、インスタンスを作ろうとします。 で、設定を選んでいくと、料金表示がされます。・・・料金。 無料で利用できるということでGCPを選んでいるので、無料の条件を再確認すると、 https://cloud.google.com/free/ 1 f1-micro インスタンス（1 か月あたり、米国リージョンのみ）です。 ということで、既存のインスタンスに接続することにします。 初回作成時に失敗したと思いましたが、Cloud9環境を作るディレクトリは指定できます。 前回は自分のHOMEを指定する形になってしまいましたが、今回は、その下にディレクトリを作って、そちらを指定しました。 ということで、ようやく、バックエンド側開発に入ります。

まず、Monacaで画面デザインを作っています。 新規プロジェクトでは、「Onsen UI V2 Vue Tabbar」を選択します。

しかし、各種サンプルを見ながらなんとかなるかなと思いいつつ、なかなかしんどいですね。 この構成の場合、何かを調べようと思ったら、Monacaという基盤の話なのか、Onsen UIというデザインフレームワークの話なのか、Vueという画面制御フレームワークの話なのか、を切り分けながらそれぞれのマニュアルなり、情報なりを調べる必要があるわけです。 で、いきなり、はまったのが、画面上部のツールバーに画像を表示したいな、と。 そこで考えるべきは、画像をどこに置くのか、どういうパスを書けば参照してくれるのか、普通にimgタグを使うべきなのか、他に作法があるのか、等ですが、それぞれの守備範囲がいまいち理解できずに、調べようがないなと思うわけです。 結論としては、サンプルとして公開されているポケモンアプリ（https://docs.monaca.io/ja/sampleapp/samples/）で、画像の置き場はsrc/publicか、と理解し、あとはimgタグでやってみて、うまくいっているからよいか、みたいな感じです。 もう一つの例としては、画面を黒系統にしたいなと思い、Onsen UIのテーマローラー（https://onsen.io/theme-roller/）というのでDark themeといのがあるのが分かったのですが、それの適用方法が分からない。見てるとテーマローラーで生成したファイル群をダウンロードして、配置して、という方法が出てきますが、細かくカスタマイズしたいならそうかもしれませんが、単にテーマを適用したいだけなんだよ、ということでもう少し調べると、onsen-css-components.cssをonsen-css-components-dark-theme.cssに書き換えればよい、という情報が見つかります。 これはどこに書いてあるのだ、というところから始まりますが、それは検索して、今回の構成の場合はmain.jsに書いてあることが分かります。cssの読み込みをjsでやる、というところで既に古い頭にはつらいのですが、そういうものです。 ところが、このように書き換えてみても反映されない。むむ、と思い、もう少し調べると、dark-onsen-css-components.cssだよ、という情報が見つかり、これでOK。 しかし、なかなか辿り着かないよ、と思いつつ、やっていくうちに馴染むだろうと思い込んで、先に進みます。 React、Angular、Vue.js、React Nativeを使って学ぶ はじめてのフロントエンド開発 原 一浩,taisa,小松 大輔,永井 孝,池内 孝啓,新井 正貴,橋本 安司,日野 洋一郎 技術評論社 2018-05-09 <div class="kaerebalink-salesranking" style="margin-bottom: 5px;"> 売り上げランキング : 8419 </div> <table style="border: currentcolor; margin-top: 10px;"> <tr> <td style="border: currentcolor; text-align: left;"> </td> <td style="border: currentcolor; padding-left: 10px; font-size: x-small; vertical-align: bottom;"> by <a href="https://kaereba.

Monaca再開 今回、とあるアプリを作ろうと思い立ち、以前ちょっと遊んでいたMonacaを改めて使ってみたいと思います。 その間色々進歩していると思うので、割と一から勉強の部分も多々ありますが、地道に。 作ろうとしているものの構成は下記の通り。 システム構成 フロントエンド Monaca Onsen UI V2 Vue Navigation https://press.monaca.io/atsushi/2533 Vueを使ってみたいと思ってはいたのですが、この記事に後押しされました。 あまり複雑な画面にはならないと思いますが、その分遊べるところは遊ぼうという感じ。 バックエンド WordPress（REST API） 依然作ったWebアプリは、WordPressの豊富なテンプレートを生かしたこ洒落たUIにしたいという目的で、WordPressのプラグインという形でアプリを作りました。 ところが、WordPressプラグインをゴリゴリ書いていると、UI側のメリットよりも、開発フレームワークとして使いやすいと思うようになりました。 その意味で、WordPressを使い、ユーザ管理、コンテンツ管理、データIOを行って、フロントエンドにはREST APIで返す、という方法をとってみたいと思います。 プラグインの作成 – WordPress Codex 日本語版 開発環境 Cloud9＋さくらレンタルサーバ 並行して行っている、Code4Startupの開発環境は、Cloud9＋GCE（Google Compute Engine）ですが、ちょっと環境構築がしんどかった https://www.programmers-office.ml/2018/05/03/code4startup-%ef%bd%9e-ubereats%e3%82%92%e4%bd%9c%e3%82%8d%e3%81%86-%ef%bd%9e-python-django%e7%92%b0%e5%a2%83/ ので、今回は、せっかく契約していることもあり、さくらレンタルサーバを使いたいと思います。 バックエンドのWordPressもさくらに立てるので、開発ソースと運用環境が両方さくらにあることのメリットが何かあるかも、探ってみたいと思います。 というわけで、今後に乞うご期待！

Code4Startup Task 8、9の辺りは、ひたすらページ作成のコーディングをしていきます。 こういうドリル的なこと：写経も必要。 すんなりいかないところとして、 modelの作成で restaurant = models.ForeignKey(Restaurant, on_delete=models.CASCADE) 講義の中では、on_deleteは記載していませんが、必要と怒られます。 offsetの書き方は注意 https://www.programmers-office.ml/2018/04/03/code4startup-%ef%bd%9e-landing-page%e3%82%92%e4%bd%9c%e3%82%8d%e3%81%86/ Code4Startup シェアリング・エコノミー　―Uber、Airbnbが変えた世界 宮崎 康二 日本経済新聞出版社 2015-07-23 売り上げランキング : 88013 by カエレバ

以前もstaticの読み込みがうまくいっていなかったのですが、settings.pyを終始して戻して保存したら、style.cssを読んでくれたようです。まだ、完全に同じ見た目にはなっていませんが。もやもや・・・ Bootstrap4 講義はBootstrap3ベースになっていますが、最新のBootstrap4を使おうとすると、色々調べながら進める必要があります。 まず、jquery等の読み込みですが、講義で参照しているbasic templateは使用できないので、Introductionを見ると、そこにStarter templateがあります。 必要なJS読み込みは となっています。 さらに、django-bootstrap3をインストールしていますが、ここはpip install django-bootstrap4にします。 シェアリング・エコノミー　―Uber、Airbnbが変えた世界 宮崎 康二 日本経済新聞出版社 2015-07-23 売り上げランキング : 28003 by カエレバ

Code4Startup 以前もstaticの読み込みがうまくいっていなかったのですが、settings.pyを終始して戻して保存したら、style.cssを読んでくれたようです。まだ、完全に同じ見た目にはなっていませんが。もやもや・・・ Bootstrap4 講義はBootstrap3ベースになっていますが、最新のBootstrap4を使おうとすると、色々調べながら進める必要があります。 まず、jquery等の読み込みですが、講義で参照しているbasic templateは使用できないので、Introductionを見ると、そこにStarter templateがあります。 必要なJS読み込みは となっています。 さらに、django-bootstrap3をインストールしていますが、ここはpip install django-bootstrap4にします。 スタイルの読み込みがちゃんとできていないので見た目はもやもやしますが、とりあえず進めます。 Code4Startup シェアリング・エコノミー　―Uber、Airbnbが変えた世界 宮崎 康二 日本経済新聞出版社 2015-07-23 売り上げランキング : 28003 by カエレバ