How Would You Like Component Management SystemCMSどうでしょう Lightning Talk
岡本 秀高
http://bit.ly/1UjTTTe
名前:岡本秀高
仕事:PHPエンジニア
地域:京都~滋賀
その他:WordBench京都モデレーター
興味:WP-API, React.js, Polymer,JSON-LD
本題
の、前にいわゆる「宣伝」といふもの
1WordCampとは?
WordCampとは?
• WordPressのユーザーが集まるカンファレンス
• WordPressに関する様々なセッションを開催
• 初心者~コア開発者までが交流できる場所
• 日本では2014年に東京・関西の2地域で開催
WordCamp Kansai2015
• 2015年7月25日26日の土日開催
• 会場は大阪大学豊中キャンパス
• 入場無料、定員両日500名
22015年の見どころ
1参加型!
参加型コンテンツが沢山!
• テーマ制作
• ユニットテスト/継続的インテグレーション
• 初心者のためのWordPress.com入門
• etc..
現時点での情報です。追加・変更等が発生する可能性がございますのでご了承ください。
2WordPress × ?
周辺技術も学べるセッション
• オープンデータ
• 継続的インテグレーション/デプロイ
• NPO/NGO/地域化活動
• コアコントリビューション
現時点での情報です。追加・変更等が発生する可能性がございますのでご了承ください。
3参加費無料!
3参加方法
http://kansai.wordcamp.org/2015/
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.0https://www.polymer-project.org/1.0/
CSS Wapuuhttp://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="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>
WP-API × Polymer 0.5http://wp-kyoto.net/app/
Google I/O 2015https://events.google.com/io2015/
Do you know JSON-LD?一風変わったJSON
JSON for Linking Data
• Linked DataのためのJSON
• schema.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
どこに使われているか?
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!
Top Related