火曜日, 10月 31, 2023

Let's start JavaScript 18 
長針、短針のみのアナログ時計を表示

ちょっとアナログ時計を作成して見ましたが、以外と苦戦でした・・・。

<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="links/rule.css">
</head>
<body>
<center>
<div id="base">
<div class="clock">
<div class="hour-hand"></div>
<div class="minute-hand"></div>
</div>
</div>
</center>
<script src="links/script.js"></script>
</body>
</html>
<!-- index.html -->


/* rule.css */
* {
margin: 0px;
padding: 0px;
}
body {
background-color: lemonchiffon; /* #fffacd */
/*text-align: center;
margin-left: auto;
margin-right: auto;
width: 12em */
}
#base {
width: 300px;
height: 300px;
background-color: steelblue; /* #4682b4 */
/*text-align: center;*/
}
.clock {
width: 200px;
height: 200px;
background-color: whitesmoke; /* #f5f5f5 */
border-radius: 50%;
/*text-align: center;*/
position: relative;
top: 50px;
}
.hour-hand {
position: absolute;
background-color: blue; /* #696969 */
transform-origin: 50% 100%;
    /* 回転の中心を下部に設定 */
width: 8px;
height: 60px;
top: 36px; /* (200/2)-(60+(8/2)) */
left: 96px; /* (200/2)-(8/2) */
}
.minute-hand {
position: absolute;
background-color: red; /* #696969 */
transform-origin: 50% 100%;
    /* 回転の中心を下部に設定 */
width: 8px;
height: 80px;
top: 16px; /* (200/2)-(80+(8/2)) */
left: 96px; /* (200/2)-(8/2) */
}
/* rule.css */


/* script.js */
function updateClock() {
const now = new Date();
/* 現在の日付を定数に代入 */
const hours = now.getHours();
/* 現在の時(短針)を定数に代入 */
const minutes = now.getMinutes();
/* 現在の分(長針)を定数に代入 */

const hourHand =
    document.querySelector('.hour-hand');
/* 現在の時を定数(短針)に代入 */
const minuteHand =
    document.querySelector('.minute-hand');
/* 現在の分を定数(長針)に代入 */
const hourRotation = (360 / 12) * hours +
    (360 / 12) * (minutes / 60);
const minuteRotation = (360 / 60) * minutes;
/* 短針、長針の回転数を設定 */

hourHand.style.transform =
    `rotate(${hourRotation}deg)`;
minuteHand.style.transform =
    `rotate(${minuteRotation}deg)`;
}
/* 短針、長針の回転角度を設定 */

setInterval(updateClock, 1000);
/* 指定時間(1秒)ごとに動作 */
updateClock(); // ページ読み込み時に初期表示
/* script.js */

起動した状態です。

実は完成後に針の位置設定が難しくで1週間掛かってしまいました。

TCDW7841 
もちろん無意識に日陰を探しながら歩くんですけどね〜

少しずつ涼しくなってきましたが、相変わらず日差しは強いですね。日傘を愛用しだしてから、実は4月〜11月ぐらいまで日傘は手放せなくなっています。もちろん無意識に日陰を探しながら歩くんですけどね〜。

月曜日, 10月 30, 2023

HTMLとCSSの様々な表現 04 
HTMLとCSSだけで配置画像をボカシてみる

画像をぼかすのって、意外と簡単でした。

<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="links/rule.css">
</head>
<body>
<img src="images/chicken.png"
            alt="ぼかされるオモチャのニワトリノの画像">
</body>
</html>
<!-- index.html -->

/* rule.css */
* {
margin: 0px;
padding: 0px;
}
body {
background-color: deepskyblue; /* #00bfff */
text-align: center;
}
img {
filter: blur(20px); /* ぼかしの度合いを設定 */
}
/* rule.css */

用意した640×480pxのpng画像

img { filter: blur(0px); }

img { filter: blur(5px); }

img { filter: blur(10px); }

img { filter: blur(20px); }

TCDW7840 
コロナワクチンが今も続いていますが、いつまで続くの?

いつもオドオドしているチキンな猫星人には何故か尻尾がありません。そう言えば、コロナワクチンが今も続いていますが、いつまで続くのでしょうね。2〜3回目で止めちゃった方が多いようですが、その是非は私にはワカランチンなので、取りあえず来た案内には応じていますが、そんな私はインフルのワクチンを摂取した記憶が無い・・・(^o^)汗。

日曜日, 10月 29, 2023

Access_06 
テーブルから特定のフィールドをクリエで抽出

クリエでテーブルから特定のフィールドを抽出することで、必要なデータだけを活用します。

この連載は以下を参照してください。

クリエを作成するには、テーブル表示で[作成]>[クリエデザイン]をクリックし・・・

画面が切り替わったら[テーブルの追加]で・・・

[テーブル]を選択し[テーブルリスト※]をクリックします。
※複数のリスタがある場合は該当するテーブルをクリック。ここでは[address_base]テーブルをクリック。

画面が切り替わったら、テーブルのサイズを任意調整します。

画面下のクリエの表が表示されますが、この段階ではブランクになっています。

ここで表示を拡大したテーブルから、必要なフィールドをクリックすることで・・・

クリエの表にフィールドが追加されます。ここでは5つのフィールドを追加しました。

必要なフィールドをクリエに追加したら[実行]をクリックで・・・

全データがクリエとして5つのフィールドだけで表示されます。

TCDW7839 
仕事部屋で蚊に刺されてしまいました

昨夜、仕事部屋で蚊に刺されてしまいました。そんなコト夏場でも無かったのに・・・。そもそも私はあまりかに刺されないのに・・・どうして?と考えてもしかたないですね。しかし、もう直ぐ11月ですよ?

土曜日, 10月 28, 2023

ミニ四駆でコンパクトカメラを移動式カメラに(2)

「ミニ四駆でコンパクトカメラを移動式カメラに」の続編です。ノーマル状況ではスピードが速すぎるので、ソレをコントローラーで調整することにしました。


上がAC用速度コント ローラー。下がDC用速度コント ローラー。今回は模型用モーター調整なので、DC用を利用します。

今回は元の回路を変更せずに組み込むことに拘ってみました。ミニ四駆の回路は組み込みなので、バッテリーとモータの接点にはそのまま配線し、間にゴムの板を挟むことでクリアしました。

スピードのコントロールはこんな感じになりました。

ここまでくるとカーブが出来ない構造が気になりました。さて・・・どうするか・・・。

TCDW7838 
何かのイベントに紛れてしまったときは恐怖でした

毎年繰り返される、渋谷のスクランブル交差点でのハロウィーン騒ぎはウンザリですね。私は人混みが苦手(気分が悪くなる)なので、避けているので生涯関わることはありません。でも学生の頃、知らずに何かのイベントに紛れてしまったときは恐怖でした。

金曜日, 10月 27, 2023

pica, point millimetre, pixel, inchの関係

質問がありましたので・・・
pica, point millimetre, pixel, inchの関係を把握するコツは・・・
それぞれの関係は上の様になりますが。全部憶えるのは無理ゲーです。
なんとなく憶えるべき関係は以下だけでOKですね。

1in = 6pc = 72pt = 96px = 25.4mm

TCDW7837 
Windowsがあるのでどうでもいいんですけどね〜

最近、マスクしてもiPhoneのFaceIDが認識するのに、真顔ではダメなことが増えてきて困惑。macOSも相変わらず怪しいし、Appleに完全に嫌われたかも。まっWindowsがあるのでどうでもいいんですけどね〜。

木曜日, 10月 26, 2023

PowerPointで作成したページを画像書き出し

質問がありましたので・・・
PowerPointで作成したページを画像書き出しについて整理しました。

取りあえず用意したのは図形の組み合わせで作成したイメージ。

上がその構造です。

Windows版は「名前を付けて保存」で任意のファイル形式を選んで保存するだけです。

ただし、macOS版は「名前を付けて保存」で画像形式は選べませんが・・・

エクスポートで画像ファイル形式を選ぶことが出来ます。

次に背景に配置した緑色の矩形を削除してPNG形式で書き出します。

書き出し時にスライドの全体か個別を指定します。

新しいスライドの背景に任意のイメージを配置して・・・


書き出したpngファイルを配置すると透明部分は白で塗り潰した状態になってしまいます。

しかし、画像を書き出すときに、画像の上で右クリックして「図として保存」にてpngファイルを指定します。

ちなみにファイル形式は上の様になって居ます。左がWindows版、右がmacOS版。

「図として保存」にてpngファイルで書き出したファイルは画像の内部分は透明とっして処理されます。

TCDW7836 
やることは変わらないんですよね〜

青鬼のキッズ・エイリアン。随分と涼しくなって昼の時間も短くなってきましたが、やることは変わらないんですよね〜当たり前(じゃなかったら怖い)ですが。

水曜日, 10月 25, 2023

日付処理は、EDATE、YEAR、MONTH、DAYも活用する

一昨日の解説の中で特に説明していない部分がありましたので・・・

月末の日付を調べるEOMONTH関数の応用例 2023/10/23

B列が基準の日付、C列は追加する数値(年、月、日)とした場合・・・
※数値はマイナスであれば減算になります。

D3 数値(月) 
=EDATE(B3,C3)
数値を月として加算

E3 数値(日) 
=B3+C3
数値を日として加算

F3 数値(年) 
=DATE(YEAR(B3)+C3,MONTH(B3),DAY(B3))
数値を年として加算

TCDW7835 
囲まれてしまった私のストレスは爆発寸前(>_<)

電車の中で大騒ぎする学生の横で思いっきり通話しているサラリーマン。負けじと世間話のスイッチが入ってしまったオバチャン達。囲まれてしまった私は万事休すのゲームオーバー(>_<)。

火曜日, 10月 24, 2023

Illustratorの3D機能で地球を作成

質問がありましたので・・・
illustratorの3D機能で地球を作成してみます。

最初に地図を用意します。ここでは所有している地図ツールで作成したモノを利用します。地図を用意したらシンボル登録しておきます。


基本図形は任意の色で塗りつぶしだけの半円を選択し[効果]>[3Dとマテリアル]>[回転体]を実行すると・・・
球体が生成されます。

ここで予めシンボル登録してある世界地図をダブルクリックすれば・・・
地球が完成します。
※ただし、Illustratorだけの環境では裏側が残念な結果になります。裏も正確にマッピングしたい場合は「3D(クラシック)」の回転を利用した方が賢明です。恐らく別途Substance 3D Painterを導入する必要がありそうです。

必要に応じて光源を調整すると・・・
イメージを加減できますが、チョット問題もあります。詳しくは以下を参照してください。