Chapter 12

Day 9 - ねこちゃんまんに後光を

pik
pik
2021.06.01に更新
tags: 妻プロ Delphi Chapter1

Day 9 - ねこちゃんまんに後光を

🐷「それじゃー、今回も引き続き何か見た目をいじってみるか~?」
🐷「…ねこちゃんまん、描ける?」

🐤「描いた!」
🐷「なんか "ね" のとこ血が滴ってるみたいになってるけど…」

🐷「じゃあ、Day 8 のフォームに新しく TImage を乗って Align を l…言うより先に!」

🐤「TImage を乗っけて Align を両方とも Client にしてみた」
🐤「Align が Client の TImage が2つあったとき、上手いこと2分割できるみたいな話ないの?」
🐤「Align を Left と Right にすればいいとか、2つ Client があったら後から乗った方が上に来るとかそういう話はわかってるんだけど」

GridPanelLayout で2分割

🐷「TGridPanelLayout 覚えてる?」
🐤「まあ」
🐷「TGridPanelLayout をフォームにおいてみて」
🐤「置いた」
🐷「TGridPanelLayout を Client にしてみて」
🐤「したけど!(キレ」

🐷「で、構造のとこ見て欲しい」
🐤「なんか、GridPanelLayout のところにさあ、なんか一杯入ってるんだよ」
🐷「そうなんだよ」

🐷「Day 8 で説明したとおり、いま GridPanelLayout には4つのコンテナがある状態になってる。なのd」
🐤「ああ!?これ2つにすればいいのか!?」
🐷「そう。なので1行削除しよう」

🐷「構造で RowCount の1を削除してみて」

🐤「!2つになった」
🐷「で、構造で Image1, Image2 を GridPanelLayout にドロップしてみて」
🐷「普通のコンテナと違って1つのコンテナには1つのコントロールしか置けないようになっててるから GridPanelLayout にドロップすると自動的に配置されます」

🐤「あっ!」

🐤「2つになった!!」

🐷「で ColumnCollection に 0 と 1 ってあるでしょ?ここの Value っていう値がこの列が全体の何パーセントを占めるか、を表していて、いま 50 が入ってるからちょうど2分割されてる」
🐷「だからここを変えると…」

🐤「ねこちゃんまんの方を 80 にしてみたんだけど上手くいかない…」
🐷「残念ながらこれは TGridPanelLayout のバグなのです…」
🐤「え~」
🐷「ごめん、これが Delphi の負の側面で、コントロールが多すぎてバグ修正が追いつかないという状態なん。重大なバグを直すために細かいバグは後回しにされるんだよね…」

🐷「で、これを防ぐ方法があって、Day 6 - 用語の定義でやった『フォームをテキストで表示』って覚えてる?」
🐤「デザイナ上のフォームを右クリックして『エディタで表示』ってやつだっけ」
🐷「そうそう」

🐤「多いが…桁が多いが…?」
🐷「FireMonkey の数値プロパティは 64 bit(8 byte)値で管理されてるから桁が多いんだ」
🐱(数値のプロパティには整数と実数があるけど、ここは実数の話だよ)

🐤「多いよ~うう~ん(パニック)」

🐷「…ここで、ColumnCollection.Item.Value の値を足して 100 になるように入れてあげて」

🐤「どこ~💦」

🐤「検索…あああ~!?💦」
🐷「そこはフォームのテキスト表示の時には使えない」
🐷「大パニックやん…」

🐤「[Ctrl + F]!col…」
🐤「あった」
🐷「教えて無いのに "検索" に気づいた」

🐤「変更して…右クリック『フォームとして表示』…」

🐤「上手くいったっぽい」

🐷「ということで、テキストで修正したあと『フォームとして表示』ってすれば、キレイに変更できるんだ。こういう回避方法があるバグの修正は後回しになりがち…」

バグとバグ報告

🐷「まあ、イラストレーターとかにもバグあるし…」
🐤「イラストレーターのバグ知らないけど…」
🐷「なんか描いてて落ちたりしない?」
🐤「あるけど…それはどのソフトでもそうじゃん?」
🐷「それはバグです」
🐤「なんかパソコンに負荷がかかって落ちたりしたのかなって思ってた」
🐷「ハードウェアの不具合で落ちるのは仕方ないんだけど、そうじゃない時にユーザーの意図に反してソフトが落ちるのはバグです」
🐤「じゃあ、絵描きとかが『ギャー!保存してないのに落ちた!!』って言うときは、ちゃんとバグレポートを送ってあげた方がいいんだ?」
🐷「そう!!」
🐷「報告されないと、開発者達はそのバグを知らないので直しようもない。だからバグがあったらちゃんと報告してみて」
🐤「まあ、ギャー保存してないのに落ちた!っていうときは大抵急いでる時なんだよね…」
🐷「でも、その状態を送らないと何度も繰り返す、ポリリズムだよ」
🐤「嫌なポリリズムだわ…」

光れ!ねこちゃんまん!

🐷「やっと本題だ~」
🐤「待ちくたびれて鬼滅の刃が進む」
🐷「一緒にやってる体なんだから、僕が原稿を書く間の待ち時間の話はしなくてもイインダヨ!」

🐷「TGlowEffect っていうコントロールを置いてくれない?」
🐤「どこに?」
🐷「適当に」

🐤「光ったあああああ!?」

🐤「じゃあ、ねこちゃんまんに持って行ったら…」

🐤「光ったああああああ!」
🐤「あれ?まだボタンの下だけ光ってる」
🐷「[F12] 押して、もっかい [F12] 押してみて」

🐤「消えた。バグですか!?バグですか!?(嬉しそう)」
🐷「うん。Effect はコントロールの範囲外に描画されるのでフォームデザイナ上だと上手いこと表示が更新されない事があるんだよね~」
🐷「なので、一旦表示を消して再表示してやると消えるんだ。前にも話したけど、[F12]は、コードエディタとフォームデザイナを切り替えるショートカット。よく使うから覚えて置くといいです」
🐤「ははあ」

エフェクトの種類

🐷「妻、他にどんなエフェクトあるか知りたくない?」
🐤「どうせ、Effect って入れたら出てくるんでしょ…」

🐤「多いな…」

🐷「なんか適当に、置いてみて」
🐤「TRippleEffect …あああああ!?ぐんにゃああああってなった」

🐤「しかも鹿だけのつもりだったのに、ねこちゃんまんもぐんにゃあああってなった、なんで?」

🐷「Effect は親に作用するんだ。だから、Image1 の子供として Effect を置くと Image1 に作用して、Layout に置くと Layout に乗ってるコントロール全部に影響する、というわけ」

🐤「じゃあ、RippleEffect は Image1 に、GlowEffect は Image2 に乗せよう」

🐤「鹿だけぐんにゃああってなった~!」

🐷「エフェクトで1つ注意して欲しいのは、1つのコントロールにつき、1Effect しか作用しないということ」
🐤「え~!?そ、そんな…」
🐤「じゃあ、ぐんにゃあああってさせたあと DropShadow つけるみたいなことはできないんだ?」
🐷「そこは柔軟な発想で解決できる」
🐷「Layout の上に Button が乗ってるとして、ある Effect を Button に、また別の Effect は Layout にって付けてあげれば、Button には2つの Effect が掛かった状態になる」
🐤「その親になる Layout と Button は同じ大きさ?」
🐷「別にどんな大きさでもいいよ。透明部分は無視されるからボタンに対してだけ効果があるよ」
🐤「なるほど」

エフェクトの多重がけ

🐤「じゃあ、鹿をぐんにゃああってさせて光らせたい…」
🐤「Image1 に GlowEffect を置いて…」
🐤「光らない!」
🐷「さっきも言ったように Image1 に2つの Effect はかからないんだよ」
🐤「じゃあどうするの?」
🐷「Image1 の親として Layout を置いて、その Layout に Effect をかけるんだ」
🐤「Layout…置いたらどっか行ったあああ!?」
🐤「あ、これか」
🐱(画像はないけど重要な伏線なのでそのまま書いておくみたい)

🐷「置いた Layout を GridPanelLayout に置いて、Image1 をその Layout の中に入れて、Layout に GlowEffect を持って行くと…」

🐤「デキター!!!」

エフェクトのプロパティ

🐤「じゃあ、鹿の方が派手になっちゃったから、ねこちゃんまんを光らせたいんだけど」
🐷「ねこちゃんまん、既に光ってるから、色とか変える?」
🐤「光ってる幅を倍くらいにしたい」
🐷「GlowEffect のプロパティをオブジェクトインスペクタで変えよう」

🐤「Softness を変えると広がった。でもこれ広がるけどぼやけて行っちゃうんじゃないの?」
🐷「そうだね。Glow、つまり光のエフェクトだから、光の絞りみたいな感じだね」
🐤「じゃあ、これでいいや」
🐤「Opacity ってなに?」
🐷「Opacity(おぱしてぃ)は、不透明度だね。0~1 を指定できるよ。0 だと見えなくなる」
🐤「ふぅ~ん、これはこれでいいや」

エフェクトのトリガー

🐤「ねえ!Trigger っていうプロパティがあるんだけど!?」
🐤「ふふふ、IsPressed = True っていうのを見つけた。ふふふ」

🐤「えい!実行!」

🐤「はああ!?最初から光ってるんだが??しかも押しても何も起きない!」

🐷「IsPressed というのは親のコントロールに Pressed というプロパティがあった時、その Pressed の値が True になると発動するって事なんだよ」
🐷「Image には Pressed というプロパティはない。なぜなら画像を表示するだけのコントロールだから!」
🐤「じゃあ、IsMouseOver は?」
🐷「MouseOver はプロパティではなく全部に効くのでやってみたら?あ、Enabled を False にしておくといいよ。それで初期状態が光ってない状態から始まる」

🐤「実行!」

🐤「わあああ!マウスカーソルを乗せると!ねこちゃんまんが光る!!」
🐤「うふ、うふふふ」

アニメーション

🐤「今は静止してるけど、ぐんにゃあああってアニメーションさせたりできないの?動かしてみたけど、特にアニメーションしなかったし」
🐷「それは次回にしようかなと思ったんだけど、気になる?」
🐤「じゃあ、次回でいいよ」

デザイナのガイド

🐤「あと、デザイナではガイドが出てるから何となくキレイに見えるけど、実行すると乱雑に置いたみたいになっちゃうね」
🐷「せやな~。それは背景を工夫したりして纏まってるように見せるといいよね」
🐤「この線をそのまんま出すとかないの?」
🐷「それはないんだけど、やるなら TRectangle っていうのを使えば四角形と線は出せる」
🐤「じゃあ、その TRectangle っていうのをコンテナにすればいいんですね?」
🐤「柔軟な発想。妻は賢いので」
🐷「まあ、それでもいい」
🐷「本当はもっとちゃんとした解決法があるんだけど、あと数回先でいいかな?」
🐤「いいよ、仕方ない!」

🐷「今回は楽しかったんじゃない?」
🐤「うん。楽しかった。待ち時間に読む『鬼滅の刃』が!」
🐷「鬼滅は面白いからな~仕方ない…」