2012年12月6日木曜日

sublime text 2 のちょっと便利な機能の使い方。-  Sublime Text 2 Advent Calendar 2012 の 7日目

はじめまして、千葉のいすみ市という田舎で、波乗りエンジニアしてます。サーフィンしてるだけです。宮本と申します。(@yahsan2)

普段自分用ブログメモなのですが、人のために?書きたいと思います。すこし読みにくいかもですが、そのへんご容赦下さい(ヽ'ω`)

 

Sublime Text 2 Advent Calendar 2012 の 7日目(http://www.adventar.org/calendars/20)で、書かせていだきます。

とはいって、sublime text歴2ヶ月くらいなので、僕が使っていて便利だなーと思っているかつ、他の記事にあまり乗ってないかなーってものををざっくばらんに書きます。また、macユーザーなのでwindowsの方は適宜読み替えて下さい。

 

目次 

・projectについて:画面をすっきり、コード管理も楽になる!?

・snippetについて:大量の自分のsnippetを管理の仕方を工夫する!?

・sidebarについて:マウスを使わないでファイル管理する!?

・矩形(複数)選択について:カーソルを好きな場所に増やしまくれる!?

・key bindingについて

・最後に

 

・projectについて

多分他のeditorにもあると思いますが、projectごとにファイルを保存する機能がsublime text 2にもあります。

プロジェクトで開くには、finderでフォルダをdocのアイコンにドッラグするか、terminalから

$subl . 

 をコマンドを打ったりすればプロジェクトで開かれます。

また、コマンドパレットから、Project: Add Folderでも大丈夫ですし、僕は以下のkeybindを設定しています。

{ "keys": ["super+ctrl+n"], "command": "prompt_add_folder"},

 

更にこの状態で、メニューの Save Project as を選択するか、

みんな大好きコマンドパレットでpro saveとかタイプして、Project: Save asを選択すると、プロジェクトとして保存ができます。

ちなみに、saveされるファイルは、プロジェクトフォルダ外でも内でも大丈夫なので、僕は一箇所のフォルダにまとめて保存しています。

 

プロジェクトとして登録すれば、メニューのプロジェクトから最近のものが開けたり、ctrl + cmd + p でプロジェクトを開いたり、移動したりできます。

このプロジェクトでもホットセーブがされていているので、以前開いたファイルの内容はもちろん、tabとかもそのまま同じ位置でに残っていたりするので、

受注でたくさんのサイトを同時並行して作っている僕にとって、切り替えがスムーズでかなり便利です。

過去のコードも見たい時も同じ箇所だったりするので、ctrl + cmd + pでそのコードをすぐ見つかることが多いです。

 

 

・Snippetについて

How to create な記事はたくさん他にあるので、管理の仕方について書きたいと思います。

 

僕はコードを以上3回書いたなーと思うと、すぐにsnippetを登録します。

メニューの tool > new Snippets でも良いですが、僕は以下のkey bindをあててどんどん追加してます!

{ "keys": ["super+alt+n"], "command": "new_snippet"},

 

 

snippetむちゃくちゃ便利ですね。

ただ、どんどん登録するのですぐにバッティングしたり、出力もっと違うようにしたいと思うことがたくさんあります。

そこで、先程書いたProjectを使います。

/Users/yahsan2/Library/Application Support/Sublime Text 2/Packages/User

このフォルダをproject登録しておけば、編集したばかりのものはtabを消してなければ残っているし、サイドバーなどですぐに探し出せます。

このproject + snippetコンボはなかなかです。

 

 

・sidebarについて

projectで開くと,sidebarが出せます。もちろんメニューで出せますが、キーバインドが便利です。

{ "keys": ["super+ctrl+shift+`"], "command": "toggle_side_bar" },

{ "keys": ["ctrl+super+`"], "command": "focus_side_bar" },

僕は上記の様に変更していますが(USキーボードでctrl+super+1のノリで移動できるから)、デフォルトでは ["super+b", "super+k"]となっていてます。

cmd + bと打ってもsidebarが開かなくて嵌っていましたが、これはcmd +b のあとに cmd+kを打つという意味です。

 

focus_side_barでsidebarに移動したあとクリックすればファイルは開けますが、f2でファイル名の変更もできます。

また、f2で「sample.html」→「./pages/sample.html 」とか相対pathをつけてやると移動もできます。

これも最初見つけるの苦労したので、参考になればと思います。

 

 

 

・矩形(複数)選択について

矩形(くけい)選択って便利です。大好きです。sublime text 2でももちろん出来ます。

ただ、その前にcmd+dを使った同じ単語を選択するやつ(なんていうのだろうか?)が便利です。

{ "keys": ["super+d"], "command": "find_under_expand" },

{ "keys": ["super+alt+d"], "command": "find_all_under" },

上は選択した同じ単語一つづつ選択追加で、下は一気に選択追加して、削除や編集ができます。


でも矩形選択もやっぱり便利です。

ctrl + shift+↑又は↓で矩形選択の入力カーソルが増えます。

ctrl + a で先頭にいって、ctrl + shift+↓でカーソル増やして、alt + →とか移動してhtml編集とかはよく使います。

 

さらに矩形選択はこのやり方だけでなく

alt + cmd を押したままマウスドラッグで、そこら一帯を矩形選択できますし、

finderとかでcmdを押しながら選択中ファイルを増やすように、cmd押しながらクリックしていくと、カーソルをどんどん増やせます。

特に後者は、案外規則で並んでないけど同時編集したいって時とかものすごい便利です。

 

また、矩形選択はesc脱出することができます。 

 

・key binding

これはおまけですが、僕がkey bindingが好きなので、大体の操作にあててます。

このとき必要になるコマンド名は、st2デフォルトの機能であれば以下のdefault.sublime-commandsやプラグインであれば、

そのプラグインの.sublime-commandsファイル名を見れば見つけることが出来ます。

https://github.com/cj/sublime/blob/master/Default/Default.sublime-commands

ちなみに、もちろんキーバインド追加しまくれるように、このUser Keymapのファイルもキーバインドしています^^

{ "keys": ["super+alt+,"], "command": "open_file", "args":

  {

    "file": "${packages}/User/Default (OSX).sublime-keymap",

    "platform": "OSX"

  }

},

 

・最後に

sublime text 2まだ初心者ですが(プログラマとしてもなんですが)、かなり良い感じですね!使ってて楽しいです!

他にもプラグインを使用しての細かい便利ハックが結構あるのですが、時間ができたらまとめたいです。

 

ただいくつか、これできないかなーと思っていることもあります。

・sidebarにフォーカスした状態で、キーボードからファイル及びフォルダの削除

・""とか''""の内側を""を含まないで選択(expand_selectionは""含んでしまう)

・vintageモードの際、矩形選択から通常に戻る時、矩形選択のノーマルモードではなく、カーソル一つのinsertモードに戻りたい。

・Indent Using Spaceを常にオンにしたい。

 

もし知っている方いたらtwitterとかで教えていただけたら、とても嬉しいです。

他にも、こんなかんじやつ大好きなので、持っているかたあるかた教えて欲しいです。

是非こちらまで、@yahsan2

 

明日は jugyoさんです。よろしくお願いしますー!

2012年9月7日金曜日

コマンドラインをあまり使いたくない僕がcoffescriptをlivereloadで使う。

僕はsass大好きな感じなのですが(今まで記事書いたことないけど)

railsでcoffescriptつかっていてそんな感じで、勝ってにwatchしてくれるのないかなーって感じで。見つけたのがlivereload

http://livereload.com/

 

Screen Shot 2012 09 07 at 11 06 00 PM

そこで、有料だけど1000円もしないし買った!

むっちゃいい。しかもブラウザのextensionもあって、ライブでリロードしてくれるよ!

だけど、chrome extensionでハマったのでメモ。

http://feedback.livereload.com/knowledgebase/articles/86242-how-do-i-install-and-use-the-browser-extensions-

こちらのページからダウンロードリンクをクリックしても、他のextensionみたいに自動インストールしてくれない。

 “Allow access to file URLs” checkbox in Tools > Extensions > LiveReload after installation. Also, in Chrome 21+ off-store installation requires you to save the file and then drag it manually into the extensions page.

 

コレちゃんと読めよ。俺。ってことでダウンロードされたファイルをextensionのManager画面にdragすればok.

Adobe FireWorksがShellExtLoaderの表示でインスール出来ない。

Abobe Application ManagerからFireWorksをインストールしようとしたのだけど、

ShellExtLoader

が表示されてインストールできない。再起動してもダメ。

http://d.hatena.ne.jp/melon_kawa/20111016/1318779362

こちらの記事より、sugarsyncとかが起動してるとダメっぽいと。

ログインで自動起動するので、終了させたらできた。

よかったね。

2012年8月22日水曜日

instagramの画像URLをtwitter search api などのjsonから取れるinstagramページIDからを取得する

twitterのsearch api から instagramの画像URLが必要となったのでメモ。

とりあえず、画像URLだけが必要な場合は、以下のURLを叩けばリダイレクトされるので、そのままsrc属性につっこめばおっけー。

?size=l(/m/s) とかで大きさも指定できる。

http://instagr.am/p/NVLdycQkC1/+media/?size=mでおっけー

<img src="http://instagr.am/p/NVLdycQkC1/media/?size=m" alt="" />

これは簡単。

次にinstagramの個別IDやタイトルとかも欲しい場合は以下のURLを叩けば、jsonpで必要な物がかえってくる。

http://instagr.am/api/v1/oembed?url={URL}

こちらはパラメータとして、maxwidthを指定することで大きさを変えれるみたい。

ただ両方非公式っぽいので、そのへんはおまかせで。

参考:http://blog.fkoji.com/2010/12191554.html

2012年7月31日火曜日

mongoDB(mongoHQ)+herokuでバックアップとインポート

mongoHQのプランアップデートの際にバックアップとインポートを使うことになったので、少しまとめる。

mongodumpとmongorestoreを使ったので表現があれかもしれないですが、初心者のあれでだれかつこんでください。

https://devcenter.heroku.com/articles/mongohq

てかmongoHQのプランアップデートはまってたけど。よく読むと最後に Upgrading your Database ってあるし。。

流れとしては、ここの通り。

$ heroku maintenance:on (off)

やるときは、これでdbに変更がないようにmaintenanceモードにしといたほうがいいねってかいてある。んでまず

$heroku config 
MONGOHQ_URL: mongodb:// <username>:<password>@<host>:<port>/<dbname>

 の部分を確認してmongoHQのdbをdumpする

$ mongodump -h hostname.mongohq.com:port_number -d database_name -u username -p password -o /path/on/my/local/computer

dumpしたあと、プランをremoveからaddしてプランを変更して

$ heroku addons:remove mongohq:free
$ heroku addons:add mongohq:small

変わったMONGOHQ_URLを再び確認をして、mongorestoreをする

$ mongorestore -h hostname.mongohq.com:port_number -d database_name -u username -p password /path/on/my/local/computer

これで、アップグレードはできたことになりましたー!

ちなみに、ローカルにあるdbには 

$ mongorestore -d <dbname> /path/on/my/local/computer

とかで、インストールされるー。<dbname>は config/mongoid.yml内のdevelopment: database: <dbname> のとこ。

 参考

http://jp.docs.mongodb.org/manual/reference/mongodump/

http://jp.docs.mongodb.org/manual/reference/mongorestore/

herokuでのmongoHQのプランアップデートにはまった。

 

heroku,railsでmongoHQのアドオンを使って、アプリを作っていたのだけど、突然dbにデータが入らなくなって、

あれ?!って思って調べたところFreePlanの容量がいっぱいになったっぽい。db削除したら入るようになったし。

そこでここhttps://addons.heroku.com/mongohqから、アップグレードしようとしたところ

You must confirm billing before installing this add-on 

エラーでた。できない。さらに、my acountのBilling Info でsubmit押してもなぜかクレジットが登録されない。

そこで、herokuに問い合わせる。https://help.heroku.com/tickets

Hi,I made a small change on our end that should help here. Can you please try this add-on again?

もう一度、登録してみると登録できた。なんだったんだ。まぁいいいや進んでよかった−と思ったら

Sorry, we do not support plan upgrades at this time. 
For more information please gotohttp://support.mongohq.com/customer/portal/articles/100125

またエラー、しかも指示されたリンクHOMEにリダイレクトされるし。

また問い合わせ。今度はmongoHQに。すると2分後、返信がw

Hello,
That support document should redirect here:http://support.mongohq.com/topics/upgrading-your-mongohq-heroku-addon.html
Please let us know if you need any help upgrading.

って感じで、ちゃんとリンクかえてくれ。またまぁいいやーと思って中見ると、あれ?結局
 
heroku addons:remove mongohq
 
とか使ってんじゃん。再インストール的な感じかってことで、mognodbをバックアップ→インポートの作戦で。
 
というわけで、続きはmongodbでのバックアップとインポートとしてまとめる