ずっと目星を付けていたKindle本が50%OFFセール（2017年7月11日(火) まで）だったので3冊も衝動買いしてしましました。
- 「なるほどデザイン」が55%オフで972円
- 「Gitが、おもしろいほどわかる基本の使い方33」が55%オフで972円
- 「Photoshop ＆ Illustratorでつくる手描き感デザイン」が60%オフで999円
サーキュレーターを購入
仕事部屋がパソコンの熱とムシムシした気候で暑くて暑くてたまらなかったので、サーキュレーターを購入しました。
購入の決め手は、おしゃれなのと省エネタイプでした。
消費電力は（50Hz／60Hz）約18Wで他のサーキュレーターより優れていました。
メーカーホームページ
Amazon
CSS Nite in OSAKA, Vol.43「Reboot Dreamweaver」に行ってきました。
2017年5月13日（土）にCSS Nite in OSAKA, Vol.43「Reboot Dreamweaver」に行ってきました。
Dreamweaver20周年おめでとうございます～。
私はDwを使い始めたのは2002年頃からでした。
Studio MXのStudent版を初めて購入してDwを堪能しておりました。
一言コメント
【1】温故知新：DreamweaverとWeb制作シーンの20年を振り返る
Web制作の過去を振り返りながら、Dwの歴史が学べました。
【2】Dreamweaverのコードエディター機能を進化させたBrackets
- Zen CodingがEmmetにリネームされたらしい。
- DMXzone Extension Managerで「Emmet」の機能拡張を入れる。
【3】Dreamweaverで高速・楽々マークアップ
デザインビューでコーディングが無茶苦茶早くて目からウロコでした！！
昔「CSS Nite in Osaka 2007 春の陣」のイベントで「Dreamweaverデザインビューの徹底活用」セッションで
デザインビューのお話を聞いた時も目からウロコしていました！！
【4】忘れがち、実は使えていない Dreamweaverの便利機能
ライブラリ・テンプレート機能をあまり使わなくなり、やり方を忘れておりましたので、思い出しました！！
「検索・置換」ショートカット
- ファイルが開かれている時・・・[Ctrl（Cmd）]+[F]
- ファイルが開かれていない時・・・[Ctrl（Cmd）]+[Shift]+[F]
【5】いまどきのPhotoshopとDreamweaverとの連携
Web用のデザインデータ（主にPhotoshop）のきれいな作り方やDwとの連携のお話でした。
「Webデザイン必携。」の書籍をアマゾンで購入したので復習しようと思います。
【6】チームで使える！ ワークフローに効くDreamweaver+Bootstrap
ワイヤーフレームをBootstrapで作ってみてはどうかという内容のお話でした。
ライブビューで「挿入パネル」と「DOMパネル」のみで作成できそうなので、やってみたいと思いました。
【7】DreamweaverでSassを使うための勘所
DwのSassはかなり実用的になってきたので、これから私自身もSassを利用してコーディングしようと思いました。
【8】Dreamweaverに追加予定の機能と開発チームへの機能要望の出し方
次期DwにGit（ギット）が搭載予定らしいので、Gitを勉強しようと思いました。
【Animate CC】時間帯によって背景を変更
案件の検証でAnimate CCのHTML5 Canvasで時間帯によって3パターンの背景を変更出来るか検証してみました。
まずは、サンプルをご覧ください。
3パターンの背景を用意
■daytime：5時〜15時台の場合
■evening：16時〜18時台の場合
■night：19時〜4時台の場合
Animate CCの中身
1フレーム目の【as】のレイヤーにアクションスクリプトを記入しました。
daytime：5時〜15時台の場合はgotoAndStopで【daytime】ラベル名（2フレーム目）に飛ばしています。
evening：16時〜18時台の場合はgotoAndStopで【evening】ラベル名（3フレーム目）に飛ばしています。
night：19時〜4時台の場合はgotoAndStopで【night】ラベル名（4フレーム目）に飛ばしています。
Flaファイルデータ
bg-change.zip（17KB）
※Animate CC 2017で制作
WordPressプラグイン「Nelio External Featured Image」
アイキャッチ画像を外部URLにする案件があり、WordPressプラグイン「Nelio External Featured Image」を利用しました。
プラグインのインストール
［プラグイン］→［新規追加］の検索フォームより「Nelio External Featured Image」を検索し、「今すぐインストール」をボタンをクリック。インストールが終わったら「有効化」ボタンをクリック。
各投稿のアイキャッチ画像を外部画像化
各投稿でアイキャッチ画像に使用したい画像を右クリックし（windowsの場合、Macの場合はCtrl＋クリック）、画像URLをコピーして、投稿管理画面右下の「External Featured Image」にURLをペーストするのみです。
CSSの設定
スペーサーgif画像に背景画像として表示される仕様で案件自体がレスポンシブデザインのサイトだったので
img.nelioefi {
width: 100% !important;
height: 100% !important;
}として正方形でアイキャッチ画像を表示するようにしました。
気になる点
管理画面上部に警告文が表示されます。
2度目の開業で思うこと
2010年から5年程フリーランスとして活動していました。
再就職できるのも年齢的に最後かと思い、勢いで制作会社に応募しました。
再就職先が決まってからは、今までお付き合いしてきたお客様や同業者様に廃業の連絡を入れたり、同業者に引き継ぎをお願いしたりしました。
再就職先ではディレクターとして入社しましたが、ディレクション能力がなかったのであまり会社のお役に立てなかったと思います。
会社に慣れて数ヶ月が経った時、もう一度自分で制作がしたいって気持ちが湧いてきて約8か月で退職して、再び2016年5月からフリーランスとして2度目のスタートを開始しました。
廃業で失ったお客様や同業者様もいますが、
新しいクライアントを開拓して以前よりパワーアップしたいと思います。
年齢を理由にして安易に行動することは、自らの成長を止めていたと反省しています。
来年と再来年と継続できるように頑張っていきたいと思います。
「EditorConfig」でテキストエディタの設定を統一！
インデントや改行コードの設定を統一できる「EditorConfig」というプラグインのご紹介。
複数人でコーディングを進めていると、インデントがそれぞれ違ったりして、統一できないので、このプラグインを入れて設定ファイルを渡してあげるだけで、全員が同じ規約で書くことができます。
対応エディタ
対応エディタは他にもたくさんありますが、代表的なエディタは Sublime Text, Vim, Emacs, ATOM, Brackets, PhpStorm あたりはサポートされているようです。
余談
CSS Niteコーダー白書2016_シェア.keyのP32のアンケート結果によると、タブ派が1位だったそうです。
僕もタブ派ですが、Google推奨が2スペースらしいのでどうしようか悩ましいですね！
※詳しくはGoogleが公開したコーディングガイドラインの「Indentation」の参照お願いします。
PA-W1200EX（Wi-Fi中継機）を購入
我が家は鉄筋コンクリート住宅で違う部屋に行くと無線LANの電波が届かないので、困っていました。
親機は「Aterm WR9500N（HPモデル）」を持っていたので、
色々調べたら「PA-W1200EX（Wi-Fi中継機）」があるのを知り、購入しました。
電波の弱い部屋に中継機を繋げたら、快適に繋がりました！！
Amazon
初めてカラーミーショップのカスタマイズを行いました
カラーミーショップ案件のコーディングを初めて行って色々勉強になったのでメモしておきます。
トップページのみ表示する場合（条件分岐）
<{if $tpl_name == "top"}>
<p>トップページの場合</p>
<{else}>
<p>トップページ以外の場合</p>
<{/if}>その他の条件分岐は、下記サイトが参考になります。
http://theorthodoxworks.com/color-me-shop/conditional-branch/
商品説明文を分割して表示する場合
商品説明文は1つしかないので、2つに分割する場合は下記のようにします。
<{* 商品説明文分割用 *}>
<script type="text/javascript">// <![CDATA[
$(function() {
var $productExplain = $('#product_explain');
if ($productExplain.find('div').size() > 0) {
$('#exp-1-view').html($('#exp-1').html());
$('#exp-2-view').html($('#exp-2').html());
$productExplain.hide();
}
});
// ]]></script>
<div id="product_explain">
<{$product.explain}>
</div>
<{* 商品説明１ *}>
<div id="exp-1-view"></div>
<{* 商品説明２ *}>
<div id="exp-2-view"></div>
詳しくは、下記サイトが参考になります。
https://github.com/pepabo-unchi/custom/issues/5
カラーミーショップのカスタマイズは後何回かやってみたいので、
ご依頼お待ちしています〜！
ChromeデベロッパーツールでホバーしたCSSの確認方法
ChromeデベロッパーツールでホバーしたCSSの確認の仕方をいつも忘れるので、ブログに書いて忘れないようにします。
右クリックで「検証」をクリックします。
aタグを右クリックして「:hover」をクリックします。
ホバーしたCSSが確認できました。