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


⼤大綱

• ⾏行動 App 的基礎觀念

• EPUB 的介紹

• WebView 元件

• 實作 EPUB Reader


我假設您已經...

• 熟悉 Java 程式語⾔言

• 具備 Android 開發的經驗


⾏行動 App 的基礎觀念


什麼是⾏行動 App??




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


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


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


⾏行動 App 類型



Web-Page App Native App

•Web 2.0

•HTML 5

•CSS 3

•JavaScript

• ...

•Web Service

•JSON-RPC

•XML-RPC

•SOAP

•Streaming

• ...

HTML / HTTPHTML / HTTP



MVC 設計模式



EPUB


淺談電⼦子書格式


優點缺點

azw

mobi / prc

lrf

pdf

市佔率⾼高⽀支援語⾳音

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

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

檔案輕巧翻⾴頁快速

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

精確排版中⽂文⽀支援佳

檔案⼤大翻⾴頁慢


什麼是 EPUB??


• Electronic Publication

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


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

• ⽀支援 DRM

• ⽀支援 CSS

• ⽀支援影⾳音內容


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)


EPUB 2 vs EPUB 3

功能技術

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

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


EPUB 格式


• ZIP 壓縮檔

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


• XHTML ⽂文件 (XHTML Document)

• 套件檔 (Package Files)

• 容器檔 (Container Files)

EPUB 三種層級


XHTML ⽂文件

• EPUB 的內容

• 類似 (幾乎相同) HTML

• EPUB3 可使⽤用 HTML5


http://slides.html5rocks.com/


套件檔• /mimetype

• ⼀一定為 application/epub+zip

• /DIR/NAME.opf

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

• /DIR/NAME.ncx

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


容器檔

• META-INF/container.xml

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


EPUB 製作⼯工具


• Adobe InDesign

• IGP: Digital Publisher

• Apple Pages

• QuarkXPress

• oXygen XML Editor

商業軟體


OpenSource

• Sigil

• Booktype

• calibre


轉換程式

• Word2EPUB

• ePub Maker

• DocBook


WebView


WebView 的介紹


• Android 內建的簡易版瀏覽器

• ⽀支援 HTML5 / CSS3 / JavaScript

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


• 設定 AndroidManifest.xml

• 配置 layout 檔

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

使⽤用⽅方法


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

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


配置 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"/>


撰寫程式


WebView

• android.webkit.WebView

• 重要 API

• loadData()

• loadUrl()

• zoomIn() / zoomOut()


WebView (cont)

• 導覽 (Navigation) API

• canGoBack() / goBack()

• canGoForward() / goForward()

• canGoBackOrForward() / goBackOrForward()


• 取得 WebView 物件

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

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

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

• 指定網址或本地資料


取得 WebView 物件

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


變更瀏覽器的設定

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


WebSettings

• android.webkit.WebSettings

• 存取 WebView 的組態資料

• 重要 API

• setJavaScriptEnabled()

• !! ALL !!


組態⾴頁⾯面處理⽅方法

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


WebViewClient

• android.webkit.WebViewClient

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

• onPageXXX() / onFormResubmission()

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


⾃自定使⽤用介⾯面

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


WebChromeClient

• android.webkit.WebChromeClient

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

• onProgressChanged()

• onReceivedXXX() / onjsXXX()

• onCloseWindow()


指定網址或本地資料

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

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

網址

本地資料


JavaScript 整合


• WebView 可與 JavaScript 整合

• ⽅方式• WebChromeClient.onjsXXX()

• JavaScript ➞ WebView

• WebView ➞ JavaScript


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

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

JavaScript ➞WebView


<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


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

WebView➞JavaScript

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

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

Activity

HTML


實作 EPUB Reader


Why??

• 實作私有的 DRM

• 實作特殊的效果或功能


• Bottom-Up

• 利⽤用現成的 OpenSource Project

實作⽅方法


FBReader

• Free & OpenSource

• Android 平台著名的 Reader

• http://www.fbreader.org/

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

Plucker / PalmDoc / TCR / RTF / ...


取得原始程式碼

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

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


準備

• Android SDK >= 1.6

• Android NDK >= r4b

• Apache Ant >= 1.7.0

• Cygwin >= 1.7 (Windows Only)


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

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

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


擴充 FBReaderJ

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


Q & A


Documents

Android vs e pub