はじめに。

この資料はじゃばすく製作所(仮)ふたつめ。用の課題作成ガイドブックです。「ふたつめ。」だけど三回目な今回はJavaScirptを用いてアナログ時計を作ります。例によって必要なのはブラウザテキストエディタ、そしてほんの少しのやる気です。

Note

じゃばすく製作所(仮)については例のあれ(仮題)- 久しぶりにそれっぽい勉強会やります。を参照してください。

前回は簡易電卓を作成しました。その時の資料SampleCalc 〜脱ゆとり宣言〜 を作ろう。 — SampleCalc work guide 1.1 documentationも公開していますので、興味がある方は是非ご覧ください。

ブラウザはSafariGoogle ChromeなどのWebKit系のものか、Firefoxを使ってください。Internet Explorerでも大丈夫かも知れませんが確認していません。今風のIEさんで試してみたかったのですが、実は環境を持っていませんでした。誰か下さい、Windows 7……。

Warning

先日機会がありまして、Windows Vista上のInternet Explorer 9での動作を試してもらいました。結果、上手く動いていたようでした。いけますよ、IE9さん!

テキストエディタはお好みのものをお使いください。JavaScriptモードなどがあるものだとより便利です。私はOS Xを使っていて標準のキーバインドがEmacs風だった事もありエディタの方もEmacsを使っています。

配布ファイルの説明

配布したファイルの説明をします。

  • src/以下

    SampleClock作成テンプレート一式です。

  • GuideBook/以下

    このガイドブック一式です。

  • README

    一応付けてみました :-)

SampleClockの構成

配布ファイルのsrc/以下に今回作成するSampleClockのテンプレート書類が含まれています。

  • index.html

    土台となるHTML書類です。あらかじめCanvasタグが二つと、cssjs書類の読み込みが記述してあります。今回も編集する必要はありません。かと言って、最初の状態では何も表示もされません。

  • css/design.css

    CSS書類です。今回は仕組み上ほとんど出番はなくって、表示開始位置を調整してマージンをなくすくらいにしか使われていません。CSS、大好きなのに。

  • js/sampleClock.js

    JavaScript書類です。こちらが今回の本丸、SampleClockの中核をなす書類です。今回はこのファイルを作り上げていただきます!

Note

今回も態とらしく test.html、js/test.jsなるファイルが含まれています。が、今回も態とらしく触れません。

また、前回同様私が書いた実装例はtactactad/SampleClock - GitHubにて公開しています。

Table Of Contents

Previous topic

SampleClock 〜Canvasでアナログ時計〜 を作ろう。

Next topic

仕様をイメージしよう。

This Page