グラビカ学習帳～四谷のホームページ制作会社 gravity works（グラビティ・ワークス）備忘録と知識の共有と蓄積

外部から読み込んだPSDの更新ができればと思うことは多々ありましたが、Photoshop CCの直近のアップデートで『スマートオブジェクトのリンク（Linked Smart Objects）』が搭載されました。

http://www.youtube.com/watch?v=H6AIgoFDwlk

手元のphotoshopはまだCS6なので残念！なのですが、同様の機能をもたせるエクステンションがずいぶん以前から存在していたようです。不勉強でした...。

http://www.canlinkit.com/

このエクステンションをPhotoshopにインストールすると「CantLinkItパネル」から外部PSDの配置と更新の操作が可能になります。
更新時の挙動に特に違和感はなく、修正を素直に反映します。

• 外部PSDをメインPSDに配置後、拡大縮小回転させた上で更新しても当然その状態は保たれる。
• 外部PSDのサイズを変更した場合、オブジェクトの中心を起点に拡大縮小が反映される。

純正で搭載された今となってはCCで作業した方がいろいろ安心でしょうけど、CS6でこの手の作業がほしいときには良いかもですね。

select要素へのスタイルってFirefoxでは完全には効かないんですよね。
どうやってもデフォルトの▼が表示されてしまいやがります。
これはPCのFirefoxだけでなく、Android版Firefoxでも同じ。
-moz-appearance: none;
などと指定してもダメです、消えません。

この頑固な汚れはどうしようもないのかしら？
と思ってGoogle先生に訊ねてみると、
いくつかのForm装飾系jQueryプラグインに混じって
こんな記事が見つかりました。

CSS3でセレクトボックスをカスタマイズ

選択ボタンに見せかけたダミーのdiv要素の上に、
透過させたモノホンのselect要素を置くというもの。
そして選択した文字列はjsを通してダミー側に反映されます。
この非常にシンプルな構造のおかげで、
スマホや他のブラウザでも問題なく表示されます。
アイデアの勝利ですね、これは。

というかどうにかしてください、Firefoxさん。

googleアナリティクスは解析用のコードをページに埋め込む形式のため、
外部サイトへのリンクについては計測することができません。

その場合、解析タグを設置するのと合わせて、
<a>タグにonclickで次のようなコードを仕込むことで
クリックを計測することができるようになります。

---------------------------------------------------------------------------------------

<a href="xxx.html" onclick="javascript:_gaq.push(['_trackPageview', '仮想URL']);">

---------------------------------------------------------------------------------------

-- 2013/7/16 追記 --
上記の他に、下記のような記述の仕方もありました。
---------------------------------------------------------------------------------------

<a href="xxx.html" onclick="javascript:_gaq.push(['_trackEvent', '仮想URL']);">

---------------------------------------------------------------------------------------

_trackPageview と _trackEvent の違いになります。

_trackPageview は仮想ページビューを使う方法で、サイト全体のページビューも増えます。
_trackEvent はイベントトラッキングを使うので他の計測結果には影響しません。

基本的には外部サイトヘのリンクに設置するものですので、_trackEvent のほうが良さそうです。
逆にPDFなどへのリンクに仕込む場合は _trackPageview が良さそうですね。

-- 追記ここまで --

外部サイトへのリンクと書きましたが、
解析コードを仕込めない画像やPDFへのリンクも計測できるため
使いどころはいろいろとありそうです。

ちなみに、解析コードのバージョンによって記述が違うようで、
上記の記述が使えるのは↓のような非同期型の場合になります。

---------------------------------------------------------------------------------------
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXXX-X']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
---------------------------------------------------------------------------------------

MacでDreamweaverを使用してhtmlファイルを制作している場合
デフォルトでは改行コードは「Mac（CR）」になっています。
ブラウザでの表示にはMacでもWindowsでも問題はありません。
が、Windowsでブラウザ上ソースを確認する場合、
改行が全てとれてしまい、ものすごく確認しづらい事になってしまいます。

Macで制作しているんだから仕方ないと思っていましたが、
Dreamweaverの設定で、「CRLF（Windows）」を選んでおくことができます。

【設定場所】
メニューの「Dreamweaver」から「環境設定」を選択
出てきたウィンドウの左から「コードフォーマット」を選ぶ
改行タイプというところからドロップダウンで選ぶ

PhotoshopでWeb用に画像を書き出す場合、
デフォルトでは、スライスの設定をしていると「images」に書き出されます。
弊社では「images」ではなく「img」を使用する場合が多いため、
フォルダ名を修正していました。

が、この書き出しの際の設定が下記の手順で簡単に出来ます。

【1】書き出しのダイアログ左上のボタンをクリック




【2】メニューが出てくるので最下部の「出力設定の編集...」を選択




【3】出力設定のダイアログが出たら
（1）のドロップダウンメニューで「ファイルの保存」を選択
「images」を「img」に変更したい場合は（2）で設定。
チェックを外せばフォルダに書き出さないように出来ます。