「jsdo.it」と「9leap」が黄金のコラボレーション！ゲームプログラミングがもっと身近に・学びやすく

wise9読者のみなさん、はじめまして。「闇のゲームプログラマー」ことダースーです。
さてさてみなさん、「jsdo.it」というサイトはご存じですか?

JavaScriptやHTML5、CSSのコードをブラウザ上で書いて、

それをそのまま共有できちゃう、という、知る人ぞ知るクールなサイトです。
といっても、敏腕ゲームプログラマーも多いwise9読者にとっては「知ってるよ！」ってカンジかもしれませんね。

今日はそんなクールでイカす「jsdo.it」と、
ぼくたちが今年の5月から始めた投稿型ゲームサイト「9leap」から、ビックニュース！
なんと本日から、jsdo.itから9leapにゲームが投稿できるようになりました！！

このニュース…どういうことか分かりますか? プログラミングビギナーのために、特別に説明すると…。

1.プログラミングがとにかくカンタンに始められる！

jsdo.itの編集画面では、左側がエディタ、右側がプレビュー。
右上の「Save」ボタンを押せば即ゲームが始まるし、「Finish」を押せばキミの作ったゲームやコードを、一瞬で全世界に公開できます。

デフォルトではenchant.jsやプラグイン、アトラスXなどの拡張機能は読み込まれていないけど、追加もとっても簡単。
なんといっても、プログラミングが初めての方でも簡単にenchant.jsを使ったプログラミングが始められるのは魅力ですよね。

もちろん、プロのプログラマーは自分専用にカスタマイズしたソフトを使ってることが多いけど、
とにかくすぐに、ゲームを作ってみたいっ！って人には敷居が高いですよね。
「jsdo.it」でプログラミングをはじめるのには、ブラウザだけあればOK。
家でも、学校でも、電車のなかでもインターネットが繋がっていれば、どこでも9leapに投稿するゲームが作れちゃいます。

2. ソースコードを見せ合える！

ブラウザだけあればプログラミングができるということは、どこでもコードを人に見てもらえるというコトで…。
私も実際に一人でプログラミングをしていて、「なんでこいつ動かないんだ！！」って悩むことは多いんですが、
そんなとき、プログラミングに詳しい友達にきいてもなかなか解決しないんですよねー。

よくあるパターンはこんな感じ。

わたし「○○って感じでコードを書いたんだけど、動かないんだよねー」
友達「そこだけ聞いてもわからないんだけど……」
わたし「だから○○が動かないんだよ」
友達「○○じゃないとこがマチガってるんじゃない？」
わたし「じゃあどこだと思う？」
友達「いや、わかんないから」

でもjsdo.itなら、すぐにコードを見てもらえて、「ここが問題だよ！」って教えてもらうことができます。
ちゃんと動いているゲームだって、コードがすぐに見られたら
「ここをこうすればもっと良くなるよ！」ってアドバイスをもらうこともできますよね。

jsdo.itには、すでにたくさんのハイレベルなプログラマーがいろんなコードを投稿しています。
そこからヒントをもらえたりするかもしれませんね。
(※ソースコードそのものを引用するときは、「ライセンス」に気をつけて！)

時には、そんなプログラマー上級者から、ソースコードにコメントを貰えたりするかもしれません。
すっごくクールなゲームなら、そこから誰かがアナタのゲームを Fork (コードをコピー) して、新しいゲームが生まれるかも…?

ってなわけで「jsdo.it」を使えば、今までより断然早く、スマートにゲームが作れるだけじゃなくて、
プログラミングの上達の近道にもなるってワケです。わかったかな？

じゃ、さっそくjsdo.itを体験してみますよ！

登録は、「jsdo.it」のサイトから「create account」をクリックして、使っているサービスをクリックするだけ。
googleやyahoo、twitter、Facebook、Hatena、いろんなアカウントに対応してますが、
9leapに登録するにはtwitterのアカウントが必要なので、とりあえずtwitterからログインしよう。

次に、アカウント名の設定。twitterのアカウント名があらかじめ入力された状態になっているので、そのままOK。
これで登録は完了。左側にコードがかかれ、右側に「Hello world!」が表示されてる画面になりましたよね。

なんだなんだチュートリアルか？と思ったら、これでもうプログラミングができるみたい！

速い！！なんて速さだ！！速すぎるぞjsdo.it！！
これなら簡単に友達にも勧められますね！

あとは、jsdo.itで「enchant.js」を使えるようにするだけ。

「enchant.js」を使えるようにするのもとっても簡単。Javascriptの+のadd libraryをクリックして
Select library→enchant.jsを選択するだけ。

9leapのランキングなんかに対応するためには、
さらにadd libraryから、input URLで 9leap/nineleap.enchant.jsを選択して加えればOK。
基本的にはこれで、すぐにゲームが作れちゃいます。

但し「アトラスX」を使う人は、HTMLとCSSにもチョットだけ書き加える必要があります。
以下のコードをそれぞれコピーして貼り付けてください。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=320px, user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
        <title>enchant</title>
        <style type="text/css">

        </style>
    </head>
    <body>
    </body>
</html>

CSS

body {
    margin: 0;
}
.selector{
    text-align:center;
    padding-left:10px;
    width:280px;
    color:#ffffff;
    font-size:16px;
    background-color: #75c5e3;
    background:-moz-linear-gradient(top,#0000a0 0%,#000000);
    background:-webkit-gradient(linear, left top, left bottom,from(#0000a0),to(#000000));
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
    -webkit-box-shadow: 0 0 9px #88a;
}

あとは、左側のエディタ部分でプログラムを書くだけです。

(ゲーム開発画面・クマが動くゲーム)

タイトルや解説を設定すると友達や他のプログラマにも見つけてもらいやすくなるので、
タイトル欄をクリックしてクールな名前を付けましょう。
URLは自動で設定されているから、ついでにここも変えとくとイイカンジですね。

ここでワンポイント、タグに「9leap」を入れるのを忘れずに!
これを忘れてしまうと、「9leapに投稿」ボタンが表示されません。