SlideShare una empresa de Scribd logo
1 de 112
Descargar para leer sin conexión
まだ間に合う HTML5
Yeomanで追いつけ!高速Webアプリ開発

2013/10/26 Innovation EGG @kadoppe
自己紹介
●

名前
● 門脇 恒平(29) @kadoppe

●

職業
● ソフトウェアエンジニア

●

所属
● HTML5-WEST.jp & 株式会社シェアウィズ
本日のスライド
●

SlideShare
● http://www.slideshare.net/kadoppe

●

Speaker Deck
● https://speakerdeck.com/kadoppe
アジェンダ
●

HTML5-WEST.jp 紹介

●

HTML5 でできること

●

HTML5 についていくために

●

Yeoman で追いつけ!
高速Webアプリ開発
HTML5-WEST.jpの紹介
まだ間に合うHTML5 - Yeomanで追いつけ!高速webアプリ開発
HTML5-WEST.jp
●

関西で HTML5 の話題を盛り上げるため
に 2010 年に発足したコミュニティ

●

活動内容
● HTML5関連の勉強会・イベント開催
● MLでの情報共有
HTML5など勉強会
●

HTML5関連技術の発表をとおして
技術向上・情報交換を行う場所

●

不定期開催
● 2011年に第1回が開催・現在までに8回開催

●

「HTML5とか勉強会」をインスパイア
僕とHTML5-WEST.jp
出会い
●

2010/05
● 京都GTUG HTML5 ハッカソンに参加
● JavaScript & HTML5 初心者でした

●

その後
● HTML5読書会やハッカソンにしつこく参加
● コアメンバーとしてお誘いをうける
勉強会でプレゼン

●

HTML5 など勉強会が開催されるたびに
できるだけプレゼン

●

それがきっかけで…
雑誌の特集記事を書くことに
●

WEB+DB Press vol. 76
● 「作って学ぶデータ可視化」
参加するメリット
●

新技術を知る・勉強するきっかけになる

●

技術にとがった人と知り合える

●

手を上げれば自分が発表できる

●

その気になれば世界が広がる
是非参加してください!
HTML5 でできること
HTML5 と HTML5
●

HTML5 はとても曖昧な言葉

●

どこからが HTML5 なの?

●

どこまでが HTML5 なの?
狭義のHTML5
●

HTML4の次のバージョン

●

マークアップ言語としての仕様
● 新しいタグ/要素が追加
広義の HTML5
●

リッチインターネットアプリケーション
(RIA) 実現のための様々な仕様群

●

「HTML5関連技術」と呼ばれる

●

本プレゼンでは HTML5 と表記
いつから使える HTML5
●

A. もう使える

●

各ブラウザが段階的に対応
● Internet Explorer 9移行
● Mozilla Firefox 3.5移行
● Google Chrome 3.0移行
● Safari 3.1移行
HTML5 でできること
●

マークアップ編

●

表現編

●

JavaScript API編

●

スマホアプリ編
マークアップ編
シンプルなマークアップ

●

よりシンプルなタグでHTMLが
記述できるように
→ 制作・開発効率アップ↑
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01 Transitional//EN" "http://www.w3.org/
TR/html4/loose.dtd">
! ! !
<!DOCTYPE html>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8">
! ! !
<meta charset="UTF-8">
<style type=”text/css”>...</style>
<script type=”text/javascript”>...</script>
! ! !
<style>...</style>
<script>...</script>
セマンティックなマークアップ
●

<div> 要素
● コンピュータが意味を解釈するのが難しい

●

<article>, <section> 要素などを
使うことで
● コンピュータが意味を解釈できるように
● スクリーンリーダや検索エンジンが
高機能に
<article> 要素
●

記事 をマークアップ
● RSSフィードに含めたときに1つの記事として
成り立つ単位

●

例)
● ブログのエントリ
<article>
<h1>無鉄砲でラーメンを食べてきた</h1>
<p>無性にラーメンが食べたいと思い・・・</p>
<p>大行列ができてたけどめげずに並んで・・・</p>
...
</article>
<section> 要素

●

文章の セクション をマークアップ

●

例)
● 文章における 章
<section>
<h1>1章 はじめに</h1>
<p> ... </p>
</section>
<section>
<h1>2章 背景</h2>
<p> ... </p>
</section>
表現編
CSS3
●

Webページ上でリッチな表現を実現する
ための様々なプロパティが追加された

●

画像やスクリプトが必要だった表現
→ スタイルシートだけで実現可能に
装飾系プロパティ
●

border-radius
● 角丸

●

box-shadow, text-shadow
● ドロップシャドウ
.box {
box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
border-radius: 3px;
}
参考:ズルいデザイン

ズルいデザイン(3):box-shadowで表現する、「セミフラット」なズルいデザインテクニック (1/2) - @IT
http://www.atmarkit.co.jp/ait/articles/1308/21/news008.html
アニメーション系プロパティ
●

transition
● CSSプロパティによる状態の変化を
アニメーション

●

animation
● キーフレームアニメーション
.box {
background-color: red;
transition: background-color 1s;
}
.box:hover {
background-color: blue;
}
.box {
animation: an-animation 2s infinite;
}
@keyframes an-animation {
0%, 100% { left: 0px; }
50% { left: 100px; }
}
参考:5分でわかるCSS3のグラフィックス機能

「5分でわかるCSS3のグラフィックス機能」サンプル
http://www.atmarkit.co.jp/fwcr/design/benkyo/webgraphics01/sample.html
Web Fonts
●

フォントをWebからダウンロードし
ブラウザで表示する技術

●

インストールされていないフォントが
利用可能

●

画像文字が必要だった表現
→ CSSのみで実現可能に
@font-face {
font-family: kadoppeFont;
src: url(kadoppe.woff)
}
.box {
font-family: kadoppeFont;
}
便利:Google Fonts

Google Fonts http://www.google.com/fonts
便利:FONTPLUS

FONTPLUS|フォントプラス http://webfont.fontplus.jp/
グラフィック描画機能
●

Canvas
● ビットマップ画像

●

Inline SVG
● ベクター画像

●

WebGL
● 3Dグラフィック
<canvas id="canvas" width="150"
height="150"></canvas>
<script>
! var canvas, ctx;
canvas =
document.getElementById('canvas');
! ctx = canvas.getContext('2d');
!
! ctx.strokeStyle = "#FF0000";
! ctx.strokeRect(25, 25, 100, 100);
!
! ctx.fillStyle
= "#FFCC00";
! ctx.fillRect(25, 25, 100, 100);
</script>
<svg width="150" height="150">
! <circle r="50" cx="75" cy="75" />
</svg>
デモ: The Shodo

The Shodo http://www.theshodo.com/
事例: ShareWis

無料学習サイトShareWis http://share-wis.com
事例: Hello Racer

HelloRacer™ WebGL http://helloracer.com/webgl/
JavaScript API編
Geolocation API

●

ユーザの位置情報を扱うためのAPI

●

Webアプリケーションがユーザの場所を
知ることが可能に
navigator.geolocation.getCurrentPosition(function(position) {
console.log(position.coords.latitude); // 緯度
console.log(position.coords.longitude); // 経度
});
事例: Google Map
localStorage
●

ブラウザにデータを保存

●

あとで取り出して使用可能

●

オフライン利用可能なWebアプリが
実現可能
window.localStorage.setItem(‘food’, ‘ラーメン’);
console.log( window.localStorage.getItem(‘food’) );
File API
●

コンピュータ上のファイルを読み込むた
めのAPI

●

使用例:ここにファイルをドロップ

JavaScript でのローカル ファイルの読み込み - HTML5 Rocks
http://www.html5rocks.com/ja/tutorials/file/dndfiles/
Web Audio API
●

音声の生成

●

フィルター処理

●

高精度の再生タイミング制御

●

使用例:
● ゲーム
● シンセサイザー
事例: Angry Birds

Angry Birds Chrome http://chrome.angrybirds.com/
スマホアプリ編
PhoneGap
●

スマートフォン用ネイティブアプリ開発フ
レームワーク
● iOS, Android, Windows Phone

●

HTML5 関連技術をつかって開発
● HTML5
● CSS
● JavaScript
事例:My Heart Camer

PhoneGap ¦ My Heart Camera http://phonegap.com/app/my-heart-camera/
第3のモバイルOS
●

iOSやAndroidに次ぐ第3のOS
● Firefox OS
● Tizen

●

プラットフォームがアプリが
HTML5 で実装されている
Firefox OS

ZTE Open Powered by Firefox OS 3G Unlocked Smartphone Orange eBay Exclusive ¦ eBay
http://www.ebay.com/itm/331031989534
Tizen

Urban Airship Takes the Stage at the Tizen Developer Conference
http://urbanairship.com/blog/2012/05/08/urban-airship-takes-the-stage-at-the-tizendeveloper-conference/
HTML5 についていくために
ついていく上での問題点
●

技術が広すぎる・多すぎる

●

新技術がどんどん登場する
● API

●

大量のJavaScriptライブラリ
● Backbone.js, D3.js, Three.js, ⃝⃝.js, ...
どうすれば…(́・ω・`)
1.とにかく興味を持つ
2.とにかくコードを書く
でも、コードを書くの
時間かかるよ…(́・ω・`)
もう手遅れ?間に合わない?
(́・ω・`)
3.高速にコードを書こう
そこで
Yeoman追いつけ!
高速Webアプリ開発
Yeoman
●

Web開発に関わる面倒なことを
自動化してくれるツール
● コードを書く前の準備
● コードを書いている時の作業
● コードを書き終わったあとの作業
Yeomanの構成要素
Yo
●

Yeomanのプロジェクトを生成

●

様々なひな形が公開されている
● webapp: 一般的なウェブアプリ用
● backbone: Backbone.js用
● chromeapp: Chrome Web Store用
Grunt
●

さまざまな作業を自動化
● 開発用サーバの起動
● ファイル更新の監視
● 自動テスト
● リリース作業
Bower
●

JavaScriptライブラリのパッケージ管理
● 検索
● インストール
● アップデート
● 依存関係の自動解決
実際につかってみる
手順
●

必要なツールの準備

●

プロジェクトの作成

●

サーバの起動

●

コードを書く

●

リリース
必要なツールの準備
●

Webブラウザ

●

テキストエディタ
● 普段使っているもの

●

ターミナル(通称:黒い画面)

●

node.js
node.js
●

サーバサイドJavaScript実行環境
● 詳しいことは知らなくてもOK

●

インストール
● pkg ファイルをダウンロードするのが簡単
http://nodejs.jp/nodejs.org_ja/docs/v0.10/
Yeomanのインストール

$ npm install -g yo grunt-cli bower generator-webapp

$ を除いた部分を
ターミナルで入力してENTER
プロジェクトの作成

$ cd /Users/kadoppe/Source/hello-yeoman
$ yo webapp
ひな形に何を含めるか尋ねられる
とりあえず Enter を入力
色々インストールされる
とりあえず待つ
生成されるプロジェクト
●

app/ ← Webアプリのコードはこの中

●

bower.json

●

Gruntfile.js

●

node_modules/

●

package.json

●

test/
app ディレクトリの中身
● 404.html
● bower_components/
● images/ : 画像ファイルを配置
● index.html
● robots.txt
● scripts/ : JavaScriptファイルを配置
● styles/ : CSSファイル
導入されているフレームワーク・ライブラリ

●

HTML5 Boilerplate

●

Modernizr

●

RequireJS

●

Bootstrap
HTML5 Boilerplate
●

HTML5でWeb制作を行うときの
ベストプラクティスを集めたテンプレ
● Normalize.css
● Google Analytics導入用タグ
● IE対応

●

詳しくは公式を見てください
http://html5boilerplate.com/
HTML5 Boilerplate
●

HTML5でWeb制作を行うときの
ベストプラクティスを集めたテンプレ
● Normalize.css
● Google Analytics導入用タグ
● IE対応
Modernizr
●

ブラウザがサポートしているHTML5・
CSS3の機能を自動検出

●

<html> 要素の class 属性に
サポート状況を出力してくれる

●

CSSやJavaScriptで処理を分岐
するのに便利
<html class=“js canvas canvastext
no-geolocation rgba hsla multiplebgs
borderimage borderradius boxshadow opacity
cssanimations csscolumns cssgradients
cssreflections csstransforms
csstransforms3d csstransitions video audio
localstorage sessionstorage webworkers
applicationcache fontface”>
RequireJS
●

JavaScriptで外部JavaScriptファイル
の読み込みを実現するライブラリ
● C言語でいうimport

●

大規模なJavaScriptプログラムを
書くときに便利
Bootstrap
●

有名なCSSフレームワーク

●

あらかじめ定義された class を要素に
設定するだけで良い感じのデザインに
● デザイン力がないときに便利
サーバの起動

$ grunt server
サーバが起動し
ブラウザにページが
自動的に表示される
コードを書く
●

テキストエディタで自由にコードを編集
● HTML: index.html
● JavaScript
● main.js: 設定関係のコード
● app.js: アプリケーションのコード
● CSS: main.scss
Live Reload
●

ファイルを変更したら自動的にブラウザ
を更新してくれる仕組み

●

「エディタ→保存→ブラウザ→更新→」
の手間が大幅に軽減
JavaScriptライブラリを導入

$ bower install d3.js
main.js におまじない追加
require.config({
paths: {
d3: '../bower_components/d3/d3'
},
shim: {
d3: {
exports: 'd3'
}
}
});
※ RequireJSのD3.js読み込み設定
app.js におまじない追加

define(['d3'], function (d3) {
});

※ RequireJSのD3.js読み込み設定
app.js におまじない追加

define(['d3'], function (d3) {
});

※ RequireJSのD3.js読み込み設定
さらに開発を高速化
●

CoffeeScript を使う
● コンパイルするとJavaScriptになる言語
● 同じことをよりシンプルに実現できる

●

Sass(SCSS)を使う
● コンパイルするとCSSになる言語
● 変数やmixin(関数)、入れ子構造が可能
$.click(function () {
console.log(‘clicked’);
});
! ! !
$.click ->
console.log ‘clicked’
.wrapper .inner a {
text-decoration: none;
}
.wrapper .inner a:hover {
text-decoration: underline;
}
! ! !
.wrapper {
.inner {
a {
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
}
リリース

$ grunt build
リリース時にやってくれること
●

JavaScriptとCSSの最適化
● 結合と圧縮

●

画像の最適化

●

リリースに必要なファイルのみを
dist/ ディレクトリに移動
まとめ
●

HTML5 はもう使える/使われている

●

技術の範囲・種類が多すぎてついていく
のが大変

●

興味を持ってとにかくコードを書くこと
が重要

●

Yeomanで開発・学習効率アップ
まだ間に合う!
追いつける!
おしまい

Más contenido relacionado

Más de Kohei Kadowaki

いまさら聞けない!?Backbone.js 超入門
いまさら聞けない!?Backbone.js 超入門いまさら聞けない!?Backbone.js 超入門
いまさら聞けない!?Backbone.js 超入門Kohei Kadowaki
 
プログラマーのお仕事
プログラマーのお仕事プログラマーのお仕事
プログラマーのお仕事Kohei Kadowaki
 
5分でわかる?Backbone.js ことはじめ
5分でわかる?Backbone.js ことはじめ5分でわかる?Backbone.js ことはじめ
5分でわかる?Backbone.js ことはじめKohei Kadowaki
 
SVGでつくるインタラクティブWebアプリケーション
SVGでつくるインタラクティブWebアプリケーションSVGでつくるインタラクティブWebアプリケーション
SVGでつくるインタラクティブWebアプリケーションKohei Kadowaki
 
UnityでつくるはじめてのPONG
UnityでつくるはじめてのPONGUnityでつくるはじめてのPONG
UnityでつくるはじめてのPONGKohei Kadowaki
 
インラインSVGをつかって地図っぽいものをつくってみる
インラインSVGをつかって地図っぽいものをつくってみるインラインSVGをつかって地図っぽいものをつくってみる
インラインSVGをつかって地図っぽいものをつくってみるKohei Kadowaki
 
ShareWisをFirefoxで動かすためのSVG的とりくみ
ShareWisをFirefoxで動かすためのSVG的とりくみShareWisをFirefoxで動かすためのSVG的とりくみ
ShareWisをFirefoxで動かすためのSVG的とりくみKohei Kadowaki
 
d3jsではじめるデータビジュアライゼーション入門
d3jsではじめるデータビジュアライゼーション入門d3jsではじめるデータビジュアライゼーション入門
d3jsではじめるデータビジュアライゼーション入門Kohei Kadowaki
 
ゲーム開発初心者の僕がUnity + WebSocketで何か作ってみた
ゲーム開発初心者の僕がUnity + WebSocketで何か作ってみたゲーム開発初心者の僕がUnity + WebSocketで何か作ってみた
ゲーム開発初心者の僕がUnity + WebSocketで何か作ってみたKohei Kadowaki
 

Más de Kohei Kadowaki (10)

いまさら聞けない!?Backbone.js 超入門
いまさら聞けない!?Backbone.js 超入門いまさら聞けない!?Backbone.js 超入門
いまさら聞けない!?Backbone.js 超入門
 
プログラマーのお仕事
プログラマーのお仕事プログラマーのお仕事
プログラマーのお仕事
 
5分でわかる?Backbone.js ことはじめ
5分でわかる?Backbone.js ことはじめ5分でわかる?Backbone.js ことはじめ
5分でわかる?Backbone.js ことはじめ
 
SVGでつくるインタラクティブWebアプリケーション
SVGでつくるインタラクティブWebアプリケーションSVGでつくるインタラクティブWebアプリケーション
SVGでつくるインタラクティブWebアプリケーション
 
UnityでつくるはじめてのPONG
UnityでつくるはじめてのPONGUnityでつくるはじめてのPONG
UnityでつくるはじめてのPONG
 
インラインSVGをつかって地図っぽいものをつくってみる
インラインSVGをつかって地図っぽいものをつくってみるインラインSVGをつかって地図っぽいものをつくってみる
インラインSVGをつかって地図っぽいものをつくってみる
 
ShareWisをFirefoxで動かすためのSVG的とりくみ
ShareWisをFirefoxで動かすためのSVG的とりくみShareWisをFirefoxで動かすためのSVG的とりくみ
ShareWisをFirefoxで動かすためのSVG的とりくみ
 
d3jsではじめるデータビジュアライゼーション入門
d3jsではじめるデータビジュアライゼーション入門d3jsではじめるデータビジュアライゼーション入門
d3jsではじめるデータビジュアライゼーション入門
 
ゲーム開発初心者の僕がUnity + WebSocketで何か作ってみた
ゲーム開発初心者の僕がUnity + WebSocketで何か作ってみたゲーム開発初心者の僕がUnity + WebSocketで何か作ってみた
ゲーム開発初心者の僕がUnity + WebSocketで何か作ってみた
 
SocketStream入門
SocketStream入門SocketStream入門
SocketStream入門
 

Último

情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法ssuser370dd7
 
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-LoopへTetsuya Nihonmatsu
 
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~arts yokohama
 
2024 01 Virtual_Counselor
2024 01 Virtual_Counselor 2024 01 Virtual_Counselor
2024 01 Virtual_Counselor arts yokohama
 
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)ssuser539845
 
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見Shumpei Kishi
 
20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdfAyachika Kitazaki
 
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdfTaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdfMatsushita Laboratory
 

Último (11)

情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
 
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
 
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
 
2024 01 Virtual_Counselor
2024 01 Virtual_Counselor 2024 01 Virtual_Counselor
2024 01 Virtual_Counselor
 
2024 04 minnanoito
2024 04 minnanoito2024 04 minnanoito
2024 04 minnanoito
 
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
 
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
 
What is the world where you can make your own semiconductors?
What is the world where you can make your own semiconductors?What is the world where you can make your own semiconductors?
What is the world where you can make your own semiconductors?
 
20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf
 
2024 03 CTEA
2024 03 CTEA2024 03 CTEA
2024 03 CTEA
 
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdfTaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
 

まだ間に合うHTML5 - Yeomanで追いつけ!高速webアプリ開発