AIでバイブコーディングしてみる

この投稿をInstagramで見る

なのはなパソコン教室(@nanohana_pc)がシェアした投稿

ホームページ制作入門～ 画像とディレクトリ

ホームページ作成講座の動画を追加しました。

今回は画像の表示とそれに必要なディレクトリ・相対パスの説明です。

HTMLの学習で一番ややこしいところでもあるので、上手くまとめられたかやや心配ではあります。

今までの動画はこちらです。

HTML入門動画 見出しと区切り 追加

少し時間が空きましたが、HTML/CSS入門動画を追加しました。
今回は見出しと区切りを用いて文書構造を作る手法です。
特に見出しには色々ルールがありますので、注意が必要です。

以前の動画は以下のリストにまとめてあります。

HTML入門

ホームページ作成講座 動画追加しました

動画講座3本目を公開しました。
今回は文字の表示に関する記述です。

HTML/CSS入門講座「HTMLの構造」公開しました

動画で解説するHTML/CSSの入門講座を追加しました。
今回はHTMLの基本記述とHTMLファイルの作成に関する内容です。

今回からスクリーンキャプチャによる操作例が入っています。

次回は文字の表示に関する内容の予定です。

HTML/CSS入門講座「HTMLの文法」公開開始します

一昨年から制作していたビデオ講座「HTML/CSS入門講座」を無償公開いたします。

これはとある理由で制作していた初心者向けのホームページ制作講座ビデオなのですが、色々ありましてお流れになっていたので、随時作り直して公開して行こうというものです。

内容的には全くHTML/CSSというホームページ制作用の言語を知らなくても、簡単な静的なWEBサイトを作る事が出来るようになるのを目標としています。

そういう意味では現場メソッド的なものではありません。

今回は概論的なパートを公開しますが、随時公開可能になったものからアップロードしていきます。

仕事が比較的余裕のあるこの時期に全てアップしようと思ったのですが、新年度の出講対応などで全部は難しいかも知れませんので、少しずつになるのをご了承ください。

教室の方でもHTML/CSSは対応いたしますので、お気軽にお問い合わせください。

Photoshopの新機能

写真などの画像処理の代表的ソフト「Adobe Photoshop」の最新版「CC2018」に面白い機能が追加されているのでご紹介。

• 何か被写体がハッキリしている写真画像を開きます。
• 選択範囲メニューから「被写体を選択」をクリックします。
• 少し時間がかかるかも知れませんが、自動的に「被写体のみを選択」してくれます。

今までは同様の作業をする際には「自動選択」や「クイック選択」「色域指定」のような「同じ色を選択する」機能や「マグネット選択」のような「輪郭を抽出する」機能、または「クイックマスク」のようにマスク機能を用いた手法が一般的でした。
ですが、この「被写体選択」は画像を解析して「被写体」と「背景」に区別し、被写体の輪郭を検出するというようなやり方のように思います。

被写体選択で出来た選択範囲からマスクを作成して鳥だけを表示させました。

AdobeはAIを用いた機能を随時取り入れて行くようで、これもその一つかと思われます。
次期バージョンではこちらの色調補正のくせを学習して、自動的に画像の補正をしてくれるようになって行くのかも知れません。

その他、マスク機能もかなり強化されていて、マスクの詳細な設定が可能になっています。

レイヤーマスクサムネールをダブルクリックして属性パネルを表示した状態。

この時点でもマスクの調整が可能。

「選択とマスク」のボタンをクリックした状態。

属性パネルの時よりもマスク範囲の増減やコントラスト調整など細かな設定が可能。

選択機能にもう一つ「焦点距離による選択」が出来るようになっています。

以前からあった「色域指定」に似ていますが、被写体を検出後、その被写体に対しどこまで焦点を合わせるかの範囲で選択をするという面白い機能です。

あくまでも選択の機能なのでこれだけで何か出来るという訳ではありませんが、Photoshopの操作の難しい所をかなりカバーしてくれるものであると、個人的にはバージョン3.0での「レイヤーの登場」以来の出来事かと思っていたりもします。

Sketchware

5月も半ばを過ぎまして、来月のスケジュールがほぼ決まってきましたのでホームページの開講スケジュールを更新してあります。
ご確認ください。
平日のレッスン可能日が減っております。
お気をつけください。

5月は平日の空きが多かったので、Android用のアプリ「Sketchware」のチュートリアルを触っておりました。
このアプリはAndroidのアプリを作るアプリで、Scratchに似たブロックによるプログラミングとパーツのドラッグ&ドロップでのインターフェース作成が出来るというものです。
プロジェクトという単位でプログラムを構築して、アプリファイルを作成、端末にインストールして動かす事が出来ます。

本格的なプログラミングがどこまで出来るかは未知数ですが、ちょっとしたアプリが欲しくなったら、自分で作れるようになるかも知れません。

Scratchでコンピュータグラフィックス：円を描く

Scratchでコンピュータグラフィックス

・第1回
・第2回
・第3回

回転で円を描く

グラフィック機能を持ったプログラム言語、例えばMSX BASICでは直線以外に点・円・四角形・塗りつぶしのある図形などがPOINT・CIRCLEなどの命令文で描く事が出来ました。

ですが、Scratchにはそのような命令を行うブロックがありません。

Scratchでは直線的な座標の移動による描画は可能ですが曲線の様な形状はそのままでは描画できないのです。

では、出来なければ「工夫をしてみる」という方針で、何とかして「円の様な形状」を描いてみたいと思います。

角の多い「多角形」を考えてみる

多角形と言えば三角を始めとして頂点が増えていく角の多い図形ですね。

五角形とか六角形とか容易にイメージできると思いますが、例えば10角形とか20角形とかどんな形になるでしょうか？



因みに上の多角形は10角形です。
どうでしょう、円に近いように思いませんか？

という事は、移動しながら角度を変更して回転すれば多角形の描画が出来るという事になり、その角が多ければ円のように見えるという事が考えられます。

これであれば、今まで使ったブロックにちょっと付け足せば出来そうです。

では、やってみましょう。

回転する

Scratchの回転動作を指定するブロックは2つあります。



「動き」の中にあり、上が時計回り、下が反時計回りになります。
両方とも回転角度を指定すればキャラクタの進行方向が曲がって行きます。

円の一周は360度ですので10角形なら10分の1の36度を10回、20角形なら20分の1の18度を20回、キャラクタに回転を指定すれば出来そうです。

つまり、

・プログラムをスタート
・描画を開始（ペンの準備）
・繰り返し回数の指定
　・頂点から頂点の移動距離の指定
　・角度の変更
・繰り返しが終わったらプログラムを停止

...という順番を組めば良いのではないのでしょうか？

では、実際に組んでみましょう。

まず開始のイベントとペンの指定をします。



次に繰り返しの指定をします。
これは前回使いましたね。



繰り返しが終わればプログラムを停止しますので、上記のようにしておきます。
先ずは繰り返し回数を10回でやってみます。

では、次に移動を指定します。ここでは最初に使った「・・・歩動かす」を使いましょう。



これだと、30歩の移動を10回繰り返し300歩分の直線を描く事になります。

では、30歩ごとに進行方向の角度を変更しましょう。
先ほどの回転のブロックを挿入します。



今回は36度の時計回り回転を10回繰り返して360度の一回転になるように設定しました。

出来上がったら実行します。



10角形がちゃんと描けましたね。

では、数値を変えてみます。



繰り返し回数を20回、回転角度を半分の18度に変えました。



先ほどよりも大きな20角形が描けましたね。
移動距離が同じ30歩なので角度が小さい分、大周りになりました。

数値を変えると色々な形が考えられそうです、例えば最初の10角形と同じ大きさの20角形を描くならこう出来そうですね。





歩数を半分にすると、かなり円に近い形になりました。

繰り返し回数、移動歩数、回転角度の関係を変える事で、例えば、「大きな10角形」「半円」なども描けそうです。





どうすれば可能か、色々試してみてください。

Scratchでコンピュータグラフィックス・繰り返しと乱数

Scratchでコンピュータグラフィックス

・前回までの内容

　・第1回

　・第2回

繰り返しと乱数

昔話から始めますが、その昔、初めて買ったパソコンは国産機のMSX1パソコンでした。

MSXパソコンにはMSX BASICというプログラム言語が今でいうOSのような役割を持っており、パソコンを使うという事はBASIC言語を覚えるという事に他なりませんでした。

そんな時によく遊びでやっていたのが「POINT文で星空を描く」という単純なブログラムでした。

単純なのですが、乱数で描かれるドットが意外にもきれいで、更に毎回結果が異なるのも面白かったです。

Scratchにはドットを打つという構文は無いのですが、色々工夫して同じようなグラフィックを作ってみようと思います。

まず、以下のようにブロックを作ります。

新しいブロックとしては「スクリプト」の「制御」にある「・・・回繰り返す」です。

これは指定した回数その内側に入れ子になったブロックの内容を繰り返すというものです。

今回は500回繰り返した後、全てのプログラムを停止するように指定しました。

さらに繰り返しの中身を作っていきます。

いきなり今まで見たこともいないようなブロックがありますが、構造は簡単です。

先ず、前回使ったxとｙの座標を指定するブロックを繰り返しの内側にはめ込みます。

そして前回は座標として直接数字を入れていたのですが、今回は「スクリプト」の「演算」の項目から「・・・から・・・までの乱数」をそれぞれx,yの項目にはめ込みます。

これは、指定した範囲の乱数、ある意味不連続なでたらめな並びの数を発生させるブロックです。

今回はｘを-240～240に、ｙを-180～180にしています。

これはステージが中心から上下左右に増減して、端までの座標を範囲で示しているものです。

（例えば左上はx=-240,y=180となる訳です）

このスクリプトを実行するとキャラクタがステージ上の様々な位置に500回表示されて止まります。

キャラクタの位置を指定出来たら、描画の準備をします。

いつも通りペンを下して太さを指定しますが、ここにも新しいブロックを追加しています。

「ペンの色を・・・ずつ変える」です。

これは実行するたびにペンの色が変化していきます。値を大きくすると変化の幅が大きくなります。

では、描画をするブロックを追加します。

ここで変わっているのは、最初に使った「・・・歩動かす」の値を1にしているところです。

1歩動くとすると1ドットの点を描画してくれるのです。

ここまでの構造をおさらいすると、

・プログラム開始

・ある内容を500回繰り返す

　・内容はまず乱数でキャラクタの位置を指定する

　・描画の準備をしてペンを下す

　・1歩だけ動かして点を描く

　・ペンを上げて描画をやめる

・500回繰り返しが終われば全てを停止する

...という風になります。

では、最後にせっかくなので背景を黒にして夜空にしましょう。

中央の「スクリプト」のタブの隣にある「背景」をクリックすると、背景画像の描画になります。

左側の道具の中から「バケツ」を選んで、画面下側のカラーパレットから黒を選んでステージをクリックすると黒で塗りつぶされます。

これで背景色の指定が出来ました。

では、実行してみましょう。

目まぐるしくキャラクタが画面上を動き回り、その後に無数の色とりどりのドットが描かれるはずです。

今回は、座標を演算を繰り返す形で指定しました。

プログラムによる描画では様々な演算を用いて思いもよらない画像を作る事が出来るのです。

Scratchでコンピュータグラフィックス：四角を描く（座標を使う）

Scratchでコンピュータグラフィックス

・前回の内容

四角を描く（座標を使う）

前回、線を引くという事はできましたので、今回は図形を描いてみましょう。

描くのは単純な形状である四角形です。

このような形を描くためには何が必要でしょうか？

四角形を作っているのは4つの直線と4つの頂点ですね。

前回やったように線は「移動の軌跡」として描かれるので、敢えて指定してあげなければいけないのは「頂点の位置」になります。

今回は四角形の4つの頂点の「座標」を指定して描いてみましょう。

先ずはブロックを以下のように配置します。

新しいブロックは「動き」の「x座標を・・・にする」と「y座標を・・・にする」の二つです。

これは何をしているのかというと、プログラムを実行した際に、キャラクターを水平軸0の位置で垂直軸0の位置に移動させるという内容です。

算数のグラフで横・水平軸をX、縦・垂直軸をYとして「x=1,y=2」とか方眼紙で位置を取って折れ線グラフとか描いたのを覚えていますでしょうか？

という事はこれを実行するとx=0,y=0の「原点」にキャラクターを移動させる事ができます。

で、実際に動かしてみて分かると思いますが、キャラクタはステージの中央に表示されると思います。

Scratchでは原点の位置はステージの中央になります。

では次にペンの指定を行います。

先ずペンを下して描画状態にします。そしてペンの色を緑色にして、太さを目立つように10としてみました。これは前回のペンの操作と同じです。

更にこうつなげます。

スクリプトの「動き」から「x座標を・・・、y座標を・・・にする」を配置します。

これは先程のxとy座標を指定するブロックを一つにまとめたものです。（ですので、先程の記述にこれを使っても構いません）

するとこのようになります。

キャラクタが右の方に動いて線が描かれました。

y軸は0のままですがx軸は100増加しています。

この線はx=0からx=100の座標に水平に描かれた事になります。

更に続けます。

先程と同じブロックを追加してx座標を100、y座標を100に指定します。

実行するとこうなります。

キャラクタが垂直に上に移動しました。

直前のブロックでx=100になっていますので、水平位置100のまま動きません。

y=100に指定されましたので先程指定したy=0からy=100までの直線を描いた事になります。

更にこう続けます。

座標変更のブロックを二つ追加しました。

直前まででx=100,y=100の位置に移動していますので、3つ目のブロックでy軸はそのままでx軸を0に戻しています。という事はx=100からx=0の水平線が描かれる事になり、更に4つ目のブロックで最初の原点x=0,y=0に戻っていますので、y=100からy=0の垂直線が描かれます。

その後の処理は前回と同じです。

実行するとこうなります。

キャラクタが原点に戻り四角形が描かれました。

キャラクタをドラッグで少し移動させると最初の図のように四角形がちゃんとできているのが確認できるはずです。

このように形の頂点の座標の分だけブロックで水平・垂直軸を指定すれば色々な図形が描けるのが分かりますね。

色々試してみましょう。

更にここまでで分かる事にx軸に正の数を入れると原点より右に移動する、そしてy軸に正の数を入れると原点より上に移動するという事がありますね。

では、それぞれに「負の数」を入れるとどうなるでしょうか？

これも実際にやって確認してみてください。先程と反対の位置に四角が描かれるはずです。

Scratchでコンピュータグラフィックス01

Scratchでコンピュータグラフィックス

最近何かと話題のプログラミングツール「Scratch」。

簡単に子供でもプログラムが出来るという事で注目され、現在では外部に接続したロボットなどのマイコンプログラムも出来るようになったりと話題ですが、今回はもっと簡単な内容で「Scratch」を用いた「アルゴリズムを用いたコンピュータグラフィックス」をレクチャーしてみたいと思います。

Scratchの画面（Ver.2）

Scratchは様々な命令が記述されたブロックを組み合わせるような形でプログラミングをするソフトです。

画面右側がプログラムを記述する部分ですが、色々な色のブロックを組み合わせたものがあります。これがプログラム構文です。

様々な命令文は中央に並んでおり、ここから必要な物を右へドラッグしてくっ付けて行きます。

プログラムの結果は左の猫のイラストのある画面で表示されます。

今回はこの猫のイラストにプログラムで様々な命令をして動かしてみたいと思います。

線を描く

実際に画面上に線を引くプログラムを書いてみましょう。

まずは中央の「スクリプト」のところで「イベント」の項目を項目をクリックします。

下に表示されたブロックの中から「緑の旗がクリックされたとき」をマウスでドラッグして右の枠内に置きます。

これは左側のキャラクターが置かれている画面（ステージと言います）の右上にある緑の旗のマークを押すと、これ以下に接続される命令を実行するという「イベント」を表します。

では、画面に絵を描きますので、「スクリプト」の「ペン」から「ペンを下す」というブロックをドラッグして先ほどのブロックの下にくっ付けます。

そうすると、旗のマークがクリックされると絵を描くためにペンを用意するという一連の動作がプログラムできました。

このように「AをすればBをする」というような関係性を構築して行くのです。

では、更にペンの設定、つまり「どのようなペンを使うのか」を指定して行きます。

「スクリプト」の「ペン」から更に以下のように追加します。

「ペンの色を・・・にする」は描画色を選ぶ事ができます。

間の四角の部分をクリックすると、マウスポインタの先にある色をクリックで取る事ができます。（今回は「スクリプト」の「その他」をクリックしました。）

「ペンの太さを・・・にする」はペン先の太さの設定ができます。

数字を変更すれば太くも細くもできます。

更にこのように続けます。

「スクリプト」から「動き」の項目の中の「・・・歩動かす」を追加します。

これは、線を引くとき手にペンを持って「動かす」ようにペン先を移動させてその軌跡を描画するために追加します。

このスクリプトは初期状態ではステージ上の猫のキャラクタに記述されていますので、実行すると猫が現在位置から10歩移動して、その後に線が描かれるという事になります。

最後に以下のように続けます。

「スクリプト」の「制御」の項から「すべてを止める」と指定します。

これで一連の動作を終了して、プログラムを停止する事ができます。

この時にプログラムは終了するのですが、キャラクタの位置は実行後のままですので、繰り返して緑の旗をクリックすると、どんどん右の方向へキャラクタが移動してその後に線が描画されるのが確認できるはずです。

このように「どのような手順で結果を導き出すのか」という事を何らかの形にしたものを「アルゴリズム」と言い、Scratchではブロックの重ね方でその「手順」を作成して行くのです。

簡単プログラム07～ペイントの使い方

Scratchの解説7回目です。
過去に公開していたPDFのマニュアルはこれが最後でした。

ちなみに...

「スクラッチ「かんたん」プログラミング体験講座」を今週から随時開催して行くのですが、今週分は申し込みが無かったため中止いたします。（明後日8/7（水）の駆け込みであれば明日中に連絡頂ければなんとか対応いたします）

8月の開催予定はお盆明けからになります。詳しくはホームページ、またはブログをご参照下さい。

是非ご参加下さい。申込お待ちしております。

---

＊今までのまとめはこちら。

・ ペイントの使い方

付属のペイント画面を使って自分の絵で2 フレームアニメーションを作ってみよう。

プログラムが動作する画面を｢ステージ｣といいます。このステージの下に3 つのボタンがあります。この中の左端「新しいスプライトを描く」をクリックしてください。

上のようなウィンドウが開きます。この「ペイントエディタ」を使う事でオリジナルのキャラクタを作成する事ができます。

では、筆のアイコンをクリックして右側の画面に簡単な絵を書いてみましょう。

描画が終わったら、右下の「OK」ボタンを押します。

スプライトが新しく登録されたのが確認できます。

コスチュームのタブをクリックしてみましょう。
描いた絵は「コスチューム１」という形で｢スプライト１に登録｣されています。

更にアニメーション用に絵を追加していきます。

「コスチューム１」の項目の「コピー」のボタンをクリックしてください。
同じ絵が「コスチューム2」として追加されました。
さらに、「コスチューム2」の「編集」ボタンを押します。

先程と同じペイントエディタが表示されますが、コピーした画像がすでに表示されています。
この画像を元に少し形を変えた絵を描いてみましょう。

描き終わったら、先程と同じように「OK」ボタンを押します。
「コスチューム2｣が変更した絵になっているのを確認してください。

最後に「スプライト1」に以下のプログラムを組み立ててみてください。

プログラムを起動すると、スペースキーを押すたびに絵柄を変えてキャラが右へ動くのが確認できると思います。


＊このサンプルではスペースキーではなくカーソルキーで左右に移動しながらコスチュームの変更を行うようになっております。

簡単プログラム06～衝突を判定させる（2）

Scratchの解説6回目です。

ちなみに...

Scratchは来月予定している「スクラッチ「かんたん」プログラミング体験講座」でまた別の内容でレクチャーする予定です。

是非ご参加下さい。申込お待ちしております。

相談会で同時に豆本の展示・製作体験しております妻の人もScratch2.0を最近触っておりまして、ブログでも紹介しております。

・手芸カフェのこびとさん

初めてのプログラム経験について書いていますので、ぜひご覧ください。

---

＊今までのまとめはこちら。

・ 衝突を判定させる（２）

衝突の判定を応用して、キャラクタが物を取るという動作をさせてみましょう。

まず、画面上にバナナの絵をスプライトとして配置します。
次の画像のように少し離して横に並べてください。

スプライト1 に先程の衝突判定と同じ内容のプログラムを組み立てます。

「もし～なら」の結果として「～と言う」を挿入します。

空欄に「いただきます」と入力します。すると、キャラクタがバナナに触れたとき、「いただきます」と噴出しで話します。

この状態だと、台詞を表示するものの、バナナは画面上にそのまま残っています。

バナナを取ったという動作の為には、バナナに触れた後、バナナが画面から無くなると良いので、さらにバナナを消すプログラムを組み立てます。

今回は「プログラムが動作しているときにキャラクタがバナナに触れたら、バナナ(スプライト2)を画面上から消す」という方法でやってみましょう。

プログラム全体が動作している時に動くプログラムなので、スプライト2 に「旗がクリックされたとき」のブロックを置き、｢見た目｣の項目から「表示する」のブロックを探して配置します。

これで、プログラムを起動すると必ずバナナが画面に表示されるようになります。ただ、現在は消していませんので、見た目には変化はありません。

では、ここにバナナが消える条件を配置してみましょう。

「もし～なら、ずっと」というブロックを探して、下の図のように配置してみてください。

これは、ある条件を満たした場合、プログラムが終わるまでずっと命令を継続するというブロックです。

では、条件と命令を追加してみましょう。

これで、キャラクタがバナナに触れると「いただきます」といって、バナナを取るというプログラムが出来ました。