2016.02.14

ちっさいUSBメモリを挿しっぱで写真管理することにした

usb_img
私のMacBook Pro Retina late2013の容量は120GBで貧乏です。
そんで容量節約のため、写真AppとTimeMachineを無線LAN経由のAirMac Diskにて運用してます。
(AirMac Disk: AirMac Extremeベースステーションusb経由の外付けHDD)

しかし、使用しているAirMac Extremeが大変な骨董品なせいか?調子が悪いことがしばしば。
アクセスポイントとしては生きてるものの、AirMac Diskとの共有が切れてしまう現象に現状、週一程度で悩まされています。
新し目のTimeCapsuleでも同様の現象が起こっているらしいので、これはもう諦めてます。Extreme電源抜き差しの再起動で治るし…。

きぃっ!AirMac不調で写真Appに接続できない

TimeMachineは遅延しても後で再起動すればいいので諦観して運用できるけど、今、画像を取り込みたい!っという時に写真AppがHDDにアクセスできないのは、なんかちょっとすごく我慢できない気がしてきました。

もっと手軽に速く扱えたほうがよくね?。
AirMac Diskに無線接続だとけっこう重いし。

ちっさいUSBフラッシュメモリ

写真Appでの画像管理のため、MacBookに挿してもそのまま持ち運べるよう邪魔にならないUSBフラッシュメモリを入手しました。
SanDisk Cruzer Fit USBフラッシュメモリー 64GB SDCZ33-064G-J57

USB2.0ですが、小ささとお値段で選んでみました。
悩んだ対抗馬はこっち↓のUSB3.0

安いけど、なんかちょっと大きくて出っ張りそうなのと海外リテール品なので敬遠。
欲しい欲しいと騒いでいたJetDrive Lite 330はカードスロットを塞いじゃうので、却下となりました…だって写真App専用に使いたいのにカメラのカード挿せなくなるよね(´・ω・`)よく考えたら。

大きさはマウスと比べてこんくらい。下のボール紙封筒に入ってました。
usb_open
usb_cap絶対に無くす感満載の小ささです。ストラップをつける金具が本体の方についてます。

実際に挿した感じはこんなです。
USBsun邪魔臭くはない。持ち運んでる時にガッってなりそうな気はしないでもないけど。
上から。
usb_up
撮れてないけどアクセスランプはオレンジです。

写真Appの中身をUSBフラッシュメモリに移植は簡単

ホーム→ピクチャと進み、中にある”写真 Library”をUSBメモリにコピーするだけだったりします。
んで、写真Appを起動する時にoptionを押したままにすると選択ウィンドウが開くので、USBメモリの”写真 Library”を選択します。
library_src

環境設定を開き、”システムフォトライブラリとして使用”を選択。画像はすでに選択されているのでグレーアウトしてます。
library_set

パァァァ(^ω^)快適快適。
細かいところを測るとあれなのかもしれませんが、アクセスの速度も内臓ストレージに遜色ありません。
今の所500枚程度雑多な解像度の画像が入って1.6GB弱消費してますが、まだまだ存分に追加できそうです。

USBメモリを挿してからTimeMachineが遅くなっちった!なんなのもぅっ

ところが…思わぬところに余波が。
TimeMachineが一時間に400KBほどしか進まなくなった上に、そこからうんともすんともいいやがらなくなってしまいました。
アクティビティモニタでディスクの項目を見ると毎秒のデータ書き込みが数キロバイトづつしか動いてない……。

ESETの野郎…

ずばり、悪さをしているのはESETのリアルタイムファイルシステム保護です。
これを無効にするとサクサクとTimeMachineが動く。

しかし、ESETにはもう少し働いてもらう

USBメモリを挿す前後で特にESETの設定を変えたりはしてないのになー。今までもUSBメモリは使ってたし。へんだなー。
もしかして、USBメモリをジャーナリングでフォーマットし直して、中身の写真LibraryをTimeMachineでバックアップに含めようとしたのが引き金になっちゃったのかなぁ。

とりあえず、TimeMachineが遅いという症状は治まったものの、
リアルタイムファイルシステム保護を無効にしたままなのも気持ちがわるいので設定を見直してみます。
eset_set
ESETの設定→コンピューターと進み、
リアルタイムファイルシステム保護のスライダボタンを有効にする。
その下のリムーバブルメディアのブロックという項目に注目。
スライダーボタンで普段からブロックを無効にしていたのですが、実際にUSBメモリを装着した場合、どうやらここを無効にしただけではダメな模様。TimeMachineのアクセスをリアルタイムで保護しちゃうんですかね?
横にあるボタンから設定を開き
”ブロックされたメディア”の該当メディアのチェックボックスを外す。わしは面倒なので全部外しました。

この設定でリアルタイムファイルシステム保護とTimeMachineをストレスなく同時に使うことができるようになりました。
せっかくの常時挿しっぱなしにできるのが売りの小さいフラッシュメモリーですし、TimeMachineの他のパフォーマンスにも影響してるかもしれんので、解決してよかった。よかった。

他にも一応、ESETでは検査の対象からTimeMachineに使用するドライブを除外しておくといいかと思われます。

参考サイト:
MAC EL Capitan上のTime MachineとESET Cyber Security PROリアルタイム保護が干渉する。 – Welcome to TANN’S_blog(中島富男)
春よこい

写真の取り込みと管理が随分楽になったので、ますます春が待ち遠しい今日この頃です(^ω^)冬は嫌いで何撮ったらいいのかわからないほかいどー民がお伝えしました。

2016.01.05

2016 鈍感力 Leap before you look!

あけましておめでとうございます。
はぴぬ。
2016_site
今年も宜しくお願いします。

みなさんいかがお過ごしですか?
餅食ってますか?
餅余ったら揚げてマヨネーズで食いましょう。カロリーの鬼と化しましょう。

さて、毎年恒例今年の目標ですが、毎年ちっとも達成できないので
超抽象的というか概念的にいこうかと。
ちょっと古いですが、

今年は鈍感力を養いたいと思います!

なんかねぇ。私、小心者で小さいことや心配事やどうでもいい事に気を取られて時間を無駄にすることが多いんですよ。
思い立ったことも、いろいろ心配したり頭の中でシュミレートしたりで腰がとにかく重い。
ひどいのなんて、赤玉土ふるうのに袋出してくるところからシミュレートしますからねー。

で、本読んだんですけど、「嫌われる勇気」とかそのへんを。なんか嫌われるとか関係ないような気がしますけど、失敗を恐れる癖がついてるんではないかと。考え方の矯正というか、新しい風を入れようかと思いまして。
最近読んだのがKindleで。
[amazonjs asin=”B012EU8CD0″ locale=”JP” title=”反応しない練習 あらゆる悩みが消えていくブッダの超・合理的な「考え方」 (中経出版)”]

この中に頭の中で考えることはすべて妄想である的な教えがあるんです。
私の心配事なんか特にそうですよ。色々妄想して捗ったりしてるわけです悪い方に。
まあ、本の内容全部そうだ!そうだ!信者になる!とか言うわけではないけど、そういう感じで妄想をやめる訓練をしながら三日坊主で暮らしてましたところ一つの言葉に出会いました。
それが、鈍感力
ええ、大元の渡辺淳一先生の著作は読んでませんが、言葉だけでもいい言葉じゃないですか。
物事を真摯にみる事はとても大事なことだけど、必要以上に大きく考えたりすることはないんです。今できることをやる。お、ここでアドラーにも戻ってきてるじゃんねー。
とにかくサクサクと動こうと思います。Leap before you lookですよ。

あとサボテン多肉植え替えを頑張ります。
これは昨年からちまちまと進んでいるので、コンスタントにやりたい。
余剰苗をオクとかにも出してみたいな。

そんで、やっぱりちょっと痩せたいな。

では、良い一年をお過ごし下さい。
更新頑張りますw

2015.06.07

MAMP じぶんちのApacheでもsvgz

おわっ、MAMPのバージョンだいぶ上がってるしっ!とびっくりしてる今日この頃。
svgはデフォルトでも表示されていたんだけど、svgzはできないなぁ。
ということでちょっと古いMAMPのApacheでsvgzを表示出来るようにしてみました。

httpd.confを編集する

編集するファイルは
アプリケーション→MAMP→conf→apacheフォルダの中にあります。
失敗すると面倒なので、どこかにオリジナルの複製を退避しておきます。

まずmime.typesをテキストエディタなどで開き
image/svg+xml svg svgzの記述があるか確認します。
ありました(^ω^)。svgは表示できていたしね。
そのままそっとmine.typesを閉じます。

次は同じ階層にあるhttpd.confを開きAddEncodingと検索してみます。
<IfModule mime_module>
</IfModule>
の間にコメントアウトのAddEncoding解説行がみつかったけど、svgzの記載は見つかりません。
その下あたりに

を追加します。

mime.typesにimage/svg+xml svg svgzの記載が無い場合はmine.typesではなく、httpd.confに一緒に追加します。

MAMPを再起動、ブラウザも再起動、もしかしたらキャッシュも捨てて、ドキュメントルート内に放り込んだsvgzを表示。
よしっ!(^ω^)

2015.06.03

SVG え?Webでもベクター画像が使えちゃうの?

eye_svg
今更すみません。
Illustratorで作った画像をそのままwebで表示できたらなーと思った事はありませんか?
私は正直その発想なかったんで、いちいちphotoshopで開き直してweb用に書き出ししておりました。
アイコンフォント使おうかなーと思った時に情報としては入ってきてましたが、目がスルー。
なんかこう、もっと七めんどくさくて、小難しくて、そんで、ぐあー重たい死んでしまうとかになるに違いない と思っていたのです。
なぜならアイコンフォント。
ダウンロードとかマークアップとか色々大変そうじゃないですか?
え?大変じゃないんですか?……アイコンフォントはのちのち切羽詰まってから取り入れる事にして、今回はSVG画像です。

IllustratorでSVG形式で保存したら出来るってことで、なんかダウンロードする必要もなさそうだし、物は試しにちょっとやってみました。意外にも使い勝手がよかったので、さっそく本ブログで使うことに。

Illustratorの設定をweb用にカスタマイズ

SVG本題ではないですが、IllustratorでプロファイルでWEBを選び書き始めても、オブジェクトが意図した場所に配置できなかったり、オブジェクト同士がズレて揃わなかったりして結局、紙媒体のプロファイルで作成して、後で縮小かけたりしてサイズを揃えたりした事ないですか?
web用のイラストを書き始める前に、下記のリンクを参考に設定をピクセルベースにカスタマイズをしておくとはかどります。
Illustratorでピクセルが揃わない、滲む、描画がずれるなどの問題が解決されます。スライスもストレスなく扱うことが出来るようになるのでweb素材作りがIllustratorだけで完結してしまうかも、ふひひ。

参考サイト:
IllustratorでWeb向け、ピクセルベースの作業を行う上での設定(完全版) – DTP Transit
SVGのための作画ポイント

アンカーポイントが少ないほど書き出すデータが軽くなるので留意して作成するのがベストです。
鉛筆ツールの余分なポイントを整えたり、前面のオブジェクトで隠れる部分のアンカーポイントを削除したり

隠れるトコのアンカーポイントを削除

隠れるトコのアンカーポイントを削除

不要な部分の方向線を削除したり(可能なら水平か垂直の取れたラインにすると良いようですが…難しい)地道な努力?を重ねます。

方向線をできるだけ削除

不要な方向線をできるだけ削除

パスファインダーを使うと余分なアンカーポイントが沢山できたりするのでオブジェクト→パス→単純化などを使ってアンカーポイントを減らしたり手動で調整。

アートボードのサイズを調整する

アートボードのサイズがsvg画像のサイズとして書き出されます。
web用実寸が決まって無い場合、イラストを作成してから拡大縮小ツールでオブジェクトをリサイズした後、アートボードツールでアートボードのサイズを調整することもできます。小数点以下が出ないようにツールバーやアートボードオプションで調整します。
artbord

仕上げに

コードに書き出されないよう余計な物はとにかく削除、統合、解除します。
レイヤーは一つに統合。
孤立点やガイドラインなどは削除しておきます。
グループも解除。

SVG形式で書き出す

別名で保存か複製を保存のダイアログでプルダウンからsvgを選択します。svgzでは圧縮保存できますが、テキストエディタでコードを手直ししたり、ローカルブラウザで直接開く場合はsvgで保存します。
ダイアログが開くのでsvgの設定をします。
svg_seting
単純な形状なら小数点以下の桁数は1で十分なようです。複雑なオブジェクトでは座標の小数点以下を丸めた事によりズレが生じるので桁数を大きくしますが、その分ファイルサイズが大きくなります。
CSSプロパティはスタイル要素かプレゼンテーション属性。描画によってどちらか軽い方を選んでます。ティーカップのひよこの場合はプレゼン属性の方が軽かった。今回の発芽マメのイラストはスタイル要素の方が軽く、5,573バイトですた。

保存したsvgファイルはxmlなのでテキストエディタなどで開き、余分な要素をさらに削ることができます。意図せず出来てたグループのgタグだとかタブスペースだとか改行だとか。手動でも5,573バイト→5,220バイトにダイエットできました。
この辺は詳しいサイトを参考にしてもらいたいものです。(……力つきた)

参考サイト:
Advent Calendar 3日目:SVG画像を1バイトでも削るためのコードゴルフ – 聴く耳を持たない(片方しか)
簡単にもっと軽くしてしまえ!

しかし、面倒くさい…という私のような人の為に最適化ツールもあります。
今回お試しでSVG Cleaner 0.6.2というのを入れてみました。
ダウンロードしてくるといきなり解凍されているので、アプリフォルダにでも突っ込んで下さい。zipはゴミ箱に入ってます。
起動したらsvgファイルをドラッグドロップするだけです。情報が余り拾えなくてデフォルトの設定のまま直感で使いました。
svcl_dlopドロップするとウィザードが開く。一番左側杖?アイコンでもウザードが開き、ファイルアイコンから選択することも出来る。(フォルダアイコンもあるけどもしかして一括処理もできるのかい?)svcl_witラジオボタン上から、
フォルダを選んで保存
同じフォルダにプレフィックスを付けて保存
上書き保存
おkするとウィザードが閉じます。左上二番目、三角の再生ボタンを押すと最適化が始まります。
svcl_fin終わるとどんだけ削れたか結果が出ます。ファイルはウィザードで設定した場所に保存されてます。
osの情報を見るで確認すると4,649バイトまで削ることができました。ほぼ4.5kb。おお!簡単だ!

れすぽんしぶ

SVG Cleanerでデフォルト設定のまま最適化すると、illustratorで書き出されたwidthとheightの値が削られて(viewBoxの値に置換される)レスポンシブになってます。
ブラウザで直接開くと劣化なく拡大及び縮小されて表示されます。ベクター画像の醍醐味ですな。
width heightの属性を残したい時は、wizard→ optimizations ”convert height and width attribute into viewBox attribute”のチェックを外して下さい。
書き遅れましたが当方CS6を使っているのでillustratorのsvgの設定にレスポンシブっていうのは無いんで、SVG Cleaner使うと便利でいいです。
SVG Cleanerを使わない場合でも、エディタで<svg>タグの中のwidthとheightの属性を削ってしまえばレスポンシブとなります。
大きさは親要素の属性かcssで制御します。

とりあえず手軽な使い方…画像ファイルと同じ〜

とりあえずsvgファイルが出来たので初めてのsvgはcssで使ってみました。h6の小見出しで使っているカップに入ったヒヨコがそうです。あっ、Mobile用はまだ設定してなかた。

CSSでは

cssでは単純にurlにsvgファイルを指定するだけどす。

HTMLでは

こちらもsrcに指定するだけどす

または

コードを直接インラインに書き込んでも行けます。

サーバにも教えてあげて

svgにはだいたいのサーバで対応していると思いますが、圧縮版のsvgzに対応してない場合があるようです。
最上部のディレクトリの”.htaccess”にMIMEタイプを追加します。

圧縮型式のsvgzにしてみた

illustratorでsvgzで保存し、SVG Cleanerで最適化したら1,903バイトになりました。

illustrator書き出し5.4kb
コード手動削減5.1kb
書き出してそのままSVG Cleanerで最適化4.5kb
svgzで書き出してSVG Cleanerで最適化1.9kb

とsvgz形式で書き出してSVG Cleanerで最適化すると凄くちっちゃくなるのですが、svgzは手軽に確認出来なくてちょっと敷居が高いような気がします。
file://プロトコルにはMIMEタイプが付かないので、ローカルのブラウザではエラーで表示できないのですな。
MAMPのApacheのhttpd.confにhtaccessと同じAddTypeの記述をしてドキュメントルートに突っ込めばいいと思うので今後のために後でやってみようと思います。(記事書きました:MAMP じぶんちのApacheでもsvg)しかし表示できるか出来ないかの確認なので、制作上は問題ないかなと。ぶっつけ本番でアップするような気がします。

最後にsvgzで保存した豆のイラスト

svgzの豆
豆のイラストsvgzを「さわやかまみれ」に置いてみました(^ω^)よろしかったら、ブラウザをのばしたり、縮めたりして見て下さい。

iphoneでは上下にすごいスペースが取られてしまうかもしれません。
htmlに<object>で埋め込みました。iphone用豆

2015.04.11

css3で吹き出し作って、疑似要素がz-indexでどっか行っちゃうの直す

当ブログでは長年?画像で吹き出しを表現していたのですが、retina対応をした時に画像のぼけ具合が気になり出しました。cssで表現出来る部品はなるべくそっちにシフトしたいなーということで!
webでは吹き出しを作るための便利なジェネレーターや沢山の優れたリファレンスが公開されますが、勉強がてら自分なりにまとめてみることにしました。

まずは構成から

どうしてもcssの行数が長ーくなるのが欠点ですな…。それでも画像の方が重いんだろうと気を取り直してやってみます。
疑似要素のbefore afterを使って吹き出し部分を表現します。
ボーダーのある吹き出しにしてみる。

たのしい毒矢入門を読んだんだ。

部品となるのは、

  • 本体の要素p 内容とbackgroundカラーとborder
  • beforeによる前の要素 吹き出しの三角部分(pのボーダー色と同色)
  • afterによる後の要素 吹き出しの三角部分(pのbackgroundと同色)

beforeとafterで三角を作り、二つの三角形の重なりをずらしてボーダーを表現します。
ボーダーが要らなければ、beforeだけでできます。

ベースのp要素にbefore afterの疑似要素を追加する。

たのしい毒矢入門を読んだんだ。

その前に三角の作り方

div#deltaを作り練習してみる。

上下左右はそれぞれ極端に太さをとったボーダー。辺の端っこが斜めになってて隣の辺と合体してるのが分かります。

あ?

widthとheightを0にすることで三角ができる。

残したい辺以外のborder-colorを透明にする。

ボーダーの太さborder-widthを変えることで三角形の角度や長さが調整できる。

これをpのbeforeとafterに応用します。

位置を調整する

三角形は出来たけど、へんな場所にあるのよね。
(解りやすいように三角を赤に変えた)

たのしい毒矢入門を読んだんだ。

beforeとafterの疑似要素をposition: relative;指定のp要素を起点として配置。bottomなどにマイナス値を使って外側に出します。

afterの三角の位置を上側に数pxずらして、下になっているボーダーカラーと同色にしたbeforeの三角をチラ見せしてボーダーを表現する。

たのしい毒矢入門を読んだんだ。

おお!できたよね!

こんなこともできちゃう…はずだった

beforeとafterの配置をうまく使うとカーブの付いた吹き出しも出来るよね。

えっ?毒矢?なにそれこわい。

疑似要素でbeforeとafterで吹き出しと同じ色の円と背景と同じ色の円を重ねてぴよっとした部分を作り、疑似要素の親のdivの後ろへz-index:-1で送る事で実現しています。

z-index:-1が効かないんだ

実は↑このままのソースでは当ブログでは、疑似要素部分がこつ然と姿を消してしまいます。
z-indexが効いてないんじゃなく凄い下の重なりレベルまで潜っていっちゃってて、間にある要素のbackgroundで隠れてちゃってる模様…かといってz-indexの値を大きくしても解決しないわー。
スタックコンテキストとやらを新たに作ることで回避できます。

参考サイト:
CSS3 時代の z-index まとめ | Design Hack and Slash
要素の重なりについて本気出して考えてみた(z-indexとか何とかとか) – No.1026

スタックコンテキストというのはどうも複雑で詳しくは勉強させてもらたブログを見て頂くとして、とりあえずは簡単に

  • スタックレベル レイヤー(重なり)の順番
  • スタックコンテキスト その範囲でだけレイヤーを入れ替えられる結界

だとでも思ってください。

疑似要素を親要素である#ringの下に重ねるには?

疑似要素の親は疑似要素をセットした要素になります。この場合は#ringです。
#ringの直接の親、または新たにdivかなんかでラップして作った#ringの親要素=疑似要素からみて先祖要素(じぃちゃん)を用意します。

この先祖要素(じぃちゃん)を基準とした結界を作ることで、どっかに潜っていった子(疑似要素で作った吹き出し)を親(楕円)と同じ次元に呼び戻し、楕円のすぐ下に配置します。

スタックコンテキストを作るには先祖要素にstatic以外のpositionをセットします。
この場合rerativが適当かと思われます。
positionでz-indexを明示しない場合、autoが割当てられるのですが、autoは0と同じレベルです。しかし、autoはスタッキングコンテキストを作り出しません。
スタッキングコンテキストを作り出すには、z-indexでスタックレベルを明確に0と指定します。他のスタックコンテキストに影響しないなら0でなくとも整数値であれば良いです。

なぜ親がz-index:0ではだめなのさ?

z-index
親のz-indexに0や整数値を指定してしまうと、親を基準としたスタックコンテキストが新たに生まれます。
スタックレベルは所属するスタックコンテキスト内でのみ有効なので、親の下に移動する事が出来なくなります。
子要素である疑似要素のz-index:-1はあくまで親内部でのスタックレベルとなります。
親のz-indexは、一段階外側のスタックコンテキスト内でのスタックレベルを指しているので、親が基準の場合、親と子の重なり順が変更されることがありません。

そんで先祖要素を基準としたスタックコンテキストを作り、親を含めたスタックレベルを設定するわけです。

じぃちゃんを基準としたスタックコンテキストの中では次のように扱われます。
z-index_jj
じぃちゃん(外側の結界であるため内側のレベルに関与しない 0は外側の世界でのレベル)
親(z-index:auto = デフォルト0)
子after(z-index = -1)
子before(z-index =-1 マークアップ順)

意識の片隅に…スタックコンテキスト

この現象はhtml基準のルートスタックコンテキストしか存在しなかったことが原因です。
index:-1でルートの最下層に配置されてしまい、その上にbackgroundが設定された要素がガンガン乗っかっていたのでマスクされてしまいました。
間にある要素にbackgroundが設定されてなければ疑似要素は表示されます。
もし、positionとbackgroundを多用しているなら、ちょっとややこしいけどスタックコンテキストを意識してみるとレイアウトの自由度が上がるような気がします。

PageTop