適当に哲学書とやらを読んでみる

RubyでPDF出力-その4

Sat, 18 Dec 2010 09:48:10 +0900

ソースその2です。

053:	##############################
054:	#合計金額
055:	##############################
056:	move_down 10
057:	font_size = 12
058:	text "下記の通りご請求申し上げますよろしくお願い致します"
059:	move_down 2
060:	#表形式のデータは配列で指定する
061:	table(
062:	[
063:	["ご請求金額", '\1,200-']
064:	],
065:	#各カラムの幅をハッシュで指定する
066:	:column_width *=> {0 => bounds.width 0.4, 1 => bounds.width * 0.6},**
067:	#各カラムの横寄せをハッシュで指定する
068:	:align => {0 => :left, 1 => :right},
069:	#指定しないと幅がおかしくなる
070:	:width => bounds.width
071:	)
072:
073:	##############################
074:	#内訳
075:	##############################
076:	move_down 10
077:	text "内訳"
078:	table(
079:	[
080:	["マタタビ", "3", '\100', '\300'],
081:	["猫砂", "1", '\900', '\900']
082:	],
083:	#すべての行と列に線を引く
084:	:border_style => :grid,
085:	#一括してフォントサイズ指定
086:	:font_size => 10,
087:	#ヘッダーを指定
088:	:headers => ["内容", "数量", "単価", "金額"],
089:	#各カラムの幅を指定
090:	:column_width => {
091:	*0 => bounds.width 0.6,**
092:	*1 => bounds.width 0.1,**
093:	*2 => bounds.width 0.15,**
094:	*3 => bounds.width 0.15**
095:	},
096:	#ヘッダーの横寄せをハッシュで指定
097:	:align_headers => {
098:	0 => :center,
099:	1 => :center,
100:	2 => :center,
101:	3 => :center
102:	},
103:	#コンテンツの横寄せをハッシュで指定
104:	:align => {
105:	0 => :left,
106:	1 => :right,
107:	2 => :right,
108:	3 => :right
109:	},
110:	:width => bounds.width
111:	)
112:	end

RubyでPDF出力-その3

Sat, 18 Dec 2010 09:47:04 +0900

ソースその1です。

その2はこちら。

001:	*# -- coding:utf-8 --*
002:	require 'rubygems'
003:	require 'prawn'
004:	require 'prawn/layout'
005:
006:	FONT_FILE = 'ipam.ttf'
007:
008:	Prawn::Document.generate("03_ruby_pdf_test.pdf", :page_size => 'A4') do
009:	font FONT_FILE
010:	text_options.update(:wrap => :character)
011:
012:	##############################
013:	#日付
014:	##############################
015:	#本日の日付
016:	time = Time.now.strftime("%Y年%m月%d日")
017:	#フォントサイズ指定
018:	font_size = 12
019:	#右寄せでテキスト描画
020:	text time, :align => :right
021:
022:	##############################
023:	#タイトル
024:	##############################
025:	title = "請求書"
026:	font_size = 20
027:	#センタリングしてテキスト描画
028:	text title, :align => :center
029:
030:	##############################
031:	#宛先
032:	##############################
033:	#描画位置を30pt下げる
034:	move_down 30
035:	font_size = 13
036:	#テキストを直接描画
037:	text "mike_neck様　御中"
038:	move_down 2
039:	#左端から中央より30pt左まで水平線を描く
040:	stroke_horizontal_line bounds.left, bounds.width / 2 - 30
041:
042:	##############################
043:	#差出人
044:	##############################
045:	move_down 10
046:	#text_sizeもtextメソッド中で指定できる
047:	text "株式会社************", :align => :right, :size => 16
048:	text "〒100-0001", :align=> :right, :size => 12
049:	text "東京都千代田区千代田１番１号", :align => :right, :size => 12
050:	text "********************", :align => :right, :size => 12
051:	text "TEL 000-0000-0000 / FAX 000-0000-0000", :align => :right, :size => 10
052:

RubyでPDF出力-その2

Sat, 18 Dec 2010 09:43:25 +0900

前の続き。

さて、いきなり言い訳ですが、

天の孔雀、Ruby結構初心者(10月中旬に始めた、かつ11月は何もやっていない、12月に再開)のうえ、

その他のコミュニティに積極的に参加中ゆえ、

なんだかもう、レシピに書いてあることしかできませんでした。残念。ゲソゲソ～orz

とりあえず、IPAのフォントをインストールして、

サンプル通りのソースを書いておきました。

と、いいつつ、サンプルとは異なるところがあります。

tableを表示する際の横幅に関する引数です。

	サンプル (prawn0.5.0.1)	最新 (prawn0.8)
各カラムの横幅	:width => Hash	:column_width => Hash
表全体の幅	-	:width => (Float\|Fixnum)

つまり、サンプルにあるような、

:width => {0 => 100, 1 => 120}

のような形式で指定すると、ランタイムエラーが発生します。

ここだけは注意しましょう。

出力した結果はこんな感じです。

いや、Rubyは触れば触るほど面白くなりますね。

ほんとうはJSON形式のデータをPDF出力するようなライブラリをつくろうとしたのですが、

それにはあと1週間くらい必要ですね。

年内はかなり忙しいので、ちょっと無理そう…

RubyでPDF出力

Sat, 18 Dec 2010 09:15:08 +0900

Ruby逆引きレシピAdvent Calendar

なるものに参加しました。

本の紹介

Ruby 逆引きレシピすぐに美味しいサンプル&テクニック 232 (PROGRAMMER’S RECIPE) [単行本（ソフトカバー）]

島田浩二 (著), 設樂洋爾 (著), 村田賢太 (著), 前田智樹 (著), 谷口文威 (著)

ISBN-13: 978-4798119885

発売日： 2009/7/25

商品の寸法: 21 x 14.6 x 3 cm

ここでは、このレシピにある135「PDFを作成したい」について紹介します。

帳票ソリューションというのは、

開発者にはそのニーズというのが分かりにくいです。

しかし、国家への申請とか、SOX法対応などで、

各種の取引や記録などを容易には修正のできないけど容易にデータを再生できるフォーマットで

保存するというニーズがあることは確かです。

そのフォーマットの代表格がPDFです。

で、RubyでPDFを出力しようじゃなイカ？

というわけでございます。

天の孔雀さん(a.k.a mike_neck)の実行環境

その1

OS	Windows XP SP3
Ruby	1.8.7(Active Script Ruby)

その2

OS	ecoLinux
Ruby	1.9.2(自前でコンパイル)

RubyでPDFを出力する場合、

Prawnというgemを利用します。

これのインストール方法は次のような感じです。

実行環境その1

C:\Ruby\lib>gem install -r prawn

Welcome to Prawn, the best pure-Ruby PDF solution ever!

This is version 0.8

For those coming from Prawn 0.7 or earlier, note that this release has

some API breaking changes as well as many new features. *** You'll want

to know about these changes, as we will no longer be supporting

Prawn 0.7 or any earlier version of Prawn***

…

Installing RDoc documentation for prawn-0.8.4...

C:\Ruby\lib>

実行環境その2

mike@mikeVmEcoLinux01:/usr/local/lib/ruby$ sudo gem install -r prawn

ERROR: Loading command: list (LoadError)

no such file to load -- zlib

ERROR: While executing gem ... (NameError)

uninitialized constant Gem::Commands::ListCommand

mike@mikeVmEcoLinux01:/usr/local/lib/ruby$ whereis zlib

zlib:

mike@mikeVmEcoLinux01:/usr/local/lib/ruby$

…Linuxで自前ビルドするとzlibがなくてgemがまともにきどうしないらしい。

そのあたりはこのへんを参照して修正して、いざインストール。

mike@mikeVmEcoLinux01:/usr/local/lib/ruby$ sudo gem install -r prawn

Welcome to Prawn, the best pure-Ruby PDF solution ever!

This is version 0.8

For those coming from Prawn 0.7 or earlier, note that this release has

some API breaking changes as well as many new features. *** You'll want

to know about these changes, as we will no longer be supporting

Prawn 0.7 or any earlier version of Prawn***

…

Successfully installed prawn-core-0.8.4

Successfully installed prawn-layout-0.8.4

Successfully installed prawn-security-0.8.4

Successfully installed prawn-0.8.4

4 gems installed

Installing ri documentation for prawn-core-0.8.4...

Installing ri documentation for prawn-layout-0.8.4...

Installing ri documentation for prawn-security-0.8.4...

Installing ri documentation for prawn-0.8.4...

Installing RDoc documentation for prawn-core-0.8.4...

Installing RDoc documentation for prawn-layout-0.8.4...

Installing RDoc documentation for prawn-security-0.8.4...

Installing RDoc documentation for prawn-0.8.4...

mike@mikeVmEcoLinux01:/usr/local/lib/ruby$

インストール完了。

つづく。

SQLiteのテストコード

Mon, 06 Dec 2010 22:40:31 +0900

SQLite本体のコードが67ksに対して、テストコードが4m5678ksらしい。

679倍の規模のテストがあるわけで、SQLiteプロジェクトの品質に対する熱意がよくわかる。

天の孔雀はかつて回帰テストの自動化をするためのプロジェクトに参画することがあったが、回帰テストをコーディングするためには、たしかにかなりの労力が必要であることはその時に分かった。ただ、残念ながらそのテストコードはMSVBScriptのスキルが必要であったが、そのプロジェクトにいる人が皆COBOLな人たちで、なんでわざわざVBScriptを覚えて、テストコードを書かなければならないのか理解してもらえなかった。彼らの言い分としては、これらの画面の仕様は自分たちの頭の中に入っており、テストコードを記述しなくても、何を試験すればいいのか分かっている、ということだった。

ちなみにCOBOLプログラムを検証するVBScriptのコードの規模は同等の規模であった。残念ながら、私はプロジェクトを離れたため、テストコードを記述する人がいなくなってしまったが、今でもこのCOBOLプログラムは人力によってテストが行われているらしい。一応、テストスクリプトを最短で作成する方法を記述したドキュメントは残したのだが、COBOLの世界からは出ることはなかったようである。

巷には特定の開発言語のプログラミングに関する書籍は大量に溢れているが、テストに注力して書かれている書籍はかなり少ない。そうとうニッチな本である。言い換えるとプログラマの人々はテストの重要性を理解しながら、テストを効率よくやるということには目がいかないのではないかと思う。それは要求された仕様をどのように実現するかということだけに思考が向かっており、仕様が満たされているかどうかを検証することはあとで考えればいい、みたいな風潮があるのかもしれない。

そう、そういえば同じ部署で以前、天の孔雀に少し火が付いているプロジェクトで、手が足りないので結合試験を一週間で実施してほしいというオーダーが下されたことがあった。一応、引き受けてはみはしたものの、設計には何のかかわりもない私には、残念ながら実施することができなかった。テストの目的が不明、テストの対象となるドキュメントが未整備、実装だけに特化している設計書、これらからテストを導き出すには到底無理であった。その他の要因にもより、(天の孔雀は口が悪く思ったことはすぐ口に出すので、これがプロジェクトの一部の人にはムカつかれたのであろう、私に対して苦情が何件も届いたらしく、部署のトップマネージメントは私をいい加減にしてくれと言ってテンションをさらに下げたので、)私は一週間後に「無理です」と言って断ってしまった。

テストは理想的に言えば、設計を行ったものがテストを作成することが望ましい。設計とは何の関係もない人にテストを無茶振りするのはマネージメントの失敗としか言いようがない。逆に言うと、設計の段階で試験をどのように実施していくことがイメージ出来ていなければ、システム開発はどつぼに嵌まるのは間違いない。

だから、SQLiteのテストコードの多さは、このプロジェクトがテストをどう考えているかを如実に表す数値であり、これこそ品質を大事にするという考え方の物的証拠なのだと思う。

また、テスト工程というのはテスト実施→バグ発生→故障票記入→再現確認→プログラム改修→構成管理→再リリースという手順があるだけに、意外と生産性が低くなりやすい。プロジェクトによってはテストの生産性がコーディングよりも高めで設定されている場合もあるが、むしろテストの生産性は低いと考えたほうが現実的なのかもしれない。実装の生産性に対してテスト工程の生産性は半分くらいと考えたほうが適切かもしれない。しかし、大抵のプロジェクト計画ではテスト工程の生産性は実装の生産性よりも高く見積もっているところがほとんどであろう。だが、もう一度SQLiteのテストコードの規模を見れば、テスト工程のほうが実装工程よりも作業量が多いというのはあながち嘘とは言い切れない気がする。

そこで、天の孔雀としては、設計の成果物として、テスト項目票を入れるというのがいいのではないかと考える。また、フレームワークの設計などで、極力POJOを使うようなアーキテクトを採用したりするのも方策の一つなのではなかろうか。な～んて、適当なことを考えながら、『現場で使えるソフトウェアテストJava編』を読みつつ、今日は眠ることにする。

Node.jsでサーバー構築してみる。夢物語。

Thu, 02 Dec 2010 04:45:00 +0900

なんだっけ、Twitterから転載

mike_neck MikeNeck

入力に制限があるのだから、入力できるデバイスにもある程度の制限が必要で、それはAndroid端末に期待できる。あんな小さなキーボードで文字は打ちたくないもん。(器用に文字を入力できる方、ごめんなさい。)

8分前お気に入り返信削除

mike_neck MikeNeck

テスト部的に言えば、テストコードが記述しやすくなる。#atec

10分前

mike_neck MikeNeck

すこし話を戻すと、比較的広範で抽象的な内容を記述する設計書などは自由なフォーマットで書けるほうが問題であって、もともと決められた書き方に縛られたフォーマットのほうがバグの作りこみが少なくなる。

10分前

mike_neck MikeNeck

Hadoopや自然言語処理のアルゴリズムによって、意味を分析するのではなく、最初から意味を与えておく。言葉(文字)なんて、所詮記号に過ぎないので、それを読む人(それは書く人も読む人なのだが)のなんらかの状態に引きずられてしまう。だから書き手と読み手で意味がことなる事態が発生する。

13分前

mike_neck MikeNeck

これが本来html5でやりたかったセマンティックWebの本当のあるべき姿だと思う。

15分前

mike_neck MikeNeck

制約のある言語を実現するためには、MS-ExcelとかMS-PPTとか、MS-Wordとかいうソフトウェアで設計書を書かせるのでなく、ブラウザで記述できる言葉をプルダウンなどで選びながら、入力させる方式がよいと考えている。

16分前

mike_neck MikeNeck

制約のある日本語で設計書が記述された場合、一般的な自由言語で記述されたドキュメントに比べて40%ほど、バグが少なかったと日経コンピューターの記事には書かれていた。

18分前

mike_neck MikeNeck

最新の日経コンピューターにも記述されていたが、日本においては設計書の表現はある程度、制約を持たせた日本語で書かせるべき。もちろん、その制約を持った日本語を覚えるというのに時間はかかるが…

20分前

mike_neck MikeNeck

すべてのシステムを同一の言語で記述できるというのは、クライアント、サーバー両方のプログラマにとって、複数の言語(javaとjavascriptなど)を覚える必要がないので、メンテナンス性という製品品質が向上する。

22分前

mike_neck MikeNeck

昨日、Node.jsをインストールしたのは、javascriptで業務システムをすべて記述するという自分の夢を果たすための布石。

24分前

Node.jsをインストールする!～2

Wed, 01 Dec 2010 22:32:31 +0900

つづき

■その後、もう一度configureを実行。
linux-o1as:/usr/local/src/node-v0.2.5> ./configure
Checking for gcc : ok
Checking for library dl : yes
Checking for openssl : yes
Checking for library rt : yes
--- libeio ---
Checking for library pthread : yes
Checking for function pthread_create : yes
…
Checking for fdatasync(2) with c++ : yes
'configure' finished successfully (12.187s)
linux-o1as:/usr/local/src/node-v0.2.5>

4.コンパイル

■makeコマンド実行

linux-o1as:/usr/local/src/node-v0.2.5> make
…
Waf: Leaving directory `/usr/local/src/node-v0.2.5/build'
'build' finished successfully (7m20.060s)
linux-o1as:/usr/local/src/node-v0.2.5>

っと、どうやら成功したらしい。

5.インストール

■make install コマンド実行

linux-o1as:/usr/local/src/node-v0.2.5> make install
Waf: Entering directory `/usr/local/src/node-v0.2.5/build'
DEST_OS: linux
DEST_CPU: x86
Parallel Jobs: 1
Waf: Leaving directory `/usr/local/src/node-v0.2.5/build'
Cannot create folder '/usr/local/include/node/' (original error: [Errno 13] Permission denied: '/usr/local/include/node/')
make: *** [install] エラー 1
linux-o1as:/usr/local/src/node-v0.2.5>

…、root権限が必要でした…

linux-o1as:/usr/local/src/node-v0.2.5> sudo make install
root's password:
Waf: Entering directory `/usr/local/src/node-v0.2.5/build'
DEST_OS: linux
DEST_CPU: x86
Parallel Jobs: 1
…
Waf: Leaving directory `/usr/local/src/node-v0.2.5/build'
'install' finished successfully (0.634s)
linux-o1as:/usr/local/src/node-v0.2.5>

どうやら、うまくいったらしい☆

■念のためパスを確認

linux-o1as:/usr/local/src/node-v0.2.5> whereis node
node: /usr/local/bin/node /usr/local/lib/node
linux-o1as:/usr/local/src/node-v0.2.5>

大丈夫そうだ。

6.sampleを試してみる。

■node.jsにあるサンプルをそのままコピーしてみました。

linux-o1as:~/bin/node> vi sample.js
linux-o1as:~/bin/node> cat sample.js
var http = require('http');
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Hello World\n');
}).listen(8124, "127.0.0.1");

console.log('Server running on localhost:8124');

linux-o1as:~/bin/node>

さっそく、起動してみましょう。

linux-o1as:~/bin/node> node sample.js
Server running on localhost:8124

…ブラウザを起動して、localhostにポート8124でアクセス。
…エビデンスを表示しようとしたら、Linuxでは、Yahoo!ブログ画像添付機能をご利用できない…

なので、curlで試してみた。

linux-o1as:~> curl -I -X GET localhost:8124
HTTP/1.1 200 OK
Content-Type: text/plain
Connection: keep-alive
Transfer-Encoding: chunked

linux-o1as:~>

やりました☆パンパカパーン☆

Node.jsをインストールする!

Wed, 01 Dec 2010 22:14:45 +0900

openSUSE LinuxにNode.jsをインストールしてみた。→元ネタ

1. ディレクトリの移動、ソースを取得。

linux-o1as:~> cd /usr/local/src

linux-o1as:/usr/local/src>

linux-o1as:/usr/local/src> sudo wget http://nodejs.org/dist/node-v0.2.5.tar.gz

root's password:

--2010-12-01 21:05:56-- http://nodejs.org/dist/node-v0.2.5.tar.gz

nodejs.org をDNSに問いあわせています... 8.12.44.238

nodejs.org|8.12.44.238|:80 に接続しています... 接続しました。

HTTP による接続要求を送信しました、応答を待っています... 200 OK

長さ: 4008314 (3.8M) [application/octet-stream]

`node-v0.2.5.tar.gz' に保存中

100%[======================================>] 4,008,314 1.10M/s 時間 3.5s

2010-12-01 21:06:00 (1.10 MB/s) - `node-v0.2.5.tar.gz' へ保存完了 [4008314/4008314]

2.解凍する。

linux-o1as:/usr/local/src> sudo tar zxvf node-v0.2.5.tar.gz

…

node-v0.2.5/src/node_net.cc

node-v0.2.5/wscript

node-v0.2.5/Makefile

node-v0.2.5/LICENSE

linux-o1as:/usr/local/src>

linux-o1as:/usr/local/src> ls -l

合計 3920

drwxr-xr-x 10 mike 1000 4096 2010-11-17 14:46 node-v0.2.5

-rw-r--r-- 1 root root 4008314 2010-11-17 14:49 node-v0.2.5.tar.gz

mike@linux-o1as:/usr/local/src>

3.configureを実行

■まずはディレクトリ移動。

linux-o1as:/usr/local/src> cd node-v0.2.5/

■configure実行。

linux-o1as:/usr/local/src/node-v0.2.5> ./configure

Checking for program g++ or c++ : /usr/bin/g++

Checking for program cpp : /usr/bin/cpp

Checking for program ar : /usr/bin/ar

Checking for program ranlib : /usr/bin/ranlib

Checking for g++ : ok

Checking for program gcc or cc : /usr/bin/gcc

Checking for gcc : ok

Checking for library dl : yes

Checking for openssl : not found

Checking for function SSL_library_init : not found

Checking for header openssl/crypto.h : not found

/usr/local/src/node-v0.2.5/wscript:195: error: Could not autodetect OpenSSL support. Make sure OpenSSL development packages are installed. Use configure --without-ssl to disable this message.

linux-o1as:/usr/local/src/node-v0.2.5>

■ぬ…どうやらopensslのdeveloper packageが必要らしい。

というわけで、libopenssl-develをインストール。

つづく…

今更ながら、Apacheの設定を行う～その１

Mon, 22 Nov 2010 22:02:05 +0900

今更ながら、Apacheの設定を行う。

…環境作るのはそれほど得意ではないので、Apacheの設定とかよくわからんのですよ。

アプリを作るのは業務ではやっているんだけど、

恥ずかしながら、サーバー作るのは業務でもやったことないです。

環境：Windows7 Professional(32bit)

というわけで、

（１）Apacheからバージョン2.2のOpenSSL付きMSIインストーラーをダウンロード

上記のサイトからダウンロードする。

（２）おもむろに、ダウンロードしたやつをダブルクリック。

（３）インストール先を設定する。

Windows7ではProgram Filesにあると、いちいち管理者権限が云々かんぬんと言われて、アプリケーションを起動できないことも多い(※)ので、Program Filesには入れないで、Cドライブ直下にApacheフォルダーを作って、そこにインストールする。

(※)TomcatをProgram Filesにインストールしたら、通常起動できなくなります。

Tomcat.exeを右クリックして「管理者として実行」を選択しないと起動できません。

また、EclipseのTomcatプラグインでTomcatを起動する場合、Eclipseを「管理者として起動」していないと、Tomcatの操作はできません。

つーわけで、非常に面倒くさいのです。

Apacheも同じになるのはいやなので、Cドライブ直下にApacheフォルダーを作成する方式をとっています。

（４）apacheユーザーを作成する。

コンパネ→管理ツールから、「コンピューターの管理」をダブルクリック。

「コンピューターの管理」の左パネルの「ローカルユーザーとグループ」→「ユーザー」を選択。

右側のパネルで右クリックして、「apache」ユーザーを作成する。

apacheユーザーはUsersグループに所属してもらう。

これはUNIXとかLinuxをやっている人には、コンピューターを守るための常套手段らしい。

Apacheがのっとられても、コンピューター上のほかのリソースの改変を防ぐためとのこと。

（５）Apacheサービスを停止する。

コンパネ→管理ツールから、「サービス」をダブルクリック。

サービスの管理画面にて、「Apache」を選択して、サービスの停止をクリックする。

（６）apacheに権限付与。

C:\Apacheフォルダーを右クリックして、「プロパティ」を選択する。

「セキュリティ」タブを選択して、「グループ名またはユーザー名」の下にある「編集」ボタンをクリックする。

「アクセス許可」画面が表示され、「追加」ボタンをクリックする。

「ユーザーまたはグループの選択」画面が表示される。その画面の「オブジェクトの選択」に「apache」と入力して、「名前の確認」ボタンをクリックすると、先ほど作成したapacheユーザーの正式名称が補完される。

そんで、「OK」ボタンをクリック。

「アクセス許可」画面にてapacheを選択して、フルコントロールを選択して、「OK」ボタンをクリックする。

「プロパティ」画面にて「OK」ボタンをクリックする。

（７）サービス起動アカウントの設定。

コンパネ→管理ツールから、「サービス」をダブルクリック。

サービスの管理画面にて、「Apache」を選択して、右クリック→「プロパティ」を選択する。

「ログオン」タグを選択して、「ログオン」に「アカウント」を選択する。

「アカウント」の横にある「参照」ボタンをクリックして、先ほどと同様にapacheユーザーを選択する。

パスワードを入力して、「OK」ボタンをクリックする。

成功すると、なんかいい感じのダイアログが表示される。

（８）テスト

サービスの管理画面にて「Apache」を選択して、「サービスの開始」をクリックする。

これでサービスが正常に起動できればOKです。

html5のcanvas要素で楕円を描く。

Mon, 22 Nov 2010 20:32:20 +0900

html5のcanvas要素で楕円を描くオブジェクトを作ってみました。

canvas要素で楕円を描きたくてうずうずしている人に朗報。

canvas要素で楕円を描くオブジェクトを作ってみました。

とりあえず、わからなければコピペすべしっ。

そして、下の書き方例にそってコーディングすべしっ。

もしバグがあったら教えてください。

Ellipse= {

"init" : function(ctx, centerX,centerY, xSize, ySize){

var elps = this.ellipse;

elps.value = -360;

elps.ctx = ctx;

elps.cx = centerX;

elps.cy = centerY;

elps.x = xSize;

elps.y = ySize;

elps.drawn = false;

return elps;

"ellipse" : {

"value" : 360,

"x" : 0,

"y" : 0,

"cx" : 0,

"cy" : 0,

"ctx" : null,

"drawn" : false,

"isWidthLarge" :function(){return ((this.x > this.y) ? true : false);},

"baseRadius" : function(){

if(this.isWidthLarge()){

return this.y;

}else{

return this.x;

}

"moveRadius" : function(){

if(this.isWidthLarge()){

return (this.x - this.y) * (this.x +this.y);

}else{

return (this.y - this.x) * (this.y +this.x);

}

"moveNext" : function(){

this.value += 1;

return this.value < 360;

"getPosRadian" : function(){

return (this.value * Math.PI) / 360;

"getPosRadius" : function(){

returnMath.sqrt(Math.pow(this.baseRadius(), 2) + this.moveRadius() *Math.pow(this.movePosRadian(), 2));

"getPosX" : function(){

return this.x *Math.cos(this.getPosRadian());

"getPosPhy" : function(){

if(this.value >= 0){

return Math.acos(this.getPosX() /this.getPosRadius());

}else{

return - Math.acos(this.getPosX() /this.getPosRadius());

}

"movePosRadian" : function(){

var rtn;

if(this.isWidthLarge()){

if(Math.cos(this.getPosRadian()) <0){

rtn = -Math.cos(this.getPosRadian());

}else{

rtn = Math.cos(this.getPosRadian());

}

}else{

if(Math.sin(this.getPosRadian()) <0){

rtn = -Math.sin(this.getPosRadian());

}else{

rtn = Math.sin(this.getPosRadian());

}

return rtn;

"getNextRadian" : function(){

return ((this.value + 1) * Math.PI) /360;

"getNextRadius" : function(){

returnMath.sqrt(Math.pow(this.baseRadius(), 2) + this.moveRadius() *Math.pow(this.moveNextRadian(), 2));

"getNextX" : function(){

return this.x *Math.cos(this.getNextRadian());

"getNextPhy" : function(){

if(this.value >= 0){

return Math.acos(this.getNextX() /this.getNextRadius());

}else{

return - Math.acos(this.getNextX() /this.getNextRadius());

}

"moveNextRadian" : function(){

var rtn;

if(this.isWidthLarge()){

if(Math.cos(this.getNextRadian()) <0){

rtn = -Math.cos(this.getNextRadian());

}else{

rtn = Math.cos(this.getNextRadian());

}

}else{

if(Math.sin(this.getNextRadian()) <0){

rtn = -Math.sin(this.getNextRadian());

}else{

rtn = Math.sin(this.getNextRadian());

}

return rtn;

"draw" : function(){

this.ctx.beginPath();

while(this.moveNext())

this.drawArc();

this.drawn = true;

"drawArc" : function(ctx, ox, oy,r, from, to){

var start = - this.getPosPhy();

var end = - this.getNextPhy();

if(this.ctx){

this.ctx.arc(this.cx, this.cy,this.getPosRadius(), start, end, true);

return true;

}else{

return false;

}

"fill" : function(style){

if(this.drawn){

this.ctx.fillStyle = style;

this.ctx.fill();

return true;

}else{

return false;

}

"stroke" : function(style){

if(this.drwan){

this.ctx.strokeStyle = style;

this.ctx.stroke();

return true;

}else{

return false;

}

長いっ！

その分、使い方は簡単にしております。

そうでなければ、労は報われない…

【使い方-例】

Idにcanvasという値を設定したcanvas要素を準備しておく。

Canvas要素のwidth属性とheight属性にはそれぞれ、300を指定しておく。

1	var cvs = $("canvas");
2	var ctx = cvs.getContext("2d");
3	var elps = Ellipse.init(ctx, 150, 150, 150, 100);
4	elps.draw();
5	elps.fill("rgba(204, 204, 255, 0.7)");
6	elps.stroke("rgba(0, 51, 153, 1)");

行1と行2はcanvas要素を2Dグラフィックスとして描くための設定。

行3は今回作成したオブジェクトの初期化処理。引数は以下の通り。

Ellipse.init( Canvas2DContext, centerX, centerY, radiusX, radiusY )
Canvas2DContext	Canvasの2Dコンテキストを渡す。
centerX	楕円の中心位置のX座標
centerY	楕円の中心位置のY座標
radiusX	楕円の横方向の長さ
radiusY	楕円の縦方向の長さ

行4は楕円を描く処理。引数なし。

行5は円を塗りつぶす処理。

引数は色を表す文字列(例：”#ff9900”とか、”red”など)。

行6は円のボーダーラインを引く処理。

引数は色を表す文字列。

ちなみにこの処理の実行結果は次の通りです。