GlichはWebブラウザーさえあれば無料でWebアプリを開発できちゃうサービスです。

（Visual Studio CodeのLive Share拡張を使ったときのように）複数人でリアルタイムのコード編集ができるので、オンラインハッカソンにピッタリです！

一応、無料で使うときの制約（最後に抜粋を載せました）はありますが、ハッカソンでデモをするのには十分でしょう。プロジェクトを非公開にできるのも嬉しいです。¹

とにかくお手軽にコーディングをはじめられるようになっています。ここでは、JavaScriptでゲームが作れるphina.jsのチュートリアルを例にして、使い方を紹介します。

なお、次の前提を満たしている人が対象です。

PCを持っていて、Webブラウザーが使える。
共同でコーディングする人への連絡手段、例えばSlackやChatworkなど、がある。
Facebook, GitHub, Googleのいずれかのアカウントか、メールアドレスを持っている。

使い方

phina.jsのチュートリアルでは、index.html²とmain.jsを作ります。この2つのファイルをGlitchのプロジェクトに反映して、Webアプリとして使えるようにします。

index.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>
    <!-- phina.js を読み込む -->
    <script src="https://cdn.rawgit.com/phi-jp/phina.js/v0.2.0/build/phina.js"></script>

    <!-- メイン処理 -->
    <script src="main.js"></script>
  </head>
  <body>

  </body>
</html>

main.js

// phina.js をグローバル領域に展開
phina.globalize();

// MainScene クラスを定義
phina.define('MainScene', {
  superClass: 'CanvasScene',
  init: function() {
    this.superInit();
    // 背景色を指定
    this.backgroundColor = '#444';
    // ラベルを生成
    this.label = Label('Hello, phina.js!').addChildTo(this);
    this.label.x = this.gridX.center(); // x 座標
    this.label.y = this.gridY.center(); // y 座標
    this.label.fill = 'white'; // 塗りつぶし色
  },
});

// メイン処理
phina.main(function() {
  // アプリケーション生成
  var app = GameApp({
    startLabel: 'main', // メインシーンから開始する
  });
  // アプリケーション実行
  app.run();
});

Glitchで新しいプロジェクトを作る

https://glitch.com にアクセスして、右上の「New Project」ボタンを押します。3つのテンプレートの中から、一番上のhello-webpageを選びます。

Loading Projectと表示されるので少々待ちます。

index.htmlを反映する

作ったプロジェクトにはすでにindex.htmlがあります。

左ペインでindex.htmlを選んだ後、上記したphina.jsのindex.htmlをコピペして上書します。

保存ボタンはありません。自動的に保存されます。

main.jsを追加する

次に左ペインの「New File」ボタンを押し、main.jsと入力した後に「Add This File」ボタンを押します。

左ペインでmain.jsファイルを選んだ後、上記したphina.jsのmain.jsをコピペして上書きします。

「phina is not defined」というエラーが表示されますが、今回はそのままにします。

Webアプリの動作を確認する

サングラスマーク「Show」をクリックすると、「In a New Window」と「Next to The Code」が表示されます。

ここでは「Next to The Code」を選んでみましょう。すると、画面左にphina.jsが実行された結果が表示されます。

このWebアプリは、すでに一般に公開されています。WebアプリのURLは、実行結果画面の上にある「Change URL」ボタンを押すと分かります。

URLはhttps://xxxxx-xxxxx-xxxxx.glitch.meという形式です。xxxxx-xxxxx-xxxxxはプロジェクト名です。

他の人と共同でコーディングしてみる

一緒にコーディングする人にURLを知らせます。

プロジェクトをデフォルトのまま公開にしている場合と、privateに変更して非公開にしている場合で、伝えるURLが変わります。

プロジェクトをデフォルトのまま公開にしている場合

コードを表示している画面のURLをそのまま伝えます。

URLはhttps://glitch.com/edit/#!/xxxxx-xxxxx-xxxxxという形式です。xxxxx-xxxxx-xxxxxはプロジェクト名です。

一人でも実験できますので、上記URLを別のウィンドウで開いてみてください。片方の変更が、もう片方にすぐに反映されます。

プロジェクトをprivateにして非公開にしている場合

画面左上のプロジェクト名xxxxx-xxxxx-xxxxxをクリックして、中程の「Make This Project Private」をチェックすることで非公開にします。

非公開にした状態でコードを表示している画面のURLを他人が開いても「No project found at xxxxx-xxxxx-xxxxx」と表示されます。そのまま放置すると、別名の新しいプロジェクトが自動的に作成されるので注意してください。

非公開プロジェクトに参加してもらうURLは、左ペイン「Share」ボタンを押して、Invite Others to EditにあるURLです。こちらを一緒にコーディングしたい人に伝えてください。

URLは次のような形式です：https://glitch.com/edit/#!/join/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx

アカウントを作りサインインしてプロジェクトを延命する

ここまで、サインインせずに作業してきました。このままだとこのプロジェクトは5日後に無くなってしまいます。アカウントを作ってサインインすれば、プロジェクトはずっと使えるようになります。³

右上の「Sign In」ボタンを押した後に、画面中程の「Create an Account」ボタンを押します。

次の4つの方法でアカウントを作れます。

Facebook
GitHub
Google
Email Magic Link

最後の Email Magic Link はメールアドレスを登録すると、そのアドレス宛にサインイン用のキーワードが送信されてくる機能です。

phina.js で画像を作ったキャラクターを表示する

キャラクターを表示するには Sprite を使います。
Sprite を使うには、Sprite の一種として（名前は何でも良いのですが）Player クラスを作ることにします。

利用する画像をアセット ASSETS として定義します。画像名を player とします。
Sprite の一種として、Player クラスを作ります（Sprite を親とします）。
Player クラスを初期化するときに、利用する画像名 player を指定します。
画面（MainScene）に Player を作ります。
上記 1 で作った ASSETS をメイン main で読み込みます。

main.js

phina.globalize();

// (1) アセットに player という名前の画像を設定
var ASSETS = {
  image: {
    player: 'https://raw.githubusercontent.com/phinajs/phina.js/develop/assets/images/tomapiko.png'
  }
}

// (2) Sprite（キャラクター表示）の一種として、Player を定義
phina.define('Player', {
  superClass: 'Sprite',
  // コンストラクタ
  init: function() {
    // (3) アセットに設定した画像の名前 player を指定
    this.superInit('player');
  },
});

phina.define('MainScene', {
  superClass: 'CanvasScene',
  init: function() {
    this.superInit();
    this.backgroundColor = '#444';
    this.label = Label('Hello, phina.js!').addChildTo(this);
    this.label.x = this.gridX.center();
    this.label.y = this.gridY.center();
    this.label.fill = 'white';
    // (4) Player を作り、MainScene に追加
    this.player = Player()
    this.player.addChildTo(this);
    this.player.setPosition(this.gridX.center(), this.gridY.center() + this.player.height);
  },
});

// メイン処理
phina.main(function() {
  var app = GameApp({
    startLabel: 'main',
    // (5) アセットを読み込む
    assets: ASSETS
  });
  // アプリケーション実行
  app.run();
});

Glitch にアップロードした画像を使う

【注意！】アップロードした画像のURLは、assets/xxxx.png ではありません。詳しくは下記をご覧ください。

Webブラウザーの画像ファイルをドラッグアンドドロップすると、Glitch に画像をアップロードできます。

少しの間待つと、assets ディレクトリーの下にアップロードした画像が表示されます。

phina.js で画像を使うには、画像の URL が必要です（URL は assets/xxxx.png のような形式ではありまｓん）。画像の URL は、assets にある画像をクリックすることで表示されます。Copyボタンを押せば、URL をクリップボードにコピーできます。

後は上記した ASSETS の image.player に URL をペーストして使ってください。

説明は以上です。Happy coding!

おまけ

What technical restrictions are in place?から無料の場合の制約について抜粋します。有料にすれば緩和されます。2020年5月14日時点の情報です。

実行時間
- アクセスがないと5分後に停止する。また、12時間連続実行していると停止する。Webアプリへのアクセスがあると再び実行される。
- サインインしたユーザーは20アプリまで、サインインしていないユーザーは3アプリまで同時に実行できる。
- サインインしていないユーザーのアプリは5日後に削除される。
コンテナ（アプリ）が利用できるディスクサイズ
- コンテナが使えるディスクスペースは200MBと、アセット用の512MB。
- /tmpディレクトリーは上記に含まれないが、アプリを再起動した時に消える。
- Node.jsのモジュールは上記に含まれないが、最大で1GBまで。
コンテナ（アプリ）が利用できるRAM
- RAMは512MBまで。
Webアプリが処理できるリクエスト数
- 1時間あたり4000リクエストまで。超えると、429 Too Many Requestsレスポンスが返却される。

非公開にできるのはソースコードを編集する機能です。Webアプリ自体は非公開にできません。 ↩
HTMLでシングルクォーテーションを使っているところをダブルクオーテーションに変更しています。また、phina.jsのCDMのURLをhttpからhttpsに変更しています。 ↩
サインインすると同時実行できるアプリ数が3から20に増えます。その他の無料の場合の制約はそのままです。 ↩

Glitchではじめるお手軽オンラインハッカソン

使い方