Atomをもっと便利に使いこなそう!【ブラウザ操作編】


制作部の藤代です。

前回はAtomにパッケージをインストールする方法を解説しましたが、今回はそのパッケージの中に面白いものを見つけたので紹介します。

atomic-chrome

atom_chrome

このパッケージを導入すれば「Google Chrome」のブラウザ内にあるテキストエリアや、Gmail、twitterなどの入力エリアを、Atomで操作することが出来るようになります(基本的には複数行編集出来る、テキストエリアのみが対象です)。

「atomic-chrome」のパッケージ自体は、Atomの中で検索してインストールすればいいだけなのですが、こちらを使う為には、パッケージと合わせてChromeのウェブストアから「Atomic Chrome」という拡張機能を追加する必要があります(無料)。

atomic-chrome_icon

こちら追加するとChromeの右上にAtomのアイコンが追加されます。

実際にAtomからChromeを操作するには、デスクトップにAtomを開いた状態で、適当なテキストエリアをクリックしてフォーカス状態にし、右上のatomアイコンをクリックするだけです。

クリックするとAtomに新しいタブが追加され、そこで編集した内容がリアルタイムでブラウザ側にも反映されます(ちなみにブラウザで編集した内容もAtom側に反映されます)

WordPressの投稿画面の本文を編集

通常はWordPressの管理画面内で作業するか、本文をコピーしてからエディターにペーストしなければならなかったものを、エディターから直接編集可能になります。エディターで編集出来れば、好きなようにHTML補完機能や、検索・置換の機能を使えるようになり、コピペの手間も無くなります!

chrome_content

↑の管理画面を↓のテキストエディターで編集

atom_content

ちょっとしたことかもしれませんが、ちょっとした時間短縮がフロントエンジニアには重要です。自分の選んだお気に入りのエディターをカスタマイズして、効率よく快適に仕事をしましょう!


カテゴリー: WEB関連 | タグ: , , ,

この記事を書いた人。

toshi

制作 toshi

1990年生まれの新米エンジニア。
慶応義塾大学文学部出身。

趣味は大学から始めた競技かるた(A級)/性格は飽きっぽいB型/移動手段はロードバイク/好きな食べものは馬刺し/わりと細身ですが、クーネルワークのクー(食)担当。

>>もっと詳しく