Android 5.0 マテリアルデザイン(material design) RecyclerView, CardView 実装メモ --2014-11-18

さて、マテリアルデザイン関係で。(material design)
一部Viewの実装メモです。

Android5対応の修正メモ
http://knaka0209.blogspot.jp/2014/11/android5-2014-11-18.html
のＶｉｅｗコンテンツ一部です。

Github
https://github.com/kuc-arc-f/recycle3

参考ＵＲＬ：
RecyclerView　https://developer.android.com/samples/RecyclerView/index.html
CardView　https://developer.android.com/samples/CardView/index.html

[内容]
RecyclerView　、CardView
を含んだ、丸角行のリストViewです。
Fragment実装でなく、Activityに実装してます。
各行を押した時のイベント処理と、
遷移先の画面などを追加。

4x対応で、ShadowなどＺ軸関係の描画処理は無し。

[実装など]
build.gradle ,ライブラリのimport必要
========================
dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:21.0.0'
    compile "com.android.support:gridlayout-v7:21.+"
    compile "com.android.support:cardview-v7:21.+"

    compile "com.android.support:recyclerview-v7:+"
}
========================

RecyclerView　ですが
ListViewのメソッドとは、全く異なり
onCreateViewHolder
onBindViewHolder
などで、描画します。

========================
CustomAdapter.java
行のinflate時に、レイアウトＸＭＬのサイズ値が
適用されなかったので、APIでLayoutParams調整してますが。
不要な場合は、削除して構いません。

   public ViewHolder onCreateViewHolder(ViewGroup parent, int position)
    {
        LayoutInflater inf = (LayoutInflater) parent.getContext().getSystemService( parent.getContext().LAYOUT_INFLATER_SERVICE);;
        View ll = (View) inf.inflate(R.layout.fragment_card_view, null);
        LinearLayout.LayoutParams param_ll =new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT );
        ll.setLayoutParams(param_ll);

        ViewHolder vh = new ViewHolder( ll );
        return vh;
    }
========================

CardView
Radius　(丸角の大きさ)　＝8dpにしてます。
===================================
fragment_card_view.xml
    <android.support.v7.widget.CardView
        android:id="@+id/cardview"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        card_view:cardBackgroundColor="@color/cardview_initial_background"
        card_view:cardCornerRadius="8dp"
        android:layout_marginLeft="@dimen/margin_large"
        android:layout_marginRight="@dimen/margin_large"
===================================

＊）
丸角の描画処理など、カンタンにできて良いですね。
SDK21対応のShadow(影)など、
追加する事でマテリアルぽく仕上げできそうです。(次回、チャレンジ)

Android 5.0 対応の修正メモ 2014-11-18

さて、Android5 への移行対応です。
Android4/5 コンパチ仕様を目標に進めてましたが、苦労も多かったので、メモです

[準備 ,IDE等]
Android 5.0 SDK　のリリースをみると、Android Studioが推奨のようです。
(必須ではないかもしれません)
http://googledevjp.blogspot.jp/2014/10/android-50-lollipop-sdk-nexus.html

1) Android Studio　(0.8.14)  ＤＬする。
2) Android SDK Manager から、Android 5.0 SDK (SDK 21) をＤＬする。

[Android Studio へのプロジェクト移行]
import機能を使わずに、ファイルのcopy等で、手作業で移行する場合。
1)まず、ファルダ構成がかなり違います。
旧　Eclipseは、直下に
/src
/res
/libs
などが配置

Android Studioの場合
\app\src\main　下に
res
libs
\app\src\main\java
SRC -FILE
を配置。（srcフォルダは不要）

2) manifestの違い
単純に上書きしないほうが、良いかもしてません。
旧AndroidManifest.xml と、要素が異なる部分があります。
Android Studioの場合、build.gradle（/app/build.gradle）に、
minSdkVersion
targetSdkVersion
versionCode
versionName
その他、が管理されますので
必要な要素のみcopyし、build.gradle側も合わせて修正しました。

[material design]
リスト系Apps使えそうでなＵＩ　View関係を少し調べました。
※ SDK 21(Android5)以上の必須APIあるので、
　それ以下ではクラッシュする場合あります。

 RecyclerView　サンプルあり
https://developer.android.com/samples/RecyclerView/index.html
ListViewの置き換え、区切り線などの、
カスタマイズ(拡張性)ができたようです。

 CardView　サンプルあり
 https://developer.android.com/samples/CardView/index.html
丸角の幅指定、などが可能。

Shadow
https://developer.android.com/training/material/shadows-clipping.html
影の指定(Z軸)などが可能

カンタンな自作したサンプル、
RecyclerView　、CardViewを含んだ、丸角行のリストView。
http://knaka0209.blogspot.jp/2014/11/android50-material-design-recyclerview.html
Github
https://github.com/kuc-arc-f/recycle3


[Ad/ Admob の移行実装]
1) SDK manager から
Google Play Services をＤＬします。。(Extras　の下)

2) google-play-services.jar を。 /app/libs に置きます。

3) versionの指定
res/values/version.xml

<integer name="google_play_services_version">6171000</integer>

4) build.gradleの修正
dependencies に下記を追加、(6.1.71は、versionなので注意)
compile 'com.google.android.gms:play-services:6.1.71'

※) その他は、Eclipese版とほぼ同じ、
 　manifest の<activity>の指定内容など

[コラムなど、まとめ]
Android Studioの開発環境移行は、
Eclipseでの開発者はかなり苦労するかもしれませんが。
マテリアル対応のUIまわりは別としても
新環境で、リコンパイルする事で、今後の開発に有利になりそうです。
ARC(新しいＶＭ)に対応して、性能面での向上も期待したいところです。
*) ５実機入手できていないので、未検証ですが。

Unity3D で利用可能 Blenderで作成した。3DCG部品-- 2014-10-30

3DCG 初心者ですが、作成したCG(モデリング)部品を一部公開させて頂きます。
(fbx, blend 形式)

全て、Unity3D へ実装済みの部品です。
作りこみがあまい部分があり、
ゲーム内の衝突判定、
重力特性がらみで正常に動作しない場合は
ありそうですが。背景部品程度には使えそうですので。
公開(オープン化)とさせて頂きます。

＊）将来的にはAssetストアに、申請を目標としています。

[Github] https://github.com/kuc-arc-f/blender-3DCG

fish

https://github.com/kuc-arc-f/blender-3DCG/tree/master/fish
 [.fbx]
  fish08A7.fbx
  fish08A7-blue.fbx
 [.blend]
  fish08A7.blend
  fish08A7-blue.blend
 *)
 [Apps]
https://play.google.com/store/apps/details?id=com.kuc_arc_f.shoot

car-3

https://github.com/kuc-arc-f/blender-3DCG/tree/master/car-3
 [.fbx] car-kei08F1.fbx
 [.blend] car-kei08F1.blend
 *)
 [Apps]  https://play.google.com/store/apps/details?id=com.kuc_arc_f.kcar3

space-ship

https://github.com/kuc-arc-f/blender-3DCG/tree/master/space-ship
 [.fbx] space-08A7.fbx
 [.blend] space-08A7.blend
 *)
 [Apps] https://play.google.com/store/apps/details?id=com.kuc_arc_f.space

plane

https://github.com/kuc-arc-f/blender-3DCG/tree/master/plane
 [.fbx] prpe-08F.fbx
 [.blend] prpe-08F.blend

*)

 [Apps] https://play.google.com/store/apps/details?id=com.kuc_arc_f.plane

plane-2 (Shooting)

https://github.com/kuc-arc-f/blender-3DCG/tree/master/plane-shoot2
 [.fbx] prope-08A4.fbx
 [.blend] prope-08A4.blend
*)
 [Apps] https://play.google.com/store/apps/details?id=com.kuc_arc_f.shoot2

ship

https://github.com/kuc-arc-f/blender-3DCG/tree/master/ship
 [.fbx] ship08A14.fbx
 [.blend] ship08A14.blend
*)
 [Apps] https://play.google.com/store/apps/details?id=com.kuc_arc_f.ship

[animation 3D] animation 3DCG
 --Unity側で、animation再生の設定が必要。

animal- Bird

https://github.com/kuc-arc-f/blender-3DCG/tree/master/animal-%20Bird
 [.blend] bird-09A10-anim6.blend
 *)
 [Apps] https://play.google.com/store/apps/details?id=com.kuc_arc_f.bird

animal-Puppy

https://github.com/kuc-arc-f/blender-3DCG/tree/master/animal-Puppy
 [.blend] pup-09A3-anim2.blend

*)
 [Apps] https://play.google.com/store/apps/details?id=com.kuc_arc_f.puppy

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
を渡す。

	onload = function() {
	var canvas =document.getElementById('id_canvas');
	var iW = canvas.width;
	var iH = canvas.height;
	console.log( 'iW='+ iW +',iH=' + iH)
	var items= get_slideData();
	var slide = new CustomSlide(1000 * 10 ,items, iW, iH );
	slide.start();
	}
	//
	//function
	//
	function get_slideData(){
	var items= new Array();
	items[0]={ title:'p11.JPG' , url: 'http://kuc-arc-f.github.io/h5_t0604_page/img/p11.JPG' };
	items[1]={ title:'p12.JPG' , url: 'http://kuc-arc-f.github.io/h5_t0604_page/img/p12.JPG' };
	items[2]={ title:'p13.JPG' , url: 'http://kuc-arc-f.github.io/h5_t0604_page/img/p13.JPG' };
	items[3]={ title:'p14.JPG' , url: 'http://kuc-arc-f.github.io/h5_t0604_page/img/p14.JPG' };
	return items;
	}

view raw chrome_slide-js1.js hosted with ❤ by GitHub

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

	CustomSlide.load_image = function ( item, ipos) {
	console.log('#load_image=' + item.url );
	var xhr = new XMLHttpRequest();
	xhr.open('GET', item.url );
	xhr.responseType = 'blob';
	xhr.onload = function() {
	console.log('#r.onload,url=' + item.url );
	var image = new Image();
	var objURL = URL.createObjectURL(xhr.response);
	image.src = objURL;
	image.onload = function() {
	console.log('#image.onload.w='+ image.width + ',h='+ image.height);
	CustomSlide.start_anim( image, mNUM_TIMER );
	};
	};
	xhr.send();
	};

view raw chrome_slide-js2.js hosted with ❤ by GitHub

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

	CustomSlide.start_anim = function (image, msec ) {
	var ixSt = mWidthSlide;
	var ix = 0;
	var imx = msec / mDuration;
	var ixDf = ixSt / imx;
	console.log('imx='+ imx + ',ixDf=' +ixDf +',ipos='+ mPosition_Slide );
	setTimeout(function(){
	function gravity() {
	mContext.clearRect(0, 0, mWidthSlide, mHeightSlide);
	var iposX= ixSt - (ix * ixDf);
	// console.log('iposX =' + iposX );
	var iposY= CustomSlide.get_positinY(image);
	mContext.drawImage(image, iposX, iposY, image.width, image.height);
	if(iposX < 0){
	clearInterval(g);
	$(this).delay( mNUM_WAIT_AFT ).queue(function() {
	CustomSlide.display_anim( mPosition_Slide +1 );
	$(this).dequeue();
	});
	}
	ix++;
	};
	var g = setInterval(gravity, mDuration);
	}, 100 );
	};

view raw chrome_slide-js3.js hosted with ❤ by GitHub

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

[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関数なしで、関数のみ配置。
引数＝数値、数値、文字　を型変換と結合設定します。
リターンコードは、ＪＳ側で使います。

	//export1.c
	#include <emscripten.h>
	#include <stdio.h>
	#include <stdlib.h>
	char* ex_func01( int a, float b, const char* c )
	{
	char *po= (char *)malloc(sizeof(char) * 128 );
	sprintf(po, "a=%d ,b=%f ,c=%s\n", a, b, c );
	printf( "%d %f %s\n", a, b, c );
	return po;
	}

view raw asm-export-export1.c hosted with ❤ by GitHub

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 の場合は
関数名、戻り値、引数(複数可能)
を指定します。

	//test.js
	onload = function(){
	console.log('#onload');
	var ex_func01= cwrap( 'ex_func01', 'string', ['number' ,'number' ,'string' ] );
	var ret= ex_func01(1, 2.0, 'arg3');
	console.log('#ret=' +ret );
	}

view raw asm-export-js1.js hosted with ❤ by GitHub

出力された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!

シェルで記載する場合（参考）

	#!/bin/bash
	#export EMCC_CFLAGS="-O3"
	rm -rf dest/*
	export EMCC_FAST_COMPILER=0
	emcc hello_world.c \
	-o dest/hello_world.js \

view raw asm-hello-build-1 hosted with ❤ by GitHub

HTML出力する場合
>
EMCC_FAST_COMPILER=0 emcc hello_world.c -o dest/hello_world.html

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

[インラインJavascript]

Ｃ言語側から、インラインで、javascript実行できるようです。
コンパイルします。

	#include <emscripten.h>
	#include <stdio.h>
	#include <stdlib.h>
	int main() {
	printf("hello, world!\n");
	EM_ASM(
	//js-call
	console.log( '#hello, world-Inline-JS ');
	);
	return 1;
	}

view raw asm-hello-hello_world_in.c hosted with ❤ by GitHub

>
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() で、次の行へ移動みたいです。

	DbHelper.prototype.get_allItems = function(view)
	{
	var rqOpen = indexedDB.open(DB_NAME);
	rqOpen.onsuccess = function(e) {
	var db= e.target.result;
	var tx = db.transaction(STORE_NAME, 'readonly' );
	var store = tx.objectStore(STORE_NAME);
	var rq = store.openCursor();
	rq.onsuccess = function(e) {
	cursor = rq.result;
	if(cursor) {
	var item= new Item();
	var data = cursor.value;
	item.id =data.id;
	item.name = data.name;
	item.nameKana=data.nameKana;
	view.disp_line(item);
	cursor.continue();
	}
	db.close();
	};
	}
	};

view raw c0606-db1-top4.js hosted with ❤ by GitHub

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

	View.prototype.disp_init = function() {
	$('ul#id-ul-out').remove();
	var divOut= $('div#id-div-out');
	var ulObj= $('<ul id="id-ul-out"></ul>');
	divOut.append( ulObj );
	};
	View.prototype.disp_line = function( item ) {
	// console.log( items );
	var ulObj= $('ul#id-ul-out');
	var sLine='<li>' + item.id + ': '+ item.name + ': '+item.nameKana+ '</li>';
	ulObj.append( $(sLine) );
	console.log( sLine );
	};

view raw c0606-db1-top5.js hosted with ❤ by GitHub

[スクリーン]

*) データ量も少ないので、動作は軽いですが、
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 などを、一般的に起動時チェック方法ありそうです。

	function init_proc()
	{
	if (window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB) {
	console.log('OK: use indexedDB');
	}else{
	console.log('NG: use indexedDB');
	}
	var db= new DbHelper();
	db.getInstance();
	}

view raw c0606-db1-top1.js hosted with ❤ by GitHub

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

	DbHelper.prototype.getInstance = function( ) {
	var db=null;
	//open
	var rq = indexedDB.open(DB_NAME);
	rq.onupgradeneeded = function(result) {
	console.log('#onupgradeneeded');
	db = this.result;
	var store = db.createObjectStore(STORE_NAME, {
	keyPath: 'id', // key= id
	autoIncrement: false,
	});
	store.createIndex('byName', 'name');
	db.close();
	};
	};

view raw c0606-db1-top2.js hosted with ❤ by GitHub

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

	<form name="form1">
	id (int):
	<input type="text" id="id-text-id" value=""></input ><br />
	name:
	<input type="text" id="id-text-name" value=""></input ><br />
	kana:
	<input type="text" id="id-text-kana" value=""></input ><br />
	</form><br />
	<a href="#" id="id-a-add" >[ add ]</a><br />
	<br />
	<a href="#" id="id-a-show" >[ show ]</a><br />
	<hr />

view raw c0606-db1-top1.htm hosted with ❤ by GitHub

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

	DbHelper.prototype.proc_addItem = function(item ,view)
	{
	var rq = indexedDB.open(DB_NAME);
	rq.onsuccess = function(e) {
	console.log('#onsuccess_open');
	var db= e.target.result;
	var tx = db.transaction(STORE_NAME, 'readwrite');
	tx.oncomplete = function() { };
	var store = tx.objectStore(STORE_NAME);
	var request =store.put({
	id : parseInt(item.id ),
	name : item.name,
	nameKana: item.kana
	});
	request.onsuccess = function(e) {
	console.log('#onsuccess_add');
	db.close();
	proc_addComplete(view);
	}
	}
	};

view raw c0606-db1-top3.js hosted with ❤ by GitHub

*) 続きは、続編（表示系の処理）
に記載予定です。
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
===============================================

	ctlNews.prototype.load_rss = function( surl ) {
	var items =new Array();
	console.log( 'surl=' + surl );
	$.ajax({
	url: surl,
	type: 'get',
	dataType: 'xml',
	timeout: 5000,
	success: function(xml, status) {
	if (status === 'success') {
	var row = 0;
	var data = [];
	var nodeName;
	$(xml).find('item').each(function() {
	data[row] = {};
	//get-childre
	$(this).children().each(function() {
	//nodeName
	nodeName = $(this)[0].nodeName;
	data[row][nodeName] = {};
	// sttr
	attributes = $(this)[0].attributes;
	for (var i in attributes) {
	data[row][nodeName][attributes[i].name] = attributes[i].value;
	}
	//text
	data[row][nodeName]['text'] = $(this).text();
	});
	row++;
	});
	var ict= 0;
	for (i in data) {
	var itm= new Item( );
	itm.title= data[i].title.text;
	itm.url = data[i].link.text;
	if(ict < mMAX_CountItem){
	items[i] =itm;
	console.log( 'lnk='+ itm.title );
	console.log( 'url='+ itm.url );
	}
	ict++;
	}
	} //if_stat_success.
	$(this).delay( 500 ).queue(function() {
	disp_news(items);
	$(this).dequeue();
	});
	}
	});
	};

view raw c0605-ajax1-top-1.js hosted with ❤ by GitHub

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

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

	function disp_news(items)
	{
	for(var i = 0; i < items.length ; i++){
	var body= $('table#id-table1');
	var trObj = $('<tr></tr>');
	var tdObj = $('<td></td>');
	var a_tag = $('<a href="'+ items[i].url +'" target="_blank">'+ items[i].title +'</a>');
	var tdObj02 = $('<td align="right"></td>');
	var sAtag02 = '<a href="'+ items[i].url +'" target="_blank">';
	sAtag02 += ' <button class="btn btn-default" style="margin-left:10px;">';
	sAtag02 += ' <i class="glyphicon glyphicon-chevron-right"></i>';
	sAtag02 += ' </button>';
	sAtag02 += '</a>';
	tdObj.append(a_tag);
	tdObj02.append( $(sAtag02) );
	trObj.append(tdObj);
	trObj.append(tdObj02);
	body.append(trObj);
	}
	}

view raw c0605-ajax1-top-2.js hosted with ❤ by GitHub

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

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
===============================================

	var xhr = new XMLHttpRequest();
	xhr.open('GET', imageUrl);
	xhr.responseType = 'blob';
	xhr.onload = function() {
	var img = document.createElement('img');
	img.setAttribute('data-src', imageUrl);
	img.setAttribute('id', s_id);
	img.className = 'icon';
	var objURL = this._createObjectURL(xhr.response);
	img.setAttribute('src', objURL);
	element.appendChild(img);
	return img;
	}.bind(this);
	xhr.send();

view raw c0605-image-top-1.js hosted with ❤ by GitHub

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

表示用の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 に、適当に事前に配置しておきます。

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

	AppShow.prototype.proc_init = function() {
	console.log('#proc_init');
	var s1='http://kuc-arc-f.github.io/h5_t0604_page/img/p1.png';
	var s2='http://kuc-arc-f.github.io/h5_t0604_page/img/p2.JPG';
	var s3='http://kuc-arc-f.github.io/h5_t0604_page/img/p3.JPG';
	var ctl = new Controller();
	var divcont = document.querySelector('div#id-div-img');
	var img_t= ctl._requestRemoteImageAddElem( s1, divcont ,'id_img1');
	var divcont2 = document.querySelector('div#id-div-img2');
	var img_t= ctl._requestRemoteImageAddElem( s2, divcont2 ,'id_img1');
	var divcont3 = document.querySelector('div#id-div-img3');
	var img_t= ctl._requestRemoteImageAddElem( s3, divcont3 ,'id_img1');
	}

view raw c0605-image-top-2.js hosted with ❤ by GitHub

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

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

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

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

Chrome Packaged Apps 開発メモ,2014-06-04

Chrome Packaged Apps 開発メモ
(コンテンツは必要に応じて追加を計画しております。)

[ 背景 ]
chrome OS向け(及びマルチプラットフォーム)の製品開発を目標とし、
Packaged Apps　の開発技術メモとして、掲載させて頂こうと思います。
＊) それにしても、chrome book とかまだ販売されませんね。日本は、、
試してみたい気分です。。

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

[chapter-01]

window操作
http://knaka0209.blogspot.jp/2014/06/chromewindow1.html

[chapter-02]

window操作, 画面間の値渡し
http://knaka0209.blogspot.jp/2014/06/chromewindow2.html

[chapter-03]

storage操作
http://knaka0209.blogspot.jp/2014/06/chromestore.html

[chapter-04]

image操作
http://knaka0209.blogspot.jp/2014/06/chromeimage.html

[chapter-05]

ajax通信で簡易ＲＳＳリーダ作成
http://knaka0209.blogspot.jp/2014/06/chromeajax1.html

[chapter-06]

Indexed DB編(1)

http://knaka0209.blogspot.jp/2014/06/chromedb1.html

[chapter-07]

Indexed DB編(2)

http://knaka0209.blogspot.jp/2014/06/chromedb1-2.html

[番外編1] cca(cordova chrome app)でAndroid apk作成してみる

cordova を利用したandroid Apps(APK)の手順等です。
http://knaka0209.blogspot.jp/2014/07/ccacordova-chrome-appandroid-apk2014-07.html

Chrome Packaged Apps, storage操作編 2014-06-04

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

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

storage使う例で、local
chrome.storage.local使います。
Packagedは、HTML5のlocalStorageが使えないようで、
移植する場合は、置き換えが必要みたいですね。
*) 非同期I/Oが推奨される為とか。みたいですけど、

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

データ管理用に、
追加、表示、削除のＡ要素おきます。
https://github.com/kuc-arc-f/chrome_store/blob/master/top.html
===============================================
 <a href="#" id="id-a-add" >[ add ]</a><br />
  <br />
  <a href="#" id="id-a-show" >[ show ]</a><br />
  <br />
  <a href="#" id="id-a-delete" >[ delete ]</a><br />
  <hr />
===============================================

追加の処理。
https://github.com/kuc-arc-f/chrome_store/blob/master/top.js
ストレージ名＝strlist
この場合、Ｎ番目の配列にid, text(文字)の各列にデータ埋め込みます。
*) Add数回押すと、Ｎ番目のデータに、
test-0, test-1 などの数値付の文字が格納されます

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

	function click_addStore()
	{
	var ct = mItems.length;
	mItems[ct] = {'id': ct, 'text': 'test-'+ ct };
	chrome.storage.local.set({ 'strlist' : mItems });
	}

view raw c0605-store-top-1.js hosted with ❤ by GitHub

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

表示します。showおす。
storageから値取得して、div要素を書き換えます。
*) 前回表示データは全て削除、
配列データから、全てを再表示します。
===============================================

	function click_showStore()
	{
	$('div#id-div-box').remove();
	var divShow =$('#id-div-diplay');
	var divBox= $('<div id="id-div-box"></div>')
	chrome.storage.local.get( 'strlist' , function(value) {
	if(value && value.strlist) {
	console.log( value.strlist );
	console.log( 'len='+ value.strlist.length );
	var items = value.strlist;
	for(var i=0; i< items.length ; i++){
	var itm = items[i];
	divBox.append('<p>'+ itm.text + '</p><br />');
	}
	divShow.append(divBox);
	}
	});
	}

view raw c0605-store-top-2.js hosted with ❤ by GitHub

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

削除の処理、
この場合、空の配列を。ストレージ名指定で上書きしています。
*)別領域を、各個別に削除したい場合などに使える。かと思います。
===============================================

	function click_deleteStore()
	{
	mItems= new Array();
	chrome.storage.local.set({ 'strlist' : mItems });
	$('div#id-div-box').remove();
	}

view raw c0605-store-top-3.js hosted with ❤ by GitHub

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

値を表示。追加後、[show]押した時、

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

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

Chrome Packaged Apps, window操作編、画面間で値を渡す 2014-06-04

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

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

画面間で、値を渡す例です。
前回のwindow関連の説明と、ほぼ同じです。
http://knaka0209.blogspot.jp/2014/06/chromewindow1.html
*) クライアントAppsだと、サーバ言語使えないので苦労しますね。

ソースこちら、 https://github.com/kuc-arc-f/chrome_window2

chrome.app.window.create
を使って、サブ画面を開きます。
https://github.com/kuc-arc-f/chrome_window2/blob/master/top.js

クリックイベントでサブ画面開きますが、
DOMContentLoaded　の処理で、
querySelector()、次画面の要素を指定して。
値を埋め込みます。
この場合value値に、適当な文字を埋め込みます。
次画面の詳細の描画処理などは、
キー情報などを渡して使える手法かと思います。

*) ストレージに書き込んで渡す手もあるかと思います。

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

	function click_sub()
	{
	chrome.app.window.create(
	'sub.html',
	{id: "browserSlideID",
	bounds: {
	'width' : 1024,
	'height': 600
	}
	}
	, function(appWin) {
	appWin.contentWindow.addEventListener('DOMContentLoaded',
	function(e) {
	console.log( '#.DOMContentLoaded' );
	var text1 = appWin.contentWindow.document.querySelector('#id-text1');
	text1.setAttribute('value', "moji-1234 from topWindow");
	appWin.show();
	}
	)
	}
	);
	}

view raw c0605-win2-top-1.js hosted with ❤ by GitHub

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

サブ画面に、値を埋め込み表示。

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

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

Chrome Packaged Apps, window操作など, 2014-06-04

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

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


さて、初歩的ですがwindowを開くあたり。メモしたいと思います。
manifestに記載した。起動用スクリプトからwindow開く説明は省略したいと
思います。サブ画面を開く例です。

ソースこちら、 https://github.com/kuc-arc-f/chrome_window1

chrome.app.window.create
を使って、サブ画面を開きます。

画面にＡ要素を置き、
https://github.com/kuc-arc-f/chrome_window1/blob/master/top.html

===============================================
<a href="#" id="id-a-open">[ open-Sub ]</a>
===============================================

jsで、イベント処理を実装します。。
https://github.com/kuc-arc-f/chrome_window1/blob/master/top.js
===============================================

	onload = function() {
	document.querySelector('a#id-a-open').onclick = function() {
	click_sub();
	}
	}

view raw c0605-win1-top-1.js hosted with ❤ by GitHub

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

クリックイベントで、サブwindow開きます。
===============================================

	function click_sub()
	{
	chrome.app.window.create(
	'sub.html',
	{id: "browserSlideID",
	bounds: {
	'width' : 1024,
	'height': 600
	}
	}
	, function(appWin) {
	appWin.contentWindow.addEventListener('DOMContentLoaded',
	function(e) {
	console.log( '#.DOMContentLoaded' );
	appWin.show();
	}
	)
	}
	);
	}

view raw c0605-win1-top-2.js hosted with ❤ by GitHub

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

サブ開きました。

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


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

soundcloud Widgetを配置してみる。2014-05-30

５月末で暑くなってきました。ビールの季節！！

[前置き]
さて、soundcloud Widgetの配置の件です。
soundclud ですと、標準のWidget配置機能でカンタンにできますね。
 (Playlists の配置ですと、[share]ボタン＞Embedタグで)

生成されたソースを見ると、<iframe>タグのsrc属性に、
Playlistsのキー情報らしきコードを渡しているようにみえます。

====================================================生成されたコード

	<iframe width="100%" height="450" scrolling="no" frameborder="no"
	src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/36480994&amp;color=ff5500&amp;auto_play=true&amp;hide_related=false&amp;show_artwork=true">
	</iframe>

view raw c0530-sound-index-3.htm hosted with ❤ by GitHub

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

[本題]
ページに、リスト埋め込む場合はこれで十分かとおもいます。
少し手をいれて、ランダム再生できるのか？とか検討してみましたメモです。
今回、soundclud API使っておりません。
複数リストのランダム再生で、リスト内のランダム連続再生ではりません。
(リピート再生には対応ＮＧです。)

ソースはこちら、https://github.com/kuc-arc-f/h5_sound_page2

jQuery使ってます。
起動時に、配列ランダムにリストを引当て、サウンド再生。
事前に、
プレイリストは作成必要、
autoplay=onで自動再生でも良いかもしれません。

ＨＴＭＬ、https://github.com/kuc-arc-f/h5_sound_page2/blob/master/index.htm
div要素を追加用に配置
====================================================
<div id="id-div-sound1">
</div>
====================================================

ｊｓ https://github.com/kuc-arc-f/h5_sound_page2/blob/master/play-sound.js
配列に、リスト情報を追加、
====================================================

	function init_item()
	{
	var items = new Array();
	items[0] = {snd_name : 's1', snd_url : 'https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/36209861&color=ff5500&auto_play=true&hide_related=false&show_artwork=true' };
	items[1] = {snd_name : 's2', snd_url : 'https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/36479386&color=ff5500&auto_play=true&hide_related=false&show_artwork=true' };
	items[2] = {snd_name : 's3', snd_url : 'https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/36480994&color=ff5500&auto_play=true&hide_related=false&show_artwork=true' };
	return items;
	}

view raw c0530-sound-index-1.js hosted with ❤ by GitHub

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

get_sound_id()　でランダム引当後
div要素内に、DOM構築します。
====================================================

	function load_sound( items )
	{
	if((items ==null) || (items.length < 1))
	{
	return;
	}
	var s_url = get_sound_id(items);
	console.log('s_url=' + s_url );
	var divSound= $('div#id-div-sound1');
	var s_web="";
	s_web ='<iframe width="100%" scrolling="no" frameborder="no" style="margin : 0px; height: 450px;"';
	s_web +=' src="'+ s_url + '">';
	s_web +='</iframe>';
	divSound.append( $(s_web) );
	}

view raw c0530-sound-index-2.js hosted with ❤ by GitHub

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

再生できました。
ページ内の部品などに、使えるかもですね。

*)それでは、また。