Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
<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>
Upcoming SlideShare
Loading in …5
×
Upcoming SlideShare
5分でわかったつもりになるParse.com
Next
Download to read offline and view in fullscreen.

1

Share

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

Download to read offline

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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

Views

Total views

1,654

On Slideshare

0

From embeds

0

Number of embeds

3

Actions

Downloads

1

Shares

0

Comments

0

Likes

1

×