Android 4.2から搭載された新機能「Daydream」は、電源接続時やDock接続時に有効になるスクリーンセーバー機能です。

個人的にはProcessingのような「絵画的」作品が作成しやすいフレームワークでは、その制作物はスクリーンセーバーとか、壁紙のような使い方が合っていると思っているので、Daydream対応は「これぞ！」という第一印象を持ちました。

Processing界隈では、AndroidへExportされたコードがPAppletというProcessing関連のFWになるクラスに依存していて、それがActivityベースなのでLive Wallpaperが作れない…というスレッドがあったりして、通常アプリ以外のAndroidアプリを作ることがなかなか難しい背景があります。

今回はProcessingのJavaコードをなんとかするのではなく、Processing.jsの方で作品を作ってそれをDaydreamで使う方法を試してみました。

Processing.jsで作品を作る

Processing.jsの公式サイトは、Processing本家とは別にあります。

Processing.js

詳細やProcessing.min.jsなどは、この本家サイトを参照してください。
以前のエントリーでブログにProcessing作品を貼り付ける方法を記載しましたが、これがまさにProcessing.jsになります。

下記のようなタグと、script内にProcessing.jsのコードを書くことで実行できます。

1
2
3
4
5
6
7


<script type='text/javascript' src='processing.min.js'></script>
<script type='text/processing' data-processing-target='processing-canvas'>

    /* code */

</script>
<canvas id='processing-canvas'></canvas>

他にも動的にCanvasとScriptをひもづける方法があるようで、

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


<canvas id='processing-canvas'></canvas>

<script type='text/javascript' src='processing.min.js'></script>
<script>
    window.onload = function() {
        var canvas = document.getElementsByTagName('canvas')[0];
        var codeElm = document.getElementById('processing-code');
        var code = codeElm.textContent || codeElm.innerHText;
        new Processing(canvas, code);
    }
</script>
<script type='text/processing' id='processing-code'>

    /* code  */

</script>

でも実行できます。これだと、data-processing-target="processing-canvas"のような属性を使う必要はないです。

Daydream アプリケーションを作る

Daydreamアプリケーションを作るには、DreamServiceというクラスを継承する必要があります。

以下がサンプルコードです。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


import android.service.dreams.DreamService;

public class ProcessingView extends DreamService {
    @Override
    public void onAttachedToWindow() {
        super.onAttachedToWindow();
        setInteractive(false);
        setFullscreen(true);
        setContentView(R.layout.main);
    }
}

さらに、AndroidManifext.xmlで定義を追加します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


    <application
        android:allowBackup='true'
        android:icon='@drawable/ic_launcher'
        android:label='@string/app_name'
        android:theme='@style/AppTheme' >
      <!-- start -->
      <service
          android:name='.ProcessingView'
          android:icon='@drawable/ic_launcher'
          android:label='@string/app_name'>
          <intent-filter>
              <action android:name='android.service.dreams.DreamService'/>
              <category android:name='android.intent.category.DEFAULT'/>
          </intent-filter>
      </service>
      <!-- end -->
    </application>

serviceタグを追加しています。なおAndroid 4.2から対応なので、minSdkVersionは17が必須です。注意してください。

詳細は、本家や他の解説サイトに譲りますが、基本的にはこれでSetting > Display > Daydreamにアプリが表示されて、選択できるようになります。

Daydreamアプリケーションは起動条件が通常のアプリとは異なるので、セカイフォンの例などいろいろと紹介があるので、興味のある方は検索してみてください。

WebViewでProcessing.jsのコードを実行する

あとは、Processing.jsをDaydreamアプリに入れていくだけです。

先ほど作成したProcessing.jsの作品をassets以下にprocessing.min.jsと共にコピーして、WebViewを追加します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


import android.service.dreams.DreamService;
import android.webkit.WebView;

public class ProcessingView extends DreamService {
    @Override
    public void onAttachedToWindow() {
        super.onAttachedToWindow();
        setInteractive(false);
        setFullscreen(true);

        WebView webView = new WebView(this);
        webView.getSettings().setJavaScriptEnabled(true);
        setContentView(webView);
        webView.loadUrl('file:///android_asset/processing/index.html');
    }
}

駆け足でしたが、ひとまずこれでDaydreamアプリとしてProcessing.jsの作品が実行できました。
本当は以前作成した、Angular Clockも対応したいのですがProcessing.jsだと、Processing PDE作品をフルスクリーンにする方法が見当たらず、、、右往左往しています。