早くも色々な勉強会やハッカソンなどで、プログラミングの説明などにcode.9leapを使いたいという声が聞こえて来たので、code.9leapの「はじめてのenchant.js」のようなチュートリアル形式のサンプルをつくる方法についても紹介するぞ!
これで勉強会やハッカソンの能率アップ間違いナシだ!
まず、例として「STEP 2:スプライトを表示しよう」を見てみましょう。
まずはcode.9leapにログインして「STEP 2:スプライトを表示しよう」のチュートリアルをForkする。
するとForkされた画面が表示されるので、タイトルを適当に好きな名前にして、ファイルセレクターから「tips.json」を選ぼう!
tips.jsonはその名の通りJSONファイルで、ここに書かれた内容がTIPS領域に表示されることになる。
{
"error_tips_table": [{
"cond": {
"title": "enchant.js が読み込まれていないようです。",
"content": "enchant.js を読み込むには、index.htmlの head タグの中に以下のタグを貼り付けましょう。"
},
"title": "enchant.js が読み込まれていないようです。"
}, {
"cond": {
"title": "構文エラーが起きているようです。",
"content": "enchant.js は読み込まれていますが、main.js の中で構文エラーが起きているか、enchant(); が実行されていないようです。"
},
"title": "構文エラーが起きているようです。"
}}],
"progress_tips_table": [{
"cond": "bear.x!=0",
"title": "課題1",
"content": "bear.xを変化させてみようxを変化させると横方向にクマが動くぞ!"
}, {
"cond": "bear.y!=0",
"title": "課題2",
"content": "オッケー!<BR>じゃあ今度はbear.yを変化させてみようyを変化させると縦方向にクマが動くぞ!"
}, {
"cond": "bear.scaleX!=1",
"title": "課題3",
"content": "絶好調だね!<BR>次はbear.scaleXを変化させてみようscaleXを変化させるとクマが横方向に伸びてくぞ!"
}, {
"cond": "bear.scaleY!=1",
"title": "課題4",
"content": "最後はbear.scaleYを変化させてみようscaleYを変化させるとクマが縦方向に伸びてくぞ!"
}],
"default_tips_table": [{
"title": "おめでとうございます",
"content": "<img width=160px src=http://junk.wise9.jp/code9/clear.gif><BR>enchant.jsのスプライトの基本をマスターしました!<BR>他のチュートリアルにも挑戦してみよう!"
}]
}
error_tips_tableは、エラーがあるときにプログラマーにヒントを与えるためのもので、普通はあまり使いません。
default_tips_tableは、配列になっていて、ここにTipsやヒントを沢山書いておくと、ランダムにTips領域にTipsやヒントが表示されます。
例えばこんな感じ
"default_tips_table": [{
"title": "Wise9を見よう!",
"content": "wise9にはプログラミングのヒントが沢山書かれているぞ! <a href=http://wise9.jp target=_new>こちら</a>を見てみよう!"
},
{"title": "9leapでライバルを探せ!",
"content": "<a href=http://9leap.net target=_new>9leap</a>には手強いライバル達が自作ゲームを公開しているぞ。さっそく見に行こう!"}
]
こんな感じにすると、リンクを含んだ文章が左下のTips欄にランダムに表示されます。
imgタグも使えるので、画像も埋め込むことが出来ますし、大きな画像を使いたい場合は、aタグで大きな画像のURLにリンクすればたいていのことはできてしまいます。
主要なタグは使うことが出来ますが、特殊なタグも用意されています。
それは［codeタグ］です。[と]でcodeを囲んで使います
"default_tips_table": [{
"title": "なにはなくともenchant()",
"content": "enchant.jsを使う前には［code］ enchant.js();［ /code］を忘れずに"
}]
ここでは半角で[]を書くとwebでうまく表示できないため全角にしていますが、実際には半角です。
こうすると
こんな感じにコードが整形されて表示されます。
ただし、default_tips_tableは、一度RUNしないと何も表示されないので注意が必要です。
自作のライブラリの説明をする場合や、サンプルコードを改造するテクニックや注意点についてはdefault_tips_tableに沢山書いておくとユーザーは迷わずに遊ぶことが出来ます。
次に、チュートリアルのように段階を追って「課題」を出して行くようなタイプのサンプルを作る場合は、progress_tips_tableを使います。
"progress_tips_table": [{
"cond": "bear.x!=0", //この条件が成立したらこのクエストはクリア
"title": "課題1", //タイトル
//↓内容
"content": "bear.xを変化させてみよう［code］bear.x=50;［/code］xを変化させると横方向にクマが動くぞ!"
}],
progress_tips_tableは、ステップを踏みながら学習させたい場合に最適です。
これもcond,title,contentの三つのプロパティをセットにしたオブジェクトが配列になっている。僕はこのひとつのセットを「クエスト」と呼んでいます。
重要なのはcondで、condにはそのクエストをクリアするために成立しなければならない条件式を書きます。
たとえば、「bear.x != 0」だったら、クマのx座標が0以外に設定されたとき、このクエスト(課題)はクリアされる、というワケです。
今のところ、このテストは、実行の約1秒後に行われます。
なので意外とこのテスト条件を考えるのは難しいです。
code.9leapのサンプルにvarが殆ど使われていないのはこういう理由でもあります。まあ苦肉の策というやつですね。
この辺りの条件式はあまり厳密に決めると面白くなくなってしまうので、ゆるい決め方でかまわないと思います。
ここに書かれている手順の通りにソースコードを弄って行けば、ちゃんと予想された結果になっていることが大事です。
さて、実際にサンプルをダダダっと作ってみたところ、サンプルを作る作業自体もかなりパズル的で面白いことが解りました。
また、説明の上手い下手って個人差があるし、実は最適な説明は一通りではないのではないかと思うようになりました。
なにしろプログラムを書いてるだけでゲームをしてるような、不思議な感覚に襲われます。
これはちょっと面白いことです。
そこで、9leapでもあることだし、急遽コンテストを開催したいと思います。
題して、「code.9leapカスタム・チュートリアルチャレンジ!」
募集内容:
code.9leap上で動く一連のチュートリアル集を募集します。
伝わりやすさ、解りやすさ、楽しさ、期間内にどのくらいの人が楽しんだか、といった要素を総合的に評価します。
応募された作品は、code.9leap公式チュートリアル集として配信します。
enchant.jsと直接関係ないチュートリアルでもOK。とにかくびっくりするようなものを待っています。
応募方法:
code.9leap上で複数のチュートリアル(5本以上)を組作品として制作し、各チュートリアルへのリンク集を外部のブログなどに作り、そのURLと説明をこちらから送ってください。その際、各サンプルにはcode.9leapのものと同じように正方形のスクリーンショットを付けて下さい
募集期間:
2012年7月3日〜7月末日23:59まで
応募資格:
日本国内に在住していれば誰でもかまいません
賞品:
優勝者には最新のRetinaディスプレイを搭載したMac Book Pro 15インチ2.3GHzモデル(￥184,800相当)を進呈します。また、佳作入選者(最大5名)には5000円ぶんの図書カードをプレゼント致します。
FAQ:
Q: 使用できるプラグインの制限はありますか?
A: ありません
Q: enchant.jsのチュートリアルに限るものですか?
A: enchant.jsを使う必要はありません
Q: JavaScriptのチュートリアルに限りますか?
A: code.9leap上で動くものならなんでもいいです
Q: 外部のサーバに説明図などを置いてもかまいせまんか?
A: かまいません
Q: code.9leap自体がバグってるぽい事象を発見したのですが
A: β版なのでご容赦ください。報告頂ければできるだけ修正するよう
努力しますが、できればバグを回避する方向で作って下さい
というわけで、我こそはと思うプログラマーのみなさんはぜひ挑戦してください!
このコンテスト、上級者向けかと思いきや、意外と中級者の方でも、「説明」の上手さにフォーカスをもっていけば、優勝できるチャンスも充分にあると思います。
また、Tipsのリンクを活用して、説明図などを用意するとより解りやすくなって良いと思います。
それでは、ご応募お待ちしております
Related posts:
Post a Comment