投稿日:

Kindle本50%OFFセールで3冊購入

ずっと目星を付けていたKindle本が50%OFFセール（2017年7月11日(火) まで）だったので3冊も衝動買いしてしましました。

Amazon

なるほどデザイン
Gitが、おもしろいほどわかる基本の使い方33
Photoshop ＆ Illustratorでつくる手描き感デザイン
投稿日:

サーキュレーターを購入

仕事部屋がパソコンの熱とムシムシした気候で暑くて暑くてたまらなかったので、サーキュレーターを購入しました。

購入の決め手は、おしゃれなのと省エネタイプでした。
消費電力は（50Hz／60Hz）約18Wで他のサーキュレーターより優れていました。

メーカーホームページ

360度回転DCサーキュレーター FCS-194D

Amazon

ドウシシャ サーキュレーター 360°回転 ピエリア 19cm アイボリー FCS-194D IV
投稿日:

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デザイン必携。」の書籍をアマゾンで購入したので復習しようと思います。

Webデザイン必携。 プロにまなぶ現場の制作ルール84

【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位だったそうです。

CSS Niteコーダー白書2016
画像：CSS Niteコーダー白書2016_シェア.keyのP32をスクリーンショットしたものです。

僕もタブ派ですが、Google推奨が2スペースらしいのでどうしようか悩ましいですね！
※詳しくはGoogleが公開したコーディングガイドラインの「Indentation」の参照お願いします。

投稿日:

PA-W1200EX（Wi-Fi中継機）を購入

我が家は鉄筋コンクリート住宅で違う部屋に行くと無線LANの電波が届かないので、困っていました。

親機は「Aterm WR9500N（HPモデル）」を持っていたので、
色々調べたら「PA-W1200EX（Wi-Fi中継機）」があるのを知り、購入しました。

PA-W1200EX（Wi-Fi中継機）

電波の弱い部屋に中継機を繋げたら、快適に繋がりました！！

Amazon

NECパーソナルコンピュータ Aterm W1200EX PA-W1200EX
投稿日:

初めてカラーミーショップのカスタマイズを行いました

カラーミーショップ案件のコーディングを初めて行って色々勉強になったのでメモしておきます。

トップページのみ表示する場合（条件分岐）

<{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

カラーミーショップのカスタマイズは後何回かやってみたいので、
ご依頼お待ちしています〜！