なんとなく、趣向を変えて、こんな本を買ってみた。いつものことながら、きっと長続きはしないと思うが。
- 作者: 松浦健一郎,司ゆき
- 出版社/メーカー: 秀和システム
- 発売日: 2008/11/19
- メディア: 単行本
- クリック: 10回
- この商品を含むブログ (8件) を見る
プログラミング初心者でも大丈夫みたいなことが書いてあるが、解説はあっさりしているので、初心者にはちょっと難しいのではないかと思う。ただ、グローバル変数を使いまくりの、ある意味シンプルなコードなので、JavaScriptをあまり知らなくっても理解はできると思う。
で、まず初めに、画像を動かすだけのプログラムを作ってみようと思った。
1. 開発環境の構築
ひさびさなので、開発環境から。Eclipserなので、残念だとは思いつつも、Eclipse(Eclipse IDE for JavaScript Web Developers)をダウンロード。テストを動かしたいので、次の書籍で用いまくっていたJsTestDriverをインストール。この本も読まないと。。
- 作者: Christian Johansen,長尾高弘
- 出版社/メーカー: アスキー・メディアワークス
- 発売日: 2011/11/25
- メディア: 大型本
- 購入: 19人 クリック: 331回
- この商品を含むブログを見る
2. コードの作成
コードというか、画像を作成すれば、ほぼ終わり。とりあえず出来合いのモノでよいかと、16枚の足跡の画像を用意する。
で、画像自体を動かすのは、次のようにしてスタイルのオプションを書き換えるだけ。これを一定間隔で呼び出せば、動いているように見えるでしょってわけ。わかるとは思うが、位置を(x, y)で、速度を(vx, vy)で表わしている。x方向は360ピクセルで、y方向は260ピクセルで折り返してねってこと。
x = x + vx; y = y + vy; if (x <= 0 || x >= 360) vx = -vx; if (y <= 0 || y >= 260) vy = -vy; img.style.left = x + "px"; img.style.top = y + "px";
これだけでは芸がないので、進む方向によって画像を切りかえるようにした。ま、たいした芸ではない。。
画像を表示するだけのプログラムなので、テストは書かず。JsTestDriverの動作確認をして遊んで、テストをした気になっておく。どうもグリーンバーがないと落ち着かないもので。
3. リポジトリへプッシュ
Gitについては、次の本がわかりやすかった(といっても、まだ全部読んでいないのだが)。EGitについても付録に紹介があって、Eclipserとしてはうれしい限り。
- 作者: 岩松信洋,上川純一,まえだこうへい,小川伸一郎
- 出版社/メーカー: オーム社
- 発売日: 2011/10/25
- メディア: 単行本(ソフトカバー)
- 購入: 6人 クリック: 239回
- この商品を含むブログ (27件) を見る
githubにプッシュするには、SSHのキーが必要になる。“ssh-keygen”一発でお終いなんだけど、Windowsだと面倒。「Github を Windows で利用する(Git GUI編): 小粋空間」の通りにやることに。で、公開鍵をアップして、Eclipseのプロジェクトを右クリック、「Team -> Remote -> Push...」を選択し、次のように入力して接続(青枠の3箇所のみを入力すればよい)。
エラーになる。。SSHのキーを作成する時に、パスフレーズを設定していたのだが、githubへの接続時に、パスフレーズでエラーになっているっぽい(なぜかプッシュ時にパスフレーズをポップアップで聞いてくれない)。なので、SSHのキーをパスフレーズなしで作成し直して、再度接続。うまくいった。
リポジトリは次。
https://github.com/higher-tomorrow/test