SlideShare a Scribd company logo
SVGでつくる
インタラクティブWebアプリケーション

2012/10/06 神戸ITフェスティバル
ShareWis Inc. 門脇 恒平




                         1
自己紹介
• 名前:門脇   恒平 @kadoppe

• 職業:ソフトウェアエンジニア
Webアプリケーション / iOSアプリケーション

• 所属:
ShareWis Inc. CTO / HTML5-West.jpコアメンバ

• 昨日までCEATEC   Japanという展示会で
出展してました。
                   2
本日の資料

• プレゼンスライド


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


• サンプルコード


• GitHub: https://github.com/kadoppe/kobe-it-fes-2012



                         3
SVG、知ってますか?



       4
質問1

名前を聞いたことある人?



      5
質問2
少しでも触ったことがある人?



       6
質問3
実際に仕事で使っている人?



       7
僕とSVG


• 実際に仕事でバリバリ使ってます


• SVGを使うようになって世界が広がりました


• どんな風に使っているのかについては後ほど




             8
SVGを一言で表すと


    画像         マークアップ
           +
  フォーマット         言語




           9
SVGの仕様



    全部読むのは大変!




         10
SVGマスターへの3ステップ

Step1   SVGの基本的な特徴を理解し、実際のWebサイ
 初級     ト制作に役立てることができる

Step2   SVGの各種表現方法を駆使して、画像に対して
 中級     いろいろな効果を加えることができる

Step3   SVGとJavaScript / CSS を連携させて、Web
 上級     アプリケーションを開発することができる


                     11
SVGマスターへの3ステップ

Step1   SVGの基本的な特徴を理解し、実際のWebサイ
 初級     ト制作に役立てることができる
                               今日の主題

Step2   SVGの各種表現方法を駆使して、画像に対して
 中級     いろいろな効果を加えることができる

Step3   SVGとJavaScript / CSS を連携させて、Web
 上級     アプリケーションを開発することができる


                     12
本日のアウトライン

1.SVGってなんだろう?

2.SVGでWebアプリケーション?

3.SVGをマークアップしてみよう

4.画像に変化や動きをつけてみよう

5.JavaScript/CSSと連携させよう

                  13
SVGってなんだろう?



       14
SVGとは?

• S:   Scalable (拡大可能な)

• V:   Vector (ベクター)

• G:   Graphics (画像)

• 直訳すると「拡大可能なベクター画像」



                       15
SVGを一言で表すと


    画像          マークアップ
           +
  フォーマット          言語




           16
画像フォーマットとしてのSVG
•   JPEG, PNG, GIFのなかま

•   Quick Lookで表示できる

•   Webブラウザでも表示できる

•   Illustratorなどのアプリケーションから書き出せる




                         17
マークアップ言語としてのSVG
•   XML形式のマークアップ言語

•   HTMLみたいなものだと考えればOK

•   画像なのにテキストエディタで作成・編集可能




                 18
SVGの特徴


特徴1   拡大・縮小してもキレイに見える!



特徴2   画像内のパーツを個別に扱える




             19
特徴1   拡大・縮小してもキレイに見える!



                 理由:
                 SVGは
                 ベクターグラフィック
                 だから



            20
ビットマップ vs ベクターグラフィック




   点で画像を表現        線で画像を表現
                   出展: http://ja.wikipedia.org/wiki/ファイル:Bitmap_VS_SVG.svg
             21
特徴2
      パーツを個別に扱える

               •パーツの移動

               •パーツの色・形の変更

               •パーツのクリック検出

               •など


          22
その他の機能
• フィルター(ぼかし、ドロップシャドウなど)


• クリッピングマスク


• グラデーション


• アニメーション


• テキスト情報の保持


              23
SVGでWebアプリケーション?




        24
SVGとWebアプリの関係

                    <!DOCTYPE html>
• インラインSVG          <html>
                      <head></head>
(HTML5の機能のひとつ)        <body>
                        <h1>SVG画像だよ。<h1>

• HTMLファイルの中にSVG        <svg>
                          <circle>
 のタグを直接記述できる            </svg>
                      </body>
                    </html>




               25
インラインSVGによってできること


その1   CSSによる見た目の変更


その2   JavaScriptによる画像の操作、イベント検出


  グラフィカル & インタラクティブな
  Webアプリケーションが実現可能に

               26
はいだしょうこ画伯の5年間の成長を、SVGで
事例1
      モーフィングにしてみた




             モーフィングの例




               27   http://jsdo.it/norahiko/monster-spoo
事例2
      ShareWis




          学習を冒険に変える無料学習サイト
            「知識の地図」をSVGで実装

             28      http://share-wis.com
SVGをマークアップしてみよう




       29
SVGで描画できる基本的な図形
•   四角形 (<rect>要素)

•   円 (<circle>要素)

•   楕円 (<ellipse>要素)

•   直線 (<line>要素)

•   折れ線 (<polyline>要素)

•   多角形 (<polygon>要素)

•   パス (<path>要素)
                         30
円 (<circle>要素)
• 役割


 • 円を描画する


<circle r="半径"
       cx="円の中心のx座標"
       cy="円の中心のy座標"
       fill="塗りつぶし色" />


                 31
直線 (<line>要素)
• 役割


 • 直線を描画する


<line x1="始点のx座標"
       y1="始点のy座標"
       x2="終点のx座標"
       y2="終点のy座標"
       stroke=”線の色” />

                     32
DEMO




 33
画像に変化や動きをつけてみよう




       34
画像に変化や動きをつける方法

• 変化


 • SVGフィルタ


• 動き


 • SVGアニメーション



                35
SVGフィルタ


               変換後
 元画像   フィルタ
                画像




  さまざまな効果をSVG画像に適用

          36
フィルタの重ねがけ


                         変換後
元画像   フィルタ        フィルタ
                         画像




  複数の効果を重ねることもできる

             37
SVGフィルタの例
• 色の変換   (feColorMatrix)

• ぼかし   (feGaussianBlur)

• 2つのフィルタリング結果を合成               (feBlend)

• 平行移動   (feOffset)

• 光をあてる    (feDiffuseLighting, feSpecularLighting)

                           38
ドロップシャドウを適用する
• 4つのフィルタを利用


• ぼかし   (feGaussianBlur)

• 色の変換   (feColorMatrix)

• 平行移動   (feOffset)

• 2つのフィルタリング結果を合成          (feBlend)

                     39
DEMO




 40
ドロップシャドウまとめ
 元画像          ぼかし        半透明   ずらす
(アルファチャンネル)




                         元画像    合成



                               ドロップ
                               シャドウ
                    41
SVGアニメーション
• 図形の属性値に時間的変化を与えられる機能


• 例)


 • <circle>要素の半径


 • <circle>要素の中心座標


 • <circle>要素の塗りつぶし色


                     42
<animate>要素
• アニメーションさせたい図形の子要素として追加する

<animate attributeName=”変化させる属性名”
     begin=”開始時間”
     dur=”継続時間”
     from=”属性の初期値”
     to=”属性の終了値
     repeatCount=”リピート回数” />


                    43
DEMO




 44
JavaScript / CSSと連携させよう




           45
CSSとの連携
 • 図形の属性値をCSSで指定

<style>
  circle.large {
    fill: #FFBB00;
  }
</style>

<circle class=”large” ... />



                     46
DEMO




 47
JavaScriptとの連携
• できること


• 画像に図形をリアルタイムに追加


• 図形にイベントハンドラを登録


   SVGをつかったインタラクティブな
   Webアプリケーションが実現可能に


            48
画像に図形をリアルタイムに追加



手順1   createElementNS()メソッドで図形を生成


手順2   appendChild()メソッドで図形を描画




                49
DEMO




 50
図形にイベントハンドラを登録


手順1   addEventListener()メソッドを呼び出す


手順2   イベント発生時の処理を実装




                 51
DEMO




 52
まとめ
• SVG                       
                            

 • 画像フォーマット        + マークアップ言語

 • アニメーションや画像処理の機能が利用可能


• JavaScript   + CSS + SVG

 • インタラクティブWebアプリケーションが実現可能


                        53
おしまい!

ご清聴ありがとうございました!



       54

More Related Content

What's hot

PyTorchLightning ベース Hydra+MLFlow+Optuna による機械学習開発環境の構築
PyTorchLightning ベース Hydra+MLFlow+Optuna による機械学習開発環境の構築PyTorchLightning ベース Hydra+MLFlow+Optuna による機械学習開発環境の構築
PyTorchLightning ベース Hydra+MLFlow+Optuna による機械学習開発環境の構築
Kosuke Shinoda
 
DSIRNLP #3 LZ4 の速さの秘密に迫ってみる
DSIRNLP #3 LZ4 の速さの秘密に迫ってみるDSIRNLP #3 LZ4 の速さの秘密に迫ってみる
DSIRNLP #3 LZ4 の速さの秘密に迫ってみる
Atsushi KOMIYA
 
Data-Centric AI開発における データ生成の取り組み
Data-Centric AI開発における データ生成の取り組みData-Centric AI開発における データ生成の取り組み
Data-Centric AI開発における データ生成の取り組み
Takeshi Suzuki
 
ConvNetの歴史とResNet亜種、ベストプラクティス
ConvNetの歴史とResNet亜種、ベストプラクティスConvNetの歴史とResNet亜種、ベストプラクティス
ConvNetの歴史とResNet亜種、ベストプラクティス
Yusuke Uchida
 
時系列問題に対するCNNの有用性検証
時系列問題に対するCNNの有用性検証時系列問題に対するCNNの有用性検証
時系列問題に対するCNNの有用性検証
Masaharu Kinoshita
 
強化学習の基礎と深層強化学習(東京大学 松尾研究室 深層強化学習サマースクール講義資料)
強化学習の基礎と深層強化学習(東京大学 松尾研究室 深層強化学習サマースクール講義資料)強化学習の基礎と深層強化学習(東京大学 松尾研究室 深層強化学習サマースクール講義資料)
強化学習の基礎と深層強化学習(東京大学 松尾研究室 深層強化学習サマースクール講義資料)
Shota Imai
 
論文紹介-Multi-Objective Deep Reinforcement Learning
論文紹介-Multi-Objective Deep Reinforcement Learning論文紹介-Multi-Objective Deep Reinforcement Learning
論文紹介-Multi-Objective Deep Reinforcement Learning
Shunta Nomura
 
【メタサーベイ】基盤モデル / Foundation Models
【メタサーベイ】基盤モデル / Foundation Models【メタサーベイ】基盤モデル / Foundation Models
【メタサーベイ】基盤モデル / Foundation Models
cvpaper. challenge
 
平滑化処理の繰り返しによる画像セグメンテーションのためのグラフカット
平滑化処理の繰り返しによる画像セグメンテーションのためのグラフカット平滑化処理の繰り返しによる画像セグメンテーションのためのグラフカット
平滑化処理の繰り返しによる画像セグメンテーションのためのグラフカット
MPRG_Chubu_University
 
自己教師学習(Self-Supervised Learning)
自己教師学習(Self-Supervised Learning)自己教師学習(Self-Supervised Learning)
自己教師学習(Self-Supervised Learning)
cvpaper. challenge
 
強化学習と逆強化学習を組み合わせた模倣学習
強化学習と逆強化学習を組み合わせた模倣学習強化学習と逆強化学習を組み合わせた模倣学習
強化学習と逆強化学習を組み合わせた模倣学習
Eiji Uchibe
 
SageMakerを使った異常検知
SageMakerを使った異常検知SageMakerを使った異常検知
SageMakerを使った異常検知
Ryohei Yamaguchi
 
【DL輪読会】Bridge-Prompt: Toward Ordinal Action Understanding in Instructional Vi...
【DL輪読会】Bridge-Prompt: Toward Ordinal Action Understanding in Instructional Vi...【DL輪読会】Bridge-Prompt: Toward Ordinal Action Understanding in Instructional Vi...
【DL輪読会】Bridge-Prompt: Toward Ordinal Action Understanding in Instructional Vi...
Deep Learning JP
 
BigQuery Query Optimization クエリ高速化編
BigQuery Query Optimization クエリ高速化編BigQuery Query Optimization クエリ高速化編
BigQuery Query Optimization クエリ高速化編
sutepoi
 
プログラミングコンテストでのデータ構造
プログラミングコンテストでのデータ構造プログラミングコンテストでのデータ構造
プログラミングコンテストでのデータ構造
Takuya Akiba
 
テスト文字列に「うんこ」と入れるな
テスト文字列に「うんこ」と入れるなテスト文字列に「うんこ」と入れるな
テスト文字列に「うんこ」と入れるな
Kentaro Matsui
 
BigQuery で 150万円 使ったときの話
BigQuery で 150万円 使ったときの話BigQuery で 150万円 使ったときの話
BigQuery で 150万円 使ったときの話
itkr
 
モデル最適化指標・評価指標の選び方
モデル最適化指標・評価指標の選び方モデル最適化指標・評価指標の選び方
モデル最適化指標・評価指標の選び方
幹雄 小川
 
異次元のグラフデータベースNeo4j
異次元のグラフデータベースNeo4j異次元のグラフデータベースNeo4j
異次元のグラフデータベースNeo4j
昌桓 李
 
Swin Transformer (ICCV'21 Best Paper) を完璧に理解する資料
Swin Transformer (ICCV'21 Best Paper) を完璧に理解する資料Swin Transformer (ICCV'21 Best Paper) を完璧に理解する資料
Swin Transformer (ICCV'21 Best Paper) を完璧に理解する資料
Yusuke Uchida
 

What's hot (20)

PyTorchLightning ベース Hydra+MLFlow+Optuna による機械学習開発環境の構築
PyTorchLightning ベース Hydra+MLFlow+Optuna による機械学習開発環境の構築PyTorchLightning ベース Hydra+MLFlow+Optuna による機械学習開発環境の構築
PyTorchLightning ベース Hydra+MLFlow+Optuna による機械学習開発環境の構築
 
DSIRNLP #3 LZ4 の速さの秘密に迫ってみる
DSIRNLP #3 LZ4 の速さの秘密に迫ってみるDSIRNLP #3 LZ4 の速さの秘密に迫ってみる
DSIRNLP #3 LZ4 の速さの秘密に迫ってみる
 
Data-Centric AI開発における データ生成の取り組み
Data-Centric AI開発における データ生成の取り組みData-Centric AI開発における データ生成の取り組み
Data-Centric AI開発における データ生成の取り組み
 
ConvNetの歴史とResNet亜種、ベストプラクティス
ConvNetの歴史とResNet亜種、ベストプラクティスConvNetの歴史とResNet亜種、ベストプラクティス
ConvNetの歴史とResNet亜種、ベストプラクティス
 
時系列問題に対するCNNの有用性検証
時系列問題に対するCNNの有用性検証時系列問題に対するCNNの有用性検証
時系列問題に対するCNNの有用性検証
 
強化学習の基礎と深層強化学習(東京大学 松尾研究室 深層強化学習サマースクール講義資料)
強化学習の基礎と深層強化学習(東京大学 松尾研究室 深層強化学習サマースクール講義資料)強化学習の基礎と深層強化学習(東京大学 松尾研究室 深層強化学習サマースクール講義資料)
強化学習の基礎と深層強化学習(東京大学 松尾研究室 深層強化学習サマースクール講義資料)
 
論文紹介-Multi-Objective Deep Reinforcement Learning
論文紹介-Multi-Objective Deep Reinforcement Learning論文紹介-Multi-Objective Deep Reinforcement Learning
論文紹介-Multi-Objective Deep Reinforcement Learning
 
【メタサーベイ】基盤モデル / Foundation Models
【メタサーベイ】基盤モデル / Foundation Models【メタサーベイ】基盤モデル / Foundation Models
【メタサーベイ】基盤モデル / Foundation Models
 
平滑化処理の繰り返しによる画像セグメンテーションのためのグラフカット
平滑化処理の繰り返しによる画像セグメンテーションのためのグラフカット平滑化処理の繰り返しによる画像セグメンテーションのためのグラフカット
平滑化処理の繰り返しによる画像セグメンテーションのためのグラフカット
 
自己教師学習(Self-Supervised Learning)
自己教師学習(Self-Supervised Learning)自己教師学習(Self-Supervised Learning)
自己教師学習(Self-Supervised Learning)
 
強化学習と逆強化学習を組み合わせた模倣学習
強化学習と逆強化学習を組み合わせた模倣学習強化学習と逆強化学習を組み合わせた模倣学習
強化学習と逆強化学習を組み合わせた模倣学習
 
SageMakerを使った異常検知
SageMakerを使った異常検知SageMakerを使った異常検知
SageMakerを使った異常検知
 
【DL輪読会】Bridge-Prompt: Toward Ordinal Action Understanding in Instructional Vi...
【DL輪読会】Bridge-Prompt: Toward Ordinal Action Understanding in Instructional Vi...【DL輪読会】Bridge-Prompt: Toward Ordinal Action Understanding in Instructional Vi...
【DL輪読会】Bridge-Prompt: Toward Ordinal Action Understanding in Instructional Vi...
 
BigQuery Query Optimization クエリ高速化編
BigQuery Query Optimization クエリ高速化編BigQuery Query Optimization クエリ高速化編
BigQuery Query Optimization クエリ高速化編
 
プログラミングコンテストでのデータ構造
プログラミングコンテストでのデータ構造プログラミングコンテストでのデータ構造
プログラミングコンテストでのデータ構造
 
テスト文字列に「うんこ」と入れるな
テスト文字列に「うんこ」と入れるなテスト文字列に「うんこ」と入れるな
テスト文字列に「うんこ」と入れるな
 
BigQuery で 150万円 使ったときの話
BigQuery で 150万円 使ったときの話BigQuery で 150万円 使ったときの話
BigQuery で 150万円 使ったときの話
 
モデル最適化指標・評価指標の選び方
モデル最適化指標・評価指標の選び方モデル最適化指標・評価指標の選び方
モデル最適化指標・評価指標の選び方
 
異次元のグラフデータベースNeo4j
異次元のグラフデータベースNeo4j異次元のグラフデータベースNeo4j
異次元のグラフデータベースNeo4j
 
Swin Transformer (ICCV'21 Best Paper) を完璧に理解する資料
Swin Transformer (ICCV'21 Best Paper) を完璧に理解する資料Swin Transformer (ICCV'21 Best Paper) を完璧に理解する資料
Swin Transformer (ICCV'21 Best Paper) を完璧に理解する資料
 

Similar to SVGでつくるインタラクティブWebアプリケーション

ShareWisをFirefoxで動かすためのSVG的とりくみ
ShareWisをFirefoxで動かすためのSVG的とりくみShareWisをFirefoxで動かすためのSVG的とりくみ
ShareWisをFirefoxで動かすためのSVG的とりくみ
Kohei Kadowaki
 
インラインSVGをつかって地図っぽいものをつくってみる
インラインSVGをつかって地図っぽいものをつくってみるインラインSVGをつかって地図っぽいものをつくってみる
インラインSVGをつかって地図っぽいものをつくってみる
Kohei Kadowaki
 
SVG MANIAX - CSS Nite After dark7
SVG MANIAX - CSS Nite After dark7SVG MANIAX - CSS Nite After dark7
SVG MANIAX - CSS Nite After dark7
Naoki Matsuda
 
SVG MANIAX Ver.2 - Mars vanilla
SVG MANIAX Ver.2 -  Mars vanillaSVG MANIAX Ver.2 -  Mars vanilla
SVG MANIAX Ver.2 - Mars vanilla
Naoki Matsuda
 
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
Yasunobu Ikeda
 
HTML5-20100626
HTML5-20100626HTML5-20100626
HTML5-20100626
Taku AMANO
 
Canvas勉強会
Canvas勉強会Canvas勉強会
Canvas勉強会
Tsutomu Kawamura
 
Firefox OSでSVGをつかってみた
Firefox OSでSVGをつかってみたFirefox OSでSVGをつかってみた
Firefox OSでSVGをつかってみた
Kohei Kadowaki
 
レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】
Yasuhito Yabe
 
モックアップやプロトタイプづくりを 加速させる。それが SVG。@DIST.4 「Life is Short」
モックアップやプロトタイプづくりを 加速させる。それが SVG。@DIST.4 「Life is Short」モックアップやプロトタイプづくりを 加速させる。それが SVG。@DIST.4 「Life is Short」
モックアップやプロトタイプづくりを 加速させる。それが SVG。@DIST.4 「Life is Short」
Naoki Matsuda
 
【Unity道場】VectorGraphicsで作る エモい表現
【Unity道場】VectorGraphicsで作る エモい表現【Unity道場】VectorGraphicsで作る エモい表現
【Unity道場】VectorGraphicsで作る エモい表現
Unity Technologies Japan K.K.
 
I want Make full svg website
I want Make full svg websiteI want Make full svg website
I want Make full svg website
Hidetsugu Takahashi
 
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみようJavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
Hiroaki Wakamatsu
 
覚えておいて損はない! Fireworksの便利なTips特集
覚えておいて損はない! Fireworksの便利なTips特集覚えておいて損はない! Fireworksの便利なTips特集
覚えておいて損はない! Fireworksの便利なTips特集
Akira Maruyama
 
Inline SVG - トラブルとその対策
Inline SVG - トラブルとその対策Inline SVG - トラブルとその対策
Inline SVG - トラブルとその対策
Kohei Kadowaki
 
スマホにおけるWebGL入門
スマホにおけるWebGL入門スマホにおけるWebGL入門
スマホにおけるWebGL入門
Yohta Kanke
 
D3jsを使ってみた@wcan lt大会
D3jsを使ってみた@wcan lt大会D3jsを使ってみた@wcan lt大会
D3jsを使ってみた@wcan lt大会
Takuya Ueda
 
What's Sketch.app
What's Sketch.appWhat's Sketch.app
What's Sketch.app
littlebustersreply
 
インタラクティブコンテンツにおけるHTML5とFlash
インタラクティブコンテンツにおけるHTML5とFlashインタラクティブコンテンツにおけるHTML5とFlash
インタラクティブコンテンツにおけるHTML5とFlash
Yasunobu Ikeda
 
使う前に知っておきたいSVGのこと
使う前に知っておきたいSVGのこと使う前に知っておきたいSVGのこと
使う前に知っておきたいSVGのこと
Kasumi Morita
 

Similar to SVGでつくるインタラクティブWebアプリケーション (20)

ShareWisをFirefoxで動かすためのSVG的とりくみ
ShareWisをFirefoxで動かすためのSVG的とりくみShareWisをFirefoxで動かすためのSVG的とりくみ
ShareWisをFirefoxで動かすためのSVG的とりくみ
 
インラインSVGをつかって地図っぽいものをつくってみる
インラインSVGをつかって地図っぽいものをつくってみるインラインSVGをつかって地図っぽいものをつくってみる
インラインSVGをつかって地図っぽいものをつくってみる
 
SVG MANIAX - CSS Nite After dark7
SVG MANIAX - CSS Nite After dark7SVG MANIAX - CSS Nite After dark7
SVG MANIAX - CSS Nite After dark7
 
SVG MANIAX Ver.2 - Mars vanilla
SVG MANIAX Ver.2 -  Mars vanillaSVG MANIAX Ver.2 -  Mars vanilla
SVG MANIAX Ver.2 - Mars vanilla
 
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
 
HTML5-20100626
HTML5-20100626HTML5-20100626
HTML5-20100626
 
Canvas勉強会
Canvas勉強会Canvas勉強会
Canvas勉強会
 
Firefox OSでSVGをつかってみた
Firefox OSでSVGをつかってみたFirefox OSでSVGをつかってみた
Firefox OSでSVGをつかってみた
 
レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】
 
モックアップやプロトタイプづくりを 加速させる。それが SVG。@DIST.4 「Life is Short」
モックアップやプロトタイプづくりを 加速させる。それが SVG。@DIST.4 「Life is Short」モックアップやプロトタイプづくりを 加速させる。それが SVG。@DIST.4 「Life is Short」
モックアップやプロトタイプづくりを 加速させる。それが SVG。@DIST.4 「Life is Short」
 
【Unity道場】VectorGraphicsで作る エモい表現
【Unity道場】VectorGraphicsで作る エモい表現【Unity道場】VectorGraphicsで作る エモい表現
【Unity道場】VectorGraphicsで作る エモい表現
 
I want Make full svg website
I want Make full svg websiteI want Make full svg website
I want Make full svg website
 
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみようJavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
 
覚えておいて損はない! Fireworksの便利なTips特集
覚えておいて損はない! Fireworksの便利なTips特集覚えておいて損はない! Fireworksの便利なTips特集
覚えておいて損はない! Fireworksの便利なTips特集
 
Inline SVG - トラブルとその対策
Inline SVG - トラブルとその対策Inline SVG - トラブルとその対策
Inline SVG - トラブルとその対策
 
スマホにおけるWebGL入門
スマホにおけるWebGL入門スマホにおけるWebGL入門
スマホにおけるWebGL入門
 
D3jsを使ってみた@wcan lt大会
D3jsを使ってみた@wcan lt大会D3jsを使ってみた@wcan lt大会
D3jsを使ってみた@wcan lt大会
 
What's Sketch.app
What's Sketch.appWhat's Sketch.app
What's Sketch.app
 
インタラクティブコンテンツにおけるHTML5とFlash
インタラクティブコンテンツにおけるHTML5とFlashインタラクティブコンテンツにおけるHTML5とFlash
インタラクティブコンテンツにおけるHTML5とFlash
 
使う前に知っておきたいSVGのこと
使う前に知っておきたいSVGのこと使う前に知っておきたいSVGのこと
使う前に知っておきたいSVGのこと
 

More from Kohei Kadowaki

Pebble + JavaScriptでつくるスマートウォッチアプリ
Pebble + JavaScriptでつくるスマートウォッチアプリPebble + JavaScriptでつくるスマートウォッチアプリ
Pebble + JavaScriptでつくるスマートウォッチアプリ
Kohei Kadowaki
 
Webでもできるデータビジュアライゼーション
WebでもできるデータビジュアライゼーションWebでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Kohei Kadowaki
 
いまさら聞けない!?Backbone.js 超入門
いまさら聞けない!?Backbone.js 超入門いまさら聞けない!?Backbone.js 超入門
いまさら聞けない!?Backbone.js 超入門
Kohei Kadowaki
 
D3.js と SVG によるデータビジュアライゼーション
D3.js と SVG によるデータビジュアライゼーションD3.js と SVG によるデータビジュアライゼーション
D3.js と SVG によるデータビジュアライゼーション
Kohei Kadowaki
 
プログラマーのお仕事
プログラマーのお仕事プログラマーのお仕事
プログラマーのお仕事
Kohei Kadowaki
 
5分でわかる?Backbone.js ことはじめ
5分でわかる?Backbone.js ことはじめ5分でわかる?Backbone.js ことはじめ
5分でわかる?Backbone.js ことはじめ
Kohei Kadowaki
 
UnityでつくるはじめてのPONG
UnityでつくるはじめてのPONGUnityでつくるはじめてのPONG
UnityでつくるはじめてのPONG
Kohei Kadowaki
 
d3jsではじめるデータビジュアライゼーション入門
d3jsではじめるデータビジュアライゼーション入門d3jsではじめるデータビジュアライゼーション入門
d3jsではじめるデータビジュアライゼーション入門
Kohei Kadowaki
 
ゲーム開発初心者の僕がUnity + WebSocketで何か作ってみた
ゲーム開発初心者の僕がUnity + WebSocketで何か作ってみたゲーム開発初心者の僕がUnity + WebSocketで何か作ってみた
ゲーム開発初心者の僕がUnity + WebSocketで何か作ってみた
Kohei Kadowaki
 
SocketStream入門
SocketStream入門SocketStream入門
SocketStream入門
Kohei Kadowaki
 
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリWebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
Kohei Kadowaki
 
WebSocketことはじめ
WebSocketことはじめWebSocketことはじめ
WebSocketことはじめ
Kohei Kadowaki
 

More from Kohei Kadowaki (13)

Pebble + JavaScriptでつくるスマートウォッチアプリ
Pebble + JavaScriptでつくるスマートウォッチアプリPebble + JavaScriptでつくるスマートウォッチアプリ
Pebble + JavaScriptでつくるスマートウォッチアプリ
 
Webでもできるデータビジュアライゼーション
WebでもできるデータビジュアライゼーションWebでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
 
いまさら聞けない!?Backbone.js 超入門
いまさら聞けない!?Backbone.js 超入門いまさら聞けない!?Backbone.js 超入門
いまさら聞けない!?Backbone.js 超入門
 
D3.js と SVG によるデータビジュアライゼーション
D3.js と SVG によるデータビジュアライゼーションD3.js と SVG によるデータビジュアライゼーション
D3.js と SVG によるデータビジュアライゼーション
 
プログラマーのお仕事
プログラマーのお仕事プログラマーのお仕事
プログラマーのお仕事
 
5分でわかる?Backbone.js ことはじめ
5分でわかる?Backbone.js ことはじめ5分でわかる?Backbone.js ことはじめ
5分でわかる?Backbone.js ことはじめ
 
UnityでつくるはじめてのPONG
UnityでつくるはじめてのPONGUnityでつくるはじめてのPONG
UnityでつくるはじめてのPONG
 
d3jsではじめるデータビジュアライゼーション入門
d3jsではじめるデータビジュアライゼーション入門d3jsではじめるデータビジュアライゼーション入門
d3jsではじめるデータビジュアライゼーション入門
 
ゲーム開発初心者の僕がUnity + WebSocketで何か作ってみた
ゲーム開発初心者の僕がUnity + WebSocketで何か作ってみたゲーム開発初心者の僕がUnity + WebSocketで何か作ってみた
ゲーム開発初心者の僕がUnity + WebSocketで何か作ってみた
 
SocketStream入門
SocketStream入門SocketStream入門
SocketStream入門
 
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリWebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
 
AndroidでWebSocket
AndroidでWebSocketAndroidでWebSocket
AndroidでWebSocket
 
WebSocketことはじめ
WebSocketことはじめWebSocketことはじめ
WebSocketことはじめ
 

SVGでつくるインタラクティブWebアプリケーション