cca(cordova chrome app)でAndroid apk作成してみる。2014-07-24

さて、
cordova関係の記事を見かけましたので、apk変換を試してみました。メモです、
chrome apps(chrome packagedapps) > apk
の変換、みたいな作業です。

参考サイト；
https://github.com/MobileChromeApps/mobile-chrome-apps/blob/master/docs/Develop.md

結論から先にいうと、
イマイチでした。そのままでは動作ＮＧが多く使えない。
cordova用に,chrome appsの設計を修正する必要もありそうです。
又、動作面でネイティブよりかなり劣る。

*)スワイプがスムーズでない、クリックイベント反応も悪い。
詳細仕様は、わかりませんが、モバイル版HTML5っぽくみえます。

win7 でのインストールなど
*) 参考ページ
https://github.com/MobileChromeApps/mobile-chrome-apps/blob/master/docs/Installation.md

[node.js などのインストール]
http://nodejs.org/
ＤＬして、インストールします。

1) Android SDK関係のpathを追加、
sdk\tools
sdk\platform-tools

2)ant のインストール
http://ant.apache.org/bindownload.cgi

pathも追加します。
C:\apache-ant-1.9.4\bin

npm もインストールされていましたので、DOSプロンプトから
cca インストールします。

>npm install -g cca

[プロジェクトの作成 ,実行]
cca create MyApp3 --copy-from=path/to/manifest.json

*)MyApp3 は、プロジェクト名
*) path/to/manifest.json は、
　chrome appsのmanifest を指定する。

www/下に、 chrome appをcopyしてるみたいです。

実行します。
＞
cca emulate android

コマンドラインからの、emulate　起動失敗しましたが、
apk 作成されました。
platforms\android\bin　の下です。

[実機デバイスにインストールして確認]

起動と、ＴＯＰ画面の表示はＯＫ

*) 画面遷移などはＮＧ，

次画面を起動する処理

イベント処理からの、chrome API (window系)

はＮＧで、２画面以上activity起動する仕組みがないようで

１画面Apps ならＯＫかもですね。

レスポンシブの開閉メニューなどはＯＫ，

モーダル表示もＯＫ

[まとめ、cca変換]
1)画面構成(遷移)によっては、ある程度使える。
2)ネイティブより劣るの、ネイティブをリリースするまでの
暫定アプリ（見れればよい程度）的は使い方はできそうです。
3) firefox AppsのAndroid版パッケージに似ている印象。
4) 公式ドキュメント少ない、(サンプルないかも。)

*)当面、積極的に使うレベルではない。(ユーザに出す製品としては)
cordova, ccaの今後の成長に期待したいところです。

*) まとめ（Chrome Packaged Apps 開発メモ）こちら、
http://knaka0209.blogspot.jp/2014/06/chrome-pkg.html

HTML5 canvasで、スライドショー部品を作成。 2014-06-19

梅雨ですね。
HTML5で、スライドショー部品を作成してみます。

全編の
http://knaka0209.blogspot.jp/2014/06/chrome-packaged-appshtml5canvas-2014-06.html
chrome Appsのスライド部品の続編です。
HTML5版に一部修正しました。

[前おき]
スライドショー部品で、jQueryプラグインを使用していたのですが、
画像の数が多くなると、読込み起動が重たくなる場合があり。
対策で別ライブラリ等を探したのですが。結局、HTML5で自作する事にしました。
(初期化で、ブラウザ画面内のIMGタグなどに、全画像配置する仕組みが重かったようです)

[主な要件]
1) 1画像づつスライドさせる。
2) １画像を通信して取得後完了後、アニメーションを開始。
*) 目安目標で、大きめの画像(500KB以上) 100-150 枚程度を、永久ループ可能。

[Screen]

[source code]
Github : https://github.com/kuc-arc-f/h5_canvas_slide

起動画面
https://github.com/kuc-arc-f/h5_canvas_slide/blob/gh-pages/top.html


ブラウザから、XMLHttpRequestを一部設定変更を除き使えないようで
Image.src 属性で直接ＵＲＬ指定します。
コールバックからのアニメ起動は同じ。
==========================
var image = new Image();
image.src = item.url + '?' + new Date().getTime();
image.onload = function() {
  CustomSlide.start_anim( image, mNUM_TIMER );
}
==========================

Chrome Packaged Appsで、スライドショー部品を作成。(HTML5/canvas) 2014-06-19

梅雨ですね。
HTML5で、スライドショー部品を作成してみます。

[前おき]
スライドショー部品で、jQueryプラグインを使用していたのですが、
画像の数が多くなると、読込み起動が重たくなる場合があり。
対策で別ライブラリ等を探したのですが。結局、HTML5で自作する事にしました。
(初期化で、ブラウザ画面内のIMGタグなどに、全画像配置する仕組みが重かったようです)

[主な要件]
1) 1画像づつスライドさせる。
2) １画像を通信して取得後完了後、アニメーションを開始。
*) 目安目標で、大きめの画像(500KB以上) 100-150 枚程度を、永久ループ可能。

[Screen]

[source code]
Github : https://github.com/kuc-arc-f/chrome_slide

初期データの配列作成します。　get_slideData()
スライド部品のインスタンスを作成し、
間隔＝ミリ秒
配列データ(URL etc)
canvas width
canvas height
を渡す。

XMLHttpRequest　で画像を取得
Imageのロードのコールバック内から
アニメーションを開始させる。


アニメーション処理。
タイマで起動、画面左の端でアニメ終了＞　次の画像の処理＞LOOP
*) 各描画間隔＝20 msecですが、10 -15msecでも良いかと思います。

*) 画像読込みを、１画像づつで。メモリ消費は減らせた気がします。

[update 2014-06-19 13:11]
続編のHTML5版も追加しました。
http://knaka0209.blogspot.jp/2014/06/html5-canvas-2014-06-19.html

asm.js で, 引数を渡す。 2014-06-13

asm.js で, 引数を渡す。 2014-06-13

さて、asm.jsの件です。
jsとの連携部分で
Ｃ言語側の関数をエクスポートしておき、ＪＳから呼び出すメモです。

SRC:
main関数なしで、関数のみ配置。
引数＝数値、数値、文字　を型変換と結合設定します。
リターンコードは、ＪＳ側で使います。


destの下に、HTML形式でコンパイルします。
引数は、
EXPORTED_FUNCTIONSで、Ｃは、接頭語＝アンスコ[_]が必要。

*) 関数指定無しは、-s EXPORT_ALL=1

>
EMCC_FAST_COMPILER=0 emcc  export1.c -o dest/export1.html -s EXPORTED_FUNCTIONS="['_ex_func01' ]"

呼び出すＪＳ、書きます。
ccall, cwrap() などで、関数使えるようです。
cwrap の場合は
関数名、戻り値、引数(複数可能)
を指定します。

出力されたHTMLに、読み込みます。
===
<script async type="text/javascript" src="test.js"></script>
===

ブラウザで読み込むと、asm.js処理結果が
JS呼出側からコンソールにログ出力されます。

*) 通常js(非asm) vs asm.js 性能比較の検証も、今後企画したいと思います。

単純な重たい計算処理を実装したところ、あまり誤差が出ませんでした。(汗、、)

asm.js で, helloworldに挑戦。 2014-06-13

さて、asm.jsの件です。

環境：
macで
emscripten　：1.19
LLVM : 3.3
clang : 3.3

環境構築の詳細は省略とさせて頂きます。(探せば出そうでした。)
流れ的には、下記のイメージだったようです。
============================================
node.js git homebrew がインストール済みの状態で、

git clone https://github.com/kripken/emscripten
*) /emscripten はPATHに追加した方が良いかもです。

brew install llvm --with-clang

で、
emcc を１回実行して、
ホームの $HOME/.emscripten を編集（LLVM_ROOT=llvmを、　brewでインストールしたフォルダ）
LLVM_ROOT = os.path.expanduser(os.getenv('LLVM') or '/usr/local/Cellar/llvm33/3.3_1/bin')  # directory

*)pyhton2のエラーで出る場合、/usr/bin/pythno2　に、pyhton2.7のリンク張って下さい。
============================================

[hello world出す。]

testフォルダにサンプルありましたのでコピー。
emscripten/hello_world.c

emccでコンパイルですが、fastcomp関係のエラーがでる場合、
EMCC_FAST_COMPILER=0
を設定します。 dest の下にコンパイルします。
>
EMCC_FAST_COMPILER=0 emcc  hello_world.c -o dest/hello_world.js

node.js で、確認します。
>
node dest/hello_world.js
hello, world!

シェルで記載する場合（参考）
HTML出力する場合
>
EMCC_FAST_COMPILER=0 emcc hello_world.c -o dest/hello_world.html

dest/hello_world.html を、ブラウザで開いて確認。

[インラインJavascript]

Ｃ言語側から、インラインで、javascript実行できるようです。
コンパイルします。
>
EMCC_FAST_COMPILER=0 emcc hello_world_in.c -o dest/hello_world_in.js

nodeで確認します。
Ｃの表示と、ＪＳの表示が両方出力されます。
>node dest/hello_world_in.js
hello, world!
#hello, world-Inline-JS

*)それでは、また

Chromium OS を、VMWareにインストールしてみる (2)。2014-06-11

さて、前編
http://knaka0209.blogspot.jp/2014/06/chromium-os-vmware2014-06-10.html
の続編です。

chrome OSのクローンＯＳぽい、Chromium OS
のレポートで
といってもカンタンな使い方編で、技術的な内容はありません。


再度ＯＳ起動して、ログインします。
パスワードの入力が必要なようです。

ランチャーを開けると

ブラウザ、ストア、Filesアプリなど。あります。

下のブラウザのボタン押すと、デスクトップが表示されます。

右ボタン押すと、メニュー表示内に壁紙の設定ができそうです。

壁紙の設定です。

ファイルの選択ボタンなどあります。

あらかじめＤＬした画像を、

ダウンロードのフォルダから設定してみました。

次に、Filesアプリ起動します。

左側に

ダウンロード

Googleドライブ

など、選択できそうです。

ファイルなどは、Googleドライブに保存が前提に見えます。

(ローカルにファイルを置く概念が無いように、見えます)

*) 開発に使えそうなＯＳでは無い気がしてきましたが。。

どちらかというと、スマホＯＳぽいかもしれませんね。

文書作成、システム開発でなく。軽めのネット作業を中心のＯＳ

と考えると。できる事は限定されるが十分使える範囲かもしれません。

以上、Chromium OS使用したレポートでした。

Chromium OS を、VMWareにインストールしてみる。2014-06-10

さて、chrome OSのクローンＯＳぽい、Chromium OS
が存在しているようで、インストールしてみました。

環境など；
win7 64bit
VMWare player 6.x (古い)


下記から、ＤＬできました。
http://chromeos.hexxeh.net/

[インストールの動画]
http://www.youtube.com/watch?v=Bnln_0iojWE

ＤＬしたファイル
===============================
ChromeOS-Vanilla-4028.0.2013_04_20_1810-r706c4144-VMWare.vmdk
ChromeOS-Vanilla-4028.0.2013_04_20_1810-r706c4144-VMWare.vmx
===============================

設定の変更。
vmxファイルを開き, ethernet　関係の設定を追加。
===============================
ethernet0.virtualDev = "e1000"
===============================

仮想マシンを開き、設定変更。
プロセッサ、コア数の変更　＝2

ネットワークアダプタの変更。

カスタム＞NAT でＯＫでした。

起動すると、ログイン入力要求されますので

ユーザ等入力、するとログインできます。

左下にランチャーも開きました。

左下のchrome 起動して、webサービスは使えるようです。
webStoreは開きましたが、アプリのインストールはできませんでした。
(DLボタンが表示されない。chromeOSではないので、当たり前ですね、、)

外部サバに、自社ブランドのchrome Apps(ZIP)置く。⇒ＤＬ後
機能拡張タブから読み込むと、インストールできました。
(開発時のカンタンな動作確認程度には、使えそうです。)

*)実機は、見たことないのですが、

webサービス、chrome Appsは使えそうですので

機能は限定されるけど

ネットユーザの、サブマシン的な使い方は十分できるるかもですね。

*) chrome bookが早く日本で発売されるといいのですが。。

[update 2014/06/11]
続編も追加しました。
http://knaka0209.blogspot.jp/2014/06/chromium-os-vmware-22014-06-11.html

Chrome Packaged Apps, Indexed DB編(2) 2014-06-06

前回のIndexed DDB編　
http://knaka0209.blogspot.jp/2014/06/chromedb1.html
の続きです。

Project: https://github.com/kuc-arc-f/chrome_db1

検索、表示系の処理
cursor 使って、データ格納します。
cursor.continue() で、次の行へ移動みたいです。


[表示系]
ＤＯＭ追加操作します。<li>タグで追加。

[スクリーン]

*) データ量も少ないので、動作は軽いですが、
5MB限界みたいですので、拡張できるか調べたいと思います。

*) まとめ一覧。こちら、
http://knaka0209.blogspot.jp/2014/06/chrome-pkg.html

Chrome Packaged Apps, Indexed DB編 2014-06-06

Chrome Packaged AppsのIndexed DB操作などについて。
HTML5の内容になり、Packagedに依存する部分は無いかと思いますが。
クライアント開発で使える技術かと思いますので、メモです。

*)Indexed DBは、開発中の製品でも実績が無いため、
 サンプル作りがあまい部分あります。。

Project: https://github.com/kuc-arc-f/chrome_db1

対応ブラウザなどのチェック、
今回は、Chromeのみで必要無いと思いますが、
window.indexedDB などを、一般的に起動時チェック方法ありそうです。

[ＤＢ初期化など]
ＤＢ存在しない場合、
onupgradeneeded() が呼ばれ、ストア作成する。
key:Id
Index : name
とかにしときます。(一旦、db.close() しときます。)


[データ追加]　HTML
追加の入力欄作成します。
id
name
kana　など


[データ追加]
 store に、putします。
*)
トランザクション開始＞ストアへPUT みたいな流れ。
key=id なので、重複値(id)は、追加されないようです。


*) 続きは、続編（表示系の処理）
に記載予定です。
http://knaka0209.blogspot.jp/2014/06/chromedb1-2.html

*)まとめ一覧。こちら、
http://knaka0209.blogspot.jp/2014/06/chrome-pkg.html

Chrome Packaged Apps ajax編、2014-06-05

Chrome Packaged Appsのajax通信で、ＲＳＳ取得などについて。メモです
(Packagedインストール及びデバック方法は省略させて頂きます。)

参考サイト様(公式かも)：
https://developer.chrome.com/apps/about_apps


ソースこちら、 https://github.com/kuc-arc-f/chrome_ajax1
(jQuery使ってます。)
chrome : v35.0.1916.114 での動作確認できました。

画面は、ボタンを配置して、イベント設定しておきます。
ＲＳＳ記事の表示領域は、空テーブルを配置。
*)スタイリングは, bootstrap3使ってますが、無しでもＯＫ。

https://github.com/kuc-arc-f/chrome_ajax1/blob/master/top.html
===============================================
<button class="btn btn-primary"  id="id-a-get">[ RSS GET]</button>

<table style="width:100%;" class="table table-striped table-hover" id="id-table1">
<tbody>
</tbody>
</table>
===============================================

通信クラス(ctlNews)から、
ajax通信し、XMLパースします。
N社のRSS通信して、記事を表示
*)クロスドメイン等のエラーがでると想定してましたが、
　問題なく通信できました。

https://github.com/kuc-arc-f/chrome_ajax1/blob/master/js/ctlNews.js
===============================================
===============================================

データ格納して、ＤＯＭ追加操作します。
ID=id-table1 のテーブル内に描画します。
Ａ要素は、target="_blank"　で、別ブラウザ起動で内容を表示。
===============================================
===============================================

ajax通信後、ＲＳＳ記事を表示できました。

*) まとめ（Chrome Packaged Apps 開発メモ）こちら、
http://knaka0209.blogspot.jp/2014/06/chrome-pkg.html

Chrome Packaged Apps, image編 2014-06-04

Chrome Packaged Appsのimage(画像)などについて。メモです
(Packagedインストール及びデバック方法は省略させて頂きます。)

参考サイト様(公式かも)：
https://developer.chrome.com/apps/about_apps

画像の表示で、
IMG要素-SRC属性に、画像ＵＲＬを指定すると。
セキュリティ関係のエラーが発生して、
表示できないようです。対策はありそうでした。
xhr(XMLHttpRequest) を使用すると、表示可能のようです。
*) 検索するとサンプルなどに、含まれてました。

ソースこちら、 https://github.com/kuc-arc-f/chrome_image
(jQuery使ってます。)

画像の取得処理。
*)どちらかというと、単純なDOM構築でなく。
通信処理後、バイナリをオブジェクトに渡す
みたいな処理ぽいです。

https://github.com/kuc-arc-f/chrome_image/blob/master/js/controller.js
===============================================
===============================================

表示用のDIVタグ配置します。
https://github.com/kuc-arc-f/chrome_image/blob/master/sub.html
===============================================
<div id="id-div-img"  ></div><br />
<div id="id-div-img2" ></div><br />
<div id="id-div-img3" ></div>
===============================================

サブ画面を開くと、
起動時に、外部クラウドから画像ダウンロードして
描画しています。
https://github.com/kuc-arc-f/chrome_image/blob/master/sub.js
*) 画像は、Github-page に、適当に事前に配置しておきます。

===============================================
===============================================

サブ画面に表示しました。

まとめ（Chrome Packaged Apps 開発メモ）こちら、
http://knaka0209.blogspot.jp/2014/06/chrome-pkg.html

*)
[update: 2014/06/05] Gistにコード一部貼付け修正しました。