Android vs e pub

Android vs EPUBCd Chen

http://www.cdchen.idv.tw/

12年12月21⽇日星期五

About

陳永昇 (Cd Chen)http://www.cdchen.idv.tw/

學歷：國⽴立台中科技⼤大學經歷：聯成電腦講師恆逸資訊講師現職：乃師實業技術總監證照：

RHCE / LPIC / NCLP MCSA / MCSE OCPJP / OCPJWCDTCSE / NSPA

12年12月21⽇日星期五

⼤大綱

• ⾏行動 App 的基礎觀念

• EPUB 的介紹

• WebView 元件

• 實作 EPUB Reader

12年12月21⽇日星期五

我假設您已經...

• 熟悉 Java 程式語⾔言

• 具備 Android 開發的經驗

12年12月21⽇日星期五

⾏行動 App 的基礎觀念

12年12月21⽇日星期五

什麼是⾏行動 App??

12年12月21⽇日星期五

12年12月21⽇日星期五

12年12月21⽇日星期五

http://www.appleoutsider.de/2012/04/27/q12012-pc-vendor-marketshare/

12年12月21⽇日星期五

http://mrpogson.com/tag/market-share/

12年12月21⽇日星期五

http://wpcdn3.padgadget.com/wp-content/uploads/2012/07/evercore-120716-550x283.jpeg

12年12月21⽇日星期五

⾏行動 App 類型

12年12月21⽇日星期五

12年12月21⽇日星期五

Web-Page App Native App

•Web 2.0

•HTML 5

•CSS 3

•JavaScript

• ...

•Web Service

•JSON-RPC

•XML-RPC

•SOAP

•Streaming

• ...

HTML / HTTPHTML / HTTP

12年12月21⽇日星期五

12年12月21⽇日星期五

MVC 設計模式

12年12月21⽇日星期五

12年12月21⽇日星期五

EPUB

12年12月21⽇日星期五

淺談電⼦子書格式

12年12月21⽇日星期五

優點 缺點

azw

mobi / prc

lrf

pdf

市佔率⾼高⽀支援語⾳音

無中⽂文⽀支援僅⽀支援 Kindle

⽀支援度廣 無中⽂文⽀支援

檔案輕巧翻⾴頁快速

無精密排版中⽂文⽀支援差

精確排版中⽂文⽀支援佳

檔案⼤大翻⾴頁慢

12年12月21⽇日星期五

什麼是 EPUB??

12年12月21⽇日星期五

• Electronic Publication

• 國際數位出版論壇 (IDPF, International Digital Publishing Forum)

12年12月21⽇日星期五

EPUB 優點• 免費且開放• 可重新排版與可重新縮放的字型• ⽀支援⾏行列圖⽚片• 嵌⼊入式 Metadata

• ⽀支援 DRM

• ⽀支援 CSS

• ⽀支援 影⾳音內容

12年12月21⽇日星期五

EPUB 的版本

• 2007/09 - EPUB Release

• 2009/08 - Start EPUB Working

• 2010/07 - EPUB 2.0.1 Draft

• 2010/09 - EPUB 2.0.1 Release

• 2011/10 - EPUB 3.0 Release (Current)

12年12月21⽇日星期五

EPUB 2 vs EPUB 3

功能 技術

‣⽀支援多媒體格式‣⽀支援數學格式‣⽀支援複雜本⽂文內容‣⽀支援⽂文字朗讀‣⽀支援⾮非羅⾺馬⽂文字‣⽀支援 DAISY 有聲書

‣增加對 HTML5/CSS3 的⽀支援‣⽀支援嵌⼊入字型‣⽀支援 SVG 圖檔‣⽀支援 MathML

12年12月21⽇日星期五

EPUB 格式

12年12月21⽇日星期五

• ZIP 壓縮檔

• 附檔名可使⽤用 .epub 或 .zip

12年12月21⽇日星期五

• XHTML ⽂文件 (XHTML Document)

• 套件檔 (Package Files)

• 容器檔 (Container Files)

EPUB 三種層級

12年12月21⽇日星期五

XHTML ⽂文件

• EPUB 的內容

• 類似 (幾乎相同) HTML

• EPUB3 可使⽤用 HTML5

12年12月21⽇日星期五

http://slides.html5rocks.com/

12年12月21⽇日星期五

套件檔• /mimetype

• ⼀一定為 application/epub+zip

• /DIR/NAME.opf

• 作者、發⾏行者、...

• /DIR/NAME.ncx

• 電⼦子書的組織架構 (章節、段落、...)

12年12月21⽇日星期五

容器檔

• META-INF/container.xml

• 儲存電⼦子書檔案的架構• 檔案路徑、DRM 宣告、...

12年12月21⽇日星期五

EPUB 製作⼯工具

12年12月21⽇日星期五

• Adobe InDesign

• IGP: Digital Publisher

• Apple Pages

• QuarkXPress

• oXygen XML Editor

商業軟體

12年12月21⽇日星期五

OpenSource

• Sigil

• Booktype

• calibre

12年12月21⽇日星期五

轉換程式

• Word2EPUB

• ePub Maker

• DocBook

12年12月21⽇日星期五

WebView

12年12月21⽇日星期五

WebView 的介紹

12年12月21⽇日星期五

• Android 內建的簡易版瀏覽器

• ⽀支援 HTML5 / CSS3 / JavaScript

• 可⾃自定瀏覽器的使⽤用介⾯面• 可定義內容處理的⽅方式• 可組態執⾏行時期的設定• 可與 Server 端的 JavaScript 互動

12年12月21⽇日星期五

• 設定 AndroidManifest.xml

• 配置 layout 檔

• 撰寫程式• 執⾏行與測試

使⽤用⽅方法

12年12月21⽇日星期五

設定• 需開啟下列權限：• android.permission.INTERNET

<manifest ... > <uses-permission android:name="android.permission.INTERNET" /> ...</manifest>

12年12月21⽇日星期五

配置 Layout

<?xml version="1.0" encoding="utf-8"?><WebView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/webview" android:layout_width="fill_parent" android:layout_height="fill_parent"/>

12年12月21⽇日星期五

撰寫程式

12年12月21⽇日星期五

WebView

• android.webkit.WebView

• 重要 API

• loadData()

• loadUrl()

• zoomIn() / zoomOut()

12年12月21⽇日星期五

WebView (cont)

• 導覽 (Navigation) API

• canGoBack() / goBack()

• canGoForward() / goForward()

• canGoBackOrForward() / goBackOrForward()

12年12月21⽇日星期五

• 取得 WebView 物件

• 指定網⾴頁瀏覽的設定 (Optional)

• 組態⾴頁⾯面處理的⽅方法 (Optional)

• ⾃自定使⽤用介⾯面 (Optional)

• 指定網址或本地資料

12年12月21⽇日星期五

取得 WebView 物件

WebView webView = (WebView) findViewById(R.id.webView)

12年12月21⽇日星期五

變更瀏覽器的設定

WebSettings settings = webView.getSettings();settings.setSupportZoom(true);settings.setBuiltinZoomControls(true);settings.setJavaScriptEnabled(true);

12年12月21⽇日星期五

WebSettings

• android.webkit.WebSettings

• 存取 WebView 的組態資料

• 重要 API

• setJavaScriptEnabled()

• !! ALL !!

12年12月21⽇日星期五

組態⾴頁⾯面處理⽅方法

webView.setWebViewClient( new WebViewClient() { // ... });

12年12月21⽇日星期五

WebViewClient

• android.webkit.WebViewClient

• ⾃自定⾴頁⾯面的處理⽅方法• 重要 API

• onPageXXX() / onFormResubmission()

• onLoadResource() / onReceivedError() / onReceivedHttpAuthRequest()

12年12月21⽇日星期五

⾃自定使⽤用介⾯面

webView.setWebChromeClient( new WebChromeClient() { // ... });

12年12月21⽇日星期五

WebChromeClient

• android.webkit.WebChromeClient

• 定義使⽤用介⾯面的事件處理• 重要 API

• onProgressChanged()

• onReceivedXXX() / onjsXXX()

• onCloseWindow()

12年12月21⽇日星期五

指定網址或本地資料

webView.loadUrl( “http://www.niceStudio.com.tw”);

webView.loadData( “<h1>Hello World!!</h1>”);

網址

本地資料

12年12月21⽇日星期五

JavaScript 整合

12年12月21⽇日星期五

• WebView 可與 JavaScript 整合

• ⽅方式• WebChromeClient.onjsXXX()

• JavaScript ➞ WebView

• WebView ➞ JavaScript

12年12月21⽇日星期五

• WebView 可註冊 JavaScript 函數的處理器 (Handler)

• 步驟• 撰寫類別與⽅方法• 在 WebView 註冊處理器

JavaScript ➞WebView

12年12月21⽇日星期五

<a href=”#” onclick=”android.say(‘hi’)” />

public class WebViewActivity extends Activity { class JavaScriptHandler { public void say(String word) { Toast.makeText(context, word, Toast.LENGTH_LONG).show(); } } public void onCreate(Bundle bundle) { super.onCreate(bundle); webView = (WebView) findViewById(R.id.wv); webView.addJavaScriptInterface( new JavaScriptHandler(), “android”); }}

HTML

Activity

12年12月21⽇日星期五

• WebView 可直接呼叫網⾴頁中的 JavaScript 函數

WebView➞JavaScript

webView.loadUrl(“javascript:changeColor(‘red’)”);

<script type=”text/javascript”>function changeColor(c) { ...}</script>

Activity

HTML

12年12月21⽇日星期五

實作 EPUB Reader

12年12月21⽇日星期五

Why??

• 實作私有的 DRM

• 實作特殊的效果或功能

12年12月21⽇日星期五

• Bottom-Up

• 利⽤用現成的 OpenSource Project

實作⽅方法

12年12月21⽇日星期五

FBReader

• Free & OpenSource

• Android 平台著名的 Reader

• http://www.fbreader.org/

• ⽀支援的格式• EPUB / HTML / FictionBook /

Plucker / PalmDoc / TCR / RTF / ...

12年12月21⽇日星期五

取得原始程式碼

• 從官網下載• http://www.fbreader.org/FBReaderJ

• 使⽤用 Git 下載• git://github.com/geometer/FBReaderJ.git

12年12月21⽇日星期五

準備

• Android SDK >= 1.6

• Android NDK >= r4b

• Apache Ant >= 1.7.0

• Cygwin >= 1.7 (Windows Only)

12年12月21⽇日星期五

編譯1.在專案⺫⽬目錄中建⽴立 local.properties 檔

sdk.dir=<DIR>ndk.dir=<DIR>

2. Windows:ndk-build -> ant releaseUnix / MacOS X: ant package

12年12月21⽇日星期五

擴充 FBReaderJ

• <PROJECT>/src/org/geometerplus/android/fbreader/

12年12月21⽇日星期五

Q & A

12年12月21⽇日星期五