スマートフォン時代のWeb制作術 Vol.2                   2013年2月12日                   DeNA渋谷                   原 一成 @herablog
まずは運だめし!
まずは運だめし!http://goo.gl/VZrbd   ・WebKit系でお願いします ・ニックネームを入力してください
プレゼントがあります!おめでとうございます。
そこで、問題です
まゆまろは?1      23      4
まゆまろは?1      23      4
まゆまろの特徴で正しくないものは?   1         2             まんまる       3歳              おめめ   3         4       乱暴者        階段       が苦手    ...
まゆまろの特徴で正しくないものは?   1         2             まんまる       3歳              おめめ   3         4       乱暴者        階段       が苦手    ...
100万円が欲しい1          2               欲しく    欲しい!               ない!3          4
100万円が欲しい1          2               欲しく    欲しい!               ない!3          4
原 一成        Hara KazunariWeb DeveloperCyberAgent, Inc.
@herablogHTML/CSS/JavaScript
@herablog@herablog
スマートフォン
PV数 (億PV)150                                                                                                              ...
PV数 (億PV)150                                                                                                              ...
役割の変化            Front      ServerDesigner           Engineer   Engineer
役割の変化            Front      ServerDesigner           Engineer   Engineer
役割の変化Designer ・レイアウト ・高度なWebデザイン ・イラストレーションが専門化 ・インタラクションに関与
役割の変化            Front      ServerDesigner           Engineer   Engineer
役割の変化Front Engineer ・HTML/CSS + JavaScript ・プログラム知識(モジュール化) ・サーバー知識 ・コマンドライン操作
役割の変化            Front      ServerDesigner           Engineer   Engineer
役割の変化Server Engineer ・プログラム、サーバー知識 ・API作成知識    (REST, Status Code) ・最適なインフラ構成構築 ・JavaScriptなどHTML5関連
役割の変化スマホ時代には・Front/Severをつなぐ必要あり・デザイン, インフラはより専門化
スマートフォン
スマートフォン   HTML5/CSS3   JavaScript   パフォーマンス
スマートフォン   HTML5/CSS3   JavaScript   パフォーマンス
node.js  スケーラブル  非同期  JavaScriptである
node.js  スケーラブル  非同期  JavaScriptである
役割の変化            Front      ServerDesigner           Engineer   Engineer
node.js  スケーラブル  非同期  JavaScriptである
アーキテクチャ
Ameba
アーキテクチャ
アーキテクチャ Front           ServerEngineer        Engineer
アーキテクチャ Front      ServerEngineer   Engineer
アーキテクチャ Front      ServerEngineer   Engineer
jade・テンプレートエンジン・インデント形式で閉じタグいらず・変数や分岐、include・テンプレート継承が便利
jadebase.jade                       index.jade!!! 5                           extends ./basehtml  head                    ...
express・よく使われているフレームワーク・Connectというミドルウェアを使っている・簡単にWebアプリを作れる
express// create web servervar express = require(express);var app = express();app.configure(function() {  // jade setting ...
express// routingapp.get(/, function(req, res){  res.render(index);});// start servervar server = http.createServer(app).l...
socket.io・リアルタイム通信を実現・ブラウザごとに最適な方式を選択 WebSocket/XHR Polling/Flashなど・もうすぐ1.0リリース
クラウド・システム運用をアウトソース・思い立ったらすぐリリースできる・大体最初は無料・たくさんのサービスから選択できる AWS/Google App Engine/dotCloudなど
Heroku                         ・gitと連携heroku login             ・デフォルトは無料heroku creategit push heroku master   ・Add-onで課金  ...
JSライブラリ
JSライブラリ
JSライブラリ  軽量  MVCフレームワーク
JS独自ライブラリ                chikuwa.js                chikuwa-view.js                chikuwa-dispatcher.jshttps://github.com/...
chikuwa.js40                            32KB3020     7KB          10KB10 0     chikuwa       zepto    jQuery
テンプレートエンジンChikuwa                            HTMLvar notiCount = getNotiCount();    <header>tag( header )                 ...
View & RoutingView                                     Routing$.views({                                $.routes( group , {...
モジュール別開発メッセージ          サークルmessage.js     circle.jsmessage.css    circle.cssプロフィール         掲示板profile.js      board.jsprofil...
スマートフォン   HTML5/CSS3   JavaScript   パフォーマンス
CanvasHTML<canvas id=”canvas”></canvas>JavaScriptvar canvas = document.getElementById(‘canvas’);var ctx = canvas.getContex...
CSS: transform<div data-parts=”f_body” style=”-webkit-transform: matrix(0.1, 0, 0, 0.1, 1.8,-43.7);”>  <img src=”data:~~”>...
Audio
Web Font
スマートフォン時代のWeb制作術 Vol.1 Selectors API / Canvas / CSS Transform    Audio / Local Storage / Web Font            パフォーマンス改善   h...
スマートフォン時代のWeb制作術 Vol.2
スマートフォン時代のWeb制作術 Vol.2
スマートフォン時代のWeb制作術 Vol.2
スマートフォン時代のWeb制作術 Vol.2
スマートフォン時代のWeb制作術 Vol.2
スマートフォン時代のWeb制作術 Vol.2
Upcoming SlideShare
Loading in …5
×

スマートフォン時代のWeb制作術 Vol.2

869 views

Published on

http://t.co/IGKeFAmd
こちらのイベントの内容です。

Published in: Technology
  • Be the first to comment

スマートフォン時代のWeb制作術 Vol.2

  1. 1. スマートフォン時代のWeb制作術 Vol.2 2013年2月12日 DeNA渋谷 原 一成 @herablog
  2. 2. まずは運だめし!
  3. 3. まずは運だめし!http://goo.gl/VZrbd ・WebKit系でお願いします ・ニックネームを入力してください
  4. 4. プレゼントがあります!おめでとうございます。
  5. 5. そこで、問題です
  6. 6. まゆまろは?1 23 4
  7. 7. まゆまろは?1 23 4
  8. 8. まゆまろの特徴で正しくないものは? 1 2 まんまる 3歳 おめめ 3 4 乱暴者 階段 が苦手 が苦手
  9. 9. まゆまろの特徴で正しくないものは? 1 2 まんまる 3歳 おめめ 3 4 乱暴者 階段 が苦手 が苦手
  10. 10. 100万円が欲しい1 2 欲しく 欲しい! ない!3 4
  11. 11. 100万円が欲しい1 2 欲しく 欲しい! ない!3 4
  12. 12. 原 一成 Hara KazunariWeb DeveloperCyberAgent, Inc.
  13. 13. @herablogHTML/CSS/JavaScript
  14. 14. @herablog@herablog
  15. 15. スマートフォン
  16. 16. PV数 (億PV)150 133 120 109 104103 99100 91 85 76 67 61 50 45 47 35 28 30 20 21 17 13 7 9 9 11 3 3 5 2 0 10.1011 12 11.1 2 3 4 5 6 7 8 9 10 11 12 12.1 2 3 4 5 6 7 8 9 10 11 12 13.1
  17. 17. PV数 (億PV)150 133 120 109 104103 99100 91 85 76 67 61 50 45 47 35 28 30 20 21 17 13 7 9 9 11 3 3 5 2 0 10.1011 12 11.1 2 3 4 5 6 7 8 9 10 11 12 12.1 2 3 4 5 6 7 8 9 10 11 12 13.1
  18. 18. 役割の変化 Front ServerDesigner Engineer Engineer
  19. 19. 役割の変化 Front ServerDesigner Engineer Engineer
  20. 20. 役割の変化Designer ・レイアウト ・高度なWebデザイン ・イラストレーションが専門化 ・インタラクションに関与
  21. 21. 役割の変化 Front ServerDesigner Engineer Engineer
  22. 22. 役割の変化Front Engineer ・HTML/CSS + JavaScript ・プログラム知識(モジュール化) ・サーバー知識 ・コマンドライン操作
  23. 23. 役割の変化 Front ServerDesigner Engineer Engineer
  24. 24. 役割の変化Server Engineer ・プログラム、サーバー知識 ・API作成知識 (REST, Status Code) ・最適なインフラ構成構築 ・JavaScriptなどHTML5関連
  25. 25. 役割の変化スマホ時代には・Front/Severをつなぐ必要あり・デザイン, インフラはより専門化
  26. 26. スマートフォン
  27. 27. スマートフォン HTML5/CSS3 JavaScript パフォーマンス
  28. 28. スマートフォン HTML5/CSS3 JavaScript パフォーマンス
  29. 29. node.js スケーラブル 非同期 JavaScriptである
  30. 30. node.js スケーラブル 非同期 JavaScriptである
  31. 31. 役割の変化 Front ServerDesigner Engineer Engineer
  32. 32. node.js スケーラブル 非同期 JavaScriptである
  33. 33. アーキテクチャ
  34. 34. Ameba
  35. 35. アーキテクチャ
  36. 36. アーキテクチャ Front ServerEngineer Engineer
  37. 37. アーキテクチャ Front ServerEngineer Engineer
  38. 38. アーキテクチャ Front ServerEngineer Engineer
  39. 39. jade・テンプレートエンジン・インデント形式で閉じタグいらず・変数や分岐、include・テンプレート継承が便利
  40. 40. jadebase.jade index.jade!!! 5 extends ./basehtml head block contents block title div#contents title Event 20130212 body block append scripts block header script(src=‘js/core.js’) block contents //- load scripts block scripts script(src=/js/main.js)
  41. 41. express・よく使われているフレームワーク・Connectというミドルウェアを使っている・簡単にWebアプリを作れる
  42. 42. express// create web servervar express = require(express);var app = express();app.configure(function() { // jade setting app.set(view engine,jade); app.set(views, path.join(basedir, /template/jade)); // static server setting app.use(express[static](path.join(basedir, /public)));});
  43. 43. express// routingapp.get(/, function(req, res){ res.render(index);});// start servervar server = http.createServer(app).listen(port,function(){ console.log(server started port on + port);});
  44. 44. socket.io・リアルタイム通信を実現・ブラウザごとに最適な方式を選択 WebSocket/XHR Polling/Flashなど・もうすぐ1.0リリース
  45. 45. クラウド・システム運用をアウトソース・思い立ったらすぐリリースできる・大体最初は無料・たくさんのサービスから選択できる AWS/Google App Engine/dotCloudなど
  46. 46. Heroku ・gitと連携heroku login ・デフォルトは無料heroku creategit push heroku master ・Add-onで課金 ・多くの言語に対応 Ruby/Node/Python/Scalaなど
  47. 47. JSライブラリ
  48. 48. JSライブラリ
  49. 49. JSライブラリ 軽量 MVCフレームワーク
  50. 50. JS独自ライブラリ chikuwa.js chikuwa-view.js chikuwa-dispatcher.jshttps://github.com/ameba-proteus/chikuwa.js
  51. 51. chikuwa.js40 32KB3020 7KB 10KB10 0 chikuwa zepto jQuery
  52. 52. テンプレートエンジンChikuwa HTMLvar notiCount = getNotiCount(); <header>tag( header ) <button class= menu ></button> .tag( button.menu ).gat() <h1>Ameba</h1> .tag( h1 ).text( Ameba ).gat() <button class= noti > .tag( button.noti ) <span class= counter >1</span> .tag( span.counter ) </button> .text(notiCount).gat() </header> .gat();
  53. 53. View & RoutingView Routing$.views({ $.routes( group , { group.top : { /: {name: top , action: top }, init: function(data) { /:groupId/info : {name: info , action: info } this.data = data ¦¦ {}; }); }, render: function() { Action return tag( div ); function top(vars) { } var view = $.view( group.top ); } page.replace(view);}); }
  54. 54. モジュール別開発メッセージ サークルmessage.js circle.jsmessage.css circle.cssプロフィール 掲示板profile.js board.jsprofile.css board.css
  55. 55. スマートフォン HTML5/CSS3 JavaScript パフォーマンス
  56. 56. CanvasHTML<canvas id=”canvas”></canvas>JavaScriptvar canvas = document.getElementById(‘canvas’);var ctx = canvas.getContext(2d);ctx.beginPath();ctx.moveTo(10, 10);ctx.lineTo(100, 10);ctx.closePath();
  57. 57. CSS: transform<div data-parts=”f_body” style=”-webkit-transform: matrix(0.1, 0, 0, 0.1, 1.8,-43.7);”> <img src=”data:~~”></div><div data-parts=”f_body” style=”-webkit-transform: matrix(0.99, 0, 0, 0.99, 0.75,-40.5);”> <img src=”data:~~”></div>
  58. 58. Audio
  59. 59. Web Font
  60. 60. スマートフォン時代のWeb制作術 Vol.1 Selectors API / Canvas / CSS Transform Audio / Local Storage / Web Font パフォーマンス改善 http://www.slideshare.net/herablog

×