[vim] 挿入モードからノーマルモードに戻った時にペーストモードを自動で解除する方法

vim

vimで長い文字列をコピペする時は、オートインデントやオートコンプリートをオフにするために、:set pasteでペーストモードに入りますよね。で、挿入モードになって、ペーストする。
最後に、ノーマルモードに戻って:set nopasteで解除。

めんどい!!

そんなずっとペーストモードでいる事は無いので、挿入モードからノーマルモードに戻る時に自動で解除して欲しいですよね。
その方法をご紹介します!
チョー簡単。下記コマンドを打つだけ!

" Turn off paste mode when leaving insert
autocmd InsertLeave * set nopaste

Auto commandを使って、InsertLeaveイベント時にset nopasteコマンドを実行するという意味です。
これを.vimrcに書いておけばOKです!

Sublime TextからSnippetをGistに保存する方法

sublime+gist

みなさん、コードのスニペットとか作業ログの破片ってどう管理してますか?
僕はいままでファイルに保存するという面倒な方式を取っていたんですが、ついに耐えきれなくなりました(笑)

個人的には:

  • iMacとMacbook Airの2台でSnippetをCRUD&共有したい
  • 検索したい
  • タグ付けで分類出来れば尚いい

そこでGistを検討してみました。これならプライベートでコードをクラウドに保存出来ます。
バージョン管理まで出来るオマケ付き!
ただ、いちいちブラウザでページを開くのは面倒。
ここに手軽に保存できれば便利ですね!

調べてみたところ、Sublime TextにGistへCRUD出来るプラグインがあるとの事。
ショートカットで即アップできるしチョー便利そう!
早速、使ってみましょう。

Gistとは?

GitHubが提供する、コードのスニペット保存サービスです。

Sublime Package Controlを入れる

プラグインを入れるには、Sublime Package Controlをインストール必要があります。
下記ショートカットキーを押して、コンソールを開きましょう:

Ctrl + `

sublime-text-01

https://sublime.wbond.net/installationからインストール用コマンドを入手して、貼付けてEnter
数秒ほどでインストールが完了するかと思います。

sublime-text-02

Gistプラグインをインストールする

Command + Shift + Pを押してコマンドパレットを呼び出し、「Install」と入力してみてください。
Package Control: Install Package という項目が出るはずです。
これを選択してください。

sublime-text-03

パッケージ一覧の読み込みが開始され、しばらくすると表示されます。

sublime-text-04

ここで、gistと入力して絞り込みます。下の画像のようにハイライトされているGistという名前のパッケージを選択します。

sublime-text-05

しばらくするとインストールが完了します。
再度、Command + Shift + Pでコマンドパレットを呼び出してください。
そして、gistと入力すると、Gist用のコマンドが出てくる事を確認します。

sublime-text-06

GitHubアカウントを設定する

次に、あなたのgistアカウントと紐付けます。
メニューからPreferences -> Package Settings -> Gist -> Settings - Defaultを選択します。

sublime-text-07

下図のように設定が開かれます。
GitHubのアプリ設定画面でPersonal Access Tokensを発行します。
発行したトークンを設定ファイルのtokenという項目に入力して保存します。

sublime-text-08

これで準備は完了!

使い方

基本はコマンドパレットから実行します。
それでも面倒!!という方には、ショートカットがあります!

ショートカットキー 動作
Command + K, Command + P プライベートGistを保存
Command + K, Command + I パブリックGistを保存
Command + K, Command + O 保存したGistを開く
Command + K, Command + S Gistを上書き保存

タグ付けにはGistBoxがオススメ

gistbox

http://www.gistboxapp.com/

Evernoteみたいにフリーフォームでタグを入力できないのが少し不便だけど、オーガナイズ機能はイケてる!

HTML5で動くUnrealEngineが凄すぎる件

unrealengine

unrealengine

百聞は一見に如かず。美しさ半端ない!!

http://www.unrealengine.com/html5/

iMac + Chromeでは全く問題無く、サクサク動きました。
読み込みに2、3分かかるのが少し長いかなと思ったくらい。
WebGLで有名どころのレンダリングエンジンがここまでの完成度で動くとなると、FirefoxOSのようなWWWベースのOSでも高品質の3Dゲームが楽しめる日も近いって事ですね!!
そのためには、スマホやタブレットでどこまでのパフォーマンスを出せるかですねー。

ちなみに、iOSではまだ動かないようでした。

歴代のMacをアイコンにしたフォントを公式サイトで発見!

30years-mac

今日は、Appleの30周年記念ですね!
Apple公式サイトではトリビュートウェブサイトを立ち上げて、お祝いしています。

実は、このサイトで使われている歴代Macのアイコンは、ウェブフォントと言われるフォントなのです。
これをダウンロードすると、Macにインストールして使う事ができます!

Apple 30years Mac Font

下記からダウンロードできます。今だけ!急げ!

http://images.apple.com//v/30-years/a/fonts/mac-icons/mac-icon-standard.ttf

Ruby on RailsとTwitter Bootstrap 3でパンくずリストを追加する方法

breadcrumbs

breadcrumbs_on_railsがオススメ

breadcrumbs_on_rails はbootstrapに限らずパンくずリスト(Breadcrumbs)の実装が簡単に出来るのでオススメです。

インストール方法

Gemfileに下記を追記:

gem "breadcrumbs_on_rails"

$ bundle installでサクっとインストールしましょう。

基本の使い方

controllerに記述する

class MyController

  add_breadcrumb "home", :root_path
  add_breadcrumb "my", :my_path

  def index
    # ...

    add_breadcrumb "index", index_path
  end

end

app/controllers/application_controller.rbに追加する事で、サイト全体でデフォルトのパンくずアイテムを追加出来ます。
「ホーム」みたいな項目はそっちに記述するといいかと思います。

viewに記述する

slimだと以下のような感じでOK:

- title "タイトル"
- add_breadcrumb title, request.fullpath

controllerで指定したものの後に追加されます。
viewに書く方がMVCアーキテクチャにより適合していますね。

出力する

app/views/layouts/application.html.slimなどの任意の行に下記を追記しましょう。

= render_breadcrumbs

Bootstrap 3で使う

上記の手順でパンくずリストを出力すると、下記のように単純にaタグの羅列になります。

<a href="http://odoruinu.net/">Home</a> > <a href="/blog">Blog</a> > <a href="/blog/page">Page</a>

ここでは、bootstrap 3のスタイルで書きたいので下記のように出力して欲しいところ:

<ol class="breadcrumb">
  <li><a href="http://odoruinu.net/">Home</a></li>
  <li><a href="/blog">Blog</a></li>
  <li class="active">Page</li>
</ol>

Bootstrap用ビルダーを作る

breadcrumbs_on_railsではカスタムなフォーマットでパンくずリストを出力するための方法が用意されています。
これを Builder と呼びます。

さっそくBootstrap用のBuilderを作ってみましょう。
以下のような内容をlib/bootstrap_breadcrumbs_builder.rbに作ります:

class BootstrapBreadcrumbsBuilder < BreadcrumbsOnRails::Breadcrumbs::Builder
  def render
    @context.render "/application/breadcrumbs", elements: @elements, b: self
  end

  def compute_name(element)
    case name = element.name
    when Symbol
      @context.send(name)
    when Proc
      name.call(@context)
    else
      name.to_s
    end
  end

  def compute_path(element)
    case path = element.path
    when Symbol
      @context.send(path)
    when Proc
      path.call(@context)
    else
      @context.url_for(path)
    end
  end
end

そして、app/views/application/_breadcrumbs.html.slimに以下のようなファイルを作ります。

- unless elements.length==1 && current_page?( b.compute_path(elements[0]) )
  ol.breadcrumb
    - elements.each do |element|
      li class=( "active" if current_page?( b.compute_path(element) ) )
        =link_to_unless_current b.compute_name(element), b.compute_path(element), element.options

最後に、レイアウトのファイルに以下のように追記すればOK!

#!slim
= render_breadcrumbs builder: ::BootstrapBreadcrumbsBuilder

Breadcrumbs

バッチリ!

デザイン感覚を養える世界のデザイン専門誌

デザイン雑誌はペラペラめくるだけでインスピレーションを刺激してくれますよね。
有名な海外のデザイン雑誌やサイトをご紹介します!

ISSUU

無料で読めるデザイン雑誌を集めたサイト。おすすめ!!

ISSUU

http://issuu.com/

Nest

奇抜で幅広い内容の季刊誌。無料で一部読めます!

Nest

http://ideas.thenest.com/the-nest-magazine.aspx

Dwell

住宅雑誌。

Dwell

http://www.dwell.com/magazine

How

主にグラフィックデザインに焦点をあてた雑誌。

How

http://www.howdesign.com/

ID

毎年、ベストデザインを選ぶ「Design Review」は有名。

ID-magazine

http://www.id-mag.com/

Metropolis

建造物と資材をメインに扱う雑誌。

Metropolis

http://www.metropolismag.com/

アルミ製マウスパッドを買った

マウスパッドが古くなったので買い替えようと思ったら、重量感抜群のアルミ製のものを発見!かっこいい!


MPD-ALUMSV

でもね・・冷たいww

アルミの部分がとても冷たいw

重量感は申し分無いです。冬にはオススメ出来ません。笑

http://rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=norainusoftwa-22&o=9&p=8&l=as1&m=amazon&f=ifr&ref=qf_sp_asin_til&asins=B000QEIJZS