vimでjsx(tsx)ファイルのfiletypeって

vim

javascriptreact(typescriptreact)だった。へー。

2022-09-24

TypescriptとMUIでダッシュボード作るときのテンプレ

Typescript + MUI + Reactとかで雑に業務アプリを開発する時には、公式提供のテンプレートで十分な感じがする。

https://mui.com/material-ui/getting-started/templates/ https://github.com/mui/material-ui/tree/v5.5.2/docs/data/material/getting-started/templates

量産用にスクリプト書いた。

create-react-appのtemplateオプションをなくす
curlでとってくるファイルをtsxじゃなくてjsにする

でjsでも使えるはず。

APP_NAME="sample-app"

npx create-react-app --template typescript $APP_NAME
cd $APP_NAME
npm install @mui/material @emotion/react @emotion/styled
npm install @mui/icons-material recharts
mkdir src/dashboard
cd src/dashboard
curl -OL https://raw.githubusercontent.com/mui/material-ui/v5.5.2/docs/data/material/getting-started/templates/dashboard/Chart.tsx
curl -OL https://raw.githubusercontent.com/mui/material-ui/v5.5.2/docs/data/material/getting-started/templates/dashboard/Dashboard.tsx
curl -OL https://raw.githubusercontent.com/mui/material-ui/v5.5.2/docs/data/material/getting-started/templates/dashboard/Deposits.tsx
curl -OL https://raw.githubusercontent.com/mui/material-ui/v5.5.2/docs/data/material/getting-started/templates/dashboard/Orders.tsx
curl -OL https://raw.githubusercontent.com/mui/material-ui/v5.5.2/docs/data/material/getting-started/templates/dashboard/Title.tsx
curl -OL https://raw.githubusercontent.com/mui/material-ui/v5.5.2/docs/data/material/getting-started/templates/dashboard/listItems.tsx
cd ..
cat <<EOS > App.tsx
import DashboardContent from './dashboard/Dashboard';

const App = () => {
  return <DashboardContent />;
};

export default App;
EOS

こいつを適当なシェルスクリプトとして保存して動かせばいい。

./build-template.sh
cd sample-app
npm run start

業務で量産する時とかこれでいい気がする。

2022-03-05

子供用の勉強アプリのサイトをつくった

作った/試した

ちゃんとドメイン取ってしまった。

manapi.jp

自分の子供相手に使うものなので、「ドメインとるほどか?」と思ったけど、あと2人も控えてるので取ることにした。

誰か使ってくれる人が出てこればなお良いな。

全員卒業まであと8年もあるのでちょいちょい機能加えていくと思う。
直近は「長さや単位」と「漢字」がほしいし、近いうちに「割り算」もやってくる。。。先は長いな。。

技術的なこと

特に面白い要素もないし、書くこともないので箇条書き。
Webは動向が早いですね。便利になってるから苦労はしないけど。

Next.jsを使ってみた
Vercelに入れたら楽だった
別にAPIとか作ってないのでReactだけでも良かったんだろうけど、やっぱ楽だった

2021-12-23

React-Leafletを使って地図の中央位置を変更したい

JavaScript

追記

丁寧に探すと公式にやり方が書いてあった。

react-leaflet.js.org

React-Leafletを使って地図を表示することになったが、どうにも地図のCenter位置を変更できない。

地図を出すときに以下のようにcenterは指定できるけど、どうも初期表示時の座標らしい。

そういうわけでmapCenterの値が変わっても地図の中央位置は変わらない。

export default function MapComponent({ mapCenter }) {
  const zoom = いい感じの倍率
  const height = いい感じの高さ
  const attribution = '<a href="https://maps.gsi.go.jp/development/ichiran.html">地理院タイル</a>'
  const url = 'https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png'
  
  return (
    <MapContainer
      center={mapCenter}
      zoom={zoom}
      <TileLayer attribution={attribution} url={url} />
    </MapContainer>
  )
}

調べるとuseMapというhookがあって、panTo()を呼び出すと移動できるっぽい。

リアクティブっぽくやりたいので以下のようにした。

import { MapContainer, TileLayer, useMap } from 'react-leaflet'

// こいつはjsxを返さない
// ただ地図を移動するだけの存在
function ChangeMapCenter({ position }) {
  const map = useMap()
  map.panTo(position)

  return null
}

export default function MapComponent({ mapCenter }) {
  const initialCenter = いい感じの座標
  const zoom = いい感じの倍率
  const height = いい感じの高さ
  const attribution = '<a href="https://maps.gsi.go.jp/development/ichiran.html">地理院タイル</a>'
  const url = 'https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png'
  
  return (
    <MapContainer
      center={initialCenter}
      zoom={zoom}
      <TileLayer attribution={attribution} url={url} />
      <ChangeMapCenter position={mapCenter} />
    </MapContainer>
  )
}

React-Leafletは3.2.2だった。

昔のバージョンだとたぶんuseMapはない。

2021-11-24

雑に使えるHTTPサーバー作った

作った/試した golang

なんか最近色々面倒だし、作った。

こんなの使わなくても、もっといいのがある気もする。

httpbinとかいいかなと思ったけど、微妙に欲しいのと違った。

github.com

なんで作ろうと思ったんだっけ？となったので、なんか色々面倒だった事を書いておく。

(その前に)面倒な状況0

そもそもこういうのは入れるのが面倒なのでcurlでダウンロード&解凍で使えるようにした。

# windows(CMD。Powershellわからない)
curl -OL https://github.com/twinbird/hits/releases/download/v0.0.1/hits_windows_x86_64.zip
# 右クリックからzipを解凍
./hits

# linux
curl -OL https://github.com/twinbird/hits/releases/download/v0.0.1/hits_linux_x86_64.tar.gz
tar xfvz hits_linux_x86_64.tar.gz
./hits

# macはしらんけどたぶんlinuxと同じじゃないですかね。。。

Goはバイナリ1つなんで、ダウンロードファイル消せば環境汚さなくていい。

面倒な状況1

「よそ様のREST API叩くコード書いたのになんか動かん」みたいなのがあって、私はプリントデバッグしかできない愚か者なのでとにかく中身を見たかった。

とりあえず叩く時にはcurlでこんなのしたり雑にできるのに、雑に受けるってのが意外となくて困った。

curl -X POST \
    -d "key=your key" \
    -d "secret=your secret" \
    -d "param="parameter" \
    http://nice-service/nice-api/v1/post

hitsを使うと

以下で起動したら標準出力にアクセスしてきた情報を表示するようにした。

./hits

Time:
        2021/11/16 23:59:02
URL:
        /nice-api/v1/post
Method:
        POST
Protocol:
        HTTP/1.1
Header:
        Content-Length:47
        Content-Type:application/x-www-form-urlencoded
        User-Agent:curl/7.68.0
        Accept:*/*
Body:
        key=your key&secret=your secret&param=parameter
Parameters:
        key:your key
        secret:your secret
        param:parameter

面倒な状況2

「別会社がシステム作ってくれるはずだけど、そこまだ出来てないからとりあえず適当にサーバー立てて、適当なスクリプトでログ取って」みたいなのがめんどい。

hitsを使うと

別に1と同じなんだけど、ログファイルを指定できるようにした。

レスポンス返せとか、500返せとかがありがちなんで一応つけた。

./hits -o log.txt -r "It Works!" -s 200

面倒な状況3

「お客さんにHTMLのデザインモックzipで送って見てもらいたいんだけど、サーバーないしどうしよう」みたいなのがめんどい。

hitsを使うと

ディレクトリ指定してサーブする機能を付けた。今度からbat書いて送りつけようかなと思う。

./hits -d doc_root

面倒な状況4

とりあえず適当なJSON返すサーバーがほしい。

hitsを使うと

レスポンスヘッダー指定するオプションも加えたけど、JSON返すこと多すぎなのでオプションにした。

返す内容も変えたいので、標準入力とかファイル指定もできるようにもした。

cat response.json | ./hits -j

その他

どうせいつか使うだろうとベーシック認証とかルーティング定義みたいなのも入れた。

使うのか？

雑感

Goで書くとどこでも実行ファイル1つをコピーしたり削除したりでいいので使い勝手がいいなと思った。

「開発環境のサーバー使え」って思ったけど、「それが出来たら苦労しねー」と思った。

メンテめんどいから標準ライブラリだけで作るつもりだったのに、id:mattn氏のライブラリからだけは逃れられなかった。怖い。

書いてて気づいたけど、git bash上での標準入力周りの挙動修正と、TLS対応が欲しいと思って入れてなかった。めんどい。必要になったらやろう。だれかやってくれ。

最近めんどうばっか言ってるな俺。

2021-11-04

ssh先からローカルのクリップボードへコピーしたい

開発環境開発ツール terminal

ググるとOSC52というものが出てきた。

OSC52って何ぞや

クリップボードを操作するエスケープシーケンスらしい。

こんな丁寧な解説があったので読むとこんな感じか。

文字	意味
\033	エスケープシーケンスの開始
52	OSC52グループのエスケープシーケンスだよ
;	区切り
c	クリップボードへコピーしてくれ
;	区切り
文字列	クリップボードへコピーする文字をBASE64にしたもの
\a	エスケープシーケンスの終わり

試しにssh先でこれをやってみるとローカルのクリップボードへ"HELLO, world"が入った。すげぇ。
(後に書くようにターミナルエミュレータへ設定が必要)

printf "\033]52;c;%s\a" $(echo "HELLO, world" | base64)

もっと簡単にやりたい

なんかスクリプト書くかと思ったら、なんと良いのがchromiumのリポジトリ内にあった。 https://chromium.googlesource.com/apps/libapps/+/master/hterm/etc/osc52.sh

githubのミラーはこちら https://raw.githubusercontent.com/libapps/libapps-mirror/main/hterm/etc/osc52.sh

なのでこういう感じで楽に設定できる

 curl -L https://raw.githubusercontent.com/libapps/libapps-mirror/main/hterm/etc/osc52.sh -o osc52.sh
 chmod +x osc52.sh
 sudo mv osc52.sh /usr/local/bin

するとこんな感じにできる

 echo 'HELLO' | osc52.sh # これでクリップボードへコピーされる

OSC52を許可するのはセキュリティリスクの懸念で、デフォルトでは無効になっている端末エミュレータが多いらしい。
(リモート先に悪意があるとクリップボードを簡単にいじれちゃうから？具体的な攻撃方法とかは調べたけどわからん。一応気を付けたほうがいいのかな)

git bash(mintty)で使うには設定が必要。

.minttyrcに以下を書く。

AllowSetSelection=yes

windows terminalだと設定不要っぽい。

tmux実行中でも動いた。screenもコード読む限り通りそう。というかコードがきれい。

余談だけど

ここを見るとvimとemacsのスクリプトもある。

https://chromium.googlesource.com/apps/libapps/+/master/hterm/etc

2021-07-27

redoc-cliを使ってopenapi(swagger)を書く

開発ツール

肌に合ったツールがわからなくて困ってたけど、良いのがわかったのでメモしとく。

準備する

nodeはインストールされているとして。

とりあえずプロジェクト用のディレクトリを用意してredoc-cliをインストールする。

mkdir api-project
cd api-project
npm install redoc-cli

プレビューしながら書く

それっぽくopenapiのyamlを書く。

vi api.yml

プレビューするためにサーバーを起動する。

npx redoc-cli serve api.yml --watch

これで

localhost:8080

へのアクセスでプレビューしながら編集できる。

HTMLとして出力する

単一の依存なしHTMLファイルとして出力できる。便利。

npx redoc-cli bundle api.yml

write ahead log

ロールフォワード用

vimでjsx(tsx)ファイルのfiletypeって

TypescriptとMUIでダッシュボード作るときのテンプレ

子供用の勉強アプリのサイトをつくった

技術的なこと

React-Leafletを使って地図の中央位置を変更したい

雑に使えるHTTPサーバー作った

(その前に)面倒な状況0

面倒な状況1

hitsを使うと

面倒な状況2

hitsを使うと

面倒な状況3

hitsを使うと

面倒な状況4

hitsを使うと

その他

雑感

ssh先からローカルのクリップボードへコピーしたい

OSC52って何ぞや

もっと簡単にやりたい

余談だけど

redoc-cliを使ってopenapi(swagger)を書く

準備する

プレビューしながら書く

HTMLとして出力する