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
2k
#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.4k
What I Need to Do Before Promoting Automation
gkzz
0
72
StackstormというIFTTT的なツールをDockerコンテナに載せた小話
gkzz
0
940
インフラエンジニアが考えてみた Mockの使いどころ
gkzz
1
660
QuickStartToGAS
gkzz
0
280
About Our House
gkzz
0
40
Other Decks in Technology
See All in Technology
Asset Centric な データ変換パイプラインの攻略法
recruitengineers
PRO
1
100
Platform EngineeringがあればSREはいらない!? 新時代のSREに求められる役割とは
mshibuya
2
3.2k
Japan AWS Jr. Championsがお届けするre:Invent2024のハイライト ~ラスベガスで見てきた景色~
fukuchiiinu
0
1.1k
攻撃者の視点で社内リソースはどう見えるのかを ASMで実現する
hikaruegashira
3
1.7k
Amazon Route 53, 待ちに待った TLSAレコードのサポート開始
kenichinakamura
0
210
20250122_個人向けCopilotどうなん
ponponmikankan
0
190
2025-01-24-SRETT11-OpenTofuについてそろそろ調べてみるか
masasuzu
0
130
第27回クラウド女子会 ~re:Invent 振り返りLT会~ 私の周辺で反響のあった re:Invent 2024 アップデートつれづれ/reinvent-2024-update-reverberated-around-me
emiki
1
560
CNAPPから考えるAWSガバナンスの実践と最適化
yuobayashi
3
270
ハンズオンで学ぶ Databricks - Databricksにおけるデータエンジニアリング
taka_aki
1
2k
メンバーがオーナーシップを発揮しやすいチームづくり
ham0215
2
340
MicrosoftのOSSだけでAIによるブラウザテストを構成する
ymd65536
1
220
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
Faster Mobile Websites
deanohume
305
30k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3.1k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.5k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
980
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.6k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
365
25k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Side Projects
sachag
452
42k
VelocityConf: Rendering Performance Case Studies
addyosmani
327
24k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
How GitHub (no longer) Works
holman
312
140k
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