右サイドに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：CentOS７
メモリ：CFD DDR3L-1600 1.35V対応SO-DIMM 4GBX1枚
ストレージ：SunDisk SSD PLUS 120GB
モニター：cocopar 10.1インチ（1280ｘ800）
またこのサイトは、LABORATORY by MOMO、日本語では”モモの研究所”になります。まだ、コンテンツがありません。これからぼちぼち制作していきます。
このサイトでは、HTML, CSS、Javascriptなどの基本知識のほか、canvas animation、andoroidアプリの制作を自ら学び、
確認しながら備忘録的に書き留めます。
まず初めは、このHOMEのレイアウトになりますが、フレキシブルボックスを使った2段組みレイアウトにしました。 次に、Webページを制作するうえで必要なHTML、CSS、JavaScript等のコードを表示するための仕組みをパターン化します。
ソースコードの表示（１）
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');
ソースコードの表示（２）
次に示すのはCodePenです。CodePenは、コードの表示内容が少ないものに適しています。ただし、ブラウザがInternet Explorerでは正しく動作しませんので、ブラウザはGoogle Chromeを使ってください。
CSSが思うようにならない
CSSは簡単なようで意外と難しいのです。ブラウザの違い例えば、IEとChromeでは見た目が明らかに違いますし、 ブラウザによって上記のCodePenのように内容が反映されたり、反映されなかったりします。
アナログ時計
PHPカレンダー
| 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 | 31 | |