月別: 2018年1月

まとめると

gulpとejsベースでブログコンテンツを再開したものの、更新や記事の管理を考えるとWordPressに勝るものはなく、WordPressをSPAで実装したという話。

EJSベースからWordPressベースへ戻す・・・

昨年(2017年)、サイトをリニューアルした際にブログ機能をWordPressからejsにして０から始めてみたものの、今後記事数が数百などになった場合の管理やリニューアルをした時の記事データのあり方を考えると、
やはりCMSやデータベースで管理したほうがいいと思ったことと、WordPressのREST APIがとても使いやすかったので、年末年始で全記事一覧、記事表示を一旦実装したので、記事にまとめてみました。

現状、jQuery + Backbone + Marionetteベースの仕様なので、一旦それを踏襲してWordPress REST Apiを使った画面表示+設計を実用レベルで落としこむ＆実装、その後、今時の新しい技術で置き換えるをゴールにしようと思い、一旦はjQueryベースで実装しています。

記事一覧トップと各記事はpushStateでアドレスを変更するようにしているものの、実態はSPAのため、記事ページ上でブラウザの更新ボタンを押すor直接アクセスすると404になるという、SPAでよくある事象はApacheのReWriteで解決することにしました。

Marionette + Backboneの実装など

ページへアクセスした際にアプリケーション(Marionette.Application)、コントローラー(Marionette.Controller)、ルーターを起動して、レイアウトの配置をした後に、APIへアクセスして記事データを取得、表示するようにしているのみで、
こちらから記事内容の変更や削除を行えるアクセスはできないようにしています。

APIの設計の都合上、ページ数などをResponse Headerから取得する必要があるため、WordPress本体は同じサブドメイン上に置く必要があり、また、APIへアクセスするとWordPressの実態があるURLも取得可能なため、完全なAPIのみの表示を行おうとするとWordPressのテーマ上でプロセスの追加・変更が必要になると思います。

Apache側でSPAのPushStateしたアドレスを解決

各記事ページのアドレスを「slug」の文字列にしておき、APIへのアクセスと記事ページアドレスを両方、slugにすることで下記のReWrite設定でまかなうことができるようにしています。

RewriteEngine On
RewriteBase /post/
RewriteRule ^index.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^([^/]+)/?$ index.html?$1

その他、今後実装する予定のカテゴリー、タグ、検索結果などの○ページ目などをSEOを考慮して実装する際また大幅に手を加えることになりそうですが、ひとまずはこのままで・・・

今後の課題

現状はGoogle側へ送信しているsitemap.xmlをgulpを使い、ejsをビルドする際に作っているので、それに加え、WordPressのプラグインなどを使って作っているsitemap.xmlをサイトのSPAで実装しているアドレスに置き換えて実装できればSEO面も担保できそう。

表示のレスポンスの速さとアクセスのしやすさを両立したSPAをコーポレートサイトに実装する、そのノウハウを次へ活かしつつ、WordPressのSPA化を視野にサイト構築のバリエーションを増やしていくことでエンジニアリングとデザイン両面で表現の幅を広げていければと考えています。

そして15記事あまりのejsで作った記事ページをWordPress側へコピペする作業を地味に行う必要が・・・

これとは別にNuxt.jsなどを使い、何がどこまでできるか、SEO考慮して普通に実装できるかを試していて、もしうまくいく兆しがあれば、換装していく予定。

WordPressのテーマなどに依存しないサイトデザインや設計をこのサイトで具現化していこうと考えているので、また何か更新した時は記事にしていきます。

何か質問などあれば、問い合わせもしくはSNS経由でコンタクトしてみてください。