SublimeText3のSublimelinterにいろいろ入れてみた

こことか
http://qiita.com/hokuto/items/5a7797c68900116444ce
ここが参考になった
http://kashikashi.sakura.ne.jp/wordpress01/?p=53
あとここ
http://tomoyamkung.net/2014/03/08/sublimetext3-sublimelinter-jslint/
あとまぁここも
http://liginc.co.jp/web/js/73704
いまんとこlinterこんだけ入れてる

Sublime Text 3 + Compass + SCSSでの開発メモ

OSに、RubyとRuby Gemをインストール
Rubyに、GemでCompassとSCSSをインストール
ST3にCompass、SCSSをインストール
プロジェクトにconfig.rbを設置

http_path = "/"
css_dir = "/wp-content/themes/mtef/css"
sass_dir = "/wp-content/themes/mtef/scss"
images_dir = "/wp-content/themes/mtef/images"
output_style = :expanded # :expanded=一般的な{}で改行する形／:compressed=圧縮して出力
line_comments = false

SCSSを作成

/* *****************************
 *
 * Import file to Scss or Sass.
 *
 **************************** */
@import "compass";

a
{
    width:500px;
    overflow:auto;
    @include box-shadow(1px 1px 0 #ccc);
}

SCSSをコンパイルして動作確認
詳細は
http://dev.classmethod.jp/series/scss-tutorial/
とか
http://wp-d.org/2013/01/03/1732/
を見るとよろしい。

游書体ファミリー各OS搭載まとめ

構成

Windows 8.1

• 游ゴシック Light
• 游ゴシック Regular
• 游ゴシック Bold
• 游明朝 Light
• 游明朝 Regular
• 游明朝 Demibold

OS X 10.9

• 游ゴシック体 ミディアム
• 游ゴシック体 ボールド
• 游明朝体 ミディアム
• 游明朝体 デミボールド

Windows8.1搭載

# ファイル名 #
yugothil.ttf
## OS/2テーブル ##
usWeightClass: 300
Font Vender Identification: 'JY  '
## nameテーブル ##
### English United States ###
Font Family name: Yu Gothic Light
Font Subfamily name: Light
Unique font identifier: YuGothic-Light
Full font name: Yu Gothic Light
Version string: Version 1.55
Postscript name: YuGothic-Light
Preferred Family name: Yu Gothic
Preferred Subfamily name: Light
### Japanese Japan ###
Font Family name: 游ゴシック Light
Font Subfamily name: Light
Full font name: 游ゴシック Light
Preferred Family name: 游ゴシック
Preferred Subfamily name: Light

# ファイル名 #
yugothic.ttf
## OS/2テーブル ##
usWeightClass: 400
Font Vender Identification: 'JY  '
## nameテーブル ##
### English United States ###
Font Family name: Yu Gothic
Font Subfamily name: Regular
Unique font identifier: YuGothic-Regular
Full font name: Yu Gothic Regular
Version string: Version 1.55
Postscript name: YuGothic-Regular
Preferred Family name: Yu Gothic
Preferred Subfamily name: Regular
### Japanese Japan ###
Font Family name: 游ゴシック
Font Subfamily name: Regular
Full font name: 游ゴシック Regular
Preferred Family name: 游ゴシック
Preferred Subfamily name: Regular

# ファイル名 #
yugothib.ttf
## OS/2テーブル ##
usWeightClass: 700
Font Vender Identification: 'JY  '
## nameテーブル ##
### English United States ###
Font Family name: Yu Gothic
Font Subfamily name: Bold
Unique font identifier: YuGothic-Bold
Full font name: Yu Gothic Bold
Version string: Version 1.55
Postscript name: YuGothic-Bold
Preferred Family name: Yu Gothic
Preferred Subfamily name: Bold
### Japanese Japan ###
Font Family name: 游ゴシック
Font Subfamily name: Bold
Full font name: 游ゴシック Bold
Preferred Family name: 游ゴシック
Preferred Subfamily name: Bold

# ファイル名 #
yuminl.ttf
## OS/2テーブル ##
usWeightClass: 300
Font Vender Identification: 'JY  '
## nameテーブル ##
### English United States ###
Font Family name: Yu Mincho Light
Font Subfamily name: Regular
Unique font identifier: YuMincho-Light
Full font name: Yu Mincho Light
Version string: Version 1.55
Postscript name: YuMincho-Demibold
Preferred Family name: Yu Mincho
Preferred Subfamily name: Light
### Japanese Japan ###
Font Family name: 游明朝 Light
Font Subfamily name: Regular
Full font name: 游明朝 Light
Preferred Family name: 游明朝
Preferred Subfamily name: Light

# ファイル名 #
yumin.ttf
## OS/2テーブル ##
usWeightClass: 400
Font Vender Identification: 'JY  '
## nameテーブル ##
### English United States ###
Font Family name: Yu Mincho
Font Subfamily name: Regular
Unique font identifier: YuMincho-Regular
Full font name: Yu Mincho Regular
Version string: Version 1.55
Postscript name: YuMincho-Regular
Preferred Family name: Yu Mincho
Preferred Subfamily name: Regular
### Japanese Japan ###
Font Family name: 游明朝
Font Subfamily name: Regular
Full font name: 游明朝 Regular
Preferred Family name: 游明朝
Preferred Subfamily name: Regular

# ファイル名 #
yumindb.ttf
## OS/2テーブル ##
usWeightClass: 600
Font Vender Identification: 'JY  '
## nameテーブル ##
### English United States ###
Font Family name: Yu Mincho Demibold
Font Subfamily name: Bold
Unique font identifier: YuMincho-Demibold
Full font name: Yu Mincho Demibold
Version string: Version 1.55
Postscript name: YuMincho-Demibold
Preferred Family name: Yu Mincho
Preferred Subfamily name: Demibold
### Japanese Japan ###
Font Family name: 游明朝 Demibold
Font Subfamily name: Bold
Full font name: 游明朝 Demibold
Preferred Family name: 游明朝
Preferred Subfamily name: Demibold

MacOSX10.9搭載

# ファイル名 #
Yu Gothic Medium.otf
## OS/2テーブル ##
usWeightClass: 500
Font Vender Identification: 'JY  '
## nameテーブル ##
### English United States ###
Font Family name: YuGothic
Font Subfamily name: Medium
Unique font identifier: YuGothic Medium; 8.0d1e1; 2013-02-28
Full font name: YuGothic Medium
Version string: Version 8.0d1e1
Postscript name: YuGo-Medium
Preferred Family name: YuGothic
Preferred Subfamily name: Medium
### Japanese Japan ###
Font Family name: 游ゴシック体
Font Subfamily name: ミディアム
Full font name: 游ゴシック体 ミディアム
Preferred Family name: 游ゴシック体
Preferred Subfamily name: ミディアム

# ファイル名 #
Yu Gothic Bold.otf
## OS/2テーブル ##
usWeightClass: 700
Font Vender Identification: 'JY  '
## nameテーブル ##
### English United States ###
Font Family name: YuGothic
Font Subfamily name: Bold
Unique font identifier: YuGothic Bold; 8.0d1e1; 2013-02-28
Full font name: YuGothic Bold
Version string: Version 8.0d1e1
Postscript name: YuGo-Bold
Preferred Family name: YuGothic
Preferred Subfamily name: Bold
### Japanese Japan ###
Font Family name: 游ゴシック体
Font Subfamily name: ボールド
Full font name: 游ゴシック体 ボールド
Preferred Family name: 游ゴシック体
Preferred Subfamily name: ボールド

# ファイル名 #
Yu Mincho Medium.otf
## OS/2テーブル ##
usWeightClass: 500
Font Vender Identification: 'JY  '
## nameテーブル ##
### English United States ###
Font Family name: YuMincho
Font Subfamily name: Medium
Unique font identifier: 1.000;JY  ;YuMin-Medium
Full font name: YuMincho Medium
Version string: Version 1.000;PS 1;hotconv 1.0.57;makeotf.lib2.0.21895
Postscript name: YuMin-Medium
Preferred Family name: YuMincho
Preferred Subfamily name: Medium
### Japanese Japan ###
Font Family name: 游明朝体
Font Subfamily name: ミディアム
Full font name: 游明朝体 ミディアム
Preferred Family name: 游明朝体
Preferred Subfamily name: ミディアム

# ファイル名 #
Yu Mincho Demibold.otf
## OS/2テーブル ##
usWeightClass: 600
Font Vender Identification: 'JY  '
## nameテーブル ##
### English United States ###
Font Family name: YuMincho
Font Subfamily name: Demibold
Unique font identifier: 1.000;JY  ;YuMin-Demibold
Full font name: YuMincho Demibold
Version string: Version 1.000;PS 1;hotconv 1.0.57;makeotf.lib2.0.21895
Postscript name: YuMin-Demibold
Preferred Family name: YuMincho
Preferred Subfamily name: Demibold
### Japanese Japan ###
Font Family name: 游明朝体
Font Subfamily name: デミボールド
Full font name: 游明朝体 デミボールド
Preferred Family name: 游明朝体
Preferred Subfamily name: デミボールド

VirtualBox4.2.10上のUbuntuのソフトウェアアップデートで容量がいっぱいになったときにやったこと

前提として

• VirtualBox4.2.10
• Ubuntu12.04 LTS
• ホストマシンはWindows7
• 仮想ハードディスクは可変にせず固定のまま

全体の手順

1. VirtualBoxで新しい仮想マシンを容量を増やして作る
2. VBoxManageコマンドのclonehdコマンドで古い仮想マシンのハードディスクを新しい仮想マシンのハードディスクへコピーする
3. GpartedのISOをダウンロードして新しい仮想マシンにマウントし、CDドライブをVirtualBoxでプライマリマスターにした上で起動する
4. Gpartedでキーボード、言語を選び、0で起動する
5. swap領域を削除して後ろに持って行き、再度swap領域を作る
6. メインのディスク容量を増やす
7. 適用する
8. Gpartedのコマンドラインを起動し、swap領域の設定ファイルをviで編集し保存する
9. Gpartedを終了し、新しい仮想マシンのCDドライブをセカンダリマスターに変更する
10. 新しい仮想マシンを起動する
11. swap領域のUUIDを再設定してGpartedで設定した行を削除する
12. 再起動してswap領域の確認、容量の確認する
13. VirtualBoxの共有フォルダなどの設定を確認して終了

１～２は以下を参照

http://blog.brainhearts-next.com/2010/01/virtualboxos.html

３～１２は以下を参照

http://ankyo.blog.so-net.ne.jp/2011-02-20

ポイントは、VirtualBoxで先に増やしたHDD込みでマシンを作っておき、そこへ

VBoxManage clonehd "旧HDDのフルパス" "作ったばかりの新HDDフルパス" --existing

で中身を丸ごとコピーできることと、

Gpartedを使えばUbuntuを起動せずにメインのディスク容量を増やせるところ。

今回はソフトウェアアップデートを何気なくやったら急に容量が足りなくなり、カーネルの依存が壊れた所から始まったので、Ubuntu側で何もできなくなり非常に困った。

SublimeText2でProjectを開始する方法

今回某スマホ案件でSublimeText2(以下ST2)とSCSSでサイトを構築しようと思っております。
チャレンジする内容は下記の通り。

• ST2を使ってコーディング
• SCSSを使ってコーディング
• CSSの圧縮による高速化
• COMPASSの活用
• CSS スプライト
• 各種ベンダープレフィックス
• デフォルト変数の設定

上記にチャレンジしてみて、いわゆるフロントエンド周りの高速化にチャレンジ、というわけです。

今更ながらSass、Compass、Sublime Text 2をWindowsに導入してみている

ご無沙汰しております。寒中お見舞い申し上げます。

さて、最近は変数が使えるCSS管理コードと呼べば良いんでしょうか、そんな感じの言語が結構前からあります。

SassとかSCSSとかLESSってなんだ

• Sass
• SCSS
• LESS

「LESS」や「Sass」のようなCSS拡張メタ言語は、960.gsなどのフレームワークとは異なり、CSSの言語自体を拡張し、CSSには存在しない機能を追加するものです。

CSS拡張メタ言語を利用することで、変数、ミックスイン、入れ子ルール、名前空間、四則演算、関数などの動的な処理をCSSに追加でき、CSSが苦手とする大規模サイトやWebアプリケーションの構築に欠かせない再利用性を高められます。

一部改変：via

つまり、ある程度規模のあるウェブサイトならCSS全体で共通する値とかルールとかがあり、それらをCSSを拡張することにより使えるようにしたメタ言語、ということになりますね。まさに紙のデザインで言うところの指定紙になるような設計書を書くイメージでしょうか。

導入検討の意図

こういったツールは前から気になってはいたものの、Dreamweaverの保存即アップロードや、サイトを管理するGUI、差分を撮ってファイルをアップロードする機能、DIFFツールと連携できるところなどにかなり便利さを感じてしまっており、オーサリングツールを変える気にはなれませんでした。

ですが最近はスマートフォン対応、複数のDPIへの対応、MediaQueriesの対応などが必須となり、ページ単価は上げられないのに作業量は倍々で増えていくという地獄状態になっているので、作業量緩和のためのツールとして、覚えてみようかな、と言う次第です。

目標

Windows7-64bitで、オーサリングツール(Dreamweaverの代わり)を入れ、そこでSCSSをビルドすると自動的にFTPサーバーへアップロードされる様なもの。

障壁

今回障壁になったのは下記のようなこと。

• そもそもSublime Text(オーサリングツール)を使ったことがない
• なのでショートカットキーとかパッケージとかわからない
• 何ができるのかもわからない
• 当然SassもLESSもSCSSも使ったことがない
• どう書いて良いのかわからない
• オーサリングツールと拡張CSSのコンパイラの連携とかCompassとかよくわからない

概念について

• SassとSCSSって？
• Sassには二つの構文があります。一つ目は、SCSS（Sassy CSS）として知られ、このドキュメントを通じて使われている、CSS3の構文を拡張したものです。全ての有効なCSS3スタイルシートは、SCSSファイルとしても有効です。加えて、SCSSは多くのCSSハックと、IEの古いフィルタ構文などのブラウザ固有の構文が使えます。この構文は、以下で説明するSassの機能で拡張されています。SCSSの構文で書かれたファイルは、.scssの拡張子を持ちます。
• 二つ目は古い構文で、インデント構文（単に“Sass”とも言われます）として知られているもので、CSSを書くのに、より簡潔な方法を提供します。この構文では、セレクタのネストを表すのに、カッコよりもインデントを、プロパティを区切るのに、セミコロンよりも改行を使います。一部の人は、SCSSよりも、この構文が読みやすく、また、速く書けることに気づきました。インデント構文は、SCSSと同じ機能を持っていましたが、やや構文が異なっていました。この違いは、インデント構文のリファレンスで説明しています。インデント構文で書かれたファイルは、.sassの拡張子を持ちます。
• つまり、SCSSはSassとは互換のない上位バージョンのSass、と思っておけばよいようです。
• どうやって動かすの？
• SCSSはrubyで動く。なのでOSにrubyをインストールする必要がある。
• コマンドラインでコンパイルすることが前提。vimとか使ってる人向けだった。
• Sublime Textをオーサリングツールとして、必要なパッケージをインストールすることでオーサリングツール上で使えるようになる。
• 基本的には、SCSSを書く、コンパイル(ビルド)する、CSSをアップロードする、と言う流れ。
• 自動でアップロードとか、自動でビルドとかはSublime Textにパッケージを入れることで解決する。

手順

1. rubyをインストール
1. Ruby Installer for Windows
2. gemのアップデート
1. gem update --system
3. Sassのインストール
1. gem install sass
4. Compassのインストール
1. gem install compass
5. Sublime Text 2のインストール
1. http://www.sublimetext.com/2
6. Sublime Text 2の設定
1. 一番参考になったページはこちら
2. その次に参考になったページはこちら
3. 詳細は二学期ですこちら
1. パッケージのインストール
1. SCSS
2. SCSS Snippets
3. Compass
4. そのほかHTML5やCSSを入れておくと吉。
2. テーマのインストール
3. Projectの作成
1. ProjectファイルはProjectのフォルダのルートに置いておく？
1. マルチバイトを含むファイルパスにProjectファイルがあるとCompassが動かない！！
4. さらにFTPで同期できるように設定
1. 詳細はこちら
5. 保存時にビルドするパッケージをインストール
1. SublimeOnSaveBuild

躓いたポイント

• 基本的にProjectのディレクトリもProjectファイルを保存する場所も、マルチバイトを含むパスに置かないこと。
• Projectファイルを保存しないとCompassが使えない。
• SASS Buildはなくても動く。最低限は上記3つのパッケージ。
• config.rbが適用されないときはST2を再起動してビルドして保存すると適用される？

残りの課題

• SCSSを使いこなす

MediaQueriesのサイトを1年間運営してみての備忘録

MediaQueriesサイトの自分なりの作り方を、複数作ってみた知見からまとめてみたいと思います。

●よくある要望

1. スマートフォンで縦持ち、横持ちどちらでも横幅ぴったりに合わせる
2. タブレットの縦持ちは専用ビュー、横持ちはPCと同じスタイルに

MediaQueriesについて説明すると、これらが期待されます。

●デザイナーとの兼ね合いで難しい点

一見するとかんたんですが、デザイナーがCSSを理解していない場合や、MediaQueriesに対応していないIE678にもある程度対応させる必要がある場合、特に１が意外と大変な作業になってくると思います。

また、スマートフォン専用サイトであれば、横幅を100%などリキッドなデザインで組む事で、いわゆる「横幅ぴったり」が実現できると思いますが、PCにも対応となると、ある程度横幅を制限しないと1行あたりの文字数が大幅に間延びしてしまい、結果として非常に読みづらい段落スタイルが出来上がってしまいます。

●汎用的なMediaQueriesを使ったソースコード

これらの問題を解決するために使える汎用的なMediaQueriesのデバイス用の区切りを備忘録として残しておきます。

HTML→

<!doctype html>

<html lang="ja">

<head>

<meta charset="utf-8">

<title>~~~</title>

<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=0.5,user-scalable=yes,initial-scale=1.0">
</head>

<body>

<div class="container">

<h1>~~~</h1>

<p>~~~</p>

</div>

<div class="container">

<h1>~~~</h1>

<p>~~~</p>

</div>

<div class="container">

<h1>~~~</h1>

<p>~~~</p>

</div>

</body>
</html>

CSS→

/* モバイル縦持ち（Portrait）に - 最大767pxのビューエリアの端末へ */

@media (max-width: 767px) {

.container { width: 300px; }

/*ここにモバイル用に使う汎用的なスタイルを書きます。*/

/*なぜこんな指定をするかというと、横用は別に記載するからです。*/

/*最大横幅は320pxです。*/

}

/* モバイル横持ち（Landscape）に - 最小480pxから最大767pxまでのビューエリアの端末へ */

@media (min-width: 480px) and (max-width: 767px) {

.container { width: 420px; }

/*ここに横持ち専用の限定的なスタイルを書きます。*/

/*最大横幅は480pxです。それ以上は左右にbodyの余白が出ます。*/
}

/* タブレット縦持ち（Portrait）に - 最小768pxから最大959pxまでのビューエリアの端末へ */

@media (min-width: 768px) and (max-width: 959px) {

.container{ width: 768px; }

/*ここにタブレット縦持ちの限定的なスタイルを書きます。*/

/*指定する最大横幅は768pxです。それ以上は左右にbodyの余白が出ます。*/
}

@media (-webkit-min-device-pixel-ratio:1.5),

(min--moz-device-pixel-ratio: 1.5),

(-o-min-device-pixel-ratio: 3/2),

(min-device-pixel-ratio: 1.5) {

/*ここにCSS内で画像を指定しているエレメント用に、

  実際の2倍サイズの画像を定義し、

  background-size:横px 縦px;を指定します。*/

}

これらはiPhone3～iPhone4Sまでを考慮した指定ですが、Androidでも余白が出る程度で、大きな問題にはならずにきれいに収まるはずです。

●MediaQueriesのおさらい

Max Width：

ビューエリアの最大幅。このサイズより小さい場合に適用。基本pxで指定。
@media (max-width: 320px) {~~}などと書きます。

andでつなぐと「～から～まで」という事になります。Min Width：

ビューエリアの最小幅。このサイズより大きい場合に適用。基本pxで指定。

Max Device Width：

デバイスサイズの最大幅。このサイズより小さい場合に適用。基本pxで指定。

Min Device Width：

デバイスサイズの最小幅。このサイズより大きい場合に適用。基本pxで指定。

Device Pixel Ratio：

デバイスの解像度（webkit） - -webkit-device-pixel-ratio:1.5などと書きます
指定された値より大きいRatioの時に適用されます。 カンマで区切って複数指定もできます。

Orientation：

デバイスの向き - "landscape" or "portrait"の2値
Resolution：
解像度をDPIで定義します。 - min-resolution: 240dpiなどと書きます。
この場合は240dpi以上のデバイス、という意味になります。

Orientationを使えば？と考えるかもしれませんが、意外と実機で検証するというのは大変なものですし、JavaScriptなどで組まなくても端末をロテートさせればビューエリアも変わりますから、特段Orientationを使う理由もないと言えます。

●その他気をつけたい事

その他デザインやコーディングに気をつけたい点としては以下の事があるでしょう。

• デザイナーにはあらかじめベクターデータでデザインしてもらうか、横持ち時の2倍の横幅でデザインしてもらう事（上記例だと横幅960pxでモバイル用のデザインをする）
• ここで、Illustratorでデザインをしておけば、Web用に書き出しの時に画像サイズタブで、200%で書き出す事で、きれいに2倍サイズでラスタライズされた素材を切り出す事ができます。
• 注意したいのは2分の1サイズの画像も必要だという事です。つまり、960pxでモバイル用のデザインをする際は、どのオブジェクトも縦横偶数でなければなりません。
• 細部をデザインするときも、常にプログレッシブ エンハンスメントでデザインすることを意識し、極力CSS3で再現できる範囲の表現にとどめる。
• 最近はツールも充実しているので、グラデーションやドロップシャドウなどは余裕です。
• 三角形は再現できると言えばできますが、クロスブラウザ対応が難しいので避けるべきです。やるなら画像にしましょう。
• box-sizing:border-boxlを使わない
• IE67対策のため、box-sizingはやめましょう。凄く便利なので、モバイル向けサイトの構築には積極的に使っていきましょう。

意外と難しいと考えられがちなMediaQueriesですが、プログレッシブエンハンスメントを考慮してCSS3でデザインすれば、実はそこそこ楽に作る事ができます。是非皆さんもトライしてみてください。