NicoHack!第三回 おしゃれなテキストエディターSublime Textを使おう!
閉じる
閉じる

新しい記事を投稿しました。シェアして読者に伝えましょう

×

NicoHack!第三回 おしゃれなテキストエディターSublime Textを使おう!

2013-03-12 19:00
  • 6

Sublime Text

前回の記事『テキストエディタのお話』で紹介したSublime Text(サブライムテキスト)ですが設定が複雑なんですね。

友人から「使えねー教えてくらさい(^ρ^)ア-」というメールが来たので、ついでとばかりに今回はにわかなギーク養成講座NicoHackで解説しますね!

この記事のため、久々にWindows起動しまししたよ。WindowsでもMacでもLinuxでもSublime Textは使えるんで今回の講座でガシガシ使ってやりましょう!

ちなみに今回の記事は実験的にHTMLでガンガン成形していきます。PCでもスマホでも電子書籍でも崩れないページデザインもお楽しみください。

Sublime Textのセットアップや利用時にスマホやタブレットからマニュアル的に確認すると便利かもしれません。電子書籍もありますしね。


Sublime Textって?

  • これなに?
    • Macを使ってるWebデザイナーやプログラマーが使ってるオサレなテキストエディタです。
  • 見た目だけ?
    • 外観だけの一発芸ではなくプログラミングや小説執筆などの硬派な用途に使える高機能さが売りです。
  • 無料?
    • 本来は有料ですが試用期間無制限で事実上無料です。たまに「気に入ったなら買っておくれ」というウィンドウが出ますがキャンセルすればおkです。
  • 英語?
    • 日本語化できます。
  • Macだけ?
    • Macの他、WindowsやLinuxでも使えます。
  • 難しい?
    • 嘘は言いません。間違いなくメモ帳よりは難しいですw
  • 簡単?
    • 何事もそうですが馴れればそういうこと考えずに使えるようになります。
  • 入力補完とかあんの?
    • 当然おkです。
  • 強調表示は?
    • デフォルトで70種類以上のシンタックスハイライトが可能です。HTML5/CSS3やRuby、Goまであります。
  • 正規表現は?
    • 当然おkです。
  • ファイラーは?
    • あります。結構見やすいです。
  • カラースキームは?
    • なんとTextMate互換です!膨大な量のカラースキームがすでに存在します。
  • プラグインは?
    • プラグイン追加で強化可能です。導入も支援機能があるので簡単。自作するときはPythonでの実装になります。
  • マクロは?
    • 記録可能です。
  • 秀丸エディタから乗り換えるべき?
    • 秀丸エディタの美点は使い勝手が変わらないだと思います。現代的な外観を持つエディタを使ってみたいならオススメできます。
  • Vimはうんぬんかんぬん
    • Vimmerさんに朗報です!なんとSublime TextはVimのキーバインドが使えます!ノーマルモードでのDDとかIでインサートとかVでビジュアルとか使えます。:はプラグイン呼び出しです。
  • まぁとりあえずEmacsならできる!
    • じゃあやってろよw

NicoHack!

はじめてNicoHackを読んでる方も居るかもしれませんね。

まだまだ私も手探りで講義していて第一回、第二回と講義の雰囲気が変わっては居ますが、基本的にNicoHackはライトなパソコンユーザーをにわかなギークにするのが目的です。

あるときは細かいことは抜きにしてスピーディに進めたり、あるときは遠回りして基礎的な知識の初歩解説を行います。

とりあえず使い方さえわかれば良い方や、基礎を正確にしっかり学びたい方には向きません。

にわかな感じでゆるく覚えていくって感じの記事なのでご了承ください。

ではではよろしくお願いします(*´∀`)


ダウンロード

ダウンロードはSublime Textの公式サイトからダウンロードできます。大きく書かれたDownload for ****をクリックしてご使用のOSのセットアップソフトウェアをダウンロードしてください。

インストールは全く複雑ではありません。いつもどおりインストールしちゃってください。基本的に英語ですがNextを続けてれば勝手にインストールされます。

公式サイトからもダウンロードできますがLinux UbuntuにはSublime TextのPPAが提供されています。アップデート関連が便利です。

sudo add‑apt‑repository ppa:webupd8team/sublime‑text‑2

sudo apt‑get update && sudo apt‑get install sublime‑text

前述を端末から実行すればインストールされます。


前準備

インストールしたでしょうか?インストールしたら使いはじめる前にやることがあるんでとりあえずSublime Textを起動してください。

そして終了してくださいw

いやこれ必要なんですよ。ジョークとかそういうんじゃないんで起動して終了してください(;´∀`)ハハハ

MacユーザーやLinuxユーザーはこういう面倒くさいことはないのですが、Windowsユーザーは隠しフォルダが表示される設定になっているか確認してください。

もし隠しフォルダを表示する設定をした記憶のない方は、ここを読んで隠しフォルダ表示してください。

Macの場合は以下を端末で入力するだけです。

defaults write com.apple.finder AppleShowAllFiles TRUE

killall Finder

Linuxユーザーは超簡単です。Ctlr+Hするだけです。言われなくても知っていますかw


ちょっと解説

Sublime TextはMacで中心に開発されているテキストエディタです。MacということはUNIX1文化圏のソフトウェアなわけです。

UNIX文化圏のソフトウェアの特徴として設定ファイルがテキストで構成されているということが挙げられます(プログラム詳しい人になれば全部そうだろって話になっちゃいますが傾向として)。

Sublime Textもその例に漏れず、設定のほとんどをテキストの編集によって行います。この点が前回の記事で私が発言していた「設定が難解」であり、友人が「よくわからん」と言ってた理由です。

このテキストで設定を変えるというのはレスポンシブに設定が反映されるという利点と、脅かすつもりはないですがたった1行、1文字変えただけで動作しなくなる可能性をはらむという欠点の2つがあるということです。

しかしこの欠点もとあることを行えば無くなったも同然となります。

テキストですからまるごとバックアップすれば、もし設定ミスで動作しなくなってもバックアップから初期状態や安定動作していたころの状態を復帰できるのです。


バックアップ

それではこれからバックアップしましょう。隠しフォルダは表示しましたか?表示していない場合はしてください。

それではSublime Textを起動してタブバーの右上あたりにあるPreferencesをクリックしBrowse Packages...をクリックします。

ご使用のOSの規定のファイラーが起動しPackagesフォルダが開きます。


そこから一つ上の階層であるSublime Text 2フォルダへ移動しましょう。例はWindows7です。


Sublime Text 2フォルダにあるPackagesフォルダがバックアップすべきフォルダです。このPackagesフォルダ内のファイルが全てSublime Textの振る舞いを決めるものとなっています。

Packagesフォルダをまるごとコピーして、わかりやすいようにSublime Text 2フォルダ内へ複製しておきましょう。フォルダ名もわかりやすいものにしましょうね(例えばPackages-Masterとか)。

Backupフォルダが既にありますが、初期状態からあるBackup関連フォルダはイジらないほうが精神衛生上良いです。よくSublime Text の振る舞いを理解して活用するのなら問題ないですが・・・。

今後、設定を変更してSublime Text の動作が不安定または動作すらしなくなり自分の力では回復不可能と踏んだのならば、複製したフォルダの中身をまるごとコピーして、おかしくなったPackagesフォルダへペーストし全て差し替えればSublime Text は初期化されて再びしっかり動作するようになります。

ある程度設定などを変更して動作が安定しているようならば気がついた時に、その安定したPackagesフォルダをバックアップしておくのをおすすめします。完全初期化するとまた設定やり直しなので。


ちなみにオリジナル設定済みPackagesフォルダをUSBメモリで持ち運べばネカフェなどのPCへSublime Text をインストールしオリジナル設定済みPackagesフォルダを適用すれば、いつも使っている環境と全く同じにできます。


そして複数のPCを持っているのならばオリジナル設定済みPackagesフォルダをDropboxやGoogle Driveなどでクラウド共有すれば、自動的に全てのPCへインストールされてるSublime Text を同じ環境にできるって事も覚えておきましょう。

こういう使い方はリビングのPCでも書斎のPCでも会社のPCでもSublime Text 使いたいぜ!って人におすすめです。OSの違いもあまり関係ありません。共通で使えます。


これでライトユーザーの陥りがちな「ソフトが動かなくなった!どうしよう\(^o^)/オワタ」というハードルはなくなりました。バックアップさえちゃんとすればね!


日本語化

ちょっと触ったらメニューが英語でしたよね?このままでも今までテキストエディタ使い込んでる人ならば問題ないのですがライトユーザーは意味がわからないでしょうし、使い勝手を上げるために日本語化します。

とりあえずここから2つのファイルをダウンロードします。

このブログの下の方にあるメニューバーコンテキストメニューのURL先から必要な2つのファイルをダウンロードするのです。


URLの先へ進むとダウンロードを促すボタンがあるのでクリックしましょう。するとファイルがダウンロードされます。Main.sublime-menuContext.sublime-menuです。

そしてまずはダウンロードしたMain.sublime-menuファイルをメモ帳とかで開きます。


Windowsの方はダウンロードしたMain.sublime‑menuファイルを開こうとするとこのようなダイアログが出ます。

インストールされたプログラム一覧からプログラムを選択する(S)にチェックをしてOKをクリックします。


プログラムの一覧が表示されたらメモ帳などお好きなテキストエディタを選んでください。見つからない場合はほかのプログラムの欄に入っていたりしますので各自好きなようにどうぞ。


ファイルを開いたらCtrl+Aとかで全選択をし、それらを全てコピーします。


そしてSublime Textへ戻り、バックアップの時と同じくPreferencesをクリックしBrowse Packages...をクリックしてPackagesフォルダを開きます。

Packagesフォルダの中からDefaultフォルダを探しだしてください。


今度はDefaultフォルダの中からMain.sublime-menuファイルを見つけ、メモ帳などで開き、中身を全選択してからペーストし、保存してください。

Context.sublime-menuファイルも前述と同様にメモ帳で開きコピーしPackages → Default → Context.sublime-menuを開きペーストして保存します。


うまく設定できれば日本語メニューでSublime Textを利用することができます。

ただしプラグインなどの仕様により、タブメニューの見出しまでを日本語化すると動作しないプラグインがあるようです。なので今回の日本語化ではタブメニューの見出しまでは日本語にはなりません。

使用には何も問題はないので、タブメニューが英語のままでも気にせず使ってください。



日本語入力問題

Windows版Sublime Text使っている方の中にはもう気付いている方も居るかもしれませんね。日本語を入力しようとするとカーソルの近くに変換候補が出てくれません。

実はMac以外のSublime Textはこのカーソルの近くへ変換候補を出してくれるインライン入力に未対応なんです。

なのでこのインライン入力に対応するための設定を行う必要があります。

大丈夫です。日本語化できた人ならば余裕で設定できますからw

Sublime Textは起動してますね?起動しているのならばCtrl+@を押します。

そして次のコードを入力欄へコピペしてEnterキーを押してください。

import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print('Please restart Sublime Text to finish installation')

何らかの通信が行われ、それが終わるまで待ってください。通信が終了したならばSublime Textを終了し再起動してください。

先ほどのコードで導入されたのはプラグインのSublime Package Controlです。

このプラグインはプラグインパッケージをインストールするのを補助する便利なプラグインなのです。


ではCtrl+Shift+Pを押してプラグインの一覧を出してみましょう。

そのまま文字列を入力するとプラグインが絞り込まれていきます。

先ほど導入したSublime Package ControlでインストールするわけですからInstall Packageと入力してEnterキーを押してください(実際にはinstくらいまで入力するとヒットする)。

Webからのパッケージ一覧を取得し始めます(左下に[ = ]のような通信マークが出ます)。

Webからパッケージ一覧を取得し終わったらWindows向けのインライン入力プラグインIME Supportを検索してEnterを押してインストールしてください。

通信が始まりIME Supportプラグインを取得しインストールが自動で始まります。インストールが終了したならばSublime Textを終了し再起動してください。

これでWindowsではインライン入力が可能となったはずです。


使ってみる

Sublime Textはショートカットキーが豊富です。基本的なショートカットはほかのテキストエディタと変わりませんが、豊富すぎるショートカットを覚えるまではタブメニューから確認しましょう。

タブメニューの中を呼んでいると色々面白いです。外観を決めるViewの解説を行いましょうか。

サイドバーは所謂ファイラーです。Fileからフォルダーを開けばフォルダ構成を表示してくれます。

タブは複数のファイルを同時に編集するときに便利なタブ表示、ミニマップは画面左へ編集中ファイルの構成を見せてくれます(ドラッグでスクロールもできる)。

面白いのが集中モードですね。サイドバーやミニマップが消えて本文だけ表示するようになります。

これは旧来のテキストエディタに無かったモダンな機能です。小説とかブロマガの記事作成に役立ちそうですね。


画面の色を変えるにはPreferencesからカラースキームです。

カラースキームの追加はCtrl+Shift+PでInstall Package、Color Schemeと検索するとたくさん出てきますよ。

ちなみに私が使ってるカラースキームはTomorrow-Nightです。Tomorrowは5種のカラースキームが入っててお得感がありますよ。


設定を変える

注意

Sublime Textは設定変更ミスをして保存してしまうと起動しなくなることがあります。一番最初に説明したバックアップせずに今までやっていたのなら今すぐバックアップを取りましょう。

文字サイズとか文字の種類とか変えたいですよね?Sublime Textでその辺りの設定を変更するにはPreferencesから基本設定 - ユーザーへ進みます。

そのユーザー設定へ次のコードをコピペして保存してみましょう。


{
    // カラースキーム
    "color_scheme": "Packages/Color Scheme - Default/Monokai Bright.tmTheme",
    // テーマ
    "theme": "Default.sublime-theme",
    // フォント
    "font_face": "Meiryo UI",
    // フォントサイズ
    "font_size": 12
}

見てわかる通り、それぞれの数値や文字列を変更し保存すると変更が即座に反映されます。

カラースキーム名はPackagesフォルダに入っている各々のカラースキームフォルダの中で確認できます。

そして新しくテーマがありますね。テーマも外観を変える要素でありテーマはこの設定でしか変更できません。

テーマの追加はCtrl+Shift+PでInstall Package、Themeと検索するといろいろ出てきます。

ちなみに私のユーザー設定はこうなっています。


{
    // フォント
    "font_face": "ゆたぽん(コーディング)",
    // フォントサイズ
    "font_size": 12,

    // カラースキーム
    "color_scheme": "Packages/Tomorrow Color Schemes/Tomorrow-Night.tmTheme",
    // テーマ
    "theme": "Soda Dark.sublime-theme",

    // カーソルスタイル "smooth" or "blick" or "solid" or "wide" or "phase"
    "caret_style": "phase",
    // カーソルのある行をハイライト
    "highlight_line": true,
    // 行間
    "line_padding_top": 3,
    // 最終行を延長
    "scroll_past_end": true,

    // 行番号表示
    "line_numbers": true,
    // ミニマップへ枠線表示
    "draw_minimap_border": true,
    // 変更されたファイルのタブを強調表示
    "highlight_modified_tabs": false,

    // 折り返す "true"なら必ず折り返す "auto"ならテキストファイルは折り返す。プログラムソースコードは折り返さない。
    "word_wrap": true,
    // 折り返し量 0ならウィンドウ幅。それを超えれば数値分の文字数。
    "wrap_width": 0,
    // 折り返しインデント(折り返したときの文頭位置)
    "indent_subsequent_lines": true,

    //閉じ括弧入力補完
    "auto_match_enabled": true,
    // 入力補完の確定をTABキーにする
    "auto_complete_commit_on_tab": true,
    // Vimキーバインドにする
    "ignored_packages":[],
    "vintage_ctrl_keys": true,
    "vintage_start_in_command_mode": true
}

これらの設定はここで詳しく解説されています。

いろいろいじってみて自分好みにカスタマイズしちゃいましょう。


いろんな機能

メモ帳しか使ったことの無い人にとって高機能なテキストエディタはどうやって使って良いものかわからないかもしれません。

ここでは高機能なテキストエディタでよく使う機能を紹介します。

文字列の検索置換

テキストエディタで文章を書いていると"変換の揺れ"があったりします。「慣れ」と「馴れ」とかですね。文字列の検索置換はこの揺れを解消するのに使えるのです。

Ctrl+Hか上部のFindタブから置換を選びましょう。

下部に検索置換フォームが出てきます。Findが検索、Replaceが置換です。

Replace Allを押すと検索フォームに入力した文字列は、置換フォームに入力した文字列へ全て置き換わります。

検索置換フォーム表示中にAlt+Rを押すか、左側のをクリックすると正規表現モードになります。

正規表現は更に高度に検索を行える機能です。詳しくは自分で調べてください。


マクロ

マクロは操作を自動化する機能です。

入力されたキー操作を全て記録し好きなときに記録した操作を再生することができます。

同じ操作を繰り返したいときに便利で、全ての行頭へ黒点を打ったりするのに使えます。

Ctrl+Qを押すか、Toolsタブからマクロ記録開始/停止で操作を記録できます。

そして記録したい操作を行って再びCtrl+Qなどで記録を停止します。

記録したマクロを再生するのはCtrl+Shift+Qです。

記録したマクロはマクロ保存で保存することができます。よく使うマクロを複数保存しておけば便利です。



いかがでしたか?

オサレでいながら設定項目も多く可愛くもかっこ良くも便利で自分好みにしていけるテキストエディタSublime Text。

これでブロマガもプログラミングも頑張って欲しいです(*´∀`)

何かあればコメント欄で応えますよ。


以上です。長文にお付き合いいただきありがとうございました。



  1. UNIXはOS。MacはUNIXから派生したOSである。LinuxはUNIXから強く影響を受けているが内部的には違うのでLinuxはUNIX文化圏のOSと呼ばれる。


広告
コメントを書く
コメントをするには、
ログインして下さい。