読者です 読者をやめる 読者になる 読者になる

Kのプログラミング勉強ブログ

プログラミング勉強中のKです。できるだけ簡潔に、勉強したことをブログに載せていこうと思います。

【SublimeText】複数ファイルを表示させながら作業したい

例えばHTMLとCSSを同時に編集する時、同時に見ていたいですよね。

こんな時にもSublime Textなら解決できます。

例えば2ファイルをみたい時には、以下のコマンド。

Command + Option + 2
f:id:k-program:20150906174450p:plain

例えばCSSファイルを右にしたければ、あとは右にタブをドラック&ドロップするだけ。
f:id:k-program:20150906174517p:plain

戻したければ…
Command + Option + 1
でwindowを1つにします。
f:id:k-program:20150906174532p:plain

メモメモ。

【SublimeText】スニペットを使ってテンプレートを呼び出す

いっつも入力する様な当たり前の表記。

例えばHTMLの

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
</body>
</html>

のくだり。書くの面倒くさいですよね。

これがスニペットを使うと解消されます。


① Command + Shift + P でコマンドパレットを呼び出します。
f:id:k-program:20150906171933p:plain

② ここに「snippet html」と打ってみましょう。
f:id:k-program:20150906171948p:plain

③そして「Snippet: html」をクリックするとどうでしょう。あっという間に表示されます。
f:id:k-program:20150906172001p:plain

スニペットは自分で登録できたりするそうな。
メモメモ。

【Sublime Text】ショートカットキーを覚えたい!(コマンドパレット)

SublimeTextって便利ですけど、機能が色々あり過ぎて覚えられないですよね…

でも色々知って、より有効に使いたい!
でもキャッチアップする時間をまるまる取るのは御免!

そんな人(私とかw)のためにあるのがコマンドパレットです。

Command + Shift + P

例えば以下のファイルで、htmlの色付けをしてほしいとします。

f:id:k-program:20150906170346p:plain

そんな場合にはCommand + Shift + Pを押下し、ググる時と同じ様に、それっぽい検索ワードを入れてみます。
(英語のみ対応なのが難点です…)
Syntax html みたいな感じですかね。

f:id:k-program:20150906170405p:plain

すると、以下の様にhtmlの色付けとなります。

f:id:k-program:20150906170419p:plain

これで、必要なものだけ徐々に覚えていけますね。
メモメモ。

【Sublime Text】同じ文字列を一括編集する方法

以下のテキスト中で「test」⇨「hogehoge」と変換していきます。(Mac版)

f:id:k-program:20150906163834p:plain


① Command + F で検索画面にし(下部に検索機能が出力されます)、「test」と入力します。
f:id:k-program:20150906164126p:plain

②「Find All」を押下すると、testの部分すべてにカーソルがあたります。
f:id:k-program:20150906164245p:plain

③あとはタイピングして文字を入力するのみです。
f:id:k-program:20150906164538p:plain

知ってしまえば、とても簡単でした…メモメモ。

【Sublime Text】エディターの背景色を変えたい

f:id:k-program:20150906161323p:plain

基本設定(n) > カラースキーマ
から設定できる模様。

英語だと以下の様です。
Settings(n) > Color Scheme

メモメモ。

【Linux】pngquantをLinuxサーバー等にインストールする方法

pngquantについてはこちらを参照。

https://pngquant.org/
http://nukesaq88.hatenablog.com/entry/2013/04/16/194251

以下の様なコマンドで、pngファイル等を圧縮することができる。

$ pngquant hoge.png

サーバーには以下の様な方法でインストールすることができた。



【インストール方法】

1. インストールする任意のフォルダに移動する。
今回は/usr/local/srcというフォルダを作り、そこにインストールすることにした。

$ cd /usr/local/src


2. git cloneでpngquantをダウンロードする。

$ sudo git clone git://github.com/pornel/pngquant.git


3. pngquantフォルダに移動する。

$ cd pngquant


4. libpng-develをインストールする。

$ sudo yum install libpng-devel


※libpng-develがなくてsudo makeをしてしまうと、以下の様なエラーが出てしまう。

$ sudo make
./configure

  Compiler: gcc
     Debug: no
       SSE: yes
    OpenMP: no
    libpng: error ... not found (try: `apt-get install libpng-dev` or `yum install libpng-devel`)

make: *** `pngquant.o' に必要なターゲット `config.mk' を make するルールがありません.  中止.


5. makeコマンドでpngquantをインストールする。

$ sudo make


6. pathを/usr/binに指定する。

$ sudo ln -s /usr/local/src/pngquant/pngquant /usr/bin


7. これで完了。最後にversionを見てコマンドで使える様になっているかを確認する。

$ pngquant —version

2.5.1 (August 2015)

【Ruby on Rails】productionモードのrake route(ルーティング)を見たい

$ rake routes RAILS_ENV=production

でサーバー用(productionモード)のルーティングが見れる。

もちろん、envで切り替えをしている場合には、他のルーティングを見ることもできる。

$ rake routes RAILS_ENV=development
$ rake routes RAILS_ENV=test
$ rake routes RAILS_ENV=staging

メモメモ。