【Sublime Text3】おすすめパッケージ
こんにちは。がっちゃんです。
前回Sublime Text3の導入し日本語化を行いました。
今の時点でも最低限エディターとしての機能は備えているのでそのまま使用してもいいのですが、ここはやはり便利なパッケージをインストールしてより便利にしたいところ。
ということで、個人的に便利だと思うパッケージを紹介していきます。
※ここで紹介するのはあくまでWeb制作を目的にしたものです。
『Install Package』起動
前回でも触れてますが、今回改めてこの手順から進めていきます。
①「Ctrl + Shift + P」or「Command + Shift + P」を押す。
②出てきたウィンドウに「inst」と入力する。
③候補に出てきた「Package Control:Install Package」をクリック。
④出てきたウィンドウにインストールしたいパッケージ名を入れる。
以上がパッケージをインストールする際の共通手順です。
おすすめその１以降は割愛しますが、ご了承ください。
おすすめパッケージ その１『Emmet』
EmmetとはHTMLやCSSをコーディングする際、ショートカットキーを使用することで記述のアシストをしてくれる機能です。
まずはインストールパッケージで「emmet」と入力しましょう。
emmあたりで出てくると思います。
「Emmet」をクリックしたらインストールが開始されます。
さて、このEmmetがどういったアシストをしてくれるのか簡単に紹介します。
本来なら<div>～と記号を含めて記述していくのですが、このEmmetを使用すれば『<』などはいちいち書かなくてもよくなります。
例えば「div」とだけ書いて、ショートカットキー「Ctrl + E」（Macの場合は「Command + E」）を押すと一発で「<div></div>」というタグが展開されます。
「div+p+img」と書けば複数のタグを同時に展開することもできます。
慣れてくるとHTMLの記述が劇的に早くなります。
また、 このEmmetはCSSもサポートしているので
「mt10」と書いて「Ctrl + E」を押すだけで「margin-top:10px;」と変換できます。
HTML同様、複数のプロパティをまとめて展開もできます。
ちなみにプロパティの略字は、だいたいプロパティ名の頭文字に対応しています。
例）font-weightなら「fw」
backgroundなら「bg」など
こちらも慣れてくると爆速で記述できるようになります。
おすすめパッケージ その2『Color Highlighter』
これは主にCSSで役に立つのですが、
カラーコードを記述していると、そのコードの色と同じ
ハイライトが付きます。
これにより、パッと見でどんな文字色や背景色を
使用しているかが分かるようになります。
「あれと同じ色を持ってきたい」と思ったときに便利だな～と感じます。
おすすめパッケージ その3『AutoFileName』
画像などのファイルを参照する時、ファイルまでのパスをサポートしてくれます。
当然階層も表示してくれるので、いちいちフォルダを調べたりする必要がなくなります。
これも便利。
おすすめパッケージ その4『ConvertToUTF8』
これは文字エンコードを「UTF-8」に書き換えてくれるパッケージです。
昨今はUTF-8で作られたサイトが多いですが、
少し古いサイトだと「Shift-JIS」のファイルが出来てきたります。
そういったファイルをSublimetextで開くと文字化けしてしまうのですが、
このパッケージがあれば、UTF-8に書き換えてくれます。
かなりピンポイントな状況ですが、やっぱりあると便利なパッケージです。
ということで、個人的に便利だと思うパッケージをいくつか紹介させていただきました。
ここで紹介したものは、ほんっと～～～にごく一部です。
便利なパッケージはまだまだ山のようにありますので、
ぜひぜひ探してみてください。
それではまた。
【Sublime Text3】Sublime Text3導入と日本語化
こんにちは。がっちゃんです。
今回は普段仕事で使っている「Sublime Text3」というエディターの導入と初期設定についてまとめたいと思います。
というのも、先日PCを新しくしたので作業環境を1から準備しなくちゃいけないわけなんですが、ツールのインストールや初期設定なんかは今回のような機会でもないとなかなかすることがないので、備忘録を兼ねて記事にしようと思いました。
あ、PCの環境はWindows10（64bit）なので、Macの方は少し違うところもあるかもしれません。
『Sublime Text3』のインストール
まずはソフトのインストールです。
https://www.sublimetext.com/ にアクセスして「DOWNLOAD FOR WINDOWS」のボタンをクリック。
「Sublime Text Build 3211 x64 Setup.exe」というファイルがダウンロードされるので、それを起動します。
インストーラーが起動したら、特に内容は変えず「NEXT＞」を押していきインストールを実行します。
こんな画面が表示されればインストール完了です。
ここまではちょー簡単です。
ただこのままではツールバーは英語表記だし機能も少ないので、使いやすくなるようちょっとだけカスタマイズします。
日本語化
まずは日本語化ですね。
英語表記オンリーなブログから逃げてきたがっちゃんは、ここでも英語から逃げますよ！
ツールバーの中身も全部英語！
まぁそこそこ長く使ってるので分からない訳でもないんですが、日本語の方が落ち着きますよね！？
Sublime Textには便利なプラグインパッケージがたくさんあり、日本語化もそのパッケージの1つです。
日本語化以外にも入れておいた方が良いパッケージはたくさんあるので、その『パッケージ類を管理する機能』を最初にインストールします。
『Control Package』のインストール
「Ctrl + Shift + P」を押すと以下のような画面が出てきます。
出てきたテキスト入力欄に「PA」と入力するといくつか候補がでてくるので、
その中から「Install Package Control」というのをクリックします。
しばらくすると↑のようなダイアログが表示されます。
「パッケージコントロールのインストールに成功しました」ってでてますね。
以前は専用のコードを入力してインストールしなければならなかったのですが、
今はその手順がなくなっているようです。簡単になりました。
これでパッケージの管理ができるようになったので、いよいよ日本語化です。
『Install Package』起動
パッケージコントロールの機能の1つであるインストールパッケージを起動します。
名前通りパッケージをインストールする機能ですね。
まず「Ctrl + Shift + P」を押して、「inst」と入力します。
※文字を入力するたび表示される機能が絞られていきます。
「inst」まで入力するとインストールパッケージが一番上にくるので、
いつもこの4文字を入力してます。
「Package Control:Install Package」というのが出てきたら、それをクリックします。
そうすると同じような見た目のテキスト入力欄がまた出てきます。
ここにパッケージの名前を入力して目的のものをインストールしていきます。
日本語化に限らずパッケージをインストールするときは、いつもこの手順で始まるのでこの流れはしっかり覚えておきましょう。
今回は日本語化のパッケージをインストールします。
パッケージの名前は「Japanize」です。頭の数文字を入力してみましょう。
出てきたので早速クリックします。
しばらくすると以下のような画面が表示されます。
この時点でツールバー等は日本語になってますね。
ですがまだ完了はしていません。
パッケージの指示に沿って進めていきましょう。
まずは「C:\Users\ユーザー名\AppData\Roaming\Sublime Text 3\Packages\Japanize」内にある「～～.jp」という拡張子が付いたファイルだけを指定のディレクトリにコピーします。
拡張子が表示されていない場合はウィンドウの表示から「ファイル名拡張子」にチェックを入れましょう。
また、「AppData」というフォルダは隠しフォルダになっています。
これも表示されていない場合は、同じくウィンドウの表示から「隠しファイル」にチェックを入れましょう。
「～～.jp」ファイルの移動先ですが、移動元のフォルダと同じ階層にある「Default」というフォルダです。
移動先：「C:\Users\ユーザー名\AppData\Roaming\Sublime Text 3\Packages\Default」
私の場合もそうだったんですが、「Default」のフォルダが無い場合は新規に作成しましょう。
「Default」のフォルダにさきほどのファイル群をコピーします。
コピーできたら、「.jp」の拡張子を消してオリジナルファイルへと置き換えましょう。
この時、「Default」フォルダ内に同名のファイルがあった場合はバックアップを取っておきましょう。
置き換えた後の状態がこちらです。
次で最後です。
「C:\Users\ユーザー名\AppData\Roaming\Sublime Text 3\Packages\Japanize」にある
「Main.sublime-menu（.jpが付いていない方）」を、
「C:\Users\ユーザー名\AppData\Roaming\Sublime Text 3\Packages\User」にコピーします。
これでSublime Text3の日本語化作業は完了です。
お疲れさまでした。
本当は役立つプラグインの導入も一緒にまとめたかったのですが、思った以上に長くなったので2回に分けたいと思います。
がっちゃんによる社員ブログ（二世）最初の投稿
こんにちわ。
どうもはじめまして。がっちゃんと申します。
このブログ『ベルの音』は、「株式会社ベルテクノス」社員によるブログです。
基本的に業務にまつわる記事や個人的な趣味に関する
記事を投稿していく予定です。
それでもいいよ。って方のみこのままお進みください。
「そんなブログに興味はねぇ！」って方はブラウザバックをお願いします。
はい。当ブログ『ベルの音』最初の記事をご覧いただき、
誠にありがとうございます。
今回は初回ということもありますので、
ブログ開設の経緯や「株式会社ベルテクノス」について、
最後に筆者についての説明・紹介をしたいと思います。
「株式会社ベルテクノス」について
最初はわたくしことがっちゃんが所属する株式会社ベルテクノスについてです。
株式会社ベルテクノスは福岡および東京に本部を構える会社で
法人向けのソリューション・ITセキュリティ事業、ヘルスケア事業等を
取り扱う会社です。
ブログ開設の経緯
以前、会社から社員一人ひとりブログを始めるよう指示があり、
約半年間、ほそぼそとブログを書いていたのですが、
そのブログサービスのインターフェースがすべて英語だったため、
英語力がまるで無い私には上手に扱いきれませんでした。
※指示によりそのブログサービスを使用していたけど、
別にそれに縛られる必要はなかった
なので日本語で分かりやすいブログに移行し、
ついでに名前も新たにして心機一転、社員ブログ再出発と相成りました。
当ブログ『ベルの音』の趣旨
ではこのブログは一体何のブログか？についてです。
前述の通りこのブログは社員ブログです。
なので基本的に【業務にまつわる内容】が必須です。
それ以外にも個人的な内容を書いても良いというお達しもあったので、
仕事半分趣味半分なブログにできればいいなと考えてます。
ブログ筆者について
前ブログでは適当にイニシャルだけにしてたんですが、
それだと味気なかったので今回ハンドルネームっぽく考えてみることになり、
子どものころのあだなを少しもじった「がっちゃん」という名前にしてみました。
（ガジラのがっちゃんではないです）
その「がっちゃん」ですが、ベルテクノスの制作部に所属しております。
制作部では自社運営のウェブサイトの保守業務や
新しくサイトを作ったりしています。
つまりWEB制作です。
とりわけコーディングというエンジニアよりの仕事をしています。
趣味
ここから先はより個人的な内容となります。
「趣味はなにか？」と聞かれ真っ先に思い初のはやはりりゲームでしょうか。
主にコンシューマーゲーム機で遊んでますが、PCゲームも多少遊んでます。
昔から実況動画を見るのが好きなのでそういった動画を自分で作って、
このブログで公開していけたらと思ってます。
あと趣味と言っていいのか分かりませんが、三十路も通り過ぎた
このタイミングで自動二輪車免許の取得を目指してます。
ここ最近は（例の騒ぎで）自動車学校が休校になっていたため
お預けを食らいましたが、緊急事態宣言も解除された（5/15時点）ので
学校再開を期待しています。
免許を取得したらバイクを買ってあちこち走りに行く予定です。
以上、弊社、当ブログおよび筆者についての
簡単な説明・紹介でした。
説明回ということもあり、だいぶ堅い内容になってしまいました。
次回移行はもっとフランクにいきます。
近いうちにこのブログの見た目等もカスタマイズしていきます。
ここまで読んでくれた奇特な方で、時間と暇を持て余している人がいましたら、
今後もこのブログを見ていただけると幸いです。
以上、がっちゃんによる社員ブログ（二世）最初の投稿でした。
