ツール – 東京発、雲に乗って

2024年1月12日2024年1月12日

【JavaScript】SortableJSで簡単に並べ替えUIを作る

JavaScriptのライブラリ「SortableJS」を使えば
ドラッグ＆ドロップでリストの並び順を変えたりウィンドウの配置を入れ替えたり
といったUIをとても簡単に作ることができます。

SortableJS

デモ：

１．りんご

２．いちご

３．バナナ

４．スイカ

５．佐藤太郎

コード：

<div id="sort_demo1">
<div style="background-color:#ffc0c0;">１．りんご</div>
<div style="background-color:#ffffc0;">２．いちご</div>
<div style="background-color:#c0ffc0;">３．バナナ</div>
<div style="background-color:#c0ffff;">４．スイカ</div>
<div style="background-color:#c0c0ff;">５．佐藤太郎</div>
</div>

<style>
#sort_demo1 div {
  cursor: pointer;
  margin: 2px;
}
</style>

<script src="//cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.0/Sortable.min.js"></script>
<script>
window.onload = function() {
  Sortable.create(sort_demo1, {
    sort: 1,
    group: {
      name: 'sort_demo1',
      pull: true,
      put: true
    },
    animation: 150,
    onEnd: function(evt) {
      // ここで並び変えた状態を変数に保持したり、サーバーに送信したりする
    }
  });
}
</script>

</div>

<style>

#sort_demo1 div {

cursor: pointer;

margin: 2px;

}

</style>

window.onload = function() {

Sortable.create(sort_demo1, {

sort: 1,

group: {

name: 'sort_demo1',

pull: true,

put: true

animation: 150,

onEnd: function(evt) {

// ここで並び変えた状態を変数に保持したり、サーバーに送信したりする

}

});

}

</script>

2023年3月29日2023年10月3日

【canvas】canvasで普通の矢印を描く（実線、破線）

canvasで普通の矢印を描きます。
ポイントは
・デザインに凝ってない単純な矢印。
・三角関数を使って任意の向きに。
・線の部分を破線にできる。

まずcanvasエリアを用意

<canvas id="canvas_view"></canvas>

1	<canvas id="canvas_view"></canvas>

矢印描画関数を作る

<script>
function draw_arrow(ctx, x1, y1, x2, y2, color, dash) {
  var ar_l = 20;
  
  ctx.beginPath();
  switch(dash) {
    case 'solid':
      ctx.setLineDash([]);
      break;
    case 'dashed':
      ctx.setLineDash([6, 4]);
      break;
  }
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.strokeStyle = color;
  ctx.lineWidth = 2;
  ctx.stroke();

  var dx = x2 - x1;
  var ax = Math.sign(dx);
  var dy = y2 - y1;
  var ay = Math.sign(dy);
  var len = Math.sqrt(dx * dx + dy * dy);
  var cos = Math.acos(dx / len) / Math.PI * 180;
  var sin = Math.asin(dy / len) / Math.PI * 180;

  var x2_a1 = x2 + ar_l * Math.cos((cos + ax * 150) * Math.PI / 180);
  var y2_a1 = y2 + ar_l * Math.sin((sin + ay * 150) * Math.PI / 180);
  var x2_a2 = x2 + ar_l * Math.cos((cos - ax * 150) * Math.PI / 180);
  var y2_a2 = y2 + ar_l * Math.sin((sin - ay * 150) * Math.PI / 180);

  ctx.beginPath();
  ctx.setLineDash([]);
  ctx.moveTo(x2, y2);
  ctx.lineTo(x2_a1, y2_a1);
  ctx.lineTo(x2_a2, y2_a2);
  ctx.lineTo(x2, y2);
  ctx.fillStyle = color;
  ctx.fill();
  ctx.strokeStyle = color;
  ctx.lineWidth = 1;
  ctx.stroke();
}
</script>

function draw_arrow(ctx, x1, y1, x2, y2, color, dash) {

var ar_l = 20;

ctx.beginPath();

switch(dash) {

case 'solid':

ctx.setLineDash([]);

break;

case 'dashed':

ctx.setLineDash([6, 4]);

break;

}

ctx.moveTo(x1, y1);

ctx.lineTo(x2, y2);

ctx.strokeStyle = color;

ctx.lineWidth = 2;

ctx.stroke();

var dx = x2 - x1;

var ax = Math.sign(dx);

var dy = y2 - y1;

var ay = Math.sign(dy);

var len = Math.sqrt(dx * dx + dy * dy);

var cos = Math.acos(dx / len) / Math.PI * 180;

var sin = Math.asin(dy / len) / Math.PI * 180;

var x2_a1 = x2 + ar_l * Math.cos((cos + ax * 150) * Math.PI / 180);

var y2_a1 = y2 + ar_l * Math.sin((sin + ay * 150) * Math.PI / 180);

var x2_a2 = x2 + ar_l * Math.cos((cos - ax * 150) * Math.PI / 180);

var y2_a2 = y2 + ar_l * Math.sin((sin - ay * 150) * Math.PI / 180);

ctx.beginPath();

ctx.setLineDash([]);

ctx.moveTo(x2, y2);

ctx.lineTo(x2_a1, y2_a1);

ctx.lineTo(x2_a2, y2_a2);

ctx.lineTo(x2, y2);

ctx.fillStyle = color;

ctx.fill();

ctx.strokeStyle = color;

ctx.lineWidth = 1;

ctx.stroke();

}

</script>

関数を呼ぶ

<script>
window.onload = function() {
  var canvas = document.getElementById('canvas_view');
  canvas.width = 300;
  canvas.height = 300;
  var ctx = canvas.getContext('2d');

  draw_arrow(ctx, 100, 100, 250, 200, 'red', 'solid');
  draw_arrow(ctx, 50, 150, 200, 50, 'blue', 'dashed');
}
</script>

window.onload = function() {

var canvas = document.getElementById('canvas_view');

canvas.width = 300;

canvas.height = 300;

var ctx = canvas.getContext('2d');

draw_arrow(ctx, 100, 100, 250, 200, 'red', 'solid');

draw_arrow(ctx, 50, 150, 200, 50, 'blue', 'dashed');

}

</script>

実行結果

2021年7月1日2023年2月7日

CSSで三角形を作る（応用）

前回、CSSで三角形を作りましたが

CSSで三角形を作る（基本）

使い道がなかったので
三角形で六角形を作ってアニメーションさせてみました。

jQueryを使用しています。

2021年6月8日2023年10月3日

CSSで三角形を作る（基本）

CSSで簡単に三角形を作れます。

上向き

下向き

左向き

右向き

<style>
.triangle {
  width: 100px;
  height: 85px;
}
.triangle1 {
  border-bottom: 85px solid #808080;
  border-right: 50px solid transparent;
  border-left: 50px solid transparent;
}
.triangle2 {
  border-top: 85px solid #808080;
  border-right: 50px solid transparent;
  border-left: 50px solid transparent;
}
.triangle3 {
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-right: 85px solid #808080;
}
.triangle4 {
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 85px solid #808080;
}
</style>

<div class="triangle triangle1"></div>
上向き

<div class="triangle triangle2"></div>
下向き

<div class="triangle triangle3"></div>
左向き

<div class="triangle triangle4"></div>
右向き

<style>

.triangle {

width: 100px;

height: 85px;

}

.triangle1 {

border-bottom: 85px solid #808080;

border-right: 50px solid transparent;

border-left: 50px solid transparent;

}

.triangle2 {

border-top: 85px solid #808080;

border-right: 50px solid transparent;

border-left: 50px solid transparent;

}

.triangle3 {

border-top: 50px solid transparent;

border-bottom: 50px solid transparent;

border-right: 85px solid #808080;

}

.triangle4 {

border-top: 50px solid transparent;

border-bottom: 50px solid transparent;

border-left: 85px solid #808080;

}

</style>

上向き

下向き

左向き

右向き

これを応用して六角形を作って遊んでみました。
CSSで三角形を作る（応用）

2017年8月24日2017年8月24日

【ツール】パスワード生成ツール（複数生成版）

パスワードを自動生成するツール

https://clouds.tokyo/blog/create_pswd

の複数生成版を作ってみました。
最大1000個のパスワードを一瞬で生成できます。
大量のパスワードを一括生成したい場合はこちらをどうぞ。

すべてブラウザ内（javaScript）で処理が完結し、サーバーにログなど一切残りませんので安心してお使いください。