自分のブログ用サイトマップ(記事一覧)を作成しようと思いました。
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」を起動できるので、このコントローラーをハンドラーにしようかと考えております。
でわでわ。。。
