Successfully reported this slideshow.
原 一成 Hara KazunariWeb DeveloperCyberAgent, Inc.
原 一成 Hara KazunariWeb DeveloperCyberAgent, Inc.HTML / CSS / JavaScript
の大型新商品
5/24から発売
5/24から発売Lの2倍, 1142Kcal
herablog
原 一成 Hara KazunariWeb DeveloperCyberAgent, Inc.
05010015010.10 12 2 4 6 8 10 12 2 4 6 8 10 12 13.2138120133120109103104999185766761474535302821201713119975332Ameba スマートフォ...
Amebaプラットホームの作りかた
chikuwa.jsComponentnode.js
HTML / CSS / JavaScript
HTML / CSS / JavaScript
DesignerFrontEngineerServerEngineer
DesignerFrontEngineerServerEngineer
Front Engineer・HTML/CSS + JavaScript・プログラム知識・サーバー知識・HTTP, URI・コマンドライン操作
ServerEngineerFrontEngineer
ServerEngineerFrontEngineer
chikuwa.jsComponentnode.js
軽量MVCフレームワーク
chikuwa.jschikuwa-view.jschikuwa-dispatcher.jshttps://github.com/ameba-proteus/chikuwa.js
010203040chikuwa zepto jQuery10KB7KB32KB
chikuwa HTML
chikuwa HTML.tag( header )
chikuwa HTML.tag( header ) <header>
HTML.tag( header ).tag( h1 )<header>chikuwa
HTML.tag( header ).tag( h1 )<header><h1>chikuwa
HTML.tag( header ).tag( h1 ).text( Ameba )<header><h1>chikuwa
HTML.tag( header ).tag( h1 ).text( Ameba )<header><h1>Amebachikuwa
HTML.tag( header ).tag( h1 ).text( Ameba ).gat()<header><h1>Amebachikuwa
HTML.tag( header ).tag( h1 ).text( Ameba ).gat()<header><h1>Ameba</h1>chikuwa
HTML.tag( header ).tag( h1 ).text( Ameba ).gat().gat()<header><h1>Ameba</h1>chikuwa
HTML.tag( header ).tag( h1 ).text( Ameba ).gat().gat()<header><h1>Ameba</h1></header>chikuwa
HTML.tag( header ).tag( h1 ).text( Ameba ).gat().gat().tag( div#main ).tag( button.noti ).tag( span.counter ).text(count)....
HTML.tag( header ).tag( h1 ).text( Ameba ).gat().gat().tag( div#main ).tag( button.noti ).tag( span.counter ).text(count)....
$.routes( group , {/ : {name: top , action: top }, // /#group//info/:groupId : {name: info , action: info } // /#group/inf...
$.views({group.top : {init: function(data) {this.data = data ¦¦ {};},render: function() {return tag( div ).text(this.data....
メッセージmessage.jsmessage.cssサークルcircle.jscircle.cssプロフィールprofile.jsprofile.css掲示板board.jsboard.css
chikuwa.jsComponentnode.js
// button.btnappearance(none)// default button&.defaultcolor #4dac26gradient-default()// primary button&.primarycolor #fffg...
@font-face {font-family: "AmebaSymbols";src:url("../font/ameba_symbols.eot");src:url("../font/ameba_symbols.woff") format(w...
・ベクターなのでマルチデバイス◎・軽量・色、大きさの変更自由自在・アイコンに使うこともできる
chikuwa.jsComponentnode.js
スケーラブル非同期JavaScriptである
スケーラブル非同期JavaScriptである
ServerEngineerFrontEngineer
・よく使われているフレームワーク・Connectというミドルウェアを使っている・簡単にWebアプリを作れるExpress
// create web servervar express = require(express);var app = express();app.configure(function() {// jade settingapp.set(vie...
// routingapp.get(/, function(req, res){res.render(index);});// start servervar server = http.createServer(app).listen(por...
ビルド、デプロイ、ブランチ・タグ切り再起動
/#me/aboutヘラ
サーバー用jsを新規作成/lib/web/me.js
モジュールを読み込む
APIを作成
/#me/aboutヘラ
クライアント用jsを新規作成/public/js/module/me.js
Routerの設定
初期アクションを記述
モデルを作成
viewを記述
viewを記述
ヘラ
とても簡単!
ただ、
・品質管理が難しかった・JSファイルの容量増量・CPU負荷が高かった
Amebaプラットホームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Upcoming SlideShare
Loading in …5
×

Amebaプラットフォームの作りかた

1,760 views

Published on

このイベントの内容です。
http://frontrend.github.io/events/05/

Published in: Technology, Design
  • Be the first to comment

Amebaプラットフォームの作りかた

  1. 1. 原 一成 Hara KazunariWeb DeveloperCyberAgent, Inc.
  2. 2. 原 一成 Hara KazunariWeb DeveloperCyberAgent, Inc.HTML / CSS / JavaScript
  3. 3. の大型新商品
  4. 4. 5/24から発売
  5. 5. 5/24から発売Lの2倍, 1142Kcal
  6. 6. herablog
  7. 7. 原 一成 Hara KazunariWeb DeveloperCyberAgent, Inc.
  8. 8. 05010015010.10 12 2 4 6 8 10 12 2 4 6 8 10 12 13.2138120133120109103104999185766761474535302821201713119975332Ameba スマートフォン PV数 (億PV)
  9. 9. Amebaプラットホームの作りかた
  10. 10. chikuwa.jsComponentnode.js
  11. 11. HTML / CSS / JavaScript
  12. 12. HTML / CSS / JavaScript
  13. 13. DesignerFrontEngineerServerEngineer
  14. 14. DesignerFrontEngineerServerEngineer
  15. 15. Front Engineer・HTML/CSS + JavaScript・プログラム知識・サーバー知識・HTTP, URI・コマンドライン操作
  16. 16. ServerEngineerFrontEngineer
  17. 17. ServerEngineerFrontEngineer
  18. 18. chikuwa.jsComponentnode.js
  19. 19. 軽量MVCフレームワーク
  20. 20. chikuwa.jschikuwa-view.jschikuwa-dispatcher.jshttps://github.com/ameba-proteus/chikuwa.js
  21. 21. 010203040chikuwa zepto jQuery10KB7KB32KB
  22. 22. chikuwa HTML
  23. 23. chikuwa HTML.tag( header )
  24. 24. chikuwa HTML.tag( header ) <header>
  25. 25. HTML.tag( header ).tag( h1 )<header>chikuwa
  26. 26. HTML.tag( header ).tag( h1 )<header><h1>chikuwa
  27. 27. HTML.tag( header ).tag( h1 ).text( Ameba )<header><h1>chikuwa
  28. 28. HTML.tag( header ).tag( h1 ).text( Ameba )<header><h1>Amebachikuwa
  29. 29. HTML.tag( header ).tag( h1 ).text( Ameba ).gat()<header><h1>Amebachikuwa
  30. 30. HTML.tag( header ).tag( h1 ).text( Ameba ).gat()<header><h1>Ameba</h1>chikuwa
  31. 31. HTML.tag( header ).tag( h1 ).text( Ameba ).gat().gat()<header><h1>Ameba</h1>chikuwa
  32. 32. HTML.tag( header ).tag( h1 ).text( Ameba ).gat().gat()<header><h1>Ameba</h1></header>chikuwa
  33. 33. HTML.tag( header ).tag( h1 ).text( Ameba ).gat().gat().tag( div#main ).tag( button.noti ).tag( span.counter ).text(count).gat().gat().gat();<header><h1>Ameba</h1></header>chikuwa
  34. 34. HTML.tag( header ).tag( h1 ).text( Ameba ).gat().gat().tag( div#main ).tag( button.noti ).tag( span.counter ).text(count).gat().gat().gat();<header><h1>Ameba</h1></header><div id= main ><button class= noti ><span class= counter >1</span></button></div>chikuwa
  35. 35. $.routes( group , {/ : {name: top , action: top }, // /#group//info/:groupId : {name: info , action: info } // /#group/info/{GROUP_ID}});Routingfunction top(vars) {var view = $.view( group.top );page.replace(view); // show group.top view}Action
  36. 36. $.views({group.top : {init: function(data) {this.data = data ¦¦ {};},render: function() {return tag( div ).text(this.data.name);}}});View
  37. 37. メッセージmessage.jsmessage.cssサークルcircle.jscircle.cssプロフィールprofile.jsprofile.css掲示板board.jsboard.css
  38. 38. chikuwa.jsComponentnode.js
  39. 39. // button.btnappearance(none)// default button&.defaultcolor #4dac26gradient-default()// primary button&.primarycolor #fffgradient-primary()// warning button&.warningcolor #fffgradient-warning()Stylus
  40. 40. @font-face {font-family: "AmebaSymbols";src:url("../font/ameba_symbols.eot");src:url("../font/ameba_symbols.woff") format(woff),url("../font/ameba_symbols.ttf") format(truetype),url("../font/ameba_symbols.svg#webfont")format(svg)}.icon { font-family: "AmebaSymbols"; }.icon.M::before { content: "M" }
  41. 41. ・ベクターなのでマルチデバイス◎・軽量・色、大きさの変更自由自在・アイコンに使うこともできる
  42. 42. chikuwa.jsComponentnode.js
  43. 43. スケーラブル非同期JavaScriptである
  44. 44. スケーラブル非同期JavaScriptである
  45. 45. ServerEngineerFrontEngineer
  46. 46. ・よく使われているフレームワーク・Connectというミドルウェアを使っている・簡単にWebアプリを作れるExpress
  47. 47. // create web servervar express = require(express);var app = express();app.configure(function() {// jade settingapp.set(view engine,jade);app.set(views, path.join(basedir, /template/jade));// static server settingapp.use(express[static](path.join(basedir, /public)));});
  48. 48. // routingapp.get(/, function(req, res){res.render(index);});// start servervar server = http.createServer(app).listen(port, function(){console.log(server started port on + port);});
  49. 49. ビルド、デプロイ、ブランチ・タグ切り再起動
  50. 50. /#me/aboutヘラ
  51. 51. サーバー用jsを新規作成/lib/web/me.js
  52. 52. モジュールを読み込む
  53. 53. APIを作成
  54. 54. /#me/aboutヘラ
  55. 55. クライアント用jsを新規作成/public/js/module/me.js
  56. 56. Routerの設定
  57. 57. 初期アクションを記述
  58. 58. モデルを作成
  59. 59. viewを記述
  60. 60. viewを記述
  61. 61. ヘラ
  62. 62. とても簡単!
  63. 63. ただ、
  64. 64. ・品質管理が難しかった・JSファイルの容量増量・CPU負荷が高かった
  65. 65. Amebaプラットホームの作りかた

×