土曜日, 8月 31, 2024

マウスのスクロール方向がWindowsと逆?

マウスのホイールでWebページなどをスクロールする際、macOSとWindowsで何故か逆(※)なので合わせることにしました。

※私が変なのかも?

まず、ホイールを上にスライドさせないとWebページの下に行くことができず、下にスライドさせないとWebページの上に行くことができないのでイライラしていました。

※赤の矢印がホイールの動き。青の矢印がWebページの動き

システム設定の[マウス]にて[ナチュラルなスクロール]をオフにします。

コレでホイールの動きにWebページなどをスクロールが連動します。

TCDW8146 
10数年ぶりに火傷をしてしまいました

昨日、蟹蒲チャーハン作っていて、フライパンで10数年ぶりに火傷をしてしまいました。軽い火傷だったので大したことはありませんが、チョット間抜けでした。しかし、右手でフライパンを持って居たのにフライパンの縁で右手首に火傷って自分でも謎。

金曜日, 8月 30, 2024

JavaScriptでAI遊び 23 
選択テキストをバラバラに分割

選択テキストをバラバラに分割します。
縦書きにも対応しますが横書きも含めて処理出来るのは1行だけです。

// Illustratorスクリプト:
//選択したテキストを
//サイズと書式を保持したまま1文字ずつバラバラに

function splitTextKeepingOrientation() {
// Illustratorで何かが選択されているか確認
if (app.selection.length === 0) {
alert("テキストフレームを選択してください。");
return;
}

// 選択されたテキストフレームに対して処理を実行
for (var i = 0; i < app.selection.length; i++) {
var selectedItem = app.selection[i];

// テキストフレームであるかを確認
if (!(selectedItem instanceof TextFrame)) {
continue; // テキストフレームでない場合はスキップ
}

var textFrame = selectedItem;
var textRange = textFrame.textRange;
var textContent = textFrame.contents;
        // 横書きか縦書きかを取得
var orientation = textFrame.orientation;

// テキストフレームの位置を取得
var x = textFrame.position[0];
var y = textFrame.position[1];
var parent = textFrame.parent;

// 元のテキストフレームを削除
textFrame.remove();

// 各文字を個別のテキストオブジェクトとして追加
for (var j = 0; j < textContent.length; j++) {
var newTextFrame = parent.textFrames.add();
newTextFrame.contents = textContent[j];
        // 横書きか縦書きかを設定
newTextFrame.orientation = orientation;

// 元のテキスト属性をコピー
var sourceCharacterAttributes =
                textRange.characters[j].characterAttributes;
var newCharacterAttributes =
                newTextFrame.textRange.characterAttributes;
newCharacterAttributes.textFont =
                sourceCharacterAttributes.textFont;
newCharacterAttributes.size =
                sourceCharacterAttributes.size;
newCharacterAttributes.fillColor =
                sourceCharacterAttributes.fillColor;
newCharacterAttributes.tracking =
                sourceCharacterAttributes.tracking;

// 文字のサイズと書式に基づいて新しい位置を設定
newTextFrame.position = [x, y];

// 横書きか縦書きかによって位置を更新
if (orientation == TextOrientation.HORIZONTAL) {
x += newTextFrame.width; // 横書きの場合、x座標を更新
} else {
y -= newTextFrame.height; // 縦書きの場合、y座標を更新
}
}
}
}
splitTextKeepingOrientation();

こんな感じです。処理後に少し広がってしまいました。要改良?ですね。

TCDW8145 
ルール変更時にメモしておかないと苦労します

10年以上前のデータの修正依頼が入ったので、バックアップのHDDをチェック。ところが、当時のバックアップルールを思い出す事の方に時間が掛かってしまいました。ルール変更時にメモしておかないと苦労しますね。

木曜日, 8月 29, 2024

Let's start JavaScript 33 
クリックで配置画像が爆発

クリックした配置画像を爆発させてみました。

ルート階層の中に・・・
    picフォルダー(image.png)

という構造です。

<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
    "width=device-width, initial-scale=1.0">
<title>Image Explosion</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #ffd700;
overflow: hidden;
margin: 0;
}
.image-container {
position: relative;
display: inline-block;
}
img {
width: 400px; /* オリジナルの画像サイズ */
height: auto;
cursor: pointer;
}
.fragment {
position: absolute;
width: 50px;
height: 50px;
overflow: hidden;
}
.fragment img {
position: absolute;
width: 400px;
height: auto;
}
</style>
</head>
<body>
<div class="image-container">
<img id="image" src="pic/image.png" alt="Image">
</div>

<script>
//画像をクリックでclickを実行
document.getElementById('image').
            addEventListener('click', function() {
const image = this;
const container = image.parentElement;
const imageWidth = image.clientWidth;
const imageHeight = image.clientHeight;
const fragmentSize = 50;
// クリックした画像を非表示
image.style.visibility = 'hidden';
// 小さな断片(fragment)を作成
// 断片はオリジナルの画像の一部を切り取ったもの
for (let y = 0; y < imageHeight; y += fragmentSize) {
for (let x = 0; x < imageWidth; x += fragmentSize) {
const fragment = document.createElement('div');
fragment.classList.add('fragment');
fragment.style.width = `${fragmentSize}px`;
fragment.style.height = `${fragmentSize}px`;
fragment.style.left = `${x}px`;
fragment.style.top = `${y}px`;

const fragmentImg = document.createElement('img');
fragmentImg.src = image.src;
fragmentImg.style.left = `-${x}px`;
fragmentImg.style.top = `-${y}px`;

fragment.appendChild(fragmentImg);
container.appendChild(fragment);

// 小さな断片(fragment)のアニメーション設定
// 各断片はランダムな方向に移動・回転してフェードアウト
setTimeout(() => {
fragment.style.transition =
                        'transform 1s ease-out, opacity 1s ease-out';
fragment.style.transform =
                        `translate(${(Math.random() - 0.5) * 400}px,
                        ${(Math.random() - 0.5) * 400}px) scale(0.5)`;
fragment.style.opacity = '0';
}, 100);
}
}

// アニメーション終了後、断片は完全削除
setTimeout(() => {
container.innerHTML = '';
}, 1500);
});
</script>
</body>
</html>
<!-- index.html -->


実際にクリック〜爆発の流れ

TCDW8144 
未登録の番号からは絶対に取りません

Baby Alien 021
子鬼かな?(^o^)
固定電話の留守録に詐欺系・買い取り・売り込みメッセージが増えてきた。番号を公開していないスマホ番号にも最近入り始めて気分は最悪。もちろん未登録の番号からは絶対に取りません。

水曜日, 8月 28, 2024

HTMLとCSSの様々な表現 16 
HTMLとCSSで配置画像をラセン回転

HTMLとCSSだけで配置画像をラセン回転で拡大させます。JavaScriptを未使用なのでクリックで実行・停止は制御できません。

<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport"
        content="width=device-width, initial-scale=1.0">
<title>CSSで螺旋回転アニメーション</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: turquoise;
}

/* 螺旋回転アニメーションの定義 */
@keyframes spiralRotate {
0% {
transform: rotate(0deg) scale(0.5);
}
25% {
transform: rotate(180deg) scale(1);
}
50% {
transform: rotate(360deg) scale(1.5);
}
75% {
transform: rotate(540deg) scale(2);
}
100% {
transform: rotate(720deg) scale(2.5);
}
}

/* 画像の基本スタイル */
img {
display: block;
margin: 0 auto;
cursor: pointer;
transition: transform 1s;
}

/* クリック時に螺旋回転アニメーションを適用 */
img:active {
animation: spiralRotate 1s forwards;
}
</style>
</head>
<body>
<img src="pic/image.png" alt="クリックで螺旋回転する画像">
</body>
</html>
<!-- index.html -->


再生結果です。画像をマウスで押しっぱなしにします。離すと動作は止まります。

TCDW8143 
公衆電話で連絡を取ろうとしたら故障していた

昨日はiPhoneを忘れて外出してしまい、公衆電話で連絡を取ろうとしたら故障していたという罰ゲーム状態。もう笑うしかありませんでした。

火曜日, 8月 27, 2024

Excel VBA 27 
入力値の最大公約数と最小公倍数を表示



Visual Studio Basicと同じ事をVBAでやってみました。

Visual Studio Basic_35 入力値から最大公約数と最小公倍数を求める 2024/07/18

-------------------
Sub CalculateGCDandLCM()
Dim inputStr As String
Dim numbers() As String
Dim numArray() As Long
Dim i As Integer
Dim gcdResult As Long
Dim lcmResult As Long

' メッセージボックスで数値を入力させる
inputStr = InputBox("数値をカンマで区切って入力してください:", "GCDとLCMの計算")

' 入力がキャンセルされた場合
If inputStr = "" Then Exit Sub

' 入力された数値をカンマで分割して配列に格納
numbers = Split(inputStr, ",")
ReDim numArray(UBound(numbers))

' 文字列配列を数値配列に変換
On Error GoTo InvalidInput
For i = 0 To UBound(numbers)
numArray(i) = CLng(Trim(numbers(i)))
Next i
On Error GoTo 0

' 最大公約数を計算
gcdResult = numArray(0)
For i = 1 To UBound(numArray)
gcdResult = Application.WorksheetFunction.Gcd(gcdResult, numArray(i))
Next i

' 最小公倍数を計算
lcmResult = numArray(0)
For i = 1 To UBound(numArray)
lcmResult = lcm(lcmResult, numArray(i))
Next i

' 結果をメッセージボックスに表示
MsgBox "最大公約数 (GCD): " & gcdResult & vbCrLf & "最小公倍数 (LCM): " & lcmResult, vbInformation, "結果"
Exit Sub

InvalidInput:
MsgBox "無効な入力です。正しい数値をカンマで区切って入力してください。", vbExclamation, "入力エラー"
End Sub

' 最小公倍数を計算する関数
Function lcm(a As Long, b As Long) As Long
lcm = a * (b / Application.WorksheetFunction.Gcd(a, b))
End Function
-------------------
実行すると表示されるパレットにベースとなる数値をカンマで区切って複数入力して[OK]で・・・

結果が表示されます。

※本当はVisual Studio Basicよりも先に手を付けたのですが、デバッグで苦しみました。

TCDW8142 
この偶然を説明出来る要素が皆無

定時では無く不規則に利用する電車でほぼ確実に遭遇する人がいるのが、妙に不気味。目線が合うわけではないのですが、この偶然を説明出来る要素が皆無。ホラーでも,全く寒くないです(>_<)

月曜日, 8月 26, 2024

Illustratorでの作図基本 05 
多角形の分割は整列とスナップ

多角形をピザ分割ス分場合は、分割は整列とスナップを活用です。

正偶数角形の場合として、ここでは六角形で説明します。六角形とは別に分割用の線を作図し、両方を選択してから・・・

基準となる図形(ここでは六角形)を再度クリックすると図のように太線で選択されます。コレで六角形は画面に固定されます。

あとは整列パレットにて[水平方向中央に整列]と[垂直方向中央に整列]を続けてクリックすれば・・・

ど真ん中に配置されます。

選択を分割線だけにして、回転ツールにで角度指定をして[コピー]をすれば完了です。瞬時に角度が出ない、あるいは割り切れない場合・・・例えば14角形なら(360/14)と入力すればOKです。

あとは[D]で直前の動作(回転コピー)を繰り返すだけです。 

コピーを繰り返したら、全てを選択して・・・

パスファインダーの[分割]で・・・

ピザ分割は完成です。

次ぎに正奇数角形の場合として、ここでは七角形で説明します。分割線は多角形の中心点に先端をスナップさせ、そこをAlt(※)キーを併用してクリックして回転の起点とし

※macOSではoptionキー

(360/7)と指定してコピーを行います。Abodeのツールは入寮値の部分で簡単な四則演算や、単位違いを処理してくれます。

ex) 123mm+8pt

あとは[D]で直前の動作(回転コピー)を繰り返すだけです。 

コピーを繰り返したら、全てを選択し、パスファインダーの[分割]でピザ分割は完成です。

TCDW8141 
世の中不気味なことだらけ

進行方向がコロコロと変わる台風は不気味ですね。そして米不足も不気味です。まっ「世の中不気味なことだらけ」と言ってしまえば、それまでですが・・・。

日曜日, 8月 25, 2024

Officeのアイコンもカラー調整で劇的変化

Officeのアイコンもカラー調整で劇的変化します。

例えばこのアイコンも・・・

右クリックで[図形に変換] 後、パーツ毎に着色できます。

更に別のパーツを加えることでイメージアップさせることが出来ます。

TCDW8140 
甲殻類と頭足類、貝類はOKです

Baby Alien 020
歩く魚くん系(^o^)
魚料理は好きなのですが、生魚は苦手です。結果、刺身や寿司はNGです。ただし、甲殻類と頭足類、貝類はOKです。

土曜日, 8月 24, 2024

Let's start JavaScript 32 
クリックで配置画像がラセン回転

クリックで配置画像がラセン回転する展開を整理してみました。

ルート階層の中に・・・
    picフォルダー(image.png)
    linksフォルダー(rule.css, script.js)

という構造です。

<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport"
        content="width=device-width, initial-scale=1.0">
<title>ラセン回転画像</title>
<link rel="stylesheet" href="links/rule.css">
</head>
<body>
<!-- 画像を配置し、container クラスを持つ div で中央に配置。     spiral-image クラスを持つ img タグを配置。 -->
<div class="container">
<img src="pic/image.png"
            alt="Fish Image" class="spiral-image">
</div>
<script src="links/script.js"></script>
</body>
</html>
<!-- index.html -->

/* rule.css */
body, html {
height: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: dodgerblue;
}

.container {
display: flex;
justify-content: center;
align-items: center;
}

.spiral-image {
width: 300px;
height: auto;
cursor: pointer;
transition: transform 1s ease-in-out;
}
/* 回転のスピード設定 */
.spiral-image.spinning {
animation: spin 4s infinite;
}
/* 回転の角度とサイズ設定 */
@keyframes spin {
0% {
transform: rotate(0deg) scale(0.5);
}
25% {
transform: rotate(180deg) scale(1);
}
50% {
transform: rotate(360deg) scale(1.5);
}
75% {
transform: rotate(540deg) scale(2);
}
100% {
transform: rotate(720deg) scale(2.5);
}
}
/* rule.css */

/* script.js */
/* 画像をクリックすると、spinningクラスをトグルし、
    螺旋回転アニメーションを実行 */
document.addEventListener('DOMContentLoaded', () => {
const image = document.querySelector('.spiral-image');
image.addEventListener('click', () => {
image.classList.toggle('spinning');
});
});
/* script.js */


画像をクリックしたら、こんな感じです。

TCDW8139 
どの部分がソーラーなのか未だに良くわからない

腕時計が無くてもスマートフォンがあれば困らないのに、なぜか腕時計は手放せません。ここ数年はソーラー式を使って居るのですが、どの部分がソーラーなのか未だに良くわからないのです。

金曜日, 8月 23, 2024

modoローポリモデリング 49 
勾玉の作成手順は頂点・境界・ポリゴンの切り替えが重要

ローポリの説明で勾玉を思い出したので整理してみました。色々なtipsがあります。

立方体を[D]でポリゴンを倍増し[Y]方向に拡大します。

次の表示を正面に切り替え、境界で中心のエッジを選択して移動ツール[W]で上に移動させます。

次ぎに底面の4つのポリゴンを選択して[R]にて縮小します。

次ぎに上図のように一番下の境界を1つおきに選択した頂点調整で境界を概ね水平に調整してから上の面を[L]キーを活用して1周選択し、ループスライスで境界を1つ追加します。

ここで水平に調整した境界を、概ね元の状態に戻してから[TAB]でキーでサブディビジョン設定します。

次ぎに右面に表示を切り替え、[フォールオフ]>[リニア]に変更してから[E]の回転ツールを上図のように変形させます。

ここから境界を[E]の回転ツールで若干回転させて形状を微調整します。

中間位置の境界も[E]の回転ツールで調整を行います。

次ぎに正面表示にして[R]の拡大・縮小ツールにて[X]方向を縮小して上図のように平たくします。

ここであ名の位置の頂点を[B]のベベルにて面を作成し・・・

生成した面を削除してからブリッジで穴あき状態にします。

後は生成したあ名の形状の頂点や境界を微調整して形状と整えラバ完成です。

modo 16.1v8