Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Html5で9parts

2,085 views

Published on

なつのしゅくだい

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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. 以上投げやりな感じでおわり

×