AngularJS + PHP 〜WordPressと連携する〜

自分のブログ用サイトマップ(記事一覧)を作成しようと思いました。

WordPress連携

AngularJSとWordPress(WP)を連携する方法としてJSONでのデータ通信を使用します。世間ではRESTFullなんて言葉を使うようですが、ちょっと調べてみるとJSONでデータ通信を行うという解釈がされていることが多いようで。。。
まぁ言葉の意味は動的なことが多いので(特にIT業界)細かいところは気にしません。
ちなみにちゃんとした意味はウィキペディアを見た方が良いと思います。早い話が、１つのアーキテクチャスタイルなんですね(笑)。つまり「通信方法」のことではないということです。

何をやるのか？

WordPress(ブログシステム(CMS))に登録されている記事(POST)を一覧する機能をAngularJSで実装します。
通常はWordPressのAPI(WordPressテンプレート)を使用してXXX.phpで作成するのがスタンダードなやり方です。
理由は、WordPressがPHPで作成されているのでPHPで一覧ページを作成した方がテクノロジー的なギャップがないためです。

AngularJSを使う

このフレームワークを使用するのはWordPressだけでなく他のテクノロジーも使用したいためです。
具体的にはGoogleMapsAPI(JavascriptAPI)があります。今後Javaサーバーなどと通信したいときにもシンプルなHTMLファイルで実装しておけば改修は難しくありません。→HTML(+JS)とJavaはセットで使用することが多いです。
余談ですが、JSFというフレームワークがあり、これはJavaでJSを生成してくれるものです。つまりはJSで実装していた部分をJavaで実装ができるものです(JS自体も使用可能です)。

AngularJSの良いところ

HTML+JSでクライアントサイドを１つのアプリケーションとして作成できるところが良いところです。
具体的にサーバー側との通信部分をAjax通信(非同期通信)で行うための部品があるので簡単に実装できます(自分でXMLHttpの実装を行わなくて良い)。
つまるところは、サーバーとの通信時はリクエスト送信とレスポンスの受信方法を統一(JSONを使用する)してやればPHPだろうが、Javaだろうが関係ないということです。

設計を行う

具体的にAngularJSでの画面実装とサーバー(WordPress)とのやりとりを実現するのにどのようにやるか？この部分を考えます。

現状としては、画面のデザイン部分に関してはテンプレートを使用するつもりです。というか下のようなイメージです。

このテンプレートを自分の表示したいようにカスタムして実装を行います。とりあえずは下のような感じでいじりました(カスタムしました)。

ポイントとしては以下の機能が欲しかったので余計な部分を削除して、必要な部分を追加しました。

横スクロール型のメニューバー
選択したメニューによりそれに対応する表示を行うView(画面)

もともとテンプレートにあった、サイドバーなどは削除しました。

AngularJSの処理

現段階での実装(プロトタイプ実装)では下のような構成で処理を行っています。コードはGithubにあります。

index.htmlで以下の順序でJSを読み込む
⑴.「./project/dataConst.js」
⑵.「./project/config.js」
⑶.「./project/pgbox.js」
「navigator.language」でアクセスした人のロケールを取得(現状はjaで固定)
angularJSモジュール「pgBoxAG」をルーティグモジュール付きで作成する。
navController(空実装)を作成する
PageDataFactory(共通で使用するデータを保持する)を作成する
ルーティングモジュールの設定(URLと表示HTMLのバインド)
サンプルで作成したParisとLondonのコントローラー作成
初期表示処理として、「$scope.pageTitle」に"Site Map"を設定
#!/pgboxにリダイレクト、pgboxCtrlを起動する

という形で実装しています。

問題

現状では、画面のヘッダーメニュー部分(横スクロール型のメニュー)にアクセスすることができない(Controllerが別になっているので。。。)
カテゴリの一覧を表示したいが、表示する見た目が決まっていない

大雑把にこんな問題があります。そそくさと解決できそうなのは「ヘッダーメニュー部分にアクセスできない」の部分です。
これはpageTitleが"Site Map"の時には。。。という条件を入れてやれば初期表示時以外でも「pgboxCtrl」を起動できるので、このコントローラーをハンドラーにしようかと考えております。

でわでわ。。。

WordPress テスト実装〜heade-test.phpを表示〜

ヘッダー部分のphpをテストします。前提としては以下のようなところです。

header.phpをコピーしてheader-test.phpを作成済み
index.phpを以下のように修正
get_header(); → get_header('test');

そしてheader-test.phpの一番下の部分を下のように修正
<div id="content" class="site-content">テストのように修正しました。
なので表示したヘッダー部分に「テスト」という文字が表示されるはずです。

なんとか表示されました。確認のためにget_headerの部分も元に戻しget_header()表示して見ます。

確認よし！

横スクロールメニュー実装

上のようなメニューを作成したいと思っています。
ここに、カテゴリのリストを表示するのが今回の目標です。

早速、BootStrapを使用するのでそれをstyle.cssにインポートします。

/*--- Add 2019-12-30 --*/
@charset 'utf-8';
@import url('https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js');
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js');

これをstyle.cssのはじめの部分(48行目)に追加しました。

フォントが少し小さくなりましたが、そんな影響しないであろうと思いそのままにしています。

さらに、横スクロールを追加して見たものの。。。
PC版での表示はよし！

スマホ版での表示はアウトー！

CSSを細々といじるのはよろしくないので、というか嫌いなので他の方法を考えます。

でわでわ。。。

MAMP WordPress 〜インポート時のエラー対処〜

WordPressを起動したら、現在実行しているWordPress(レンタルサーバー上)の状態と同じような状態にします。(記事や設定など)

MAMPのインストールとWordPressのインストールと起動確認を行ったので、PHP開発の準備を進めていこうと思います。
WordPress自体は起動できたので、

インポートの実行

記事などのインポートを行おうと思います。単純にWordPressのダッシュボードから「ツール→エクスポート」を選択して「pg.WordPress.2019-12-30.xml」というファイルをダウンロードしました。

そして、ローカル(自分のPC)で実行しているWordPressへとインポートを行おうとしたときにエラーが出ました。

エラーの文言は以下のようなものでした。

ファイルが空のようです。中身のあるファイルをアップロードしてください。このエラーは php.ini ファイルでアップロードができない設定になっているか、post_max_size が upload_max_filesize よりも小さく設定されているために発生している可能性もあります。

早い話が、「php.iniの設定が不適切です」ということなので、以下のようなところを確認します。

MAMPの「Open Web Start Page」の部分をクリックします。
PHPの情報を見ます。
下のような画面があるので「post_max_size 」「upload_max_filesize 」の文言で検索して値を確認します。そして、「post_max_size 」 < 「upload_max_filesize 」の状態なのでエラーが出る

早い話が、post_max_sizeのサイズがアップロードしたファイルよりも大きければ問題なし！ということです。

php.iniを編集

上のphpInfoのページを「Loaded Configuration File」で検索します。

そして、記載には「/Applications/MAMP/bin/php/php7.3.8/conf/php.ini」とあるので、編集したいファイルはここにあるということです。

そして、一度サーバーを停止して編集します。
自分はテキストエディタとしてATOMを使用しているので下のような画面になります。
」
間違って「108M」に編集しました。本当は「10M」に編集する必要があります。
今回は自分がダウンロードしたファイルが9M(メガ)なので上の値にしました。

サーバーを再起動

上の手順を踏んだ後に修正したものを確認します。
phpInfoを見ます、上に表示する手順を記載しています。

そして、再度インポートを行います。

今回はエラーなく行ったようです。

下のように設定してインポートしました。

エラーが出ました、これは画像ファイルのインポートに失敗ということです。
まぁ、イメージはよしとします。記事の一覧は表示できたので。。。

テスト開発の開始

これは次回やります。。。

でわでわ。。。

MAMP 起動設定〜WordPressのテスト環境を作る〜

MAMP(HttpServer)を使用して自分のPC上にWordPressのテスト環境を作成します。
つまり、レンタルサーバーでなく、ローカル(自分のPC)で好きなだけ、バグを出しても自分のレンタルサーバーに影響なし！

というわけです。

余計な音が入っていますが、MAMPを起動して見ました。
すでにインストールしてあるので、ダウンロードできるサーバーまで移動、インストールしたMAMPを起動といった感じで動かしました。

WordPressのダウンロード

こちらのサイトからダウンロードできます。(WPのサイト、英語です)

MAMPのインストール

これに関しては前回やったのでその記事を参照してください。
そして、ダウンロードやドキュメント関連はこちらのサイトにありました。

セットアップに関してはこちらのサイトを和訳して見ました。

MAMP起動

インストールした後に、MAMPを起動します。MACなのでAppフォルダにあるMAMPを起動するためには、そのアプリのフォルダを開くと下のようになっていますので。

MAMPを起動します。他のサイトにあるように起動した画面に「設定」があれば良いのですが、今回ダウンロードしたアプリにはありませんでした。
なのでちょいと探しましたら、下のような場所にありました。

ドキュメントルート

HTTPサーバーを起動した後に、HTMLを配置したりしてアクセスがあったときに表示できるようにしますが。。。

どこに配置するのか？

この答えは「ドキュメントルートに配置」です。
具体的には「ドメイン」と呼ばれる部分を抜かした「/」に当たるディレクトリがドキュメントルートになります。
例：ここのサイト場合
ドメイン：zenryokuservice.com
ドキュメントルート：zenryokuservice.com/
初期表示画面(未実装です。。。)zenryokuservice.com/index.html

こんな感じです。そして、アプリの設定は

真ん中にある「Document Root」の「Select」部分をクリックします。