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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

  • 980 views
Published

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

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

Published in Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
980
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
9
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プラットホームの作りかた