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って一体なんだと思い始めている。

YouTubeでDerekさんによるKivy Tutorialを学ぶ②(kivy.uix.floatlayoutとkivy.uix.floatlayout)

引き続き、2回目、kivy.uix.floatlayoutとkivy.uix.floatlayoutについてとなります。

ということで、Windowサイズの?%という指定のfloatlayoutを使って見ましょう。
画面はこうなります。

“YouTubeでDerekさんによるKivy Tutorialを学ぶ②(kivy.uix.floatlayoutとkivy.uix.floatlayout)” の続きを読む

YouTubeでDerekさんによるKivy Tutorialを学ぶ②(kivy.uix.widgetまで)+日本語対応

2回目は、こちらです。

今回は、ラベルのレイアウトなので、今のうちに日本語に対応しておきましょう。

この組み合わせで指定します。無料のフォントはあちらこちらにあります。
なお、macではこれで動きましたが、Windowsでは文字コードをShift-JISに変えて読み直しとかやってなんとか表示できました。macの方がすんなり表示できるなんて、なんか不思議。
“YouTubeでDerekさんによるKivy Tutorialを学ぶ②(kivy.uix.widgetまで)+日本語対応” の続きを読む

YouTubeでDerekさんによるKivy Tutorialを学ぶ①

Kivyに関する情報は、Kivyの公式ページ日本語翻訳ページですが、なかなか捗らないというか、集中できない。
そんなか、YouTubeでKivy Tutorialって検索するとなんだか出てくる出てくる。その中で、Derekさんのビデオをちらちら見てみました。バージョンの違いからだと思いますが、その通りやると動かないので、適宜変換しながら進めてみました。

“YouTubeでDerekさんによるKivy Tutorialを学ぶ①” の続きを読む

PythonのGUI化としてKivyを試す

別にJavaScriptが難しかったわけではないですが、色々とやっているうちに、こんな本を読みだして、気がついたらJavaScriptが目的になっていた。
本来の目的は、PythonをGUIで美しく表示することだったと思い出し、これを勉強するくらいなら、別の方法がないかと調べると、「Kivy」というのがあった。日本語はこちら “PythonのGUI化としてKivyを試す” の続きを読む