Enviar búsqueda
Cargar
Html5で9parts
•
Descargar como PPTX, PDF
•
0 recomendaciones
•
1,751 vistas
Hisashi Aruji
Seguir
なつのしゅくだい
Leer menos
Leer más
Tecnología
Denunciar
Compartir
Denunciar
Compartir
1 de 17
Descargar ahora
Recomendados
ドッターのためのプログラミングなにそれおいしいの
ドッターのためのプログラミングなにそれおいしいの
heriet
ドッターのためのプログラミングなにそれおいしいの
ドッターのためのプログラミングなにそれおいしいの
manaten
(デ部発表用抜粋版)プログラマとデザイナが共有すべきUIに関するAndroidの10の機能
(デ部発表用抜粋版)プログラマとデザイナが共有すべきUIに関するAndroidの10の機能
youten (ようてん)
これだけは知っておけ!はじめてのAndroidアプリデザイン〜9-patch編 先生:秋葉 ちひろ
これだけは知っておけ!はじめてのAndroidアプリデザイン〜9-patch編 先生:秋葉 ちひろ
schoowebcampus
リーンスタートアップ x Java #jjug #jjug_ccc #ccc_h4
リーンスタートアップ x Java #jjug #jjug_ccc #ccc_h4
Yusuke Yamamoto
Webエンジニアのためのandroidアプリ開発
Webエンジニアのためのandroidアプリ開発
Soudai Sone
ビジネスプラン概要資料 New
ビジネスプラン概要資料 New
schoowebcampus
プログラマとデザイナが共有すべきUIに関するAndroidの10の機能
プログラマとデザイナが共有すべきUIに関するAndroidの10の機能
youten (ようてん)
Recomendados
ドッターのためのプログラミングなにそれおいしいの
ドッターのためのプログラミングなにそれおいしいの
heriet
ドッターのためのプログラミングなにそれおいしいの
ドッターのためのプログラミングなにそれおいしいの
manaten
(デ部発表用抜粋版)プログラマとデザイナが共有すべきUIに関するAndroidの10の機能
(デ部発表用抜粋版)プログラマとデザイナが共有すべきUIに関するAndroidの10の機能
youten (ようてん)
これだけは知っておけ!はじめてのAndroidアプリデザイン〜9-patch編 先生:秋葉 ちひろ
これだけは知っておけ!はじめてのAndroidアプリデザイン〜9-patch編 先生:秋葉 ちひろ
schoowebcampus
リーンスタートアップ x Java #jjug #jjug_ccc #ccc_h4
リーンスタートアップ x Java #jjug #jjug_ccc #ccc_h4
Yusuke Yamamoto
Webエンジニアのためのandroidアプリ開発
Webエンジニアのためのandroidアプリ開発
Soudai Sone
ビジネスプラン概要資料 New
ビジネスプラン概要資料 New
schoowebcampus
プログラマとデザイナが共有すべきUIに関するAndroidの10の機能
プログラマとデザイナが共有すべきUIに関するAndroidの10の機能
youten (ようてん)
マルチスクリーン対応と最近のアプリの傾向
マルチスクリーン対応と最近のアプリの傾向
Yuki Anzai
アプリ開発・端末毎の解像度の違いを吸収する方法 Android Bazaar and Conference 2011 Summer
アプリ開発・端末毎の解像度の違いを吸収する方法 Android Bazaar and Conference 2011 Summer
Kunimasa Noda
Head First XML Layout on Android
Head First XML Layout on Android
Yuki Anzai
第6回中心会議 XAMLで学ぶ レイアウトスキル 0923
第6回中心会議 XAMLで学ぶ レイアウトスキル 0923
Hub DotnetDeveloper
1. モデリング 3 dcg制作の流れ _ 基礎知識 _ blender入門(2
1. モデリング 3 dcg制作の流れ _ 基礎知識 _ blender入門(2
Sasaki Minoru
openFrameworks Workshop in Kanazawa v001
openFrameworks Workshop in Kanazawa v001
Teruaki Tsubokura
Astah Community スタートガイド
Astah Community スタートガイド
ChangeVision
Slide prototyping workshop_02_170411
Slide prototyping workshop_02_170411
hiroshimadesignlab
20110824 gatracker-final
20110824 gatracker-final
susumukatachi
夜子まま塾講義9(androidの画面デザイン)
夜子まま塾講義9(androidの画面デザイン)
Masafumi Terazono
画像を使わずにデザイン
画像を使わずにデザイン
Ryo Maruyama
Slide rhino+gh 07
Slide rhino+gh 07
hiroshimadesignlab
Astah UML スタートガイド
Astah UML スタートガイド
ChangeVision
Android OpenGL HandsOn
Android OpenGL HandsOn
Ikuo Tansho
敢えて@1xでRetina対応をやってみる
敢えて@1xでRetina対応をやってみる
littlebustersreply
静岡Developers勉強会 HTML5&CSS3
静岡Developers勉強会 HTML5&CSS3
yaju88
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
Chihiro Tomita
WordPressのデフォルトテーマ Twenty Twelveから見るレスポンシブウェブデザインとモバイルファーストの考え方
WordPressのデフォルトテーマ Twenty Twelveから見るレスポンシブウェブデザインとモバイルファーストの考え方
Chieko Aihara
GREE Creators' Meetup #2 session B Manryo
GREE Creators' Meetup #2 session B Manryo
Shiho Manryo
バレンタイン直前開催Web勉強会
バレンタイン直前開催Web勉強会
Takahide Hosokawa
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
taisei2219
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
Toru Tamaki
Más contenido relacionado
Similar a Html5で9parts
マルチスクリーン対応と最近のアプリの傾向
マルチスクリーン対応と最近のアプリの傾向
Yuki Anzai
アプリ開発・端末毎の解像度の違いを吸収する方法 Android Bazaar and Conference 2011 Summer
アプリ開発・端末毎の解像度の違いを吸収する方法 Android Bazaar and Conference 2011 Summer
Kunimasa Noda
Head First XML Layout on Android
Head First XML Layout on Android
Yuki Anzai
第6回中心会議 XAMLで学ぶ レイアウトスキル 0923
第6回中心会議 XAMLで学ぶ レイアウトスキル 0923
Hub DotnetDeveloper
1. モデリング 3 dcg制作の流れ _ 基礎知識 _ blender入門(2
1. モデリング 3 dcg制作の流れ _ 基礎知識 _ blender入門(2
Sasaki Minoru
openFrameworks Workshop in Kanazawa v001
openFrameworks Workshop in Kanazawa v001
Teruaki Tsubokura
Astah Community スタートガイド
Astah Community スタートガイド
ChangeVision
Slide prototyping workshop_02_170411
Slide prototyping workshop_02_170411
hiroshimadesignlab
20110824 gatracker-final
20110824 gatracker-final
susumukatachi
夜子まま塾講義9(androidの画面デザイン)
夜子まま塾講義9(androidの画面デザイン)
Masafumi Terazono
画像を使わずにデザイン
画像を使わずにデザイン
Ryo Maruyama
Slide rhino+gh 07
Slide rhino+gh 07
hiroshimadesignlab
Astah UML スタートガイド
Astah UML スタートガイド
ChangeVision
Android OpenGL HandsOn
Android OpenGL HandsOn
Ikuo Tansho
敢えて@1xでRetina対応をやってみる
敢えて@1xでRetina対応をやってみる
littlebustersreply
静岡Developers勉強会 HTML5&CSS3
静岡Developers勉強会 HTML5&CSS3
yaju88
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
Chihiro Tomita
WordPressのデフォルトテーマ Twenty Twelveから見るレスポンシブウェブデザインとモバイルファーストの考え方
WordPressのデフォルトテーマ Twenty Twelveから見るレスポンシブウェブデザインとモバイルファーストの考え方
Chieko Aihara
GREE Creators' Meetup #2 session B Manryo
GREE Creators' Meetup #2 session B Manryo
Shiho Manryo
バレンタイン直前開催Web勉強会
バレンタイン直前開催Web勉強会
Takahide Hosokawa
Similar a Html5で9parts
(20)
マルチスクリーン対応と最近のアプリの傾向
マルチスクリーン対応と最近のアプリの傾向
アプリ開発・端末毎の解像度の違いを吸収する方法 Android Bazaar and Conference 2011 Summer
アプリ開発・端末毎の解像度の違いを吸収する方法 Android Bazaar and Conference 2011 Summer
Head First XML Layout on Android
Head First XML Layout on Android
第6回中心会議 XAMLで学ぶ レイアウトスキル 0923
第6回中心会議 XAMLで学ぶ レイアウトスキル 0923
1. モデリング 3 dcg制作の流れ _ 基礎知識 _ blender入門(2
1. モデリング 3 dcg制作の流れ _ 基礎知識 _ blender入門(2
openFrameworks Workshop in Kanazawa v001
openFrameworks Workshop in Kanazawa v001
Astah Community スタートガイド
Astah Community スタートガイド
Slide prototyping workshop_02_170411
Slide prototyping workshop_02_170411
20110824 gatracker-final
20110824 gatracker-final
夜子まま塾講義9(androidの画面デザイン)
夜子まま塾講義9(androidの画面デザイン)
画像を使わずにデザイン
画像を使わずにデザイン
Slide rhino+gh 07
Slide rhino+gh 07
Astah UML スタートガイド
Astah UML スタートガイド
Android OpenGL HandsOn
Android OpenGL HandsOn
敢えて@1xでRetina対応をやってみる
敢えて@1xでRetina対応をやってみる
静岡Developers勉強会 HTML5&CSS3
静岡Developers勉強会 HTML5&CSS3
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
WordPressのデフォルトテーマ Twenty Twelveから見るレスポンシブウェブデザインとモバイルファーストの考え方
WordPressのデフォルトテーマ Twenty Twelveから見るレスポンシブウェブデザインとモバイルファーストの考え方
GREE Creators' Meetup #2 session B Manryo
GREE Creators' Meetup #2 session B Manryo
バレンタイン直前開催Web勉強会
バレンタイン直前開催Web勉強会
Último
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
taisei2219
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
Toru Tamaki
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
sugiuralab
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
Ryo Sasaki
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
danielhu54
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Yuma Ohgami
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
iPride Co., Ltd.
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
Toru Tamaki
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
Toru Tamaki
Último
(9)
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
Html5で9parts
1.
HTML5で 9 patch with
HTML5 9 patch 3ねん5くみ あるじひさし
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.
以上 投げやりな感じで おわり
Descargar ahora