Canvas初心者が雪を降らせてみた
おはようございます😊まおです！
今週はいつもと違って、ただの画面を作りました！！ｗ
ずっと使ってみたいと思っていたCanvas APIを使ってみました！！
いいから早く画面とソースだけよこせってこともあると思うのでこちらです💁♀️ｗ↓↓
雪が降る画面
■全画面はこちら
https://tonamao.github.io/Snow/
■コードはこちら
See the Pen Snow by tonamao (@tonamao) on CodePen.
Canvas API
Canvas API画面に図形を描画できる機能です。
Canvas APIってのは俗称なのかな～🤔
言語としては、HTMLとJavaScriptを使います。
HTMLのcanvasタグをJavaScriptで操作していく感じです。
詳細は↓↓↓のURLとかとても参考になりました！（多分非公式ですが...）
http://www.html5.jp/canvas/ref.html
たいぶ見切り発車で作りましたが、なんとか一週間でできてよかったです！！
冬ということにちなんでの「雪」でしたが、ギリですかね...ｗ
これで少しはCanvas APIに慣れたかな～
下記、今回の実装のポイントだけ簡単に書きました。
Canvasの縦横比率がおかしい
ここにアプリを載せるとき、スタイルの設定を分業させていて
別途CSSファイルを作ってました。
今回も同様にCSSファイルを別途作成してました。
そこで試しに正方形を描画してみたところ...
縦長の長方形になってしまいました...！！！
原因はcanvasのwidthとheightの設定にあるんだとか...！？
styleのwidth、heightではなく、属性のwidth、heightで設定しなければならない！
？？？
笑
まあ、下記を見てください。
■styleで設定
<canvas style="width: 500px; height: 500px;"></canvas>
■属性で設定
<canvas width="500px" height="500px"></canvas>
後者の属性で指定してあげないと、canvas自体のサイズを変更することはできないようでした。
属性とスタイルって違いがあったのか～(;'∀')ｗ
JavaScriptのclassを使ってみた
JavaScriptの知識はほぼ皆無です、すみません(-_-;)。。
今回「雪」を作るのに、一粒一粒の設定を行っているわけですが、
こいつらをクラスみたいに持てないのかな～と思って調べていたところ
JavaScriptにclassってないイメージでしたが、2015年頃に追加されてたみたいですね～（いつの話...w
■class定義
class Snow {};
こんな感じで書けます。
■コンストラクタ
class Snow {
constructor(){};
};
使うときはnewすればOK！
■classを使う
new Snow();
今回のコードも見様見真似、調べた知識をもとにclassを使って実装しております！
こんな感じで使えばいいのかな～
勉強になりました。
おまけ～NG集～
作成段階でミスったやつを載せてみますｗ
■雪が伸びていく...
■雪が消えていく...
ちなみにjQueryで一発で雪を降らせるプラグインがあるんだとか...(; ^ ｰ^)
以上ですｗｗｗ
第4弾Webアプリケーションの公開
おはようございます😊まおです！
今週はStop Watchを作って公開してみました。
今回の成果
◼︎Stop Watch
https://tonamao.github.io/StopWatch/
今回もドットインストールにあるやつです🙋♀️
そろそろ自分でも何か作ってみたいな〜
◼︎ JavaScriptでストップウォッチを作ろう
https://dotinstall.com/lessons/stop_watch_js_v4
今回作ったアプリのポイントを書いてみました！
ボタンを切り替えにする
ストップウォッチのスタートとストップボタンの話です。
スタートとストップの「ボタンの役割」を考えてみました！
この２つのボタンって、交互にしか必要にならないボタンですよね！
スタートしたら次はストップなわけなので。
◼︎元のボタン
StartとStop、そしてResetのボタンが３つ並んでますね～
◼︎作ったボタン
ボタンは２つしかなく、押すと切り替わります。
ちなみにですが...
◼︎iPhoneのストップウォッチ
iPhoneも開始と停止で
同じボタンを切り替えて使うようですね！
そもそも必要のないボタンは減らすとかって
小さなことだけどUIを改良することになりますね！
フラットデザインを意識する
「css」「デザイン」とか調べてると出てきました。
フラットデザイン！！
要は、最近よくあるデザインってやつですかね！笑
なんというかペタペタした感じのやつです！←
デザインのデの字も知らない私なのでご容赦ください...（−＿−；）
ひと昔前は、スキューモーフィズムというデザインが流行っていたようです。
2013年ごろからこれに代わって、現在はフラットデザインが主流のようですね。
iPhoneのiOS6とiOS7を比べるとすごくわかるようです！
個人的にはInstagramのアイコン！
だいぶ変わってますね！
右の今のやつのがペタペタしてますね！ｗ
なんか青くなるの嫌！！笑
なんのこっちゃｗｗ
こういうことです！
文字として選択できちゃうんですよね～
それをアプリっぽく？できないようにしました！
うん...できないはずです！ｗ
パソコンからの方は試してみてください～
「文字」「青くなる」「いや」みたいな検索した気がしますｗｗｗ
CSSで制御しました！
user-select: none;
これを使いました。
例えば↓↓↓の文章。
この文章は選択できるよ
この文章は選択できないよ
こういうわけです。
<div>この文章は選択できるよ</div> <div style="user-select: none;">この文章は選択できないよ</div>
これでおみくじアプリも改良しました～！！！
https://tonamao.github.io/test.first-omikuji/
次なにつくろうかな～～
第3弾Webアプリケーションの公開
おはようございます😊まおです！
今週は割り勘計算のWebアプリケーションを作って公開してみました。
今回の成果
◼︎割り勘計算
https://tonamao.github.io/WarikanCalculation/
今回もドットインストール先生の題材です🙋♀️
◼︎JavaScriptで割り勘電卓を作ろう
https://dotinstall.com/lessons/go_dutch_js_v3
◼︎オリジナリティ
もはや今回は、仕様だけ確認して、あとは自分の好きなように作ってみました！ｗ
だいたいの仕様しか確認していないので、何が本家と違うかもよくわかってません。ｗ
◼︎苦労したところ
- 入力値チェック！
入力する場所があれば必ずありますよね、入力値チェック。
チェックの仕様も含めて結構考えましたね～
今回対象となってくるのは、自由に入力できる「金額」「人数」の項目です。
期待値としては「半角数字」です。
「金額」項目に「半角数字」が入っていれば、次の「人数」項目の値をチェックするという仕様にしました。
「JavaScript」「入力値チェック」なんかで調べればいろいろと出てきますが...
そこで【isNaNを使う】でハマりましたね～...ｗ
isNaN関数
- isNaN() 関数は引数が NaN （非数）かどうかを判定
この説明で飛びつくとハマってしまいますね～ｗ
ふむ。
falseのときが、入力値OKってことになるんだな～
って気がしますが、要注意！
isNaN(NaN); // true isNaN(undefined); // true
うんうん
isNaN(31); // false
うんうん
isNaN("31"); // false: "31" は 31 に変換される
ほう...Stringは勝手に数値に変換してくれるのか～
isNaN(""); // false: 空文字列は 0 に変換される
...え！？
ブランク「""」はOKにしたくないです！！！
は～～～なかなか一筋縄ではいかないなあ。。。
RegExp(正規表現)オブジェクト
結局ですが、これを使いました。
var re = new RegExp(/^[0-9]+$/); return re.test(value); //0～9のみで構成されていればtrue、そうでなければfalseを返却
この/^[0-9]+$/ってところが正規表現になります。
わたしは、正規表現を完全マスターしてはないですが、
簡単なものならなんとかなるかなって感じです(^^;)
結局は正規表現になるのか～って気もしますが。。
それにもっと良いやり方はあるかもしれません。
はたまた、そもそもJavaScriptで入力値チェックでいいのか、とかね。
まあ今回の規模のものならこの程度かなというところでこれを使いました。
余談
そもそも割り勘計算というもの自体が奥が深いアプリのようでした！ｗ
割り勘といえば...支払いの時って
性別や年齢で金額違ったりするな～とか。
そんなことを思いつき、調べてみるとやっぱり！
いくつか割り勘計算のアプリが出てきました！！
やはりそこには、
男性は女性の何割増しにするか とか
先輩は何人いるか とか
幹事さんは減らす とか
そんな仕様が実装されてました。
なるほど、たしかにね～
ちょっと考えて思いついたようなことは全部実装されていた、というわけです。笑
誰が誰の何割増し とか、幹事さんに配慮したいとか、
実際使うためのものを作ろうと思うと、
その辺の考慮がなかなか複雑な仕様になりそうですよね！
割り勘アプリ、日本人の配慮や慣習を仕様に盛り込もうとすると
なかなか複雑だな～～～
第2弾Webアプリケーションの公開
おはようございます😊
まおです！
今回もともかくアウトプットするを実践していくために、Webアプリケーションを作って公開してみました🙋♀️
今回の成果
◼︎パスワードジェネレーター
https://tonamao.github.io/test.pw-generator/
今回もドットインストール先生に教わりました🙋♀️
◼︎JavaScriptでパスワードジェネレータを作ろう
https://dotinstall.com/lessons/pwd_generator_js_v3
◼︎オリジナリティ
- 文字の最大を32文字に(なんとなくw)
- 記号の説明をつけた
今回は本当に若干のオリジナリティです笑
Symbolsのチェックを入れるときに、何の記号だ？って単純に思ったので、チェックボタンで追加される記号を表示させてみました！
ちなみに、記号の種類ももとより増やしてます。
パスワード作る時って、記号の可・不可はサイトや使う記号によるのかなと思ったので、どんな記号が付与されるのか分かるように表示しました！
◼︎苦労したところ
- 記号文字のエスケープ！！！
単純に記号の種類を増やしたせいで、これ困りましたね～...笑
今回表示したい「!"#$%&'()*+,-./:;<=>?@[]^_`{|}~」の記号は、
ソースコードとして読み込まれてしまったりしてエラーになります。
var smbl = '!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~';
JavaScriptで単純にこんな感じで書いていると、例えば
「'」の記号に対しては、「表示させたい文字列」としてではなく
「文字列を囲むためのシングルクォーテーション」として読み込まれたりします。
今回はこの辺のことを考慮して、下記のように実装。
var smbl = '!"#$%&' + "'()*+,-./:;<=>?@[\]^_`{|}~";
「&」と「'」の間で文字列を区切ってます。
「"」を含む前半の文字列は、「'」で囲い、
「'」を含む後半の文字列は、「"」で囲うようにしました。
果たしてこれが最適解なのかはわかりませんが...笑
JavaScriptは「'」も「"」も使用可能なので、
記号として「'」を使いたいときは、「"」を文字列を囲うために使い、
記号として「"」を使いたいときは、「'」を使うようにしてみました。
次は何を作ろうかな～＾＾♪
Webアプリケーションを公開してみる
おはようございます😊
まおと申します。
以後、お見知り置きを！
初投稿🔰
そして初めて、開発したものを公開してみました！
なんやかんやと...
プログラミングできるようになりたい！
もっとソースコード書きたい！
なんか作れるようになりたい！
こんな話を上司にすると、
成長するためには仕事に求めるより
自分でなんか開発したほうがいいよ
ってみんな言うんですよ。
少なくとも私は4人ほどの先輩方に言われました...(^_^;)
なるほど、と思いつつも
まあなんやかんや
何もやらないまま1〜2年すぎるわけですが...←
今回は妥協に妥協を重ね、ようやく！
「それっぽいもの」を「それっぽく公開する」
まで辿り着きました👏笑
今回のコンセプト
ともかくアウトプットしてみる
なんやかんやで2年も過ぎるんだから...笑
小さくてもアウトプットすることを意識しました。
Webアプリケーションを作る
ドットインストール先生召喚！
■JavaScriptでおみくじを作ろう
■URL
https://dotinstall.com/lessons/omikuji_js_v3
とりあえず、そのままを実装し公開しました。
※と言いつつも、日々改良中...
改良の内容については、今後の記事に載せていこうかなと思います＾＾
公開する
GitHub召喚！
「Webアプリケーション」「公開」とかで検索すると、GitHubでできるよみたいなこと出てくると思います＾＾
「GitHub」「公開」とかで検索すると、GitHubでの公開方法とか出てくると思います＾＾
うん。笑
いや、でも実際ね、こんな感じでとりあえずパクる！真似をする！から始めればいいんだと思うんです。
そうしないと、2年過ぎますからね。笑
そんなこんなで...
無事、Webアプリケーションたるものを作って公開することができました！
■おみくじ
■URL
https://tonamao.github.io/test.first-omikuji/
ごく稀に「神吉」なんてのが出るようにもしてみました笑
（手書き感...）
ちなみにPC向けで、スマホ向けじゃないです。
ボタンクリックの動きの感じだけ
スマホだと微妙です...
今後も継続的に作っては公開していきたいと思います～＾＾♪
