SlideShare a Scribd company logo
1 of 32
Download to read offline
<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">
メールアドレスの入力欄を作成する
<input autofocus>
入力欄にカーソルを当てて自動フォーカスする
-->
<h1>動画や音声等の操作の紹介</h1>

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

<!--
Geolocation API
File API
Drag & Drop API
Clipboard API
Fullscreen API
getUserMedia API
Battery API
Vibration API
Indexed Database API
-->
</section>
<!-- ここまで -->
<section>
<h1>HTML5でできなくなること</h1>
<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>
<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>
<!--
Web1.0を支えたHTMLタグが
HTML5で廃止予定
-->
<!--
廃止されてしまうなら
文化遺産としてHTML5で保護しよう
-->
<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>
<body background="image/wall.gif">
<body style="background-image:url(image/wall.gif);">


<!--
background は background-image:url(); に書き換え
-->
<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;
-webkit-marquee-speed: fast;
">


<!--
<marquee> タグは overflow: -webkit-marquee; に書き換え
-->
<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: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>
</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 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");
    }
}
<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>
<h1>PhoneGapBuild</h1>

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


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

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

</section>
<!-- ここまで -->
</body>
</html>

More Related Content

What's hot

AngularJSでの非同期処理の話
AngularJSでの非同期処理の話AngularJSでの非同期処理の話
AngularJSでの非同期処理の話
Yosuke Onoue
 
エンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJSエンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJS
Ayumi Goto
 
今からでも遅くない! React事始め
今からでも遅くない! React事始め今からでも遅くない! React事始め
今からでも遅くない! React事始め
ynaruta
 
かんたんかんたんJSF
かんたんかんたんJSFかんたんかんたんJSF
かんたんかんたんJSF
Masuji Katoda
 

What's hot (16)

Customize CakePHP bake
Customize CakePHP bakeCustomize CakePHP bake
Customize CakePHP bake
 
Redmineカスタムフィールド表示改善
Redmineカスタムフィールド表示改善Redmineカスタムフィールド表示改善
Redmineカスタムフィールド表示改善
 
sgvizler
sgvizlersgvizler
sgvizler
 
UnicastWS vol.2
UnicastWS vol.2UnicastWS vol.2
UnicastWS vol.2
 
Vue.jsでさくっとMVVM
Vue.jsでさくっとMVVMVue.jsでさくっとMVVM
Vue.jsでさくっとMVVM
 
Progressive Framework Vue.js 2.0
Progressive Framework Vue.js 2.0Progressive Framework Vue.js 2.0
Progressive Framework Vue.js 2.0
 
AngularJSでの非同期処理の話
AngularJSでの非同期処理の話AngularJSでの非同期処理の話
AngularJSでの非同期処理の話
 
エンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJSエンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJS
 
Windows storeアプリ brekky
Windows storeアプリ brekkyWindows storeアプリ brekky
Windows storeアプリ brekky
 
AngularJSの高速化
AngularJSの高速化AngularJSの高速化
AngularJSの高速化
 
HTML5 開発環境の紹介
HTML5 開発環境の紹介HTML5 開発環境の紹介
HTML5 開発環境の紹介
 
今からでも遅くない! React事始め
今からでも遅くない! React事始め今からでも遅くない! React事始め
今からでも遅くない! React事始め
 
HTML5, きちんと。
HTML5, きちんと。HTML5, きちんと。
HTML5, きちんと。
 
AngularJS入門
AngularJS入門AngularJS入門
AngularJS入門
 
かんたんかんたんJSF
かんたんかんたんJSFかんたんかんたんJSF
かんたんかんたんJSF
 
Angular.jsについてちょっとしゃべる
Angular.jsについてちょっとしゃべるAngular.jsについてちょっとしゃべる
Angular.jsについてちょっとしゃべる
 

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

最新開発支援ツールを使ったデバッグ対応
最新開発支援ツールを使ったデバッグ対応最新開発支援ツールを使ったデバッグ対応
最新開発支援ツールを使ったデバッグ対応
Osamu Monoe
 
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
Shumpei Shiraishi
 
Pro aspnetmvc3framework chap15
Pro aspnetmvc3framework chap15Pro aspnetmvc3framework chap15
Pro aspnetmvc3framework chap15
Hideki Hashizume
 
Jqm20120210
Jqm20120210Jqm20120210
Jqm20120210
cmtomoda
 
Google chrome
Google chromeGoogle chrome
Google chrome
K Sasaki
 
[Ps11]ネットワーク第4回
[Ps11]ネットワーク第4回[Ps11]ネットワーク第4回
[Ps11]ネットワーク第4回
Yukiko Kato
 

Similar to Web1.0のハイブリッドアプリ開発 (20)

Jqm20120804 publish
Jqm20120804 publishJqm20120804 publish
Jqm20120804 publish
 
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
 jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
 
jQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & TipsjQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & Tips
 
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフラインWebフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
 
最新開発支援ツールを使ったデバッグ対応
最新開発支援ツールを使ったデバッグ対応最新開発支援ツールを使ったデバッグ対応
最新開発支援ツールを使ったデバッグ対応
 
Android Lecture #04 @PRO&BSC Inc.
Android Lecture #04 @PRO&BSC Inc.Android Lecture #04 @PRO&BSC Inc.
Android Lecture #04 @PRO&BSC Inc.
 
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
 
CSS Nite in Matsuyama vol.1 - session 4
CSS Nite in Matsuyama vol.1 - session 4 CSS Nite in Matsuyama vol.1 - session 4
CSS Nite in Matsuyama vol.1 - session 4
 
Pro aspnetmvc3framework chap15
Pro aspnetmvc3framework chap15Pro aspnetmvc3framework chap15
Pro aspnetmvc3framework chap15
 
Webに今求められているレベル: HTML5 コントロールを利用した開発
Webに今求められているレベル: HTML5 コントロールを利用した開発Webに今求められているレベル: HTML5 コントロールを利用した開発
Webに今求められているレベル: HTML5 コントロールを利用した開発
 
Jqm20120210
Jqm20120210Jqm20120210
Jqm20120210
 
Google chrome
Google chromeGoogle chrome
Google chrome
 
LabVIEW NXG Web Module Training Slide
LabVIEW NXG Web Module Training SlideLabVIEW NXG Web Module Training Slide
LabVIEW NXG Web Module Training Slide
 
[Ps11]ネットワーク第4回
[Ps11]ネットワーク第4回[Ps11]ネットワーク第4回
[Ps11]ネットワーク第4回
 
チュートリアルではじめるVue.js
チュートリアルではじめるVue.jsチュートリアルではじめるVue.js
チュートリアルではじめるVue.js
 
專訪李光耀
專訪李光耀專訪李光耀
專訪李光耀
 
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
 
Visualforce + jQuery
Visualforce + jQueryVisualforce + jQuery
Visualforce + jQuery
 
jQuery Mobile(開発編)勉強会資料
jQuery Mobile(開発編)勉強会資料jQuery Mobile(開発編)勉強会資料
jQuery Mobile(開発編)勉強会資料
 
Magento meet up Tokyo#1 for Design
Magento meet up Tokyo#1 for DesignMagento meet up Tokyo#1 for Design
Magento meet up Tokyo#1 for Design
 

Recently uploaded

Recently uploaded (11)

Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native IntegrationsUtilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
 
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
 
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアルLoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
 
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
 
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
 
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
 
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
 
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
 
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
 
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイスLoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
 
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半        2024/04/26の勉強会で発表されたものです。新人研修 後半        2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
 

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