右サイドにExampleを表示2019/4/1更新

今、歴史的瞬間を迎えようとしています。もうすぐ新元号の発表予定の11時30分になります。
・・・  2019年4月1日11時40分頃、政府は「平成」に代わる新たな元号を「令和」と発表しました。

新元号とは何の関係もないのですが、右サイドにExampleを表示しました。アナログ時計、カレンダー、WebアプリのExampleです。

HTML5のCanvas Example

最初のExampleは、HTML5のCanvasでかいたアナログ時計です。 すべてプログラム(HTML, JavaScript)でかいたもので画像を使っていないところがポイントです。 このExampleは、Canvasを使ったAnimationでもあります。 時計の外枠のグラデーションも自由に設定して、色とグラデーションを変えることができます。

PHPのカレンダーのExample

このカレンダーはphpをメインに使っています。 今日の日付の背景色を異なる色に設定したのですが、初め、テストで表示した今日の日付が変わるのが8時間ぐらい遅れていました。 すぐに原因が分かりませんでしたが、ようやく分かり、テストサーバーのphp.iniファイルに書かれているtimezoneが’Europe/Berlin’になっていたためでした。 これを’Asia/Tokyo’に書き直して正しく表示されるようになりました。ソースコードは別途表示する予定です。

Webアプリ、LOTO番号選択アプリを掲載

大分以前につくった”LOTO番号選択アプリ”を掲載しました。
このアプリは1918年7月に androidアプリ "あたりん!" としてGoogle Playに公開して
います。

あたりん!の改良版Androidアプリ”あたるにゃん!”をGoogle Playに公開

androidアプリ "あたりん!"は英語と日本語を表示できるようにしていましたが、
外国でしかインストールされないため、この”あたるにゃん!”は日本語のみとしました。
ぜひ、Google Playからインストールしてみてください。

なお、このホームページのLOTOタブにはWEB版のあたるにゃん!を掲載しています。

サイトのリニューアル2019/3/7

このWebSiteは、自宅サーバーで掲載し、次の構成になっています。
本体:INTELのNUC5I3RYH、CPU:Intel core i3-5010U
OS:CentOS7
メモリ:CFD DDR3L-1600 1.35V対応SO-DIMM 4GBX1枚
ストレージ:SunDisk SSD PLUS 120GB
モニター:cocopar 10.1インチ(1280x800)

またこのサイトは、LABORATORY by MOMO、日本語では”モモの研究所”になります。まだ、コンテンツがありません。これからぼちぼち制作していきます。 このサイトでは、HTML, CSS、Javascriptなどの基本知識のほか、canvas animation、andoroidアプリの制作を自ら学び、 確認しながら備忘録的に書き留めます。

まず初めは、このHOMEのレイアウトになりますが、フレキシブルボックスを使った2段組みレイアウトにしました。 次に、Webページを制作するうえで必要なHTML、CSS、JavaScript等のコードを表示するための仕組みをパターン化します。

ソースコードの表示(1)

GoogleのCode Prettifyを使い、そのExampleを次に示します。

<!DOCTYPE html>
<html lang="ja">
<head>
</head>
<body>
	HTML Code Example
</body>
</html>
/********** CSS Code Example **********/
p {
	font-size: 10pt;
	font-family: sans-serif;
	color: #000;
}
// JavaScript Code Example
console.log('Hello World');
console.log('Hello World');
console.log('Hello World');
console.log('Hello World');
console.log('Hello World');

ソースコードの表示(2)

次に示すのはCodePenです。CodePenは、コードの表示内容が少ないものに適しています。ただし、ブラウザがInternet Explorerでは正しく動作しませんので、ブラウザはGoogle Chromeを使ってください。

CSSが思うようにならない

CSSは簡単なようで意外と難しいのです。ブラウザの違い例えば、IEとChromeでは見た目が明らかに違いますし、 ブラウザによって上記のCodePenのように内容が反映されたり、反映されなかったりします。

アナログ時計

PHPカレンダー

9September 2020
SUN MON TUE WED THU FRI SAT
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30

ロト番号選択アプリ

LINK