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さんです。よろしくお願いしますー！

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

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

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

http://livereload.com/

 

そこで、有料だけど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とかが起動してるとダメっぽいと。

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

よかったね。

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

sample

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でのバックアップとインポートとしてまとめる

http://yahsan2.blogspot.jp/2012/07/mongodbmongohqheroku.html

 

キーボードショートカット操作でアプリwindowを操作するmac app「Spectacle」

「Spectacle」のmacアプリがいい感じです。

macでキーボードはなさずに、windowを操作できないのかなーってずっと思ってたので、これでwidnow操作がかなり楽にできようになりました。

http://itunes.apple.com/jp/app/spectacle/id487069743?mt=12

以下のようなショートカットキーで操作できます

　

自分は command+alt+ ` で同じwindow内のアプリwindowを操作できるようにしているので 、command+altを押したまま同じデスクトップないwindowを思ったまま操作できるので快適です。

ちなみに、command+ `で同じアプリで切り替え、command+tabで起動しているアプリ切り替えで、このへんアプリの画面操作がキーボード左上にまとまっていて、快適macライフ良い感じです。

僕のUSキーボードだったりするので、JISキーボードはショートカットが少し違うと思いますが、適当あわせてみてくださいー。もっといい方法あれば教えてくだいさい。

新しいPC のheroku への ssh key 登録

新しいmacを購入して、xcode3.4にビビりつつrails環境構築をしていて、意外とはまらずいけたと思ったら最後の最後に

$ git push heroku master 
ssh: Could not resolve hostname heroku.yahsan2: nodename nor servname provided, or not known
fatal: The remote end hung up unexpectedly

エラー。。
とりあえずググって 

http://d.hatena.ne.jp/opamp_sando/20110914/1316011399　
などを参考に

$ ssh-keygen -C "yahsan2@gmail.com" -t rsa
Generating public/private rsa key pair.
Enter file in which to save the key (/Users/yahsan2/.ssh/id_rsa): heroku_id_rsa
Enter passphrase (empty for no passphrase):
Enter same passphrase again:

~./ssh/config　を作成

前にheroku-accountsのプラグインを使ってたから、Host heroku.yahsan2　みたいな感じで。
んで、herokuにsshkey 登録は

$ heroku keys:add
Found the following SSH public keys:
1) heroku_id_rsa.pub
2) id_rsa.pub
Which would you like to use with your Heroku account? 1
Uploading SSH public key /Users/yahsan2/.ssh/heroku_id_rsa.pub... done

これで

$git push heroku master 
:
:
f3aa1e4..ce9bc8e master -> master

okでしたー 

MarsEdit

こんにちは、宮本です。

お試しで, MarsEditのアプリ使ってます。

よろしくお願いします。感想は後ほど。

ブログバーツのjavascriptのembedができない

あまりにもblogの整形をしていないので、まずcodeにsyntaxhighlightをしようってことで
gistに集める作戦にしました。

あとで、とりあえずハマッたり、ぐぐって書いたコードはgistに登録しておいて
blog書くときはgistのembed機能を使う。
provate repoばかりのgithubをpublicな感じにできるのかなーってことで。

しかし、scriptを埋め込んでも表示されない現象なりました。
何度貼り直しても表示されないし、ずっとなんでだと放置して諦めていたけど、ふとmobileでみたら表示されてる!?

ってことでtemplateを疑って変えてみたら表示された!!

その時bloggerの動的templateを使っていたのだけど、
なにかjs的なとこで干渉してるみたいで表示されてないみたいでしたー。

他にも埋込みjs scriptとかだと不具合起こる可能性ありますから、一回疑ってみても良いかもですね

wordpress customfieldに文章を書けるようにする方法。（改行使えたり、リンクタグが飛び出ない）

アンカータグを使うと width 指定した div.wrapからはみ出たりする。 そこで、cssで以下のように　white-spaceをしてする。
アンカータグ<a></a>を使うと width 指定した div.wrapからはみ出たりする。


そこで、cssで以下のように　white-spaceをしてする。



すると、通常や改行や半角スペースがひとつにまとめられてしまうところ


改行や半角文字として認識してくれる！


http://www.htmq.com/style/white-space.shtml


ただし、


<p>


ちわー


</p>


とか無駄なインデントや改行もそのまま反映されるので、その辺は注意ですね。

instagram-ruby-gem の undefined method `configure' for Instagram:Module(NoMethodError) 続き

$ bundle isntall

できたーと思って

$rails s

起動したら今度は

Bundler could not find compatible versions for gem "faraday":

In snapshot (Gemfile.lock):

faraday (0.8.0)

In Gemfile:

instagram (>= 0) ruby depends on

faraday (= 0.7.6) ruby

Running `bundle update` will rebuild your snapshot from scratch, using only

the gems in your Gemfile, which may resolve the conflict.

今度はfaradayで喧嘩。

ググる。

https://github.com/Instagram/instagram-ruby-gem/issues/33

というわけで、0.7.6にあわせればいいらしい。

forkして、

local に　clone

instagram.gemspec

s.add_runtime_dependency('faraday', '0.7.6')

に変更。

$ git add . $ git commit -a -m 'changed faraday verstion to 0.7.6 $ git push origin master

これで

Gemfile

'gem 'instagram', :git => 'git://github.com/yahsan2/instagram-ruby-gem.git'

に変更。

再びGem.lockを消して$ bundke install$rails s

できたー！！！！

instagram-ruby-gem の undefined method `configure' for Instagram:Module (NoMethodError)

instagram-ruby-gem を　bundle install後、rails sで起動したら、以下のエラーが起きたのでメモ。

/config/initializers/instagram.rb:5:in `<top (required)>': undefined method `configure' for Instagram:Module (NoMethodError)

Gemfile

gem 'instagram'

と記述して

$bundle install

$rails s

で起動。

/config/initializers/instagram.rb:5:in `<top (required)>': undefined method `configure' for Instagram:Module (NoMethodError)

のエラー

ググる。

https://github.com/Instagram/instagram-ruby-gem/issues/21

こちらがヒット。

Gemfile

gem 'instagram', :git => 'git://github.com/Instagram/instagram-ruby-gem.git'

と記述して

$ bundle install

Updating git://github.com/Instagram/instagram-ruby-gem.gitFetching gem metadata from https://rubygems.org/.......Fetching gem metadata from https://rubygems.org/..Bundler could not find compatible versions for gem "multi_json": In snapshot (Gemfile.lock): multi_json (1.3.4)

In Gemfile: instagram (>= 0) ruby depends on multi_json (~> 1.0.3) ruby

Running `bundle update` will rebuild your snapshot from scratch, using onlythe gems in your Gemfile, which may resolve the conflict.

今度はgemどうしで喧嘩。

https://github.com/kylefox/instagram-ruby-gem/commit/95dbe0af2bfe1061aa757bf88726370ccb475ce4

これ読み込んだりこれように、forkなどして変更したがダメ。

とりあえず、gemなおしてgem 'instagram', :git => 'git://github.com/Instagram/instagram-ruby-gem.git'

なんとなく In snapshot (Gemfile.lock):ってあるから、これ全部消して

$bundle install

...

...Your bundle is complete! Use `bundle show [gemname]` to see where a bundled gem is installed.

!! できた!?

$rails s

動いた！！よくわからけど、これで喧嘩収まることもあるらしいです。



ちなみで、https://github.com/mshk/Instagram-on-Rails-Sample

を参考にして、appは作ってったー

custom post type ｘ posts2postsのプラグインの組み合わせが便利すぎにゃん

マジ便利やで。

posts 2 posts　が　まぁ幅広ーくなったかんじ。

// function my_connection_types() {
// Make sure the Posts 2 Posts plugin is active.


if ( !function_exists( 'p2p_register_connection_type' ) )


return;


// Keep a reference to the connection type; we'll need it later


global $people_connection_type;


global $place_connection_type;


global $event_connection_type;


$place_connection_type = p2p_register_connection_type( array(


'from' => 'events',


'to' => 'places'


) );


$people_connection_type = p2p_register_connection_type( array(


'from' => 'events',


'to' => 'people'


) );


$event_connection_type = p2p_register_connection_type( array(


'from' => 'people',


'to' => 'places'


) );


}


add_action( 'init', 'my_connection_types', 100 );

Add Quick tag プラグイン custom posts の適応 wodpress

まぁここ見たら書いてあるんですけどね(´・ω・｀)

http://wordpress.org/extend/plugins/addquicktag/

function.php

// add custom function to filter hook ‘addquicktag_post_types’

add_filter( 'addquicktag_post_types', 'my_addquicktag_post_types' );
/**
 * Return array $post_types with custom post types
 * 
 * @param   $post_type Array
 * @return  $post_type Array
 */
function my_addquicktag_post_types( $post_types ) {

    $post_types[] = 'my_custom_post_type1';
    $post_types[] += 'my_custom_post_type2';
    $post_types[] += 'my_custom_post_type3';

    return $post_types;
}

てな感じで,配列にcustompost名をぶち込んでけばよいのだよ.

やっとCMS(wordpress)が理解できたかなってくらいのレベルになるまでの入門 か ら道のり

ちょうど一年前 if文 ってなんやってくらいを勉強してたなーってことで

とりあえず今まで勉強の過程で実際、自分の力になっていった部分についてまとめておこうと思います

ちょうど、一年前ローカルに入門ｐｈｐで掲示板をつくろうみたいなのをやっていて

確かにphpについてのこととか、技術について学んべてはいたけど、

正直ここからサービスとか公開とかどうやって発展させていくか全然わからなかった。

自分でこれ作れるってのが思えなかった。真似してつくったのものしか作れないって。

そこから、あ！こんなの作れるかもって思えたタイミング（自分的に成長できたタイミング）をとりあえず書き残していこうと思います

１、サーバーにあげられたソースを見たとき、触ったとき。

　ローカルで4ヶ月くらいずっとやっていたけど、結局実際動いている、公開されているものをいじっときに初めて、「あ、ここがこの部分なの」って思えた気がする。数学で教科書読んでた時期が、ローカルで本見て写景してるときで、数学の問題をといて使えて、あ、だから問題の時はこう解くのかとかわかった感覚。わかりづらいがそんな感覚。つまりは出来るか限り早くレンタルサーバーに公開していじるか、アルバイトとかしたほうがいいと思う。

２、実際でデバッグをして、エラーを直してたとき、その原因をソース読んでたどったとき。

　まぁ１とかぶる気がしたけど、結局ソースをたどって、デバッグするときこのソースが何を意味しているのかを理解して、そのときここをこうすればもっとこういう事ができるんじゃないかって思えた。ようはバグがちゃんと出るようなことをしないといけないと思う。

３、wordpressのthemeのindex.phpからどのファイルをたどっているかを理解したとき。

　はじめはpages.phpからsingle.phpそのあとseach.phpやcategory.phpの立ち位置を理解できるようになってから、wordpress全体を理解できるようになった気がする。

続きはまた。