WebStormのKeymapを他のパソコンに移行させる

新しいパソコンでもWebStormの同じKeymapを使いたい場合、一番スマートな方法はGitリポジトリを使った同期のようです。

http://qiita.com/sotetsuk/items/39622a0219e93052c8dc#_reference-e4ea55449a2677dcaa46

しかし、さしあたってすぐに使いたかったので、普通にKeymapファイルを新しいパソコンに移動させて、設定画面で認識させることにしました。

Keymapファイルは以下の場所にあるとのことです。

https://www.jetbrains.com/help/webstorm/2016.3/configuring-keyboard-shortcuts.html#d721087e34

スクリーンショット 2017-01-13 15.28.53

新しいパソコンの同じ場所にはKeymapフォルダがなかったので、フォルダを作って入れたところ、設定画面から読み込むことが出来ました。よかった。

Atomでコーディングして、音楽をリアルタイムに生成するパフォーマンスを始める/ TiadalCyclesをインストール

Atomでウェブサイトが作れるのだから、音楽も作れる!ということで、最近ライブコーディングで音楽や映像を作るムーブメントが到来しています。次の動画後半を御覧ください。

かっこいい!

ということで、多摩美等で教鞭をとられている田所先生のサイトを参考に入れていきます。参考にというか全く同じです。

Homebrewを入れる

まずhomebrewが入っていなかったので入れます。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Xcodeもついでに入れてくれるのはラッキーという感じなのですが、とにかく重い!待っている間にAtomを入れます。

Atom

TidalCyclesは基本、Atomでコードを書きます。すべてのエディターに対応しているわけではありません。WebStormで出来ないのか!わかりません!

Atomのパッケージで「Tydalcycles」というものがありますので、これを入れます。これを実行したAtomがTidalCyclesと連携します。そして書かれたコードをもとにリズム等を生成します。

Gitも入れる

Gitもいれてなかったので入れます。

$ brew install git

Haskellを入れる

TidalCyclesはHaskellを使って動いている言語、ということでHaskellも入れていきます。GHCというのはHaskellのひとつのことのようです。(:参照)

$ brew install ghc

そしてHaskellのパッケージ管理ツールのcabalを入れます。node.jsにおけるnpmみたいなことなんでしょうか。

$ brew install cabal-install

cabalを最新版にします。

$ cabal update

パッケージをインストールするためのパッケージ?を入れます。

$ cabal install cabal-install

そしてやっとTiadalCyclesを入れます。

$ cabal install tidal

入りました。

SuperColliderを入れる

さしあたって最新版を入れます。SuperColliderとはコーディングすることでシンセを動かしたり、エフェクトをかけたり、シーケンスを書いたりできるオープンソースのソフトウェアです。この手のソフトウェアとしてはMax/Mspというのも有名ですが、あちらはヒモをつないでプログラムを作らなくてはいけないので、非常にイライラします。SuperColliderのほうがエンジニア向けです。

http://supercollider.github.io/download

SuperColliderを起動して、SuperDirtをSuperColliderにインストールします。SuperDirtはサンプラー=音をだすための音源です。つまり次のように信号が流れているものと思われます。Atom→SuperCollider→SuperDirt→音がなる。

SuperColliderを起動すると、皆さんの大好きなエディター画面が登場します。そこで次のコマンドを入力して、Cmd + Enterで実行します。これでインストールがされます。時間がかかります。一度インストールしたら、当然ですが次に再起動したときにはする必要はありません。

include(“SuperDirt”)

SuperColliderを再起動します。

音を鳴らしていく

まずSuperColliderを起動していることを確認します。そしてSuperColliderで次のコマンドを実行。貼り付けて、Cmd + Enterで実行です。

SuperDirt.start;

次に、.tidalという拡張子のファイルをどこでもいいので作ります。これをAtomで開いた後にAtomのパッケージを実行します。

スクリーンショット 2017-01-12 17.04.32

最後に、次のコマンドをAtomのエディターに貼り付けて、Cmd + Enterで実行してください。

d1 $ sound "bd"

キックが鳴り続けるはずです。

次にこれを貼ってみて、実行= cmd + enter してみてください。リズムが変わります。

d1 $ (brak (sound "bd sn:2 bd sn"))
   # pan ((*) <$> sinewave1 <*> (slow 8 $ "0 0.25 0.75"))

これとか

d1 $ sound "bd sn hh cp mt arpy drum odx bd arpy bass2 feel future"

まとめ

エディターから音がなるのは面白い!

Node.jsをインストールする(バージョンコントロールできるようにする)

新しいパソコンを手に入れたので、開発環境を構築するため、Node.jsをインストールしていきます。

Node.jsをインストールする際に、バージョンコントロールできるようにすることは、今後も必須であると思われます。プロジェクトによって使用するバージョンが異なり、異なると動かないことがよくあるからです。

ではバージョンコントロールのために何を使うのがベストなのでしょうか。現状、私はnodebrewを使っていますが、nvmやnといったツールもあるようです。調べてみたのですが、特にどれを使ってもあまりかわらない、というようなことが書かれていましたので、nodebrewのままでいこうと思います。

https://github.com/hokaccha/nodebrew/blob/master/README.md

nodebrewのインストール

nodebrewはnode.jsのバージョン管理ツールです。インストールをするためにコマンドラインで実行していきます。まずはnodebrewのインストール。

curl -L git.io/nodebrew | perl - setup

Pathを通す

パスを通すとは、コマンドラインにコマンドを実行させた際に実行するソースがどこにあるのか、場所を指定してあげることです。「nodebrew」といったコマンドを打っても、それがどこにあるのかわからないと、実行できないからです。

まずは確認しやすいように不可視ファイルを見えるようにする

不可視ファイルを見えるようにします。

$ defaults write com.apple.finder AppleShowAllFiles TRUE

設定を反映するために「Finder」プロセスを終了します。

$ killall Finder

見えるようになりました。

.bashファイルを作成し、それにパスを記入する

使い始めたばかりの場合は.bashファイルがないので作ります。bashファイルは、パスを記録するファイルです。以下をコマンドラインで実行。

$ sudo vi .bash_profile

するとVimエディタに入るので、

export PATH=$HOME/.nodebrew/current/bin:$PATH

を書き込みます。

Vimエディタは挙動が特殊なので、ちょっと手こずりますが、さしあたって以下の操作だけを把握しておきます。

  • 入力モードへは「i」/ コマンドモードへは「esc」
  • 入力モードで上記のexport〜をコピペ
  • コマンドモードで:wqを入力してenterを押すと、保存し、エディター終了。

これでパスが通ったはずです。

 

パスが通ったか確認

bashファイルを読み込んで、

$ source ~/.bash_profile

中身を表示
$ echo $PATH
をして、「/.nodebrew/current/bin」が表示されていれば成功です。

nodebrewが入ったか確認

$ nodebrew help

これで色々出てくれば、ちゃんとnodebrewが入りました。

nodeをインストールする

安定版を入れるコマンドをうちます。

$ nodebrew install-binary stable

入ったかどうかを確認します。次のコマンドは、インストールされているnodeのバージョンをすべて表示するコマンドです。正常にインストールされていれば、バージョンがリストアップされます。ちなみにcurrentというのが、使用中のnodeのバージョンです。

$ nodebrew ls

インストールされたものから、使うものを指定します。インストールしただけではだめです。

$ nodebrew use v0.10.12

次のコマンドで、現在使用しているバージョンを確認します。

$ node -v

次はGulpを入れていきます

Gulpのためにnode.jsを入れたと言っても過言ではない。次はGulpを入れます!

Sassで他のファイルを読み込む @importとpartial

プロジェクトによるが一般的にsassフォルダ以下のscree.sassというファイルで全てのsassファイルをimportし、screen.sassをcssにトランスコンパイルし、これをHTMLのヘッダーで読み込む。

この際、importするファイル名を『冒頭に「_」を付けたもの』にすることで (例:_mixin.sass) 読み込まれたファイルはCSSファイルにトランスコンパイルされない。なぜこうする利点があるかというと、HTMLで読み込み指定されているファイルはscreen.cssだけなのだから、その他のファイル生成されても使いみちがない。使わないのであればコンパイルする必要がない、のでしないほうがいい。

読み込むファイル名の指定

同じディレクトリにある場合は次のように指定する。拡張子(sass)は省略することが出来る。また、パーシャル用のファイル名(_ファイル名)の冒頭の「_」も省略できる。

import "ファイル名" //実際に読み込むのは_ファイル名.sass
import "フォルダ名/ファイル名"

@extend

既に読み込まれたスタイルであれば、@extend .クラス名 で援用できる。ここでは_box.sassの中の.boxへのスタイルを、.foxが援用している。

.box
width: 100px
height: 100px
@import "module/box"
@import "module/fox"
.fox
@extend .box

PSDファイルでデザインが規定されている場合の、レスポンシブデザインを実装する手順について

See the Pen used レスポンシブ by nakanishi (@nakanishi) on CodePen.

PSDファイルでデザインが規定されている場合、大きく分けて2つの実装パターンがある。

1つは全ての要素の「幅、高さ」をPSDファイルで指定されたpxで固定するパターンで、その場合、ラッパーのマージンがAUTOで変化する。つまり画面幅の変化に対して、「追従して変化するのは」ラッパーのマージンだけ、ということになる。(またラッパーに対してmin-width: –px で、それ以上小さくならないように指定することも多い。) これはユーザーのブラウザ横幅が、ある一定値よりも大きいほうでバリエーションが多いことを想定できる場合、つまりPC版で主に使われる。(900pxとか970pxとか1200pxとか、比較的大きい幅で見る人が多いであろう状況)

このパターンの実装は比較的容易で、各要素の幅をPSDファイルで指定されたpxに設定し、マージンも規定されたpxで設定すればよい。(特に画像パーツの幅、高さは全て指定してよい)

次に2つめのパターンとして、スマートホン版等、どんな横幅でも同じ見た目にするには、全ての要素を%で指定する。

このパターンの場合、width を指定すれば、margin: auto は効く。ただしposition: absolute、relative 等を設定した場合、margin: auto は効かない。しかし、margin-left: –% も left: –% も効く。そのため、中央に配置したい場合は、left: 23%等、マージン幅の全体に占める割合を指定することで配置する。

また画像そのものをレスポンシブにするには次の記事を参照

WebStormのショートカットキー

WebStom のショートカットのリストが英語なので、どの英単語が、どの機能なのかぱっと見わからないので困っていたが、公式サイトにわかりやすく分類された一覧表があった。ラッキー。これを元にショートカットを編集していく。

随時追加します。

ショートカットの設定ファイル

WebStomのショートカットの設定ファイルは次の場所にある。「WebStorm→Preferrence→Keymap」

設定ファイルを簡単に Git で共有するには次の記事を読んで下さい。

WebStorm の設定を複数の端末で共有する

虫眼鏡マークで機能を検索して、ダブルクリックすると編集できる。必要のないものはリムーブし、新たにaddすればいい。

ネストの開閉 Folding

ネストの開閉はFoldingのカテゴリーにまとめられている。畳み込み関係

  • expand 開く
  • collapse 閉じる
  • ノーマルバージョン 今いるラインだけを開閉する
  • Recursively 今いるラインと含まれる階層全てを開閉する

自分用メモ

expand command + (+)
expand recursively command + shift + (+)
collapse command + (-)
collapse recursively command + shift + (-)
置換 command + R
最近使ったファイルの検索 command + E
一行削除 comm + L
一行複製 comm + D
行の始端、終端に移動 comm + 左右
単語の始端、終端に移動 Alt + 左右
移動する時に、移動した範囲を選択する Shift を移動に加える
複数行を選択 shift + 上下
タブを1段階「減らす」 shift + tab
上下の行を入れ替える shift + comm + 上下
単語単位で選択範囲を広げる 早い!!! alt + 上下

ウィンドウ系

エディターに戻る ESC
ツールウィンドウを閉じて、エディターに戻る ESC + SHIFT
最後に開いたツールウィンドウに戻る F12

 

Todo fixme コメント

エディター内で、「コメント用タグ スペース todo スペース 内容」と入力すると  Todo リストとして認識してくれる。例えば .sass 内なら次のように。

// todo あとで直す

これは TODO 設定から細かくエディット可能。デフォルトでは todo と fixme というワードを認識してくれる。追加で以下の画像では test というワードで TODO リストに追加されるように設定してみた。

すると以下のように TODO リストに追加される。

開発中に必要だが、デプロイ時には必ず消しておきたいコメントは、TODO リストとして認識されるようにすることで、消し忘れを撲滅できる。また、書きながら、ここ後で直さなくてはというコメントも気軽に入れられる。

Live Template と JavaScript Postfix Completion

emmet のように、登録しておいた文字列の後に tab を押したらテンプレートを展開してくれる。かなりの頻度で ES6 の class 構文で export/import する書き方を検索しているので、登録した。

https://www.jetbrains.com/help/webstorm/2017.1/live-templates-2.html

Postfix Completion は JS 用にもとから登録されているもので、個人的には「”大声.log”でタブ」とすれば「console.log(“大声”)」になるのが便利。他にも頻繁に使う if 文なども登録されているので毎回書くやつは書かなくていい。

float position z-index の考察 / 仮説

こんなふうになっているのではないか…仮説…

See the Pen used box float absolute2 by nakanishi (@nakanishi) on CodePen.

See the Pen used box float absolute3 by nakanishi (@nakanishi) on CodePen.

See the Pen used box float absolute4 by nakanishi (@nakanishi) on CodePen.

See the Pen used box float absolute5 by nakanishi (@nakanishi) on CodePen.

See the Pen used box float absolute6 by nakanishi (@nakanishi) on CodePen.

CSSの世界は3層ある

層が上のほうがかならず表示的に上に来る。position層だけはz-indexで表示順を操作できる。

  1. ノーマル層。position: static かつ float: none。 ぶつかり合って、同じ位置は占有できないので、弾かれる。親要素から唯一見える。(position: relativeは例外的にここに存在する。)
  2. float層。ぶつかり合って弾かれるが、1の層の上でおきているので、1の層とは干渉しないし、上に表示される。親要素からは消える。
  3. position層。平面的な世界で、ぶつかりあうことはなく、同じ位置に何個でも置ける。表示順はz-indexで指定する。top,left、z-indexが効く。親要素からは消える。(relativeだけは消えない。例外)
position / float none left / right
static  1層へ  2層へ
relative top,right等効く。1層へ top,right等効く。2層へ
absolue, fixed top,right等効く。3層へ  floatは効かない

標準位置

  • position: static
  • float: none
  • top、left等: auto (0とは違う)

バックグラウンドイメージ背景の画像を画面幅100%にする方法

See the Pen Responsive background-image by nakanishi (@nakanishi) on CodePen.

ポイントは疑似要素にパディングを与えて、親要素の高さを動的に決定することである。疑似要素のパディングが、親要素に対して一定の比率を保つことで、結果として元画像の縦横比をキープしたまま、画像を伸縮することができる。