Sheeprograming

私の実家は新潟にあるのだが、ここに帰省してきた。東京から日帰りで。

実家の話をしてもしょうがないのでいくつか美味しかったものを共有する。

米

説明不要。最高

水沢うどん

赤城高原サービスエリア（下り）の "あかぎ庵" という店で頂いた。うどんは香川だけではない、と強烈に主張できる。舞茸の天ぷらも加えてさらに美味しく食べられる。無論、安くはないし高速道路から降りればもう少し安く食べられるのだが、東京から新潟に向かう道中でこれを食べられる、というメリットの絶大なこと。

そば

新潟は米だけではない。蕎麦も食べるべきだ。ひつじに小嶋屋 (ウェブサイト) の蕎麦を食べてきてもらったのだが「ひよちゃんがあそこまで強引に行けっていう理由が良く分かった」とご納得いただけた。蕎麦4人前2,920円 (1人頭 730円) だが、てんぷらなども付けると結構値は張る。が、ぜひ食べてほしい。

とりあえず次男が楽しそうだったので良し。東京じゃあまり見られないような大きなバッタやトンボも見られたし。

TRPGオンセ界隈交流会(2019/09) https://t.co/Cu0kTMOVVm

— HillTop＠プロット4 (@HillTop_TRPG) June 30, 2019

これに出席してきました。

開発やサーバ管理などに関するいくつかのノウハウの共有や、如何にしてモチベーションを維持するか等の話をのんのんと。Discord のチャットを IRC に、IRC の発言内容を Discord に転送することでバックアップなどの意味を持たせるという話はかなり興味深かった。GitHub - reactiflux/discord-irc

その他各々が何故今携わっているタスクを始めたのか経緯共有など。それぞれ全然違う経緯で始めているのも興味深い所。

この手のは今後もちょこちょこ参加していきたいなぁ。

サンプル

<div style="position: relative; height: 200px; width: 200px; background-color: white; border: 3px double black; border-radius: 100px;">
    <div style="position: absolute; left: 100px; top: 100px; width: 100px; border-top: 1px hsl(0,60%, 50%) solid; transform-origin: left top;"></div>
    <div style="position: absolute; left: 100px; top: 100px; width: 100px; border-top: 1px hsl(45,60%, 50%) solid; transform-origin: left top; transform: rotate(45deg);"></div>
    <div style="position: absolute; left: 100px; top: 100px; width: 100px; border-top: 1px hsl(90,60%, 50%) solid; transform-origin: left top; transform: rotate(90deg);"></div>
    <div style="position: absolute; left: 100px; top: 100px; width: 100px; border-top: 1px hsl(135,60%, 50%) solid; transform-origin: left top; transform: rotate(135deg);"></div>
    <div style="position: absolute; left: 100px; top: 100px; width: 100px; border-top: 1px hsl(180,60%, 50%) solid; transform-origin: left top; transform: rotate(180deg);"></div>
    <div style="position: absolute; left: 100px; top: 100px; width: 100px; border-top: 1px hsl(225,60%, 50%) solid; transform-origin: left top; transform: rotate(225deg);"></div>
    <div style="position: absolute; left: 100px; top: 100px; width: 100px; border-top: 1px hsl(270,60%, 50%) solid; transform-origin: left top; transform: rotate(270deg);"></div>
    <div style="position: absolute; left: 100px; top: 100px; width: 100px; border-top: 1px hsl(315,60%, 50%) solid; transform-origin: left top; transform: rotate(315deg);"></div>
</div>

やり方

線は border-top:1px black solid; 等として描く。width を使って長さをコントロールしている。別に hr でやってもいいのかもしれない。

CSS の transform の値に rotate を使えば要素を回転させられるので、これで線の向きをコントロールしている。ただし、回転の際に基準となる点はそのままだと要素の中央なので、これを transform-origin: left top; で左上にしている。

だいぶ邪道な気がするが、こんなやり方もできたよ、という例。また、点A から 点B という指定もできず、「点A からどの方向に長さいくつの」という指定しかできないのも難点。計算が必要となる。

この手の事やりかたかったら canvas や svg 使った方が楽。

やることとしては以下。

1. @click.right のイベントを記載する
2. それだけだとデフォルトの右クリックメニューも出てしまうので prevent する
3. 右クリックされた座標のところにメニューを移動させる
4. メニューを表示させる

右クリックメニューを作る

適当な要素を使ってメニューっぽい html を作る。とりあえずは何もしなくても表示しぱなっしにしておけばよい。

右クリックにイベントをバインド

イベントハンドリング -vue.js にある通り、右クリックへのイベントバインドは簡単である。@click.right="onRightClick" で終わり。イベントのトリガーの詳細を . で繋いで記載できるのは楽であることだなぁ。

デフォルトのイベントを消す

そう難しい話ではなく、preventDefault() (説明) すればいい話である。

methods: {
  onRightClick: function(e){
    // 処理
    event.preventDefault();
  }
}

しかし、そんなことをしなくてもイベントのバインドの際に .prevent を付けてやれば vue が勝手にやってくれる (紹介)。

メニューの位置を決める

イベントの pageX, pageY や offsetX, offsetY を利用して表示位置を計算し、最初に作った右クリックメニューとなる要素をそこに移動させる。右クリックメニューとなる要素の CSS の position を absolute とかにしておき、CSS の left, top をいじって位置を設定する。なんか上手くいかなかったら適当に計算していい感じの位置にする。

表示・非表示をコントロールする

最初に作った要素に v-show (説明) を設定し、右クリックされた直後は表示し、メニューの外やメニューのいずれかの項目をクリックした際に消すように設定する。

キャラクターの位置関係をなんか厳密に管理するツールが欲しい、と思い書いてみたのがこんな感じのツールである。

機能として以下のようなものをつけている。

• 背景画像を設定できる。右上のメニューから変更が可能
• 縮尺が変更できる。右上のメニューから変更が可能
• キャラクターをダブルクリックすることで、そのキャラクターからの距離を測りやすくする。同心円・直線を表示する

また、キャラクターの追加・削除や名前・色の変更も可能。位置の移動はキャラクターをドラッグ/ドロップで実施。