Enviar pesquisa
Carregar
Web1.0のハイブリッドアプリ開発
•
1 gostou
•
1,581 visualizações
Kenta Tsuji
Seguir
Tecnologia
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 32
Baixar agora
Baixar para ler offline
Recomendados
Firefoxosハンズオン
Firefoxosハンズオン
Kazutoshi Kashimoto
「その他」のUI Framework 3選
「その他」のUI Framework 3選
Shumpei Shiraishi
jQuery と MVC で実践する標準志向 Web 開発
jQuery と MVC で実践する標準志向 Web 開発
Akira Inoue
jQuery Mobile
jQuery Mobile
yoshikawa_t
One night Vue.js
One night Vue.js
Masahiro Kyuden
Firefox OS アプリケーション チュートリアル
Firefox OS アプリケーション チュートリアル
funakky
Head First XML Layout on Android
Head First XML Layout on Android
Yuki Anzai
Hokuriku.NET ASP.NET MVC入門 「実践」 20120825
Hokuriku.NET ASP.NET MVC入門 「実践」 20120825
miso- soup3
Recomendados
Firefoxosハンズオン
Firefoxosハンズオン
Kazutoshi Kashimoto
「その他」のUI Framework 3選
「その他」のUI Framework 3選
Shumpei Shiraishi
jQuery と MVC で実践する標準志向 Web 開発
jQuery と MVC で実践する標準志向 Web 開発
Akira Inoue
jQuery Mobile
jQuery Mobile
yoshikawa_t
One night Vue.js
One night Vue.js
Masahiro Kyuden
Firefox OS アプリケーション チュートリアル
Firefox OS アプリケーション チュートリアル
funakky
Head First XML Layout on Android
Head First XML Layout on Android
Yuki Anzai
Hokuriku.NET ASP.NET MVC入門 「実践」 20120825
Hokuriku.NET ASP.NET MVC入門 「実践」 20120825
miso- soup3
Customize CakePHP bake
Customize CakePHP bake
Kazuyuki Aoki
Redmineカスタムフィールド表示改善
Redmineカスタムフィールド表示改善
Yuuki Nara
sgvizler
sgvizler
Fumihiro Kato
UnicastWS vol.2
UnicastWS vol.2
Unicast Inc.
Vue.jsでさくっとMVVM
Vue.jsでさくっとMVVM
Satoshi Anai
Progressive Framework Vue.js 2.0
Progressive Framework Vue.js 2.0
Toshiro Shimizu
AngularJSでの非同期処理の話
AngularJSでの非同期処理の話
Yosuke Onoue
エンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJS
Ayumi Goto
Windows storeアプリ brekky
Windows storeアプリ brekky
Satoshi Sekine
AngularJSの高速化
AngularJSの高速化
Kon Yuichi
HTML5 開発環境の紹介
HTML5 開発環境の紹介
tomo_masakura
今からでも遅くない! React事始め
今からでも遅くない! React事始め
ynaruta
HTML5, きちんと。
HTML5, きちんと。
Masataka Yakura
AngularJS入門
AngularJS入門
Kenji Shirane
かんたんかんたんJSF
かんたんかんたんJSF
Masuji Katoda
Angular.jsについてちょっとしゃべる
Angular.jsについてちょっとしゃべる
Masashi Haga
Jqm20120804 publish
Jqm20120804 publish
Takashi Okamoto
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
Takashi Okamoto
jQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & Tips
yoshikawa_t
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Shumpei Shiraishi
最新開発支援ツールを使ったデバッグ対応
最新開発支援ツールを使ったデバッグ対応
Osamu Monoe
Android Lecture #04 @PRO&BSC Inc.
Android Lecture #04 @PRO&BSC Inc.
Yuki Higuchi
Mais conteúdo relacionado
Mais procurados
Customize CakePHP bake
Customize CakePHP bake
Kazuyuki Aoki
Redmineカスタムフィールド表示改善
Redmineカスタムフィールド表示改善
Yuuki Nara
sgvizler
sgvizler
Fumihiro Kato
UnicastWS vol.2
UnicastWS vol.2
Unicast Inc.
Vue.jsでさくっとMVVM
Vue.jsでさくっとMVVM
Satoshi Anai
Progressive Framework Vue.js 2.0
Progressive Framework Vue.js 2.0
Toshiro Shimizu
AngularJSでの非同期処理の話
AngularJSでの非同期処理の話
Yosuke Onoue
エンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJS
Ayumi Goto
Windows storeアプリ brekky
Windows storeアプリ brekky
Satoshi Sekine
AngularJSの高速化
AngularJSの高速化
Kon Yuichi
HTML5 開発環境の紹介
HTML5 開発環境の紹介
tomo_masakura
今からでも遅くない! React事始め
今からでも遅くない! React事始め
ynaruta
HTML5, きちんと。
HTML5, きちんと。
Masataka Yakura
AngularJS入門
AngularJS入門
Kenji Shirane
かんたんかんたんJSF
かんたんかんたんJSF
Masuji Katoda
Angular.jsについてちょっとしゃべる
Angular.jsについてちょっとしゃべる
Masashi Haga
Mais procurados
(16)
Customize CakePHP bake
Customize CakePHP bake
Redmineカスタムフィールド表示改善
Redmineカスタムフィールド表示改善
sgvizler
sgvizler
UnicastWS vol.2
UnicastWS vol.2
Vue.jsでさくっとMVVM
Vue.jsでさくっとMVVM
Progressive Framework Vue.js 2.0
Progressive Framework Vue.js 2.0
AngularJSでの非同期処理の話
AngularJSでの非同期処理の話
エンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJS
Windows storeアプリ brekky
Windows storeアプリ brekky
AngularJSの高速化
AngularJSの高速化
HTML5 開発環境の紹介
HTML5 開発環境の紹介
今からでも遅くない! React事始め
今からでも遅くない! React事始め
HTML5, きちんと。
HTML5, きちんと。
AngularJS入門
AngularJS入門
かんたんかんたんJSF
かんたんかんたんJSF
Angular.jsについてちょっとしゃべる
Angular.jsについてちょっとしゃべる
Semelhante a Web1.0のハイブリッドアプリ開発
Jqm20120804 publish
Jqm20120804 publish
Takashi Okamoto
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
Takashi Okamoto
jQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & Tips
yoshikawa_t
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Shumpei Shiraishi
最新開発支援ツールを使ったデバッグ対応
最新開発支援ツールを使ったデバッグ対応
Osamu Monoe
Android Lecture #04 @PRO&BSC Inc.
Android Lecture #04 @PRO&BSC Inc.
Yuki Higuchi
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
Shumpei Shiraishi
CSS Nite in Matsuyama vol.1 - session 4
CSS Nite in Matsuyama vol.1 - session 4
arisu yano
Pro aspnetmvc3framework chap15
Pro aspnetmvc3framework chap15
Hideki Hashizume
Webに今求められているレベル: HTML5 コントロールを利用した開発
Webに今求められているレベル: HTML5 コントロールを利用した開発
インフラジスティックス・ジャパン株式会社
Jqm20120210
Jqm20120210
cmtomoda
Google chrome
Google chrome
K Sasaki
LabVIEW NXG Web Module Training Slide
LabVIEW NXG Web Module Training Slide
Yusuke Tochigi
[Ps11]ネットワーク第4回
[Ps11]ネットワーク第4回
Yukiko Kato
チュートリアルではじめるVue.js
チュートリアルではじめるVue.js
小川 昌吾
專訪李光耀
專訪李光耀
honan4108
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
Yasuhito Yabe
Visualforce + jQuery
Visualforce + jQuery
Salesforce Developers Japan
jQuery Mobile(開発編)勉強会資料
jQuery Mobile(開発編)勉強会資料
Nobumasa Ura
Magento meet up Tokyo#1 for Design
Magento meet up Tokyo#1 for Design
Miho Nakano
Semelhante a Web1.0のハイブリッドアプリ開発
(20)
Jqm20120804 publish
Jqm20120804 publish
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
jQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & Tips
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
最新開発支援ツールを使ったデバッグ対応
最新開発支援ツールを使ったデバッグ対応
Android Lecture #04 @PRO&BSC Inc.
Android Lecture #04 @PRO&BSC Inc.
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
Pro aspnetmvc3framework chap15
Pro aspnetmvc3framework chap15
Webに今求められているレベル: HTML5 コントロールを利用した開発
Webに今求められているレベル: HTML5 コントロールを利用した開発
Jqm20120210
Jqm20120210
Google chrome
Google chrome
LabVIEW NXG Web Module Training Slide
LabVIEW NXG Web Module Training Slide
[Ps11]ネットワーク第4回
[Ps11]ネットワーク第4回
チュートリアルではじめるVue.js
チュートリアルではじめるVue.js
專訪李光耀
專訪李光耀
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
Visualforce + jQuery
Visualforce + jQuery
jQuery Mobile(開発編)勉強会資料
jQuery Mobile(開発編)勉強会資料
Magento meet up Tokyo#1 for Design
Magento meet up Tokyo#1 for Design
Último
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
FumieNakayama
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
FumieNakayama
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
sugiuralab
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
博三 太田
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
akihisamiyanaga1
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
UEHARA, Tetsutaro
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
Yuki Kikuchi
Último
(9)
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
Web1.0のハイブリッドアプリ開発
1.
<html> <head> <title> Web1.0のハイブリッドアプリ開発 </title> <meta name="author" content="Kenta TSUJI"
/> </head>s <body>
2.
<nav> <ul> <li>HTML5勉強会でありがちなこと</li> <li>HTML5でできなくなること</li> <li>HTML5でAndroid開発</li> </ul> </nav>
3.
<section> <h1>HTML5勉強会でありがちなこと</h1>
4.
<h1>新しい要素や属性の追加の紹介</h1> <!-- <section> 1つのセクションであることを示す <nav> ナビゲーションであることを示す <input type="email"> メールアドレスの入力欄を作成する <input autofocus> 入力欄にカーソルを当てて自動フォーカスする -->
5.
<h1>動画や音声等の操作の紹介</h1> <!-- <video> 動画を再生する <audio> 音声を再生する <embed> Flashなど、プラグインデータを埋め込む -->
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.
</section> <!-- ここまで -->
8.
<section> <h1>HTML5でできなくなること</h1>
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.
<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.
<!-- Web1.0を支えたHTMLタグが HTML5で廃止予定 -->
12.
<!-- 廃止されてしまうなら 文化遺産としてHTML5で保護しよう -->
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.
<body background="image/wall.gif"> <body style="background-image:url(image/wall.gif);"> <!-- background
は background-image:url(); に書き換え -->
15.
<bgsound src="sound.wav"> <audio src="sound.wav"
autoplay> <!-- <bgsound> タグは <audio> タグに書き換え -->
16.
<center> <div style="text-align: center;"> <!-- <center>
タグは text-align: center; に書き換え -->
17.
<font color="#FF0000"> <div style="color:
red;"> <!-- <center> タグは color: red; に書き換え -->
18.
<big> <div style="font-size: xx-large;"> <!-- <big>
タグは font-size: xx-large; に書き換え -->
19.
<marquee direction="right" scrollamount="35"> <div
style=" overflow: -webkit-marquee; -webkit-marquee-direction: forwards; -webkit-marquee-speed: fast; "> <!-- <marquee> タグは overflow: -webkit-marquee; に書き換え -->
20.
<blink> <div style="text-decoration: blink;"> <!-- <blink>
タグは text-decoration: blink; に書き換え -->
21.
<u> <div style="text-decoration: underline;"> <!-- <u>
タグは text-decoration: underline; に書き換え -->
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.
</section> <!-- ここまで -->
24.
<section> <h1>HTML5でAndroid開発</h1>
25.
<h1>ネイティブ?ウェブ?</h1> <h2>ネイティブアプリの良い所</h2> 各種センサー等、フル機能で最大パフォーマンス アプリストアを通じて集客 課金システムの利用 <h2>ネイティブアプリの弱い所</h2> 開発コストが大きい 各プラットフォーム毎に開発が必要
26.
<h1>ネイティブ?ウェブ?</h1> <h2>ウェブアプリの良い所</h2> 多くのプラットフォームに対応しやすい アップデートが簡単 HTML/CSS/JSなど、Webの知識が使える <h2>ウェブアプリの弱い所</h2> 各種センサー等、スマホ固有の機能が使えない アプリストアを通じた集客ができない
27.
<h1>ハイブリッドアプリ</h1> <!-- HTML/CSS/JSで記述、 ネイティブアプリの WebViewで起動、アプリストアで配布が可能、 ワンソースでマルチプラットフォーム そこで、PhoneGap WebViewをベースに各種プラットフォーム上 で動作するアプリとして「ラップ」する -->
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.
<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.
<h1>PhoneGapBuild</h1> <!-- とは言え、各プラットフォーム毎にSDKが必要 そこで、PhoneGapBuild HTML/CSS/JSをアップロード 各プラットフォーム毎にバイナリを生成 githubと連携可能 https://build.phonegap.com/ -->
31.
<h1>まとめ</h1> <!-- PhoneGapを使えば、HTML5でネイティブアプ リ開発ができる ウェブサイトをベースに、アプリ展開したい場合 によさそう PhoneGapBuildを使えば、開発環境を整える必 要もない --> </section> <!-- ここまで -->
32.
</body> </html>
Baixar agora