AndroidとSVG (ABC 2013 Spring LT)

19
AndroidとSVG 渡辺悟史(@sassy_watson) ABC 2013 spring 2013/3/16

description

 

Transcript of AndroidとSVG (ABC 2013 Spring LT)

Page 1: AndroidとSVG (ABC 2013 Spring LT)

AndroidとSVG渡辺悟史(@sassy_watson)

ABC 2013 spring2013/3/16

Page 2: AndroidとSVG (ABC 2013 Spring LT)

自己紹介

•渡辺 悟史(わたなべ さとし)•通称 さっしー• twitter:@sassy_watson

Page 3: AndroidとSVG (ABC 2013 Spring LT)

自己紹介

非PC向けWebブラウザ開発

SNSアプリAndroid版開発

zigsowサービス開発

Page 4: AndroidとSVG (ABC 2013 Spring LT)

http://zigsow.jp

Page 5: AndroidとSVG (ABC 2013 Spring LT)

http://zigsow.jp

•ジグソーは自分の大切なものをレビューしあうコミュニティサイトです。

•ぜひ使ってみてください。

Page 6: AndroidとSVG (ABC 2013 Spring LT)

自己紹介

• 日本Androidの会テスト部 運営委員

• テスト部で本書きました(私はレビュアーとして参加しました)。ぜひ読んでみてください!

Page 7: AndroidとSVG (ABC 2013 Spring LT)

今日伝えたいこと

•SVGとは何か?• AndroidでSVGを使えるの?

Page 8: AndroidとSVG (ABC 2013 Spring LT)

そもそもSVGって何?

Page 9: AndroidとSVG (ABC 2013 Spring LT)

SVGとは• Salable Vector Graphics• 拡大縮小可能なベクター画像のフォーマット• ピクセルの情報ではなく、位置や線の引き方の情報を持っていて、計算してから描画する

•拡大・縮小しても同じ画像品質なので、様々なデバイスに対応できる(スマートフォンでもタブレットでも)

Page 10: AndroidとSVG (ABC 2013 Spring LT)

SVGの書き方

•SVGはXMLで書かれる•ルートの要素はSVG

Page 11: AndroidとSVG (ABC 2013 Spring LT)

SVGが扱うグラフィックス要素

•ベクター画像•ラスタ画像•テキスト

Page 12: AndroidとSVG (ABC 2013 Spring LT)

ベクター画像• SVGは以下の基本図形が用意されている

o rect (矩形)o circle (円)o ellipse (楕円)o line (直線)o polyline (曲線)o polygon (多角形)

• path要素でベジェ曲線を表現

Page 13: AndroidとSVG (ABC 2013 Spring LT)

<?xml version="1.0" ?><svg xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="100" height="100" fill="red" stroke="blue" stroke-width="2" /></svg>

Page 14: AndroidとSVG (ABC 2013 Spring LT)

HTMLとSVG

•HTMLの中でもSVGを使うことが可能<html><body><svg> <rect x="10" y="10" width="100" height="100" fill="red" /></svg></body></html>

Page 15: AndroidとSVG (ABC 2013 Spring LT)

SVGとAndroid

•Androidでは、Android3.0(Honeycomb)以降、WebViewでSVGをサポート

Page 16: AndroidとSVG (ABC 2013 Spring LT)

AndroidでSVG

•SVGファイルをWebViewでロードpublic class MainActivity extends Activity {

@Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); WebView wv = (WebView)findViewById(R.id.webview); wv.loadUrl("file:///android_asset/index.svg"); }}

Page 17: AndroidとSVG (ABC 2013 Spring LT)
Page 18: AndroidとSVG (ABC 2013 Spring LT)

•皆さんもSVGを使ってAndroidアプリを作ってみましょう!

Page 19: AndroidとSVG (ABC 2013 Spring LT)