ウェブパ[web制作・ホームページ制作]

WP Rest APIでSPA|ウェブパは神戸・大阪をはじめ全国対応のWebサイト(ホームページ)制作パックプランです。

電話番号 078-333-9333

に関する画像

線画像
トップ > インフォメーション > BLOG > WP Rest APIでSPA

に関するタイトル画像

線画像

2017.07.14

BLOG

WP Rest APIでSPA

この記事をシェアする

少し、Rest-APIについて気に入ってしまったafiruですが、ちょっとサンプルで絞込から、記事詳細までを表示する、シングルページアプリケーションを作ってみました。

 

シングルページアプリケーション(SPA)とは

その名の通り、1ページだけしかページは存在しません。しかし、ユーザーが記事詳細を見る等の動作をする際に、JavaScriptや非同期で動かすPHP等を利用してページを表示していくまるでアプリを触っているかのようにサイトを閲覧できる機能です。

SPAの何がいいの?

普通のページを見ていると共通部分などのところ(ヘッダー部分・サイドバー部分等)を毎度読み込んでいます。そしてそのたびにサーバーから情報をダウンロードしているといます。

しかし、SPAを利用すると、最初からまとめて必要な画像やスタイルシート(色や位置を整形するファイル)をダウンロードして、その他の詳細や一覧の情報などはそのたびにサーバーとのやり取りを行い、表示するようにするということができるので、ページを閲覧しているユーザーにとってもとても利便性が高いものとなります。

 

WP Rest-APIとのなんの関係が…

と、思うかもしれません。しかし、Rest-APIについて考えてみると、ページが表示した後にサーバーとの通信が発生するようにすることができるのです。つまり、はじめに出しておきたいものは出せるのでサーバーの負荷が軽減されます。更に、PHPなどで作るページはサーバーにアクセするたびにページのデータの取得・集計(計算)・表示(HTMLファイルの出力)となってしまいサーバー側に負担が大きいものとなっていました。しかしRest-APIでは、PHP側の役割は「取得のみ(実際はjsonという文字列で表示しているが…)」となっているため、その後の整形はユーザー側で行うことができるのです。これが私が思うRst APIの最大の魅力だったのです。

 

実際に作ってみる

参考にするコードは、前回の記事

Rest-APIを試そう【続編】

https://web-pack.jp/info/blog/1636/

の記事を参考に作業を進めていきます。

 

作成手順

1.一覧までの取得時に記事の番号を各部分につけておく。

一覧表示のときに各「liタグ」に「data-single_id=記事番号」として番号を与えておきます。

2.一覧表示のリンクをクリックしたら詳細を表示。

表示を行う前に、一覧の部分を一度消します。そして、詳細部分をRest-APIへURLを送信して情報を取得し、ページに表示するように整形していきます。

3.ナビをクリックしたら詳細ページを削除

ナビをクリックするときに記事詳細があると不便ですので、クリックした際に表示している記事詳細を削除します。そうすることで、詳細の表示を繰り返しできるようにしていきます。

 

実際のデモ画面とコード

作成したデモ画面

https://web-pack.jp/demo/sample_app/

あまり変化はしていませんが・・・

実際のgoogleページスピード

実際のコード

edited by:afiru

トップに戻る