【オープンソース】WordPressでSPAをつくる「Ionic-WP.com」を公開しました

こんにちは、榊原です。
WordPressでSPAをつくる”Ionic-WP.com”を公開したので、それについての簡単なご紹介ブログです。利用してブログとか書いていただいたら喜びます!

どんなもの?

WordPressのREST APIを通してデータを取得してきて表示するSPA(Single Page Application)テーマです。

デモ https://demo-ionic-wpcom.netlify.com
(ちなみに https://rdlabo.jp のデータを取得してきています)

SPAはGoogleが推進している「ウェブのアプリ化」のための技術です(詳しくはこちらをご覧ください)。
SPAによって大きくUXを向上することができるといわれているのですが、どこから手をつけたらいいかわからないとよく聞くので、簡単にconfigファイルをいじるだけで自分のWordPressをSPAで表示することができるようにテーマ化、というかオープンソースとしてつくりました。

ダウンロードしてきて、デモサイトのconfigファイルを変更すると、たとえばhttps://gohan52.wordpress.com/ で公開されているブログが

SPAでも公開することができます!

なお、WordPress.comで公開されているものはすべてREST APIで取得することができますが著作権的にNGですので、公開時には必ず許可をとるか自分のWordPressをお使いいただきますようお願い申し上げます。なお、GitHubに書きましたが、インストールしてるWordPress(org)も設定することで取得してくることができます。

GitHub rdlabo/ionic-wpcomで使い方ふくめて公開していますので、簡単にはじめることができます。ぜひお試しください。

どれぐらいちゃんとSPAしてるの?

LighthouseというGoogleがだしているウェブアプリ監査ツール(Chrome拡張)があるのですが、画像をいろいろ引っ張ってきてるトップページでも以下の点数がとれましたのでちゃんとSPAしてると思います。

なお、現在は、ServiceWorkerをコメントアウトしていますので、検証する方はsrc/index.htmlのコメントアウトを外してください(オフライン対応をするとキャッシュが強くなり開発しにくくなるためです。

何がお得なの?

これでつくったものは、Webでの公開はもちろんのこと、iTunes Store、Google Playで、iPhoneアプリ / Androidアプリとして配信可能です。
今まではWebはHTML5でつくり、スマホアプリはまた別言語でつくっていましたが、これからはすべてのアプリをHTML5のソースコード1本でつくることができるのです!(iPhoneアプリなどのビルドをする方は Ionic Frameworkのドキュメントをご覧ください)

保守はどうするの?

気が向くまではやりますが、オープンソースですのでプルリクください。
あと、基盤につかっているIonic Frameworkは、日本語コミュニティとしてslackのオープンちゃんねるを用意しておりますのでこちらもあわせてご利用いただけましたら幸いです。

それでは、また。

お問い合わせ