html・cssファイルに記述している行数が多くなってくると、『いま表示されている編集画面は、ファイル全体のどれくらの位置なのかがわかったらなぁ』と思うことはありませんか? Atomテキストエディタには、そんな悩みを視覚的・直感的に解決してくれる便利な「minimap」というパッケージ(=補助プログラム)があります。今日はそのインストール方法を説明しますね。
![](https://creating-homepage.com/wp-content/uploads/2016/01/10-1-1.jpg)
あっ、日本語環境で使用するためのパッケージ「japanese-menu」をインストールしていない人は、先にインストールしておいてくださいね。→Atomテキストエディタを日本語環境で使用するためのパッケージをインストールする方法
それでは、はじめますね。
minimapをインストールする
それではminimapのインストールをします。まずは[ファイル]→[環境設定]で設定画面を表示します。
![](https://creating-homepage.com/wp-content/uploads/2016/01/01-22.jpg)
![](https://creating-homepage.com/wp-content/uploads/2016/01/fbd23540c9b956875aacd43cab81f0e9.png)
![](https://creating-homepage.com/wp-content/uploads/2016/01/02-22.jpg)
インストールをクリックしてください。パッケージのインストール という画面が表示されます。
![](https://creating-homepage.com/wp-content/uploads/2016/01/03-21.jpg)
![](https://creating-homepage.com/wp-content/uploads/2016/01/fbd23540c9b956875aacd43cab81f0e9.png)
![](https://creating-homepage.com/wp-content/uploads/2016/01/04-20.jpg)
検索枠に minimap と入力してください。
![](https://creating-homepage.com/wp-content/uploads/2016/01/05-17.jpg)
パッケージボタン をクリックしてください。
![](https://creating-homepage.com/wp-content/uploads/2016/01/06-15.jpg)
しばらくすると minimap と表示された枠が表示されます。一番上とは限らないので、ご注意を。
![](https://creating-homepage.com/wp-content/uploads/2016/01/07-15.jpg)
Installボタン をクリックします。
![](https://creating-homepage.com/wp-content/uploads/2016/01/08-12.jpg)
しばらく時間がかかりますので、お待ちください。インストールが終了すると、以下の画面のようになります。Uninstallボタン・Disableボタンが表示されていますね。これで正常にインストールが終了しています。
![](https://creating-homepage.com/wp-content/uploads/2016/01/09-8.jpg)
それでは、htmlファイルかcssファイルをみてみましょう。ファイル全体を表示している小さな地図が右端に表示されていると思います。これがminimapです。
![](https://creating-homepage.com/wp-content/uploads/2016/01/10-1-1.jpg)
mimimapを簡単に操作してみる
それでは、mimimapを簡単に操作してみましょう。まずは編集画面を少し(画像では1行目から124行目へ)スクロールしてみます。するとminimapの半透明枠も連動して移動します。
![](https://creating-homepage.com/wp-content/uploads/2016/01/11-8.jpg)
![](https://creating-homepage.com/wp-content/uploads/2016/01/fbd23540c9b956875aacd43cab81f0e9.png)
![](https://creating-homepage.com/wp-content/uploads/2016/01/12-6.jpg)
もうひとつだけ確認しましょう。今度はmimimapにマウスを移動させてください。「じゃんけんのパーの手」のアイコンが表示されますね。
![](https://creating-homepage.com/wp-content/uploads/2016/01/13-4.jpg)
ここでクリックすると、「じゃんけんのグーの手」アイコンになります。
このまま「じゃんけんのグーの手」アイコン(=クリックした)状態で、上下に移動させると、編集画面も連動してスクロールされます。画像では最終行のある画面へ移動しました
![](https://creating-homepage.com/wp-content/uploads/2016/01/14-3.jpg)
![](https://creating-homepage.com/wp-content/uploads/2016/01/fbd23540c9b956875aacd43cab81f0e9.png)
![](https://creating-homepage.com/wp-content/uploads/2016/01/15-2.jpg)
まとめ
今日は、html・cssファイルに記述している行数が多くなってきて『いま表示されている編集画面は、ファイル全体のどれくらの位置なのかなぁ』と思うようになった時に、位置を視覚的・直感的に把握することができる便利な「minimap」パッケージ(=補助プログラム)のインストール方法を説明しました。実は「minimap」にはいくつか設定できることがあるのです。次回はそのmimimapパッケージ設定について説明をしますね。
コメント