Your SlideShare is downloading. ×
0
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

1,097

Published on

このイベントの内容です。 …

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

Published in: Technology, Design
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,097
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
10
Comments
0
Likes
8
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 原 一成 Hara KazunariWeb DeveloperCyberAgent, Inc.
  • 2. 原 一成 Hara KazunariWeb DeveloperCyberAgent, Inc.HTML / CSS / JavaScript
  • 3. の大型新商品
  • 4. 5/24から発売
  • 5. 5/24から発売Lの2倍, 1142Kcal
  • 6. herablog
  • 7. 原 一成 Hara KazunariWeb DeveloperCyberAgent, Inc.
  • 8. 05010015010.10 12 2 4 6 8 10 12 2 4 6 8 10 12 13.2138120133120109103104999185766761474535302821201713119975332Ameba スマートフォン PV数 (億PV)
  • 9. Amebaプラットホームの作りかた
  • 10. chikuwa.jsComponentnode.js
  • 11. HTML / CSS / JavaScript
  • 12. HTML / CSS / JavaScript
  • 13. DesignerFrontEngineerServerEngineer
  • 14. DesignerFrontEngineerServerEngineer
  • 15. Front Engineer・HTML/CSS + JavaScript・プログラム知識・サーバー知識・HTTP, URI・コマンドライン操作
  • 16. ServerEngineerFrontEngineer
  • 17. ServerEngineerFrontEngineer
  • 18. chikuwa.jsComponentnode.js
  • 19. 軽量MVCフレームワーク
  • 20. chikuwa.jschikuwa-view.jschikuwa-dispatcher.jshttps://github.com/ameba-proteus/chikuwa.js
  • 21. 010203040chikuwa zepto jQuery10KB7KB32KB
  • 22. chikuwa HTML
  • 23. chikuwa HTML.tag( header )
  • 24. chikuwa HTML.tag( header ) <header>
  • 25. HTML.tag( header ).tag( h1 )<header>chikuwa
  • 26. HTML.tag( header ).tag( h1 )<header><h1>chikuwa
  • 27. HTML.tag( header ).tag( h1 ).text( Ameba )<header><h1>chikuwa
  • 28. HTML.tag( header ).tag( h1 ).text( Ameba )<header><h1>Amebachikuwa
  • 29. HTML.tag( header ).tag( h1 ).text( Ameba ).gat()<header><h1>Amebachikuwa
  • 30. HTML.tag( header ).tag( h1 ).text( Ameba ).gat()<header><h1>Ameba</h1>chikuwa
  • 31. HTML.tag( header ).tag( h1 ).text( Ameba ).gat().gat()<header><h1>Ameba</h1>chikuwa
  • 32. HTML.tag( header ).tag( h1 ).text( Ameba ).gat().gat()<header><h1>Ameba</h1></header>chikuwa
  • 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. 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. $.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. $.views({group.top : {init: function(data) {this.data = data ¦¦ {};},render: function() {return tag( div ).text(this.data.name);}}});View
  • 37. メッセージmessage.jsmessage.cssサークルcircle.jscircle.cssプロフィールprofile.jsprofile.css掲示板board.jsboard.css
  • 38. chikuwa.jsComponentnode.js
  • 39. // button.btnappearance(none)// default button&.defaultcolor #4dac26gradient-default()// primary button&.primarycolor #fffgradient-primary()// warning button&.warningcolor #fffgradient-warning()Stylus
  • 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. ・ベクターなのでマルチデバイス◎・軽量・色、大きさの変更自由自在・アイコンに使うこともできる
  • 42. chikuwa.jsComponentnode.js
  • 43. スケーラブル非同期JavaScriptである
  • 44. スケーラブル非同期JavaScriptである
  • 45. ServerEngineerFrontEngineer
  • 46. ・よく使われているフレームワーク・Connectというミドルウェアを使っている・簡単にWebアプリを作れるExpress
  • 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. // 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. ビルド、デプロイ、ブランチ・タグ切り再起動
  • 50. /#me/aboutヘラ
  • 51. サーバー用jsを新規作成/lib/web/me.js
  • 52. モジュールを読み込む
  • 53. APIを作成
  • 54. /#me/aboutヘラ
  • 55. クライアント用jsを新規作成/public/js/module/me.js
  • 56. Routerの設定
  • 57. 初期アクションを記述
  • 58. モデルを作成
  • 59. viewを記述
  • 60. viewを記述
  • 61. ヘラ
  • 62. とても簡単!
  • 63. ただ、
  • 64. ・品質管理が難しかった・JSファイルの容量増量・CPU負荷が高かった
  • 65. Amebaプラットホームの作りかた

×