Skip to content

「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に投稿」ボタンが表示されません。

あとは、「save」を押したら自動的にゲームが始まります。
もしも動かなかったら…? 画面の左下にエラーの内容が出てくるのでここを見て、コードを直しまそゆ。
英語が分からなくても、エラーコードをGoogleで検索すると直し方が分かるかも…?

ばっちりプログラムが動いたら、最後に「Finish Editting」を押して終了。
あとは、「9leapに投稿」ボタンを押して投稿するだけ!

どう、カンタンでしょ?これで投稿できちゃうんです!
スゴイっ!!

でもでも、これでもライブラリを追加したり、
アレコレ悩んだり…タイヘンですよね。
ってことで、9leapでは、いろんなゲームの土台になる骨組みを、
jsdo.itのサービスの中に作っちゃいました。

  • アクションゲームのサンプル
  • RPGゲームのサンプル
  • ノベルゲームのサンプル (アトラスX + Twitter連携 ver.)

enchant.js Action Game Sample – jsdo.it – share JavaScript, HTML5 and CSS

enchant.js RPG Sample Game – jsdo.it – share JavaScript, HTML5 and CSS

Atlas-x Novel Game Example – jsdo.it – share JavaScript, HTML5 and CSS

ここから「Fork!」すれば、なんと、すでにすべての準備が整ったところから始められますよ!
ライブラリの読み込みも要らないからラクチン!

ちなみにサンプルではPCからのキー入力は効きませんが、

「スマートフォンビュー」にすれば十字キー入力で操作することができちゃいます。

もちろんjsdo.itにはゲームの他にも、JavaScriptのCSSの高度なテクニックや、
HTML5で追加されたcanvasやaudioタグなどを使ったコードがたくさん投稿されていますよ!
JavaScriptやCSS、HTML5の勉強にはもってこいのサイトです。

ってことで、今回は「jsdo.it」と「9leap」についてのビッグニュースのお知らせでした。
みなさん、投稿待ってますよ!

このエントリーをはてなブックマークに追加
はてなブックマーク - 「jsdo.it」と「9leap」が黄金のコラボレーション!ゲームプログラミングがもっと身近に・学びやすく
Post to Google Buzz
Share on GREE

Related posts:

  1. 9leap:プログラミングの腕を磨くと最新のMacが貰えてシリコンバレーへ行ける育成プロジェクト
  2. 9leap Camp@Tokyoレポート:4時間でスマートフォン対応のHTML5ゲームをゼロから創ってみる
  3. 9leap ゲームプログラミング仙台キャンプ決行! 被災地でノートPCを持っていない未成年先着2名に中古Macを進呈
  4. 9leap 9Days Challenge #1結果発表! iPad2を手にした作品はこれだ!
  5. 必見!9leap投稿ゲームプログラムの作り方!

Facebook comments:

Post a Comment

Your email is never published nor shared. Required fields are marked *
*
*