c4se記:さっちゃんですよ☆

.。oO(さっちゃんですよヾ(〃l _ l)ノ゙☆)

.。oO(此のblogは、主に音樂考察Programming に分類されますよ。ヾ(〃l _ l)ノ゙♬♪♡)

音樂は SoundCloud 等に公開中です。

考察は現在は主に Scrapbox で公表中です。

Programming は GitHub で開発中です。

現實に就いての一般三角形

昔に眞に關する三角形 : S/, S1, S2 - c4se記:さっちゃんですよ☆と云ふ愚にもつかぬ記事を書いた。此の時は各點・各邊に名が附いてゐなかった。今では名が有る。

現實に就いての一般三角形

此れは腐食性の高い曼荼羅だ。依って「一般」三角形と呼ぶ。腐食する樣子は現實に就いての一般三角形 - .。oO(さっちゃんですよヾ(〃l _ l)ノ゙☆)に有る。

向かひ合ふ點と邊は對應する。自由意志 - 虚構の軸、決定論 - 假象の軸、透明性 - 乖離の軸の三軸とも讀む。

發言の超越論的な根拠 - Speaker Deckとも關聯が有り、三角形の邊は不可避性、點は不可能性を意味する。三つの不可避性は現實ならば同時に成立せねば現實ではないが此れは出來ない。三つの不可能性は現實ならば同時に拒絶せねば現實ではないが此れも出來ない。中心は現實として現に顕はれてゐるが、空虚である。此れ等の事から工夫を凝らす事に成る。又、不可避性・不可能性を「不可避性」と「不可能性」と云ふ名で呼べる所から見れば、不可避性・不可能性は自由意志 - 虚構の軸に當たり、他の二軸には現實に就いての他の性質が當たる。

各邊の解說は以下に有る。

scrapbox.io

各點の解說は以下に有る。

c4se.hatenablog.com

react-swipeable と react-transition-group で swipe animation

以下のおもちゃ React component が有って、右に swipe したら右に fade out、左に swipe したら左に fade out したいとしよう。

import React, { useState } from "react";

const items = [
  {id: 1, content: "item 1"},
  {id: 2, content: "item 2"},
];

export function Example() {
  const [currentItemId, setCurrentItemId] = useState(1);
  const currentItem = items[currentItemId];
  return (
    <div className="Example">
      {currentItem.content}
    </div>
  );
}

先づ swipe event を設定しよう。react-swipeable を入れる。

npm install --save react-swipeable
import React, { useCallback, useState } from "react";
import { useSwipeable } from "react-swipeable"; // 讀み込む

const items = [
  {id: 0, content: "item 1"},
  {id: 1, content: "item 2"},
];

export function Example() {
  const [currentItemId, setCurrentItemId] = useState(0);
  const handlers = useSwipable({  // swipe event 用の handler を作る
    onSwipedLeft: useCallback(
      (event) => {
        setCurrentItemId(currentItemId + 1);
      }
    ),
    onSwipedRight: useCallback(
      (event) => {
        setCurrentItemId(currentItemId - 1);
      }
    ),
  });
  const currentItem = items[currentItemId];
  return (
    <div className="Example" {...handlers}> // event handler を設定する
      {currentItem.content}
    </div>
  );
}

これで .exemple 要素を左に swipe したら次の、右に swipe したら前の item に切り替へられる。(item が無い時の error を處理してゐないので盛大に bug ってはゐるが!)

次に swipe animation を設定しよう。react-transition-group を入れる。

npm install --save react-transition-group
npm install --save-dev @types/react-transition-group

SwitchTransaction が目的に適ふ。

import React, { useCallback, useState } from "react";
import { useSwipeable } from "react-swipeable";
import { CSSTransition, SwitchTransition } from "react-transition-group"; // 讀み込む
import "./Example.css"; // CSS を讀み込む

const items = [
  {id: 0, content: "item 1"},
  {id: 1, content: "item 2"},
];

export function Example() {
  const [currentItemId, setCurrentItemId] = useState(0);
  const [swipeoutDirection, setSwipeoutDirection] = useState<string | undefined>(undefined); // swipe animation の方向に依ってどっちの CSS を當てるか決める
  const handlers = useSwipable({
    onSwipedLeft: useCallback(
      (event) => {
        setCurrentItemId(currentItemId + 1);
        setSwipeoutDirection("left"); // 左へ swipeout
      }
    ),
    onSwipedRight: useCallback(
      (event) => {
        setCurrentItemId(currentItemId - 1);
        setSwipeoutDirection("right"); // 右へ swipeout
      }
    ),
  });
  const currentItem = items[currentItemId];
  return (
    <SwitchTransition mode="out-in"> // swipe animation する要素を SwitchTransition > CSSTransition で圍む。out してから次の要素が見えて欲しいので out-in
      <CSSTransition
        className="{`swipeout-${swipeoutDirection}`}" // この名に -exit だとか -exit-active だとか postfix の附いた class 名が對象の要素に着け外される
        key={currentItem.id} // 子に對して一意な値。React で loop する時に附ける key と同じ意味
        timeout={300} // transition の時間に合はせた
      >
        <div className="Example" {...handlers}>
          {currentItem.content}
        </div>
      </CSSTransition>
    </SwitchTransition>
  );
}

讀み込ませる CSS を作る。

.Example.swipeout-left-exit { /* -exit や -exit-active の部分が react-transition-group の仕樣。後は普通の CSS animation */
  transform: translateX(0);
}

.Example.swipeout-left-exit-active {
  transform: translateX(-800px);
  transition: transform 0.3s ease-in-out;
}

.Example.swipeout-right-exit {
  transform: translateX(0);
}

.Example.swipeout-right-exit-active {
  transform: translateX(800px);
  transition: transform 0.3s ease-in-out;
}

これで完成。

名實一致

内輪で三分間喋る時間が有ったのでこんな slide を流してゐた。

speakerdeck.com

喋り無しで見ると抽象と云ふ感じなので、かう放流しても理解される恐れが無いのだが、喋った當時からの考への違ひを補足すると、名實の外に無が有る型が缺けてゐるのと、名-名と實-實それぞれの局所的 holism が明らかな圖に成ってゐるべきだったと思ってゐる。