Soumettre la recherche
Mettre en ligne
Html5で9parts
•
Télécharger en tant que PPTX, PDF
•
0 j'aime
•
1,751 vues
Hisashi Aruji
Suivre
なつのしゅくだい
Lire moins
Lire la suite
Technologie
Signaler
Partager
Signaler
Partager
1 sur 17
Télécharger maintenant
Recommandé
ドッターのためのプログラミングなにそれおいしいの
ドッターのためのプログラミングなにそれおいしいの
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 (ようてん)
Recommandé
ドッターのためのプログラミングなにそれおいしいの
ドッターのためのプログラミングなにそれおいしいの
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
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
Yuki Kikuchi
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
FumieNakayama
Contenu connexe
Similaire à 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
Similaire à 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勉強会
Dernier
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
Yuki Kikuchi
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
FumieNakayama
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
akihisamiyanaga1
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
博三 太田
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
UEHARA, Tetsutaro
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
FumieNakayama
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
sugiuralab
Dernier
(8)
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
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.
以上 投げやりな感じで おわり
Télécharger maintenant