Sorry, This page doesn't support your browser
現在使用中のブラウザでは見れません
  @shogo82148
  2.0.0-alpha-1
  HTML+CSSでお絵かきしてみた
  自己紹介
  @shogo82148
  Pythonista時々Perler 競技プログラミングクラスタ(闇のC++er見習い)
  pi=3.14159265358979323846264338327950288419716939937510 58209749445923078164062862089986280348253421170679 82148
  
  shogo(自分の名前)+82148(円周率の第100桁目)
  Recent Works
  Excelでハレ晴レユカイ
  (sm12046921)
  Gnuplotでハレ晴レユカイ
  (sm12002480)
  Recent Works
  【トラ技増刊MARY】MARYでBad Apple!!　ＰＶ
  (sm14132423)
  HTML+CSSでお絵かきしてみた
  本日の発表
  CSSってなに？
  Cascading Style Sheets
  文章の「見た目」を定義するための仕様
  ・・・でこれ使うと何が嬉しいの？ 
  みんな大好きWikipedia
  印刷してみると・・・
  Wikipediaを印刷してみた
  あれ？メニューがなくなっちゃったよ？
  ウィキペディアにようこそ！   ウィキペディアはオープンコンテントの 百科事典です。方針に賛同していただけ るなら、誰でも記事を編集したり新しく 作成したりできます。ガイドブックを読 んでから、サンドボックスで練習してみ ましょう。質問は利用案内でどうぞ。 現在、ウィキペディア日本語版には 約 782,008 本の記事があります。
  これこそCSSの力！
  HTML文章
  
  
  表示用CSS
  印刷用CSS
  同じ文章でもCSSによって「見た目」を変えられる
  →
  →
  CSSとは
  同じ文章でも用途に応じて見やすい表示形式にする
  文章から「見え方」を分離する
  ↓
  CSSも進化を続けています  そんな中登場したのが・・・
  CSS3
  CSS3って何がすごいの？
  絵が描けます
  
  CSS3になって変わったこと
  CSS3より前 文字のフォント・大きさ・色を変えられる程度
  CSS3の登場 回転や変形ができるようになった 枠の種類が増えた グラデーションが使えるようになった etc
  今まで画像を使って実現していたことの多くが CSS3のみを使って実現可能に！
  作例
  HTML+CSSでドロイドくん http://aokcub.net/css3/droid/droid.html http://aokcub.net/css3/droid/p/p.html  HTML+CSSでドロヒカリ http://aokcub.net/css3/dorohikari/dorohikari.html  HTML+CSSでソウルジェム http://aokcub.net/css3/gem/gem.html    
  
  負けてはいられない！ 自分もやってみよう！
  基本の四角
  まずは基本的な図形から 幅200px、高さ100px、20pxで角を丸めた 赤い長方形をCSSで描いてみる
  <div class="rect"></div> .rect{ position:absolute; top:0px; left:0px; width:200px; height:100px; border-radius:20px; background-color:red; }
  これを組み合わせれば ドロイドくんくらいなら 簡単にできるはず！
  …ギブアップしました
  ・ドロイドくんのプロポーションを完全に 　把握していなかった ・腕とかどこに配置すればいいの？ ・座標計算とか面倒
  なんとかならないの？
  なんとかしましょう！
  プログラマは楽をするためならどんな苦労も厭わない
  楽にCSSでお絵かきできるなら何でもしましょう！
  簡単でいいからGUIツールを作っちゃえ！
  …無理でした
  そんなすごいGUIツール僕には作れません！
  何は他にいい方法は・・・
  他に何かいい方法は・・・
  誰かが作ったのを流用しよう  すでにあるお絵かきソフトでお絵かき →ファイルに保存 →プログラムでHTML+CSSに変換
  これだ！
  INKSCAPE を使おう！
  Inkscapeとは
  ベクター形式のお絵かきソフト Illustratorみたいなもの
  最大の特徴 SVGの編集に特化した ソフトである
  
  SVGとは
  Scalable Vector Graphics 「拡大縮小が自由にできる画像形式」
  XML形式 →プログラムの読み書きが簡単！
  SVGで基本の四角
  先程CSSで描いた 幅200px、高さ100px、20pxで角を丸めた 赤い長方形をSVGで描いてみる
  <rect x="0" y="0" width="200" height="100" ry="20" style="fill:red" />
  SVGとCSSを比べてみる
  <rect x="0" y="0" width="200" height="100" ry="20" style="fill:red" />
  <div class="rect"></div> .rect{ position:absolute; top:0px; left:0px; width:200px; height:100px; border-radius:20px; background-color:red; }
  HTML+CSS
  SVG
  一対一対応している！
  <rect x="0" y="0" width="200" height="100" ry="20" style="fill:red" />
  <div class="rect"></div> .rect{ position:absolute; top:0px; left:0px; width:200px; height:100px; border-radius:20px; background-color:red; }
  HTML+CSS
  SVG
  簡単な置換でできそう！
  
  やってみた
  https://github.com/shogo82148/svg2css にて公開中！ (SourceForge.netにあるsvg2cssは偽物なので注意)
  使い方
  Downloadsをクリックして
  Download as zipをクリック
  使い方
  svg2css.py, svg2py.inx, svg.pyを %Inkscape%/share/extensionsにコピー
  使い方
  Inkscapeの保存画面にHTML+CSSってのが追加されます
  やってみてわかったこと
  例で示した置換だけじゃ 四角形の位置と大きさと色 しか指定できない！ 不十分！
  例:ドロイドくん
  ・・・このプログラムは ドロイドくんも 描けないのか！
  これじゃあ寂しいので 機能追加しました
  アフィン変換
  回転
  傾斜
  拡大・縮小
  グラデーション
  透過
  クリップ
  →
  ぼかし
  ドぴ ロん イぼ ドけ く ん
  CSSドロイドくん完成！
  Inkscapeを使えば もっと複雑なものも 描けます！
  CSS QB
  僕と契約して
  CSS3使いになってよ！
  Androidでも表示可能
  拡大してもキレイ
  ICS未満のAndroidでベクター形式の画像を 追加アプリなしで表示できる唯一の手段
  さらに！ このスライドもHTML+CSSで 描かれています！ JavaScriptは一切使わないPure CSS！ 画像はたくさん使ったけど
  描いてみてわかったこと
  誤差デカイ！ 面倒くさい！
  誤差でかい
  線の太さが大きく 変わってる
  元は 滑らかなのに・・・
  CSS QB
  SVG QB
  面倒くさい
  svg2cssでは全部角丸四角形でお絵かき
  約200個の角丸四角形で構成されています
  すごく面倒・・・
  まとめ
  SVGからHTML+CSSに変換するプログラムを作った 結構再現率は高い でも、多少誤差がでる CSS3はお絵かきには適さない お絵かきするならSVG使ったほうがいいよ
  One More Thing
  絵が描けた
  スライドの 切り替えができた
  もし、 スライドの切り替えを 自動的に 高速で 行ったらどうなる？
  
  デモ
  デモ
  ・・・したかったんだけど ノートPCではスペック不足 キャプチャ動画をお楽しみください
  メイキング
  ペンギンを描く (これだけで67個の角丸四角)
  メイキング
  100枚の絵を10fpsで切り替え
  メイキング
  全部で2977個の角丸四角 変換後はdiv要素×12697
  まとめ
  アニメーションできたよ！ 1人月程度だとこの程度が限界 自分頑張った 手打ちじゃここまで出来なかった あれ？自分のPCのスペック・・・  http://sora-blue.net/~shogo82148/soft/internet/svg2css/ping.html