ドラッグアンドドロップできるファイルソートUIを作った

f:id:kawauso7c:20170816192849g:plain

検証サイト: https://kawausokun.github.io/reordering/
ソース: GitHub - kawausokun/reordering: Reordering UI (experimental)

ファイル・フォルダをソートできるようなUIが必要になった。
単一のリストでのソートなら特に面倒なことはないが、フォルダを考慮する必要があると難易度が上がる。操作者が並び替えたいのかフォルダに突っ込みたいのかを判定しないといけない。
Fancytree - Example Browser のUIを参考にした。

基本的な考え方

一般的なドラッグアンドドロップによるソートUIは、ドラッグ中に即時ソートするものも多い。(例: Vue.jsのリストレンダリングとhtml5のドラッグ&ドロップの実装 - Qiita)
しかしファイルをフォルダに入れる時などは、ドロップ先が移動したり変化したりすると、狙ったところに移動させにくくなる。なので、Fancytreeのように, ドラッグ中は挿入先を示すマークを表示し、ドラッグ終了時にファイルを移動させる方が良い。

f:id:kawauso7c:20170816194847p:plain

挿入場所は以下のように分類できる。

  • ドロップ先ファイル・フォルダの直前に挿入
  • ドロップ先ファイル・フォルダの直後に挿入
  • ドロップ先フォルダに挿入

ドロップ先がフォルダの時、前後に挿入したいのかフォルダに入れたいのかを判定する必要がある。ドロップ先の要素内での、カーソルの座標で決定することにする。

f:id:kawauso7c:20170816201608p:plain

ドロップ先要素の上部にカーソルがある場合は「直前に挿入」、下部なら「直後に挿入」、真ん中なら「フォルダに挿入」とみなす。
ドロップ先がファイルなら「直前に挿入」と「直後に挿入」だけ。

検証サイトでドラッグ中に表示される"y"はドロップ先要素内でのカーソルのY座標、"mode"は挿入場所を示している。

実装

Vue.jsで実装している。
Y座標さえ計算できれば、挿入場所を判定し、ドロップ先要素にクラスを付与することで、挿入先を示すマークをCSSで表現できる。

注意

  • 現状フォルダの中にフォルダは挿入しない想定。やるとしたらファイル・フォルダをコンポーネント化し再帰する実装とするだろう。
  • 製品とするならもう一歩使い勝手向上を狙いたい。例えばファイルが入ったフォルダがリストの最後にある場合に、そのフォルダの下に挿入できない。

愛されすぎたぬいぐるみたち

愛されすぎたぬいぐるみたち

愛されすぎたぬいぐるみたち

何年間、何十年間、人と生活を共にしてきたぬいぐるみを写した写真集。
歴史を感じさせる痛みや汚れは愛された証拠。
頭部と脊髄のみとなったキリンのぬいぐるみは壮絶。スカルサーペントかドロヘドロか。サバンナで肉食獣に食われたのか。それでも一応ぬいぐるみ。

作者のページからも見られる。MUCHLOVEDシリーズ。 www.marknixon.com

最近のタスク管理

仕事柄、複数のプロジェクトから発生するたくさんのタスクを並行してこなしている。タスク管理の手法なんてのは定番が決まっていて、単純なTODOリストやGTD等、ネットや本で調べて真似するのがいいだろう。(最初から自己流を混ぜるのは、本質が分からなくなるので良くない)

GTDは単なる複雑なタスクリストではない。
全てのタスクを洗い出し頭の中を空にすること、定期的に振り返りの時間を設けることが一番良いポイントだと思っていて、生産性を上げ、創造的な仕事に繋げるように仕組み作られている。
自分もしばらくGTDの流儀に従っていた(3段トレイまで用意した)んだけど、習慣化の難しさがあり、飽きがきた。振り返りをしなくなって、死蔵タスクばかりになった。振り返りは意外と頭に負荷がかかる。せっかく頭を空にしたのにまた見返すなんて!

今はちょっと考え方を変えて、自分でタスク全てを管理しないようにしている。つまり、自分以外の他人ができるタスクならすぐに他人に振る。または会社のチームで使っているRedmineやカンバン等の作業管理ツールにタスクを追いやるよう努力する。チームのスタックに積んでおけば、チームメンバーの誰かか自分がいつか消化するだろう。まあつまりそういうスタックが存在して管理されている必要があるんだけど。
できるだけ他所に押し付けた上で残った自分で優先的にやるタスクはTrelloで管理し、リストの数はなるべく少なくするようにしている。

  • Inbox : 思いついたことをひたすら放り込む
  • TODO Today : 今日やること。朝これを作ってから作業を開始する。

あとは仕事用とプライベート用のリストで分けたり。
しばらくこんな感じでうまくいっている気がする。創造的な仕事ができているかは怪しいな。

次この方法も飽きて面倒臭くなったら、「忘れるようなタスクは重要ではない」を採用して全て忘れる予定。

メールをフィルタリング

会社のメールはGmailを使用しているんだけど、自分に関係のないメールが流れすぎてそろそろ鬱陶しいので、フィルタリングする方法を調べてみた。結果、ラベルとフィルタ機能を使用して、文中に「◯◯さん」(自分の名前)が含まれるメールのみを集めるラベル My Inbox と、それ以外を集める -{label:my-inbox} (My Inboxラベルがついていない)という条件を付与したラベル Team Inbox を作った。仕事中は My Inbox を開きっぱなしにして常に確認できるようにし、Team Inbox は数時間おきに確認することにする。

自分にとって重要なメールを絞り込むために、今回はホワイトリストを作ったが、ブラックリストにしたほうがメール数は増えるが漏れは無くなりそう。改めて受信トレイに並ぶメールの種類を確認してみると、明らかにチーム用メーリスに流すべきでない、皆が知る必要が無いものがあるのが分かった。そちらを根本から断つのもいいかもしれない。

これでディープワークできるわー

弊社

開発者全員が各々担当しているプロジェクト内で、品質、納期、他成果物の価値全てに責任を持つ。実態は、皆が全てに責任を負っているのではなく、誰も責任を負っていないように思われる。多数決が誰も責任を負わないために使われるように。

楽しくない理由

ハイキュー!!」ってバレー漫画読んでて、「お前がバレー楽しくないのはお前がヘタクソだからじゃないの」という趣旨のセリフがあった。楽しくない理由をちゃんと考えてみれば、自分の能力不足やその他要因を認識できて、ならやるべき事は分かった、となるかもしれないが、ちゃんと考えてない場面は多い。自分が今楽しくない理由は何?

2016年のキーボード、マウス事情

今年は仕事場でのインプットデバイス選びで悩んだ。実はまだ悩んでいる。
MacBook Airを外部ディスプレイ一つに繋いだ環境です。

1. HHKB Pro + LOGICOOL MX-518

LOGICOOL オプティカルマウス 1800dpi高精度センサー搭載 MX-518

LOGICOOL オプティカルマウス 1800dpi高精度センサー搭載 MX-518

今年入った時点では、この組み合わせを使っていた。でも有線が煩わしかったので、これらを人に譲って全てBluetooth接続に切り替えた。そういえば今年はBluetoothに対する信頼を取り戻した年で、イヤホンをJayBird X2にしてそちらはとても満足している。さてフルBluetooth環境にするかーと思ったら上手くいかなかった。

2. HHKB Pro BT + MS Bluetooth Mobile Mouse 3600

このマウス単体はとても良かった。静音系だけどクリック感は適度に返ってきて気持ちいい。コッって感じ。思えばHHKBはスコッなので近いかも。
キーボードがまずかった。まず有線タイプから打鍵感が変わるとは全く思っていなかったので、試打などせず注文したのだが、いざ打ってみたら全然別物だった。少なくともスコッではなく、自分の好みでない。
これだけなら諦めても良かったが、さてマウスとキーボードを同時に使ってみると、キーボードをBluetooth接続している間、マウスの接続に影響するという問題が起こってしまった。しばらくキーボードを叩いてマウスを動かそうとすると反応が無く、1秒後にやっとカーソルが動き出す。Bluetoothに相性問題なんてあるのか……。

3. HHKB Pro BT + LOGICOOL M325t

マウスを変え、ロジクールのUnifying方式にした。実店舗で色々なマウスを試用して、Magic Mouseは使いづらい、Mac対応マウスは少ない、好きなクリック感・スクロール感のものは無いときて、挙句探すのに飽きてこれ。
慣れるだろうかと投げやりに思ったけど、キーボード・マウス両方納得行かないものを使い続ける気がしなかった。

4. ThinkPad トラックポイント・キーボード

10年くらい前、ThinkPad x61を愛用して以来のThinkPad。試打して不満は無かった。Bluetooth版にしなかったのは、接続と剛性の問題に関するレビューを見たから。有線でもキーボードの1本のみならまだ許せる。

もう粗探ししているだけなんじゃないか、何を使っても満足行かない状態じゃないかと疑心暗鬼になる。なるが、もうしようがない。これもMacに繋いでみると不満点が多かった。よく言われているようだが、トラックポイントの動きが遅い。加速度変えるソフトを入れるとカーソルがガタつく。他にも個体差の問題?がある。
今ここ。

来年

思えば遠くへ来たもんだ、じゃねえよ。探すの飽きた。なのに納得できない思いだけ募る。アホみたいだ。

  • 選択肢1. MacBook Airのキーボードとトラックパッドに何の不満もないので、ディスプレイの位置を高くし、MacBookのキーボードを叩く。
    • 次買う予定のMacBook Proのキーボードに対する不安が残る。
  • 選択肢2. ErgoDox、Kinesis等、気になっていたキーボードを一通り試す。+ MS Bluetooth Mobile Mouse 3600
    • 真面目に探してないけど、どこで試打できるんだ。周りで持っている人いないぞ。
    • セパレート型って普通のマウス使えないんだっけ?
  • 選択肢3. MS マウス GMF-00298 は MS Bluetooth Mobile Mouse 3600 に使用感が近かった気がする + HHKB Pro BT
    • 一番安上がり
  • 選択肢4. 不満など無かった。どれでも良い。

私信: 交換してもらってありがとう、挙句これでごめんなさい。