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

美味しいものが食べたい

食べてる時と寝てる時が幸せ

喉がやられる

不摂生な生活のツケがきた。喉が痛いし、頭はボーッとするやつ。風邪。

 

1年に2-3回あるかないかの症状で、季節の変わり目に起こるし、初期で手を打てば悪化しないことまでわかっている定番のやつ。

 

あと14日、気持ちが高揚もしなければ凹みもせず、ただただ過ぎていくのでめんどくさくてやりたくないような作業を率先してやって、データをまとめている。このデータまとめたところでなんだけど、時間を消費するためにいるとゆうことほど辛い時間はない。

 

ある程度人気がなくなったら、勉強したい本に切り替えようかな。

 

この中途半端な期間を過ごすくらいなら、家で仕事する方がマシだとも思ってるけどなかなか、業務体制的に難しい。

 

はー早く抜け出したい。

三点はてんでバラバラ

久々に開いてみる。

 

案の定すぐに更新しなくなってしまった。前回の更新から、3ヶ月ちょっと。大きく環境とゆうか、求められてるであろうもの・やりたいこと・やらなければいけないことこの3つが見事に分散してしまって悩ましかった。

 

結局空気を読んで仕事をするなら、やりたいこととは真逆へ進むことになった。この掛け違えが起きたことも、そうなってしまったこともわかるのだけど、納得いかず仕事をするのは嫌なので環境を変えることにしてみた。

 

なので、この環境もあと数週間。

 

嫌なことや深く考えること、自分を試したり、ぐっと抑えたりなんてこともあったなかなか実りある期間。

結果的にポジティブに捉えられてるので後悔はしてないし、視野も広がった!

自分に足りてないこともわかったのだ良かった。

 

ただ、所属会社の体制として当初と話が違うとか、長期的にみたときに漠然とした違和感が拭えないのもありこの結果に至った。業務のことと、会社のことの2つでモヤモヤが晴れないのは、それなら全て手放そうになった。

 

自分の得手不得手、やりたいことが少し見えてきたところを重点的にもっと勉強したいと思えて新しい考え方ができるようになったので、4月が待ち遠しい。

 

気持ちに正直に、考えに凝り固まらずに、やりたいことをやれるように。

BEM

会社のCSSの設計はBEMとSMACSSの融合体だとのことだったので なんとなく眺める程度では理解してたのですが、いざ書き手になるとなるとちゃんと知っとこうと思い勉強。

てことでBEMから。

今裏っかわで、デザインファイルを落としていて操作の反応がにぶすぎてイライラしてます。

BEMってなんぞ?

まさに優秀なまとめがこちらにありますので、こちらを参考にしていただければわかるはずかと。

github.com

わたしは上記をベースに、改めて自分で理解するためにまとめます。

BEMとは

BEM とはブロック(Block)、エレメント(Element)、モディファイア(Modifier)の略語である。 プログラミングにおける方法論の最も一般的なものはオブジェクト指向プログラミング(Object-Oriented Programming)だろう。 その枠組みは多くの言語で具体化されている。 BEMはいくつかの点でオブジェクト指向プログラミングと似ている。 それは現実のものをコードとして表現する方法であり、一連のパターンであり、また使用しているプログラミング言語とは関係なくプログラムの本質について考える方法である。 私たちはBEMの原則をフロントエンド開発のテクニックとツールをつくり上げるために用いたことで、Webサイトを迅速に開発し、長期間に渡ってメンテナンスし続けることができるようになった。

わたし、JSやりながらオブジェクト指向という言葉とはいつも戦ってきたんですが 数年経って改めてオブジェクト指向ってなんぞ?と振り返ってこちらで基礎を勉強しなおしました。

5分で絶対に分かる:5分で絶対に分かるオブジェクト指向 (1/6) - ITmedia エンタープライズ

さらに基礎パート

ここから始めるオブジェクト指向(1):オブジェクト指向の考え方 - ITmedia エンタープライズ

もっとオブジェクト指向に浸りたい人

オブジェクト指向の世界(1):流れ去るものと不変なもの - ITmedia エンタープライズ

やることができて、わたしは基礎パートあたりまでやったのですが、身近なものを題材に関係性を考えるのでなんとなく頭の中で理解はできます。 でもこれもだけど、実務で既に経験したうえでのほうが理解力は高くなるかと思われます。

自分で復習するためにも貼っとく。

ブロック(Block)

ブロックは独立した存在で、アプリケーションの「構成要素」である。 ブロックには単体のものも複合物(他のブロックを含むもの)もある。 例えばだけど、headerとかfooterとかmainとかtabとかdivでくくる大枠みたいなやつ。もちろんheaderの中のmenuだったり。 この辺は参考の図解みたほうがわかりやすい。

エレメント(Element)

エレメントは、ブロックの一部分であり特定の働きを持つ。 エレメントは文脈依存であり、そのエレメントが属するブロック内でのみ意味をなす。

日本語って難しいよね。上記だとまったくわからん。

f:id:pipipipipo:20161127230841j:plain

てことで、Qiitaのheaderをひっぱってきました。 この画像全体がblockで、ロゴと検索フォームとその横のラベル&テキストが1つのブロック且つ、各々block。 さらに、このラベル&テキストblockのラベルとテキストがelementです。

ページとテンプレートを表現する手段

ブロックとエレメントはページコンテンツの構成要素となる。 単にページ上に存在するということに加えて、それらの配置も重要である。 ブロック(またはエレメント)は、決まった順序でお互いに並ぶことができる。

f:id:pipipipipo:20161127232017j:plain ex.枠線で囲まれたのがblockとなり繰り返されている。

ブロックはその内部に他のブロックを含むこともできる。

f:id:pipipipipo:20161127230841j:plain ex.headerという大枠のblockの中にleftとrightのblockさらに、その中にlogo、search-form、label+textとかのblock

これらの構成要素がある一方で、プレーンテキストでページレイアウトを記述することも必要である。 そのためには、すべてのブロックとエレメントはそれを識別するためのキーワードを持つ必要がある。

特定のブロックを指すキーワードはblock nameとなる。 例えば、menuはメニューブロックのキーワードとなり、headはヘッダーブロックのキーワードとなる。

特定のエレメントを指すキーワードはelement nameとなる。 例えば、メニューの各アイテムはmenuブロックのitemエレメントである。

ブロック名(block name)は、明確にどのブロックを指すかを表現できなければならないため、プロジェクト内で一意である必要がある。 同じブロックの唯一のインスタンスは同じ名前を持つことができる(訳注:シングルトン的な認識をするブロックの場合、ということと思われる)。 その場合、ある1つのブロックがページに2回(3回、4回、…)と表れる、と表現することになる。 エレメント名はそのブロックのスコープ内で一意である必要がある。 エレメントは何度も繰り返すことができる。

f:id:pipipipipo:20161127232818j:plain

ソースみたら、div.a-boxってのが繰り返されてるのがわかる。 photoshop使いたくなかったけど、使ってしまった…

ブロックの独立

プロジェクトの成長にともなって、ブロックは追加され、削除され、ページの別な位置に移動されたりしていくものである。 例えばロゴと認証ブロックを入れ替えたり、メニューを検索ブロックの下に置いたり、といったことだ。 独立したブロックは、自由な配置(ページのどこでも、他のブロックを含んだり含まれたり)ができるような方法で実装されている。

んーつまり、配置を移動させたからといってレイアウトが崩れたりするのは違う。
だからblockってやつは独立した要素じゃないと駄目ってこと。
headerの中でこれとこれ入れ替えてもらえる?っってなった場合に、場所変えたから崩れたってのは駄目!

独立したCSS

これは、CSSの観点では以下のことを意味する。

* ブロック(やエレメント)は、CSSのルール内で使用可能なユニークな名前(CSSクラス)を持つ
* CSSセレクタにHTML要素などの、本質的に文脈フリーではないセレクタは含まない(.menu tdのような)
* カスケーティングセレクタは避けるべき

独立したCSSクラスのためのネーミング

適切なCSSクラス名のネーミングルールのひとつがこれだ:

  • ブロックのCSSクラスは、そのblock nameと同じ
<ul class="menu"></ul>
  • エレメントのCSSクラスは、任意のセパレーターで区切られたblock nameとelement name
<ul class="menu">
  <li class="menu__item"></li>
  <li class="menu__item"></li>
</ul>

カスケーディングを最小にするためには、エレメントのCSSクラスにブロック名を含めるのが重要である。 ツールやヘルパー(後述)が機械的にエレメントにアクセスできるようにするためには、セパレーターを一貫したものにしておくのも重要である。 私たちは、長い名前のセパレーターにハイフンを使い(block-nameなど)、ブロックとエレメントの区切りには2つのアンダースコアを使っている(block-name__element-name)。 好きなセパレーターを使うこともできる。

ex.
* block-name--element-name
* blockName-elementName

独立したテンプレート

テンプレートエンジンの観点からは、ブロックの独立は以下のことを意味する:

* ブロックとエレメントは入力データを表現しなければならない
    * ブロック(またはエレメント)は、「メニューはここに配置すべき」といったことをテンプレート内で表現できるようにするため、ユニークな「名前」を持たなくてはならない
* ブロックはBEMツリーのどこにでも出現できる

ブロックのための独立したテンプレート

テンプレート内にブロックがあらわれた場合、テンプレートエンジンはそれを一義的にHTMLに変換することができるはずである。 したがって、すべてのブロックはそのためのテンプレートを持つべきである。 例えば、XSLでのテンプレートはこのようになる:

<xsl:template match="b:menu">
  <ul class="menu">
    <xsl:apply-templates/>
  </ul>
</xsl:template>

<xsl:template match="b:menu/e:item">
  <li class="menu__item">
    <xsl:apply-templates/>
  </li>
<xsl:template>

ブロックの反復

あるブロックが単一のものとして開発されていたとしても、同じものをあらゆるタイミングでページに配置することができる。

CSS的に表現するとこうなる:
* IDベースのCSSクラスを使ってはならない
    * 「一意なものにはしない」という我々の要求を満たすため、クラスセレクタのみを使う。
JavaScript的にはこういうことだ:
* 同様の振る舞いを持つブロックは同様に検出される: それらは同じCSSクラスを持つ
    * CSSクラスセレクタを使うことで、動的な振る舞いを必要とする同じ名前のすべてのブロックを抽出することができる

xsl云々はいったん無視していいかも。ちょっと理解しがたい。

ブロックのためのモディファイア

既存のものと似ているが、見栄えや振る舞いが少しだけ違うブロックを作りたくなることはよくある。

こんなタスクがあるとしよう: * フッターに別なメニューを 異なるレイアウト で追加する。

既存のものとわずかしか違わないブロックを作るのではなく、モディファイアを使うことができる。 モディファイアは、見栄えや振る舞いが少し違うブロックやエレメントのプロパティである。 モディファイアは名前と値を持つ。複数のモディファイアは同時に使用できる。

例 背景色を指定するブロックモディファイア 「現在」のアイテムの見た目を変えるエレメントモディファイア

これはよくある!トップと下層でちょっとデザイン違うけど、同じ要素のものいれるみたいなやつ。
その時はモディフィアを使えってことね。

HTML/CSSの観点から

モディファイアは、ブロックやエレメントに追加するCSSクラスである。

<ul class="menu menu_size_big menu_type_buttons"></ul>
.menu_size_big {
  // 高さを指定するCSSコード
}
.menu_type_buttons .menu__item {
  // アイテムの見栄えを変えるCSSコード
}

エレメントモディファイア

エレメントのモディファイアも同じように実装される。 かさねて言うが、CSSを手書きする場合には、機械的にアクセスできるように一貫したセパレーターを使うことがとても重要だ。 例えば、現在のメニューアイテムは以下のモディファイアでマークアップできる:

<ul class="menu">
  <li class="menu__item">Index</li>
  <li class="menu__item menu__item_state_current">Products</li>
  <li class="menu__item">Contact</li>
</ul>

主題の抽象化

多くの人びとがプロジェクトで作業する場合、メンバーはデータドメインに関して合意を持ち、ブロックやエレメントの命名にはそのドメインを使うべきである。 例えば、タグクラウドブロックは常にtagsという名前になり、そのエレメントはtagとなる、というようなことだ。この決まりはCSSJavaScript、XSLなどすべての言語に対して同じだ。

開発プロセスの観点から: * すべてのメンバーは同じ用語を扱うようになる

CSSの観点から: * ブロックとエレメントに対するCSSを、命名規約に準じたCSSコンパイルされる擬似言語で記述することができる

.menu {
    __layout {
      display: inline;
    }
    __layout-item {
      display: inline-block;
      …
    }
    __item {
      _state_current {
        font-weight: bold;
      }
    }
  }

JavaScriptの観点から: * クラスセレクタを使ってDOM要素を直接探す代わりに、特別なヘルパーライブラリを使うことができる:

$('menu__item').click( … );
$('menu__item').addClass('menu__item_state_current');
$('menu').toggle('menu_size_big').toggle('menu_size_small');

ブロックとエレメントのCSSクラスの命名規約は時とともに変わるものである。 ブロックとエレメントにアクセスするのに特別なJavaScript関数を使い、その処理にはモディファイアを使うことで、命名規約が変わった場合でもそれらの関数を変更するだけでよくなる。

block('menu').elem('item').click( … );
block('menu').elem('item').setMod('state', 'current');
block('menu').toggleMod('size', 'big', 'small');

上記のコードは抽象的なものである。 私たちは実際には、bem-blブロックライブラリに含まれるi-bemブロックのJavaScriptコアを使っている。

http://bem.github.com/bem-bl/sets/common-desktop/i-bem/i-bem.en.html

このあたりは正直よくわからん。
jsどうのは無視しても、皆で共通認識のブロックやエレメントの命名規則を設けて使用しましょうということかな。

ブロックの一貫性

サイトには、ある動的な振る舞いを持ったボタンブロックがある。ブロックにカーソルを重ねた時、その見栄えが変わる。 マネージャーは、同じボタンを他のページでも使えるかどうか聞きたくなる。 ブロックのCSS実装だけでは不十分だ。 ブロックの再利用とは、JavaScriptによる振る舞いも再利用できるということを意味する。 ブロックは自身に関するすべてを「知って」いなければならない。 ブロックを実装するために、使用しているすべての技術を用いて見栄えと振る舞いを表現する。私たちはそれを多言語主義(multilingualism)と呼ぶ。 多言語(Multilingual)プレゼンテーションとは、ブロックの見た目と機能を実装するのに必要となるすべてのプログラミング言語でブロックを表現したものである。

ブロックをUI要素としてページに配置するには、以下のような技術でブロックを実装する必要がある:

  • ブロックの宣言をHTMLコードに変換するテンプレート(XSL、TT2、JavaScriptなど)
  • ブロックの見栄えを記述したCSS
  • ブロックが動的な振る舞いを持つ場合は、ブロックのJavaScript実装
  • 画像
  • ドキュメント ブロックを構成するすべてのものが、ブロック技術である。

以上。難しい。
超わかりにくい。理解力の問題なんかしら。笑

まとめ

・BEMという構造がある、それはBlock,Element,Modifier  
・要素をblockベースで考える。blockはblockを含む、blockに内包されるのがElement。  
・blockは独立した要素なので、他のblockに依存してはいけない。(配置を変更したからレイアウトが崩れるというのは駄目)  
・blockとelementについての命名は、blockはblock nameが使われる。どこでも使えるので、一意の名前であること。elementはblock name + element nameが使われる。  
・cssの記述でカスケーティングは使わない。(.menu tdとか)  
・idベースのcssの記述はしない。(#top > .menuとか)  
・要素は一緒で、見栄えや振る舞いだけが変わる時にはmodifier(blockやelementに追加するクラス)を使用する(背景色だけ違う、.currentの時の色が変わるなど)  

このあたりかな。
あくまでもこれをベースなので最高の理解力は必要ないと開き直る。
BEMだとクラス名が冗長化されすぎるしね。

まとめんの大変。
※余談だけど、Markdownで改行の仕方わからずだったけど、半角スペース×2で解決!

Emmet

自分が勉強したことをまとめて、吐き出す場所になりつつあるこのブログ。 今日はEmmet。Emmetの呼び方ではなくて、わたしはZen Cordingが流行った時代の人ですが、 !の展開は覚えてるけど実際0ベースのコーディングそこまですることがなかったのもあり記憶の彼方へ葬り去られてたのを呼び起こすべく。

Emmetってなんぞ?

早い話は、タグを一から直打ちせずに省略形でかいて展開できるってことかな。 まぁそれをやるには頭の中でhtml組み立てれる必要があるのだけど。

Emmet — the essential toolkit for web-developers

わたしは直打ちしながらあれこれ考えたりするので、脳みそ的に合ってないんじゃないかと思いつつも 今回は少しでも効率化に特化してるのでこの際使いたい。

直近でコーディングの仕事もらったので、そこら辺でもワシワシと使ってこうかなと思ってます。 ハマったことがあれば、まぁその時にでも。

以下個人的にこれくらい知っとけばいいだろうてのまとめ

・[]属性値を指定する場合、tableなど

・>はネスト

・#はid, .はclass, :はtype

・+よくある要素と子要素の展開(ul+,ol+,table+,dl+)

・+隣り合った要素の展開
div.hoge+div.moge
→
<div class="hoge"></div>
<div class="moge"></div>

・要素内コメント
p{hoge}
→
<p>hoge</p>

・idをコメントアウトにして展開
div#hoge|c
→
<div id="hoge"></div>
<!-- /#hoge -->

・複数の入れ子の展開
(div>h2)*3
→
<div>
  <h2></h2>
</div>
<div>
  <h2></h2>
</div>
<div>
  <h2></h2>
</div>

・連番の指定方法(要素)
h$*3
→
<h1></h1>
<h2></h2>
<h3></h3>

・連番の指定方法(class)
div.hoge$*3
→
<div class="hoge1"></div>
<div class="hoge2"></div>
<div class="hoge3"></div>

・複数行の連番の指定方法(class)
div.class-$$*3
→
<div class="class-01"></div>
<div class="class-02"></div>
<div class="class-03"></div>
※$$$にすると001から展開される

・a要素を入れ子にする
table>tr>td>a>
→
<table>
  <tr>
    <td><a href=""></a></td>
  </tr>
</table>

・^を連結して記載することで何階層も上にいくことが可能になります
div.hoge1>div.hoge2>div.hoge3>div.hoge4^^^^div.hoge5
→
<div class="hoge1">
  <div class="hoge2">
    <div class="hoge3">
      <div class="hoge4"></div>
    </div>
  </div>
</div>
<div class="hoge5"></div>

こんな感じ。

全てをやろうとするとめんどくさそうなので、要所要所で使ったり 書くよりコピペしたほうがいい場合なんかは臨機応変に対応した方がいいかな。

Sublime Text 3にバージョンアップ

前職、お家の開発環境ではSublime Text 2にお世話になってきて 現職ではSublime Text 3ていうことで、家でも環境をあわせるために環境チェンジ。

もともとゴリゴリコーディング三昧ではなく、職場ではFEからあがってきたデータの保守とか修正とかで 個人ではまぁサービスのコーディングするでもなく、個人で受けてる仕事でのwebサイトのコーディング程度だったので 今までそんな「効率」部分に関してはそんな意識してなかったんですが これを気にガツッと効率化させるべくまとめる。

一応、Sublime Text 3のチートシートと、Emmetに関しては別途まとめる予定。 むしろそこが個人的にはやらなければいけないところではある。

Sublime Text ってなんぞ?

Sublime Textのトップの売りの部分をべたっとこぴぺ

Sublime Text: The text editor you'll fall in love with

Some things users love about Sublime Text

Goto Anything

Use Goto Anything to open files with only a few keystrokes, and instantly jump to symbols, lines or words.

Triggered with ⌘P, it is possible to:

Type part of a file name to open it. Type @ to jump to symbols, # to search within the file, and : to go to a line number.

These shortcuts can be combined, so tp@rf may take you to a function read_file within a file text_parser.py. Similarly, tp:100 would take you to line 100 of the same file.

Multiple Selections

Make ten changes at the same time, not one change ten times. Multiple selections allow you to interactively change many lines at once, rename variables with ease, and >manipulate files faster than ever.

Try pressing ⇧⌘L to split the selection into lines and ⌘D to select the next occurrence of the selected word. To make multiple selections with the mouse, take a look at the Column Selection documentation.

Command Palette

The Command Palette holds infrequently used functionality, like sorting, changing the syntax and changing the indentation settings. With just a few keystrokes, you can search for what you want, without ever having to navigate through the menus or remember obscure key bindings.

Show the Command Palette with ⌘⇧P.

Distraction Free Mode

When you need to focus, Distraction Free Mode is there to help you out. Distraction Free Mode is full screen, chrome free editing, with nothing but your text in the center of the screen. You can incrementally show elements of the UI, such as tabs and the find panel, as you need them.

You can enter Distraction Free Mode using the View/Enter Distraction Free Mode menu.

Split Editing

Get the most out of your wide screen monitor with split editing support. Edit files side by side, or edit two locations in the one file. You can edit with as many rows and columns as you wish.

Take advantage of multiple monitors by editing with multiple windows, and using multiple splits in each window.

Take a look at the View/Layout menu for split editing options. To open multiple views into the one file, use the File/New View into File menu item.

Instant Project Switch

Projects in Sublime Text capture the full contents of the workspace, including modified and unsaved files. You can switch between projects in a manner similar to Goto Anything, and the switch is instant, with no save prompts - all your modifications will be restored next time the project is opened.

Plugin API

Sublime Text has a powerful, Python based plugin API. Along with the API, it comes with a built in Python console to interactively experiment in real time.

Customize Anything

Key Bindings, Menus, Snippets, Macros, Completions and more - just about everything in Sublime Text is customizable with simple JSON files. This system gives you flexibility as settings can be specified on a per-file type and per-project basis.

Cross Platform

Sublime Text is available for OS X, Windows and Linux. One license is all you need to use Sublime Text on every computer you own, no matter what operating system it uses. Sublime Text uses a custom UI toolkit, optimized for speed and beauty, while taking advantage of native functionality on each platform.

ながい。 有能になったgoogle先生に翻訳して頂くとこうなります。

翻訳結果が以下

ユーザーが崇高なテキストについて好むもの

何かに行く

何でもキーを押すだけでファイルを開き、すぐに記号、行、言葉にジャンプすることができます。 ⌘Pでトリガされると、次のことが可能になります。

ファイル名の一部を入力して開きます。 記号にジャンプするには@、ファイル内を検索するには#、行番号に移動するにはを入力します。

これらのショートカットを組み合わせることができるので、tp @ rfはtext_parser.pyファイル内のread_file関数に移動します。同様に、tp:100は、同じファイルの100行に移動します。

複数の選択

同時に10回の変更を行います.1回の変更ではなく、10回の変更を行います。複数の選択肢を使用すると、一度に多くの行をインタラクティブに変更したり、変数の名前を簡単に変更したり、 ファイルを以前より速く操作したりできます。

選択を線に分割するには⇧⌘Lを押し、選択した単語の次の出現を選択するには⌘Dを押してください。マウスを使用して複数の選択を行うには、列選択文書を参照してください。

コマンドパレット

コマンドパレットには、並べ替え、構文の変更、インデント設定の変更など、あまり使用されない機能があります。 わずかなキーストロークで、メニューをナビゲートしたり、わかりにくいキーバインディングを覚えることなく、必要なものを検索することができます。

⌘⇧Pでコマンドパレットを表示します。

ディストラクションフリーモード

あなたが集中する必要があるとき、あなたを助けるために、Distraction Free Modeがあります。 Distraction Free Modeはフルスクリーンでクロムフリーの編集で、画面の中央にテキストだけが表示されます。 必要に応じて、タブや検索パネルなどのUIの要素を段階的に表示できます。

Distraction Free Modeに入るには、View / Enter Distraction Free Modeメニューを使用します。

スプリット編集

スプリット編集をサポートしたワイドスクリーンモニターを最大限に活用してください。ファイルを並べて編集するか、1つのファイル内の2つの場所を編集します。 必要な数の行と列で編集できます。 複数のウィンドウで編集し、各ウィンドウで複数の分割を使用することで、複数のモニターを利用できます。

分割編集オプションの表示/レイアウトメニューを見てください。 1つのファイルに複数のビューを開くには、File / New View Fileメニュー項目を使用します。

インスタントプロジェクトスイッチ

サブライムテキストのプロジェクトは、変更されたファイルと保存されていないファイルを含むワークスペースの全内容をキャプチャします。 何かにジャンプするのと同様の方法でプロジェクトを切り替えることができます。スイッチは即時に保存され、プロンプトは保存されません。 プロジェクトを開いたときに変更内容はすべて復元されます。

プラグインAPI

Sublime Textには強力なPythonベースのプラグインAPIがあります。 APIに加えて、リアルタイムでインタラクティブに実験するPythonコンソールが組み込まれています。

何でもカスタマイズ

キーバインディング、メニュー、スニペット、マクロ、補完など - Sublime Textのすべての機能は、単純なJSONファイルでカスタマイズできます。 このシステムでは、ファイル単位のタイプとプロジェクト単位で設定を指定できる柔軟性があります。

クロスプラットフォーム

サブライムテキストは、OS XWindowsLinuxで使用できます。 1つのライセンスは、使用しているオペレーティングシステムにかかわらず、所有するすべてのコンピュータで崇高なテキストを使用するために必要なすべてのライセンスです。 Sublime Textは、スピードと美しさに最適化されたカスタムUIツールキットを使用し、各プラットフォームのネイティブ機能を利用します。

こんな感じ。 Atomとか気になったんだけど、まぁ業務効率に特化すべくとりあえずこちらでいきます。

とりあえず3をダウンロード。

cmd + shift + pでPackage Controlをdl

今回dlするsublimetext3のパッケージコントロールの種類

・All Autocomplete
標準の自動保管機能を強化し、マッチする文字列があればサジェスト

・AutoFileName
html,css等のリンクファイル名の補完
ディレクトリ構造を追いながら補完できる

・BracketHighlighter
[], (), {}, "", '', <tag></tag>といったカッコ類を強調

・ConvertjaZenHan
全角<->半角変換をしてくれる機能
メニューの [Tools] – [ConverjaZenHan] から選択範囲内とファイル全体の変換を選択できる

詳細はこちら
[http://orememo-v2.tumblr.com/post/95237450958/convet-zenhan:title]

・ConvertToUTF8
UTF-8以外の文字に対応している

・CSS snippets
cssのスニペット集

・Emmet
sublime text3でEmmetを使える
※Emmetについては別途

展開のショートカット変更の詳細はこちら

[http://qiita.com/naru0504/items/d4e5708c773ab697fdef:embed:cite]

・TrailingSpaces
スペースを検知し、ハイライトしてくれる

・Git Gutter
gitで変更行を可視化する
前回コミットとのdiffを行番号の横に表示

・Handlebars
Handlebarのシンタックスハイライト

・Japanize
sublime text3を日本語化
参照はこちら 
[http://webkaru.net/dev/sublime-text-3-japanize/:embed:cite]

・RecentActiveFiles
最近閉じたファイルを検索
間違えてファイルを閉じた時とか便利

・Sublime Files
Sublime Textでのファイル操作をキーボード主体で行うパッケージ
Control+Command+Nキー(Mac)で、パレットが開き、ディレクトリの移動やファイルの操作、ターミナルの起動が行えるようになる
キーボード主体で作業を行いたい場合は有効なパッケージ

・SublimeLinter
Sublime Textにリアルタイム文法チェック機能を付け加える強力的なプラグイン

・Sass
・Scss
・HTML5

などなど、あとは個人の開発環境に合わせてカスタマイズすればよい感じ。 あ、jsとかjQueryもいれないとね。まぁそれは後日。

てことで、上記をひたすらインストールしては、場合によってメニューバーの Sublime Text → Preferences → package setting あたりとかでちょこちょこ変えていく感じ。keybindなんかもショートカットよく競合するので個人的に使いやすいように設定する。 個人的な覚え書きなので、細かい設定はググって参考にされたらよいかと。

画面のデザインは

itsthatguy.com

これに決定。

あとは仕事しながら「あったらいいな」や、対応範囲が増えたり変わった時に必要に応じて自分でカスタマイズ!

あー書くのって大変ね。

Markdown記法

早速仕事のこと。

前職でRedmineとかの起票系のツールとかslackもだけど、あと社内のwikiとかそういうやつでちょいちょい出てきていた、「Markdown記法」。

よく使うやつだけちょちょっとやっていたものの、実際わたしは、コミットしましたーとか、jsでclassこれ追加してもらうと切り替わるcss作ってますーとかそんなんばっかだったんですが、今回また使いそうなのでちょっとやってみようと思い調べました。

 

Markdown記法とはなんぞ?

Markdown(マークダウン)は、文書を記述するための軽量マークアップ言語のひとつである。本来はプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発されたものである。しかし、現在ではHTMLのほかパワーポイント形式やLaTeX形式のファイルへ変換するソフトウェア(コンバータ)も開発されている。各コンバータの開発者によって多様な拡張が施されるため、各種の方言が存在する。

とのこと。

参照はwikipediaです。

Markdown - Wikipedia

 

てことで、まぁ普段からHTMLに馴染んでればそんな難しいもんでもないんですが、

使わないと忘れるので、主要そうなのだけメモにまとめた。

pre>codeでくくるのhtml編集からだと超絶めんどいんだけど、これちゃちゃっとやる方法ないの?途中でめんどなって諦めた。

→設定からマークダウン記法に変更できたのでこれからはそっちで。ただこれは設定変更前だからいじれなかった。。。つらみ。

 

・見出し

    # 見出し1
## 見出し2
### 見出し3
#### 見出し4
##### 見出し5
###### 見出し6

※#の数がh1の数字と呼応する感じ


・箇条書きリスト

    - リスト1
   - ネスト リスト1_1
      - ネスト リスト1_1_1
      - ネスト リスト1_1_2
   - ネスト リスト1_2
- リスト2
- リスト3



・番号付きリスト

    1. 番号付きリスト1
    1. 番号付きリスト1_1
    1. 番号付きリスト1_2
1. 番号付きリスト2
1. 番号付きリスト3

 


・引用

    >ほにょほにょ。
> ほにょほにょ。ほにょほにょ。ほにょほにょ。



・二重引用

    >ほにょほにょ。
> ほにょほにょ。ほにょほにょ。ほにょほにょ。
>> ふにょふにょ。ふにょふにょ。ふにょふにょ。
>> ふにょふにょ。ふにょふにょ。ふにょふにょ。


・pre記法(スペース4 or タブ)

    # Tab
  class Hoge
    def hoge
      print 'hoge'
    end
  end
---
    # Space
    class Hoge
      def hoge
        print 'hoge'
      end
    end



・code記法

    インストールコマンドは `gem install hoge` です


・強調:<em>

    normal *italic* normal
normal _italic_ normal


・強調:<strong>

    normal **bold** normal
normal __bold__ normal


・強調:<em> + <strong>

    normal ***bold*** normal
normal ___bold___ normal


・水平線

    ***
___
---
*    *    *


・リンク

    [Google先生](https://www.google.co.jp/)


・定義参照リンク

    [こっちからgoogle][google]
その他の文章
[こっちからもgoogle][google]


GitHub Flavored Markdown(GFM)


GitHub Flavored Markdown(GFM)GitHubの独自仕様を加えたMarkdown記法。
以降、GFMと記載します。


・GFM:リンクテキスト簡易記法

    https://www.google.co.jp/
    


・GFM:取り消し線

    ~~取り消し線~~


・GFM:pre記法(チルダ×3)

    ~~~
class Hoge
    def hoge
        print 'hoge'
    end
end
~~~


・GFM:pre記法(シングルクォート×3)

    ```
class Hoge
  def hoge
    print 'hoge'
  end
end
```


・GFM:pre記法(シンタックスハイライト)

    ~~~ruby
class Hoge
  def hoge
    print 'hoge'
  end
end
~~~

※~~~のあとには、シンタックス言語名を記述する


・GFM:表組み

    |header1|header2|header3|
|:--|--:|:--:|
|align left|align right|align center|
|a|b|c|


・GFM:ページ内リンク

    ## <i class="fa fa-cube" style="font-size:1em;"></i> menu
* [to header1](#header1)
* [to header2](#header2)
<!-- some long code -->
[return to menu](#menu)
### header1
### header2