CMSどうでしょう大阪LT

1. How Would You Like
Component
Management
System
CMSどうでしょう Lightning Talk
岡本 秀高

2. http://bit.ly/1UjTTTe

3. 名前：岡本秀高
仕事：PHPエンジニア
地域：京都∼滋賀
その他：WordBench京都モデレーター
興味：WP-API, React.js, Polymer,JSON-LD

4. 一応公式テーマ作者です
https://profiles.wordpress.org/hideokamoto

5. 本題

6. の、前に
いわゆる「宣伝」といふもの

8. 1WordCampとは？

9. WordCampとは？
• WordPressのユーザーが集まるカンファレンス
• WordPressに関する様々なセッションを開催
• 初心者∼コア開発者までが交流できる場所
• 日本では2014年に東京・関西の２地域で開催

11. WordCamp Kansai2015
• 2015年7月25日26日の土日開催
• 会場は大阪大学豊中キャンパス
• 入場無料、定員両日５００名

12. 22015年の見どころ

13. 1参加型！

14. 参加型コンテンツが沢山！
• テーマ制作
• ユニットテスト／継続的インテグレーション
• 初心者のためのWordPress.com入門
• etc..
現時点での情報です。追加・変更等が発生する可能性がございますのでご了承ください。

15. 2WordPress × ？

16. 周辺技術も学べるセッション
• オープンデータ
• 継続的インテグレーション／デプロイ
• NPO／NGO／地域化活動
• コアコントリビューション
現時点での情報です。追加・変更等が発生する可能性がございますのでご了承ください。

17. 3参加費無料！

18. 3参加方法

20. http://kansai.wordcamp.org/2015/

21. https://kansai.wordcamp.org/2015/tickets/

22. ぜひご参加を
٩( ‘ω’ )‫و‬

23. Do you know
Web Component?
WebComponentはご存知ですか？

24. すごいすごい
HTMLタグ

25. これが
<google-map
latitude="37.77493"
longitude="-122.41942"
fit-to-markers>
<google-map-marker
latitude="37.779" longitude="-122.3892"
draggable="true" title="Go Giants!”></google-map-marker>
<google-map-marker
latitude="37.777"
longitude=“-122.38911”></google-map-marker>
</google-map>

26. こうなる

27. 他にもこのへん凄い！
• タグの中だけのCSS/JSが書ける
• CSSの上書きが起きにくくなる！
• ややこしいマークアップもシンプルになる！
• コーディングがめっちゃ楽になる

28. Polymer 1.0
https://www.polymer-project.org/1.0/

29. CSS Wapuu
http://mismith0227.github.io/csswapuu/

30. Before
<link rel="stylesheet" href="style.css">
<div class="canvas"><div class="line-tail1"></div><div class="line-tail2"></div><div
class="tail1"></div><div class="tail2"></div><div class="tail3"></div><div class="tail4"></
div><div class="line1"></div><div class="line2"></div><div class="ball"></div><div
class="ball2"></div><div class="boll-light"></div><div class="w-circle"></div><div class="w-
circle-inner"></div><div class="w-1"></div><div class="w-2"></div><div class="w-3"></div><div
class="w-4"></div><div class="w-5"></div><div class="w-6"></div><div class="w-7"></div><div
class="w-8"></div><div class="w-9"></div><div class="w-10"></div><div class="w-11"></
div><div class="w-12"></div><div class="w-13"></div><div class="line-face1"></div><div
class="line-face2"></div><div class="line-right-hand"></div><div class="line-left-hand"></
div><div class="line-left-leg"></div><div class="face"></div><div class="neck"></div><div
class="body"></div><div class="belly"></div><div class="left-hand"></div><div class="right-
hand"></div><div class="arm"></div><div class="line-right-foot"></div><div class="right-
foot"></div><div class="left-leg"></div><div class="line-left-foot"></div><div class="left-
foot"></div><div class="thenar"></div><div class="line-left-ear"></div><div class="ear-left"></
div><div class="ear-right"></div><div class="eye-rignt blink"></div><div class="eye-left
blink"></div><div class="nose"></div><div class="mouth"></div></div>

31. After
<link rel="import" href="css-wapuu.html">
<css-wapuu></css-wapuu>

32. WP-API × Polymer 0.5
http://wp-kyoto.net/app/

33. Google I/O 2015
https://events.google.com/io2015/

34. Do you know
JSON-LD?
一風変わったJSON

35. JSON for Linking Data
• Linked DataのためのJSON
• schema.orgなどでデータを定義
• データに「意味付け」ができる

37. http://json-ld.org/

38. JSON-LD Syntax
{
"@context": "http://json-ld.org/contexts/person.jsonld",
"@id": "http://dbpedia.org/resource/John_Lennon",
"name": "John Lennon",
"born": "1940-10-09",
"spouse": "http://dbpedia.org/resource/Cynthia_Lennon"
}

40. http://bit.ly/1LikjNW

41. どこに使われているか？

43. Google Now
Linked Open Data
Knowledge Graph

44. Content & Component
Mangement
System
2つのCMS

45. 2015/03/20

47. Webサイトは
JSON-LDと
WebComponentで
作ろう

48. どう作る？
• 入力するデータを事前に定義（Schema.org）
• 定義したデータを表示するComponentを用意
• 定義したデータをJSON-LDで流し込む
• 作ったComponentは使い回しが簡単

49. どう変わる？
• JSON-LDを出力するContentMS
• WebComponentを作るComponentMS
• 「コンテツ」と「表示」を個別に管理できる

50. コンテンツを作る専門家
と
サイトを作る専門家
の分業が進む？

51. さっき作ったので、
間違ってたらすみませんm(_ _)m

52. WordPress
データ入力
Movable Type
Component生成

53. そんな共存も
あるのかも。

54. もしくは新しい
CMSが出てくるかも？

55. More Information
About WordPress ?

56. Join us!