スマートフォン時代のWeb制作術 Vol.2
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 913 views

http://t.co/IGKeFAmd

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

Statistics

Views

Total Views
913
Views on SlideShare
913
Embed Views
0

Actions

Likes
1
Downloads
4
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • スマートフォン時代のWeb制作術 Vol.2 2013年2月12日 DeNA渋谷 原 一成 @herablog
  • まずは運だめし!
  • まずは運だめし!http://goo.gl/VZrbd ・WebKit系でお願いします ・ニックネームを入力してください View slide
  • プレゼントがあります!おめでとうございます。 View slide
  • そこで、問題です
  • まゆまろは?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 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
  • 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
  • 役割の変化 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 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)
  • express・よく使われているフレームワーク・Connectというミドルウェアを使っている・簡単にWebアプリを作れる
  • 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)));});
  • 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);});
  • socket.io・リアルタイム通信を実現・ブラウザごとに最適な方式を選択 WebSocket/XHR Polling/Flashなど・もうすぐ1.0リリース
  • クラウド・システム運用をアウトソース・思い立ったらすぐリリースできる・大体最初は無料・たくさんのサービスから選択できる AWS/Google App Engine/dotCloudなど
  • Heroku ・gitと連携heroku login ・デフォルトは無料heroku creategit push heroku master ・Add-onで課金 ・多くの言語に対応 Ruby/Node/Python/Scalaなど
  • JSライブラリ
  • JSライブラリ
  • JSライブラリ 軽量 MVCフレームワーク
  • JS独自ライブラリ chikuwa.js chikuwa-view.js chikuwa-dispatcher.jshttps://github.com/ameba-proteus/chikuwa.js
  • chikuwa.js40 32KB3020 7KB 10KB10 0 chikuwa zepto jQuery
  • テンプレートエンジン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();
  • 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);}); }
  • モジュール別開発メッセージ サークルmessage.js circle.jsmessage.css circle.cssプロフィール 掲示板profile.js board.jsprofile.css board.css
  • スマートフォン HTML5/CSS3 JavaScript パフォーマンス
  • 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();
  • 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>
  • Audio
  • Web Font
  • スマートフォン時代のWeb制作術 Vol.1 Selectors API / Canvas / CSS Transform Audio / Local Storage / Web Font パフォーマンス改善 http://www.slideshare.net/herablog