#JTF2021W_D VimiumではじめるよちよちVimmerライフ / Vimmer beginners start with Vimium

Slide 1

Slide 1 text

VimiumではじめるよちよちVimmerライフ July Tech Festa 2021 Winter 2021/01/24(Sun) 玉木　岳爾 (Gakuji Tamaki) #JTF2021W #JTF2021W_D 1 資料のQRコード

Slide 2

Slide 2 text

2 【いきなりチャレンジ企画】本日の発表を1分でご紹介

Slide 3

Slide 3 text

3 https://www.independentlab.net/ppt-starwars/

Slide 4

Slide 4 text

4 はい。アップ完了です。これより20分で本日の発表をします。 p.s. #ゆるぼ ↓ #JTF2021W #JTF2021W_D でTweetしていただけると泣いて喜びます。 ❏ ブラウザハック術 ❏ Vimのおすすめキーバインド

Slide 5

Slide 5 text

自己紹介 ❏ 名前：玉木　岳爾 (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

Slide 6

Slide 6 text

❏ Vimのキーバインドに慣れたい方 ❏ 他のエディターと二股している方 ❏ ネットサーフィン好きな方どんな人に聞いてほしいか #JTF2021W #JTF2021W_D 6

Slide 7

Slide 7 text

キーバインド (key bind)とは｜「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典 https://wa3.i-3-i.info/word12450.html #JTF2021W #JTF2021W_D 語句確認)キーバインド 7

Slide 8

Slide 8 text

Vimのキーバインド Vimのキーに対する機能の割り当て語句確認)キーバインド 8 #JTF2021W #JTF2021W_D

Slide 9

Slide 9 text

お話したいこと #JTF2021W #JTF2021W_D 9 ❏ なぜVimに惹かれたか？ ❏ Vimの操作に慣れていくために ❏ そしてその先に見えた景色とは。。。 ❏ これがよちよちVimmer三種の神器だ

Slide 10

Slide 10 text

お話したいこと #JTF2021W #JTF2021W_D 10 ❏ なぜVimに惹かれたか？ ❏ Vimの操作に慣れていくために ❏ そしてその先に見えた景色とは。。。 ❏ これがよちよちVimmer三種の神器だ

Slide 11

Slide 11 text

なぜ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

Slide 12

Slide 12 text

お話したいこと #JTF2021W #JTF2021W_D 12 ❏ なぜVimに惹かれたか？ ❏ Vimの操作に慣れていくために Vimium使いましたということなのですが、、。 ❏ そしてその先に見えた景色とは。。。 ❏ これがよちよちVimmer三種の神器だ

Slide 13

Slide 13 text

Vimiumってなんなの？ ❏ 読み方は「ヴィミィユム」、「ヴィミィウム」？ ❏ Vimumではないです！Vimiumです！ ❏ 「それまちがってね？」とTwitterでご指摘されて気がつく、、 ❏ Chrome/Firefoxの拡張機能 ❏ Vimライクなキーバインドでブラウザを操作できる ❏ jは下、kは上、「/」で検索などなど #JTF2021W #JTF2021W_D 13

Slide 14

Slide 14 text

Vimの操作に慣れていくために #JTF2021W #JTF2021W_D 14 少し、Vimiumに出会う前の話をさせてください。

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Vimiumに出会う前の話 Vimでファイルを操作しようとしたら。あ”あ”あ”！インサートモードで移動しちゃう！！ #JTF2021W #JTF2021W_D 16

Slide 17

Slide 17 text

Vimiumに出会う前の話なぜ混乱した？ https://www.irasutoya.com/2014/02/blog-post_28.html #JTF2021W #JTF2021W_D 17

Slide 18

Slide 18 text

Vimiumに出会う前の話 Vimを使うモード切替キーバインド編集(タイピング) いきなり3つ出てきたのが効いた #JTF2021W #JTF2021W_D 18

Slide 19

Slide 19 text

Vimiumに出会う前の話 Vimを使うキーバインド編集(タイピング) インサートモードのまま編集モード切替 #JTF2021W #JTF2021W_D 19

Slide 20

Slide 20 text

Vimiumに出会う前の話キーバインド身に付いていないのに他のこともやるからパニクるっぽいな、、、 https://www.irasutoya.com/2014/02/blog-post_28.html #JTF2021W #JTF2021W_D 20

Slide 21

Slide 21 text

Vimのキーバインド Vimのキーに対する機能の割り当て語句確認)キーバインド(再掲) 21 #JTF2021W #JTF2021W_D

Slide 22

Slide 22 text

Vimiumに出会う前の話・・・・・ https://www.irasutoya.com/2014/02/blog-post_28.html #JTF2021W #JTF2021W_D 22

Slide 23

Slide 23 text

Vimiumに出会う前の話 https://www.irasutoya.com/2016/02/blog-post_547.html #JTF2021W #JTF2021W_D 23

Slide 24

Slide 24 text

Vimiumに出会う前の話 Vimを使うモード切替キーバインド編集(タイピング) キーバインドを覚えることだけを考える #JTF2021W #JTF2021W_D 24 https://www.flaticon.com/free-icon/point_556232

Slide 25

Slide 25 text

小話)クロール泳いだことはありますか？ https://www.irasutoya.com/2012/12/blog-post_429.html #JTF2021W #JTF2021W_D 25

Slide 26

Slide 26 text

小話)バタ足から覚えてから水泳のクロール https://www.irasutoya.com/2014/01/blog-post_3507.html https://www.irasutoya.com/2012/12/blog-post_429.html 26 #JTF2021W #JTF2021W_D

Slide 27

Slide 27 text

小話)バタ足から覚えてから水泳のクロール https://www.irasutoya.com/2014/01/blog-post_3507.html https://www.irasutoya.com/2012/12/blog-post_429.html 27 #JTF2021W #JTF2021W_D

Slide 28

Slide 28 text

Vimiumに出会う前の話水泳のクロールを身につけるには、まずバタ足から Vimを身につけるには、まずキーバインドから 28 #JTF2021W #JTF2021W_D

Slide 29

Slide 29 text

Vimiumに出会う前の話キーバインドだけ覚えられる、イイ感じのやつなんてあるの？？クロールでいうビートバン的な。 29 #JTF2021W #JTF2021W_D

Slide 30

Slide 30 text

Vimiumに出会う前の話もちろんあります！だって、#推しテク総選挙ですから 30 #JTF2021W #JTF2021W_D

Slide 31

Slide 31 text

https://www.irasutoya.com/2018/12/blog-post_418.html https://chrome.google.com/webstore/detail/vimium/dbepggeogbaibhgnhhndojpepiihcmeb キーバインドだけ覚えられる、イイ感じのやつ 31 #JTF2021W #JTF2021W_D

Slide 32

Slide 32 text

Vimium https://www.irasutoya.com/2018/12/blog-post_418.html https://chrome.google.com/webstore/detail/vimium/dbepggeogbaibhgnhhndojpepiihcmeb 32 #JTF2021W #JTF2021W_D

Slide 33

Slide 33 text

Vimの操作に慣れていくために #JTF2021W #JTF2021W_D 33 以上がVimiumに出会う前の話です。Vimのキーバインドをブラウザ上で覚えられることに気がついたわけなんですね。では、Vimiumのスゴイところはなんでしょうか。それについてこれからお話しします。

Slide 34

Slide 34 text

Vimiumのスゴイところめちゃシンプルに Vimのキーバインドでブラウザを操作できる 34 #JTF2021W #JTF2021W_D

Slide 35

Slide 35 text

Vimiumのスゴイところ 35 #JTF2021W #JTF2021W_D なにおきた？

Slide 36

Slide 36 text

そうなると思ったので、有給投下してデモ動画、8個も作りました(褒めてくれ Vimiumのスゴイところ 36 #JTF2021W #JTF2021W_D

Slide 37

Slide 37 text

i/I (Shift + i) Vimiumのスゴイところ h j k l gg/G (Shift + g) ページの上下スクロール 37 #JTF2021W #JTF2021W_D

Slide 38

Slide 38 text

l Vimiumのスゴイところ h J (Shift + j) K (Shift + k) gg/G (Shift + g) タブの移動 i/I (Shift + i) 38 #JTF2021W #JTF2021W_D

Slide 39

Slide 39 text

l Vimiumのスゴイところ h j/J k/K gg/G (Shift + g) i/I (Shift + i) ページの戻る/進む 39 #JTF2021W #JTF2021W_D

Slide 40

Slide 40 text

l Vimiumのスゴイところ h j/J k/K gg/G (Shift + g) i/I (Shift + i) リンククリック移動したいリンクのアルファベットを指定 Iは別タブ 40 #JTF2021W #JTF2021W_D

Slide 41

Slide 41 text

ページの最上部と最下部 Vimiumのスゴイところ h j/J gg/G (Shift + g) 41 #JTF2021W #JTF2021W_D

Slide 42

Slide 42 text

Vimiumのスゴイところ「ページ内検索」からの「リンク移動」 I (Shift + i) / K (Shift + k) l J (Shift + j) 42 #JTF2021W #JTF2021W_D

Slide 43

Slide 43 text

Vimiumのスゴイところをもっと引き出すカーソルがページ外にいってしまうと Vimiumのキーバインドが効かない。そこでカーソルをページに戻す必要がある。そこで検索バーに「j」と叩くと、「javascript:」が入力されるようにChromeで設定しておく。 43 参考: 検索エンジンはカスタマイズしてほしいです #JTF2021W #JTF2021W_D

Slide 44

Slide 44 text

Vimiumのスゴイところをもっと引き出す検索バーに「t」と叩くだけでページのタイトルとURLをコピーする 44 参考: 検索エンジンはカスタマイズしてほしいです #JTF2021W #JTF2021W_D

Slide 45

Slide 45 text

Vimiumのスゴイところ https://www.irasutoya.com/2017/03/blog-post_49.html 45 #JTF2021W #JTF2021W_D

Slide 46

Slide 46 text

Vimiumのスゴイところ https://www.irasutoya.com/2017/03/blog-post_49.html 46 #JTF2021W #JTF2021W_D

Slide 47

Slide 47 text

お話したいこと #JTF2021W #JTF2021W_D 47 ❏ なぜVimに惹かれたか？ ❏ Vimの操作に慣れていくために ❏ そしてその先に見えた景色とは。。。 ❏ これがよちよちVimmer三種の神器だ

Slide 48

Slide 48 text

48 https://www.irasutoya.com/2014/10/blog-post_62.html

Slide 49

Slide 49 text

Vimiumを使い始めた今の課題 #JTF2021W #JTF2021W_D 49 円全体をVimのキーボードとしたとき、 Vimiumでは一部しか合致しない。 Vimだけのキーバインドは弱い。

Slide 50

Slide 50 text

Vimiumを使い始めた今の課題 ❏ 横の移動に弱い ❏ 右移動はw ❏ 合わせ技も弱い ❏ 右下はjw #JTF2021W #JTF2021W_D 50

Slide 51

Slide 51 text

打開策1) pcの壁紙 #JTF2021W #JTF2021W_D 51

Slide 52

Slide 52 text

1)アウトプットするためにインプット打開策2)アウトプット駆動なインプット #JTF2021W #JTF2021W_D 3)フィードバックから次のインプットネタを発掘 2)アウトプットまでこぎつけるいきなりフィードバックをもらえるアウトプットをしない 52

Slide 53

Slide 53 text

1)アウトプットするためにインプット打開策2)アウトプット駆動なインプット #JTF2021W #JTF2021W_D 3)フィードバックから次のインプットネタを発掘 2)アウトプットまでこぎつける 1b)自分で気づきを得る 1a)アウトプットする前のアウトプット 53 自分で気づきを得るためにアウトプット！ →Zennのスクラップで試験運用中

Slide 54

Slide 54 text

1)アウトプットするためにインプット打開策2)アウトプット駆動なインプット #JTF2021W #JTF2021W_D 3)フィードバックから次のインプットネタを発掘 2)アウトプットまでこぎつける 1b)自分で気づきを得る 1a)アウトプットする前のアウトプット他者からフィードバックをもらうためにアウトプット！ →ブログ、LT、 JTF！ 54

Slide 55

Slide 55 text

1)アウトプットするためにインプット打開策2)アウトプット駆動なインプット #JTF2021W #JTF2021W_D 3)フィードバックから次のインプットネタを発掘 2)アウトプットまでこぎつける 1b)自分で気づきを得る 1a)アウトプットする前のアウトプット 55 アウトプットには 2種類ある。 - フィードバックを自分からもらうか - 他者からもらうか

Slide 56

Slide 56 text

お話したいこと #JTF2021W #JTF2021W_D 56 ❏ なぜVimに惹かれたか？ ❏ Vimの操作に慣れていくために ❏ そしてその先に見えた景色とは。。。 ❏ これがよちよちVimmer三種の神器だ

Slide 57

Slide 57 text

これがよちよちVimmer三種の神器だ ❏ Vimium ❏ pcの壁紙 ❏ アウトプット駆動なインプット 57 #JTF2021W #JTF2021W_D

Slide 58

Slide 58 text

結びに) 2021年の抱負はありますか？ https://twitter.com/shinojapan/status/1345696643190980610 https://www.ted.com/talks/matt_cutts_try_something_new_for_30_days #JTF2021W JTF2021W_D 58

Slide 59

Slide 59 text

July Tech Festa 2021 Winter登壇 2021年の抱負 #JTF2021W #JTF2021W_D July Tech Festa 2020にプログラム委員として参加したので振り返ってみるエンジニア3年目を迎えるにあたってのふりかえりとこれから 59

Slide 60

Slide 60 text

Q&A #JTF2021W #JTF2021W_D 60 Q&Aタ～イム

Slide 61

Slide 61 text

Q&A自作自演 Q. Vimiumのインストール、初期設定教えて。 A.手前味噌ですが、コチラの記事を ↓。【Chrome拡張機能】Vimライクなキーバインドでブラウザを操作する Vimiumのオレオレ設定方法をスクリーンショットで解説 Q. メインエディタはもちろん Vimだよね？ A.コーディングする際には「Vimを使うように」している。オンラインミーティングでターミナルとエディタをひとつの画面のなかで行き来する際には VS Codeを使う。差分を見るときはプロジェクトで使っている GitlabのGUI。 #JTF2021W #JTF2021W_D 61

Slide 62

Slide 62 text

Q&A自作自演 Q. Vimを使っていくうえでやらなきゃよかったことはある？ A. プラグインを中途半端に入れてしまったこと。プラグインの機能は Vim本体ではできることか分からず、ググって見つけたいい感じのプラグインを入れてしまった。 https://github.com/gkzz/dotfiles Q. Vimを使っていくうえで補完とかどうするの？ A.動的言語のPythonを触ることが多く、その点は考える機会がないまま今回の発表がきてしまった。自分が Vimに惹かれたのは早くファイルを移動できることだったので。 #JTF2021W #JTF2021W_D 62

Slide 63

Slide 63 text

参考 ❏ philc/vimium: The hacker's browser. ❏ Chromeをvimライクに使えるようにする vimium - Qiita ❏ 検索エンジンはカスタマイズしてほしいです ❏ 【Chrome拡張機能】Vimライクなキーバインドでブラウザを操作する Vimiumのオレオレ設定方法をスクリーンショットで解説 ❏ Neovimの設定Neovim の設定を綺麗に整理してみた - Qiita #JTF2021W #JTF2021W_D 63

Slide 64

Slide 64 text

ご清聴ありがとうございました。 VimiumではじめるよちよちVimmerライフ #JTF2021W #JTF2021W_D 64