k-factory

html5, javascript, css, Unity, Three.js

Toolkit for CreateJSのmanifestデータを自動でbase64化するgruntタスク

Toolkit for CreateJSからpublishされたhtmlの、manifestに記述されたimagesデータをbase64化するgrunt task pluginを作成しました。

https://github.com/youtakanke/grunt-tfc-datauri

Flashのextensionである、「Toolkit for CreateJS」(※以降 TFC )を使用したプロジェクトで、 image画像を大量に使用している場合、スマートフォンでは画像のリクエスト数が増えてしまい、 3G回線端末などではロードに時間がかかってしまいます。

そこで画像データをdatauriで使用することによってリクエストを大幅に減らし、 ロード時間を短縮するテクニックがあります。

このpluginは、TFCでpublishされたhtml内の「var manifest = 〜〜」のjsonに記述されている画像パスに基づき、
画像を自動でbase64化します。

そしてそのデータをhtmlに上書きします。

もしくは任意のファイルに出力します。

使用方法

  • まずはインストールします。
    $ npm install grunt-tfc-datauri
  • 続いて、gruntfile.jsにloadNpmTasksを追記します。
    grunt.loadNpmTasks('grunt-tfc-datauri');
  • さらにgrunt.initConfigにタスクを定義しましょう。
    grunt.initConfig({
    
      tfcDatauri: {
        testfile:{
          file:'./test/tfc_publish_file.html'
        }
      }
    });
    
  • それではここにある「tfc_publish_file.fla」のflaファイルを使って説明します。
    https://github.com/youtakanke/grunt-tfc-datauri/tree/master/test
    ※「Adobe Flash CS6」と「Toolkit for CreateJS」は入っているものとします。
    flash_tfc
    「パブリッシュ」ボタンを押します。
  • 「tfc_publish_file.html」と「images」が書き出され、ソースには画パスがmanifestに記載されいています。html_manifest
  • この状態でコマンドを実行しましょう
    $ grunt tfcDatauri
  • そしてもう一度htmlを開いてみましょう。
    manifest部分の画像パスが、datauriエンコードされたものになっていれば成功です。html_manifest_encode
  • htmlの上書きがではなく、外部ファイルなどで管理している場合は dest に外部ファイルのパスを定義します。
    grunt.initConfig({
    
      tfcDatauri: {
        testfile:{
          file:'./test/tfc_publish_file.html',
          dest:'./test/manifest.js'
        }
      }
    });
  • コマンドを実行します。
    $ grunt tfcDatauri

    すると、「mianifest.js」が作成され、ソースには下記datauriエンコードされたデータが記述されていると思います。
    manifest_export

options:①「manifest」という変数名以外を使用している場合。②進行状況をみたい場合

  • optionsに ①varName を指定します。②logにtrueを指定します。
    grunt.initConfig({
    
      tfcDatauri: {
        testfile:{
          file:'./test/tfc_publish_file.html',
          dest:'./test/manifest.js',
          options:{
            log:true,
            //処理中のlogをconsoleに表示します
            varName:'foo' // var foo =[ ~
            //変数名が'manifest'以外の場合はvarNameで指定します。
          }
        }
      }
    });
    

    先ほどの「var manifest = 〜〜 」だった部分が
    「var foo = 〜〜 」になっていれば成功です。

https://github.com/youtakanke/grunt-tfc-datauri

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です