「恋に落ちるエディタ」として有名なSublime Text。もうかれこれ数年使っているメインのエディタです。いつからだろうと思って初めてライセンスキーを購入したメールの履歴を探したら、2014年だったので現時点でもう7年前。もうそんな経つとは…
コードを書くときはもちろんですが、正規表現や一括置換や同じ文字列を選択するといったSublime Text独自の機能を使ってテキスト情報の整形にもよく使っています。そして今日始めて知った（正確にはあるのは知っていたが使ったことがなかった）「FInd All」機能を使うことで「この機能、もっと早く知りたかった…！」と強く思いましたので、同じ思いをしないようご紹介します。
どんな時に使う機能？
- ウェブサイトの表から特定の文字だけ抜き出したい
- HTMLページの特定の箇所だけ抜き出したい
こんなふうに思ったことはありませんか。ウェブページをコピペすると余計な領域までコピーしてしまい、結局一つずつ選択してコピーして貼り付けを繰り返す。無駄で不毛ですね。
例えば、一覧から特定の文字列だけ抜き取って、メールで送ったり、エクセルデータに貼り付ける作業。私の最近あった例だと、WordPressサイトで利用しているプラグイン一覧をエンジニアさんに送ろうとして、管理画面のプラグイン一覧を開いたところ、そのサイトの利用しているプラグイン数が数十個ありました。
これを一つ一つコピペするのは結構面倒な作業です。この場合プラグインのタイトルだけほしいので、その部分だけ抜き出す時に使える機能です。（※wp cliを使えば一発ですがそれは今回の主旨ではないため割愛）
Find Allは検索した文字列をすべて選択する機能
例として、Yahooニュースの一覧を見ると、記事一覧が並んでいます。
ここから、ニュース記事部分をページ上でドラッグしてテキストをコピーしてエディタに貼り付けると、こうなります。
五輪コロナ対策 組織委が新会議
4/23(金) 23:50
航空・鉄道各社 減便検討始める
4/23(金) 23:25
中学生以上の世代 体力低下傾向
4/23(金) 22:58
邦人拘束 電話で無事を確認
4/23(金) 22:53
百貨店支援20万円 話にならない
4/23(金) 22:46
この中で「4/23(金)」という文字列を検索してみましょう。
検索文字列に「4/23\(金\)」を入力すると「4/23(金)」が検索文字列としてヒットしているのがわかります。ただ、まだFInd Allは実行していないため、選択された状態ではありません。この状態で、Find Allを押すと…
「FInd All」を押した状態。少しわかりづらいですが、すべての「4/23(金)」が薄くグレーで選択されている状態です。（該当する行も反転している）
この状態までもっていければあとは簡単。削除する場合はdeleteで一発だし、Sublime Textでは一括で文字列の置換ができるため、「4/23」を「4/24」や「5/23」といったことにもできます。
ただ、これだけであれば検索機能を使わなくても、Sublime Textの機能である「同じ文字列の選択」機能で可能です。文字列がある文だけ連打しないといけないけど。同じ文字列の選択は以下のショートカットキー。
Windows or Linux: Ctrl+D
mac OS: Command+DFind Allを使って特定の箇所だけ抜き出す具体例
ようやく本題です。
- ウェブサイトの表から特定の文字だけ抜き出したい
- HTMLページの特定の箇所だけ抜き出したい
先程の例をやってみましょう。例は先程と同じYahooニュースのページ。（今回は表ではなくリストですが）
赤枠で囲った部分のニュース記事タイトルだけを取得したいという場合、さっきはページ上でドラッグしてテキストをコピーしました。日付部分を手動（または正規表現で）消すとなるとそれも有りですが、間に差し込まれる広告部分があるため目視で確認して消すなどの作業が必要となってきます。手動で対応する場合は今は25件だからいいですが、もし1,000件だったらと思うと泣きますよね。
まずは、該当箇所をHTMLとして取り出します。ソースコードを開いてでもいいですが、より便利で効率のいいデベロッパーツールを使いましょう。デベロッパーツールについては説明は少し古いですが以前書きました。
デベロッパーツールで抜き出したい全体要素を選択します。今回は書くliタグがニュースの一つひとつの要素のため、その親であるulタグが対象です。そして、このulタグ全体のhtmlをコピーしたいので、「F2」（または右クリックから”Edit as HTML”）を押すとHTMLが展開された状態になります。
この状態で、全選択→コピーをすると該当箇所のHTML要素のみをコピーすることができました。次はSublime Textにペーストします。タイトルの場所を調べてみると特定のclass名がついたdivタグで囲われているのがわかりました。一番上の記事の例だと以下です。
<div class="newsFeed_item_title">五輪コロナ対策 組織委が新会議</div>なので、この文字列を検索すればいいのがわかります。
タイトル箇所はもちろん各記事によって変わるため、正規表現「.+」を使ってヒットするようにし、「?」で最短一致でマッチするように条件付けます。
<div class="newsFeed_item_title">.+?</div>これで各記事がヒットするようになりました。さあ、ようやくこの状態で、「FInd All」（macの場合のショートカットはoption + return）を押します。これで各該当箇所のみが選択された状態になりました。なので新規タブを開き、ペーストします。
あとは不要なHTMLを削除するだけです。これも正規表現で検索置換してみます。
検索文字列に以下を入力し、置換は何も入力せずで実行。
<div class="newsFeed_item_title">|</div>これで、無事該当箇所のタイトルだけ抜き出すことができました！
Yahooニュースの記事を一括で取り出すなんてことはほぼないと思いますが、様々なウェブページで利用できそうです。表やリストを使っていたり、特定の箇所のみ今回のようにclassなどが設定されているとやりやすいです。
難しいことは必要なかった
当初は正規表現の「〜以外」をどうマッチさせるか悩んでて、特定のHTMLタグ以外のタグを全消去する方法はどうするんだろうとググってて、「否定先読み」で実現できるかと調べていましたが、そのためにまず「肯定先読み」を理解する所から始まり、そこまで正規表現を使いこなしているわけでもないため、結構難易度高そうだなあ…と思っていました。そうしたら、Sublime Textの便利機能によってこんな簡単に実現できてしまいました。本当、恋に落ち続けて早7年です。
きっとまだまだ自分の知らない機能があることでしょう。プラグインも含めると便利機能がありすぎる状態です。これからももっと使いこなしていきたい。
デザイナーや経営者はもちろん、日頃の仕事はパソコンというオフィスワーカーの方はSublime Textを使うことで仕事の効率化になることが多いと思いますので、非エンジニアにこそ是非試してほしいエディタです。
今回はFInd Allの説明で正規表現も出てきましたが、これもとても便利なので是非覚えてみてください。
コメントを残す