HTMLについて （第1回）
皆さんこんばんは！
今日はHTMLについて少し学習をしました。
HTML。簡単です。
実に簡単です。
これは、ただの英語と<>これの組み合わせです。
Udemyの講座を見ながらちょろっと書いたHTMLを載せます。
ここはウェブ勉強のためのテストページです
もめとかめの違いについて
| かめちゃん | もめちゃん |
|---|---|
| かわいい | 美少女 |
| てんさい | 賢い |
| VRビール先生 | ただの美少女 |
これのHTMLコードはこちら
JavaScriptの関数について その2
こんばんは
今日はprogateのJavaScriptを配列前までやったのですがいまいち理解できていないので
少し前に戻ってもう一度チュートリアルを繰り返しています。
関数 function()とアロー関数について
まず、関数についてです。
関数といわれてExcelでよく使ってる関数を思い浮かべたのですが、チュートリアルをやっていると何やら普段の使い方と違った使い方をしています。
例えば、
「こけし」「あかべこ」「しゃけ」
この三つの単語を3回出力したいとなったときに何も知らないで手入力しようとすると
console.log"こけし";
console.log"あかべこ";
console.log"しゃけ";
これを10回繰り返すことになります。
JavaScriptの関数をうまく利用できると
const akabeko = function(){ //akabekoに関数を代入
console.log"こけし";
console.log"あかべこ";
console.log"しゃけ";
};
for(i=0; i<10;i++){ //for文で10回繰り返す処理
akabeko(); //関数の呼び出し
}
出力結果
あかべこ
しゃけ
こけし.....10回続く
上の文を書くだけでfor内の数字を変えれば
10回でも100回でも10,000回でも勝手に繰り返してくれます。
1行目の
const akabeko = function(){
の部分ですが、
const akabeko ()=>{
と略すことも可能です。
これはES6っていうバージョンから対応した書き方らしいです。
引数について
引数を受け取る関数を利用することによって
下記のような処理も可能です
引数？？ うぃきぺでぃあには「その外部と値をやりとりするための特別な変数」と書いてありますがいまいち意味が理解できません。
そこでgoogle先生で調べてみるとなんとなくわかってきました。
たとえで説明するとわかりやすいと思うので例えてみます。
例）
イベントで参加者は3枚の色紙を用意して下さい
この時の必要な色紙の枚数を計算するには
f(x)=3x
上のｘがここで言う引数となります。
実際にコードを書いてみます。
const event = (card) => {
console.log(`必要な色紙の枚数は${card * 3}枚です`);
};
event (5);
結果を見ると
「必要な色紙の枚数は15枚です」
と表示されました。 成功です！
また、引数はいくつか指定してあげることが可能です。
その際は
const event = (card,name) => {
console.log(`${name}必要な色紙の枚数は、${card * 3}です`);
};
event (5,"オフ会で");
結果を見ると
「オフ会で必要な色紙の枚数は15枚です」
と表示されました。
最初に引数名を入れるところにカンマで区切って入れて
最後予備さす際にカンマで区切ったデータを入れればその順番通りに出力されます。
もう少し勉強したことがあったのですが、今日は時間も遅いのでそろそろお家へ帰ります。
ここまで読んでいただきありがとうございます。
ps.最近ラーメンばかり食べているせいか寝つきが悪いです。
明日から少し健康的な食事を心がけます。
JavaScriptについて(初回）
今日はJavaScriptを少しやってます。
Qiitaを見てると何やらExcelがJavaScriptでいじれるらしいではないですか。
これはルーティーン的な仕事のExcel作業をすべて自動化してその時間を有効に使えるのではないか？と考えました。
さらにJavaScriptが使えるようになればweb系への道も開けるのではないか！？
実際いじってみるとＣ＃とあまり変わらないような気がしました。
まだ始めたばかりなので今後どうなるかはわからないですが
Progateの有料会員にもなったのでしっかりとやっていきます。
ホームページ全盛期時代にホームページ作成とかはやっていたことがあるので
JavaScriptができるようになったら今度はウェブアプリケーションとかも作ってみたいなと思っています。
JavaScript でfor文をいじってたのですが
for (i = 0 ; i<cafe.menus.length ; i++){
console.log(cafe.menus[i]);
これ、なんか変だと思いませんか？
そう、iの方が定義されていません。
しかしコンソールログにはしっかりと結果が出力されました。
怖すぎます。JavaScript・・・少しテキトウでも結果が出力されるなんて。
あと面白かったのがlet とvarについて
C#の時はvarを使ったことが何度かありましたがJavaScriptを始めてletが出てきたのでなんだ？？？と思って調べてみると
letは｛｝内にだけ影響するとあってびっくりしました
例えば
if(true)
{
let kame = 2
}
console.log(kame)
とするとエラーが出てきます。
これは｛｝内でkameを出力しようとしてないかららしいです。
続きはまた明日。
ここまで読んでいただきありがとうございます。
ps.最近趣味で撮影してた写真を現像したのですが、印刷した写真を見ると自分の未熟さに頑張らなきゃなと思います。
印刷した写真はモニターで見る10倍素晴らしくて100倍荒が目立ちます。
今日の進捗（unity)
こんばんは。
今日はUnityを少しいじってキャラクターを動かしてみるっていうことをやってみました。
今日は金曜日に少し話をした
キャラクターのシューティングゲームを少しだけ作ろうとしてみました
（結局挫折）
途中こんなことになりつつ
ひぎゃあああああ pic.twitter.com/NTbn4VmqHJ
— 🐦もめちゃん先生🍥🐢 (@vrchatkame) 2019年4月21日
今日は３D空間で前後飲み動けるように設定
if (Input.GetKey("up")){
transform.position += transform.forward * 0.05f;}
なんとこのコードだけで上方向キーを押すとキャラクターが前に進むようになります。
upをdownに変えるとした方向、進む力を-0.05ｆにしてあげると後ろに進みます。
あとは、アニメーション（is_running）で走るアニメーションを設定
上のif文に
animator.SetBool("is_running", true);
と加えると上方向キーで走るアニメーションが再生されます！
本当は左側に走る設定とかその他もろもろやりたかったのですが
なんか難しかったのでコード構想だけコメントに書いてまた今度やります。
まぁ、今回のゲームは前後移動しかないので使いませんが。
必要なのは前後移動だけなのでとりあえずはこんな感じ
— 🐦もめちゃん先生🍥🐢 (@vrchatkame) 2019年4月21日
３Dに移動するUnityちゃんゲームはこれが終わったら pic.twitter.com/CHBpTDYfMx
最終的にはこんな感じで
あとは上下に動かせる魔法の球みたいなのを追加して
魔法を射出、相手の近くに落ちたら地面がえぐれるようにしたいです。
ここまで読んでいただきありがとうございます。
paiza C#チュートリアル終了！ 今日からＵｎｉｔｙ
今日は何んと、PaizaC#入門講座が終わりました！！！！
まあ、そんなに理解はしていませんが、C#とは何？ みたいな部分はわかった気がします。
そして！今日からUnityを始めます👏
まずは1度やったことのあるUnityちゃんのUdemy講座
転がるミニゲームを作るやつです。
今日はとりあえずUnity2019をノートPCにインストール、SDUnityちゃんのモデルデータなどが入ったサンプルアセットをUdemyからもらってきます。
解凍して、Projectフォルダにポンっ！
低スペックノートPCを使ってるので、インポートに15分くらいかかりました。
まずは、Planeの板と球を用意（板は床、球はプレイヤー）
球にPlayerと名前を付け、板の上に持ってきたらAddComponetからNewScriptでスクリプトを追加します。
まずは、急を物理的に動かしてあげたいので
Classの下に
Rigidbody 型の変数rbを宣言
Rigidbodyは対象のオブジェクトに物理的な法則を与えてあげる感じのものです。
スタート時に1度だけRigidbodyをPlayerに取得すればいいので
Void Startの下に
rb = GetComponent<Rigidbody>();
と入力してrbにRigidbodyをゲットしてもらいます。
次は動く部分の処理
今度は動く処理なので1度だけの実行では困ります。
1フレーム分だけ動いてあとは実行されないのではゲームになりません。
そこで、1秒間に何度も処理を繰り返すVoid Updateの下に動く処理を書いていきます。
var moveH = Input.GetAxis("Horizontal");
var moveV = Input.GetAxis("Vertical");
Vector3 move = new Vector3(moveH,0, moveV);
rb.AddForce(move);
チュートリアルではfloat形で指定していたけど面倒なのでvarにしています。
floatの方がいいのかな？(まだ理解していないのでいったん置いておきます)
まずは、moveHを水平方向に動くときの変数とします。moveVは垂直方向に動くときの変数。
Input.GetAxis()は方向キーを入力したときに-1~1の数値を返すことができるようになります。
これで、キーを入力したときに-1~1で値を返す変数が2つできました。
この2つの変数を3次元座標でどこに使うか指定してあげる必要があります。
そこで、Vector3 という型
これは3次元座標での位置とかそんな感じの値をいじるときに使うらしい。
moveというVector3型の変数を定義したら
new Vector3(moveH,0, moveV);
moveH とmoveVを水平と垂直の座標に入れてあげます。
そして最後にPlayerのRigidbody（rb）にAddForceで力を入れてあげます。
このとき、AddForce（）の中身はさっき作ってあげた変数moveを入れてあげます。
rb.AddForce(move);とすると方向キーを押してる間3次元座標の水平と垂直方向に-1~1の力が加わるようになりました。
忘れてはいけない、球にAddComponentでリジッドボディを追加！
そして実行すると球がくるくる回りました！
今日はここまでです！
作っている間はうろ覚えでしたが、こうやってアウトプットをするとぐっと理解が深まります。
あと、モチベーションも上がります。
明日はＶＲＣ大規模オフ会の事前打ち合わせとかがあるのでブログを更新できるかはわかりませんが、少しでも進捗があったら更新をしたいと思います。
ここまで読んでいただきありがとうございます。
ps.ゴールデンウィークの予定が全くないので一日中unityいじってようかなって思ってます。
ちなみに講座はこちら
無料なので皆さんもやってみてください。
私がいいままで見たチュートリアルで一番わかりやすいうえにボイスロイド（弦巻マキ）の調声が神がかってます。
多次元配列の基礎について
こんばんは。
今日は二回目の更新です。
今日勉強したことを理解度チェックの意味でアウトプットします。
正直誰かに見てもらうような文章ではないのであしからず。
お昼に引き続き、配列の基礎についてやってます。
今回の内容は、2段以上の配列を出力する！！
えぇ、正直訳が分かりませんでした。
1つ目の
かめ モメ
あおば はるな
親方 師匠 この三つを出力する処理は何んとなーくこんな感じかなって考えながら出力
まずはこれ、多次元の配列を作るときは←これを2つ横に並べます
で、new 型 {配列} で配列を作る。
string array = {
new string {"かめ", "モメ"},
new string {"あおば", "はるな"},
new string[] {"親方", "師匠"}
};
ここまでは何も考えずに理解ができます。
しかし、問題はこの次の繰り返し処理部分
なんか急に複雑になってきた気がします。
for(int i=0 ; i < array.Length; i++ ){
for(int j=0; j< array[i].Length;j++){
Console.Write(array[i][j] +" ");
1つ目のfor文でarray[ i ][ j ]の左側iを配列の数だけ繰り返し処理
2つ目のfor文でｊの処理。
この認識で会ってるのかわかりませんが、いつか詳しい人に聞いてみたいと思います。
正直配列の基礎の部分がまだ理解できていないので、この辺はたくさん書いてみて身体で覚えることにします。
2つ目はpaizaの演習問題にあったので理解しようと何回かコードを書き写しましたが
結局よくわからずじまいです。
for (int i =0; i < mat.Length;i++)
{
for(int j =0; j < mat[i].Length;j++)
{
mat[i][j] = i * 10 + j;
この部分が何を処理しているのかわかっていません。
これは、勉強あるのみですね。
for とかwhileとか if とかあんまり使ってなかったので忘れてきています。
土曜日くらいにはpaizaで今週やったことを全て復習ができればなって思ってます。
今日はこのあたりで。
ここまで読んでいただきありがとうございます。
ps.最近メイプルストーリーMをもみじ鯖でずっとやっています。
やってる方いたら「もめ」にフレ録送ってもらえると嬉しいです✨
配列の基本 Split 型変換のスキルチェックを行いました
会社のお昼休み
インターネットに転がっていたスキルチェックを自分で少し変えて
プチテストを行いました。
問題はinput欄に入力されているスペース区切りの配列a cを
それぞれ５乗して、その合計値を出力するというもの。
input欄には 3 4 （a c) を入力
インターネットで調べながらなんとか完成
そのまま出そうとしたらstringは＾が使えないよ！と出てきたり
まとめてdoubleに直そうと思ったらなぜかできなかったり。
ポチポチとコンパイルエラーを潰して何とか結果が出力されるようになりました！
結果は 1267 →計算をするのが面倒なのでしてませんが多分あってる
出来る人から見たら相当ひどいコードになっているとは思いますが、ひとまず求めていた数値を導き出す事が出来たので今回はかろうじて合格という事にします。
自分でも特にひどいと思うのがココ！
double x = double.Parse(sp[0]) ;
double y = double.Parse(sp[1]) ;
折角いろいろと楽をする為にプログラミングがあるのにこんなことを一つ一つ型変換するなんて本末転倒ではないか？と思うが、今の自分はこれしかやり方が判らない。
とりあえずやり方が判る方法で実装しました。
昨日勉強をしたSplitについて少しだけ理解が深まった？気がしました。
３行くらいに纏められるんじゃないか？と思いますがそれはまた今度、少し理解を深めてからやってみようと思います。
ここまで読んでいただき有難う御座います。
ps.最近シャンプーを良く買えるのですが、乾燥肌であんまり肌に合うシャンプーがありません。 おすすめが有ったら教えてください！
（ドラッグストアにあるボタニカルとかのやつは殆ど試してます）
