HTML5で9 patch with HTML5      9 patch     3ねん5くみ あるじひさし
まず初めに At First
9 patchとは?  What’s 9 patch?
環境によって表示領域(の縦横比)が変わるアレ や コレ
環境によって表示領域(の縦横比)が変わるアレ や コレ主に コレ のアプリで表示の縦横比が変わってもいちいち画像切り替えたりしなくてもいいようにするための手法
元画像        角丸 + グラデ + 可変長の文字が入るボタン    ~ ~ ~ ~ ~ ~横長~ ~ ~ ~ ~ ~         気にせず縦横伸ばしたら~        こんな感じに・・・~~縦長~~~
ではどうするか?
9つにぶった切る       ②    ③    ①③⑦⑨はそのまま表示①④      ⑤    ⑥    ②⑤⑧を横幅にあわせて伸ばし⑦      ⑧    ⑨                 ④⑤⑥を縦幅にあわせて伸ばす。     これで角...
9 patchHow to specify 9 patch  の指定方法
上下左右の一番外側1ピクセルを領域指定用に利用する伸ばす部分の縦横を上と左で指定                 内部コンテンツの表示領域を                 下と右で指定(オプション)    画像指定/生成用のソフトはAndro...
本題Main issue
HTML + CSS (+ JavaScript)で実現するには、border-imageを使うのがよさそう(Androidでの対応状況は問題ない)指定方法border-image: border-image-source border-ima...
この指定を設定するのはちょっとめんどくさい  画像を用意して、必要部分を計測して設定して・・・  デザイン変更で画像が変わったらまた計測しなおして・・・どうせなら9 patchの外枠指定に対応しているほうがいいに決まっている   修正も画像差し...
9 patchをHTML上で利用9-Patch-Image-for-Websites        https://github.com/chrislondon/9-Patch-Image-for-Websites  divタグのbackgro...
9 patchをHTML上で利用scale9grid        http://code.google.com/p/scale9grid/  jQueryPlugin。指定方法は$(‘#hoge’).scale9Grid(options); ...
以上、ざっと探した感じではあまり利用はされてない    JavaScriptで画像の指定ピクセル内の色がちがうところって    見つけられたっけ? > canvas利用で何とかなりそう指定方法は? > selectorを指定すると、backgr...
以上投げやりな感じでおわり
Upcoming SlideShare
Loading in...5
×

Html5で9parts

1,454
-1

Published on

なつのしゅくだい

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,454
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html5で9parts

  1. 1. HTML5で9 patch with HTML5 9 patch 3ねん5くみ あるじひさし
  2. 2. まず初めに At First
  3. 3. 9 patchとは? What’s 9 patch?
  4. 4. 環境によって表示領域(の縦横比)が変わるアレ や コレ
  5. 5. 環境によって表示領域(の縦横比)が変わるアレ や コレ主に コレ のアプリで表示の縦横比が変わってもいちいち画像切り替えたりしなくてもいいようにするための手法
  6. 6. 元画像 角丸 + グラデ + 可変長の文字が入るボタン ~ ~ ~ ~ ~ ~横長~ ~ ~ ~ ~ ~ 気にせず縦横伸ばしたら~ こんな感じに・・・~~縦長~~~
  7. 7. ではどうするか?
  8. 8. 9つにぶった切る ② ③ ①③⑦⑨はそのまま表示①④ ⑤ ⑥ ②⑤⑧を横幅にあわせて伸ばし⑦ ⑧ ⑨ ④⑤⑥を縦幅にあわせて伸ばす。 これで角の表示が変に伸びることはない (角部の表示サイズは常に一定) また外枠の幅が広がることもない これが9 patch (Flashでは9 slice)
  9. 9. 9 patchHow to specify 9 patch の指定方法
  10. 10. 上下左右の一番外側1ピクセルを領域指定用に利用する伸ばす部分の縦横を上と左で指定 内部コンテンツの表示領域を 下と右で指定(オプション) 画像指定/生成用のソフトはAndroid SDKに入ってる
  11. 11. 本題Main issue
  12. 12. HTML + CSS (+ JavaScript)で実現するには、border-imageを使うのがよさそう(Androidでの対応状況は問題ない)指定方法border-image: border-image-source border-image-slice(上 右 下左) border-image-width(上 右 下 左) border-image-repeat; border-image-source : 画像ファイル指定 border-image-slice : 画像のどこを使うかpixel指定 border-image-width : 表示するボーダーの幅 border-image-repeat : 中央/辺部分の画像の表示方法 ・stretch : 引き伸ばして表示 ・repeat : 繰り返し表示 ・round : 繰り返しだが整数倍になるように拡大縮小で調整 ・space : 繰り返しだが整数倍にならない場合はスペースを開 ける
  13. 13. この指定を設定するのはちょっとめんどくさい 画像を用意して、必要部分を計測して設定して・・・ デザイン変更で画像が変わったらまた計測しなおして・・・どうせなら9 patchの外枠指定に対応しているほうがいいに決まっている 修正も画像差し替えのみで済むし JavaScript等で自動設定できれば便利
  14. 14. 9 patchをHTML上で利用9-Patch-Image-for-Websites https://github.com/chrislondon/9-Patch-Image-for-Websites divタグのbackground-imageにhoge.9.(gif|png)の設定すると 自動的に利用範囲を測定して調整してくれる。 data:image/pngの形で利用 Androidでは動かないものも(2.2で動作確認できず。4.0はOK) border-imageは利用していない そのためborder-imageでは出来ないような表現も可能
  15. 15. 9 patchをHTML上で利用scale9grid http://code.google.com/p/scale9grid/ jQueryPlugin。指定方法は$(‘#hoge’).scale9Grid(options); //options = { top: 1, buttom: 1, left: 1, right 1} #hogeに当たっているbackground-image画像を利用して optionsの指定ピクセルでborder-imageを含んだ<div>を生成し、 元のエレメントの下に表示する Android 2.2/4.0共に問題なく動作 border-imageはstretch(拡大表示)以外に対応していない 画像に変更があった場合はoptionsの指定を変える必要がある 場合が存在する
  16. 16. 以上、ざっと探した感じではあまり利用はされてない JavaScriptで画像の指定ピクセル内の色がちがうところって 見つけられたっけ? > canvas利用で何とかなりそう指定方法は? > selectorを指定すると、background-image利用して作ってくれるのがいいんじゃないかな npatch(‚.hoge‛); みたいなオプションで画像を渡すようにしてもいいかもnpatch(‚.hoge‛, ‚img/hoge.png‛); こんな感じの使い勝手のいいjavascriptライブラリ誰か作って
  17. 17. 以上投げやりな感じでおわり
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×