Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
<html>
<head>
<title>
Web1.0のハイブリッドアプリ開発
</title>
<meta name="author"
content="Kenta TSUJI" />
</head>s
<body>
<nav>
<ul>
<li>HTML5勉強会でありがちなこと</li>
<li>HTML5でできなくなること</li>
<li>HTML5でAndroid開発</li>
</ul>
</nav>
<section>
<h1>HTML5勉強会でありがちなこと</h1>
<h1>新しい要素や属性の追加の紹介</h1>

<!--
<section>
1つのセクションであることを示す
<nav>
ナビゲーションであることを示す
<input type="email">
メールアドレスの入力欄を作成する
<inpu...
<h1>動画や音声等の操作の紹介</h1>

<!--
<video>
動画を再生する
<audio>
音声を再生する
<embed>
Flashなど、プラグインデータを埋め込む
-->
<h1>新しく追加されたAPIの紹介</h1>

<!--
Geolocation API
File API
Drag & Drop API
Clipboard API
Fullscreen API
getUserMedia API
Batte...
</section>
<!-- ここまで -->
<section>
<h1>HTML5でできなくなること</h1>
<body background="image/wall.gif">
<bgsound src="sound.wav">
<center>
<font color="#FF0000">
<marquee direction="right" sc...
<body background="image/wall.gif">
<bgsound src="sound.wav">
<center>
<font color="#FF0000">
<marquee direction="right" sc...
<!--
Web1.0を支えたHTMLタグが
HTML5で廃止予定
-->
<!--
廃止されてしまうなら
文化遺産としてHTML5で保護しよう
-->
<body background="image/wall.gif">
<bgsound src="sound.wav">
<center>
<font color="#FF0000">
<marquee direction="right" sc...
<body background="image/wall.gif">
<body style="background-image:url(image/wall.gif);">


<!--
background は background-ima...
<bgsound src="sound.wav">
<audio src="sound.wav" autoplay>


<!--
<bgsound> タグは <audio> タグに書き換え
-->
<center>
<div style="text-align: center;">


<!--
<center> タグは text-align: center; に書き換え
-->
<font color="#FF0000">
<div style="color: red;">


<!--
<center> タグは color: red; に書き換え
-->
<big>
<div style="font-size: xx-large;">


<!--
<big> タグは font-size: xx-large; に書き換え
-->
<marquee direction="right" scrollamount="35">
<div style="
overflow: -webkit-marquee;
-webkit-marquee-direction: forwards;
...
<blink>
<div style="text-decoration: blink;">


<!--
<blink> タグは text-decoration: blink; に書き換え
-->
<u>
<div style="text-decoration: underline;">


<!--
<u> タグは text-decoration: underline; に書き換え
-->
<body style="background-image:url(image/wall.gif);">
<audio src="sound.wav" autoplay></audio>
<div style="text-align:cente...
</section>
<!-- ここまで -->
<section>
<h1>HTML5でAndroid開発</h1>
<h1>ネイティブ?ウェブ?</h1>

<h2>ネイティブアプリの良い所</h2>
各種センサー等、フル機能で最大パフォーマンス
アプリストアを通じて集客
課金システムの利用

<h2>ネイティブアプリの弱い所</h2>
開発コストが大きい
...
<h1>ネイティブ?ウェブ?</h1>

<h2>ウェブアプリの良い所</h2>
多くのプラットフォームに対応しやすい
アップデートが簡単
HTML/CSS/JSなど、Webの知識が使える

<h2>ウェブアプリの弱い所</h2>
各種センサー...
<h1>ハイブリッドアプリ</h1>

<!--

HTML/CSS/JSで記述、 ネイティブアプリの
WebViewで起動、アプリストアで配布が可能、
ワンソースでマルチプラットフォーム


そこで、PhoneGap
WebViewをベースに...
<h1>Activityの修正</h1>
package com.example.phonegap;

import android.app.Activity;
import android.os.Bundle;

public class M...
<h1>Manifestの修正</h1>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.html5"
...
<h1>PhoneGapBuild</h1>

<!--
とは言え、各プラットフォーム毎にSDKが必要


そこで、PhoneGapBuild
HTML/CSS/JSをアップロード
各プラットフォーム毎にバイナリを生成
githubと連携可能
...
<h1>まとめ</h1>

<!--
PhoneGapを使えば、HTML5でネイティブアプ
リ開発ができる
ウェブサイトをベースに、アプリ展開したい場合
によさそう
PhoneGapBuildを使えば、開発環境を整える必
要もない
-->

<...
</body>
</html>
Próximo SlideShare
Cargando en…5
×

de

Web1.0のハイブリッドアプリ開発 Slide 1 Web1.0のハイブリッドアプリ開発 Slide 2 Web1.0のハイブリッドアプリ開発 Slide 3 Web1.0のハイブリッドアプリ開発 Slide 4 Web1.0のハイブリッドアプリ開発 Slide 5 Web1.0のハイブリッドアプリ開発 Slide 6 Web1.0のハイブリッドアプリ開発 Slide 7 Web1.0のハイブリッドアプリ開発 Slide 8 Web1.0のハイブリッドアプリ開発 Slide 9 Web1.0のハイブリッドアプリ開発 Slide 10 Web1.0のハイブリッドアプリ開発 Slide 11 Web1.0のハイブリッドアプリ開発 Slide 12 Web1.0のハイブリッドアプリ開発 Slide 13 Web1.0のハイブリッドアプリ開発 Slide 14 Web1.0のハイブリッドアプリ開発 Slide 15 Web1.0のハイブリッドアプリ開発 Slide 16 Web1.0のハイブリッドアプリ開発 Slide 17 Web1.0のハイブリッドアプリ開発 Slide 18 Web1.0のハイブリッドアプリ開発 Slide 19 Web1.0のハイブリッドアプリ開発 Slide 20 Web1.0のハイブリッドアプリ開発 Slide 21 Web1.0のハイブリッドアプリ開発 Slide 22 Web1.0のハイブリッドアプリ開発 Slide 23 Web1.0のハイブリッドアプリ開発 Slide 24 Web1.0のハイブリッドアプリ開発 Slide 25 Web1.0のハイブリッドアプリ開発 Slide 26 Web1.0のハイブリッドアプリ開発 Slide 27 Web1.0のハイブリッドアプリ開発 Slide 28 Web1.0のハイブリッドアプリ開発 Slide 29 Web1.0のハイブリッドアプリ開発 Slide 30 Web1.0のハイブリッドアプリ開発 Slide 31 Web1.0のハイブリッドアプリ開発 Slide 32
Próximo SlideShare
5分でわかったつもりになるParse.com
Siguiente
Descargar para leer sin conexión y ver en pantalla completa.

1 recomendación

Compartir

Descargar para leer sin conexión

Web1.0のハイブリッドアプリ開発

Descargar para leer sin conexión

Audiolibros relacionados

Gratis con una prueba de 30 días de Scribd

Ver todo

Web1.0のハイブリッドアプリ開発

  1. 1. <html> <head> <title> Web1.0のハイブリッドアプリ開発 </title> <meta name="author" content="Kenta TSUJI" /> </head>s <body>
  2. 2. <nav> <ul> <li>HTML5勉強会でありがちなこと</li> <li>HTML5でできなくなること</li> <li>HTML5でAndroid開発</li> </ul> </nav>
  3. 3. <section> <h1>HTML5勉強会でありがちなこと</h1>
  4. 4. <h1>新しい要素や属性の追加の紹介</h1> <!-- <section> 1つのセクションであることを示す <nav> ナビゲーションであることを示す <input type="email"> メールアドレスの入力欄を作成する <input autofocus> 入力欄にカーソルを当てて自動フォーカスする -->
  5. 5. <h1>動画や音声等の操作の紹介</h1> <!-- <video> 動画を再生する <audio> 音声を再生する <embed> Flashなど、プラグインデータを埋め込む -->
  6. 6. <h1>新しく追加されたAPIの紹介</h1> <!-- Geolocation API File API Drag & Drop API Clipboard API Fullscreen API getUserMedia API Battery API Vibration API Indexed Database API -->
  7. 7. </section> <!-- ここまで -->
  8. 8. <section> <h1>HTML5でできなくなること</h1>
  9. 9. <body background="image/wall.gif"> <bgsound src="sound.wav"> <center> <font color="#FF0000"> <marquee direction="right" scrollamount="35"> <big><big><big>Sorry!This Homepage is Japanese only!!</big></ big></big> </marquee> </font> <font color="#FFAA00">このホームページは無断転載厳禁です!!</font> <big><big><big> 1997/10/08から34人のお客様が訪問しました!! </big></big></big> <blink>キリ番を踏んだ人は必ず掲示板に報告してください</blink> <u>踏み逃げ厳禁</u> </center> </body>
  10. 10. <body background="image/wall.gif"> <bgsound src="sound.wav"> <center> <font color="#FF0000"> <marquee direction="right" scrollamount="35"> <big><big><big>Sorry!This Homepage is Japanese only!!</big></ big></big> </marquee> </font> <font color="#FFAA00">このホームページは無断転載厳禁です!!</font> <big><big><big> 1997/10/08から34人のお客様が訪問しました!! </big></big></big> <blink>キリ番を踏んだ人は必ず掲示板に報告してください</blink> <u>踏み逃げ厳禁</u> </center> </body>
  11. 11. <!-- Web1.0を支えたHTMLタグが HTML5で廃止予定 -->
  12. 12. <!-- 廃止されてしまうなら 文化遺産としてHTML5で保護しよう -->
  13. 13. <body background="image/wall.gif"> <bgsound src="sound.wav"> <center> <font color="#FF0000"> <marquee direction="right" scrollamount="35"> <big><big><big>Sorry!This Homepage is Japanese only!!</big></ big></big> </marquee> </font> <font color="#FFAA00">このホームページは無断転載厳禁です!!</font> <big><big><big> 1997/10/08から34人のお客様が訪問しました!! </big></big></big> <blink>キリ番を踏んだ人は必ず掲示板に報告してください</blink> <u>踏み逃げ厳禁</u> </center> </body>
  14. 14. <body background="image/wall.gif"> <body style="background-image:url(image/wall.gif);"> <!-- background は background-image:url(); に書き換え -->
  15. 15. <bgsound src="sound.wav"> <audio src="sound.wav" autoplay> <!-- <bgsound> タグは <audio> タグに書き換え -->
  16. 16. <center> <div style="text-align: center;"> <!-- <center> タグは text-align: center; に書き換え -->
  17. 17. <font color="#FF0000"> <div style="color: red;"> <!-- <center> タグは color: red; に書き換え -->
  18. 18. <big> <div style="font-size: xx-large;"> <!-- <big> タグは font-size: xx-large; に書き換え -->
  19. 19. <marquee direction="right" scrollamount="35"> <div style=" overflow: -webkit-marquee; -webkit-marquee-direction: forwards; -webkit-marquee-speed: fast; "> <!-- <marquee> タグは overflow: -webkit-marquee; に書き換え -->
  20. 20. <blink> <div style="text-decoration: blink;"> <!-- <blink> タグは text-decoration: blink; に書き換え -->
  21. 21. <u> <div style="text-decoration: underline;"> <!-- <u> タグは text-decoration: underline; に書き換え -->
  22. 22. <body style="background-image:url(image/wall.gif);"> <audio src="sound.wav" autoplay></audio> <div style="text-align:center; margin-left: auto; margin-right: auto;"> <div style="color: red; font-size: xx-large; overflow: -webkit- marquee;"> <nobr>Sorry!This Homepage is Japanese only!!</nobr> </div> <div style="color: orange;">このホームページは無断転載厳禁です!!</div> <div style="font-size: xx-large;"> 1997/10/08から34人のお客様が訪問しました!! </div> <div style="text-decoration: blink;">キリ番を踏んだ人は必ず掲示板に報 告してください</div> <div style="text-decoration: underline;">踏み逃げ厳禁</div> </div> </body>
  23. 23. </section> <!-- ここまで -->
  24. 24. <section> <h1>HTML5でAndroid開発</h1>
  25. 25. <h1>ネイティブ?ウェブ?</h1> <h2>ネイティブアプリの良い所</h2> 各種センサー等、フル機能で最大パフォーマンス アプリストアを通じて集客 課金システムの利用 <h2>ネイティブアプリの弱い所</h2> 開発コストが大きい 各プラットフォーム毎に開発が必要
  26. 26. <h1>ネイティブ?ウェブ?</h1> <h2>ウェブアプリの良い所</h2> 多くのプラットフォームに対応しやすい アップデートが簡単 HTML/CSS/JSなど、Webの知識が使える <h2>ウェブアプリの弱い所</h2> 各種センサー等、スマホ固有の機能が使えない アプリストアを通じた集客ができない
  27. 27. <h1>ハイブリッドアプリ</h1> <!-- HTML/CSS/JSで記述、 ネイティブアプリの WebViewで起動、アプリストアで配布が可能、 ワンソースでマルチプラットフォーム そこで、PhoneGap WebViewをベースに各種プラットフォーム上 で動作するアプリとして「ラップ」する -->
  28. 28. <h1>Activityの修正</h1> package com.example.phonegap; import android.app.Activity; import android.os.Bundle; public class MainActivity extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); } } package com.example.phonegap; import android.app.Activity; import android.os.Bundle; import com.phonegap.*; public class MainActivity extends DroidGap { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); super.loadUrl("http://example.com/index.html"); } }
  29. 29. <h1>Manifestの修正</h1> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.html5" android:versionCode="1" android:versionName="1.0" > <supports-screens android:largeScreens="true" android:normalScreens="true" android:smallScreens="true" android:resizeable="true" android:anyDensity="true" /> <uses-permission android:name="android.permission.INTERNET" /> <uses-sdk android:minSdkVersion="1" android:targetSdkVersion="15" /> <application android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:configChanges="orientation|keyboardHidden" android:theme="@style/AppTheme" > <activity android:name=".MainActivity" android:label="@string/title_activity_main" > <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </activity> </application> </manifest>
  30. 30. <h1>PhoneGapBuild</h1> <!-- とは言え、各プラットフォーム毎にSDKが必要 そこで、PhoneGapBuild HTML/CSS/JSをアップロード 各プラットフォーム毎にバイナリを生成 githubと連携可能 https://build.phonegap.com/ -->
  31. 31. <h1>まとめ</h1> <!-- PhoneGapを使えば、HTML5でネイティブアプ リ開発ができる ウェブサイトをベースに、アプリ展開したい場合 によさそう PhoneGapBuildを使えば、開発環境を整える必 要もない --> </section> <!-- ここまで -->
  32. 32. </body> </html>
  • ssuser81f0ad

    Jun. 23, 2016

Vistas

Total de vistas

1.676

En Slideshare

0

De embebidos

0

Número de embebidos

3

Acciones

Descargas

1

Compartidos

0

Comentarios

0

Me gusta

1

×