How Would You Like Component Management System

1K Views

July 04, 15

スライド概要

CMSどうでしょう大阪LT

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
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.

1 WordCampとは?

9.

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

11.

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

12.

2 2015年の見どころ

13.

1 参加型!

14.

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

15.

2 WordPress × ?

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

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.
[beta]
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!