なつのしゅくだい

1. HTML5で
9 patch with HTML5
9 patch
３ねん５くみ あるじひさし

2. まず初めに
At First

3. 9 patchとは？
What’s 9 patch?

4. 環境によって表示領域（の縦横比）が変わる
アレ や コレ

5. 環境によって表示領域（の縦横比）が変わる
アレ や コレ
主に コレ のアプリで表示の縦横比が
変わってもいちいち画像切り替えたりしなくても
いいようにするための手法

6. 元画像 角丸 + グラデ + 可変長の文字が入るボタン
～ ～ ～ ～ ～ ～横長～ ～ ～ ～ ～ ～
気にせず縦横伸ばしたら
～ こんな感じに・・・
～
～
縦
長
～
～
～

7. ではどうするか？

8. 9つにぶった切る
② ③ ①③⑦⑨はそのまま表示
①
④ ⑤ ⑥ ②⑤⑧を横幅にあわせて伸ばし
⑦ ⑧ ⑨
④⑤⑥を縦幅にあわせて伸ばす。
これで角の表示が変に伸びることはない
（角部の表示サイズは常に一定）
また外枠の幅が広がることもない
これが9 patch
(Flashでは9 slice)

9. 9 patch
How to specify 9 patch
の指定方法

10. 上下左右の一番外側1ピクセルを領域指定用に利用する
伸ばす部分の縦横を
上と左で指定
内部コンテンツの表示領域を
下と右で指定（オプション）
画像指定/生成用のソフトはAndroid SDKに入ってる

11. 本題
Main issue

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. この指定を設定するのはちょっとめんどくさい
画像を用意して、必要部分を計測して設定して・・・
デザイン変更で画像が変わったらまた計測しなおして・・・
どうせなら9 patchの外枠指定に対応しているほ
うがいいに決まっている
修正も画像差し替えのみで済むし
JavaScript等で自動設定できれば便利

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. 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. 以上、ざっと探した感じではあまり利用はされてない
JavaScriptで画像の指定ピクセル内の色がちがうところって
見つけられたっけ？ ＞ canvas利用で何とかなりそう
指定方法は？ ＞ selectorを指定すると、background-image利用して
作ってくれるのがいいんじゃないかな npatch(‚.hoge‛); みたいな
オプションで画像を渡すようにしてもいいかも
npatch(‚.hoge‛, ‚img/hoge.png‛);
こんな感じの使い勝手のいいjavascriptライブラリ誰か作って

17. 以上
投げやりな感じで
おわり