Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

R.I.P. rawgit

公式サイトのサンプルコードもそうなってますが、(ローカルダウンロードせず)ホストされたphina.jsを使う際、以下のような記述をよく行っていました。

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

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です。

<!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っていう拡張子だけ見慣れないと思うので説明すると、これはスプライトシートアニメーション用の設定ファイルで、実態はただのjsonです。

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

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

/* アニメーションを組み込んだ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);
  },

});

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

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away