JavaScriptの練習:簡単なアニメ(ボールが動く)

業務系のアプリつくりが目的なんですが、やはりこういうのは避けて通れないみたいです。できたものはこちら
ボールがあっちこっちに動きます。canvasの端に来ると速度の符号を変えて完全弾性衝突のようになっているところが「ほーお」とうなづけるところでした。
アニメにするには、アニメのループ関数の中に「requestAnimationFrame(loop);」を入れて、loop()を一度、外から呼び出す必要があるようです。
あと、軌跡が残るのは、「ctx.fillStyle = ‘rgba(0, 0, 0, 0.25)’」で、0.25の半透明を指定しており、過去4回分が少しずつ色を薄めつつ残ることになります。うまくできています。

“JavaScriptの練習:簡単なアニメ(ボールが動く)” の続きを読む

JavaScriptの練習:JSON

JSONは、JavaScript Object Notationの略なんですね。。まさに、JavaScriptのための構造化表現ということです。その割には、手順が多いなぁ・・
糸を引くようなフォントに興味が湧き、再現してみました。こちらです。
JavaScriptはこんな感じです。

“JavaScriptの練習:JSON” の続きを読む

JavaScriptの練習:Photo Gallery

MDNに沿ったJavaSCriptの練習を継続してます。ようやく、JavaScriptの構成要素の最後まで到着しました。
成果物はこちらです
結論的には、thumb-barに画像を設定するまではできましたが、関数まで設定することはできませんでした。回答ではforの中に、function(e)が入っていますが、VS Codeでは、これはお勧めできないという警告が出てきます。でも、じゃぁ、どうすればいいのか対応までは教えてくれていないので、いくつか試してみましたが、いずれも動かず・・・・、結局、回答そのままにしています。
なお、electronによるアプリ化は簡単にできました。 “JavaScriptの練習:Photo Gallery” の続きを読む

JavaScriptの練習:カレンダーちょっと改良

カレンダーは月末日が表示されないというバグがあることに気づいたので、直すついでに、当初作ってみたかったようにやってみた。
成果物はこちら
最初は、thimbleで作業していたが、thimbleは「new Date(2018,1,31,0,0,0)」と日時を指定しても、現在の日時になってしまうことがわかった。Playcodeも同じみたいだった。日本標準時の扱いにくさもあって、ThimbleやPlaycodeに依存しない、VS Code+Chromeという標準的な開発環境に落ち着いたこともメモしておきます。
“JavaScriptの練習:カレンダーちょっと改良” の続きを読む

JavaScriptの練習:イベント

元ネタのMDNはこちら
成果物はこちら
ここでは、イベントについての説明です。イベントのキャッチ方法とか、どうやって関数を呼び出すかなどの説明です。
個人的には、<body>の中に、こうやってタイル状に<div>を配置できることを知った驚きのほうが大きかったです。

JavaScriptの練習(Loop)

MDNのサンプルがなんとなく気に入ってしまい、自分でも作ってみました
<canvas>の使い方を調べるのに時間がかかりましたが、なんとなく使い方もわかったし、自分で興味を持って取り組みことは大事ですね。色を変えたりして・・・。

本当は、ゆっくりバブルができるようにしたかったのですが、JavaScriptにはsleepやwaitがないとのこと。うまくできませんでしたが、失敗例を残しておきます。
index.html

script.js

Javascriptの練習

Javascriptでカレンダーを作ってみた。本当は、月初の週に前月をまたぐ場合は、小さい字で入れたかったんだけど、細かくclassを設定するのも嫌になり、該当月のみの表示としました。
今回、はまったのは、変数Bの宣言にすでに宣言されている変数Aを使うと、変数Bの値を入れ替えるたびに変数Aも変わってしまうことに気づかなかったことです。無限ループを作ってしまった。
あと、thimbleで日付を指定すると、GMTで設定して表示はJSTみたいな複雑なことが起こっていて、簡単にできるはずの月初の日付、月末の日付けを得るのがうまく確認できなくて、随分と冗長なコードになってしまいました。やはり、初めからVS Code+Chrome(FireFoxのdeveloper edition)でいいかもしれません。

JavaScriptの開発環境について

MDNを教材にしたHTML/CSS/JavaScriptの自習に取り組んでいます。
ウェブ開発を学ぶ」に忠実に従い、htmlの基本からなぞっています。
CSSは、idとclassの違いや継承等を理解できたのが良かった。偽装セレクターあたりは日本語訳がないので、後で調べなくては。。
それで、いよいよJavaScriptに突入ですが、そのまえに開発環境について。
基本的に、VS CodeとGoogle Chromeで問題ないんですが、Web上で開発できるサイトがいくつもあり、目移りしてしまいます。結局はThimbleに落ち着きそうですが、試した4つのサイトについて簡単に説明します。 “JavaScriptの開発環境について” の続きを読む

FLASKも試してみた

Kivyも悪くないが、なんとなくゲームっぽい作りになりそうで趣味に合わないような・・・
ということで、Flaskを試してみることに。公式のTutorialにある掲示板みたいな物を作るプロセスです。
http://study-flask.readthedocs.io/ja/latest/02.html
このままだと、「flaskr/__init__.py」で止まってしまいます。
flask.extは、使われていないので、コメントアウトして下に追加しています。

これで、localhost:5000にアクセスすると、こんな画面ができます。

htmlとpythonのやりとりがわかりやすいですね。これをelectronで動かすことはできるのだろうか・・今後、試してみよう。。

あと、処理結果の表示にこれだけ頭を悩ませるpythonって一体なんだと思い始めている。