BotF

チラ裏

キーボードショートカット(使|作)ってますか?

この記事はfreee 20卒内定者 季節外れのアドベントカレンダー 6日目の記事です. 前回の記事はウエバさんの「秋の夜長に読書はいかがですか」でした.読書の秋と申しますけれども,”季節外れの”アドベントカレンダーにピッタリのテーマで,思わず「上手い!」と唸りました.

僕自身はもっぱら漫画派でファンタジーからSFまで読むのですが,活字の情報量も良くて,downyの無題を聴きながらSF小説柴田勝家とか)を読むのが好きですね.ニルヤの島はオススメです.漫画はハクメイとミコチを推しています.

あ,本と言えばですが,freeeは内定者向けに書籍購入予算を設けていて,入社までの期間に技術書などの書籍購入をサポートしてくれます.今回は,以下のツイートを読んで面白そうだと思ったので(真偽は別として),「リファクタリング・ウェットウェア ―達人プログラマーの思考法と学習法」をお願いしました.

はじめに

宣伝をして内定者としての義務は概ね果たした気がするので本題です.

僕は,来年度よりfreee株式会社でエンジニア新卒としてお世話になります,スエキといいます.趣味は,🥃,リブログ,週末のdotfilesイジり*1です.現在は他社でITエンジニアのアルバイトをしているのですが,いろんな可能性を見たいと思いfreeeの門を叩きました.

アプリケーションを作ること以上に,ツールやその設定(つまり作業環境)にこだわって,それらを使いこなすことに喜びを感じるきらいがあります.また,小学生の頃にWindowsのショートカットキー(Ctrl+C/Vでコピペとかのアレ)を紹介する書籍を読んでから,計算機を触ること自体が好きになりました.その辺りが源泉になっているようです.つまり,ショートカットキー大好きマンということです.

今日は,そんなショートカットキー大好きマンの近況やこだわりポイントをご紹介します.

最近の作業環境

さて,ショートカットキー大好きマンの近況です.

ツールや設定でいうと,普段はdotfilesを運用して,オリジナルのショートカットキー指定でゴテゴテになった設定ファイルを管理したり,よく使うアプリのインストールを自動化したりしています.

また,ツールというより周辺機器ですが,最近は自作キーボードを始めました*2.今回は遊舎工房さんHelixPicoのキットを購入しました.HelixPicoはロープロファイルという薄いキースイッチを想定している分割キーボードです.普段はMacのbuilt-inキーボードか,HHKBBTをMacの筐体に載せて使っているのですが,あまり手首を捻ったり浮かせたりしたくないので,以前からこうした薄型キーボードが欲しかったんですよね.

f:id:suek:20191006013921j:plainf:id:suek:20191006013721j:plain
実装の様子
f:id:suek:20191006014059j:plainf:id:suek:20191006014510j:plain
いろんな場所へ裸で持ち歩いていた結果,底面のネジを紛失

薄型なのでデスク天面に手首を固定しやすく楽,分割型なので身体も開くし見た目もかわいくて満足していたのですが,ここで1点問題が…

マウスポインタの操作が面倒

これはラップトップで分割キーボードを使う際の難点かもしれないのですが,built-inキーボードを使うときよりもMacトラックパッドから手が離れてしまいます.また,いちいちマウスに触りにいくのも癪です.可能であればキーボードから手を離したくない.

エディタなどであればキーボードで完結できるのですが,webサービスではショートカットキーが提供されていなかったり,あっても機能が足りない・設定できないということが多く,僕もマウスやトラックパッドを使って操作します.ですから,マウスポインタの操作が面倒なのは結構困るのです.ちなみに,webサービスの場合にはTabキーでだいたいの要素(テキストエリアやボタンなど)を選択し操作できますが,逆に言えば何度もキーを押下しないと目的の要素に到達できないので,むしろ不便です.

そこで,マウスポインタを使わなくてもいいように,chrome拡張を利用して目的のwebサービスにショートカットキーを追加していきたいと思います!*3

キーボードショートカットを(使|作)っていく

特によく利用するため問題になったサービスは以下です.

Google検索

人類であればGoogle検索を使ったことがあるというくらいポピュラーだと思うのですが,知る限りではキーボードショートカットが提供されていないようです.一日で最も利用時間の長いwebサービスなので,キーボードだけで操作したい.

具体的には,検索結果のアイテムの移動やページネーションの移動がしたいので,Google検索キーボードショートカットを導入しました.Vimライクなキーバインドでアイテムの上下選択(jk)やページネーションの前後移動(lh)が可能です.ちなみに/で検索フォームにフォーカスできるのが1ポイントで嬉しいです.

f:id:suek:20191006124121g:plain
Google検索キーボードショートカットの図

Twitter

Google検索の次によく見てそうなTwitter.comですが,実はキーボードショートカットが提供されています.G Hでホームに移動,.でタイムラインを更新,Nで新規ツイート作成などが可能です.

ちなみにキーボードショートカットを提供しているwebサービスは,?でショートカットキー一覧を表示できることが多いようです.例えばTwitterのショートカットキー一覧は以下ですが,他にもGitHubGoogle Calendarなどのサービスも確認できます.

f:id:suek:20191006125638p:plain
Twitterのショートカットキー一覧.`?`キーで表示.

基本的な機能については概ね満足なのですが,画像は開けるものの,現行ではツイート内の外部リンクを開くショートカットキーがないです.普段はトラックパッドの操作で問題ないのですが,キーボードだけとなると一々Tabキーで要素を選択しなくてはなりません.また,探した限りでは当該の操作を可能とするChrome拡張はありませんでした.

そこで,以下のような動作をするChrome拡張「Tweetのリンク選択ショートカット」を作りました.JKでツイートを選択中にAでリンク選択モードに移行,その状態でJKでリンク間を移動できます.

f:id:suek:20191006125535g:plain
作ったChrome拡張を適用した図

快適そのものです!これでまた快適なキーボードライフに戻ることができました.

さいごに

だいぶ長くなってしまいましたが,ここまで読んでいただきありがとうございます.読者のみなさんも,ぜひショートカットキーやツールにこだわってみてくださいね.

ちなみにショートカットキー大好きマンですが,反マウスの過激派とかではないです.当然ショートカットキーが苦手な分野もあって,例えばプロプライエタリで機能が豊富なアプリ*4の場合に,すべての機能にショートカットキーを割当てるのは不可能です.キーの組合せ自体は何通りも作れるかもしれませんが,特定の機能から想起しやすいような適切なキーの組合せの割り振りは困難を極めるでしょう.また,覚えられないのであればマウスポインタでの操作の方が断然速いです.

サービス開発においても,趣味嗜好のコンテクストに引っ張られず,本来の価値を意識して常にフラットに判断できるエンジニアを目指したいと思います.

次回はさよひこさんです 👋

*1:dotfilesとは,名前が「.(ドット)」から始まる,デスクトップアプリやコマンドラインツールの設定ファイルを指します.私は盆栽や庭の木を剪定するようにdotfilesをメンテするのが好きです.

*2:ミーハーの自覚があります.

*3:トラックポインタやトラックボールをキーボードに実装するという方法も考えられますが,まだ初心者なので,今回はできることで対応しました.

*4:Adobe製品とか