phina.jsのCDNサービスは今後jsDelivrを使おう、というお話

2018年、去年と比較してphina.js周りでクリティカルな変化というのは無かったと思いますが、一点だけ変化らしい変化があったので、念の為触れておこうとおもいます。

# R.I.P. rawgit
[公式サイト](https://phinajs.com/)のサンプルコードもそうなってますが、（ローカルダウンロードせず）ホストされたphina.jsを使う際、以下のような記述をよく行っていました。

```html
<!doctype html>
<html>
  <head>
    <meta charset='utf-8' />
    <meta name="viewport" content="width=device-width, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>Getting started | phina.js</title>

    <script src='http://cdn.rawgit.com/phi-jp/phina.js/v0.2.0/build/phina.js'></script>
    <script>
      // めっちゃ面白いゲームのプログラムコード
    </script>
  </head>
  <body>

  </body>
</html>
```

rawgitというCDNサービスを通してgithub上のphina.jsライブラリが配信されており、それを利用していました。
しかし先日、マルウェア対策コストの問題でrawgit.comがお亡くなりになってしまいました。

[RawGit has reached the end of its useful life](https://rawgit.com/)

2018年9月までに配信されたコンテンツについては2019年8月まで引き続きホストされるとのことなので、上のようなサンプルコードもしばらくは動作しますが、今後は別のCDNを利用したほうが良いでしょう。


# 本題：代替にはjsDelivrを使おう

先のrawgitもオススメしてますが、jsDelivrが代替サービスとして一番使い勝手が良さそうです。

例えばv0.2.2の配信URLは

https://cdn.jsdelivr.net/npm/phina.js@0.2.2/build/phina.min.js

なので先のサンプルコードは以下のように書き直せばOKです。

```html
<!doctype html>
<html>
  <head>
    <meta charset='utf-8' />
    <meta name="viewport" content="width=device-width, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>Getting started | phina.js</title>

    <script src='https://cdn.jsdelivr.net/npm/phina.js@0.2.2/build/phina.min.js'></script>
    <script>
      // とんでもなく面白いゲームのプログラムコード
    </script>
  </head>
  <body>

  </body>
</html>
```

ちなみにバージョンの部分を省くと自動的にnpm上の最新版(latest)を取得します。

https://cdn.jsdelivr.net/npm/phina.js/build/phina.min.js

ただしバージョンが変わるとコードが動かなくなる可能性もあるので、基本的にはバージョンを固定しておくことが推奨されます。（あと執筆地点でnpm最新版v0.2.3はバグがあってローディングで止まることがあるのでおすすめしません）

npmではなくgithub版や、forkしたオレオレ魔改造phina.jsを使うこともできます。
```phina.js@[ブランチ名]```などとするとブランチ指定もできます。

- github開発版：```https://cdn.jsdelivr.net/gh/phi-jp/phina.js@develop/build/phina.min.js```
- オレオレ版の例：```https://cdn.jsdelivr.net/gh/pentamania/phina.js@chimera/build/phina.min.js```

あと細かい点ですがhttpsの**s**をつけ忘れないようにします。
（httpsで配信されているサイトは同じくhttpsで配信されたコンテンツしか読み込めないため。たまに読め込めなくなってるプロジェクトがあったりする…）


## ホストされてるのはライブラリだけじゃない
本題はこれで終わりですが、このままではphina.jsというよりjsDelivrの使い方の話じゃないかヤダー！
となってしまうので、phina.jsパッケージ特有の他の配信コンテンツについても触れてみます。

phina.jsパッケージにはライブラリ本体だけでなく画像、フォント、サウンドなども含まれており、これらも引っ張ってきて使うことができます。

### 例：ホストされたコンテンツだけで簡単アニメーション
パッケージに何が含まれているかは以下のファイル一覧で確認できます。
https://cdn.jsdelivr.net/npm/phina.js@0.2.3/assets/

pngやmp3、otfは説明不要だと思いますが、おそらくtmssっていう拡張子だけ見慣れないと思うので説明すると、これは[スプライトシートアニメーション](https://qiita.com/minimo/items/0aad94d94478845d3ce2)用の設定ファイルで、実態はただのjsonです。

例えば[character.tmssの内容](https://github.com/phinajs/phina.js/blob/develop/assets/tmss/character.tmss)は、images/character/以下の野菜系キャラのスプライト画像すべてに対応しています。
（おそらくphina.jsの前身である**tm**lib.js用の**s**prite**s**heetという意味でこのような拡張子になってると思われます。）

ともかく、これを使えばわざわざ自分でアニメーション設定を書かなくて良くなります。（わざわざ書いてました...）

```js
/* アニメーションを組み込んだSprite拡張クラス */
phina.define('phina.display.AnimationSprite', {
  superClass: phina.display.Sprite,
  
  init: function(image, ss) {
    this.superInit(image);
    ss = (ss) ? ss : image;
    this.animation = phina.accessory.FrameAnimation(ss)
      .attachTo(this);
  },
  
  setAnimation: function(animation) {
    this.animation.gotoAndPlay(animation);
    return this;
  },
  
})

phina.globalize();

phina.main(function() {
  var app = GameApp({
    startLabel: 'main',
    assets: {
      image: {
        tomapiyo: "https://cdn.jsdelivr.net/npm/phina.js@0.2.3/assets/images/character/tomapiyo.png",
      },
      spritesheet: {
        tomapiko_tmss: "https://cdn.jsdelivr.net/npm/phina.js@0.2.3/assets/tmss/character.tmss"
      }
    }
  });

  app.run();
});


phina.define('MainScene', {
  superClass: 'DisplayScene',

  init: function(options) {
    this.superInit(options);
    var gx = this.gridX;
    var gy = this.gridY;
      
    this.tomapiyo = AnimationSprite('tomapiyo', 'tomapiyo_tmss')
      .setAnimation('fly')
      .setPosition(gx.center(), gy.center())
      .addChildTo(this);
  },
  
});
```

ちょっとしたゲームならホストされたコンテンツのみで作れる気がします。縛りプレイ的な感じで挑戦するのも面白いかもしれません。