火曜日, 7月 21, 2026
月曜日, 7月 20, 2026
Let's start JavaScript 106
シンプルにpointとmmの相互変換
pointとmmの相互変換をちょこちょこ使うので作りました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>point ⇔ mm 相互変換</title>
<style>
body{
font-family:sans-serif;
margin:40px;
font-size:18px;
background: black;
color: white;
}
input{
width:120px;
padding:6px;
font-size:18px;
}
label{
display:inline-block;
width:50px;
}
div{
margin-bottom:15px;
}
</style>
</head>
<body>
<center>
<h3>point ⇔ mm 相互変換</h3>
<div>
<label>point</label>
<input type="number" id="pt" step="0.01">
</div>
<div>
<label>mm</label>
<input type="number" id="mm" step="0.01">
</div>
<script>
// 1pt = 25.4 / 72 mm
const PT_TO_MM = 25.4 / 72;
const MM_TO_PT = 72 / 25.4;
const pt = document.getElementById("pt");
const mm = document.getElementById("mm");
pt.addEventListener("input", function () {
if (this.value === "") {
mm.value = "";
return;
}
mm.value = (parseFloat(this.value) * PT_TO_MM).toFixed(3);
});
mm.addEventListener("input", function () {
if (this.value === "") {
pt.value = "";
return;
}
pt.value = (parseFloat(this.value) * MM_TO_PT).toFixed(3);
});
</script>
</center>
</body>
</html>
実行したら・・・
どちらかに値を入れます。ここではpointに10と入力すると直ぐに3.528mmと表示されます。
そのままmmに5と入力すると直ぐに14.173pointと表示されます。つまり、どちらか一方の値を入力するともう一方が自動で更新されます。
ラベル:
HTML,
JavaScript
TCDW8833
神通力を秘めた羽団扇(はうちわ)
天狗の下駄が一本歯なのは、険しい山道を登り下りする際にも足場に合わせて対応するための工夫なのだとか。神通力を秘めた羽団扇(はうちわ)が生えているのに使わないのかな?
ラベル:
3D,
Cute Baby Alien,
modo,
TCDW
日曜日, 7月 19, 2026
Illustratorでの作図基本 41
二等辺三角形の作図は2つの方法
例えば上のような二等辺三角形が欲しい場合・・・
Illustratorの作図は正三角形で概説する縁の半径と同じ半径の正三角形になってしまいます。
なので、とりあえず適当な正三角形を作成してからプロパティでWidthとHightの値変更で作図します。
あるいは、二等辺三角形の底辺と高さに該当する長方形を作成し[オブジェクト]>[パス]>[アンカーポイントを追加]後に上図のようにアンカーポイントを目引きして作図することもできます。
ラベル:
Illustrator
TCDW8832
外出を取りやめて観察したというわけです
近所に現れたセールスマン風の男性。スマホで誰かと連絡中なのは会社の連絡だとしても、どの家でもピンポンせず、ただ周りを物色していて不気味。完全に不審者丸出しでした。外出しようとして発見したので外出を取りやめて観察したというわけです。
ラベル:
illustration,
Photoshop,
TCDW
土曜日, 7月 18, 2026
JavaScriptでAI遊び 100
Illustratorで選択したオブジェクトをレイヤー分け
選択したオブジェクトを個別にルートレイヤーに分けます。いられるのデフォルト機能である[サブレイヤーに分配]とは処理結果が異なります。個人的に[サブレイヤーに分配]は勘違いしやすいので使って居ません。
Illustratorのサブレイヤーに分配が変? 2026/07/13
// 選択グループ内のパーツを前後関係を維持してレイヤー分割
if (app.documents.length == 0) {
alert("ドキュメントを開いてください");
exit();
}
var doc = app.activeDocument;
if (doc.selection.length != 1) {
alert("グループを1つ選択してください");
exit();
}
var target = doc.selection[0];
if (target.typename != "GroupItem") {
alert("グループを選択してください");
exit();
}
// pageItemsを配列化
var items = [];
for (var i = 0; i < target.pageItems.length; i++) {
items.push(target.pageItems[i]);
}
// IllustratorのpageItemsは前面→背面なので逆順で処理
for (var j = items.length - 1; j >= 0; j--) {
var item = items[j];
var layer = doc.layers.add();
var num = ("000" + (items.length - j)).slice(-3);
layer.name = "Layer_" + num;
item.move(layer, ElementPlacement.PLACEATBEGINNING);
}
alert(items.length + "個のパーツをレイヤー分割しました");
オブジェクトを選択し実行すると・・・
このレイヤー状態は・・・
このパレットが表示されたら完了です。
こんな感じです。
※Illustratorのアップデートで不具合が出る場合があります。気がついた時点でデバッグするように心がけていますが、すぐに対応できないのでご容赦ください。
ラベル:
Illustrator,
JavaScript
金曜日, 7月 17, 2026
HTMLとCSSの様々な表現 26
target="_black"で開いたときの背景処理
画像表示で大きめの画像を小さくリスト表示し、クリックしたら別ページとっして大きい画像を表示させるとき[target="_black"]で背景色を変更したいとき、何もしないと背景は黒になってしまいます。
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Beach on a southern island</title>
</head>
<body>
<center>
<h2>南の島のビーチ 200×150px</h2>
<a href="pic/beach.jpg" target="_blank">
<img src="pic/beach.jpg" width="200px"
alt="南の島の写真">
</a>
</center>
</body>
</html>
<!-- index.html -->
<!-- beach.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Beach on a southern island</title>
</head>
<body>
<center>
<h2>南の島のビーチ 800×600px</h2>
<img src="pic/beach.jpg" alt="南の島の写真">
</center>
</body>
</html>
<!-- beach.html -->
色々と実験してみましたが、ヤヤコシイので、単純に新しい表示設定のhtmlファイルを開く設定にすルのが一番簡単確実です。
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Beach on a southern island</title>
<style>
body {
background: black;
color: lightskyblue;
}
</style>
</head>
<body>
<center>
<h2>南の島のビーチ 200×150px</h2>
<a href="beach.html" target="_blank">
<img src="pic/beach.jpg" width="200px"
alt="南の島の写真">
</a>
</center>
</body>
</html>
<!-- index.html -->
<!-- beach.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Beach on a southern island</title>
<style>
body {
background: lightskyblue;
color: mediumblue;
}
</style>
</head>
<body>
<center>
<h2>南の島のビーチ 800×600px</h2>
<img src="pic/beach.jpg" alt="南の島の写真">
</center>
</body>
</html>
<!-- beach.html -->
TCDW8830
2回タップしてストップ!詳細はコメント欄で!
YouTubeのショートで「2回タップしてストップ!詳細はコメント欄で!」が流行ってますが、コメント欄に答えがない確率が高いですね。まっ、重要な情報でもないし、基本知らなくてもいい情報ばかりですからね。読み続けるのは時間の無駄ですね。
ラベル:
illustration,
Photoshop,
TCDW
木曜日, 7月 16, 2026
Bambu Studio Lessons 15
3Dプリント失敗作の活用方法
失敗作の活用方法です。ただし、使える失敗作の場合限定です。
左がキャラクターの失敗作で下半身だけが救済された感じです。一応上面にはフタをしています。っそして、今回作成したのが右のコップ(※)。
※底のある筒
Bambu Studioでシリンダーを2つ作成し、センターに配置してから上下の位置を調整し・・・
メッシュプール演算で[差分]を実行するだけで・・・
コップ形状が得られます。
後は接着剤で結合するだけです。まっ、流石に鉛筆立てには無理がありますが・・・何に使うか考え中です。
Bambu Studio 2.6.0.51
ラベル:
3D,
Bambu Studio
TCDW8829
下調べをしてから普通の街を徘徊するので
最近空いた時間に町探検をしています。下調べをしてから普通の街を徘徊するのですが、神社、小さなミュージアム、公園、著名な建築物・・・色々と楽しいです。
ラベル:
3D,
Cute Baby Alien,
modo,
TCDW
水曜日, 7月 15, 2026
Illustratorのサブレイヤーに分配が変?
Illustratorで作成したデーターをレイヤー分けする場合、オプションメニューから[サブレイヤーに分配]を選ぶと、ちょっと希望と異なる結果になります。
例えば、上はサンプルデータ画グループからされている状態です。

オプションメニューから[サブレイヤーに分配]を選べるときと選べないときがあり、正直ワケワカメです。
グループ化せずに[レイヤーパレット]>[オプションメニュー]>[サブレイヤーに分配(シーケンス)]の結果はグループ化したときと同じ?
グループ化せずに[レイヤーパレット]>[オプションメニュー]>[サブレイヤーに分配(ビルド)]の結果は一瞬焦りますが、これはAfterEffcts等に取り込むことを想定しているようです。問題は[サブレイヤーに分配(シーケンス)]ですが・・・
グループ解除して[サブレイヤーに分配(シーケンス)]ならPhotoshopにレイヤーを生かして配置できますが・・・
グループ化している状態で[サブレイヤーに分配(シーケンス)]するとPhotoshopは孫レイヤーを見逃します(>_<)
ラベル:
Illustrator
火曜日, 7月 14, 2026
Photoshopで低解像度イメージを修正
Photoshopで低解像度イメージ(※)を修正する手順を整理しました。
ジャギが目立つ状態なら・・・
[フィルター]>[ぼかし]>[ぼかし(ガウス)]で若干ぼかしてから・・・
黒と白のスライドを調整してエッジを立たせます。処理結果の細部は丸まってしまうのでッ修正が必要ですが、いい感じに調整出来ます。
Illustratorで行う場合は、ラスタライズ画像を[効果]>[ぼかし]>[ぼかし(ガウス)]で若干ぼかしてから、画像トレースにて2階調設定を実行後、パスの省略を行うと良いでしょう。
ラベル:
Photoshop
TCDW8827
久しぶりにアクセスしたら消滅していてビックリ
かつては頻繁に理容していたオンラインショップを久しぶりにアクセスしたら消滅していてビックリ。私も昨年はサイトが消滅しかかりましたが、今年に入ってレジストラの方が消滅していました。ネットの世界は動きが速いですね。
ラベル:
illustration,
Photoshop,
TCDW
月曜日, 7月 13, 2026
JavaScriptでAI遊び 99
Illustratorで選択したオブジェクトのサイズをランダム変更
選択したオブジェクトのサイズをランダムに変更じます。
// 選択オブジェクトをランダムスケール
if (app.documents.length === 0) {
alert("ドキュメントを開いてください。");
} else {
var doc = app.activeDocument;
if (doc.selection.length === 0) {
alert("オブジェクトを選択してください。");
} else {
var minScale = parseFloat(prompt("最小倍率(%)", "50"));
if (isNaN(minScale)) exit();
var maxScale = parseFloat(prompt("最大倍率(%)", "200"));
if (isNaN(maxScale)) exit();
if (minScale > maxScale) {
var tmp = minScale;
minScale = maxScale;
maxScale = tmp;
}
function randomScale(min, max) {
return min + Math.random() * (max - min);
}
for (var i = 0; i < doc.selection.length; i++) {
var item = doc.selection[i];
var scale = randomScale(minScale, maxScale);
item.resize(
scale, // 水平
scale, // 垂直
true, // パターン変形
true, // グラデーション変形
false, // 線幅は維持
true, // 塗りパターン変形
scale // 線幅倍率
);
}
alert("ランダムスケール完了");
}
}
オブジェクトを選択し実行すると・・・
最小倍率を指定し・・・
最大倍率を指定するだけです。
このパレットが表示されたら完了です。
上は処理結果です。線幅も対応させる場合は、38行目を以下の様に変更すれば完了です。
true, // 線幅も変更
※Illustratorのアップデートで不具合が出る場合があります。気がついた時点でデバッグするように心がけていますが、すぐに対応できないのでご容赦ください。
ラベル:
Illustrator,
JavaScript
登録:
投稿 (Atom)

















































