この資料はじゃばすく製作所(仮)ふたつめ。用の課題作成ガイドブックです。「ふたつめ。」だけど三回目な今回はJavaScirptを用いてアナログ時計を作ります。例によって必要なのはブラウザとテキストエディタ、そしてほんの少しのやる気です。
Note
じゃばすく製作所(仮)については例のあれ(仮題)- 久しぶりにそれっぽい勉強会やります。を参照してください。
前回は簡易電卓を作成しました。その時の資料SampleCalc 〜脱ゆとり宣言〜 を作ろう。 — SampleCalc work guide 1.1 documentationも公開していますので、興味がある方は是非ご覧ください。
ブラウザはSafariやGoogle ChromeなどのWebKit系のものか、Firefoxを使ってください。Internet Explorerでも大丈夫かも知れませんが確認していません。今風のIEさんで試してみたかったのですが、実は環境を持っていませんでした。誰か下さい、Windows 7……。
Warning
先日機会がありまして、Windows Vista上のInternet Explorer 9での動作を試してもらいました。結果、上手く動いていたようでした。いけますよ、IE9さん!
テキストエディタはお好みのものをお使いください。JavaScriptモードなどがあるものだとより便利です。私はOS Xを使っていて標準のキーバインドがEmacs風だった事もありエディタの方もEmacsを使っています。
配布したファイルの説明をします。
SampleClock作成テンプレート一式です。
このガイドブック一式です。
一応付けてみました :-)
配布ファイルのsrc/以下に今回作成するSampleClockのテンプレート書類が含まれています。
土台となるHTML書類です。あらかじめCanvasタグが二つと、css、js書類の読み込みが記述してあります。今回も編集する必要はありません。かと言って、最初の状態では何も表示もされません。
CSS書類です。今回は仕組み上ほとんど出番はなくって、表示開始位置を調整してマージンをなくすくらいにしか使われていません。CSS、大好きなのに。
JavaScript書類です。こちらが今回の本丸、SampleClockの中核をなす書類です。今回はこのファイルを作り上げていただきます!
Note
今回も態とらしく test.html、js/test.jsなるファイルが含まれています。が、今回も態とらしく触れません。
また、前回同様私が書いた実装例はtactactad/SampleClock - GitHubにて公開しています。