W P R E S T A P I ( Ve r s i o n 2 )
• WordPressͷσʔλΛJSONͰऔಘͰ͖ΔAPI
• WordPress4.4ͰҰ෦ػೳ͕ίΞ࣮ࡁΈ
• ίΞ౷߹ʹ͚ͯ։ൃਐߦத
• ϓϥάΠϯίʔυՃʹΑΔػೳ֦ுՄೳ
Slide 10
Slide 10 text
$ c u r l h t t p : / / w p - k y o t o . n e t / w p - j s o n / w p / v 2 /
p o s t s | j q .
Slide 11
Slide 11 text
/ w p - j s o n / w p /
v 2 / : o b j e c t / : i d
• ߘͷҰཡΛऔಘ
GET /wp-json/wp/v2/
posts
• ID͕123ͷݻఆϖʔδΛऔಘ
GET /wp-json/wp/v2/
pages/123
Slide 12
Slide 12 text
G E T w p - j s o n / p o s t s ? f i l t e r [ s ] = w o rd p re s s
ɹ ɹ ʮ Wo rd P re s s ʯ Λ ؚ Ή ߘ Λ औ ಘ
P O S T w p - j s o n / c o m m e n t s / 1 2 3 - d
“ c o n t e n t = c o m m e n t ”
ɹ ɹ I D : 1 2 3 ͷ ه ࣄ ʹ ί ϝ ϯ τ Λ ߘ
Slide 13
Slide 13 text
W P R E S T A P I υ Ω ϡ ϝ ϯ ς ʔ γ ϣ ϯ
ʢ ຊ ޠ ൛ ʣ Λ P R ग़ ͯ͠ ϝ ϯ ς ͠ Α ͏
http://ja.wp-api.org/
W P - A n g u l a r J S
h t t p s : / / g i t h u b . c o m / m i y a 0 0 0 1 / w p - a n g u l a r j s
Slide 16
Slide 16 text
W P - A n g u l a r J S
Slide 17
Slide 17 text
W P - A n g u l a r J S ͳ Β ɺ
ς ϯ ϓ Ϩ ʔ τ λ ά ϥ ΠΫ ͳ Ϛʔ Ϋ Ξ οϓ ͕ Մ ೳ
Slide 18
Slide 18 text
W P - A n g u l a r J S ͳ Β ɺ
ς ϯ ϓ Ϩ ʔ τ λ ά ϥ ΠΫ ͳ Ϛʔ Ϋ Ξ οϓ ͕ Մ ೳ
Slide 19
Slide 19 text
W P - A n g u l a r J S ͷ A P I
Slide 20
Slide 20 text
ϧ ʔϓ < h a v e - p o s t s >
ύ ϥϝ ʔ λ σ ϑ Υϧ τ આ ໌
a p i - ro o t A P I ͷ U R L Λ ࢦ ఆ
p o s t - t y p e ߘ λ Π ϓ Λ ࢦ ఆ
p e r- p a g e 1 0 औ ಘ ͢ Δ ه ࣄ ݅
o ff s e t 0 εΩ οϓ ͢ Δ ه ࣄ ݅
p o s t - i d ه ࣄ I D Λ ࢦ ఆ
f i l t e r W P _ Q u e r y ϥ ΠΫ ͳ Ϋ Τ Ϧ
Slide 21
Slide 21 text
e x a m p l e . c o m ͷ
p o s t ߘ λ Π ϓ Ͱɺ
Χ ς ΰ Ϧ I D 1 2 3 ͷ ه ࣄ Λ ঢ ॱ Ͱ औ ಘ ͢ Δ
Slide 22
Slide 22 text
e x a m p l e . c o m ͷ
p o s t ߘ λ Π ϓ Ͱɺ
ه ࣄ I D 1 2 3 ͷ ه ࣄ Λ औ ಘ ͢ Δ
Slide 23
Slide 23 text
W P - A N G U L A R J S Ͱ
Ϟ όΠϧΞ ϓ Ϧ Λ ࡞ Δ
Slide 24
Slide 24 text
Wo rd P re s s + W P - A P I + I o n i c F r a m e w o r k
h t t p s : / / g i t h u b . c o m / m i y a 0 0 0 1 / i o n i c - s t a r t e r- w o rd p re s s
Slide 25
Slide 25 text
Wo rd P re s s + W P - A P I + I o n i c F r a m e w o r k
• WP AngularJS
• Cordova
• ionic
Slide 26
Slide 26 text
Wo rd P re s s + W P - A P I + I o n i c F r a m e w o r k
$ npm install -g ionic cordova ios-sim
Slide 27
Slide 27 text
Wo rd P re s s + W P - A P I + I o n i c F r a m e w o r k
$ ionic start myApp https://github.com/miya0001/ionic-
starter-wordpress
$ cd myApp
$ ionic platform add ios
$ ionic platform add android
Slide 28
Slide 28 text
$ v i m m y A p p / w w w / j s / a p p . j s
.constant( 'config', {
api: 'http://example.com/wp-json/wp/v2'
} )
Slide 29
Slide 29 text
i o n i c + w p - a n g u l a r j s
https://github.com/ogijima-library/app/blob/master/www/templates/posts.html
Slide 30
Slide 30 text
Wo rd P re s s + W P - A P I + I o n i c F r a m e w o r k
$ ionic emulate ios
or
$ ionic serve
Slide 31
Slide 31 text
http://ogijima-library.or.jp/
Slide 32
Slide 32 text
https://github.com/ogijima-library/app
Slide 33
Slide 33 text
R e a c t ν ϡ ʔ τ Ϧ Ξϧ Ͱ W P R E S T A P I
https://facebook.github.io/react/docs/tutorial.html
Slide 34
Slide 34 text
C o m m e n t B o x ͷ u r l Λ W P ɹ A P I ʹ
ReactDOM.render(
- ,
+ ,
document.getElementById('content')
);
Slide 35
Slide 35 text
C o m m e n t ͷ M a r k d o w n ର Ԡ Λ Φ ϑ ʹ
var Comment = React.createClass({
rawMarkup: function() {
- var md = new Remarkable();
- var rawMarkup =
md.render(this.props.children.toString());
- return { __html: rawMarkup };
+ return { __html: this.props.children.toString()};
},
Slide 36
Slide 36 text
C o m m e n t L i s t Λ W P A P I ର Ԡ
render: function() {
var commentNodes = this.props.data.map(function(comment) {
return (
-
- {comment.text}
+
+ {comment.content.rendered}
);
});
Slide 37
Slide 37 text
C o m m e n t ߘ ͜ Μ ͳ ײ ͡ Ͱ P O S T ͢ Δ
$.ajax({
url: this.props.url,
dataType: 'json',
type: 'POST',
data: {
id: POST_ID,
author: "AUTHOR_NAME",
content: "YOUR COMMENT"
},
ݕ ࡧ E l a s t i c s e a rc h
Ϛʔ έ ςΟ ϯ ά M a u t i c
+BWB4DSJQU
)5.-
"1* "1* "1*
Slide 48
Slide 48 text
S PA ͷ ί ϯ ς ϯ π ෦ Λ
Wo rd P re s s Ͱ ཧ ͢ Δ
+BWB4DSJQU
)5.-
Ϣʔβʔೝূ "1*
ίϯςϯπ
81"1*͔Β
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
No content
Slide 51
Slide 51 text
R e u s a b l e
C o n t e n t
Slide 52
Slide 52 text
ࠓ · Ͱ ഔ ମ ຖ ʹ
ί ϯ ς ϯ π Λ ߋ ৽ ͯ͠ ͍ ͨ
Slide 53
Slide 53 text
ί ϯ ς ϯ π Wo rd P re s s ʹ
A P I ͔ Β ί ϯ ς ϯ π Λ ར ༻ ͢ Δ
Slide 54
Slide 54 text
I n t e l l i g e n t
C o n t e n t
https://www.amazon.co.jp/dp/B01698YCF0
Slide 55
Slide 55 text
ࠓ · Ͱ ௨ Γ ͷ ࡞ Γ ํ ͕
ͳ ͘ ͳ Δ Θ ͚ Ͱ ͳ ͍
Slide 56
Slide 56 text
http://www.vektor-inc.co.jp/
Slide 57
Slide 57 text
Ҋ ݅ ʹ Ԡ ͡ ͯ W P A P I ͷ ى ༻ Λ ݕ ౼ ͢ Δ
• ϞόΠϧΞϓϦɺΦϜχνϟωϧʹల։͢ΔϝσΟΞ
• JavaScriptͰͷ։ൃ͕ಘҙͳΤϯδχΞ͕ଟ͍νʔϜͰͷ։ൃ
• ςʔϚϓϥάΠϯͷઃఆ͚ͩͰย͘Ҋ݅
• WordPressςʔϚ࡞ऀͱ͔͕͍ΔνʔϜͰͷ։ൃ
ै དྷ ͷ ߏ ங ํ ๏ ͕ ޮ త ͳ έ ʔε ͷ ྫ
W P R E S T A P I ͕ ׆ ༂ ͢ Δ έ ʔε ͷ ྫ