ずいぶんと書いていないものだな。

前回書いたのが3月か。
1年たってしまいそうな勢いだな。

その後仕事で覚えたことといえば、
・antにすこし詳しくなった
・batふぁいるでメニューがつくれるようになった

と、この辺はまったく意味がない。

その次の案件では
・ColdFusionがつかえるようになった

マイナーすぎる。。。
2000年前後に少しはやって消えていった言語など。。。
まさかいまさらこんなものをやるとは思わなかった。

次の案件。。
基盤とか、開発なしとか。
論外。

とりあえずHyper-V2.0を使うので、
勉強して資格を久々にとった。

あとは久々にOracleの構築だ。
物理設計だ。
これは嫌いじゃないが、
地味ではある。

あとはバッチ処理をPowerShellで作ることになった。
これは少しは楽しめるかもしれない。

しっかし、Powershellの情報が少なすぎる。

はやっていない技術はどうしても書籍もでないから
情報が少ないのが問題。

必要に応じていつものように洋書を買うことにしよう。

Android,IPHONEのWeb（HTML）でのメディア再生

android

Androidは。

HTML5のaudioタグ（またはaudioオブジェクト）

対応していない。
2.1だめ、2.2だめ、2.3でもだめ、3.0でもだめ。

実際は、audioタグ自体の定義はあるが、ブラウザがその動作を対応していない
ようだ。リンクでmp3などのファイルを指定すれば、リンクをタップしたときに
その機種が内蔵しているプレイヤーアプリで音が鳴るようだ。

HTML5のvideoタグ

といった書き方(this.play()がポイント？)で動作する機種があるらしい。

Flashに再生を任せる

Flash対応した端末なので、2.2以上確定だが、
2.2でも再生できない機種もある。
当然FlashPlayer10.1がインストールされていることが必須だが、
インストールされていても再生できない機種も多々あり。

AndroidでのWebだけでの音楽再生は無理かもしれない。

Flashでの再生は、機種によっては再生できるはず。（Web上の情報によると）

nativeアプリとしてつくり、MediaPlayerクラスを使った再生は、当然可能。
しかし、当然Android専用となる。

IPHONEは。

HTML5のaudioタグ

対応している模様。しかし、マナーモードでも音が鳴るとか、
自動再生には対応していないとか、個別に調整は必要。

HTML5のvideoタグ

audioタグと同様。

Flashに。。。

IPHONEはFlash再生できないので問題外。

IPHONEのみターゲットであればWebでの音楽再生は可能かもしれない。
PCのブラウザとは異なる部分もあるが、Androidに比べればバージョンも
機種も少ないので個別対応することは可能だろう。

nativeはIPHONEも当然可能だろうが、Androidに比べても敷居が高い。

JavascriptとSWF、HTML5などを使ったライブラリ

audio.js

HTML5に対応していないブラウザでもaudioタグが使えるようになるjs。
IPHONE,Androidともに鳴らず。

JWPlayer.js

HTML5またはFlashでメディアファイルを再生できるライブラリ。
PCのブラウザでの動作は確認できたが、IPHONE,Androidともに鳴らず。

jPlayer.js

JQueryのライブラリ？JW同様、HTML5またはFlashを使い、
メディアファイルを再生できるライブラリ。
PCのブラウザでの動作は確認できたが、IPHONE,Androidともに鳴らず。

HTML5.Audio.js

ほかと似たようなつくりで、HTML5またはFlashでメディアファイルを再生する
ライブラリ。jsやSWFなど、5ファイルくらい使う。
同じくIPHONE,Androidともに鳴らず。

現状、AndroidでWeb側だけでメディアファイルを再生するのは難しい。
というか、昔から変わっていないが、機種に依存する。
問題なく再生できる機種もあるはずだが、万人向け(バージョン・機種)に作るのは難しい。

IPHONEはIPHONEで、HTML5が限定的に使えるなど、Androidに比べれば恵まれているが、
マナーモードにしても音が鳴るなど、問題もいろいろあるようだ。

別の切り口からPhoneGapやtitanium mobileなどでandroidとIPHONE両対応の
メディアファイル再生ができないかを調べたが、
それ以前に両方ともIPHONEでは動くがAndroidでは動かないソースなど、
ソースの互換性からして弱いこともあり、万能なライブラリはないのかもしれない。

Javascriptベースのゲームエンジンなどでも、
AndroidとIPHONE両方で問題なく動作、というわけにはいっていないようだ。

Java5、6での並列処理（マルチスレッド）

Java5、6ではThreadとRunnableを使うよりも
Executorを使ったほうがいいかもしれない。

マルチスレッドでの同期やらいろいろ調べていて、
ExecutorServiceやCompletionServiceを知ったので、
メモしておく。

サンプルソースは、
複数スレッドで作った文字列を順番にソートしてから結合するもの。
部分文字列を作るスレッドを複数うごかした後、
すべて完了したら（CompletionService）、
指定の順番に並べ替えてから文字列を結合するようなイメージ。
そんなイメージの処理が実際にあって、逐次変換結合を行っているのだけれど、
どうにかマルチスレッド化できないかと考えながら検証したサンプル。

package sample;

import java.util.ArrayList;
import java.util.Collections;
import java.util.Comparator;
import java.util.List;
import java.util.concurrent.Callable;
import java.util.concurrent.CompletionService;
import java.util.concurrent.ExecutionException;
import java.util.concurrent.ExecutorCompletionService;
import java.util.concurrent.ExecutorService;
import java.util.concurrent.Executors;
import java.util.concurrent.Future;

public class Main {
    class Owner {
        public void exec(){
            List<SampleDTO> alllist = new ArrayList<SampleDTO>(); 
            ExecutorService executor = Executors.newFixedThreadPool(2);
            CompletionService<List<SampleDTO>> completion = 
              new ExecutorCompletionService<List<SampleDTO>>(executor);
            completion.submit(new WorkerA());
            completion.submit(new WorkerB());
            executor.shutdown();
            
            for (int i = 0; i < 2; i++) {
                try {
                    Future<List<SampleDTO>> future = completion.take();
                    List<SampleDTO> results = future.get();
                    alllist.addAll(results);
                } catch (InterruptedException e) {
                    Thread.currentThread().interrupt();
                    continue;
                } catch (ExecutionException e) {
                    continue;
                }
            }
            Collections.sort(alllist,new Comparator<SampleDTO>(){
	       @Override
                public int compare(SampleDTO arg0, SampleDTO arg1) {
                    return arg0.getOrder() - arg1.getOrder();
                }
            });
            StringBuilder sb = new StringBuilder();
            for(SampleDTO dto : alllist){
                sb.append(dto.getName());
            }
            System.out.println(sb.toString());
        }
    }
    
    /**
     * @param args
     */
    public static void main(String[] args) {
        Owner on = new Main().new Owner();
        on.exec();
    }
    
    public class SampleDTO {
        private String name;
        private int order;
		
        public int getOrder() {
            return order;
        }
        public void setOrder(int order) {
            this.order = order;
        }
        public String getName() {
            return name;
        }
        public void setName(String name) {
            this.name = name;
        }
    } 
    
    class WorkerA implements Callable<List<SampleDTO>> {
        @Override
        public List<SampleDTO> call() throws Exception {
            List<SampleDTO> list = new ArrayList<SampleDTO>();
            SampleDTO dto = new SampleDTO();
            dto.setOrder(2);
            dto.setName("aaa");
            list.add(dto);
            return list;
        }
    }
    
    class WorkerB implements Callable<List<SampleDTO>> {
        @Override
        public List<SampleDTO> call() throws Exception {
            List<SampleDTO> list = new ArrayList<SampleDTO>();
            SampleDTO dto = new SampleDTO();
            dto.setOrder(1);
            dto.setName("bbb");
            list.add(dto);
            SampleDTO dto2 = new SampleDTO();
            dto2.setOrder(4);
            dto2.setName("eee");
            list.add(dto2);
            return list;
        }
    }

}

JavascriptとCSSを使った画像の回転（IEとChrome）

chromeはHTML5のrotateを使って。
ieはfilterを使って。
CSSを切り替えるのだけれど、rotateは回転軸の座標がieとは違うので
（ieがおかしい？）回転するときに、画像の位置を変更する必要がある。

ieとchrome以外も下のほうに書いたスタイルを適用すればできる。
ぐぐって見つけたサイトのjavascriptをほとんど使わせてもらっている。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">

var width;
var height;
var rotate;
$(function(){
    $("#right").click(function(){
        var div = $(rotateimg);
        var img = $(testimg);
        var r = img.attr("rotate");
        var width = img.attr("width");
        var height = img.attr("height");
        var w = width / 2;
        var h = height / 2;
        if(r==1){
            img.css("-webkit-transform", "rotate(180deg)");
            img.css("-webkit-transform-origin", w + "px " + h + "px");
            img.attr("rotate", "2");
            div.width(width);
            div.height(height);
            img.css("-ms-filter","progid:DXImageTransform.Microsoft.BasicImage(rotation=2)");
            img.css("filter","progid:DXImageTransform.Microsoft.BasicImage(rotation=2)");
        } else if(r==2){
            img.css("-webkit-transform", "rotate(-90deg)");
            img.css("-webkit-transform-origin", w + "px " + w + "px");
            img.attr("rotate", "3");
            div.width(height);
            div.height(width);
            img.css("-ms-filter","progid:DXImageTransform.Microsoft.BasicImage(rotation=3)");
            img.css("filter","progid:DXImageTransform.Microsoft.BasicImage(rotation=3)");
        } else if(r==3){
            img.css("-webkit-transform", "rotate(0deg)");
            img.attr("rotate", "0");
            div.width(width);
            div.height(height);
            img.css("-ms-filter","progid:DXImageTransform.Microsoft.BasicImage(rotation=0)");
            img.css("filter","progid:DXImageTransform.Microsoft.BasicImage(rotation=0)");
        } else if(r==0){
            img.css("-webkit-transform", "rotate(90deg)");
            img.css("-webkit-transform-origin", h + "px " + h + "px");
            img.attr("rotate", "1");
            div.width(height);
            div.height(width);
            img.css("-ms-filter","progid:DXImageTransform.Microsoft.BasicImage(rotation=1)");
            img.css("filter","progid:DXImageTransform.Microsoft.BasicImage(rotation=1)");
        } else {
            img.css("-webkit-transform", "rotate(90deg)");
            img.css("-webkit-transform-origin", h + "px " + h + "px");
            img.attr("rotate", "1");
            div.width(height);
            div.height(width);
            img.css("-ms-filter","progid:DXImageTransform.Microsoft.BasicImage(rotation=1)");
            img.css("filter","progid:DXImageTransform.Microsoft.BasicImage(rotation=1)");
        }
    });
    $("#left").click(function(){
        var div = $(rotateimg);
        var img = $(testimg);
        var r = img.attr("rotate");
        var width = img.attr("width");
        var height = img.attr("height");
        var w = width / 2;
        var h = height / 2;
        if(r==1){
            img.css("-webkit-transform", "rotate(0deg)");
            img.attr("rotate", "0");
            div.width(width);
            div.height(height);
            img.css("-ms-filter","progid:DXImageTransform.Microsoft.BasicImage(rotation=0)");
            img.css("filter","progid:DXImageTransform.Microsoft.BasicImage(rotation=0)");
        } else if(r==2){
            img.css("-webkit-transform", "rotate(90deg)");
            img.css("-webkit-transform-origin", h + "px " + h + "px");
            img.attr("rotate", "1");
            div.width(height);
            div.height(width);
            img.css("-ms-filter","progid:DXImageTransform.Microsoft.BasicImage(rotation=1)");
            img.css("filter","progid:DXImageTransform.Microsoft.BasicImage(rotation=1)");
        } else if(r==3){
            img.css("-webkit-transform", "rotate(180deg)");
            img.css("-webkit-transform-origin", w + "px " + h + "px");
            img.attr("rotate", "2");
            div.width(width);
            div.height(height);
            img.css("-ms-filter","progid:DXImageTransform.Microsoft.BasicImage(rotation=2)");
            img.css("filter","progid:DXImageTransform.Microsoft.BasicImage(rotation=2)");
        } else if(r==0){
            img.css("-webkit-transform", "rotate(-90deg)");
            img.css("-webkit-transform-origin", w + "px " + w + "px");
            img.attr("rotate", "3");
            div.width(height);
            div.height(width);
            img.css("-ms-filter","progid:DXImageTransform.Microsoft.BasicImage(rotation=3)");
            img.css("filter","progid:DXImageTransform.Microsoft.BasicImage(rotation=3)");
        } else {
            img.css("-webkit-transform", "rotate(-90deg)");
            img.css("-webkit-transform-origin", w + "px " + w + "px");
            img.attr("rotate", "3");
            div.width(height);
            div.height(width);
            img.css("-ms-filter","progid:DXImageTransform.Microsoft.BasicImage(rotation=3)");
            img.css("filter","progid:DXImageTransform.Microsoft.BasicImage(rotation=3)");
        }
    });

});
</script>
<style type="text/css">
.transRIGHT
{   -moz-transform: rotate(90deg);  /* FireFox */
    -o-transform: rotate(90deg);  /* Opera */
    -webkit-transform: rotate(90deg);translate(50,50);  /* webkit */
    -ms-transform: rotate(90deg);  /* IE9 */
    transform: rotate(90deg);
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); /* IE5.5+ */
}
.transLEFT
{   -moz-transform: rotate(-90deg);  /* FireFox */
    -o-transform: rotate(-90deg);  /* Opera */
    -webkit-transform: rotate(-90deg);  /* webkit */ 
    -ms-transform: rotate(-90deg);  /* IE9 */
    transform: rotate(-90deg);
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* IE5.5+ */
}
</style>
</head>
<body>
<input type="button" name="" value="左" id="left">
<input type="button" name="" value="右" id="right">
<div id="rotateimg"><img id="testimg" src="20111127-1-8.jpg" width="332" height="500" border="0"></div> 

</body>
</html>