Skip to content

Instantly share code, notes, and snippets.

View murasuke's full-sized avatar

murasuke

2 followers · 6 following
View GitHub Profile
@murasuke
murasuke / tetris-01.js
Last active September 29, 2025 13:53
/**
* 任意の位置に置いたブロックを移動させる
*/
// 1セルを塗りつぶす文字
const B = '██';
// ANSIカラーコードの定義（30:黒, 31:赤, 32:緑, 33:黄, 34:青, 35:マゼンタ, 36:シアン, 37:白）
const COLOR_OFFSET = 30; // 0は黒、1は赤、2は緑、3は黄、4は青、5はマゼンタ、6はシアン、7は白
@murasuke
murasuke / js難読化.md
Last active August 5, 2025 04:47
alert('Hello world!)を難読化した文字をGeminiに解説させたら、ぐうの音も出ないほどわかりやすい解説をしてくれた 
_= ({}+[])[-~-~-~-~-~[]]+({}+[])[-~[]]+([]['']+[])[-~[]]+(![]+[])[-~-~-~[]]+(!![]+[])[+[]]+(!![]+[])[-~[]]+([]['']+[])[+[]]+({}+[])[-~-~-~-~-~[]]+(!![]+[])[+[]]+({}+[])[-~[]]+(!![]+[])[-~[]];__= (!![]+[])[-~[]]+({}+[])[-~-~-~-~[]]+(!![]+[])[+[]]+([]['']+[])[+[]]+(!![]+[])[-~[]]+([]['']+[])[-~[]];[][_][_]((![]+[])[-~[]]+(![]+[])[-~-~[]]+(!![] + [])[-~-~-~[]]+(!![] + [])[-~[]]+(!![] + [])[+[]]+'('+"'"+[][_][_](__+' "\\'+([]['']+[])[+[]]+(+[])+(+[])+(-~-~[]<<-~[])+(-~-~[]<<-~-~[])+'"')()+(!![] + [])[-~-~-~[]]+(![]+[])[-~-~[]]+(![]+[])[-~-~[]]+({} + [])[-~[]]+','+[][_][_](__+' "\\'+([]['']+[])[+[]]+(+[])+(+[])+(-~-~-~-~-~-~-~[])+(-~-~-~-~-~-~-~[])+'"')()+({} + [])[-~[]]+(!![] + [])[-~[]]+(![]+[])[-~-~[]]+([][[]] + [])[-~-~[]]+'!'+"'"+')')()

このコードは、ブラウザに「Hello, World!」というアラートダイアログを表示させるための、意図的に難読化されたJavaScriptコードです。

このような記述スタイルは、限られた記号（この場合は [](){}+-~_!,'"）のみを使って任意のJavaScriptコードを生成するもので、JSFuck と呼ばれることもあります。

コードの処理の仕組み

@murasuke
murasuke / input.tsx
Created June 26, 2025 07:54
shadcn/ui 自分で値を保持する<Input>
import * as React from "react"
import { cn } from "@/lib/utils"
/**
* 内部で値を保持し、onChangeイベントをラップするカスタムフック。
* @param {string | number | readonly string[] | undefined} defaultValue - 初期値。
* @param {(e: React.ChangeEvent<HTMLInputElement>) => void} [onChange] - 親から渡される元のonChangeハンドラ。
* @returns {{ value: string | number | readonly string[] | undefined, handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void }}
*/
export function usePersistValue(
@murasuke
murasuke / playwright-mcp.md
Last active June 16, 2025 12:45
playwrightの使いかた

インストール

code --add-mcp '{"name":"playwright","command":"npx","args":["@playwright/mcp@latest"]}'
@murasuke
murasuke / lt-timer.html
Last active June 14, 2025 06:48
プレゼンタイマー
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>プレゼンタイマー</title>
<style>
/* カラー変数の定義 */
:root {
--color-timer-default: #555;
@murasuke
murasuke / README.md
Last active May 26, 2025 13:24
マウスでターミナルにお絵描きをするシェルスクリプト

マウスでターミナルにお絵描きをするシェルスクリプト

1. 概要

このスクリプトは、ターミナルでマウスに合わせて文字を出力することでお絵描きができます

  • Any‑event tracking（マウス移動も含む全イベント）を有効化
  • 左ボタン押下中に移動すると「*」を、右ボタン押下中なら「@」を描画
  • cキーで画面をクリア、Ctrl+Cで終了
    を実現するものです。
@murasuke
murasuke / app.js
Last active April 16, 2025 06:48
import React, { useCallback, useState } from 'react';
import ReactFlow, {
ReactFlowProvider,
addEdge,
MiniMap,
Controls,
Background,
useNodesState,
useEdgesState,
} from 'reactflow';
@murasuke
murasuke / apache-reverse-proxy.md
Created April 14, 2025 14:50

リバースプロキシモジュールのインストール確認

ls /etc/httpd/modules mod_proxy.so mod_proxy_http.so

なければ

sudo yum install -y mod_proxy mod_proxy_http
@murasuke
murasuke / README.md
Last active April 17, 2025 14:49
sixelConverter.ts

Sixel グラフィックスと 6ピクセルブロック描画の仕組み

Sixel グラフィックス概要

  • Sixel は、主に VT-series（DEC VT100 以降）互換の端末で動作するビットマップ描画方式です。
  • ASCII や制御コードの間に特定のエスケープシーケンスを埋め込むことで、端末上にカラー画像を表示できます。
  • 大まかな流れ
    1. ESC P q で描画モード開始
    2. #<パレット番号>;2;<R>;<G>;<B> でカラーパレット定義
    3. 6 行 × N 列 のブロックをまとめて 1 文字（“Sixel”）で表現
  1. ESC \ で描画モード終了
@murasuke
murasuke / README.md
Last active March 8, 2025 04:22

PHPからWindowsAPIを呼び出してみる

PHPからWindowsAPIを呼び出すことはできるのだろうか？と、たまたま気になったので調べてみると PHP FFI(Foreign Function Interface)で呼び出せるそうです

FFIのマニュアルのサンプルを確認すると、 Basic FFI usage

  • FFI::cdef()で、関数のプロトタイプ宣言(と、ライブラリファイル名)を渡す
  • $ffiオブジェクト経由で、動的に関数を呼び出すことができる