RealBasic University

このコラムはStone Table Softwareのオーナーであり、またREALbasic Developerの編集者でもあるMarc Zeedar氏により書かれたものを、著者の許可を得て翻訳したものです。この翻訳はHREM Researchにより提供されています。この日本語版へのご意見はRBU-Jまでご連絡下さい。

URL: http://www.applelinks.com/rbu/056/
INDEXに戻る

SimplePaint:パート III

先週、レッスンの終わりにカラーを変えてSimplePaintを動かしました。しかしユーザにカラー表示領域内に描画させてしまうことによって、新たな問題を引き起こしてしまいました。

どうみてもこれを改善する必要があります。

領域内の描画を防ぐ

猫の皮をはぐにはいくつもの方法があるという昔の身の毛のよだつ諺のように、それを改善する方法はひとつだけとは限りません。私はユーザがある領域に描画しないように制限するには、様々な方法があると確信しています。そして、創造的な読者はいくらかの興味深いアイデアを思いつくに違いありません。もちろん非常に怠け者の私は、単純なアプローチが好きです。

paintWindowに新しいcanvasを加えましょう。それに次の設定を与えてください。

いまnodrawCanvaspaletteCanvasをすっかり覆っているかもしれません――もしそうならば、nodrawCanvasを選択し、Formatメニューから"後ろに移動する(Move to Back)"を選んでください。

nodrawCanvas内部への描画を防ぐために、mouseDragイベントにいくつかのコードを加える必要があります。そのイベント(paintWindowのEventsリスト内にある) を探し、はじめのdim x2, y2 as integer行の直後に、次のコードを挿入してください。

   dim w, h as integer 

w = nodrawCanvas.left + nodrawCanvas.width
h = nodrawCanvas.top + nodrawCanvas.height

if (x < w) and (y < h) then
return
end if

何だと思いますか?これでもう済んだのです!これはただカーソルがnodrawCanvasの領域内に入っているかをチェックする機能です。そしてもしそうならば、それは何もしない(描画しない)でリターンします。簡単ですね!

後になってプログラムにより多くの"コントロール(controls)" を付け加えたい場合、ただnodrawCanvasを大きくするだけで、プログラムはどんなコードの変更なしに動きます。

ブラシの視覚化

SimplePaintに追加したい機能のひとつはブラシのサイズと形を変更する方法です。プログラムの設計がよかったので、これは極めて簡単にできます。

この機能を加えるために、しなければならない2つのことがあります。1つ目は、現在のブラシの形を視覚的に示す方法が必要です。2つ目は、ユーザがブラシの形やサイズを変更するために使用するシンプルなインターフェースが必要です。

後者はより複雑なので、ブラシの形を視覚的に表示するほうから始めましょう。これは前回のレッスンで加えたカラー表示機能と似ています。まず始めに、次の設定を持つstaticTextラベルを加えてください。

次に、以下のような属性を持つcanvasを加えてください。

paintWindowはこう見えるはずです。

コード・エディタを開くのに、shapeCanvas上をダブル・クリックしてください。Paintイベントのためのコードを入力しましょう。

   dim x, y as integer 

// 中心座標の計算
x = me.width \ 2
y = me.height \ 2

if c = rgb(255, 255, 255) then
g.foreColor = rgb(0, 0, 0) // 黒
g.fillRect(0, 0, g.width - 1, g.height - 1)
end if
drawPixel(g, x, y)

// 境界線を引く
g.foreColor = rgb(0, 0, 0) // 黒
g.drawRect(0, 0, g.width - 1, g.height - 1)

お分かりのように、これは始めにブラシの形を描画する場所を示す四角形の中心座標を求めています。

次に、現在の描画色が白であることを確認します――もし白ならば、ボックス全体を黒の背景で塗りつぶします(そうしないと白のブラシは見えません)。

それからdrawPixelルーチンを呼び出し、shapeCanvasの中心に"ピクセル(pixel)"を描くように伝えます。

最後に、ブラシの最大サイズを表しているshapeCanvasの周りに黒の境界線を描きます。

Quick Quiz:なぜ境界線は最後に引くのでしょうか?(答えは、最後に塗りつぶしを行うとそれが境界を覆ってしまうからです!)

これを動かすためには、もう1ステップが必要です。ちょうどcolorCanvasで行ったのと同じように、shapeCanvasについても再描画させなければなりません。したがってchangeColorルーチンに行き、colorCanvas.refreshの後にshapeCanvas.refreshを挿入してください。

さてプログラムを実行してください――違うカラーをクリックするとサンプル・ブラシの形がカラーを変更するのが分かりますね。

ブラシのサイズを変更する

まだブラシのサイズを変更する方法を作成しなければなりません。この一番簡単なやり方は、キーボード・コマンドで行う方法です。拡大/縮小するのに、プラスキーやマイナスキーを用いるのはどうでしょうか?

子供はおそらくそれほどブラシの形にはこだわらないと思いますが、簡単な機能なので作成しましょう。形を調整するためには、数値キーパッドの数字を使用します。4と6はブラシの水平方向(幅)を縮めたり伸ばしたりするでしょう。8と2は垂直方向を伸ばしたり縮めたりします。+と−は、縦横両方を拡大/縮小します。

KeyDownイベントに行き、すでにあるものにこのコードを加えてください。

   if key = "4" then 
xWidth = xWidth - 3
if xWidth < 3 then
xWidth = 3
end if
shapeCanvas.refresh
end if

if key = "6" then
xWidth = xWidth + 3
if xWidth > 30 then
xWidth = 30
end if
shapeCanvas.refresh
end if

if key = "2" then
yWidth = yWidth - 3
if yWidth < 3 then
yWidth = 3
end if
shapeCanvas.refresh
end if

if key = "8" then
yWidth = yWidth + 3
if yWidth > 30 then
yWidth = 30
end if
shapeCanvas.refresh
end if

if key = "-" then
xWidth = xWidth - 3
yWidth = yWidth - 3
if xWidth < 3 then
xWidth = 3
end if
if yWidth < 3 then
yWidth = 3
end if
shapeCanvas.refresh
end if

if key = "+" then
xWidth = xWidth + 3
yWidth = yWidth + 3
if xWidth > 30 then
xWidth = 30
end if
if yWidth > 30 then
yWidth = 30
end if
shapeCanvas.refresh
end if

ここでするのは、xWidthyWidthの値を変更することだと分かるでしょう。とても簡単ですが、効果的な方法です。ほとんどのコードは、値が範囲内(3ピクセル以上30ピクセル以下)に収まっているかを確認するチェックです。そして、それが新しい形を反映するようにshapeCanvasをリフレッシュします。

それでは、プログラムを実行してください――数値やプラスキー、マイナスキーを使ってブラシのサイズを変更できるはずです。

今回はここまでにしましょう――次週は画像を保存する方法を追加します。

今週のREALbasicチュートリアルの完全なプロジェクト・ファイル(リソースを含む)を入手したい場合は、ここからダウンロードしてください。

次週

SimplePaintを継続して、図面を保存する機能を加えます。

Letters

JacquelineさんがSimplePaintの"カラーパレット上の描画"問題の解決策を提案してくれました。

Marcさん、こんにちは。

すてきなアプリに感謝します!

先週のコラムの問題について、私はpaletteCanvasの右側に線(赤い線。子供は赤が好きなので!)を引くことができると思います。paintWindowPaintイベントで、次のコードを入力しました。

     g.foreColor = rgb(255,0,0) 
g.penWidth = 7
g.drawLine 195, 0, 195, me.height

そしてMouseDragは次の通りです。

   if x2 > 195 + xWidth then 
drawPixel(p.graphics, x2, y2)
end

しかしスクリーンの左側の空スペースはあまり好くありません――私はよりよい解決法を好みます。

それから、簡単な質問があります。colorCanvasPaintイベントで、あなたは次のように書いています:

  g.fillRect(0, 0, g.width, g.height) 

どうしてme.widthme.heightの代わりに、g.widthg.heightを使うのでしょうか?

どうもありがとうございます!

まず質問に答えると、g.widthあるいはme.widthのどちらを使ったとしても問題ではありません。結果はどちらも同じです(この場合、gmeの一部なので、g.widthは常にme.widthと同じになります)。

なぜ私がその方法を採ったかに関しては、確かな答えがありません。それを塗りつぶすことに専念していたので、gに気をとられたというだけで行ったのかも知れないですが、詳しいことはわかりません。またどちらの方法についても不都合なことは思いつきません。ただし時折、現在のオブジェクト(me)のgraphics属性と異なるようにgを再定義するかもしれませんが、その時は2つの幅は必ずしも同じではありません。

次に新しい読者のCarolさんからいただきました。

Hi!こんにちは!

私はREALBasicの新参者として、ちょうどいまRBUを発見しました。パーフェクトです!このすばらしい仕事を続けてください!

私はRBUのアーカイブに目を通し始めたところで、"個人用のプログラム"の記事に興味を惹かれました。そしてREALbasicにこうして欲しいと思うことを"口出し"しようと思いました。

私はコレクター(アンティークや現代品)として、何年にも渡って多種多様なコレクションの管理をするプログラムを探し続けていました。PCユーザにとってはとてもたくさんの選択肢がありますが、Macファンであるわれわれにとっては、575ドル!?!もするディーラーや在庫管理のためのアプリ以外はまだ見つかっていません。

いろいろ調べたり、利用可能なオプション(Virtual PCやPC cardあるいはREALBasic)を比較してみたあと、私は最終的にREALBasicに決めました。結局のところそれは、何か本当に必要なものがあったら自分でやりなさい!と言っているんですね。私は全くプログラムの知識がなくてコンピュータの知識も生半可なものですが、始めに受けたRBデモの体験が、実際のアプリケーションを試してみようという気持ちにさせてくれました。私のようなビギナーでもよく分かるレッスンを提供していただいて、ほんとうにどうもありがとうございます。

また私は少なくとも一冊の本を購入することを考えていたので、Dummies bookとDefinitive Guideの比較をしてくれたのを見つけて嬉しかったです。今はどうやら第三の本があります。"REALBasic for Mac" (Michael Swaine, Peach Pit Press, January 2002)と題されたまさに出版されようとしている本です。これをレビューする機会はありますか?そうならば、今後のRBUであなたの書評を読めると思うとわくわくするでしょうね。

もうひとつアイデアがあります。スキャンされた写真(私のコレクション品)のようなグラフィックや、さらにMulti-Ad CreatorあるいはQuark Xpressのようなプログラムからのテキストをインポートする機能を加えるにはどうすればよいのか説明するレッスンはどうでしょうか?これはREALBasicで行うことは可能ですか?もしすでにこの話題を取り上げていたら、すみませんでした。まだすべてのアーカイブ記事に目を通していないので――今読んでいるところです!!

時間を割いていただいてありがとうございます。

Carol Mehler

ありがとう、Carolさん!

あなたのプロジェクトはすぐれたもので、幸運をお祈りしています。ぜひ進行具合をお知らせください。私はある時点で、RBUでのデータベースプロジェクトを取り上げることを計画しています――その前にデータベースについてもっと勉強しなければなりませんが……。

Michael Swaine氏のREALbasic本は出版が遅れていますが、今夏〔2002年〕には出版されるでしょう。もちろんレビューするつもりでいますよ。

最後に、あなたのテキストやグラフィックのインポートに関する質問は興味があります。グラフィックの場合はそんなに難しくはありません――REALbasicはQuickTimeがサポートしているどんなグラフィック・フォーマットでも開くことができるからです。プログラムに画像を"インポート"するには、ただfolderItemopenAsPictureメソッドを使用すればいいだけです。その結果はスタンダードなRBの画像オブジェクトになります――それからその画像をデータベースに蓄積したり、加工したり、あなたのしたいことは何でもできます。

しかしながら、テキストの場合は別問題です。プレイン・テキストは簡単に取り扱うことができますが、Microsoft Word、Multi-Ad CreatorあるいはQuark XPressといった独自のフォーマットは不可能です。その理由は、一般にこのような会社は競争会社にファイル・フォーマットがどのような仕様になっているか公開しないからです。いくつかの会社はフォーマットをリバース・エンジニア(試行錯誤してどのように働いているか解析する)しますが、それはとても大変な作業です。より一般的な方法は、ユーザにその特有のプログラムからプレイン・テキストやRTF(リッチ・テキスト・フォーマット)のような標準的フォーマットにテキストをエキスポートさせることです。そうすれば、プログラムはそれをREALbasicが読むことのできるフォーマットに変換することができるでしょう。(もちろんプレイン・テキストがもっとも簡単ですが、カラー、フォント、文字サイズ、ボールドフェイスやイタリックなどのようなフォーマットを失うことになります。)

私が作成したフリーのRTF-to-Styled Textは、RTFを扱うREALbasicプログラムの例です。これはRTFを標準的Macスタイルのテキスト・フォーマットに変換します(SimpleTextやREALbasicが使用するようなフォーマット) 。プログラムはオープン・ソースです――REALbasicのコードはここからダウンロードできます。またそれはBelle Nuit Montageにあるオープン・ソースのRTFParserライブラリを使用しています。

最後に、HarriさんはRBUに提案をしてくれました。

こんにちはMarcさん!

私はREALbasicで3Dアニメーションを学びたいと思っていますので、いつかそれについてのコラムを書いていただけないでしょうか。

Harriさん、ご提案どうもありがとうございます!

残念ながら、私の3Dに関しての知識は皆無です。だから近いうちにそれを取り上げることはありえないでしょう(けれど興味はあるので、それを研究する時間があったら自学自習するかもしれません)。

私の雑誌を宣伝するわけではありませんが、REALbasic Developerの定期購読を考慮するといいかもしれませんね――これには毎号3Dについてのコラムがあり、さらに3Dに関する特集記事(REALbasicの3D機能を書いたJoe Strout氏は著者の一人です)も予定しています。もちろん、雑誌はすべてが3D記事であるわけではなくて、私たちは完璧にトピックを取り上げていく予定です。


RBU-Jの通知サービス!コラムが発表されるたびに日本語版REALbasic Universityのお知らせの emailがあなたに届きます。登録・削除は ここ から。

INDEXに戻る