｜制作期間：2023年 10月 ~ 2024年 5月（筆者１〜２年生）
｜制作環境：ChromeBook
｜動作環境：Webブラウザ（PC、スマホ 可）
｜プログラミング言語：日本語プログラミング言語なでしこ
｜作者：shikiishi
｜
｜作品のリンク：なでしこ貯蔵庫
２年の文化祭、何出そうかなぁ、、、
高校生で初めて、プログラミングというものを体験。
それから半年間、
私は、 「日本語プログラミング言語なでしこ」で、「画像処理」を実装していました。
でも、基本的な画像処理ができるようになったくらい、、、💧
そこで、単純に実線（黒い線）で囲まれた部分に色を付けるアプリを制作しようと思い立ちました。
絵を描くならともかく、ワンクリックで色を塗るだけなら簡単〜♫
たぶん、お客さんも体験しやすいでしょう！
❏意外と複雑なしくみ、、、(泣)
さて、どうやって黒い線で囲まれた部分を塗りましょうか、、、
そもそも、コンピューター上では画像はピクセルが、縦と横にたくさん並ぶことで画像となります。（そりゃそうか、、、。）
ですから、ある部分に色を塗りたくても、一息にすべて塗ることはできません💧
１ピクセルごと塗っていきます。
ある黒い線で囲まれた領域を塗るとき、
❶クリックされた座標のピクセルから、左・右・上・下の４方向のうち好きな方に１ピクセルずつ塗りながら進んでいき、、、
➋黒い線（黒いピクセル）に当たった→ 左右上下の逃げ道を探す
❸また進んでいく、、、
という感じです。
でも、このままだと、選択しなかった別のルートに色が塗られてないかも、、、、。
そこで、
❹「進まなかった別ルート」の座標も記録しながら進み、、、
❺もう進めなくなるまで塗ったときに→ 記録した座標にジャンプ！
．．．そして❶へ戻る↲
事前に、塗り終わったピクセルたちの座標も記録しておきます。
これがないと、塗り終わったピクセルを何度も塗り直して無限ループになります。
❏デバッグ作業の流れ
プログラムの実装は、一気にできません。
一つのプログラムを、多くの「部分」に分けて行います。
そして、
❶実装（プログラムを書く）
➋テスト（うまく動くかどうか）
を繰り返します。
うまく動かないときは、、、
✅️「エラー」が表示されていないか確認
プログラムの構文のミス、スペルミス、数値がないとき、表示されます。
多くの言語では、綴りが一つ違っていても動きません、、、
✅️どの関数が動いてないか確認
全く動かないときは、関数や命令の前後で、
「関数〇〇を実行完了」と表示。
のような文字を表示するコードを書くことで、どの関数が実行されたか確認できます。これを「ログ」と言ったりします。
どの行のプログラムを実行しているかリアルタイムで見ることも可能です✨️
✅️関数の入力・出力データが適切かどうか確認
怪しい箇所が見つかったら、そこで扱っているデータを「ログ」として表示させ、設計通りのデータか確認しましょう！
画像データを扱うので、情報は膨大です。
↑「Undefined＝数値が見つからない」「null＝数値なし」が表示されるとわかりやすい
このプログラムは、いままで作ってきたアルゴリズムの中では、一番複雑なもので、はじめはほとんど動きませんでした、、、💧
・
・
・
・
・
・
・
やっと動きました✨️
↑Gif画像がデータ重いようで、表示に時間がかかります
全く動かないプログラムが、生き物のように動き出す瞬間が、プログラミングの醍醐味です🔥
うまく動いた瞬間、本当に感動します、、、。
この時も、昼休みに一人で発狂していました、、、
↑完成当初、こんな写真をLINEで 友達に送りまくりました、、、
まだ作業は終わらない、、、
塗れるようになっても、まだ完成ではありません。
まず、塗る色を変えることができません！（それはヤバい）
今回は３つの「値指定バー」で、赤、青、緑を調節するとして、、、、、
自分が作った色がどんな色か確認できるようにしたいです。
ということでこんな感じ〜♪
色を表示する窓（キャンバス）に、値指定バーからの数値の色を塗って表示してます。
値指定バーの上にカーソルが乗っている間、窓の色を更新し続けることで、リアルタイムで色を確認できます。
また、今回は、色を塗る画像を持ち合わせていないユーザーのために、サンプル画像として、「初音ミク」も用意しました。
文化祭本番では、お客さんが塗った絵を印刷します！
ですから、印刷のために、画像をダウンロードする機能もつけます。
そして、文化祭当日
私が用意した画像は６枚。
絵の線に、１ピクセルでも隙間があると、意図していない部分に色が広がるので注意⚡️
今回は、調節したものを用意して塗ってもらいました！
まず、最初のお客さんは、二人の女子高校生でした！
なんと、二人とも「Lain」をご存知で、クオリティーが高いです！
ここで、コピー機の不具合で、印刷が真っ黒に、、、💦
事前に準備が足りないデジ研の恒例行事です。
かなりの時間待たせてしまいました。本当に申し訳なかったです。
こんなふうに、多くの方に自分のアプリを実際に使ってもらうのは、かなり感動します。
これは、実際に体験してみないとわからない感情でした。
自己満足で終わらず、人の役に立つ（？）というのが、アプリ開発の活動の大きな特徴でしょう。
なぜ、色塗りソフトなんて作ったのか
もともと中学の頃、コピー用紙でアニメを制作していました。
中学の授業でもGoogleスライドとかを使うようになりました。
このGoogleスライド、ページを複製して、複製された２枚を切り替えても、全く画面が動きませんでした、、、、
当たり前です。
だって複製されたスライド２枚は、データが全く同じ複製だからです！！
でもこれがすごいんです！！
だって、紙に描いた線は、どんなに忠実になぞってもズレが生じていて、それがアニメとしてパラパラ動かすとブレてしまいます。
でも、デジタル技術を使えば、ブレは生じない。夢のような機械です。
「アニメ制作用アプリを開発して、そのアプリを使ってアニメをつくろう！」
そう考え、私は「デジタル研究部」に入部したのでした。
帰宅部の雰囲気が強いデジ研で、プログラミングを独学し、簡単な画像処理を作ってきました。
「画像のコピー」からはじめ、「画像の白黒化」「ビネガー」「エッジ検出」とかとか、、、
↑↑画像の半分だけ2値化処理
これまで何度も、「なでしこ掲示板」で、様々な方から、わからないところを教えていただきました。
自分も人に教えたい！という思いから、 今回はじめてアドベントカレンダーに参加させていただきました。
なでしこ２０周年おめでとうございます✨️
この文化祭から約１年。
いま私は、短編アニメ『よるにはやむよ』を作っています。
これを、自分の開発している「レイヤー型ノーコードシステム」というツールを使って制作できればと思っています。
↑『よるにはやむよ』の教室シーンの背景。Googleスライドで作成。
あと部活で、ホームページ立ち上げプロジェクトに参加し、やっと完成しました。
よかったら見てください↓↓
ではまた。