Sublime TextでBEM設計（SCSS）する際には Syntax Highlighting for Sass 使ったほうがいいよ
SCSS（Compass）でBEM設計コーディングをしよう、と思った時に気になったことが。 Sublime Textの人気なSCSS用シンタックスパッケージはSCSSですが、ComapssのBEM向け記法で記述しようとすると、
こんな具合にclassにハイライトが入ります。
具体的には「&」のあとに「_」（アンダースコア）や「-」（ハイフン）をつけると起こる現象です。
別にコーディング自体に影響はないですが、エラーが起きてる気がして心がざわつくので
なんとかしたい...と思って調べていたらこんな記事がありました。
海外の方も同じことを思っていたそうです。
BEM nesting SCSS with parent selectors breaks Sublime Text syntax highlighting?
Syntax Highlighting for Sassをインストールする
ということで、下記パッケージをインストールすることで解決できます。
はい、この通り治ります。気持ち悪くなくなりました。
なお、パッケージを切り替えることでコード補完もemmetのような省略コードを打つ形式に切り替わります。
便利なので問題ないのですが、SCSSのパッケージに慣れていた方は一応注意を。
Markdownでテキスト書くならTypedがオススメ
年度初めの記事。今年もマイペースに、どうぞよろしくお願いいたします。
やる気を出す意味も込めて開発・ライティング環境を整えてみよう、とRealmac SoftwareのEmberとTypedというMacアプリを同時購入してみました。Emberについては、こことかこことかでレビューしている方がいるので割愛。今回取り上げるのはTypedについて。
Typedはミニマルなエディタで、とにかく簡潔に、シンプルに文章がかけるエディタ。Markdown記法で書くことに特化しています。もともとこのブログもMarkdownで書いているのでとってもハッピー。
気に入っている機能
- デザインがとにかくシンプル。書きやすい。背景色の切り替えも可（白・ベージュ・黒）
- 画面をフルスクリーン化できるZen mode。⌘+Yで切り替えられる。あとこのモードにすると環境音が流れる。座禅して文章をひたすら書く感じ
- Markdownで書く人向けに便利な機能が沢山
駄目なところ
- クラウド機能が無い。テキストのネットワーク保存は手動で
App Storeで売ってない。アプリの管理が少々めんどくさい- Markdown記法以外の書き方をする人には、どの機能もあんまり魅力的ではない（正直
ちなみに今まではMarsEditを使っていました。 Markdownも使えてプレビューもでき、さらには各ブログとの連携・投稿も可能という盛々アプリ。このオールインワンなこと、確かに素晴らしいとは思うけど、少々盛り過ぎというかお腹いっぱいというか。何より一番の問題として、あのもっさりとしたUIが記事を書く気を著しく削がれます。 MarsEditと比較してみて、Typedは機能的にははっきり言って充実はしていません。各ブログとの連携はできないし、記述方式は通常ライティングとMarkdownしか選べないです。しかし煩雑にならず、書くことに集中でき、UI（見た目）はとてもシンプルで書くことを邪魔しないです。。記事や文書を書くエディタとしてこれほど重要なことはないのではなかろうかと。
余計なものをそぎ落としたこのTyped。まずは今年のオススメアプリとさせてもらいます。
.....
あとRealmac Softwareがリリースしているタスクツール、Clearがセールしてるんで（2015/01/31現在）そちらも買うと幸せになれると思います。ここのアプリはどれもデザインが素晴らしいですね。
App Store版がリリースされました（2015/07/21追記）
Sketchをプレゼンテーションスライドに使う話
〆切をとうに過ぎたAdvent Calender2014と絡めた話。13日目の記事です。
先日、Sketchを布教するためにプレゼンテーション資料を作ったのだが、 Sketchを教えるんだから資料もSketchで作成してみたのだが、周りで聞く以上に良い使い勝手と思ったので共有。特にPowerPointの起動の遅さにイライラするスーパー短気、かつデザインを多少かじっているような、そう、僕のような人種には最適なツールなんじゃないかと。 以下が作成したスライド。
素敵ポイントは次の通り。
- PowerPointと違ってレイヤーの概念があるので、とにかくレイアウトがしやすい
- アートボード複数作成が可能なので、スライドが同じ作業エリアで作れる。管理がラク
- 書きだしが画像・PDFと選べるが、レイアウトの崩れがほとんどおこならない
- PowerPointを開くときの起動の遅さや、レイアウトの微調整のし難さにイライラを募らせる必要なし（最重要）
資料を作るときはもうこれ一本で行っていいんじゃないかなと。 ちなみに今回のテンプレートは、Sketchの伝道者、こもりまさあきさんの作った下記テンプレートをベースに作成。SlideShareにアップロードする際は、PDF書き出し、それをそのままアップローダーにドラッグアンドドロップして完了。Sketch素晴らしいー。
Webフォントを使って三点リーダーを表現する際の注意点
半年ぶりの更新がバグネタってのが情けないね。
この記事は CSS珍100景 Advent Calender2014に合わせて記事投稿してます。
貯蓄したバグネタと被っていないか色々とググッた結果、8割ぐらいが既に報告があがっていたので、引き出しの少なさを実感する次第。
Webフォント（Webフォントサービス）を使うとCSS3の三点リーダーが表示されない
Fonts.comのAixsフォントを使っていた時に起きた現象をご紹介。
CSS3を使って三点リーダーによる文言省略を実現するには、
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
と記述するが、（ここや、ここのサイトのほうが詳しく紹介している）
WEBフォントを適用している文字列に対して、このCSSを設定しても省略記号（...）がでない。なんぞ...?と思い、色々と試行錯誤してみたが、Webフォントを読み込まないとうまくいくことが判明。
結論を言ってしまうとなんてことはなく、Webフォントを読み込む際に、ベンダーが支給しているフォント読み込み用JSが、ページ内にどんな文字が使われているかを判定して、読み込むグリフだけをサブセット化している仕組みの盲点から起きる問題っぽい。上記CSSで作成する三点リーダー文字「…」は、読み込みの対象外のようです。
解決策
一番簡単な方法は、省略文字に対してWebフォント（Webフォントサービス）を使わないこと。
他の方法としてはJSで無理やりやるとか、3点リーダを画像化して、省略文字の前にかならず表示されるようにセットする、どこかに「…」文字を表示させておく....といったトリッキーな方法があるけど、どれも費用対効果に見合わない対策なので、あんまりオススメはしないです。こわい。
現場からは以上です。
