Compassでスプライト画像の幅と高さを取得する方法

 Compassでスプライト画像の幅と高さを取得する方法

こんにちは、@cappeeです。

今回はSass(SCSS)+Compassを使ったスプライト画像についてです。

スプライト画像全体の幅(width)、高さ(height)を取得する方法についてピンポイントでご紹介したいと思います。

なぜピンポイントかと言いますと、私がRetina対応のmixinを作成している時、これを探すのにちょいと苦労したからですね。

background-size を指定する時にスプライト画像全体のサイズを取得する必要がありました。

コピペで使える系の記事を参考に見てみても、background-sizeの幅の指定だけは手動で入力するmixinがほとんどだったんですね。

こんな感じで。

@include background-size(500px auto);

スプライト画像はCompassさんが自動でつくってくれるのだから個別の画像が増えればスプライト画像のサイズだって都度変わるのに、毎回変更しないといけないの…(゚д゚)!?

いいえ、そんなことありません!!

こんなに便利なCompassだからスプライト画像のサイズを自動で取得できるはず!と思っていろいろと入らべてみたら辿り着きました( ;∀;)

これでRetina対応が楽になりますね。

スプライト画像全体の幅と高さを取得する

sprite-path()関数でスプライト画像全体の幅と高さを取得することができます。

幅(width)

image-width(sprite-path($replace))

高さ(height)

image-height(sprite-path($replace))

このsprite-path()関数ですが、Compass公式サイトのCSS Sprite Helpersを見ても掲載されてないんですよね。なぜー。

Retina対応したスプライト画像のmixin

background-sizeには上記のsprite-path()関数を使います。
Retina対応したスプライト画像のmixinはこれを応用して下記のようになります。

@mixin sprite-background($name) {
  width: image-width(sprite-file($replace, $name)) / 2;
  height: image-height(sprite-file($replace, $name)) / 2;
  $xpos: round(nth(sprite-position($replace, $name), 1) / 2);
  $ypos: round(nth(sprite-position($replace, $name), 2) / 2);
  background-image: $replace-img;
  background-position: $xpos $ypos;
  background-repeat:no-repeat;
  $wbgz: image-width(sprite-path($replace)) / 2;
  @include background-size($wbgz auto);
}

Retina対応したスマートフォンサイト用mixinはこちらで詳しく説明していますのでぜひ参考にしてみてください。
Retina対応したスプライト画像のmixin

いかがでしたでしたか?
mixinを使えばコーディングがスピードアップ!

間違いやもっと良い方法があるという方はお気軽にコメントください。

Sassの教科書も必読ですよ。

Pocket
article clipper Compassでスプライト画像の幅と高さを取得する方法

[決定版]Retina対応したスプライト画像のmixin

 [決定版]Retina対応したスプライト画像のmixin

こんにちは、@cappeeです。関東も大雪でしたね(・∀・)

現在がりがりっとスマートフォンサイトのコーディングに勤しんでいます。

以前Sass+Compassを使った泣くほど早いmixin集を公開しましたが、スマホだとRetina対応があるためSprite画像を使ったmixinは変更する必要があります。

色々とRetina対応したmixinの記事を拝見させていただきましたが、background-sizeを毎回手動で入力する必要があったりと以外と「これだっ!」と思うmixinがなく。。

Compassの公式サイトや色んな角度から検索して参考にした結果、個人的には「これが決定版だ!」と思えるmixinができました!!!

CSS Spriteの設定

※こちらはCompassのスプライト初心者向けですのでわかる方はスルーしてください!

スプライト画像を使ったCSSの指定には主に以下の3つがあると思います。

  1. 文字の背景で表示する画像
  2. 文字を置換する画像
  3. アイコンの画像(文字の左側に配置)

私は(1)文字の背景で表示する画像と(2)文字を置換する画像を「replace」フォルダに書き出し、(3)アイコンの画像を「icon」フォルダに書き出しています。フォルダ名は任意です!

何はともあれCSS Spriteにしたい画像をそれぞれ書き出します。

書き出したらSass(SCSS)ファイルにスプライト画像を生成してくれる魔法の言葉を書き出します。

(1)(2)はスプライト画像のレイアウトを「$layout: smart」にして余白なく画像を配置するように指定します。
なぜなら画像サイズが大きくなりすぎるとiOSで表示の制限がかかるからです。
3メガピクセル以上の画像は縮小されて表示されるので気をつけましょう。
ただし、「$layout: smart」にするとブラウザでサイトを縮小して見た場合に隣の画像が1px見えてしまうこともあります。
画像サイズの制限に気をつけつつ、デフォルトの縦方向に並べる「vertical」で「$spacing:10px」と指定する方が無難かも?

$replace: sprite-map("sp/replace/*.png", $layout: smart);
$replace-img: sprite-url($replace);

(3)アイコンの画像は上下にある程度の余白が必要なため、「$spacing:100px」などある程度のスペースを指定しておきます。

$icon: sprite-map("sp/icon/*.png", $spacing:100px);
$icon-img: sprite-url($icon);

マジックインポートというCSSスプライト用の画像だけでなくbackground,background-positionを自動で出力してくれる機能もあります。実際はbackground-position,width,heightなど変更したい場合が多いので sprite-map を使ってセレクタごとに指定します。

Retina対応mixin

(1)文字の背景で表示するスプライト画像

@mixin sprite-background($name) {
  width: image-width(sprite-file($replace, $name)) / 2;
  height: image-height(sprite-file($replace, $name)) / 2;
  $xpos: round(nth(sprite-position($replace, $name), 1) / 2);
  $ypos: round(nth(sprite-position($replace, $name), 2) / 2);
  background-image: $replace-img;
  background-position: $xpos $ypos;
  background-repeat:no-repeat;
  $wbgz: image-width(sprite-path($replace)) / 2;
  @include background-size($wbgz auto);
}

width: image-width(sprite-file($replace, $name)) / 2;
Retina用に書きだした画像の横幅を取得して半分のサイズを出力します。heightも同じくです。

$xpos: round(nth(sprite-position($replace, $name), 1) / 2);
スプライト画像のポジションを取得して変数にいれます。
nthでポジションの何番目を取得するかを指定します。1はX軸、2はY軸です。
round関数を指定しておくと割算ででた小数点以下を四捨五入してくれます。

$wbgz: image-width(sprite-path($replace)) / 2;
background-size用にスプライト画像全体の横幅を取得し、半分のサイズを変数にいれます。

以下のように任意のセレクタでincludeして使ってください。

.selector {
  @include sprite-background(filename);
}

(2)文字を置換する画像

@mixin sprite-replace($name) {
  @include sprite-background($name);
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

上の(1)をまるっとincludeして、文字を隠すプロパティだけ指定すればOKです。

(3)アイコンの画像

@mixin sprite-icon($name, $x: 0, $y: 0, $pl: 4) {
  $xpos: round(nth(sprite-position($icon, $name), 1) / 2);
  $ypos: round(nth(sprite-position($icon, $name), 2) / 2);
  background-position: ($xpos + $x) ($ypos + $y);
  $wbgz: image-width(sprite-path($icon)) / 2;
  @include background-size($wbgz auto);
  padding-left: (image-width(sprite-file($icon, $name)) / 2) + $pl;
}

background-position: ($xpos + $x) ($ypos + $y);
上と同じく画像のポジションを取得して変数にいれた後、位置を微調整できるようにしておきます。
アイコン画像は特にY軸を調整したい時が多いのでこの指定は必須ですね。

padding-left: (image-width(sprite-file($icon, $name)) / 2) + $pl;
アイコン左側のpadding-leftも自動で計算します。
デフォルトはアイコン画像の幅の半分に、4px分プラスして出力されます。
ただデザインによっては調整したい場合もあるので手動でもpadding-leftを指定できるようにしています。includeした際に$plが指定されていれば、指定されたpxが出力します。
[追記]px数もアイコンごとに調整できるように変更しました!

以下のように任意のセレクタでincludeして使ってください。
アイコンはclass名を「icon-xx」と先頭部分を共通化し、属性セレクタでスプライト画像のパスを指定すると便利です。
class名を共通化できない場合は、下記で記述したようにextend化してmixinにしてもOKです。

[class*="icon-"]{
  background-image: $icon-img;
  background-repeat: no-repeat;
}
.icon-home {
  @include sprite-icon(home);
}
.icon-li {
  @include sprite-icon(li, 0, 2, 6);
}

extend

(1)(2)で指定した以下の共通プロパティはextend化して、複数のセレクタでプロパティをまとめて指定することもできます。

extend

%sprite-background {
  background-image: $replace-img;
  background-repeat:no-repeat;
}
%sprite-replace {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

(1)文字の背景で表示するスプライト画像のmixin

@mixin sprite-background($name) {
  @extend %sprite-background;
  width: image-width(sprite-file($replace, $name)) / 2;
  height: image-height(sprite-file($replace, $name)) / 2;
  $xpos: round(nth(sprite-position($replace, $name), 1) / 2);
  $ypos: round(nth(sprite-position($replace, $name), 2) / 2);
  background-position: $xpos $ypos;
  $wbgz: image-width(sprite-path($replace)) / 2;
  @include background-size($wbgz auto);
}

(2)文字を置換する画像のmixin

@mixin sprite-replace($name) {
  @include sprite-background($name);
  @extend %sprite-replace;
}

extendを使うとどうしてもセレクタの数が増えてしまいます。IE9以下では1つのCSSファイルにつき4,095個までしかセレクタを認識しないという制限がありますので気をつけましょう。

いかがでしたでしょうか?
このmixinでスマホサイトのコーディングが少しでも早くなれば嬉しいです!

間違いやもっと良い方法があるという方はお気軽にコメントください。

上記以外のmixinはこちらにもまとまってます(*´ω`*)
Sass+Compassを使った泣くほど早いmixin集

Sassの教科書も必読ですよ。

Pocket
article clipper [決定版]Retina対応したスプライト画像のmixin

[CSS]noneの読み方は「ノン」じゃないよ!

最近勉強会に行きまくっている@cappeeです。

CSSで「なし」という指定をする時に使う”none”ですが、読み方は「ノン」じゃないです。

声を大にして言いたい。

ナン」です!!!

カレーによく合うやつって覚えれば早いです。

ちなみに”Dreamweaver”は「ドリームウィーバー」です。

それだけです。

Pocket
article clipper [CSS]noneの読み方は「ノン」じゃないよ!

[Sass]泣くほど早い…今すぐ使える便利なmixin集

 [Sass]泣くほど早い…今すぐ使える便利なmixin集

こんにちは、@cappeeです。

本格的にSass(SCSS)を仕事で使うようになってから早半年。

色々と試行錯誤しながら効率的にコーディングできるように工夫してきましたが、やっとこさある程度カタチになってきました。

これからSassを導入するというデザイナーさんもいるかと思うので、コピペで今すぐ使える便利なmixinをまとめて公開したいと思います。

泣くほどコーディングが早くなりますよ。

※Sass+Compassのインストールがまだの方はこちらをご覧ください!
Sublime Text 2 + Sass + Compass + Emmet 最強説!導入方法と自動アップロードの設定まとめ

フォントサイズ

CSS3の新しい単位 rem でフォントサイズを指定するmixinです。(IE9以降対応)
相対指定の em や % 、絶対指定の px が一般的だと思いますが、
rem は親の影響を受けずにフォントサイズを指定することができます。
[参考]フォントサイズの指定はCSS3の「rem」が便利そう

@mixin font-size($size, $base: 16) {
  font-size: $size + px;
  font-size: ($size / $base) + rem;
}

テキストシャドウ

文字に1pxの黒いシャドウ

文字に簡単にシャドウをかけることができます。
シャドウの距離やぼかしはサイトのデザインに合わせて変更します。
色の指定を透過で調整することで濃度を簡単に調整できるので便利です。

@mixin text-shadow-black($opacity: .4){
  text-shadow: 0 1px 0 rgba(#000, $opacity);
}

文字に1pxの白いシャドウ

最近よく見る文字に立体感のでるズルいアレです。

@mixin text-shadow-white($opacity: 1){
  text-shadow: 0 1px 0 rgba(#FFF, $opacity);
}

ポジション

ポジションは結構多様するので下の4つをmixinにしました。
pxも一緒に書いてますが縦中央にする際パーセント指定(50%)をする場合もあるのでmixinに入れなくてもOKです。

@mixin absolute-top-left($top: 0, $left: 0) {
  position: absolute;
  top: $top + px;
  left: $left + px;
}
@mixin absolute-top-right($top: 0, $right: 0) {
  position: absolute;
  top: $top + px;
  right: $right + px;
}
@mixin absolute-bottom-left($bottom: 0, $left: 0) {
  position: absolute;
  bottom: $bottom + px;
  left: $left + px;
}
@mixin absolute-bottom-right($bottom: 0, $right: 0) {
  position: absolute;
  bottom: $bottom + px;
  right: $right + px;
}

グラデーション

上下に明→暗

lighten を使うことでメインのカラーを指定すれば簡単にグラデーションがつくれます。
$hogeにはデフォルトのカラーを指定することも可能です。変数でも16進数でも大丈夫です。
デフォルトのカラーを指定しない場合は「:$hoge」の部分を削除してください。

@mixin gradient-top-lighten($color:$hoge, $lighten:10){
  background-color: $color;
  @include background-image(linear-gradient(lighten($color, $lighten) 0%, $color 100%));
}

上下に暗→明

darken を使うことで上とは逆の暗→明のグラデーションがつくれます。

@mixin gradient-top-darken($color:$hoge, $darken:10){
  background-color: $color;
  @include background-image(linear-gradient(darken($color, $darken) 0%, $color 100%));
}

IE8~9に対応する

上記のmixinだとグラデーション非対応のIE8~9では適用されません。
受託の場合は対応ブラウザによって適用したいケースもあるかと思うので、下を上記mixinに追加すればIE8~9にもグラデーションが表示されます。
ただし、その分重くなるので個人的にはプログレッシブ・エンハンスメントを推奨します。
(古いブラウザでデザインが適用されなくてもコンテンツが問題なく見えていれば問題なしという考え)

@include filter-gradient(lighten($color, $lighten), $color, vertical);

IE9に対応する

IE9だけに対応すればOKという場合はmixinではなく、Compassにあるブラウザーサポートの変数で設定します。
どこでもいいですが、設定用のscssファイルがある場合はそこに下記の一行を追加すれば大丈夫です。
[参考]Compassでベンダープレフィックスなどのブラウザーサポートを制御する

$experimental-support-for-svg: true;

背景画像

CSS Spriteの設定

mixinの前にCSS Spriteを出力する設定をします。
私はSprite画像を主に以下の2つに分けて書き出しています。

  1. 文字を置換する画像文字の背景に入れる画像
  2. アイコン画像(文字の左側に配置)

マジックインポートというCSS Spriteのcssをすべて自動で書き出してくれるとても便利な機能もありますが、実際はbackground-position,width,heightなど変更したい場合が多いので今回は sprite-map で指定します。

1)文字の背景に入れる画像と文字を置換する画像

sprite-mapを指定します。
文字の背景に入れる画像と文字を置換する画像の場合は、スプライト画像のレイアウトを「$layout: smart」にして余白なく画像を配置するように指定します。
なぜなら画像サイズが大きくなりすぎるとiOSで表示の制限がかかるからです。

$replace: sprite-map("replace/*.png", $layout:smart);
$replace-img: sprite-url($replace);

※iOS(iPhone,iPad)での注意
Spriteなどの画像が大きくなりすぎるとiOSで表示の制限がかかるので気をつけましょう。
3メガピクセル以上の画像は縮小されて表示されるので、その場合は各画像を敷き詰めてレイアウトする($layout:smart)か、小分けにSprite画像を書き出すなどの対処が必要です。

2)アイコンなど文字の左側に配置する画像

アイコンのレイアウトは何も指定しなければ縦一列に並びます。
アイコンの場合は余白がほしいので「$spacing」に余白分のpxを指定します。

$icon: sprite-map("icon/*.png", $spacing:50px);
$icon-img: sprite-url($icon);

プレースホルダーセレクタの指定

さらにmixinで使うextend専用のプレースホルダーセレクタの記述(%セレクタの部分)をしておきます。
extendを使わないとmixinを使ったすべてのセレクタで同じbackground-imageの指定がされてしまうので、記述が同じ部分はextendを使って簡潔にします。

%sprite-background {
  background-image: $replace-img;
  background-repeat:no-repeat;
}
%sprite-replace {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

※extend多用の注意
extendを使うとどうしてもセレクタの数が増えてしまいます。
IE9以下では1つのCSSファイルにつき4,095個までしかセレクタを認識しないという制限がありますので気をつけましょう。

文字の背景に画像を入れる

文字の後ろに背景画像を表示するmixinです。
background-position,width,heightが自動で出力されるためこのmixinを使うと画像の位置やサイズが簡単に指定できます。

@mixin sprite-bg-dimensions($name) {
  @extend %sprite-background;
  @include sprite($replace, $name, true);
}

以下のようにセレクタ内でincludeしてください。

.selecter {
  @include sprite-bg-dimensions(filename);
}

CSSの出力結果です。

background-image: url('../img/replaces.png');
background-repeat: no-repeat;
background-position: -16px -42px;
height: 16px;
width: 60px;

画像位置を手動で指定したい場合

デザインによってはwidth,heightを指定せず、画像位置も手動で調整したい場合があります。
下のような柔軟なmixinも用意しておくと便利です。使用頻度は少ないかな。
background-position はデフォルトでSpriteのXとYが入るので、そこを基準に●px移動したいなど微調整をすることができます。

@mixin sprite-bg-position($name, $x: 0, $y: 0) {
  @extend %sprite-background;
  @include sprite-background-position($replace, $name, $x, $y);
  background-repeat: no-repeat;
}

文字を画像で置換する

ナビゲーションや見出しなど文字を画像で置換するためのmixinです。
上の「sprite-bg-dimensions」mixinをまるっとincludeして、文字を隠すプロパティだけ指定すればOKです。

@mixin sprite-replace($name) {
  @include sprite-bg-dimensions($name);
  @extend %sprite-replace;
}

以下のようにセレクタ内でincludeしてください。

.selecter {
  @include sprite-replace(filename);
}

CSSの出力結果です。

background-image: url('../img/replaces.png');
background-repeat: no-repeat;
background-position: -16px -42px;
height: 16px;
width: 60px;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;

上記のようなmixinをつくらずにCompassのmixinで画像置換を指定することも可能です。
個人的にはtext-indentをネガティブ(マイナス)で指定しなくないので自分でmixinをつくっています。
(SEO的にGoogleからスパムとされる可能性があるという噂もあったので一応。。経験上から言ってもマイナスでも問題ないとは思います!)

SCSS

@include sprite-replace-text($replace, name, true);

※true/falseは画像サイズの出力を指定できます。

CSS

text-indent: -119988px;
overflow: hidden;
text-align: left;
background-position: -60px 0;
height: 96px;
width: 96px;
background-image: url(/assets/sp/replace-sf0d9e3bfd2.png);
background-repeat: no-repeat;

アイコン画像(左側)

文字の左側にアイコン画像を表示するためのmixinです。
background-positionはアイコンのサイズによって変更したいので、上記と同じくデフォルトの位置を基準に微調整できるようにしてます。
また、私はpadding-leftも自動的に出力するようにしています。これでかなり楽できますよ。
デフォルトは「画像の横幅+4px」分が出力されるようにしていますが、デザインによっては調整したい場合もあるので手動でもpadding-leftを指定することが可能です。

@mixin sprite-icon($name, $x: 0, $y: 0, $pl: 4) {
  @include sprite-background-position($icons, $name, $x, $y);
  padding-left: image-width(sprite-file($icons, $name)) + $pl;
}

以下のように任意のセレクタでincludeして使ってください。
アイコンはclass名を「icon-xx」と先頭部分を共通化し、属性セレクタでスプライト画像のパスを指定すると便利です。
class名を共通化できない場合は、extend化してmixinにしてもOKです。

[class*="icon-"]{
  background-image: $icon-img;
  background-repeat: no-repeat;
}
.icon-home {
  @include sprite-icon(home);
}
.icon-li {
  @include sprite-icon(li, 0, 2, 12);
}

CSSの出力結果です。

[class*="icon-"]{
  background-image: $icon-img;
  background-repeat: no-repeat;
}
.icon-home {
  background-position: 0 0;
  padding-left: 21px;
}
.icon-li {
  background-position: 0 -66px;
  padding-left: 12px;
}

アイコン画像(右側)

まれにハテナマークなど文字の右側に画像を表示したいケースもあります。
下記のように画像の位置を右基準でCSS Spriteを指定してもいいのですが
IE9+なのとどっちにしてもSprite画像では位置調整に無理がでてきてしまいます。

background-position: bottom 10px right 10px;

なので、右側に表示したいアイコンに関してはSprite画像を使用せずに個別に指定するようにしています。
さらに inline-image にすることで dataURI で出力されるためこれならリクエスト数も減らせます。
(使いすぎると逆に表示が重くなる場合もあるので注意です)

@mixin icon-right($name, $pl: null) {
  background: inline-image("icons/#{$name}.png") no-repeat 100% 50%;
  @if $pl {
    padding-right: $pl + px;
  } @else {
    padding-right: image-width("icons/#{$name}.png") + 4;
  }
}

アニメーション

animationプロパティを使用する場合に便利なmixinです。
ペンダープレフィックスをmixinの方で指定するので、includeがとても簡潔になります。

$prefixes: ("-webkit-", "-moz-", null);
@mixin keyframes($name){
  @-webkit-keyframes $name {
    @content;
  }
  @-moz-keyframes $name {
    @content;
  }
  @keyframes $name {
    @content;
  }
}
@mixin animation($name, $duration, $timing, $delay, $count, $direction: null) {
  @each $prefix in $prefixes {
      #{$prefix}#{animation}: $name $duration $timing $delay $count $direction;
  }
}

以下のようにセレクタ内でincludeしてください。

.selecter {
  @include animation(opacity, 3s, ease, 0s, 1);
}
@include keyframes(opacity) {
  0% {
    @include opacity(0);
  }
  100% {
    @include opacity(1);
  }
}

CSSの出力結果です。

.selecter {
  -webkit-animation: opacity 3s ease 0s 1;
  animation: opacity 3s ease 0s 1;
}
@-webkit-keyframes opacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes opacity {
  0% {
    opacity: 0;
    }
  100% {
    opacity: 1;
  }
}
@keyframes opacity {
  0% {
    opacity: 0;
    }
  100% {
    opacity: 1;
  }
}

長々と見ていただいてありがとうございます!
使えそうなmixinはありましたか?

スマホサイト制作で使えるRetina対応のmixinはこちらをご覧ください!
[決定版]Retina対応したスプライト画像のmixin

サイト毎に調整してうまくmixinを活用してくださいね。
泣いちゃうくらいコーディングが倍速になります。

もっといいmixinがあるよ!って方はお気軽にコメントください!
まだまだ改良もできる気がするので都度更新していきたいと思いますー。

[14.01.09]「文字を画像で置換する」に追記しました。
[14.01.23]「グラデーション」に補足を追記しました。
[14.02.27]「アイコン画像」のpaddingもinclude時に調整できるように変更し、全体的にcssの出力結果などを追加しました。
[14.03.04]「アイコン画像」のpaddingの指定方法を変更しました。

Pocket
article clipper [Sass]泣くほど早い…今すぐ使える便利なmixin集

[Sass]親セレクタの参照ができる&(アンパサンド)の使い方

わんこそば、@cappeeです。ついにSassの本ができましたね。

Web制作者のためのSassの教科書」かなり参考になりました。

ちゃんと基本から勉強しないとダメですね(>_<)

今日は以外と使いこなせていなかった&(アンパサンド)についてです。

&(アンパサンド)とは

親セレクタの参照ができます。

擬似セレクタやセレクタの前に記述する

これは私もよく使っていてコードの階層がとてもわかりやすくなるので便利ですよね。

Sass(SCSS)

.link{
  text-decoration:none;
  &:hover{
    text-decoration:underline;
  }
  &.off{
    color:gray;
  }
}

コンパイル後のCSS

.link{text-decoration:none;}
.link:hover{text-decoration:underline;}
.link.off{color:gray;}

セレクタの後に記述する

セレクタの後に記述するとルールセット内の親要素をすべて参照するので、ページ単位でデザインやレイアウトを変えたい場合に便利です。
私はこれを使っていなくてもっと早く基本から勉強していればよかった。。

下記はお問い合わせなどのフォーム系ページだけサイドバーがなかった場合に、メインコンテンツ部分の横幅を広げたい時の例です。

Sass(SCSS)

#main{
  width:640px;
  #form-page &{
    width:100%;
  }
}

コンパイル後のCSS

#main{width:640px;}
#form-page #main{width:100%;}

ひとつ注意していただきたいのは、3階層以上になった場合、&を使うと上の階層で指定した親要素すべてを参照するということです。
下記のように3階層目で.section &と記述した場合「#main .section .box」とはならず、「.section #main .box」と出力されます。

Sass(SCSS)

#main{
  width:640px;
  .box{
    margin:10px;
    .section &{
    margin:0;
    }
  }
}

コンパイル後のCSS

#main{width:640px;}
.box{margin:10px;}
.section #main .box{margin:0;}

期待した通りの結果にするには、当たり前ではありますが下記のように普通に記述していれば特に問題ありませんね。

Sass(SCSS)

#main{
  width:640px;
  .section{
    margin:0;
    .box{
    margin:10px;
    }
  }
}

以上、&(アンパサンド)の基本の使い方でした!

私のように知らなかった方はSassの基礎をきっちり身につけてはいかがでしょう?

泣くほど早い…今すぐ使える便利なmixin集も公開していますのでぜひご覧ください!

Pocket
article clipper [Sass]親セレクタの参照ができる&(アンパサンド)の使い方

[Sass+Compass]mixin、変数、CSSスプライトなど便利な記述を大公開!

残暑お見舞い申し上げます、@cappeeです。

おひさしブリーフ。

さて、以前「Sublime Text 2 + Sass + Compass + Emmet 最強説!導入方法と自動アップロードの設定まとめ」という記事を書かせていただきました。

実際にサイト制作に導入して四苦八苦しながらどうやったら効率的にスマートなコーディングができるか、2ヶ月いじってやっとこさ納品しました。

そこで今回は、私なりに効率化するために記述したmixin、変数、CSSスプライトなど便利な指定方法を惜しげもなく公開したいと思います。(大げさ)

[最新版]mixin集の最新版を公開しているのでこちらもご覧ください!
[Sass]泣くほど早い…今すぐ使える便利なmixin集

記述はSCSSです。

サイトやデザインによって記述すべき指定は異なるかと思いますので、参考にでもしていただけたらなと思います。

Compass Home Compass Documentation 300x241 [Sass+Compass]mixin、変数、CSSスプライトなど便利な記述を大公開!

最初の記述

文字コード

まずはSass(SCSS)ファイルの最初に文字コードを指定します。

@charset "utf-8";

Compass

Compassを使う場合は下記の記述で呼び出します。Compassを使うには別途インストールが必要になりますので詳しくは「Sublime Text 2 + Sass + Compass + Emmet 最強説!導入方法と自動アップロードの設定まとめ」をご覧ください。

@import "compass";

IE9でのグラデーション表示

IE9でグラデーションを表示させるためにSVGを利用します。IE9はSVGの表示には対応しているので、background-imageをincludeした時に、自動的にSVGを出力してくれる下記の記述をしておくととても便利です。
こちらの記事で詳しく書かれています。「IE9でも複雑なグラデーションを利用する
ただ、IE9での見た目より読み込みスピード重視だという場合は、指定しない方がいいかと思います。

$experimental-support-for-svg: true;

mixin

グラデーション

フラットデザインが話題ではありますが、実際にはグラデーションもよく使用しますので、その記述を簡単にするmixinです。
明るい色から暗い色へ上下に変化するグラデはよく使うと思います。
その際グラデの明るい色と暗い色の2つを指定するのは面倒なので、暗い色の1色だけを()内で指定して、明るい色はlightenで指定します。
指定した色をどのくらい明るくするか、パーセントで記述すれば1色だけの指定で済むのでとても便利です。
逆にdarkenを使用して明るい色をどのくらい暗くするかを指定するのでもOKです。
一番最初にbackground-colorを指定しているのはグラデが使えないIE用の指定になります。

@mixin gradient-top-lighten($color:#E8E8E8, $lighten:7%){
background-color: $color;
@include background-image(linear-gradient(lighten($color, $lighten) 0%, $color 100%));
}

.selecta {
@include gradient-top-lighten(#EEE, 3%);
}

テキストシャドウ

ボタンなど白文字には黒を透過したシャドウをかけていたので、デフォルトの指定をこのmixinに変更しました。
黒文字に白のシャドウを入れる場合は、includeで@include text-shadow($white, 1);を指定すればOKです。

@mixin text-shadow($color:#000, $op:.4){
text-shadow: 0 1px 0 rgba($color, $op);
}

.selecta {
@include text-shadow;
}

ボタンの基本デザイン

ボタンはページやコンテンツによって色やサイズは変更すると思いますが、基本のデザインは一緒なので、一緒の部分はmixinで指定すると便利です。
下記は一例なのでサイトのデザインに合わせて変更してください。

@mixin btn-base{
@include border-radius(3);
@include box-sizing(border-box);
font-weight: bold;
text-decoration: none;
text-align: center;
width: 126px;
line-height: 25px;
}

.selecta {
@include btn-base;
}

フォントサイズ

今まで相対指定の%やemを使用していましたが、親要素を継承しないCSS3のrem指定の方が便利なのでremを使ったフォントサイズを指定するためのmixinです。
こちらの記事に詳しく書かれています。「CSS3の新単位remで、文字サイズの指定を分かりやすく
ただ、IE8以下では使用できないので対応ブラウザ次第ではpx指定も記述する必要があります。

@mixin font-size($size, $base: 16) {
font-size: $size + px;
font-size: ($size / $base) * 1rem;
}

.selecta {
@include font-size(14);
}

ポジション

結構positionを使うのでmixinを用意してみました。そこそこ便利だと思います。

@mixin abs-top-left ($top: 0, $left: 0) {
position: absolute;
top: $top + px;
left: $left + px;
}
@mixin abs-top-right ($top: 0, $right: 0) {
position: absolute;
top: $top + px;
right: $right + px;
}

.selecta {
@include abs-top-right(4, 10);
}

画像置換

私はLIR(Leahy/Langridge Image Replacement[リーフィー/ラングリッジ式画像置換])という画像置換の方法を採用しているので、CompassのCSSスプライトでbackgroundは自動で読み込めますが、それ以外のプロパティの指定が面倒だったのでこのmixinを作りました。
CompassのCSSスプライトの指定に関しては下で説明していますが、それが記述されている前提のmixinになりますのでご注意ください。

また、下記はLIRになりますので、それぞれが採用している画像置換の方法に変更して使用してみてください。
こちらで紹介されているtext-indent: 100%;を使う方法もオススメです。「画像置換「-9999px」のパフォーマンスを改善した新しいテクニック

@mixin bg-lir($name) {
width: image-width(sprite-file($icons, $name));
padding-top: image-height(sprite-file($icons, $name));
line-height: image-height(sprite-file($icons, $name));
height: 0;
overflow: hidden;
}

.selecta {
@include bg-lir(file-name);
}

角丸

かなり几帳面な人向けのmixinになります。。
border-radiusはmixinで指定しなくてもincludeできるのですが、数字を指定する時に(3px)などとpxを指定する必要があったので()内でpxを省いて数字だけ入力できるようなmixinもあるとちょっとだけ効率的になるかな?
※50%というようなパーセント指定をしたい場合はこのmixinを使わないでください!

@mixin border-radius($radius) {
-moz-border-radius: $radius + px;
-webkit-border-radius: $radius + px;
-o-border-radius: $radius + px;
-ms-border-radius: $radius + px;
border-radius: $radius + px;
}

.selecta {
@include border-radius(3);
}

変数

主要な色

変数には主にカラーなどを指定すると便利です。

$black:#333;
$white:#FFF;
$gray:#666;
$green:#4C9020;
$blue:#0467AF;
$pink:#DF5291;
$yellow:#E1930F;
$orange:#D5530A;

.selecta {
color: $gray;
}

明度の指定

明度の異なるカラーを使う場合も多いので、lightendarkenを利用するのが便利です。

$green-dark:darken(#4C9020, 6%);
$blue-dark:darken(#0467AF, 6%);
$pink-dark:darken(#DF5291, 6%);
$yellow-dark:darken(#E47301, 6%);
$orange-dark:darken(#D5530A, 6%);

CSSスプライト

自動インポート

CSSスプライトにしたい複数の画像を特定のフォルダに書き出し、下記のように記述すればCSSスプライト用の画像やbackground,background-positionを自動で出力してくれるのでとてつもなく便利です。
記述方法などはこちらに詳しく書かれています。必読です。「CSSの常識が変わる!「Compass」、基礎から応用まで!

$icons-spacing: 50px;
@import "icons/*.png";
@include all-icons-sprites;

手動で指定

上記の自動インポートは非常に便利ですが、アイコンなどの場合background-positionを微調整したりpaddingをプラスで指定したいケースが実際はほとんどです。
下記のsprite-mapはbackgroundのみ出力してくれて、background-positionなどそれ以外のプロパティは手動で指定するという指定です。
このへんが歯がゆいですよね。便利すぎるゆえにCompassへの要求は増えワガママになっている自分…

$icons: sprite-map("icons/*.png", $spacing:50px);

手動での指定ですが、paddingは属性セレクタで指定すると便利です。(IE7以上)
background-positionですが、テキストのフォントサイズによってアイコンの縦位置を微調整したい時など、デフォルトの指定からどのくらいpxを移動したいかを演算で調整できるので便利です。
スプライト画像が変更したとしてもこれで無問題!

[class^="icons"]{
padding-left:15px;
}
.icons-arrow {
background-position: 0 nth(sprite-position($icons, arrow), 2) + 3;
}

私は今回のサイト制作で大蛇区をして自動インポートと手動の両方を指定しました。
余計なコードは増えますが作業効率は多少上がるのでどっちをとるかですね。

また、今回ご紹介したmixin、変数などの指定は上の方に記述しないと適用されないのでご注意ください。

いかがでしたか?

コーディングはできる限り効率化して勉強の時間を増やしたいものです!

こちらの記事も参考にさせていただきましたのでご紹介します。
より素早くCSSコーディングするための、Sass(SCSS)のmixinスニペット集

Sassの本がついにでました!かなりオススメです。

Pocket
article clipper [Sass+Compass]mixin、変数、CSSスプライトなど便利な記述を大公開!

はじめて会社の確定申告をしてわかったこと

ゴーヤの実が少し大きくなって嬉しい、@cappeeです。

先々月で1期目の決算を迎え、昨日無事に会社の確定申告をすべて済ませました。

はじめて会社の確定申告をしてわかったことや注意点などメモしておきたいと思います。

対象は、私のように一人や少数で会社をやっていて、自分で決算を行い、確定申告をしようと思っている方になります。

e-taxの利用について

 はじめて会社の確定申告をしてわかったこと

法人を新設した際や決算時期が近づくと、管轄の税務署から色々な書類が届くかと思います。

その中に必ずと言っていいほど入っているのが「e-tax」の利用をすすめるチラシです。

e-taxとは、国税の各種手続きをインターネットから行えるシステムです。

Webのお仕事してるし、個人の確定申告もe-taxでやったことあるから、会社の確定申告もe-taxでやろうかな。なんて考えていました。

(ちなみに、個人の確定申告をe-taxでやる方法は「e-taxで確定申告する方法まとめ」をご覧ください。)

税金そんな甘くない。

e-taxは、何度も確定申告の経験をして、もう聞かなくても大丈夫、くらいのレベルになったら使うもの、と覚えておきましょう。

e-taxについて調べる時間もかかる上に使いづらく、記入方法もわからないのでは話になりません。

税務署の方も実際そんな感じでしたが、法人会のセミナーなどではしつこく宣伝してきます。それだけの開発費用がかかったのでしょう。。

税務署について

法人税(国税)についてわからないことがあったら、管轄の税務署で詳しく教えてくれます。

ネットで調べてもわからなかったら、電話か足を運んで聞いてみましょう。

確定申告する時もたくさんの書類を準備する必要があり、ぱっと見ただけではどこに何を記載していいかわかりません。

決算が済んでいれば、決算書と確定申告の書類、印鑑を準備して、税務署に持って行くと書き方を教えてくれます

決算書は、貸借対照表や損益計算書などの書類のことで、一般的な会計ソフトなら決算書をプリントする機能があるはずです。

そのほかに別途計算が必要な租税公課や受取利息などの仕訳もプリントするように言われると思います。

教えてもらう場合、ほとんどで予約が必要かと思いますので、まずは管轄の税務署に電話して訪問する日時と持っていく資料などを確認してみてください。

もし赤字で税金を支払う必要がなくても、赤字である申告と、金額ゼロの納付書を税務署に提出しないといけませんのでご注意ください。

税金は決算日から2ヶ月以内に支払う必要があるので、下記の法人事業税等の申告も逆算して早めに行なってくださいね。

国税局・税務署を調べる

都税・県税事務所について

税務署だけを意識しがちですが、都税・県税事務所での地方税の申告も忘れてはいけません。

税務署での申告が終わったら、国税申告の控えと地方税用の確定申告の書類、印鑑を持って都税・県税事務所へ行きましょう

準備する書類などは行く前に念のため管轄の事務所へ電話して確認した方がいいかもしれません。

申告書類の記入方法がわからなければ、窓口でその旨伝えると教えてくれます。

赤字であっても均等割の7万円は必ずかかりますので、近くの銀行などで支払ってください。

新設法人で1期の決算日まで12ヶ月たっていない場合は、7万円を月割するかたちになります。

管轄の事務所ですが、世田谷区の場合、固定資産税や納税証明書については世田谷都税事務所、法人事業税・地方法人特別税・法人都民税については渋谷都税事務所と、内容によって場所がかわる可能性がありますのでご注意ください。

都税事務所等一覧

決算について

確定申告する前にまずは決算業務です。

私の場合、クレジットカードの明細を見ないとわからないような支払いもあったので、決算日から1ヶ月おいて決算業務をやりました。

棚卸とかもないし、決算って何したらいいの?って感じですよね。

私が最終チェックで調整したポイントを書いてみたいと思います。プロではないので、心配な方は税理士さんへご相談ください。

会計ソフトで貸借対照表を見てみてください。

創立費・開業費

「創立費」と「開業費」は、「繰延資産」か「営業外費用」で処理することができます

私の場合、会計ソフトのデフォルトの「創立費」「開業費」科目を使ったら繰延資産でした。

繰延資産にしておくと、「5年以内のその効果の及ぶ期間にわたって、定額法により償却(月割償却)をしなければならない」ですし、最初のうちは利益を抑えて節税したいという方も多いでしょうから、その場合は業外費用」で処理します。

繰延資産になっている場合は、「創立費」「開業費」科目を「営業外費用」へ移動するか新たに科目をつくって調整してみてください。

詳しくはこちらをご覧ください。
創立費と開業費

ソフトウェアなどの固定資産

Web関係だと何かしらのソフトは絶対必要ですよね。

ただし、安易に「ソフトウェア」という科目で処理してしまうと「固定資産」になってしまいこれまた償却が必要になります。

ソフトを購入したり、クラウド化により月額でソフトを使用していた場合、取得金額が30万円未満であるかどうかを確認してください。

資本金1億円以下の中小企業であれば少額特例により30万円未満は即時償却が可能ですので「消耗品費」として処理することができます。

詳しくはこちらをご覧ください。
パソコンソフトの勘定科目

以上で資産となっていたものを調整し、即時償却することで損金算入(経費)することができました。

赤字であっても欠損金の繰越制度により最大9年間繰越(平成20年3月以前は7年間でした)できますし、自分で会計をやっている場合は仕訳をよりシンプルにしたいですので、即時償却可能なものは早めに経費として処理するのがいいかと思います。

小さな法人であれば自分で確定申告もできますので、恐れずにチャレンジしてみてください!

Pocket
article clipper はじめて会社の確定申告をしてわかったこと

ID ManagerからKeePassへパスワード簡単移行!さらにWin/Macなどマルチデバイスに対応する方法

毎日猛暑、@cappeeです。

前回こちらの記事を書きました。
KeePassを使いWinとMacでパスワードを一元管理するシンプルな方法

今回は、マルチデバイスでの共有とさらにID ManagerからKeePassへパスワードの移行を考えている方向けとなります。

では、さっそくいきましょう。

KeePass Password Safe のダウンロードと日本語化

KeePass Password Safe」の「Classic Edition」をインストールします。インストール画面はずっと「次へ」を押していれば大丈夫です。

KeePass Password Safe ID ManagerからKeePassへパスワード簡単移行!さらにWin/Macなどマルチデバイスに対応する方法

次に、「日本語ファイル」をインストールします。

KeePass Password Safe1 ID ManagerからKeePassへパスワード簡単移行!さらにWin/Macなどマルチデバイスに対応する方法

zipファイルを解凍すると「Japanese.lng」ファイルがありますので、それを下記のディレクトリへ置いてください。

C:\Program Files\KeePass Password Safe

Winの64bit版で「Program Files(x86)」にインストールした場合、「Japanese.lng」ファイルを移動しようとすると「書き込みエラーが発生しました」と表示されることがあります。

もしそうなった場合は、インストールした「KeePass Password Safe」フォルダをまるごと「Program Files」の方に移動してから「Japanese.lng」をコピーすれば大丈夫です。

次に「KeePass.exe」を起動します。起動するとマスターキーの設定画面が表示されるかと思いますので、KeePassを使用する時に入力するパスワードを登録します。(パスワード管理用のパスワードということです。)

KeePass Password Safe3 ID ManagerからKeePassへパスワード簡単移行!さらにWin/Macなどマルチデバイスに対応する方法

次に画面上部の「View」→「Change Launguage…」を選択します。

KeePass Password Safe2 ID ManagerからKeePassへパスワード簡単移行!さらにWin/Macなどマルチデバイスに対応する方法

Japanese」を選択すると日本語化されます。

ID Managerからのエクスポート

エクスポートする前に、「ID Manager」のデータの調整を行います。

「ID Manager」の項目である「Title」「Account ID」「Password」「URL」「コメント欄」以外に入力した内容はなくなってしまうので、それ以外で必要な箇所は予め「コメント欄」などへ移しておきます。

完了したら、データのエクスポートです。

「ファイル」→「データのエクスポート」→「XMLファイルへの書き出し」を選択し、適当な場所へ保存します。

ID Manager ID ManagerからKeePassへパスワード簡単移行!さらにWin/Macなどマルチデバイスに対応する方法

KeePassで読み込み可能なデータへ変換

KeePassで読み込み可能なデータへ変換するためのありがたいソフトがあるのでそれを使用します。

IDM2KeePass」をダウンロードして「IDM2KeePass.exe」を起動してください。

KeePass XML(1.x)」を選択し、「変換」ボタンをクリックするとファイル選択画面が表示されますので、先ほど「ID Manager」でエクスポートしたXMLファイルを開きます。

IDM2KeePass ID ManagerからKeePassへパスワード簡単移行!さらにWin/Macなどマルチデバイスに対応する方法

次に変換後の保存先を聞かれるので、これも適当な場所へ名前をつけて保存します。保存する際自動でつかないので「.xml」の拡張子もつけるようにしましょう。

KeePassへのインポート

インポートの前にパスワードを保存するデータベースを作成します。

「ファイル」→「新規データベース」をクリックし、マルチデバイスで使用する場合はDropboxへKDBファイルを保存します。

次に「ファイル」→「インポート」を選択すると、XMLファイルを選択する項目がありません。

その他のインポート用プラグインを取得」を選ぶとブラウザでプラグインページが開きます。

KeePass Password Safe4 ID ManagerからKeePassへパスワード簡単移行!さらにWin/Macなどマルチデバイスに対応する方法

VariousImport 」をインストールして日本語ファイルと同じように「C:\Program Files\KeePass Password Safe」へ保存します。

KeePass Password Safe5 ID ManagerからKeePassへパスワード簡単移行!さらにWin/Macなどマルチデバイスに対応する方法

「KeePass」を再起動するとXMLファイルを読み込む項目が増えていますので、一番下の「Import KeePass 1.x XML File…」をクリックして、先ほど変換したXMLファイルを選択します。

KeePass Password Safe6 ID ManagerからKeePassへパスワード簡単移行!さらにWin/Macなどマルチデバイスに対応する方法

すると「ID Manager」のパスワードがすべて移行されました!

KeePass Password Safe7 ID ManagerからKeePassへパスワード簡単移行!さらにWin/Macなどマルチデバイスに対応する方法

マルチデバイスでパスワードを共有

Mac版は「KeePassX」をインストールします。

ただし、公式だと自動入力がないので、必要な場合は有志がつくった「KeePassX 自動入力版」をインストールしてください。

Win、Macの他にも下記のようなデバイスに対応していますので、必要に応じて導入してみてください。

  • iPhone/iPad … MiniKeePass
  • Android … KeePassDroid
  • USBメモリ … KeePassPortable

パスワードを共有する方法は先程Dropboxに保存したデータベースのKDBファイルをマルチデバイスで開くだけです!

前回の記事に詳しく「KeePass」の使い方や共有方法などを記載していますのでぜひご覧ください。

KeePassを使いWinとMacでパスワードを一元管理するシンプルな方法

Pocket
article clipper ID ManagerからKeePassへパスワード簡単移行!さらにWin/Macなどマルチデバイスに対応する方法

KeePassを使いWinとMacでパスワードを一元管理するシンプルな方法

こんにちは、@cappeeです。

先日 Mac Book Air を購入しまして、ネットライフがよりパワーアップしました!バッテリーの持ちも良く非常に大満足しています。

新しいパソコンを購入するといつも悩むのがパスワードの共有です。

クラウドのパスワード管理を使うかも迷ったのですが、まだセキュリティ面で不安があるので、従来通りアプリケーションをDLして使うことに。

そこで、導入したのが「KeePassX」と「Dropbox」を使ったパスワードの一元管理です。

結局クラウドデータサービスの「Dropbox」使ってるやんとなってしまいますが、直接流出するよりは可能性が低いということで。。

KeePassX2 KeePassを使いWinとMacでパスワードを一元管理するシンプルな方法

まえがき

「KeePass」と「Dropbox」を使ったパスワード管理の方法は他の記事でも色々と紹介されています。

私が調べたものだと、Winの場合は結構「KeePass」のクラシックエディションと日本語ファイルをダウンロードするように書かてれいて、Mac同様「KeePassX」で共有できないのかな?と思い試してみたら普通にできたので、そのシンプルな方法をご紹介したいと思います。

ひとつ、Winで「KeePassX」を使うデメリットは、ID・パスワードの自動入力がないこと。対応させたい場合のインストールに関しても書いています。

また、今までWinでは「ID Manager」を使っていたので、それを「KeePassX」へ移行できないかも調べてみました。参考までにメモしておきます。(結論、クラシックエディションのインストールが必要になります)

KeePassX のインストール

無料・高機能・マルチデバイス対応

この三拍子が揃っているパスワード管理はなかなかないと思います。

KeePassX KeePassを使いWinとMacでパスワードを一元管理するシンプルな方法

KeePassX の公式サイトよりWin、Mac版をそれぞれダウンロードします。

日本語ファイルを別途ダウンロードしなくても日本語で表示されます。

自動入力を使いたい方へ

なお、「KeePassX」では残念ながらID・パスワードの自動入力がありません。(なんで。。)

自動入力を使いたい場合は、同じ系列の下記のソフトをインストールし、同じように設定すれば大丈夫です。
「ID Manager」から移行する場合も同様のソフトを使用することになります。

「ID Manager」から移行する方はこちらの記事を参考にしてください。
ID ManagerからKeePassへパスワード簡単移行!さらにWin/Macなどマルチデバイスに対応する方法

マスターキーの設定

Win、Macどちらかのパソコンから「KeePassX」を開くと、マスターキー(KeePassXで作成するデータベース用のパスワード)の設定画面がでますので入力します。

「KeePassX」はパスワードを管理するデータベースを複数作成することができ、マスターキーはデータベース毎に設定します。

セキュリティを強化したい方はキーファイルも設定してください。

この画面が表示されない場合や、新しくパスワードのデータベースを作成する場合には、「ファイル」→「New Database」でも設定可能です。

KeePassX1 KeePassを使いWinとMacでパスワードを一元管理するシンプルな方法

グループの作成

画面左にデフォルトで作成されたグループができています。必要なければ削除し、自分でグループを作成してください。

画面上の「グループ」→「新規グループ」より作成できます。

KeePassX3 KeePassを使いWinとMacでパスワードを一元管理するシンプルな方法

エントリー(管理するパスワード)の追加

管理するパスワードを追加するには、画面上の「鍵マーク」を選ぶか、「エントリー」→「新規エントリーの追加」で追加できます。

KeePassX4 KeePassを使いWinとMacでパスワードを一元管理するシンプルな方法

右側の「目のマーク」は入力したパスワードを確認することができます。

その下の「生成」ボタンを押すと、パスワードを自動生成してくれるので便利ですよ。

KeePassX5 KeePassを使いWinとMacでパスワードを一元管理するシンプルな方法

Dropbox にパスワードを保存

Dropbox」をまだ利用していない方は、会員登録し、パスコンのエクスプローラーから開けるようにダウンロードしてください。

先ほどの「KeePassX」で作成したデータベースを「ファイル」→「データベースを保存」から保存します。

データベースの保存先を「Dropbox」の任意の場所にします。

一旦「KeePassX」を閉じ、別のパソコンで「ファイル」→「データベースを開く」から「Dropbox」内のデータベースを選択します。

これでパスワードの共有は成功です!

自動入力で楽ちん

上記のとおり自動入力に対応しているソフトをインストールしていれば使用可能です。

ブラウザでID、パスワードを入力したい画面を開き、IDの項目へカーソルを合わせます。(mixiログイン画面より)

そして重要なのですが、IDは基本ローマ字かと思いますが、パソコンの入力モードが「半角英数」になっているか確認してください。

(ひらがな入力のままだと日本語に変換されておもしろい感じになります。お試しあれ。)

mixi KeePassを使いWinとMacでパスワードを一元管理するシンプルな方法

次に「KeePass」の一覧から該当の項目を右クリックすると「自動入力の実行」というのがあります。

ちなみにショートカットでも実行できるのでさらに楽ちんですね。

実行すると自動でブラウザの画面に入力しエンターキーまで押してログインしてくれるのでとても便利ですね。

KeePassX6 KeePassを使いWinとMacでパスワードを一元管理するシンプルな方法

手動で入力したい場合は、「ユーザー名をコピー」や「パスワードをコピー」してから、ブラウザ側でペーストすることもできます。

また、自動入力する項目の順序などをカスタマイズすることも可能です。

該当の項目を選択しダブルクリックで編集画面を開きます。

左下から「ツール」→「自動入力:順序のカスタマイズ」を押すと「備考」に下記のような表示がでるかと思います。

Auto-Type: {USERNAME}{TAB}{PASSWORD}{ENTER}

ここで変更すれば、項目の順序やタブキー、エンタキーの調整などが行えます。

マルチデバイス

Win、Macの他にも下記のようなデバイスに対応していますので、必要に応じて導入してみてください。

  • iPhone/iPad … MiniKeePass
  • Android …KeePassDroid
  • USBメモリ … KeePassPortable

ID Manager からの移行

「ID Manager」から「KeePassX」への移行ですが、結論から言うとデータ変換ソフト「IDM2KeePass」を使った方法では正しくインポートできませんでした。

また、色々な参考記事を見ると、「KeePass Professional Edition」を使用しており、このバージョンだとMac版がある「KeePassX」とはデータベースの形式が異なるため、Dropboxを使ったパスワードの共有ができなくなってしまうのです。。

[参考]パスワード管理ソフトID ManagerからKeepassへデータを移行する為のわかりやすい図解手順

ならば、データベースの形式(.kdb)が同じ「KeePass Classic Edition」なら、ID Manager からの移行後さらにWin、Macでの一元管理ができるかも、と思い試してみました。

無事成功!

ただし、「ID Manager」の項目である「Title」「Account ID」「Password」「URL」「コメント欄」以外に入力した内容はなくなってしまうので、予め「コメント欄」へ移しておくなど対策が必要そうです。

こちらも長くなりそうなので、「ID Manager」からの移行に関しては別記事で紹介していと思います。

[追記]書きました。
ID ManagerからKeePassへパスワード簡単移行!さらにWin/Macなどマルチデバイスに対応する方法

Pocket
article clipper KeePassを使いWinとMacでパスワードを一元管理するシンプルな方法

Dreamweaver CCにアップデート!CS6から各種設定や拡張機能を移行する

台風こわい、@cappeeです。

6月18日に Adobe Creative Cloud のソフトがメジャーアップデートし、 Dreamweaver や Photoshop、Illustrator などが「CC」 にバージョンアップしました。

今後はアプリのように「CC」内の機能をアップデートする形になるので、バージョン名はずっと「CC」のままということになります。

ということは、バージョンアップによる移行作業はこれが最後!です。きっと。

といってもある程度自動で設定を引き継いでくれていたので、 移行作業はとても楽でした。

サイト管理も引き継がれます!

これから移行するという方のために手動で私が行った作業をメモしておきます。

はじめに

以前投稿して好評だった「Dreamweaver CS6 でオススメの拡張まとめ」でご紹介した拡張も現時点では「CC」でほぼ使えません。

使えないというのもありますし、拡張を入れなくとも「Emmet(Zen-Codingから名称変更)」でカバーできるものが多く必要なくなった機能もあります。

今回は「Emmet」の機能導入と「CC」の各種設定について主にご紹介します。

Emmet(Zen-Coding)の拡張機能

なにわともあれ「Emmet」がないとコーディングが始まらないので真っ先に拡張を探しました。

「Emmet(エメット)」はバージョンアップに伴い「Zen-Coding」から名称変更しています。

インストール方法は、下記のGitHubの画面下の方にある「Installation」の「Emmet.zxp」から拡張ファイルをダウンロードします。

Emmet for Dreamweaver

emmet Dreamweaver CCにアップデート!CS6から各種設定や拡張機能を移行する

「Emmet.zxp」を開くと、「Acobe Extension Manager CC」が立ち上がりますのでそのまま画面に従って進めば導入が可能です。(まだの方は Acobe Extension Manager CC もインストールしておいてくださいね)

extension 300x224 Dreamweaver CCにアップデート!CS6から各種設定や拡張機能を移行する

「Acobe Extension Manager CC」に「Emmet」が追加されていればインストール完了です。

「Dreamweaver CC」を開いてコマンドに追加されているか確認します。

emmet1 300x149 Dreamweaver CCにアップデート!CS6から各種設定や拡張機能を移行する

念のため「Ctrl+E」(Win)で展開できるか確認してみましょう。
(ちなみに私は押しづらいのでショートカットを「Ctrl+.」に変更しています。)

また、「Emmet」は自分なりに展開する文字列をカスタマイズすることができます。設定用のファイルは下記です。

C:\Users\(ユーザー名)\AppData\Roaming\Adobe\Dreamweaver CC\ja_JP\Configuration\Commands\Emmet\snippets.js

私が行ったカスタマイズに関してはこちらをご覧ください。
Zen-Codingを自分なりにカスタマイズしてさらに効率化する方法

コードカラーリングの変更

私はコードカラーをカスタマイズしていますので、その設定ファイルを移行します。

カスタマイズ方法はこちらに記載しています。

[Dreamweaver]コードカラーリングをカスタマイズする

その「Colors.xml」ファイルを下記のフォルダに上書きすれば完了です。(一応バックアップも残しておいてください。)

C:\Users\(ユーザー名)\AppData\Roaming\Adobe\Dreamweaver CC\ja_JP\Configuration\CodeColoring

スニペットの移行

「CS6」など以前のバージョンで作成したスニペットは、「CC」にcsnファイルをコピペすることでそのまま移行することができます。

以前のバージョンのスニペット

C:\Users\(ユーザー名)\AppData\Roaming\Adobe\Dreamweaver CS6\ja_JP\Configuration\Snippets

CCのスニペット

C:\Users\(ユーザー名)\AppData\Roaming\Adobe\Dreamweaver CC\ja_JP\Configuration\Snippets

キーボードショートカットの移行

キーボードショートカットの設定ファイルである「Menus.xml」を以前のバージョンのから「CC」へコピペしてみました。

Dreamweaverで設定画面を開いたところメニュー名が文字化けしていたので、これに関しては手動で設定しなおした方が安全かもしれません。

[編集]→[キーボードショートカット]から編集してください。

環境設定

環境設定はほぼ以前のバージョンと同じでしたが、一部だけ変更しました。

自分なりの設定があると思うので、比較してみてください。

ちなみに「CS6」と「CC」は同時に開けません!(Extension Manager は開けました。)

ファイルタイプ/エディター

Dreamweaver Dreamweaver CCにアップデート!CS6から各種設定や拡張機能を移行する

「Dreamweaverに関連付けるファイルタイプ」を選択します。

また、「コードビューで開く」は以前のバージョンのものをコピペします。私は最近だと「.scss .rb」を追加しました。

同期の設定

同期がクラウド化されてから発揮される便利機能ですね。

Adobe Creative Cloud はPC2台までソフトのインストールが可能なので、環境設定とサイト設定を常に2台で同期することができます!

最初に「CC」を開いた時にも同期についてアラートがでたかと思いますが、環境設定でより細かい設定をします。

Dreamweaver1 Dreamweaver CCにアップデート!CS6から各種設定や拡張機能を移行する

「自動同期を有効」にしておいた方が楽なのでチェックを入れます。

「同期する設定」は自分の利用状況に合わせてチェックをしてみてください。

いかがでしょうか?

これから楽しい「Creative Cloud」ライフの始まりです。

Pocket
article clipper Dreamweaver CCにアップデート!CS6から各種設定や拡張機能を移行する