ダダめも

思いついたことをまとめる

sassの「&」の使い方メモ

sass の「&」の使い方でちょっとはまりそうになったのでメモ。

sassの&には色んな使い方があります。 僕がよく使うのは :before:after:hoverみたいなやつですね。

.hoge{
  &:before{
    〜〜
  }
}

ネストの前後を入れ替えることもできちゃいます。

.hoge{
  .foo{ 〜 }
  .bar &{}
}

コンパイル

.hoge .foo{}
.bar .hoge{}

くっつけることは出来なかった

で、「特定のタグにだけクラスを付与した場合」を書こうとしたのですよ。 例えば.hogea.hogeを書こうとして下記のようにしましたが、これはコンパイルエラーになりました。

.hoge{
  〜
  a&{ 〜 }
}

変数展開#{}の方法があった

何か方法はないかと調べたら#{&}という感じに変数展開の方法が使えるのですね。

html5experts.jp

こんな感じに書き換えました

.hoge{
  〜
  a#{&}{}
}

変数展開の場合はネストが付いてしまいました。

.hoge{}
.hoge a.hoge{}

結局普通に書くことに

結局普通に分けて書くことにしました。 何かいい方法ご存じの方がいたら教えてください。

.hoge{}
a.hoge{}

f:id:dada:20160305155512p:plain

sassの「&」の使い方メモ

sass の「&」の使い方でちょっとはまりそうになったのでメモ。

f:id:dada:20160305155512p:plain

sassの&には色んな使い方があります。 僕がよく使うのは :before:after:hoverみたいなやつですね。

.hoge{
  &:before{
    〜〜
  }
}

ネストの前後を入れ替えることもできちゃいます。

.hoge{
  .foo{ 〜 }
  .bar &{}
}

コンパイル

.hoge .foo{}
.bar .hoge{}

くっつけることは出来なかった

で、「特定のタグにだけクラスを付与した場合」を書こうとしたのですよ。 例えば.hogea.hogeを書こうとして下記のようにしましたが、これはコンパイルエラーになりました。

.hoge{
  〜
  a&{ 〜 }
}

変数展開#{}の方法があった

何か方法はないかと調べたら#{&}という感じに変数展開の方法が使えるのですね。

html5experts.jp

こんな感じに書き換えました

.hoge{
  〜
  a#{&}{}
}

変数展開の場合はネストが付いてしまいました。

.hoge{}
.hoge a.hoge{}

結局普通に書くことに

結局普通に分けて書くことにしました。 何かいい方法ご存じの方がいたら教えてください。

.hoge{}
a.hoge{}

Safariで display:table に overflow:hiddenが効かず、IEは mainタグをブロック要素として扱わない件

今日は「迷家ーマヨイガー」という作品のサイトをリニューアルしたのですが、SafariIECSSではまりました。

mayoiga.tv

Safariは display:table を overflow:hidden しても効かない

CHARACTER | TVアニメ「迷家‐マヨイガ‐」

キャラクター紹介ページの下部には登場人物のサムネイルが並んでいます。 マウスオーバーすると名前が表示されるのですが、当初は display:table-cell で縦中央揃えしていました。

<a href="">
<span>名前</span>
</a>
a{
  display: table;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  overflow: hidden;
}
a span{
  display: table-cell;
  vertical-align: center;
  background-color: red;
}

他のブラウザは丸い形でマスキングされるのですが、OSX ElCapitan の Safariだけは四角く表示されてしまいます。 仕方ないので display:block にし、<span> をもう一段増やして translateY:50% で中央揃えにしました。

<a href="">
<span><span>名前</span></span>
</a>
a{
  display: block;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  overflow: hidden;
}
a span{
  display: block;
  width: 100%;
}
a >span{
  background-color: red;
  position: relative;
  height: 100%;
}
a > span > span{
  position: absolute;
  left: 0;
  top: 50%;
  translateY: -50%;
  text-align: center;
}

IE11 ではHTML5の <main> をブロック要素にしてくれない

こちらのページに詳細がありました。

qiita.com

これは display:block することで対応できました。

<main class="mainBox"> </main>
.mainBox{
  display: block;
}

Dropbox無料版に戻しました。最近の僕のクラウドストレージとバックアップ環境

f:id:dada:20160125010927j:plain

技術的な話は特になく、単に自分の環境の再確認です。何かの参考になれば幸いです。

Amazon Cloud Driveは同期型じゃなかった

1/21にAmazonAmazonプライムフォトというサービスをスタートしました。

これは従来5GBまでの無料ストレージだった Amazon Clud Drive(以下ACD)を、画像ならJPEGだろうがPNGだろうが、RAWですら容量無制限で保存できちゃうというものすごいサービスに変更したものです。大量のRAWを抱える一眼レフユーザーに絶賛されました。

ただ個人的にはイメージしていたのとはちょっと違っていました。

現在競合として存在する DropboxGoogle Drive、One Driveのような同期型だと思っていたのですが違いました。

ACDにアップしたフォルダの中身をローカルで変更してもACDには反映されません。ACD側のファイルを削除してもローカルには反映されません。たとえるならFTP型だったのです。

iPhoneの写真は全部 Amazon Cloud Driveに!

ACDの使い勝手は予想していたものと違いましたが、写真が容量無制限というのはやはり魅力的なので、iPhoneの写真は自動的に ACDにバックアップするようにしました。

そしてiPhoneで撮影した写真は iCloudにも保存されます。しかしこちらは容量制限があるのでどんどんPCに移動させ、最新のもののみが入っている状態にします。

一眼で撮影したものも、不要なファイルを削除したあとにACDにバックアップします。

ACDは画像のバックアップ専用と割り切りました。ローカルでうっかり削除したときに復元するために使います。

今までのクラウドストレージ環境

サービス 容量 用途
Dropbox 1TB(有料) バックアップ&業務上の共有
OneDrive 1TB(有料) 連れとの写真共有
GoogleDrive 17GB(無料) 主にGoogleドキュメント

これからのクラウドストレージ環境

サービス 容量 用途
Dropbox 8GB(無料) 業務上の共有
OneDrive 1TB(有料) バックアップ&写真共有
GoogleDrive 17GB(無料) 主にGoogleドキュメント
AmazonCloudDrive 画像無制限 画像倉庫

Dropboxは無料に変更

Dropboxはクライアントとの素材受け渡しにフォルダ共有を使っていたのですが、使わなくなったので無料に戻しました。

OneDriveはバックアップ用に

1TB使えますが Mac Book Pro本体にそんな容量はないので一部ファイルのみバックアップです。

iTunesLightroomのライブラリなど、ローカルにないと使えないものを入れています。ただし画像や音楽データ自体は外付けのドライブに入れています。MBAにそんな容量はないのでw

Google Driveはそのまま

Googleアカウントはあっさりと消えてしまうということを経験的に知っているので、バックアップ用途としては使いませんw Gmailのデータも Outlookでバックアップしています。

Amazon Cloud Driveは画像倉庫

画像を放り込むだけです。ローカルでうっかり削除してしまった時の救出用として使います。

Mac Book本体は TimeMachineでバックアップ

ローカルドライブは外付けHDDに TimeMachineでバックアップしていますが、実はあんまりやっていません(一番重要度高いのにw)

外付けHDDは Acronis True Image Cloudでバックアップ

データ置き場として使っている外付けHDDは Acronis True Image Cloud(ATIC) で定期的にバックアップしています。ATICは容量無制限をうたっているので全データをバックアップするのに向いています。

稼働中のプロジェクトデータは Bitbucket

Bitbucketに保存して、外部協力者に作業してもらう時はプルリクエストを投げています。

もう使わないであろうデータは Google Cloud Storage

2年前に終了したプロジェクトのデータは RARで圧縮して Google Cloud Storage Nearlineに保存しています。上述したようにGoogleはアカウントBANが怖いので、専用のアカウントを作っています。

http://www.itmedia.co.jp/news/articles/1503/12/news055.html

ただしローカルにもバックアップ

色々クラウドにバックアップしていますが、やはり手元にもないと安心できないものです。業務用データは半年に一度新しいHDDにまるまるバックアップして入れ替えることにしています。

おわり

というわけで色々安全弁は設けていますが、やはり1日単位の巻き戻りが発生することはあります。

友人は一週間一度も保存をしてない状態で Windowsアップデートが走り、一週間分の原稿が消えたそうです。

一週間一度も保存しないって馬鹿じゃねえのか!!

彼にはGoogleドキュメントを強く推奨しました。

余談

台湾情報ブログはじめました。

go-taiwan.jp

写真データが容量無制限のAmazonフォトプライムはRAWデータも無制限らしい

2016/1/21 に発表されたAmazonフォトプライムが話題になっているようです。

Amazonフォトプライム

Amazonフォトプライム Amazon Cloud Drive(以下ACD)のサービスの一部です。ACD米国版は容量無制限なのに、日本版は上限5GBという制限が以前からありました。

【人柱レポ】容量無制限の本家アメリカ版Amazon Cloud Drive使ってみた&超快適最強サービスだった! | ひとぅブログ

それが今回のサービス改変で写真データのみ容量無制限ということになったようです。

画像以外はやっぱり上限5GB

調べてみると写真データ以外はやっぱり上限5GBでした。

そうすると「写真データは専用フォルダに保存する? それとも写真データの容量だけカウントしないの? その両方なの?」という疑問がわきました。

保存する場所は同じで、容量をカウントしない仕様だった

というわけで実際に調べてみました。

今までACDは使っていなかったので使用容量はゼロです。そこに19MB弱のファイルを置いてみました。

f:id:dada:20160121153714p:plain

同じ場所にRAWデータ(拡張子「CR2」)を2つ置いてみました。

f:id:dada:20160121153903p:plain

すると、ファイル総数は「3」なのに「1個のファイル」と表示されます。 RAWデータはファイルの個数にカウントされていません。

※本来はここに写真の個数が別にカウントされるのですが、反映されるまで少し時間がかかるようです。

f:id:dada:20160121153912p:plain

拡張子で判断しているわけではなさそう

拡張子で判断しているのだろうか? という疑問がわいたので、先ほどのZIPファイルの拡張子を「.jpg」にしてアップしてみました。

f:id:dada:20160121154544p:plain

しっかり容量にカウントされています。ファイル個数からも写真データ扱いになっていないのがわかります。

f:id:dada:20160121154552p:plain

Lightroomカタログごと置いちゃう?

写真データだけ無制限で、他のファイルも一緒に置くことが出来るのがわかりました。

拡張子ではなくデータ形式をちゃんと確認しているのもわかりました(当たり前か)。

というわけでどういう風に使うかはおいおい考えていきたいと思います。

個人的には外付けHDDにある写真+Lightroomカタログをまるごと置いて同期させようかなーなんて考えてますが、その辺はデスクトップアプリ次第かなと。

シンボリックリンクは使えるのか。外付けHDDがない状態ではどうなるのか。その辺も検証してみたいと思います。

2016/1/24追記

現状のAmazon Cloud Driveデスクトップアプリは同期型ではないので、「カタログを置いて自動的にバックアップ」のようなことは出来ないようです。

Lightroomで「かすみの除去」が使えない!? と思ったらカメラキャリブレーションが原因だった話

数年前にLightroomで現像した写真を見てみたら調整項目が何か違っていた。

f:id:dada:20160120181827p:plain

「白とび軽減」「補助光効果」。 これってだいぶ以前のバージョンの調整項目じゃないですか。

よく見たら使いたかった「かすみの除去」も使えない。

f:id:dada:20160120182029p:plain

色々調べてみたら「カメラキャリブレーション>処理」という項目によって調整項目が変わるらしい。

というわけで「2012」に変更してみた。

f:id:dada:20160120182200p:plain

おぉ! 使えるようになったよ!!

f:id:dada:20160120182233p:plain

基本補正にも「白レベル」「黒レベル」が表示された!

f:id:dada:20160120182309p:plain

しかし補正項目を変えると現像設定が変わるので、現像は当然やり直しとなるので注意。

css3のFlexbox練習

FlexboxとかFlexibleBoxとか。その辺の練習をしてみようと思います。

仕様については CodeGridさんのページが大変参考になります。

app.codegrid.net

幅いっぱいで、等間隔に並べたい

いきなり本題に入ります。 これの最適解が見付からない。

あああ
あああ
あああ

あ、あれ? はてなブログって本文中にスタイルシートタグ挿入できないの??

終了。