Suche senden
Hochladen
Html5で9parts
•
Als PPTX, PDF herunterladen
•
0 gefällt mir
•
1,752 views
Hisashi Aruji
Folgen
なつのしゅくだい
Weniger lesen
Mehr lesen
Technologie
Melden
Teilen
Melden
Teilen
1 von 17
Jetzt herunterladen
Empfohlen
ドッターのためのプログラミングなにそれおいしいの
ドッターのためのプログラミングなにそれおいしいの
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 (ようてん)
Empfohlen
ドッターのためのプログラミングなにそれおいしいの
ドッターのためのプログラミングなにそれおいしいの
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
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
WSO2
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
Weitere ähnliche Inhalte
Ähnlich wie 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
Ähnlich wie 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勉強会
Kürzlich hochgeladen
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
WSO2
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
atsushi061452
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Toru Tamaki
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Toru Tamaki
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
sn679259
Kürzlich hochgeladen
(10)
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
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.
以上 投げやりな感じで おわり
Jetzt herunterladen