How Would You Like Component Management System

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

http://bit.ly/1UjTTTe

• http://bit.ly/1UjTTTe

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

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

• https://profiles.wordpress.org/hideokamoto

本題

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

1 WordCampとは？

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

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

2 2015年の見どころ

1 参加型！

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

• http://WordPress.com

2 WordPress × ？

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

3 参加費無料！

3 参加方法

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

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

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

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

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

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

すごいすごい HTMLタグ

これが <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>

こうなる

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

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

• https://www.polymer-project.org/1.0/

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

• http://mismith0227.github.io/csswapuu/

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="wcircle-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="righthand"></div><div class="arm"></div><div class="line-right-foot"></div><div class="rightfoot"></div><div class="left-leg"></div><div class="line-left-foot"></div><div class="leftfoot"></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>

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

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

• http://wp-kyoto.net/app/

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

• https://events.google.com/io2015/

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

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

http://json-ld.org/

• http://json-ld.org/

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"
}

http://bit.ly/1LikjNW

• http://bit.ly/1LikjNW

どこに使われているか？

Google Now Linked Open Data Knowledge Graph

Content & Component Mangement System 2つのCMS

2015/03/20

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

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

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

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

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

WordPress データ入力 Movable Type Component生成

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

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

More Information About WordPress ?

Join us!