Submit Search
Upload
WordPress REST API とリアクティブプログラミング
•
5 likes
•
2,185 views
Hiromasa Tanaka
Follow
WordPress REST API とリアクティブプログラミング - Sacss Special 08
Read less
Read more
Engineering
Report
Share
Report
Share
1 of 44
Download now
Download to read offline
Recommended
WordPress REST API と Vue.js を使ったフロントエンド開発
WordPress REST API と Vue.js を使ったフロントエンド開発
Hiromasa Tanaka
ソースファイル https://github.com/h1romas4/wp-vuejs-sample オープンソースカンファレンス 2017 北海道「WordPress REST API と Vue.js を使ったフロントエンド開発」セミナースライド
OSC北海道 2016 REST API を活用した、新しい WordPress サイト製作手法
OSC北海道 2016 REST API を活用した、新しい WordPress サイト製作手法
Hiromasa Tanaka
OSC北海道 2016 REST API を活用した、新しい WordPress サイト製作手法のスライドです。
AWS+WordPressでつくるFirefoxアプリ
AWS+WordPressでつくるFirefoxアプリ
Takayuki Miyauchi
若干説明が不十分なので近日中にフォローアップ記事を書きます。
WordPress JSON REST API 〜さらばPHP、さらばWordPressテーマ
WordPress JSON REST API 〜さらばPHP、さらばWordPressテーマ
Kazue Igarashi
CMSどうでしょう〜MT・WP対決列島〜 仙台編で話した「WordPress JSON REST API 〜さらばPHP、さらばWordPressテーマ」のスライド
WebAPIのこれまでとこれから
WebAPIのこれまでとこれから
Yohei Yamamoto
2014-07-11 API Meetup #1 http://api-meetup.doorkeeper.jp/events/12768
WP-APIを使ってみよう&No PHPテーマという考え方
WP-APIを使ってみよう&No PHPテーマという考え方
Hidetaka Okamoto
WordBench奈良 2015年6月資料
JAWS FESTA Tohoku 2014 WordPressとAWSの素敵な関係
JAWS FESTA Tohoku 2014 WordPressとAWSの素敵な関係
Kazue Igarashi
JAWS FESTA Tohoku 2014でセッションした「WordPressとAWSの素敵な関係」のスライド
ASP.NET シングル ページ アプリケーション (SPA) 詳説
ASP.NET シングル ページ アプリケーション (SPA) 詳説
Akira Inoue
Recommended
WordPress REST API と Vue.js を使ったフロントエンド開発
WordPress REST API と Vue.js を使ったフロントエンド開発
Hiromasa Tanaka
ソースファイル https://github.com/h1romas4/wp-vuejs-sample オープンソースカンファレンス 2017 北海道「WordPress REST API と Vue.js を使ったフロントエンド開発」セミナースライド
OSC北海道 2016 REST API を活用した、新しい WordPress サイト製作手法
OSC北海道 2016 REST API を活用した、新しい WordPress サイト製作手法
Hiromasa Tanaka
OSC北海道 2016 REST API を活用した、新しい WordPress サイト製作手法のスライドです。
AWS+WordPressでつくるFirefoxアプリ
AWS+WordPressでつくるFirefoxアプリ
Takayuki Miyauchi
若干説明が不十分なので近日中にフォローアップ記事を書きます。
WordPress JSON REST API 〜さらばPHP、さらばWordPressテーマ
WordPress JSON REST API 〜さらばPHP、さらばWordPressテーマ
Kazue Igarashi
CMSどうでしょう〜MT・WP対決列島〜 仙台編で話した「WordPress JSON REST API 〜さらばPHP、さらばWordPressテーマ」のスライド
WebAPIのこれまでとこれから
WebAPIのこれまでとこれから
Yohei Yamamoto
2014-07-11 API Meetup #1 http://api-meetup.doorkeeper.jp/events/12768
WP-APIを使ってみよう&No PHPテーマという考え方
WP-APIを使ってみよう&No PHPテーマという考え方
Hidetaka Okamoto
WordBench奈良 2015年6月資料
JAWS FESTA Tohoku 2014 WordPressとAWSの素敵な関係
JAWS FESTA Tohoku 2014 WordPressとAWSの素敵な関係
Kazue Igarashi
JAWS FESTA Tohoku 2014でセッションした「WordPressとAWSの素敵な関係」のスライド
ASP.NET シングル ページ アプリケーション (SPA) 詳説
ASP.NET シングル ページ アプリケーション (SPA) 詳説
Akira Inoue
JAWSUG Kansai Simple Workflow Service (SWF)
JAWSUG Kansai Simple Workflow Service (SWF)
Takuro Sasaki
AWSのAmazon Simple Workflow Service(SWF)の説明です。AWSのサービスの中で、1,2を争う難解なサービスですが、凄いサービスです。
CloudSearchによる全文検索 - CM:道 2014/08/01
CloudSearchによる全文検索 - CM:道 2014/08/01
Shuji Watanabe
Classmethod主催 Developersui Meetup CM:道での発表資料。
「WordPress初心者講座」(2018.3.25) 講義資料01
「WordPress初心者講座」(2018.3.25) 講義資料01
Akihiro Moriyama
2018年3月25日開催「WordPress初心者講座」(主催 UX Yokohama) の講義資料です。ページ数が多いため資料01から資料05まで5分割してSlideShareに投稿しています。WordPress 4.x の基本的な操作方法をハンズオン形式で解説する内容です。残念ながらWordPress 5.x (Gutenberg) の登場により講義後半の内容が無意味になってしまいました。 資料01 https://www.slideshare.net/akihiromoriyamaureka/wordpress2018325-01 資料02 https://www.slideshare.net/akihiromoriyamaureka/wordpress2018325-02 資料03 https://www.slideshare.net/akihiromoriyamaureka/wordpress2018325-03 資料04 https://www.slideshare.net/akihiromoriyamaureka/wordpress2018325-04 資料05 https://www.slideshare.net/akihiromoriyamaureka/wordpress2018325-05
WordCamp Tokyo2016itkaasan
WordCamp Tokyo2016itkaasan
松田 千尋
WordCamp Tokyo2016のスライドです。WP RestAPIとjQueryで作るアプリ開発についての話をしました
20150207 amazon elasticache
20150207 amazon elasticache
Daiki Mori
2015/02/07 JAWS-KANSAI FullManaged - Amazon ElastiCache -
PHPerだってMicroservicesしたい!
PHPerだってMicroservicesしたい!
Shinichi Takahashi
at phpconf Tokyo 2016
RESTful #とは RailsスタイルからRESTを学ぼう
RESTful #とは RailsスタイルからRESTを学ぼう
Toru Kawamura
RESTful#とは勉強会 http://rubychildren.doorkeeper.jp/events/15974
DevLove Kansai AWS
DevLove Kansai AWS
Takuro Sasaki
クラウドファーストからクラウドネイティブへ。 クラウドの進化がシステムのアーキテクチャを根底から変えようとしています。それに伴い、エンジニアに求められる役割も変化しつつあります。2tierアーキテクチャなどを紹介しつつ、今注目していることについて話していこうと思います。
はじめてのBluemixでシングルサインオン ~ 希望編!
はじめてのBluemixでシングルサインオン ~ 希望編!
Kazumi IWANAGA
はじめてのBluemixでシングルサインオン ~ 雲間を越えて、つなげたい『希望編!』
JAWSUG Osaka S3 CloudSearch
JAWSUG Osaka S3 CloudSearch
Takuro Sasaki
S3とCloudSearchの説明
はじめてのAWS Lambda
はじめてのAWS Lambda
Masaki Misawa
2017/02/02 D-Cube 勉強会用のスライドです。
2016/05/01 Visual Studio with Cordova
2016/05/01 Visual Studio with Cordova
miso- soup3
2016/05/01 Visual Studio with Cordova クロスプラットフォーム開発
ビズリーチの新サービスをScalaで作ってみた 〜マイクロサービスの裏側 #jissenscala
ビズリーチの新サービスをScalaで作ってみた 〜マイクロサービスの裏側 #jissenscala
takezoe
実戦での Scala 〜 6つの事例から知る Scala の勘所〜 https://jissenscala.doorkeeper.jp/events/19660 で発表したスライドです。
5分で分かるmonaca pressproject(草案)
5分で分かるmonaca pressproject(草案)
Yuki Okamoto
REST 入門
REST 入門
Yohei Yamamoto
Kinesis Firehoseを使ってみた
Kinesis Firehoseを使ってみた
Masaki Misawa
2017/09/21 D-Cube 勉強会用のスライドです。
MongoDBの監視
MongoDBの監視
Tetsutaro Watanabe
・MongoDBで何を監視すべきか ・MongoDBのコマンド・メソッドによる監視 ・運用監視ツールとの連携して監視 ・MMS(MongoDB Monitoring Service)で監視
Service worker が拓く mobile web の新しいかたち
Service worker が拓く mobile web の新しいかたち
Kinuko Yasuda
Service worker が拓く mobile web の新しいかたち
JSON Schema で Web API のスキマを埋めよう
JSON Schema で Web API のスキマを埋めよう
VOYAGE GROUP
Scraping withawsAWSを利用してスクレイピングの悩みを解決するチップス
Scraping withawsAWSを利用してスクレイピングの悩みを解決するチップス
Takuro Sasaki
AWSを利用してスクレイピングの悩みを解決するチップス クローラー/スクレイピングにAWSを利用しようという話
2 TomcatによるWebアプリケーションサーバ構築 第1章 Tomcatのインストールと設定
2 TomcatによるWebアプリケーションサーバ構築 第1章 Tomcatのインストールと設定
Enpel
JAX-RS(LT)
JAX-RS(LT)
winplus
4月7日 関西Javaエンジニアの会(関ジャバ) ’10 4月度にいってきた。LTで「JAX-RS」と銘打って話亜した。中身は『Webを支える技術 -HTTP、URI、HTML、そしてREST』の宣伝。
More Related Content
What's hot
JAWSUG Kansai Simple Workflow Service (SWF)
JAWSUG Kansai Simple Workflow Service (SWF)
Takuro Sasaki
AWSのAmazon Simple Workflow Service(SWF)の説明です。AWSのサービスの中で、1,2を争う難解なサービスですが、凄いサービスです。
CloudSearchによる全文検索 - CM:道 2014/08/01
CloudSearchによる全文検索 - CM:道 2014/08/01
Shuji Watanabe
Classmethod主催 Developersui Meetup CM:道での発表資料。
「WordPress初心者講座」(2018.3.25) 講義資料01
「WordPress初心者講座」(2018.3.25) 講義資料01
Akihiro Moriyama
2018年3月25日開催「WordPress初心者講座」(主催 UX Yokohama) の講義資料です。ページ数が多いため資料01から資料05まで5分割してSlideShareに投稿しています。WordPress 4.x の基本的な操作方法をハンズオン形式で解説する内容です。残念ながらWordPress 5.x (Gutenberg) の登場により講義後半の内容が無意味になってしまいました。 資料01 https://www.slideshare.net/akihiromoriyamaureka/wordpress2018325-01 資料02 https://www.slideshare.net/akihiromoriyamaureka/wordpress2018325-02 資料03 https://www.slideshare.net/akihiromoriyamaureka/wordpress2018325-03 資料04 https://www.slideshare.net/akihiromoriyamaureka/wordpress2018325-04 資料05 https://www.slideshare.net/akihiromoriyamaureka/wordpress2018325-05
WordCamp Tokyo2016itkaasan
WordCamp Tokyo2016itkaasan
松田 千尋
WordCamp Tokyo2016のスライドです。WP RestAPIとjQueryで作るアプリ開発についての話をしました
20150207 amazon elasticache
20150207 amazon elasticache
Daiki Mori
2015/02/07 JAWS-KANSAI FullManaged - Amazon ElastiCache -
PHPerだってMicroservicesしたい!
PHPerだってMicroservicesしたい!
Shinichi Takahashi
at phpconf Tokyo 2016
RESTful #とは RailsスタイルからRESTを学ぼう
RESTful #とは RailsスタイルからRESTを学ぼう
Toru Kawamura
RESTful#とは勉強会 http://rubychildren.doorkeeper.jp/events/15974
DevLove Kansai AWS
DevLove Kansai AWS
Takuro Sasaki
クラウドファーストからクラウドネイティブへ。 クラウドの進化がシステムのアーキテクチャを根底から変えようとしています。それに伴い、エンジニアに求められる役割も変化しつつあります。2tierアーキテクチャなどを紹介しつつ、今注目していることについて話していこうと思います。
はじめてのBluemixでシングルサインオン ~ 希望編!
はじめてのBluemixでシングルサインオン ~ 希望編!
Kazumi IWANAGA
はじめてのBluemixでシングルサインオン ~ 雲間を越えて、つなげたい『希望編!』
JAWSUG Osaka S3 CloudSearch
JAWSUG Osaka S3 CloudSearch
Takuro Sasaki
S3とCloudSearchの説明
はじめてのAWS Lambda
はじめてのAWS Lambda
Masaki Misawa
2017/02/02 D-Cube 勉強会用のスライドです。
2016/05/01 Visual Studio with Cordova
2016/05/01 Visual Studio with Cordova
miso- soup3
2016/05/01 Visual Studio with Cordova クロスプラットフォーム開発
ビズリーチの新サービスをScalaで作ってみた 〜マイクロサービスの裏側 #jissenscala
ビズリーチの新サービスをScalaで作ってみた 〜マイクロサービスの裏側 #jissenscala
takezoe
実戦での Scala 〜 6つの事例から知る Scala の勘所〜 https://jissenscala.doorkeeper.jp/events/19660 で発表したスライドです。
5分で分かるmonaca pressproject(草案)
5分で分かるmonaca pressproject(草案)
Yuki Okamoto
REST 入門
REST 入門
Yohei Yamamoto
Kinesis Firehoseを使ってみた
Kinesis Firehoseを使ってみた
Masaki Misawa
2017/09/21 D-Cube 勉強会用のスライドです。
MongoDBの監視
MongoDBの監視
Tetsutaro Watanabe
・MongoDBで何を監視すべきか ・MongoDBのコマンド・メソッドによる監視 ・運用監視ツールとの連携して監視 ・MMS(MongoDB Monitoring Service)で監視
Service worker が拓く mobile web の新しいかたち
Service worker が拓く mobile web の新しいかたち
Kinuko Yasuda
Service worker が拓く mobile web の新しいかたち
JSON Schema で Web API のスキマを埋めよう
JSON Schema で Web API のスキマを埋めよう
VOYAGE GROUP
Scraping withawsAWSを利用してスクレイピングの悩みを解決するチップス
Scraping withawsAWSを利用してスクレイピングの悩みを解決するチップス
Takuro Sasaki
AWSを利用してスクレイピングの悩みを解決するチップス クローラー/スクレイピングにAWSを利用しようという話
What's hot
(20)
JAWSUG Kansai Simple Workflow Service (SWF)
JAWSUG Kansai Simple Workflow Service (SWF)
CloudSearchによる全文検索 - CM:道 2014/08/01
CloudSearchによる全文検索 - CM:道 2014/08/01
「WordPress初心者講座」(2018.3.25) 講義資料01
「WordPress初心者講座」(2018.3.25) 講義資料01
WordCamp Tokyo2016itkaasan
WordCamp Tokyo2016itkaasan
20150207 amazon elasticache
20150207 amazon elasticache
PHPerだってMicroservicesしたい!
PHPerだってMicroservicesしたい!
RESTful #とは RailsスタイルからRESTを学ぼう
RESTful #とは RailsスタイルからRESTを学ぼう
DevLove Kansai AWS
DevLove Kansai AWS
はじめてのBluemixでシングルサインオン ~ 希望編!
はじめてのBluemixでシングルサインオン ~ 希望編!
JAWSUG Osaka S3 CloudSearch
JAWSUG Osaka S3 CloudSearch
はじめてのAWS Lambda
はじめてのAWS Lambda
2016/05/01 Visual Studio with Cordova
2016/05/01 Visual Studio with Cordova
ビズリーチの新サービスをScalaで作ってみた 〜マイクロサービスの裏側 #jissenscala
ビズリーチの新サービスをScalaで作ってみた 〜マイクロサービスの裏側 #jissenscala
5分で分かるmonaca pressproject(草案)
5分で分かるmonaca pressproject(草案)
REST 入門
REST 入門
Kinesis Firehoseを使ってみた
Kinesis Firehoseを使ってみた
MongoDBの監視
MongoDBの監視
Service worker が拓く mobile web の新しいかたち
Service worker が拓く mobile web の新しいかたち
JSON Schema で Web API のスキマを埋めよう
JSON Schema で Web API のスキマを埋めよう
Scraping withawsAWSを利用してスクレイピングの悩みを解決するチップス
Scraping withawsAWSを利用してスクレイピングの悩みを解決するチップス
Similar to WordPress REST API とリアクティブプログラミング
2 TomcatによるWebアプリケーションサーバ構築 第1章 Tomcatのインストールと設定
2 TomcatによるWebアプリケーションサーバ構築 第1章 Tomcatのインストールと設定
Enpel
JAX-RS(LT)
JAX-RS(LT)
winplus
4月7日 関西Javaエンジニアの会(関ジャバ) ’10 4月度にいってきた。LTで「JAX-RS」と銘打って話亜した。中身は『Webを支える技術 -HTTP、URI、HTML、そしてREST』の宣伝。
め組テーマはテーマを捨てる
め組テーマはテーマを捨てる
horike37
http://fes.wp-d.org/03/2015/01/26/182 WP-D Fes #03 で発表した資料です。
backbone.jsの使用例 その1
backbone.jsの使用例 その1
Makoto Haruyama
ASP.NET Core 概要(2017年3月時点)
ASP.NET Core 概要(2017年3月時点)
Atsushi Yokohama (BEACHSIDE)
ASP.NET Core の入門として押さえておきたいポイントをまとめました。(2017年3月時点)
densan2014-late01
densan2014-late01
Takenori Nakagawa
北海道科学大学電子計算機研究部ネットワークチーム 後期講座01
XAML と C# を使った Windows ストアアプリ(LOB)構築のためのtips Prism 4.5 & Kona project 等のご紹介
XAML と C# を使った Windows ストアアプリ(LOB)構築のためのtips Prism 4.5 & Kona project 等のご紹介
Shotaro Suzuki
WebMatrix 2 と Azure Web Sites を使ったスマートフォンサイト構築のすすめ
WebMatrix 2 と Azure Web Sites を使ったスマートフォンサイト構築のすすめ
Akira Inoue
Mvc conf session_1_osada
Mvc conf session_1_osada
Hiroshi Okunushi
mvcConf @:Japan ~ ASP.NET MVC ブートキャンプ ~ の資料です
Elixir入門「第3回:Phoenix 1.2で高速Webアプリ & REST APIをサクッと書いてみる」【旧版】※新版あります
Elixir入門「第3回:Phoenix 1.2で高速Webアプリ & REST APIをサクッと書いてみる」【旧版】※新版あります
fukuoka.ex
※本スライド、旧版(Phoenix 1.2)のため、下記最新版をご覧ください https://www.slideshare.net/piacere_ex/elixir3phoenix-13web-rest-api-81219622 Elixirの上で動くWebアプリケーションサーバ「Phoenix」を使って、高速なWebアプリやREST APIをサクっと書いてみます
WebMatrix 2 と Azure を使ったスマートフォンサイト構築のすすめ
WebMatrix 2 と Azure を使ったスマートフォンサイト構築のすすめ
Akira Inoue
Elixir入門「第3回:Phoenix 1.3で高速webアプリ & REST APIアプリをサクッと書いてみる」
Elixir入門「第3回:Phoenix 1.3で高速webアプリ & REST APIアプリをサクッと書いてみる」
fukuoka.ex
Elixirの上で動くWebアプリケーションサーバ「Phoenix」を使って、高速なWebアプリやREST APIをサクっと書いてみます ※旧Phoenix(バージョン1.2)対応のスライドは、以下にあります https://www.slideshare.net/piacere_ex/elixir3phoenixweb-rest-api-75571536
One ASP.NET の今とこれから
One ASP.NET の今とこれから
Akira Inoue
Web matrix2とvisual studio
Web matrix2とvisual studio
Tadahiro Ishisaka
2012/11/17 静岡JavaScrp勉強会 #2での発表資料
Apps for office オンプレミスとクラウド
Apps for office オンプレミスとクラウド
Hirotada Watanabe
A 1-2 One ASP.NET - ASP.NET Web Stack
A 1-2 One ASP.NET - ASP.NET Web Stack
GoAzure
One ASP.NET - ASP.NET Web Stack ソーシャルグリッド株式会社 芝村 達郎
AWS Black Belt Tech シリーズ 2015 - AWS OpsWorks
AWS Black Belt Tech シリーズ 2015 - AWS OpsWorks
Amazon Web Services Japan
2015年11月11日に放送したAWS OpsWorks の資料です。今後の予定は以下をご覧ください。 http://aws.amazon.com/jp/about-aws/events/#webinar
PHP 開発環境構築- Windows 編 -
PHP 開発環境構築- Windows 編 -
Masaki Takeda
[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介
[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介
david9142
AWS OpsWorksハンズオン
AWS OpsWorksハンズオン
Amazon Web Services Japan
AWS OpsWorksハンズオン
Similar to WordPress REST API とリアクティブプログラミング
(20)
2 TomcatによるWebアプリケーションサーバ構築 第1章 Tomcatのインストールと設定
2 TomcatによるWebアプリケーションサーバ構築 第1章 Tomcatのインストールと設定
JAX-RS(LT)
JAX-RS(LT)
め組テーマはテーマを捨てる
め組テーマはテーマを捨てる
backbone.jsの使用例 その1
backbone.jsの使用例 その1
ASP.NET Core 概要(2017年3月時点)
ASP.NET Core 概要(2017年3月時点)
densan2014-late01
densan2014-late01
XAML と C# を使った Windows ストアアプリ(LOB)構築のためのtips Prism 4.5 & Kona project 等のご紹介
XAML と C# を使った Windows ストアアプリ(LOB)構築のためのtips Prism 4.5 & Kona project 等のご紹介
WebMatrix 2 と Azure Web Sites を使ったスマートフォンサイト構築のすすめ
WebMatrix 2 と Azure Web Sites を使ったスマートフォンサイト構築のすすめ
Mvc conf session_1_osada
Mvc conf session_1_osada
Elixir入門「第3回:Phoenix 1.2で高速Webアプリ & REST APIをサクッと書いてみる」【旧版】※新版あります
Elixir入門「第3回:Phoenix 1.2で高速Webアプリ & REST APIをサクッと書いてみる」【旧版】※新版あります
WebMatrix 2 と Azure を使ったスマートフォンサイト構築のすすめ
WebMatrix 2 と Azure を使ったスマートフォンサイト構築のすすめ
Elixir入門「第3回:Phoenix 1.3で高速webアプリ & REST APIアプリをサクッと書いてみる」
Elixir入門「第3回:Phoenix 1.3で高速webアプリ & REST APIアプリをサクッと書いてみる」
One ASP.NET の今とこれから
One ASP.NET の今とこれから
Web matrix2とvisual studio
Web matrix2とvisual studio
Apps for office オンプレミスとクラウド
Apps for office オンプレミスとクラウド
A 1-2 One ASP.NET - ASP.NET Web Stack
A 1-2 One ASP.NET - ASP.NET Web Stack
AWS Black Belt Tech シリーズ 2015 - AWS OpsWorks
AWS Black Belt Tech シリーズ 2015 - AWS OpsWorks
PHP 開発環境構築- Windows 編 -
PHP 開発環境構築- Windows 編 -
[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介
[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介
AWS OpsWorksハンズオン
AWS OpsWorksハンズオン
WordPress REST API とリアクティブプログラミング
1.
WordPress REST API
とリアクティブプログラミング SaCSS Special 08
2.
自己紹介 名前 田中 広将(ひろましゃ) 住所
札幌市 職業 SIer 所属のインフラエンジニア WordPress歴 2005年~ WordPress Bench 札幌 発起人(すいません…)
3.
オープンソース活動
4.
本日の内容 本日は、WordPress 4.4 から実装された WordPress
REST API と、 昨今定着してきた「リアクティブ」系 JavaScript ライブラリを組み合わせて、 ウェブサイトを構築する手法を 解説したいと思います
5.
本日の内容 1.WordPress REST API
とは 2.リアクティブプログラミングとは 3.Vue.js と WordPress REST API を組合せた活用
6.
1. WordPress REST
API とは
7.
WP REST API
の歴史 ● WordPress REST API は、バージョン 4.4 からコア実装 された、コンテンツの内容を JSON(JavaScript)形式で 返すための仕組みです。 ● 従来、WordPress においてコンテンツを出力するために 「テーマ」を用いていましたが、REST API の追加により、 新しい出力先が追加された形です。 ● WordPress 4.7(近日リリース)ではさらに、標準的な API も実装され、複雑な抽出操作も、ドキュメントに従い簡単に 取り扱えるようになります。
8.
WordPress REST API
の活用 ● WordPress REST API は「エンドポイント(URL)」 に対して JavaScript などから REST リクエストを行 うことで、コンテンツの内容を取得できます。 ● エンドポイントは自分で設計し拡張することができま す。
9.
WordPress REST API
の活用 REST API を活用すると、WordPress で次のようなこ とが実現可能です。 – 静的サイトへの WordPress コンテンツの記載(本日紹介) – 画面遷移のない検索の実装(本日紹介) – ニュースサイトで見られるような、コンテンツの遅延ロード – バックエンドのコンテンツリポジトリとしての WordPress の 活用 – 等々...
10.
WordPress REST API
を体験する WordPress サイトの URL のおしりに /wp-json/ を付与し てみてください。 /wp-json/ サイトが持っている「エンドポイント」が確認できるエンドポ イントです。
11.
WordPress REST API
を体験する その情報を元にさらにエンドポイントをたどります。 /wp-json/oembed/1.0/embed/ 指定した URL の投稿の抜粋が JSON 形式が取得できます。
12.
WP REST API
と JavaScript の関係 ● 静的サイトや WordPress テーマが、WordPress REST API を通じてコンテンツを取得するために、JavaScript を使います。 ● JavaScript から AJAX を用いて「エンドポイント」に対し て REST リクエストを行い、戻された JSON 形式を入 力とし、HTML に展開するのが大きな流れになります。 ● 閲覧している人の操作に応じて、REST のリクエストを 変化させ、必要な情報を取得します。(条件付き検索な どで活用できます)
13.
WP REST API
と JavaScript の関係 これらを従来のプログラミング手法で実装すると、 煩雑な処理がたくさんでてきます。 そこで登場してきたのが「リアクティブ」系と言われる JavaScript ライブラリです。
14.
従来のプログラミング手法を使った REST API 活用の際の課題点 ●
プログラマーは、ユーザの操作に応じて JSON を 取得し、DOM(HTML)を操作しコンテンツを整形し て出力するプログラムをかきます。 ● 現在画面に表示されている HTML ツリー状態 (ノード)を把握し、必要に応じて HTML タグの追加 や削除を行います。
15.
従来のプログラミング手法を使った REST API 活用の際の課題点 ●
ある操作の後は、この HTML タグがあるので削除する・・・ ● ある操作の後は、この HTML タグがないので追加する・・・ ● ひとつの操作だけではなく、前回、前々回…、いろいろなパターンで変 化していく HTML の状態をすべて把握して、プログラミングしなけれ ばならないのため、特定の操作順に対する考慮不足といった不具合 も起きやすいです。 このような課題に対応すべく登場したのが、 JavaScript のリアクティブ系のライブラリになります。
16.
2. リアクティブプログラミングとは
17.
プログラミングできる人 突然ですが問題です。 ● "プログラミングができる人"とはどのような人で しょう? ● 高度な
CSS が記述できるのに、プログラミングが 苦手という事象が起きるのはなぜでしょう?
18.
プログラミングできる人(答え) ● 「変数」があるからです。 ● CSS には変数がありません。 ● プログラミングができる人は、上から順に流れてい くソースコードの変数の状態を常に把握し、コント ロールする術を知っています。 ● 手続き型、構造化プログラミング、オブジェクト指向 などなど、様々なプログラム言語が持つ仕組みは、 いかに大量の変数の状態を把握しやすくするかと の戦いの中で生まれました。
19.
プログラミングの例 (FizzBuzz 問題) ● FizzBuzz
問題 プログラマーの基本的な素養をみるための、ごく簡 単な問題。
20.
プログラミングの例 (FizzBuzz 問題) ● 問題 1から順に数を表示するプログラムを書け。 ただし3の倍数のときは数の代わりに「Fizz」と、 5の倍数のときは「Buzz」と表示し、 3と5両方の倍数の場合には「FizzBuzz」と表示すること。 ● 回答の出力例 1, 2,
Fizz, 4, Fizz, Buzz, 7, 8, Fizz, Buzz, 11, Fizz, 13, 14, FizzBuzz, ...[省略]..., 97, 98, Fizz, Buzz
21.
プログラミングの例 (FizzBuzz 問題・回答) var i;
// 変数 for (i = 1; i <= 100; i++) { // ループ if (i % 3 == 0 && i % 5 == 0) { console.log('FizzBuzz'); } else if (i % 3 == 0) { console.log('Fizz'); } else if (i % 5 == 0) { console.log('Buzz'); } else { console.log(i); } }
22.
従来のプログラミングスタイル
23.
従来のプログラミングスタイル ● ソースコードが上から下に流れることを基本として、 ループで実行される命令の位置をコントロールす る。 ● 命令により変数の値を変化させ、実行中のプログラ ムの状態を変化させ、望みの処理をさせる。 ● プログラミング言語から外の世界に命令し、外部の 状態を変化させる。(画面出力等) ● つらい…
24.
CSSとプログラミング言語の比較 ● CSS はプログラミング言語と異なり、実行行や変 数の状態などをもたず、宣言のみを行うため、シン プルで分かりやすい。 ● このような宣言型のプログラミングスタイルが、従 来と異なる、リアクティブプログラミングの特徴のひ とつです。
25.
CSS で FizzBuzz
問題 ● 問題 1から順に数を表示するプログラムを書け。 ただし3の倍数のときは数の代わりに「Fizz」と、 5の倍数のときは「Buzz」と表示し、 3と5両方の倍数の場合には「FizzBuzz」と表示す ること。
26.
CSSで FizzBuzz 問題・回答 <ol> <li></li> <li></li> ...[省略]... <li></li> <li></li> </ol>
27.
CSSで FizzBuzz 問題・回答 li:nth-child(3n):before
{ content: "Fizz"; } li:nth-child(5n):before { content: "Buzz"; } li:nth-child(15n):before { content: "FizzBuzz"; } li:nth-child(3n), li:nth-child(5n) { list-style: none; }
28.
CSSで FizzBuzz 問題・回答 ●
入力(HTML)を与えれば「宣言」通りオートマティッ クに表示が変わる。 ● これがリアクティブな動きです。 ● というわけで、JavaScript リアクティブ系プログラミ ングも、従来なプログラミングに慣れている方より、 最初から CSS などで宣言的コーディングをしてい る方のほうが、とっつきやすいかもしれません。
29.
JavaScript を使ったリアクティブな例 ● この例は「時間」を入力として、キャラクターを動かす例 です。 http://pararaehon.com/ ● JavaScript
で画面を書き換えるプログラムを簡潔にか こうとすると、リアクティブな宣言的プログラミングにたど りつくような気がします。
30.
JavaScript を使ったリアクティブな例 hitsuji01: { image:
'images/page02/02_hitsuji01.png', update: function() { this.y = 600 + (1 - Math.exp(-6 * (this.tick / 60))) * -280; } },
31.
3. Vue.js と
WP REST API を組み合せた活用
32.
Vue.js でできること ● Vue.js
は JavaScript のリアクティブ系ライブラリの ひとつです。 ● 今日の Vue.js の任務は JSON を入力とし HTML をリアクティブに変化させることです。 ● WordPress REST API で取得した JSON を HTML に展開する宣言します(データバインディン グ) ● 宣言さえ完了すれば、取得した JSON データによっ て勝手に画面が書き換わるイメージです。
33.
Vue.js の特徴 ● Vue.js
は通常 HTML に付与された属性を手がか りに、JavaScript と HTML を結びます。 ● このため、既存の HTML や WordPress テーマ (CMS)と相性が良いです。
34.
Vue.js の特徴 ● 多くのリアクティブ系の
JS ライブラリは、コンポーネントの考え方のもと、処理したい HTML を JavaScript ファイル側に持たせます。 ● WordPress を始めとした多くの CMS では、テーマとなるファイルをその CMS で処 理して HTML を生成するため、 .js ファイルに HTML が移動すると、結構つらいです。 var Hello = React.createClass({ render: function() { return ( <div>Hello {this.props.name}</div> ); } })
35.
Vue.js を単体で使う(練習) ● Vue.js
を単体で使ってデータを HTML に展開 <tbody id="latest"> <tr v-for="item in items"> <td>{{item.post_title}}</td> <td>{{item.post_content}}</td> </tr> </tbody>
36.
Vue.js を単体で使う(練習) <script> new Vue({ el:
'#latest', data: { items: [ { post_title: '佐賀県', post_content : "佐賀市" }, { post_title: '岩手県', post_content : "盛岡市" }, ] } }); </script>
37.
静的ページで Vue.js を使い WordPress
からデータを取得 ● functions.php で WordPress に REST API の口を作成する add_action( 'rest_api_init', function () { register_rest_route( 'sacss/v1', '/latest', array( 'methods' => 'GET', 'callback' => function() { return get_posts( array('orderby' => 'rand' , 'posts_per_page' => -1)); } ) ); } );
38.
静的ページで Vue.js を使い WordPress
からデータを取得 ● 静的 HTML に配置した Vue.js で HTML に展開する <script> new Vue({ el: '#latest', data: { items: [] }, created: function() { this.$http.get('/wp-json/sacss/v1/latest', function (data) { this.items = data; }) } }) </script>
39.
WordPress テーマで Vue.js
を使い WordPress からデータを取得 ● functions.php で WordPress に REST API の口を作成する add_action( 'rest_api_init', function () { register_rest_route( 'sacss/v1', '/cat/(?P<term_id>d+)', array( 'methods' => 'GET', 'args' => array( 'term_id' => array( 'default' => 1, 'sanitize_callback' => 'absint', ) ), 'callback' => function($request) { return get_posts(array( 'cat' => $request->get_param('term_id'), 'posts_per_page' => -1)); } ) ); } );
40.
WordPress テーマで Vue.js
を使い WordPress からデータを取得 ● WordPress テンプレートファイル <ul> <?php foreach(get_categories() as $cat) : ?> <li> <a v-on:click="get(<?php echo $cat->term_id; ?>)" href="#"> <?php echo esc_html($cat->name); ?> </a> </li> <?php endforeach; ?> </ul> <tbody> <tr v-for="item in items"> <td>{{item.post_title}}</td> <td>{{item.post_content}}</td> </tr> </tbody>
41.
WordPress テーマで Vue.js
を使い WordPress からデータを取得 <script> new Vue({ el: '#latest', data: { items: [] }, created: function(){ this.$http.get('/wp-json/sacss/v1/latest', function (data) { this.items = data; }) }, methods: { get: function(term_id) { this.$http.get('/wp-json/sacss/v1/cat/' + term_id, function (data) { this.items = data; }) } } }); </script>
42.
まとめ
43.
まとめ ● WordPress REST
API は JSON 形式でコンテン ツを取得できます。 ● JSON 形式で取得したコンテンツは、リアクティブ 系の JavaScript で宣言的に HTML に展開すると 便利です。 ● Vue.js は WordPress テーマなど CMS のテンプ レートと組み合わせる場合に楽ができ、相性がいい です。
44.
ご清聴ありがとうございました。
Download now