how would you like component management system
TRANSCRIPT
How Would You Like Component Management SystemCMSどうでしょう Lightning Talk
岡本 秀高
名前：岡本秀高
仕事：PHPエンジニア
地域：京都～滋賀
その他：WordBench京都モデレーター
興味：WP-API, React.js, Polymer,JSON-LD
本題
の、前にいわゆる「宣伝」といふもの
1WordCampとは？
WordCampとは？
• WordPressのユーザーが集まるカンファレンス
• WordPressに関する様々なセッションを開催
• 初心者～コア開発者までが交流できる場所
• 日本では2014年に東京・関西の２地域で開催
WordCamp Kansai2015
• 2015年7月25日26日の土日開催
• 会場は大阪大学豊中キャンパス
• 入場無料、定員両日５００名
22015年の見どころ
1参加型！
参加型コンテンツが沢山！
• テーマ制作
• ユニットテスト／継続的インテグレーション
• 初心者のためのWordPress.com入門
• etc..
現時点での情報です。追加・変更等が発生する可能性がございますのでご了承ください。
2WordPress × ？
周辺技術も学べるセッション
• オープンデータ
• 継続的インテグレーション／デプロイ
• NPO／NGO／地域化活動
• コアコントリビューション
現時点での情報です。追加・変更等が発生する可能性がございますのでご了承ください。
3参加費無料！
3参加方法
ぜひご参加を
٩( ‘ω’ )و
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の上書きが起きにくくなる！
• ややこしいマークアップもシンプルになる！
• コーディングがめっちゃ楽になる
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>
After
<link rel="import" href="css-wapuu.html">
<css-wapuu></css-wapuu>
Do you know JSON-LD?一風変わったJSON
JSON for Linking Data
• Linked DataのためのJSON
• schema.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"
}
どこに使われているか？
Google Now
Linked Open Data
Knowledge Graph
Content & Component Mangement System2つの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!