[Android] 土製Play store API

認真說的話, 這也算不上啥非官方API, 算是一個為了抓取Play store上資訊的一個小小工具: PlaystoreUtil

現在很多網路的服務, 大多有提供開放的REST API來供人寫原生的程式使用, 當然也有非常多並沒有, 像是Play store, 目前就沒開放的API可供存取, 剛好想要有個東西可以查詢某個app在play store上是屬於啥分類的, 所以就乾脆自己自製一個囉…

現在的網頁, 大多結構性很好, 所以就算沒有REST API, 其實也不難處理, 搭配上 jsoup , 可以說輕而易舉

jsoup是一個可以用css selector來解析html的Java函式庫, 有了這個, 解析html可以不用辛苦的爬dom tree, 只要幾行簡單的程式即可:

Document doc = Jsoup.connect("http://example.com/").get;

Elements links = doc.select("a[href]"); // a with href
Elements pngs = doc.select("img[src$=.png]");

再來看看play store

先看看每個app的資訊畫面, 以Facebook為例, 它的url是 —

http://ift.tt/1vdf2kb

很明顯的, id後面是package name, 另外如果加上”&hl=”可以指定語言, 然後再看到頁面上:

在Facebook (公司名稱)下方有個分類, 可以使用Chrome的開發人員工具(我比較習慣這個), 找到這個連結的css class名稱是”document-subtitle category”,而名稱則在它底下的一個span, 這span有個屬性itemprop, 值是genre

因此, 透過以下這段code就可以取到類別名稱囉

Document doc = Jsoup.connect("http://ift.tt/OQdlpn" + packageName + "&hl=" + locale.getISO3Language()).get();
Elements elements = doc.select("span[itemprop=genre]");

當然, 這方法不只適用於play store, 其他網頁也可以嘗試用這個方法來取得資料

詳細的範例在: http://ift.tt/1oNXmMj

from Tumblr http://ift.tt/1oNXnQw

via IFTTT

[筆記] Android library project和manifestmerger.enabled

Android library project是為了解決Android開發中在不同專案間分享原始碼以及資源檔(resource)而出現的, 傳統的jar並未考慮資源檔的問題, 因此便需要靠Android library project來解決

目前, Android library project已經被廣泛運用, 舉凡ActionbarSherlock, Facebook Android SDK, 很多都已採用這形式

不過現在一般用法還是比較廣泛應用在跟UI相關這類的應用上, 這也合理, 這類的應用常需要包含原始碼和資源檔, 不過它也適合在其他應用上, 舉個例子(好吧, 這例子有點不清不楚), 我們也有可能需要讓所有使用某個library project的應用程式自動加上一個Intent Receiver, 假設這receiver實作上是固定的, 並不需要使用的應用程式自行去繼承, 或是, 我們希望某個Activity的實作是被連結到各個應用程式中, 這類應用使用Android library project也是可以辦到的

這類的應用, 通常還需要在AndroidManifest裡宣告, 除了receiver, activity, 也有可能加上一些service, 甚至是permission, 正常來說, 在建置使用了Android library project的專案時, library project裡的AndroidManifest的內容並不會合併到最後的AndroidManifest裡, 以致於, 雖然在library project內這些都被宣告了, 但成品內可能無法被使用, 這解法也很單純, 只要在應用程式(不是library project)的project.properties裡加上:

manifestmerger.enabled = true

Manifest merger似乎存在有一段時間了, 但似乎也沒看到啥正式的官方文件, 不過目前這方法是可行的就是了

via Tumblr http://julianshen.tumblr.com/post/64537710342

[Android] Retrofit + Signpost : 替Retrofit加上OAuth支援

看到Square發表的這個Retrofit - http://square.github.io/retrofit/ 蠻有趣的, 它的目的似乎是試圖的想要去簡化開發REST client, 開發者不用寫太多的邏輯, 只要寫一個Interface跟利用annotation就可以完成一個簡單的REST client:

public interface GitHubService {
  @GET("/users/{user}/repos")
  List<Repo> listRepos(@Path("user") String user);
}

因為開發者只需要寫interface和annotation, 實質上並不用寫任何的code, 真正實作的部份他用了Proxy class的技巧包裝起來了, 這作法讓我想起來很久之前我在之前的工作幫公司寫的一個legacy系統的wrapper, 那時有很多機器產生的interface, 如果人工一個個實作很浪費時間, Proxy class可以解決掉這一部分的問題, 同樣的在retrofit似乎也是想用這技巧節省實作

但可惜的是, 現在的retrofit並還沒加入OAuth的支援, 因此送出去的API部分並沒被oauth簽章過,不過所幸要解決這一部分也不難, 寫一個Client class搭配Signpost還是可以做到, 這邊範例繼承了OkClient(使用OkHttp) :



因為OkHttp也是一種HttpURLConnection, 因此Signpost搭配DefaultOAuthProvider和DefaultOAuthConsumer即可, 另外初始化RestAdapter時加上這個新的Client即可:

RestAdapter restAdapter = new RestAdapter.Builder() .setClient(new SignedOkClient(mConsumer))

[Android] 自定義View屬性

在前一篇寫了一個自訂義的layout - SimpleCellLayout, 前一個版本的問題就是, 必須是寫程式把child view加進這個layout之中, 而且針對像是欄與行的數目也必須在程式裡設定, 並無法寫到layout xml中, 所以這次的目邊就是要讓這個layout可以像下面這樣用layout xml來擺佈:


在這範例之中, 用到幾個像是col, row, gapsize, cellX這些在原生Android並不存在的屬性, 為了這些屬性, 就需要定義一個attrs.xml在res/values目錄內, attrs.xml 裡面要定義的就是這些樣式描述屬性, 這邊定義了: 給SimpleCellLayout本身用的col(欄數), row(行數), gapsize(間距大小), 以及給他的Child views用的cellX(格子的橫軸位置), cellY(格子的縱軸位置), colspan(格子寬), rowspan(格子高), 除了gapsize我們需要的跟實際螢幕上的大小有關, 所以格式定義為dimension外(就是可以用3dp, 1px這類的值), 其他都是整數就可

這些屬性, 到時候就是要放在xml標籤內的屬性

要用到這些屬性, 需要先在tag裡面定義一個新的name space, 如同在前面範例寫的:

xmlns:celllayout="http://schemas.android.com/apk/res-auto"

文件內的範例大多是apk/後面接著package name, 不過Android Studio卻是建議使用"res-auto", 定義了這個name space後, 便可以在後面的tag內使用像是"celllayout:col"這樣的屬性了

那在layout內又要怎處理這些屬性? ViewGroup有兩個建構子所需要帶的參數含有AttributeSet, 基本上只要從這兩個建構子處理就好

這範例內的initFromAttributes就是用來從AttributeSet擷取這些屬性, 前面attrs.xml有定義stylable, 所以基本上有一堆相對應的Resource ID可以使用,這邊只處理了col, row, 和gapsize, 因為只有這三個屬性直接跟這layout相關, 至於這layout的child views該怎處理呢? 它就要靠LayoutParams了, 我在SimpleCellLayout內定義了一個CellLayoutParams, 基本上這類別也有一個建構子是用來處理AttributeSet的


這邊比較重要的就是要overwrite掉generateLayoutParams, 因為ViewGroup原有的generateLayoutParams實作的是回傳ViewGroup.LayoutParams, 他並不認得CellLayoutParams, 但SimpleCellLayout靠的是CellLayoutParams來儲存layout所需的資訊, 原本用程式來加入view的範例部份, 我是手動產生一個CellLayoutParams來給child view, 但如果是放在layout xml, 並無法指定要用哪個LayoutParams類別, 這時候就要靠generateLayoutParams了 有趣的是, 雖然是我自訂的layout, 但在我做完這些後, Android studio的UI編輯器, 卻知道怎去依據我的layout把元件畫到正確的位子上面:

[Android] 一個簡單的自製 layout - SimpleCellLayout

寫Android寫了這麼久, 才想到自己沒寫過custom layout, 剛剛花了點時間(主要時間還是花在跟Android studio和gradle搏鬥)寫了一個簡單的CellLayout (還很陽春) :

https://github.com/julianshen/SimpleCellLayout

寫custom layout還蠻簡單的, 在onMeasure決定自己和child views的大小, 在onLayout時把每個child views放到適當的位置, 目前還沒加入attibrtues的支援, 所以暫時還只能寫code自己把view加進去, 另外也還沒加檢查是不是會有重疊的views, 之後再來寫

這個layout跟GridView不同, 可以不用每個格子都是同一大小, 以下範例是把畫面劃成4x4的格子, 左上角的那張圖大小是2x2, 下方則是 4x2

[Android] 圓形大頭貼 - 使用Picasso的Transformation

現在不管是Google+也好, 或是Facebook (Home), 似乎都很喜歡用圓形的大頭貼像這樣 (左上角圖形,

但在server端存的大頭照其實都是都是方形的, 所以必須抓下來後再轉畫成圓的, 最近從網路抓圖的部分, 我還蠻喜歡用Picasso的

沒啥別的原因, 就是它簡單, 雖然說, 它似乎還是有一些小小問題, 不過它可以用這樣短短一行解決圖檔下載並顯示到ImageView的一連串動作:

Picasso.with(context).load("http://i.imgur.com/DvpvklR.png").into(imageView);

不過, 簡單的代價可能在其他的地方來說彈性就不高了, 不過, 做這樣一個小玩意兒的彈性倒是還有, 在Picasso中, 可以實作Transformation把下載下來的圖檔再作一次後處理, 在它的網頁有一個CropSquareTransformation的範例, 圓形的大頭貼可以視為這一個的延伸:

這邊利用了BitmapShader重畫了一張圓形的大頭貼, 出來的結果就會像是這樣:

[Android] 一閃一閃亮晶晶的BlinkLayout

在Androids Do Daydream裡有提到Romain Guy要他提(大概假的吧)在layout裡面放"<blink>"可以做到view閃爍的效果而不用寫到一行code

查了一下AOSP的原始碼也的確有這東西, 它是一個躲在LayoutInflater的一個叫BlinkLayout的東西, 這樣一來就可以配合TextClock (API Level 17)來做一個閃爍的時鐘了


不過, 這樣, 是整個TextClock在閃, 而不是像一般數字鐘一樣是只有":"閃, 如果要做到只有":"在閃, 那只好把"時"跟"分"給拆開, 像這樣:

[筆記][Android Studio]Git push

本想說有直接整合了Git, GitHub是件不錯的事, 沒想到要把新project push到remote git就栽了....

Android Studio/Intellij 似乎沒介面設定remote (搜尋了半天沒發現這種答案, 啃了半天的使用手冊也沒發現), 現在如果要把既有的project給匯出到遠端的git (如bitbucket), 就得利用command line (以bitbucket 為例):

1. 在bitbucket上create一個新的project
2. 在Android studio選"VCS"->"Import into version control"->"Create Git repository", 這樣就可以建立一個local的repository
3. "VCS"->"Git"->"Add to VCS"
4. "VCS"->"Git"->"Commit File"
5. 到command line下切換到project目錄下"git remote add origin ssh://git@bitbucket.org/xxx/xxx.git"
6. 回到Android studio, "VCS"->"Git"->"Push"

要注意的是, 如果你已經有一個remote repository,"VCS"->"Import into version control"->"Share project on GitHub"會失敗

[筆記] Android Studio, Gradle & Native libraries

最近試用Android studio開發, 可能有些習慣被以往Eclipse慣壞了, 剛剛發現放在libs/底下的東西不像以前會被自動建置到apk內, 有點小訝異, 對jar file來說, 可能還好不算太難, 在build.gradle的dependencies內補上一筆就夠了, 但對native library (jni)那些.so檔, 就沒辦法

用這樣解決了 Google了一下, 並且在Stack overflow上找到些解法來試, 可能因為Android studio跟Gradle Android plugin還一直在變化中, 在現在這版一直沒成功, 後來小改一下成底下這樣就成功了:


原本找到的解法是pkgTask.jniDir new File('build/native-libs') , 這樣會得到

> Directory 'build/native-libs' specified for property 'jniDir' does not exist.

把"new File"改成"file"就沒問題了,不過現在一切應該都還在開發中, 未來可能會有原生的native lib 支援也不一定, 未來可能這方法也不管用了吧

[Android dev] JsonReader

原本在Android下解析JSON內容,  大多用JSONObject和JSONArray, 這兩個是很簡單的JSON parser, 只要將字串(String)傳入即可

不過, 這跟在用DOM解析XML是有類似的問題, 解析文件是一氣呵成, 必須要把所有內容先走過一遍, 也需要更多的記憶體來儲存, 這對於解析較大的文件是一個大問題, 必須要花費更多時間和空間, 而且如果所需要的資料就算只是整份文件中間的一小部分, 還是得先把整份文件走完, 在XML, 可以用SAX來解決這問題, 但Android要到API level 11(Honeycomb) 才新增了JsonReader這個算是JSON界的SAX的解決方案

 JsonReader類似SAX, 也是一種streaming parser, 並不用一次讀出所有字串內容, 它要的只是個Reader, 但不太像SAX屬於事件驅動(event driven)的方式, 它應該比較像token consuming, 它定義了幾類基本的JsonToken,  它也有BEGIN(END)_OBJECT, BEGIN(END)_ARRAY這種類似SAX中startElement, endElement, 但卻沒類似SAX的startDocument

解析一個JSON物件的程式碼如下:

     {username:"Bob", age: 14, sex: "m"} 

     reader.beginObject();
     while (reader.hasNext()) {
       String name = reader.nextName();
       if (name.equals("username")) {
         username = reader.nextString();
       } else if (name.equals("age")) {
         followersCount = reader.nextInt();
       } else {
         reader.skipValue();
       }
     }
     reader.endObject();

解析一個物件, 要從beginObject開始(陣列則是beginArray), endObject結束, 接著透過一個while loop一個個走過這物件內所有的token, 說實在的, 不是很好debug,  你必須要先知道下一個要處理的token是啥類別, 以上面的例子為例, 物件內第一個token是"username", 這是一個JsonToken.NAME, 因此要用nextName來處理, 搞錯了就會出錯, 還不容易知道錯哪,  而上面那例子裡的"else"也是必須的, 拿掉的話, 在endObject就會出錯, 因為這段程式並沒去處理"sex", 因此處理完sex這個名字後, 並未消化掉"m"這個值(JsonToken.STRING), 而是直接endObject, 這會產生一個IllegalStateException

為了避免用了錯誤的方式處理下一個token, 可以先用peek()來看一下下一個要處理的種類

在可讀性上, 用JsonReader寫出的並不是很好, 但它卻適合來處理大的JSON文件, 或是像Twitter Streaming API這種幾乎無止盡的

這當然也不是只有在Android上有, Google也早把這也包含到GSON去了

[Android][筆記] BitmapShader

http://www.curious-creature.org/2012/12/11/android-recipe-1-image-with-rounded-corners/
這篇文章裡面使用到了BitmapShader做圓角的效果, 使用這方法, 如果drawRect的大小比原先大的話, 會根據Shader.TileMode來畫出不同的效果:

Shader.TileMode.CLAMP (效果: 尾端拉長) --

Shader.TileMode.MIRROR (效果: 鏡射) --

 

(畫面是我的小作業 - iTunes U for Android)

 

node.js for Android

這是我給自己練習NDK的作業,選擇node.js的原因是, 沒啥, 就只是覺得應該會蠻好玩的, 之前就有念頭想po, 加上node.js所需要的像是openssl, v8等等, 在Android上早就有了, 想說porting應該也不會有太大的困難吧, 應該也不用改太多code才對

實際是,還是有點問題, 需要改些東西, ndk的build system可以說是原本Android的簡化版, 所以有些東西並沒有, 所以並不是把原本的Android.mk copy過來就沒問題了, 比如說v8, LOCAL_GENERATED_SOURCES, intermediates 這些東西雖然有在原本aosp的build system內, 但在NDK就完全不存在, 但由於v8和node都有需要把js lib轉成CPP一起build進去, 所以這時候就要借助這類的東西:
$(shell python $(JS2C_PY) $(GEN1) CORE off $(LOCAL_JS_LIBRARY_FILES))

起初我並沒注意到js2c這部份, 結果最後link不過, 缺了一堆東西, trace之後才發現少這部份

此外, 在uv的部份, 由於uv是node的native library的部份, 有一些OS相關的code, 但由於Andorid的bionic比起libc是算簡化版本, 有些API並不存在, 因此除了為android產生一些專屬的config.h (我從linux的版本去改的), 還要改一些code

目前的進度是, 可以用ndk-r8b build出Android可用的可執行檔(還沒完全測過, 應該有些bug代解), 先全用static link的

Source codes放在GitHub : https://github.com/julianshen/node-android

還有一些想做的還沒做:

1. 接上NativeActivity
2. 透過AssetManager存取js files
3. OpenGL ES apis
4. Android apis
5. 其他? (Packaging tools and etc..)

[ADK] 連接ADK2012到MacOS Lion

我家裡的電腦是Mac mini, OS是Mac OS Lion, 如果照著ADK2012的開發文件想要去設定環境來開發, 一開始就會碰壁了

在文件中寫著, 你可以從"repo init -u https://android.googlesource.com/accessories/manifest"下載原始碼, 或是下載Mac版的ADK 2012 IDE (應該是由Arduino IDE改的)來開始開發

但不管是IDE也好, 還是照著command line的步驟來做, 都會得到無法在找到/dev/ttyUSB0的錯誤(在IDE裡面也根本看不到這個), 剛用估狗大神查了一下, 有人討論, 但也沒有答案, 最後是在ADK2011的文件裡找到解答, 差的就是FTDI USB Driver, 其實照它講的位置也沒找到mac版本的driver, 只有windows版本的driver, mac版本的可以到FTDI chip的官網下載

裝完FTDI driver後, 打開IDE就可以看到USB serial的位置了

在我電腦的例子是/dev/tty.usbserial-AH015SE1

接下來如果到"android-accessories/adk2012/board/MakefileBasedBuild"去在重build一次並重燒, 這次會發現, 在做

$> ./flash

這步驟時還是會失敗, 這是因為在這script裡寫死了

UART=/dev/ttyUSB0

所以UART的位置不是這個就會有問題, 因此我改成下列的方式燒

$> android-accessories/ADK2012.app/Contents/Resources/Java/hardware/tools/adk2tool /dev/tty.usbserial-AH015SE1 erase

$> android-accessories/ADK2012.app/Contents/Resources/Java/hardware/tools/bossac --port=tty.usbserial-AH015SE1 -w -b app/bin/test_sam3x_ek_sam3x8-flash.bin

$> android-accessories/ADK2012.app/Contents/Resources/Java/hardware/tools/adk2tool /dev/tty.usbserial-AH015SE1 reset

要照這順序執行, 一開始我不小心erase掉了後, 燒不成功(因為bossac少加了 --port), 整台黑漆漆的不動, 嚇了我一身汗, 以為把它搞掛了... :P

好吧, 可以開始亂改看看了

[Android] ADK 2012 偽開箱

昨天去了GTUG聽了關於Arduino的分享, 硬體我是大外行, 但這東西還真的是很有趣呀! 其實在Google I/O拿到了免費的ADK 2012, 目前也還沒想到除了高級鬧鐘外, 我要拿它來玩啥, 先來個開箱好了...呃...但其實我老早就把箱子給破了....好吧, 這是個偽開箱

 

整個東西其實是用磁鐵吸住的, 所以要把這鬧鐘箱打開, 其實很簡單, 打開後分為兩塊版, 上面那塊版據說是Arduino Due, 下面則是一堆Sensor

 

這一塊就是Due, 後端有SD

 

前端則有兩個USB加上電源, 它可以由USB供電, 也可以由這個電源供電, USB一個是連接PC用, 一個則是手機

 

Sensor則是有溫濕度感應, 大氣壓感應, 光感應, 顏色, 加速度, 磁力, proximity sensor等等... (呃, 這樣還是個鬧鐘嗎?)

當然也有NFC:

整個合體的外觀就像這樣:

 

當然, 這不是普通的Arduino, 這是ADK 2012, Android手機可以透過USB或藍牙與它連結

Android developer網站上有開發簡介: http://developer.android.com/tools/adk/adk2.html

也有一個範例程式, 可以從Play store上下載

不過還沒想到該拿它來做啥, 不過以這形狀, 如果想拿來做個啥機器人之類的, 就有可能會需要把它給拆了吧?

不過如果能做一個這樣的東西, 也不賴呀:

[Android] Enable/Disable Activity at runtime

這篇主要來自Google I/O 2012這兩個Sessions:

Making Good Apps Great: More Advanced Topics for Expert Android Developers

Doing More With Less: Being a Good Android Citizen

在這兩堂演講中有提到, 可以利用"PackageManager.setComponentEnabledSetting"把不用的Intent receiver給停用, 這在Android中的確相當有用處, 常常Intent broadcast都是一個造成系統忙碌的主要原因, 在早期的Android版本, 甚至常常碰到因"android.net.conn.CONNECTIVITY_CHANGE"所導致的ANR, 這是因為註冊聽這Intent的receiver常常非常的多(大多網路相關, 而智慧型手機最常見就是網路相關的軟體)

不過這邊要講的並不是這個問題, 不過也可以應用到同樣的技巧

Android中, 可以設定多個Activity去處理同一種的Intent, Share (android.intent.action.SEND)就是最典型的例子, 但這也造成另一種困擾, 註冊的應用程式太多, 導致整個Share menu相當的雜亂難選:

See the full gallery on Posterous

由這個例子看來整個list相當的長, 這對使用者來說可能不好用, 而且問題在於, 有些可能不用一開始就出現, 比如說如果沒有登入任何一個e-mail account, Mail這選項是可以被藏起來的, 這作法就是

ShareActivity 預設成disable:

<activity android:name="ShareActivity" android:enabled="false">

這樣如果沒enable它的話, 就不會在Share list出現, 只要我們在某個點(比如說已經完成登入帳號)去enable它, 它就又可以回到這list了:

if(pm.getComponentEnabledSetting(cname) != PackageManager.COMPONENT_ENABLED_STATE_ENABLED ) {
            pm.setComponentEnabledSetting(cname, PackageManager.COMPONENT_ENABLED_STATE_ENABLED, 0);
        } else {
            pm.setComponentEnabledSetting(cname, PackageManager.COMPONENT_ENABLED_STATE_DISABLED, 0);
        }

使用HTML5/Javascript做一個像Instagram的相機 (Only works on Opera mini)

Instagram是一個我一直蠻喜歡的service, 主要是簡單, 加上有一些濾鏡可以豐富我隨手拍的照片, 當然, 重要的是, 高價賣給了Facebook而一炮而紅

上星期, 參加了AT&T Palo Alto Hackthon, 拿到大獎的團隊用了一個lib叫 caman.js 的, 這東西讓我有點小小驚艷, 它光用javascript (其實是Coffee script)就實作出了許多影像處理的功能, 這讓我興起想用這個來試著做出類似Instagram的東西, 當然是純用HTML+Javascript

首先面臨的一個問題是, 實作Camera的部份, HTML5支援media capture的方式有三種(請參考Reference 3) : Input tag, device tag, WebRTC (getUserMedia)

但很不幸, 除了Input tag以外, 大部分手機上的browser,如Android browser, Firefox, Chrome, 可以說幾乎全部都不支援, 這可真是有點令人傷心的消息, 因為用Input tag, 會離開browser跳到另一個程式, 這樣就無法結合自己的UI了

不過, 其實也沒那麼絕望, Android上的Opera Mini, 就支援getUserMedia (參考Reference 1)

因此就可以實作出像這樣的東西:

WebRTC(getUserMedia)的原理是把media stream導到video tag去播放(理應就這樣做), 但這樣出來的比例是camera的比例, Instagram的照片都是方形的, 要實現這點, 其實也不難, 就另外把內容畫到另一個方形canvas, 在video play的時候開始每隔40ms畫一次, 把video畫到canvas的方式也不難, 就把他當image看待就行了

不過當第一次使用時, 瀏覽器會跳出詢問是否允許使用相機的對話窗:

因為偷懶, 拍照的部份沒沿用原本的canvas, 另起一個Canvas, 並把可用的濾鏡放在下面:

接下來就是神奇的CamanJS的工作了, CamanJS是一個以CoffeeScript實作出來的影像處理的lib, 還真的蠻厲害的, 害我都有點想研究一下CoffeeScript了

使用方式非常的簡單, 像以下面的程式:

Caman("path/to/image.jpg", "#canvas-id", function () {

    // manipulate image here

    this.brightness(5).render();

});

就可以提高影像的亮度了,

此外還有許多預設的濾鏡, 我也偷懶直接採用, 這就是做出來的效果:

Source codes分享於此: https://github.com/julianshen/instagramlikecam

References: 

1. http://dev.opera.com/articles/view/playing-with-html5-video-and-getusermedia-support/
2. http://people.opera.com/danield/webapps/instant-camera/
3. http://www.html5rocks.com/en/tutorials/getusermedia/intro/
4. http://camanjs.com/

[筆記] Self published B2G app

B2G並未一定要開發者把應用程式發表到一個特別的app store, 網站也可以自行加一個install按鍵, 讓使用者把你的網站當應用程式裝到手機內

首先, 你必須要先有個manifest, 目前manifest並沒強制的檔名, 但文件裡建議叫 xxxx.webapp, 以下是範例內容:

 

{ "name": "MyTestApp", "description": "test app", "launch_path": "/", "icons": { "128": "/img/icon.png" }, "developer": { "name": "Julian Shen" } }

 

然後在網頁內加上檢查是否安裝, 以及安裝的程式碼, 範例如下:

var manifestUrl = 'http://localhost:3000/manifest.webapp'; var app = navigator.mozApps;  function checkInstalled() { var request = app.getSelf(); request.onsuccess = function() { if(request.result) { //installed console.log('installed'); document.getElementById('installmsg').style.display='none'; } else { //not installed console.log('not installed'); } }; }  function install(cb) { var request = app.install(manifestUrl); request.onsuccess = function() { alert('installed'); };  request. function() { alert('Not installed'); } }

這邊要注意的是manifestUrl必須是full path而不是只有相對位置, 寫相對位置, 它還是讀的到, 但會出parse error, 之前害我搞半天一直以為是格式問題, trace了一下Webapps.js, 發現可能是判斷install origin有問題

目前安裝介面很醜:

安裝完就可以在Home screen看到它的存在了:

[Android][筆記] JavaScript injection in ICS

看來script injection也不算是啥旁門左道了, 在Android 4.0 ICS上的WebView也使用了同樣的技巧了(在Gingerbread上並未看到這樣的codes)

在ICS的Setting裡面"Accessiblity"裡有個設定叫"Install web script", 其實這東西應該沒使用者看的懂, 其實蠻怪的, 不過既然放了就有它的作用

ICS的WebView裡面有這樣一段codes:

int axsParameterValue = getAxsUrlParameterValue(url);

        if (axsParameterValue == ACCESSIBILITY_SCRIPT_INJECTION_UNDEFINED) {

            boolean onDeviceScriptInjectionEnabled = (Settings.Secure.getInt(mContext

                    .getContentResolver(), Settings.Secure.ACCESSIBILITY_SCRIPT_INJECTION, 0) == 1);

            if (onDeviceScriptInjectionEnabled) {

                ensureAccessibilityScriptInjectorInstance(false);

                // neither script injected nor script injection opted out => we inject

                loadUrl(ACCESSIBILITY_SCRIPT_CHOOSER_JAVASCRIPT);

                // TODO: Set this flag after successfull script injection. Maybe upon injection

                // the chooser should update the meta tag and we check it to declare success

                mAccessibilityScriptInjected = true;

            } else {

                // injection disabled so we fallback to the basic built-in support

                ensureAccessibilityScriptInjectorInstance(true);

            }

        } else if (axsParameterValue == ACCESSIBILITY_SCRIPT_INJECTION_OPTED_OUT) {

            // injection opted out so we fallback to the basic buil-in support

            ensureAccessibilityScriptInjectorInstance(true);

        } else if (axsParameterValue == ACCESSIBILITY_SCRIPT_INJECTION_PROVIDED) {

            ensureAccessibilityScriptInjectorInstance(false);

            // the URL provides accessibility but we still need to add our generic script

            loadUrl(ACCESSIBILITY_SCRIPT_CHOOSER_JAVASCRIPT);

        } else {

            Log.e(LOGTAG, "Unknown URL value for the \"axs\" URL parameter: " + axsParameterValue);

        }

這功能啟動的條件是url裡有"axs=1"或是剛講的那個設定是enabled, 而這一整段code是在onPageFinished最後被呼叫到的, 也就是頁面載入完成之後

它主要做的只有:

 loadUrl(ACCESSIBILITY_SCRIPT_CHOOSER_JAVASCRIPT);

這邊並不是強制去載入一個新的URL, 其實他做的就是script injection, ACCESSIBILITY_SCRIPT_CHOOSER_JAVASCRIPT的內容就是:

    // JavaScript to inject the script chooser which will

    // pick the right script for the current URL

    private static final String ACCESSIBILITY_SCRIPT_CHOOSER_JAVASCRIPT =

        "javascript:(function() {" +

        "    var chooser = document.createElement('script');" +

        "    chooser.type = 'text/javascript';" +

        "    chooser.src = 'https://ssl.gstatic.com/accessibility/javascript/android/AndroidScriptChooser.user.js';" +

        "    document.getElementsByTagName('head')[0].appendChild(chooser);" +

        "  })();";

它就是在最後把https://ssl.gstatic.com/accessibility/javascript/android/AndroidScriptChooser.user.js給inject到page

還沒去仔細看js裡面的內容, 似乎都是一些基本的東西的樣子, 還不太知道他的用意, 不過應該跟加速(?) Google本身的頁面有關係, 不然其他web site應該也沒用到這些東西

[Android] javascript injection in WebView

上次寫了一篇"startActivityForResult and callback in WebView", 本篇則是上次這篇的延伸應用, 這是有人問我如何inject一整個javascript file到一個web page內(剛剛回顧了一下自己這篇, 發現我把它叫做javascript injection)

其實原理是一樣的, 在載入完原本的web page之後, 一樣透過URL來插入script:

mWebView.loadUrl("javascript:var js = document.createElement('script');js.type = 'text/javascript';js.src = 'http://my_host/1.js';document.getElementsByTagName('head')[0].appendChild(js);");

一樣是透過"javascript:"來inject, 不一樣的只是, 這次我要插入的是一整個js檔, 所以這串javascript的目的就是要建立一個新的script element, 並將它插入head裡, 這樣任務就達成了

但這方法的缺點是, 來源必須是一個url, 也就是要把script file放在server才可以, 如果script是來自應用程式本身, 比如說放在應用程式apk裡面, 或是放在data partition就不行了

在Honeycomb之前的版本, 我還沒想到一個比較好的解法, 但Honeycomb (API level 11, 含11)之後就有一個比較簡單的解法了

作法就是overwrite WebViewClient的shouldInterceptRequest,這似乎就是為了類似的用途而生的呀~~

這邊我將來自於apk asset目錄裡的檔案的url定義成"asset://", 因此, 想當然耳, 要導向的url就是這種, 作法也很簡單, 將asset的input stream包裝成WebResourceResponse就可以了, 這樣只要"js.src="後面的url是"asset://xxx.js", 這js的來源就是apk裡的asset

缺點是, 這方法只適用API level 11之後

延伸應用? 其實應該可以利用這個API做出一個lightweight版本的client side serlvet (這樣叫好像也不是很貼切, 反正就是不需要透過http去存取), 不過因為資訊只有url可以使用, 因此不能implement "POST"...

 

題外話, 這個我是在Ice cream sandwich的emulator上測試的, 不過真的要小抱怨一下, 開個emulator要開很久, 看篇漫畫結束後還沒跑完, 如果叫developer完全用emulator開發, 真的會抓狂吧....這樣開發者的開發意願也會降低吧.... = ="

[筆記] Tabs on JQuery Mobile and Sencha touch

JQuery mobile跟Sencha touch都是蠻完整的mobile web framework, 兩者各有擅長, 比較起來以開發的角度我比較喜歡JQuery所標榜的"Write less, Do more"的哲學下的架構, 而不喜歡Sencha touch把一堆html寫到code裡面去, 但Sencha touch又有比較好的UI look and feel

以tab panel為例,

Sencha touch:

jQuery mobile:

這兩個作法大異其趣 

Sencha 的HTML 內容

裡面除了script以外根本就是空的, UI的創建放在app.js(以這範例而言)裡如下:

https://gist.github.com/1301828.js?file=gistfile1

Tabs的內容在哪? items裡分別就是兩個tab, html直接以字串的形態寫在裡面, 老實說, 我覺得這很醜, 也容易出問題, 如果頁面的內容是相當複雜的, 這樣並不是很好

 

再看看jQuery Mobile的作法:

這份source code有點偷懶, 剪剪貼貼過來的, 不過其實就這麼一個html, 並不需要寫額外的javascript code, 乾淨多了  

如果也可以用類似的寫法寫Sencha touch的UI似乎應該會比較好一點, 像是這樣寫:

做了個實驗, 剛寫下這段code把上面那段轉成跟第一個範例一樣的畫面:

https://gist.github.com/1301855.js?file=gistfile1

看來如果再多層包裝其實也不用醜醜的通通把UI hard code到js codes裡面去