• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

株式会社ハイファイブクリエイト

東京都を拠点にWebサイト制作やシステム構築、WordPress保守管理やウェブコンサルティングを提供。

  • SERVICE
  • ABOUT
  • WORKS
  • BLOG
  • NEWS
  • CONTACT
ホーム / ブログ / TIPS / Sublime TextのFind All機能が便利すぎて仕事が捗る

Sublime TextのFind All機能が便利すぎて仕事が捗る

池田祐太郎 | 2021年4月24日 公開 コメントを書く

「恋に落ちるエディタ」として有名なSublime Text。もうかれこれ数年使っているメインのエディタです。いつからだろうと思って初めてライセンスキーを購入したメールの履歴を探したら、2014年だったので現時点でもう7年前。もうそんな経つとは…

コードを書くときはもちろんですが、正規表現や一括置換や同じ文字列を選択するといったSublime Text独自の機能を使ってテキスト情報の整形にもよく使っています。そして今日始めて知った(正確にはあるのは知っていたが使ったことがなかった)「FInd All」機能を使うことで「この機能、もっと早く知りたかった…!」と強く思いましたので、同じ思いをしないようご紹介します。

目次

  • 1 どんな時に使う機能?
  • 2 Find Allは検索した文字列をすべて選択する機能
  • 3 Find Allを使って特定の箇所だけ抜き出す具体例
  • 4 難しいことは必要なかった

どんな時に使う機能?

  • ウェブサイトの表から特定の文字だけ抜き出したい
  • HTMLページの特定の箇所だけ抜き出したい

こんなふうに思ったことはありませんか。ウェブページをコピペすると余計な領域までコピーしてしまい、結局一つずつ選択してコピーして貼り付けを繰り返す。無駄で不毛ですね。

例えば、一覧から特定の文字列だけ抜き取って、メールで送ったり、エクセルデータに貼り付ける作業。私の最近あった例だと、WordPressサイトで利用しているプラグイン一覧をエンジニアさんに送ろうとして、管理画面のプラグイン一覧を開いたところ、そのサイトの利用しているプラグイン数が数十個ありました。

管理画面プラグインの一覧例

これを一つ一つコピペするのは結構面倒な作業です。この場合プラグインのタイトルだけほしいので、その部分だけ抜き出す時に使える機能です。(※wp cliを使えば一発ですがそれは今回の主旨ではないため割愛)

Find Allは検索した文字列をすべて選択する機能

例として、Yahooニュースの一覧を見ると、記事一覧が並んでいます。

Yahooニュースの各記事一覧部分

ここから、ニュース記事部分をページ上でドラッグしてテキストをコピーしてエディタに貼り付けると、こうなります。

五輪コロナ対策 組織委が新会議
4/23(金) 23:50
航空・鉄道各社 減便検討始める
4/23(金) 23:25
中学生以上の世代 体力低下傾向
4/23(金) 22:58
邦人拘束 電話で無事を確認
4/23(金) 22:53
百貨店支援20万円 話にならない
4/23(金) 22:46

この中で「4/23(金)」という文字列を検索してみましょう。

文字列を検索した状態(まだFInd Allは押していない)

検索文字列に「4/23\(金\)」を入力すると「4/23(金)」が検索文字列としてヒットしているのがわかります。ただ、まだFInd Allは実行していないため、選択された状態ではありません。この状態で、Find Allを押すと…

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+D

Find Allを使って特定の箇所だけ抜き出す具体例

ようやく本題です。

  • ウェブサイトの表から特定の文字だけ抜き出したい
  • HTMLページの特定の箇所だけ抜き出したい

先程の例をやってみましょう。例は先程と同じYahooニュースのページ。(今回は表ではなくリストですが)

Yahooニュースの各記事一覧部分

赤枠で囲った部分のニュース記事タイトルだけを取得したいという場合、さっきはページ上でドラッグしてテキストをコピーしました。日付部分を手動(または正規表現で)消すとなるとそれも有りですが、間に差し込まれる広告部分があるため目視で確認して消すなどの作業が必要となってきます。手動で対応する場合は今は25件だからいいですが、もし1,000件だったらと思うと泣きますよね。

まずは、該当箇所をHTMLとして取り出します。ソースコードを開いてでもいいですが、より便利で効率のいいデベロッパーツールを使いましょう。デベロッパーツールについては説明は少し古いですが以前書きました。

1.デベロッパーツールとは何か

デベロッパーツールで該当要素を選択した状態

デベロッパーツールで抜き出したい全体要素を選択します。今回は書くliタグがニュースの一つひとつの要素のため、その親であるulタグが対象です。そして、このulタグ全体のhtmlをコピーしたいので、「F2」(または右クリックから”Edit as HTML”)を押すとHTMLが展開された状態になります。

F2を押すと要素以下のHTMLが展開される

この状態で、全選択→コピーをすると該当箇所のHTML要素のみをコピーすることができました。次はSublime Textにペーストします。タイトルの場所を調べてみると特定のclass名がついたdivタグで囲われているのがわかりました。一番上の記事の例だと以下です。

<div class="newsFeed_item_title">五輪コロナ対策 組織委が新会議</div>

なので、この文字列を検索すればいいのがわかります。

タイトル箇所はもちろん各記事によって変わるため、正規表現「.+」を使ってヒットするようにし、「?」で最短一致でマッチするように条件付けます。

<div class="newsFeed_item_title">.+?</div>

これで各記事がヒットするようになりました。さあ、ようやくこの状態で、「FInd All」(macの場合のショートカットはoption + return)を押します。これで各該当箇所のみが選択された状態になりました。なので新規タブを開き、ペーストします。

新規タブを開いて、Find Allで選択した要素をペーストした状態

あとは不要なHTMLを削除するだけです。これも正規表現で検索置換してみます。

不要なHTMLを正規表現で検索

検索文字列に以下を入力し、置換は何も入力せずで実行。

<div class="newsFeed_item_title">|</div>

これで、無事該当箇所のタイトルだけ抜き出すことができました!

Yahooニュースの記事を一括で取り出すなんてことはほぼないと思いますが、様々なウェブページで利用できそうです。表やリストを使っていたり、特定の箇所のみ今回のようにclassなどが設定されているとやりやすいです。

難しいことは必要なかった

当初は正規表現の「〜以外」をどうマッチさせるか悩んでて、特定のHTMLタグ以外のタグを全消去する方法はどうするんだろうとググってて、「否定先読み」で実現できるかと調べていましたが、そのためにまず「肯定先読み」を理解する所から始まり、そこまで正規表現を使いこなしているわけでもないため、結構難易度高そうだなあ…と思っていました。そうしたら、Sublime Textの便利機能によってこんな簡単に実現できてしまいました。本当、恋に落ち続けて早7年です。

きっとまだまだ自分の知らない機能があることでしょう。プラグインも含めると便利機能がありすぎる状態です。これからももっと使いこなしていきたい。

デザイナーや経営者はもちろん、日頃の仕事はパソコンというオフィスワーカーの方はSublime Textを使うことで仕事の効率化になることが多いと思いますので、非エンジニアにこそ是非試してほしいエディタです。

今回はFInd Allの説明で正規表現も出てきましたが、これもとても便利なので是非覚えてみてください。

メールコンサルティング
WordPress保守管理サービス

Filed Under: TIPS 関連タグ:Sublime Text

池田祐太郎

WordPressの導入を10年以上にわたって手掛けており、主に小〜中規模のコーポレートサイト・ECサイト・ブランドサイト等の企画・開発・保守・コンサルティングなどを行ってきました。2012年にハイファイブクリエイトを創業し、現在はWordPressの保守やコンサルティング、ディレクションや開発業務などを担当しています。 プロフィール詳細

Reader Interactions

コメントを残す コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

For security, use of Google's reCAPTCHA service is required which is subject to the Google Privacy Policy and Terms of Use.

I agree to these terms.

この記事と関連する記事

エクセルを使って顧客データから任意の条件に合う顧客を抽出する方法
2022年5月11日
タグ: Sublime Text, エクセル, 効率化
カテゴリー: TIPS
仕事効率化したいデスクワーカーのための正規表現
2021年5月7日
タグ: Sublime Text
カテゴリー: TIPS
なぜかSSL化されないエックスサーバーのWordPress 簡単インストール機能でhttpsに変更し常時SSLを実現する方法
2022年5月24日
タグ: SSL, サーバー
カテゴリー: TIPS

人気記事

  1. 同一サーバー上に構築するWordPressのテスト環境の作り方
  2. サイト制作の要件定義書に普段書いている内容(ダウンロード可)
  3. ダウンロードして即使えるサイトマップ(サイト構成図)のテンプレート5点
  4. コラム:class名とid名はどうやってつければいい?
  5. Elementorで表を作る3つの方法
  6. 【2022年最新】WooCommerceで作られた国内ECサイト一覧まとめ

最初のサイドバー

WordPress保守管理サポート

Search

最近の投稿

  • なぜかSSL化されないエックスサーバーのWordPress 簡単インストール機能でhttpsに変更し常時SSLを実現する方法
  • ブラウザ戦争の一区切り。Internet Explorer のサポート終了で思うこと
  • エクセルを使って顧客データから任意の条件に合う顧客を抽出する方法
  • 2022年以降WordPressのテーマを選ぶ際にこれだけは注意しておきたいポイント
  • ブロックエディタを拡張するSnow Monkey Editorプラグインはコーポレート+ブログに適切

カテゴリー

  • CSS初心者
  • HTML初心者
  • TIPS
  • WooCommerce
  • WordPress
  • エステサロン
  • お知らせ
  • キュレーション
  • サイトマップ
  • システム会社
  • デベロッパーツール入門
  • ブログ
  • ホームページ制作
  • ホームページ制作無料講座
  • メール
  • モバイル
  • 仕事のこと
  • 制作実績
  • 整体院
  • 美容院
  • 雑感

タグ

Android aws Backlog BtoC CMS css Dropbox Paper elementor google workspace Gutenberg HTML IE10 iPhone jQuery Mac php SEO SNS ssh SSL Sublime Text Webサイト高速化 WordPress WordPressカスタマイズ WordPressテーマ WordPress構築調査 WPRocket アクセス解析 アプリ クラウド クラウドソーシング サブスクリプション サーバー ショートカット スマホサイト スマートフォン ツール フルサイト編集 ブログ プラグイン マーケティング リニューアル 保守管理 最適化 集客するサイト構築

アーカイブ

CONTACT

お問い合わせはこちら

Footer

  • PRIVACY POLICY
  • 特定商取引法に基づく表示
  • 転載・引用について
  • Facebook

© 2022 high five create All rights reserved.