Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
#JTF2021W_D VimiumではじめるよちよちVimmerライフ / Vimmer b...
Search
gkzz
January 23, 2021
Technology
1
1.8k
#JTF2021W_D VimiumではじめるよちよちVimmerライフ / Vimmer beginners start with Vimium
Vimmerへの憧れを抱く私がどうやってVimを使いこなせるようにトレーニングしているか、そのために使っているVimiumの使い方、魅力について、Vim初心者の私がお話しできればと思います。
gkzz
January 23, 2021
Tweet
Share
More Decks by gkzz
See All by gkzz
MagicPodで始めるがんばらない回帰試験の自動化/Automated Regression Testing Journey with MagicPod
gkzz
0
3.1k
What I Need to Do Before Promoting Automation
gkzz
0
66
StackstormというIFTTT的なツールをDockerコンテナに載せた小話
gkzz
0
880
インフラエンジニアが考えてみた Mockの使いどころ
gkzz
1
610
QuickStartToGAS
gkzz
0
250
About Our House
gkzz
0
38
Other Decks in Technology
See All in Technology
2024年版 運用者たちのLLM
nwiizo
3
590
JEP 480: Structured Concurrency
aya_ebata
0
130
より快適なエラーログ監視を目指して
leveragestech
4
1.4k
事前準備が肝!AI活用のための業務改革
layerx
PRO
1
350
PDF Viewer作成の今までとこれから
hunachi
0
290
DroidKaigi 2024 たすけて!ViewModel
mhidaka
5
650
「認証認可」という体験をデザインする ~Nekko Cloud認証認可基盤計画
logica0419
2
390
Oracle Base Database Service:サービス概要のご紹介
oracle4engineer
PRO
0
13k
App Router を実プロダクトで採用して見えてきた勘所をちょっとだけ紹介
marokanatani
1
920
Privacy Sandbox on Android / DroidKaigi 2024
7pairs
1
210
可視化により内部品質をあげるAIドキュメントリバース/20240910 Hiromitsu Akiba
shift_evolve
0
190
不動産tech Product Night#2_AIことはじめ_GA橋本
takehikohashimoto
0
180
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
36
2k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
109
6.9k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
157
15k
The Invisible Customer
myddelton
119
13k
Done Done
chrislema
180
16k
How to name files
jennybc
75
98k
The Pragmatic Product Professional
lauravandoore
31
6.2k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Raft: Consensus for Rubyists
vanstee
135
6.5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
32k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
248
20k
Infographics Made Easy
chrislema
239
18k
Transcript
Vimiumではじめる よちよちVimmerライフ July Tech Festa 2021 Winter 2021/01/24(Sun) 玉木 岳爾 (Gakuji
Tamaki) #JTF2021W #JTF2021W_D 1 資料のQRコード
2 【いきなりチャレンジ企画】 本日の発表を1分でご紹介
3 https://www.independentlab.net/ppt-starwars/
4 はい。アップ完了です。これより20分で本日の発表をします。 p.s. #ゆるぼ ↓ #JTF2021W #JTF2021W_D でTweetしていただけると泣いて喜 びます。 ❏
ブラウザハック術 ❏ Vimのおすすめキーバインド
自己紹介 ❏ 名前:玉木 岳爾 (Gakuji Tamaki) ❏ Twitter/ @gkzvoice ❏ Github
/ @gkzz, Speakerdeck / @gkzz , Medium / @gkzz, Qiita/ @gkzz ❏ Zenn/ @gkz ❏ July Tech Festa 2021 Winterのボランティアスタッフ ❏ ハッシュタグは #JTF2021W #JTF2021W_D ❏ 所属:株式会社エーピーコミュニケーションズ ❏ お仕事:Djangoアプリケーション開発エンジニア (2020/07-現在) ❏ GKEにてCI/CD環境構築(2020/11-現在) ❏ StackStorm Custom Pack開発(2018/12-2020/06) ❏ 読書会:#技術書を英語で読む会 #JTF2021W #JTF2021W_D 5
❏ Vimのキーバインドに慣れたい方 ❏ 他のエディターと二股している方 ❏ ネットサーフィン好きな方 どんな人に聞いてほしいか #JTF2021W #JTF2021W_D 6
キーバインド (key bind)とは|「分かりそう」で「分か らない」でも「分かった」気になれるIT用語辞典 https://wa3.i-3-i.info/word12450.html #JTF2021W #JTF2021W_D 語句確認)キーバインド 7
Vimのキーバインド Vimのキーに対する機能の割り当て 語句確認)キーバインド 8 #JTF2021W #JTF2021W_D
お話したいこと #JTF2021W #JTF2021W_D 9 ❏ なぜVimに惹かれたか? ❏ Vimの操作に慣れていくために ❏ そしてその先に見えた景色とは。。。
❏ これがよちよちVimmer三種の神器だ
お話したいこと #JTF2021W #JTF2021W_D 10 ❏ なぜVimに惹かれたか? ❏ Vimの操作に慣れていくために ❏ そしてその先に見えた景色とは。。。
❏ これがよちよちVimmer三種の神器だ
なぜVimに惹かれたか? ❏ はやい ❏ @2,3年前のギークハウスのゆるのみ ❏ 開発ライブ実況 #1 Vim編 (メルペイ
Architectチーム Backendエンジニア ❏ しかも、いつでもどこでもはやい ❏ 最近リモートサーバー上の 数千行単位のmanifestファイルを編集 ❏ e.g. https://github.com/argoproj/argo-cd/blob/master/manifests/install.yaml ❏ VS Codeで開こうとしたら開けず、落ちた ❏ っていうか、そんなファイルなんであるの? #JTF2021W #JTF2021W_D 11
お話したいこと #JTF2021W #JTF2021W_D 12 ❏ なぜVimに惹かれたか? ❏ Vimの操作に慣れていくために Vimium使いましたということなのですが、、。 ❏
そしてその先に見えた景色とは。。。 ❏ これがよちよちVimmer三種の神器だ
Vimiumってなんなの? ❏ 読み方は「ヴィミィユム」、「ヴィミィウム」? ❏ Vimumではないです!Vimiumです! ❏ 「それまちがってね?」とTwitterでご指摘されて気がつく、、 ❏ Chrome/Firefoxの拡張機能 ❏
Vimライクなキーバインドでブラウザを操作できる ❏ jは下、kは上、「/」で検索などなど #JTF2021W #JTF2021W_D 13
Vimの操作に慣れていくために #JTF2021W #JTF2021W_D 14 少し、Vimiumに出会う前の話をさせてください。
Vimiumに出会う前の話 インサートモードで移動するな よ〜。すぐEscしろ!Esc! https://www.irasutoya.com/2015/03/blog-post_138.html https://www.irasutoya.com/2013/03/blog-post_490.html #JTF2021W #JTF2021W_D 15
Vimiumに出会う前の話 Vimでファイルを操作しようとしたら。 あ”あ”あ”! インサートモードで 移動しちゃう!! #JTF2021W #JTF2021W_D 16
Vimiumに出会う前の話 なぜ混乱した? https://www.irasutoya.com/2014/02/blog-post_28.html #JTF2021W #JTF2021W_D 17
Vimiumに出会う前の話 Vimを使う モード切替 キーバインド 編集(タイピング) いきなり3つ出てきたのが効いた #JTF2021W #JTF2021W_D 18
Vimiumに出会う前の話 Vimを使う キーバインド 編集(タイピング) インサートモードのまま編集 モード切替 #JTF2021W #JTF2021W_D 19
Vimiumに出会う前の話 キーバインド身に付いて いないのに他のこともや るからパニクるっぽい な、、、 https://www.irasutoya.com/2014/02/blog-post_28.html #JTF2021W #JTF2021W_D 20
Vimのキーバインド Vimのキーに対する機能の割り当て 語句確認)キーバインド(再掲) 21 #JTF2021W #JTF2021W_D
Vimiumに出会う前の話 ・・・・・ https://www.irasutoya.com/2014/02/blog-post_28.html #JTF2021W #JTF2021W_D 22
Vimiumに出会う前の話 https://www.irasutoya.com/2016/02/blog-post_547.html #JTF2021W #JTF2021W_D 23
Vimiumに出会う前の話 Vimを使う モード切替 キーバインド 編集(タイピング) キーバインドを覚えることだけを考える #JTF2021W #JTF2021W_D 24 https://www.flaticon.com/free-icon/point_556232
小話)クロール泳いだことはありますか? https://www.irasutoya.com/2012/12/blog-post_429.html #JTF2021W #JTF2021W_D 25
小話)バタ足から覚えてから水泳のクロール https://www.irasutoya.com/2014/01/blog-post_3507.html https://www.irasutoya.com/2012/12/blog-post_429.html 26 #JTF2021W #JTF2021W_D
小話)バタ足から覚えてから水泳のクロール https://www.irasutoya.com/2014/01/blog-post_3507.html https://www.irasutoya.com/2012/12/blog-post_429.html 27 #JTF2021W #JTF2021W_D
Vimiumに出会う前の話 水泳のクロールを身につけるには、まずバタ足から Vimを身につけるには、まずキーバインドから 28 #JTF2021W #JTF2021W_D
Vimiumに出会う前の話 キーバインドだけ覚えられる、 イイ感じのやつなんてあるの?? クロールでいうビートバン的な。 29 #JTF2021W #JTF2021W_D
Vimiumに出会う前の話 もちろんあります! だって、#推しテク総選挙 ですから 30 #JTF2021W #JTF2021W_D
https://www.irasutoya.com/2018/12/blog-post_418.html https://chrome.google.com/webstore/detail/vimium/dbepggeogbaibhgnhhndojpepiihcmeb キーバインドだけ覚 えられる、 イイ感じのやつ 31 #JTF2021W #JTF2021W_D
Vimium https://www.irasutoya.com/2018/12/blog-post_418.html https://chrome.google.com/webstore/detail/vimium/dbepggeogbaibhgnhhndojpepiihcmeb 32 #JTF2021W #JTF2021W_D
Vimの操作に慣れていくために #JTF2021W #JTF2021W_D 33 以上がVimiumに出会う前の話です。Vimのキーバインドをブラウ ザ上で覚えられることに気がついたわけなんですね。 では、Vimiumのスゴイところはなんでしょうか。それについてこれ からお話しします。
Vimiumのスゴイところ めちゃシンプルに Vimのキーバインド でブラウザを操作できる 34 #JTF2021W #JTF2021W_D
Vimiumのスゴイところ 35 #JTF2021W #JTF2021W_D なにおきた?
そうなると思ったので、有給投下して デモ動画、8個も 作りました(褒めてくれ Vimiumのスゴイところ 36 #JTF2021W #JTF2021W_D
i/I (Shift + i) Vimiumのスゴイところ h j k l gg/G
(Shift + g) ページの上下スクロール 37 #JTF2021W #JTF2021W_D
l Vimiumのスゴイところ h J (Shift + j) K (Shift +
k) gg/G (Shift + g) タブの移動 i/I (Shift + i) 38 #JTF2021W #JTF2021W_D
l Vimiumのスゴイところ h j/J k/K gg/G (Shift + g) i/I
(Shift + i) ページの 戻る/進む 39 #JTF2021W #JTF2021W_D
l Vimiumのスゴイところ h j/J k/K gg/G (Shift + g) i/I
(Shift + i) リンククリック 移動したいリンクのアルファベットを指定 Iは別タブ 40 #JTF2021W #JTF2021W_D
ページの最上部と最下部 Vimiumのスゴイところ h j/J gg/G (Shift + g) 41 #JTF2021W
#JTF2021W_D
Vimiumのスゴイところ 「ページ内検索」からの「リンク移動」 I (Shift + i) / K (Shift +
k) l J (Shift + j) 42 #JTF2021W #JTF2021W_D
Vimiumのスゴイところをもっと引き出す カーソルがページ外にいってしまうと Vimiumのキーバ インドが効かない。そこでカーソルをページに戻す必 要がある。 そこで検索バーに「j」と叩くと、「javascript:」が入力さ れるようにChromeで設定しておく。 43 参考: 検索エンジンはカスタマイズしてほしいです
#JTF2021W #JTF2021W_D
Vimiumのスゴイところをもっと引き出す 検索バーに「t」と叩くだけで ページのタイトルとURLをコピーする 44 参考: 検索エンジンはカスタマイズしてほしいです #JTF2021W #JTF2021W_D
Vimiumのスゴイところ https://www.irasutoya.com/2017/03/blog-post_49.html 45 #JTF2021W #JTF2021W_D
Vimiumのスゴイところ https://www.irasutoya.com/2017/03/blog-post_49.html 46 #JTF2021W #JTF2021W_D
お話したいこと #JTF2021W #JTF2021W_D 47 ❏ なぜVimに惹かれたか? ❏ Vimの操作に慣れていくために ❏ そしてその先に見えた景色とは。。。
❏ これがよちよちVimmer三種の神器だ
48 https://www.irasutoya.com/2014/10/blog-post_62.html
Vimiumを使い始めた今の課題 #JTF2021W #JTF2021W_D 49 円全体をVimのキーボードとしたとき、 Vimiumでは一部しか合 致しない。 Vimだけのキーバインドは 弱い。
Vimiumを使い始めた今の課題 ❏ 横の移動に弱い ❏ 右移動はw ❏ 合わせ技も弱い ❏ 右下はjw #JTF2021W
#JTF2021W_D 50
打開策1) pcの壁紙 #JTF2021W #JTF2021W_D 51
1)アウトプットするた めにインプット 打開策2)アウトプット駆動なインプット #JTF2021W #JTF2021W_D 3)フィードバックから次 のインプットネタを発 掘 2)アウトプットまでこぎ つける
いきなりフィードバックを もらえるアウトプットをしない 52
1)アウトプットするた めにインプット 打開策2)アウトプット駆動なインプット #JTF2021W #JTF2021W_D 3)フィードバックから次 のインプットネタを発 掘 2)アウトプットまでこぎ つける
1b)自分で気 づきを得る 1a)アウトプッ トする前のア ウトプット 53 自分で気づきを得る ためにアウトプット! →Zennのスクラップで試験運用中
1)アウトプットするた めにインプット 打開策2)アウトプット駆動なインプット #JTF2021W #JTF2021W_D 3)フィードバックから次 のインプットネタを発 掘 2)アウトプットまでこぎ つける
1b)自分で気 づきを得る 1a)アウトプッ トする前のア ウトプット 他者からフィードバックを もらうためにアウトプッ ト! →ブログ、LT、 JTF! 54
1)アウトプットするた めにインプット 打開策2)アウトプット駆動なインプット #JTF2021W #JTF2021W_D 3)フィードバックから次 のインプットネタを発 掘 2)アウトプットまでこぎ つける
1b)自分で気 づきを得る 1a)アウトプッ トする前のア ウトプット 55 アウトプットには 2種類ある。 - フィードバックを自分からもらうか - 他者からもらうか
お話したいこと #JTF2021W #JTF2021W_D 56 ❏ なぜVimに惹かれたか? ❏ Vimの操作に慣れていくために ❏ そしてその先に見えた景色とは。。。
❏ これがよちよちVimmer三種の神器だ
これがよちよちVimmer三種の神器だ ❏ Vimium ❏ pcの壁紙 ❏ アウトプット駆動なインプット 57 #JTF2021W #JTF2021W_D
結びに) 2021年の抱負はありますか? https://twitter.com/shinojapan/status/1345696643190980610 https://www.ted.com/talks/matt_cutts_try_something_new_for_30_days #JTF2021W JTF2021W_D 58
July Tech Festa 2021 Winter登壇 2021年の抱負 #JTF2021W #JTF2021W_D July Tech
Festa 2020にプログラム委員として参加したので振り返ってみる エンジニア3年目を迎えるにあたってのふりかえりとこれから 59
Q&A #JTF2021W #JTF2021W_D 60 Q&Aタ~イム
Q&A自作自演 Q. Vimiumのインストール、初期設定教えて。 A.手前味噌ですが、コチラの記事を ↓。 【Chrome拡張機能】Vimライクなキーバインドでブラウザを操作する Vimiumのオレオレ設定方法をスクリーン ショットで解説 Q. メインエディタはもちろん
Vimだよね? A.コーディングする際には 「Vimを使うように」している。オンラインミーティングでターミナルとエディタをひとつの 画面のなかで行き来する際には VS Codeを使う。差分を見るときはプロジェクトで使っている GitlabのGUI。 #JTF2021W #JTF2021W_D 61
Q&A自作自演 Q. Vimを使っていくうえでやらなきゃよかったことはある? A. プラグインを中途半端に入れてしまったこと。 プラグインの機能は Vim本体ではできることか分からず、ググっ て見つけたいい感じのプラグインを入れてしまった。 https://github.com/gkzz/dotfiles Q.
Vimを使っていくうえで補完とかどうするの? A.動的言語のPythonを触ることが多く、その点は考える機会がないまま今回の発表がきてしまった。自分が Vimに惹かれたのは早くファイルを移動できることだったので。 #JTF2021W #JTF2021W_D 62
参考 ❏ philc/vimium: The hacker's browser. ❏ Chromeをvimライクに使えるようにする vimium -
Qiita ❏ 検索エンジンはカスタマイズしてほしいで す ❏ 【Chrome拡張機能】Vimライクなキーバインドでブラウザを操作する Vimiumのオレオレ設定方法をスク リーンショットで解説 ❏ Neovimの設定Neovim の設定を綺麗に整理してみた - Qiita #JTF2021W #JTF2021W_D 63
ご清聴ありがとうございました。 VimiumではじめるよちよちVimmerライフ #JTF2021W #JTF2021W_D 64