HTMLでデザインにこだわったアプリを作りましょう!!
Upcoming SlideShare
Loading in...5
×
 

HTMLでデザインにこだわったアプリを作りましょう!!

on

  • 566 views

xHago3でプレゼンをさせていただいたときの資料です。よろしければご覧になってください。

xHago3でプレゼンをさせていただいたときの資料です。よろしければご覧になってください。

Statistics

Views

Total Views
566
Views on SlideShare
566
Embed Views
0

Actions

Likes
0
Downloads
3
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    HTMLでデザインにこだわったアプリを作りましょう!! HTMLでデザインにこだわったアプリを作りましょう!! Presentation Transcript

    • HTMLでデザインにこだわった アプリを作りましょう!! @micha_micha712年3月3日土曜日 1
    • 今日話すこと 自己紹介 なぜHTMLがいいのか? おすすめの書籍&おまけ12年3月3日土曜日 2
    • さっそく12年3月3日土曜日 3
    • @micha_micha7 名前:豊川 貴史 ※ちなみにこれ GIMPで作りました 所属:国際電子ビジネス専門学校 情報スペシャリスト科2年生 & Lexues Academy生12年3月3日土曜日 4
    • ちなみに12年3月3日土曜日 5
    • 12年3月3日土曜日 6
    • カプセル化?12年3月3日土曜日 7
    • ポリモフィズム?12年3月3日土曜日 8
    • インヘリタンス?12年3月3日土曜日 9
    • ダイナミック バインディング?12年3月3日土曜日 10
    • ヽ( ́ー`)ノは?12年3月3日土曜日 11
    • ヽ( ́  `)ノ むりぽ、、、12年3月3日土曜日 12
    • なぜHTMLがい いのか?12年3月3日土曜日 13
    • 12年3月3日土曜日 14
    • ネイティブ HTML12年3月3日土曜日 15
    • まず、ネイティブから12年3月3日土曜日 16
    • ネイティブ classRoundedCornerButtonextendsJButton{   privatestaticfinalfloat arcwidth  =16.0f;   privatestaticfinalfloat archeight =16.0f;   protectedstaticfinalint focusstroke =2;   protectedfinalColor fc =newColor(100,150,255,200);   protectedfinalColor ac =newColor(230,230,230);   protectedfinalColor rc =Color.ORANGE;   protectedShape shape;   protectedShape border;   protectedShapebase;   publicRoundedCornerButton(String text){     super(text);     //setRolloverEnabled(true);     setContentAreaFilled(false);     setBackground(newColor(250,250,250));     initShape();   }   protectedvoid initShape(){     if(!getBounds().equals(base)){       base= getBounds();       shape =newRoundRectangle2D.Float(0,0,                         getWidth()-1, getHeight()-1,                         arcwidth, archeight);       border =newRoundRectangle2D.Float(focusstroke, focusstroke,                         getWidth()-1-focusstroke*2,                         getHeight()-1-focusstroke*2,                         arcwidth, archeight);     }   }   @Overrideprotectedvoid paintComponent(Graphics g){     initShape();     Graphics2D g2 =(Graphics2D)g;     g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,                         RenderingHints.VALUE_ANTIALIAS_ON);     if(getModel().isArmed()){       g2.setColor(ac);       g2.fill(shape);     }elseif(isRolloverEnabled()&& getModel().isRollover()){       paintFocusAndRollover(g2, rc);     }elseif(hasFocus()){       paintFocusAndRollover(g2, fc);     }else{       g2.setColor(getBackground());       g2.fill(shape);     }     g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,                         RenderingHints.VALUE_ANTIALIAS_OFF);     g2.setColor(getBackground());     super.paintComponent(g2);   }   privatevoid paintFocusAndRollover(Graphics2D g2,Color color){     g2.setPaint(newGradientPaint(0,0, color,                                   getWidth()-1, getHeight()-1, color.brighter(),true));     g2.fill(shape);     g2.setColor(getBackground());     g2.fill(border);   }   @Overrideprotectedvoid paintBorder(Graphics g){     initShape();     Graphics2D g2 =(Graphics2D)g;     g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,                         RenderingHints.VALUE_ANTIALIAS_ON);     g2.setColor(getForeground());     g2.draw(shape);     g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,                         RenderingHints.VALUE_ANTIALIAS_OFF);   }   @Overrideprotectedboolean contains(int x,int y){     initShape();     return shape.contains(x, y);   } }12年3月3日土曜日 17
    • ネイティブ classRoundedCornerButtonextendsJButton{   privatestaticfinalfloat arcwidth  =16.0f;   privatestaticfinalfloat archeight =16.0f;   protectedstaticfinalint focusstroke =2;   protectedfinalColor fc =newColor(100,150,255,200);   protectedfinalColor ac =newColor(230,230,230);   protectedfinalColor rc =Color.ORANGE;   protectedShape shape;   protectedShape border;   protectedShapebase;   publicRoundedCornerButton(String text){     super(text);     //setRolloverEnabled(true);     setContentAreaFilled(false);     setBackground(newColor(250,250,250));     initShape();   }   protectedvoid initShape(){     if(!getBounds().equals(base)){       base= getBounds(); (;́д`)       shape =newRoundRectangle2D.Float(0,0,                         getWidth()-1, getHeight()-1,                         arcwidth, archeight);       border =newRoundRectangle2D.Float(focusstroke, focusstroke,                         getWidth()-1-focusstroke*2, 入ったけど                         getHeight()-1-focusstroke*2,                         arcwidth, archeight);     }   }   @Overrideprotectedvoid paintComponent(Graphics g){     initShape();     Graphics2D g2 =(Graphics2D)g;     g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,                         RenderingHints.VALUE_ANTIALIAS_ON);     if(getModel().isArmed()){       g2.setColor(ac);       g2.fill(shape);     }elseif(isRolloverEnabled()&& getModel().isRollover()){       paintFocusAndRollover(g2, rc);     }elseif(hasFocus()){       paintFocusAndRollover(g2, fc);     }else{       g2.setColor(getBackground());       g2.fill(shape);     }     g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,                         RenderingHints.VALUE_ANTIALIAS_OFF);     g2.setColor(getBackground());     super.paintComponent(g2);   }   privatevoid paintFocusAndRollover(Graphics2D g2,Color color){     g2.setPaint(newGradientPaint(0,0, color,                                   getWidth()-1, getHeight()-1, color.brighter(),true));     g2.fill(shape);     g2.setColor(getBackground());     g2.fill(border);   }   @Overrideprotectedvoid paintBorder(Graphics g){     initShape();     Graphics2D g2 =(Graphics2D)g;     g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,                         RenderingHints.VALUE_ANTIALIAS_ON);     g2.setColor(getForeground());     g2.draw(shape);     g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,                         RenderingHints.VALUE_ANTIALIAS_OFF);   }   @Overrideprotectedboolean contains(int x,int y){     initShape();     return shape.contains(x, y);   } }12年3月3日土曜日 18
    • ネイティブ classRoundedCornerButtonextendsJButton{   privatestaticfinalfloat arcwidth  =16.0f;   privatestaticfinalfloat archeight =16.0f;   protectedstaticfinalint focusstroke =2;   protectedfinalColor fc =newColor(100,150,255,200);   protectedfinalColor ac =newColor(230,230,230);   protectedfinalColor rc =Color.ORANGE;   protectedShape shape;   protectedShape border;   protectedShapebase;   publicRoundedCornerButton(String text){     super(text);     //setRolloverEnabled(true);     setContentAreaFilled(false);     setBackground(newColor(250,250,250));     initShape();   }   protectedvoid initShape(){     if(!getBounds().equals(base)){       base= getBounds(); (;́д`)       shape =newRoundRectangle2D.Float(0,0,                         getWidth()-1, getHeight()-1,                         arcwidth, archeight);       border =newRoundRectangle2D.Float(focusstroke, focusstroke,                         getWidth()-1-focusstroke*2, 入ったけど                         getHeight()-1-focusstroke*2,                         arcwidth, archeight);     }   }   @Overrideprotectedvoid paintComponent(Graphics g){ 無理矢理だね     initShape();     Graphics2D g2 =(Graphics2D)g;     g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,                         RenderingHints.VALUE_ANTIALIAS_ON);     if(getModel().isArmed()){       g2.setColor(ac);       g2.fill(shape);     }elseif(isRolloverEnabled()&& getModel().isRollover()){       paintFocusAndRollover(g2, rc);     }elseif(hasFocus()){       paintFocusAndRollover(g2, fc);     }else{       g2.setColor(getBackground());       g2.fill(shape);     }     g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,                         RenderingHints.VALUE_ANTIALIAS_OFF);     g2.setColor(getBackground());     super.paintComponent(g2);   }   privatevoid paintFocusAndRollover(Graphics2D g2,Color color){     g2.setPaint(newGradientPaint(0,0, color,                                   getWidth()-1, getHeight()-1, color.brighter(),true));     g2.fill(shape);     g2.setColor(getBackground());     g2.fill(border);   }   @Overrideprotectedvoid paintBorder(Graphics g){     initShape();     Graphics2D g2 =(Graphics2D)g;     g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,                         RenderingHints.VALUE_ANTIALIAS_ON);     g2.setColor(getForeground());     g2.draw(shape);     g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,                         RenderingHints.VALUE_ANTIALIAS_OFF);   }   @Overrideprotectedboolean contains(int x,int y){     initShape();     return shape.contains(x, y);   } }12年3月3日土曜日 19
    • ネイティブ classRoundedCornerButtonextendsJButton{   privatestaticfinalfloat arcwidth  =16.0f;   privatestaticfinalfloat archeight =16.0f;   protectedstaticfinalint focusstroke =2;   protectedfinalColor fc =newColor(100,150,255,200);   protectedfinalColor ac =newColor(230,230,230);   protectedfinalColor rc =Color.ORANGE;   protectedShape shape;   protectedShape border;   protectedShapebase;   publicRoundedCornerButton(String text){     super(text);     //setRolloverEnabled(true);     setContentAreaFilled(false);     setBackground(newColor(250,250,250));     initShape();   }   protectedvoid initShape(){     if(!getBounds().equals(base)){       base= getBounds(); (;́д`)       shape =newRoundRectangle2D.Float(0,0,                         getWidth()-1, getHeight()-1,                         arcwidth, archeight);       border =newRoundRectangle2D.Float(focusstroke, focusstroke,                         getWidth()-1-focusstroke*2, 入ったけど                         getHeight()-1-focusstroke*2,                         arcwidth, archeight);     }   }   @Overrideprotectedvoid paintComponent(Graphics g){ 無理矢理だね     initShape();     Graphics2D g2 =(Graphics2D)g;     g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,                         RenderingHints.VALUE_ANTIALIAS_ON);     if(getModel().isArmed()){       g2.setColor(ac);       g2.fill(shape);     }elseif(isRolloverEnabled()&& getModel().isRollover()){       paintFocusAndRollover(g2, rc);     }elseif(hasFocus()){       paintFocusAndRollover(g2, fc);     }else{       g2.setColor(getBackground());       g2.fill(shape);     }     g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, (;́д`)                         RenderingHints.VALUE_ANTIALIAS_OFF);     g2.setColor(getBackground());     super.paintComponent(g2);   }   privatevoid paintFocusAndRollover(Graphics2D g2,Color color){ つめ過ぎ     g2.setPaint(newGradientPaint(0,0, color,                                   getWidth()-1, getHeight()-1, color.brighter(),true));     g2.fill(shape);     g2.setColor(getBackground());     g2.fill(border);   }   @Overrideprotectedvoid paintBorder(Graphics g){     initShape();     Graphics2D g2 =(Graphics2D)g;     g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,                         RenderingHints.VALUE_ANTIALIAS_ON);     g2.setColor(getForeground());     g2.draw(shape);     g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,                         RenderingHints.VALUE_ANTIALIAS_OFF);   }   @Overrideprotectedboolean contains(int x,int y){     initShape();     return shape.contains(x, y);   } }12年3月3日土曜日 20
    • ネイティブ classRoundedCornerButtonextendsJButton{   privatestaticfinalfloat arcwidth  =16.0f;   privatestaticfinalfloat archeight =16.0f;   protectedstaticfinalint focusstroke =2;   protectedfinalColor fc =newColor(100,150,255,200);   protectedfinalColor ac =newColor(230,230,230);   protectedfinalColor rc =Color.ORANGE;   protectedShape shape;   protectedShape border;   protectedShapebase;   publicRoundedCornerButton(String text){     super(text);     //setRolloverEnabled(true);     setContentAreaFilled(false);     setBackground(newColor(250,250,250));     initShape();   }   protectedvoid initShape(){     if(!getBounds().equals(base)){       base= getBounds(); (;́д`)       shape =newRoundRectangle2D.Float(0,0,                         getWidth()-1, getHeight()-1,                         arcwidth, archeight);       border =newRoundRectangle2D.Float(focusstroke, focusstroke,                         getWidth()-1-focusstroke*2, 入ったけど                         getHeight()-1-focusstroke*2,                         arcwidth, archeight);     }   }   @Overrideprotectedvoid paintComponent(Graphics g){ 無理矢理だね     initShape();     Graphics2D g2 =(Graphics2D)g;     g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,                         RenderingHints.VALUE_ANTIALIAS_ON);     if(getModel().isArmed()){       g2.setColor(ac);       g2.fill(shape);     }elseif(isRolloverEnabled()&& getModel().isRollover()){       paintFocusAndRollover(g2, rc);     }elseif(hasFocus()){       paintFocusAndRollover(g2, fc);     }else{       g2.setColor(getBackground());       g2.fill(shape);     }     g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, (;́д`)                         RenderingHints.VALUE_ANTIALIAS_OFF);     g2.setColor(getBackground());     super.paintComponent(g2);   }   privatevoid paintFocusAndRollover(Graphics2D g2,Color color){ つめ過ぎ     g2.setPaint(newGradientPaint(0,0, color,                                   getWidth()-1, getHeight()-1, color.brighter(),true));     g2.fill(shape);     g2.setColor(getBackground()); ワロタ     g2.fill(border);   }   @Overrideprotectedvoid paintBorder(Graphics g){     initShape();     Graphics2D g2 =(Graphics2D)g;     g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,                         RenderingHints.VALUE_ANTIALIAS_ON);     g2.setColor(getForeground());     g2.draw(shape);     g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,                         RenderingHints.VALUE_ANTIALIAS_OFF);   }   @Overrideprotectedboolean contains(int x,int y){     initShape();     return shape.contains(x, y);   } }12年3月3日土曜日 21
    • つぎに、HTML12年3月3日土曜日 22
    • HTML CSS #btn { <a id="btn">CLICK is LOVE</a> /* ボタンの文字 */ font: bold 20px/1.7 "arial black", sans- serif; color: #760; text-decoration: none; /* ボタンのレイアウト */ position:relative; top: 180px; left: 120px; float: left; padding: 10px 20px; background-color: #FB0; /* ボックスシャドウ */ box-shadow: 0 5px 2px #871, 0 7px 10px #CCC; -webkit-box-shadow: 0 5px 2px #871, 0 7px 10px #CCC; -moz-box-shadow: 0 5px 2px #871, 0 7px 10px #CCC; /* 角を丸くする */ border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; }12年3月3日土曜日 23
    • HTML CSS #btn { <a id="btn">CLICK is LOVE</a> /* ボタンの文字 */ font: bold 20px/1.7 "arial black", sans- serif; color: #760; text-decoration: none; /* ボタンのレイアウト */ position:relative; (o ̄  ̄)/ top: 180px; left: 120px; きれーい float: left; padding: 10px 20px; background-color: #FB0; /* ボックスシャドウ */ box-shadow: 0 5px 2px #871, 0 7px 10px #CCC; -webkit-box-shadow: 0 5px 2px #871, 0 7px 10px #CCC; -moz-box-shadow: 0 5px 2px #871, 0 7px 10px #CCC; /* 角を丸くする */ border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; }12年3月3日土曜日 24
    • HTML CSS #btn { <a id="btn">CLICK is LOVE</a> /* ボタンの文字 */ font: bold 20px/1.7 "arial black", sans- serif; color: #760; text-decoration: none; /* ボタンのレイアウト */ position:relative; (o ̄  ̄)/ top: 180px; left: 120px; きれーい float: left; padding: 10px 20px; みやすーい background-color: #FB0; /* ボックスシャドウ */ box-shadow: 0 5px 2px #871, 0 7px 10px #CCC; -webkit-box-shadow: 0 5px 2px #871, 0 7px 10px #CCC; -moz-box-shadow: 0 5px 2px #871, 0 7px 10px #CCC; /* 角を丸くする */ border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; }12年3月3日土曜日 25
    • ネイティブ HTML ソースを書けば書くほどいい という事でもないんですね!12年3月3日土曜日 26
    • こんな経験ありませんか?12年3月3日土曜日 27
    • 12年3月3日土曜日 28
    • 表示崩れが。。。12年3月3日土曜日 29
    • (;`Ó)o 起きてしまいます。12年3月3日土曜日 30
    • ですが!12年3月3日土曜日 31
    • HTMLの12年3月3日土曜日 32
    • viewport を使えば12年3月3日土曜日 33
    • ”簡単”に解決!! ( ー`дー́)キリッ12年3月3日土曜日 34
    • <meta name="viewport"content="width=320;">12年3月3日土曜日 35
    • <html> <head> //ここに追加 </head> <body> </body> </html>12年3月3日土曜日 36
    • どんなデバイスでも 表示崩れがなく 作る事ができるんです!12年3月3日土曜日 37
    • どうですか?12年3月3日土曜日 38
    • 簡単でしょ♪12年3月3日土曜日 39
    • HTMLを使うだけで こんなに簡単に 作れちゃうんです!12年3月3日土曜日 40
    • HTMLでアプリ 作ってみたくなった?w12年3月3日土曜日 41
    • ”簡単”に 「開発」 できるんです!12年3月3日土曜日 42
    • プログラミング 初心者でも12年3月3日土曜日 43
    • 作れるんです!12年3月3日土曜日 44
    • おすすめの書籍12年3月3日土曜日 45
    • 定価:3200円12年3月3日土曜日 46
    • ぢゃあ皆さん12年3月3日土曜日 47
    • このプレゼンが 終わったら12年3月3日土曜日 48
    • HTMLでAndroid アプリ12年3月3日土曜日 49
    • 作りましょう!!12年3月3日土曜日 50
    • ヽ( ́ー`)ノやりましょう!12年3月3日土曜日 51
    • ご清聴ありがとう ございました。 @micha_micha712年3月3日土曜日 52
    • おまけ。 @micha_micha712年3月3日土曜日 53
    • 応用情報 ※JavaScript 対策アプリ CSS使ってます。 & (無料)12年3月3日土曜日 54
    • Eclipse HTML+JavaScript+CSS12年3月3日土曜日 55