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

aircolor memolog

Web制作・テクノロジー、たまに旅行記

立川シネマシティで「マッドマックス 怒りのデス・ロード」(極上爆音上映)見てきた

映画 雑記 レビュー

神の企てか?悪魔の意思か?数十年前公開された伝説のB級SF映画「マッドマックス」が帰ってきたらしいので、見に行きました。

続きを読む

Sublime TextでBEM設計(SCSS)する際には Syntax Highlighting for Sass 使ったほうがいいよ

css html

SCSS(Compass)でBEM設計コーディングをしよう、と思った時に気になったことが。 Sublime Textの人気なSCSS用シンタックスパッケージはSCSSですが、ComapssのBEM向け記法で記述しようとすると、

f:id:kgsi:20150701205833p:plain

こんな具合にclassにハイライトが入ります。
具体的には「&」のあとに「_」(アンダースコア)や「-」(ハイフン)をつけると起こる現象です。 別にコーディング自体に影響はないですが、エラーが起きてる気がして心がざわつくので なんとかしたい...と思って調べていたらこんな記事がありました。 海外の方も同じことを思っていたそうです。

BEM nesting SCSS with parent selectors breaks Sublime Text syntax highlighting?

Syntax Highlighting for Sassをインストールする

ということで、下記パッケージをインストールすることで解決できます。

Syntax Highlighting for Sass

f:id:kgsi:20150701205913p:plain

はい、この通り治ります。気持ち悪くなくなりました。
なお、パッケージを切り替えることでコード補完もemmetのような省略コードを打つ形式に切り替わります。 便利なので問題ないのですが、SCSSのパッケージに慣れていた方は一応注意を。

Gulp.js+EJS+JSONを使った複数ページの生成方法

html gulp.js node.js frontend

人気のタスクランナーツール「Gulp.js」とテンプレートエンジン「EJS」を下地に、
JSONデータから複数ページを生成できる仕組みを備忘録を兼ねて紹介します。

続きを読む

Markdownでテキスト書くならTypedがオススメ

app レビュー

年度初めの記事。今年もマイペースに、どうぞよろしくお願いいたします。

やる気を出す意味も込めて開発・ライティング環境を整えてみよう、とRealmac SoftwareのEmberとTypedというMacアプリを同時購入してみました。Emberについては、こことかこことかでレビューしている方がいるので割愛。今回取り上げるのはTypedについて。

Typedはミニマルなエディタで、とにかく簡潔に、シンプルに文章がかけるエディタ。Markdown記法で書くことに特化しています。もともとこのブログもMarkdownで書いているのでとってもハッピー。

気に入っている機能

  • デザインがとにかくシンプル。書きやすい。背景色の切り替えも可(白・ベージュ・黒)
  • 画面をフルスクリーン化できるZen mode。⌘+Yで切り替えられる。あとこのモードにすると環境音が流れる。座禅して文章をひたすら書く感じ
  • Markdownで書く人向けに便利な機能が沢山
    • プレビューが簡単 alt+⌘+Pで切り替えられる
    • Markdown用のショートカット機能も充実
    • デフォルトの記述画面でも、Markdown記法で書くとハイライトや文字サイズが大きくなるので確認が楽。プレビューモードに移行しなくても十分

駄目なところ

  • クラウド機能が無い。テキストのネットワーク保存は手動で
  • App Storeで売ってない。アプリの管理が少々めんどくさい
  • Markdown記法以外の書き方をする人には、どの機能もあんまり魅力的ではない(正直

ちなみに今まではMarsEditを使っていました。 Markdownも使えてプレビューもでき、さらには各ブログとの連携・投稿も可能という盛々アプリ。このオールインワンなこと、確かに素晴らしいとは思うけど、少々盛り過ぎというかお腹いっぱいというか。何より一番の問題として、あのもっさりとしたUIが記事を書く気を著しく削がれます。 MarsEditと比較してみて、Typedは機能的にははっきり言って充実はしていません。各ブログとの連携はできないし、記述方式は通常ライティングとMarkdownしか選べないです。しかし煩雑にならず、書くことに集中でき、UI(見た目)はとてもシンプルで書くことを邪魔しないです。。記事や文書を書くエディタとしてこれほど重要なことはないのではなかろうかと。
余計なものをそぎ落としたこのTyped。まずは今年のオススメアプリとさせてもらいます。

.....

あとRealmac Softwareがリリースしているタスクツール、Clearがセールしてるんで(2015/01/31現在)そちらも買うと幸せになれると思います。ここのアプリはどれもデザインが素晴らしいですね。

Clear – タスク&ToDoリスト

Clear – タスク&ToDoリスト

  • Realmac Software
  • 仕事効率化
  • ¥600

App Store版がリリースされました(2015/07/21追記)

Typed - Minimal Writing app and Markdown Editor

Typed - Minimal Writing app and Markdown Editor

  • Realmac Software
  • 仕事効率化
  • ¥1,800

Sketchをプレゼンテーションスライドに使う話

app design

〆切をとうに過ぎたAdvent Calender2014と絡めた話。13日目の記事です。

先日、Sketchを布教するためにプレゼンテーション資料を作ったのだが、 Sketchを教えるんだから資料もSketchで作成してみたのだが、周りで聞く以上に良い使い勝手と思ったので共有。特にPowerPointの起動の遅さにイライラするスーパー短気、かつデザインを多少かじっているような、そう、僕のような人種には最適なツールなんじゃないかと。 以下が作成したスライド。

素敵ポイントは次の通り。

  • PowerPointと違ってレイヤーの概念があるので、とにかくレイアウトがしやすい
  • アートボード複数作成が可能なので、スライドが同じ作業エリアで作れる。管理がラク
  • 書きだしが画像・PDFと選べるが、レイアウトの崩れがほとんどおこならない
  • PowerPointを開くときの起動の遅さや、レイアウトの微調整のし難さにイライラを募らせる必要なし(最重要)

資料を作るときはもうこれ一本で行っていいんじゃないかなと。 ちなみに今回のテンプレートは、Sketchの伝道者、こもりまさあきさんの作った下記テンプレートをベースに作成。SlideShareにアップロードする際は、PDF書き出し、それをそのままアップローダーにドラッグアンドドロップして完了。Sketch素晴らしいー。

Sketch Slide Template

Webフォントを使って三点リーダーを表現する際の注意点

css html

半年ぶりの更新がバグネタってのが情けないね。
この記事は 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点リーダを画像化して、省略文字の前にかならず表示されるようにセットする、どこかに「…」文字を表示させておく....といったトリッキーな方法があるけど、どれも費用対効果に見合わない対策なので、あんまりオススメはしないです。こわい。

現場からは以上です。

ベトナム縦断1,800キロバイク旅行の情報をまとめてみた

日記 まとめ

あっという間に4月になってしまいましたが、、 去年の12月から今年1月にかけて断行した、ベトナム縦断旅行のレポートがようやくまとまりました。 旅行の工程から起きたできごとをデータ化しています。
旅の思い出のまとめですが、これからベトナム縦断したい、しようという方々の参考情報にもなればなぁと。

続きを読む