2013年12月12日木曜日

IE10から出るようになった、inputフォームの文字を消す×印を消す

IE10からだと思うんですが、フォームに文字を入力すると削除できる×印が出るようになりました。
便利なんだけど、邪魔なときもある。

消すにはブラウザのプレフィックス付きのcssで制御するということです。
同じように、パスワードを一瞬見えるようにする目のアイコンも非表示にできます。

◆クリアーボタン?×印のやつ
.hogehoge input::-ms-clear{
visibility:hidden
}

◆リビールボタン?目の印のやつ
.hogehoge input::-ms-reveal {
    visibility:hidden
}

2013年12月9日月曜日

GoogleAnalyticsにIE11が出てこない?

表題の通り、GoogleAnalytics上でInternet Explorer11がIEとしてカウントされていないみたい(2013年12月9日現在)です。

公開されてから、ずっとゼロって、ありえるのかなー。と不思議には思っていました。
いやでも、まだ世間はそんなに関心が無いし、ウチのサイトに来るユーザーはまだIE6とか多いし、そういう事もあるのかも?とも思うし。

が、先日放置気味のタブレットPCをWindows8.1にバージョンアップし同時にIE11になったのでかなり確認に使用していたのですが、やっぱり出てこない。

これはおかしいと思って色々確認&調べていたら、GoogleAnalyticsでIE11はMozillaブラウザのVersion11.0として認識されている事が判明しました(たぶん、きっと。)

図のように、ユーザーの環境(Mozilla ブラウザ Version 11.0)として出ている雰囲気です。
IE11が公開されたのは2013年10月17日(日本時間)なのでちょうどその頃ですしね。バージョンも11、ですし。

これはGoogle様が対処してくれるのを待つしかないですね。
でももうけっこう日が経ってるのにな。いつかな…

GoogleAnalytics、IE11がMozillaとしてカウントされる不具合
GoogleAnalytics、IE11がMozillaとしてカウントされる不具合

2014年1月17日追記:

いつのまにか、Internet Explorer11もちゃんとIEとしてカウントされるようになっていました。
カウントが突然増加しているのが、2013年12月18日。
この日以降、正しくカウントされてるんじゃないでしょうか。

GoogleAnalytics、IE11が正しくカウントされるようになった様子
GoogleAnalytics、IE11が正しくカウントされるようになった様子

2013年11月14日木曜日

スライスとオブジェクトを同時に移動できない:Photoshopの不便なところ

別の場所にシェイプなどを移動したい時、スライスと一緒に選択して移動することができない。

サイトで使用するボタンやアイコンなどを書き出すために、まとめて1個のファイルに置いているんですが、場所が手狭になってきたり、やっぱりこれは背景を透明にしておこうと思った時に別の位置に移動したいんですが、1回で移動できない。


  1. シェイプを選択ツールで選択し移動
  2. スライスをスライス選択ツールで選択し移動
  3. 拡大してシェイプとスライスの場所を細かく合わせ直す←これが面倒すぎ!

なんというバカバカしさ。それともカンタンに同時に移動できる方法があるのかな…

Fireworksだと画像もベクトルもスライスも全部同じもののように扱われるので、選択ツールでまとめて移動、削除ができます。

てかなんでできないの?ひと通り使ってみたら、あたりまえに必要な機能だから追加しようって思うはずなのに。テスターいないのか。
というか機能というほどのものでもないし。

※文だとあまりわかりづらいのであとでいつか説明画像添付予定。たぶん。

◆Adobe様への要望
スライスとシェイプを同時に選択して、削除・移動できるようにしてください。

2013年11月7日木曜日

ファイルサイズがでかくなりがち:Photoshopの不便なところ

サンプルはほぼ同じものをPhotoshopとFireworksで作ったもの。
ファイルのサイズは

Fireworks:  716 KB
Photoshop:1,136 KB

これくらいの内容のファイルだとこの程度の差ですが(といっても1.5倍くらい大きい)パーツが増えてくるうちに差がどんどん開き、通常サイトラフ1ページFireworksで2~3MBくらいで収まっていたのが、同じようなものを作ってもPhotoshopだと15~20MBくらいかるく行きます。

もちろん、突然に複雑で美麗で繊細なタッチのサイトを作れるようになったセンスが付いたわけではありません…

Photoshopはファイルサイズなどにはまったくこだわっていないんだと思いますが、もうちょっとできたら小さいといいんですけどねー。
HDDがどんどん減りまくり。

まぁでもいくら大きくなってもPhotoshopはあまり心配ないのがいいかな。
Fireworksで15MBのファイルなんか怖くて扱えない。絶対保存時にファイル壊れて保存できなかったり、二度と開けない可能性大… → 関連:Fireworksの内部エラー

↓画像サンプル といっても、pngで保存し直したものだしこれ自体には意味ありませんが。
Photoshopで作成したもの(1,136KB)
Fireworksで作成したもの(716KB)

2013年10月29日火曜日

たくさん物置いてもファイルが壊れない:Photoshopのいいところ(対比:Fireworks)

Photoshopの悪いところばっかり見つけてもアレなので、いいところも書こうと思う。

ちなみにもともとはPhotoshop好きだし、Photoshopがダメなんかぜんぜん思ってません。
さらっとカンタンにWeb用パーツとか作ったりするのはFireworksの方がイイ!ということなだけです。
Photoshopは何でもできちゃうんです。たぶん。だからこそ、ほーんのちょっとしたことをやるのにも手順が多くなったりしがちです。
カンタンな事はカンタン操作でできるように機能追加してくれないかなー。


で、ここから今回の本題。

Photoshopはたくさん字や画像やベクトルパーツを置いても、ファイルサイズが何十MB、何百MBになっても特に問題なく開いて操作して保存できて、後でまた何事もなく開いて作業できます。(もちろんある程度PCスペック必要ですけど)

対してFireworks
お使いの方は絶対一度は体験していることだと思いますが、字やパーツをたくさん置いて作業していると、いつの間にか操作がガクガクしてくる、レイヤーなど各パネルの表示がおかしくなってくる。
よくわからないダイアログ(操作が完了できませんでした など)が出だす。

そして極めつけは、「内部エラーが発生しました。」連続ダイアログが出て保存さえできなくなります。(対策としてヒストリー消すとか、レイヤーを全て非表示に一時的にするとか、そんなの聞きますが、ほとんどの場合効果なし。

そしてそういう問題がなく保存できた場合でも、次に開くとまったくファイルが開けなくなる現象も多数。
以下のような時、そのような内部エラーが出る確率が上がるような気がします。

  1. ファイルサイズが大きくなる(数MBでも)
  2. パーツ(特にパスが多いベクトルパーツ)をたくさん置き過ぎる
でもちょっとページのラフ作るだけでも結構パーツ必要だから無理…

Fireworksの内部エラーに対抗する対策としては

  1. いらないパーツはこまめに消す。
  2. 早めに保存。
  3. 名前を変えてファイルの履歴を残しておく。

Fireworksの「内部エラーが発生しました。」あーもうこの表示大嫌い。内部エラーってなんだよ。自分でどうにかしろよ。なんの解決の糸口も掴めないエラー表示ほどムカつくものはありません。

2013年10月23日水曜日

シェイプがコピー&ペーストで複製できない:Photoshopの不便なところ


シェイプを移動ツールで選択してコピー→別のファイルを開いてそこにペーストという簡単な動作ができない。

  1. 目的のシェイプを移動ツールで選択
  2. レイヤーのとこで右クリック(またはメニューのレイヤーから)レイヤーの複製を選ぶ
  3. 保存先-ドキュメント でペーストしたいファイル選ぶ

というなんだか面倒な手順が必要。
Fireworksみたいに普通にコピーペーストできればいいのに。
(ちなみに、「パスコンポーネント選択ツール」で選択してコピペ、はできるけど、パスだけがペーストされる。シェイプでなく。これはこれで使うとは思うけどさー)

同一ファイル内ならAltキー+ドラッグで複製できるからまぁいいけど、シェイプでちょっとした三角アイコンとかつくって別でも使いたい時、ちょっと面倒。

せめてシェイプ右クリックで複製が選べればいいのに。

なんとかしてほしいPhotoshop。

塗りの無い部分も選択できてしまう:Photoshopの不便なところ

枠だけで塗りの無いシェイプ(四角の枠だけのパーツ)を作って、その中に別のシェイプがいくつかある状態。
その時、外側の枠は選択せずに、中のパーツ群を選択したくてもできない。
塗りがないから空欄の状態になっているかとおもいきや、枠だけでもそこが選択できてしまうので、結局外側の枠だけ動いてしまう。

青枠の塗りは無しになっている。
赤と緑だけを選択したいので、青枠の空欄(塗りなし部分)から移動ツールで囲い始めて目的の2個をまとめて囲いたいが…(PhotoshopCC)
実際には塗りなしでも白い部分は青枠として認識しているので、結局青枠だけ選択されて移動してしまう。
移動ツールでは塗りなし部分は透明として扱って欲しい(PhotoshopCC)


Fireworksだと、塗りがなかったら選択対象は枠の部分のみで内部は選択対象にならないから、中の選択ができてラクなのに。
というかそれが自然な動作だと思うんだけどなー。

今は仕方ないので全部を囲って青枠を改めて選択からはずすという面倒な作業。
例みたいな簡単な物ならそれでもいいのですが、通常は複雑な構造になっていることが多いのでそれも難しい状態です。

なんとかしてほしいPhotoshop。

「ビッグ・ファット・キャットの世界一簡単な英語の本」その後

いちおう読み終わりました。

たしかに、英文が書いてあっても普通に読めます。たぶん、中学1年英語が怪しいくらいレベルでもなんとかなる感じです。
全体的に基本的な文章のみで構成されていて、難しい単語には和訳が書いてあるのでなんとなく読めます。
またイラストで想像もできるし、短いブロックごとにくぎって少しづつ説明が書いてあるので段階的に慣れて行ける感じです。

後半はだんだん英文ブロックが長くなっていきますが、それでもギリついていける感じでした。

あと重要なのは読み飛ばしですね。たまーに変わった形式の文が出てくるのですが、最初は飛ばしてあとでまた戻って周囲を読んだりしながらなんども読み返すとなんとなく理解できるようになる感じです(すごくぼんやりとですが)

これを繰り返すのがいいのかなーと思います。

次の巻に行くか、もう1回くらいよむか迷い中・・・

2013年10月8日火曜日

DreamWeaverで非登録の拡張子のファイルを無理やりデザインビューで見られるようにする。

DreamWeaverで、htmlなど以外の拡張子のファイル(例えば*.ctpなど)を開くと、コードビューでしか開けない。
拡張子が変なのであっても、無理やりデザインビューで見たい時ありますよね。ですよね?

そういう時は、開くファイルのタイプを指定してあげます。設定ファイルは直接エディタで編集しないといけません。
間違えると起動できなくなったりするので、必ずバックアップを取りましょう。

************************

・MMDocumentTypes.xmlファイルをエディタで開きます。
場所は、DreamWeaver設定ファイルの辺(Windows7の場合、C:\Users\ユーザー名\AppData\Roaming\Adobe\Dreamweaver CC\ja_JP\Configuration\DocumentTypes)

・ファイルの最初の方に、htmlぽく開くように指定する拡張子を書く部分があるので、2ヶ所に書きます。
「internaltype」と「macfileextension」の所

↓記入例
<documenttype id="HTML" internaltype="HTML" winfileextension="html,htm,shtml,shtm,stm,tpl,lasso,xhtml,ctp" macfileextension="html,htm,shtml,shtm,tpl,lasso,xhtml,ssi,ctp" file="Default.html" writebyteordermark="false" mimetype="text/html">


・DreamWeaverを再起動
・デザインビューで見られるようになったはず。

************************

これ、普通にアプリケーション内の環境設定で追加できるようにすればいいのに。
システムを構成しているようなファイルって色々拡張子あるし、オリジナルで作っちゃうエンジニアもいて(やめてほしいけど)そういう時にぱっと対応できるといいな。
エディタで環境ファイルを手動で修正ってなんか間違えそうでやっぱり怖い。

2013年10月7日月曜日

シェイプ描画したレイヤーロックしているのに複製できてしまう:Photoshopの不便なところ

シェイプツールをロックしておき、もう触りたくないのに、パス選択ツールでは選択できてしまう。
その上、移動ツールで複製もできてしまうので邪魔。
ロックしてるんだから一切触れないようにするのが普通だと思うのに、なんだこの挙動。

例の画像は極端だけど、周りの青い枠はロックして最上位に配置。
その下にある緑の四角を複製したくて操作(Altキー押しながら緑四角レイヤーをドラッグ)すると、移動はしないけど、上位にあるロックしてる青い枠が選択されて複製されてしまう。
なので目的の緑四角レイヤーはどうやってもドラッグ複製ができない。

ロックしてるのにパス選択ツールで選択できて下のレイヤーが選択できない(PhotoshopCC)


ロックしてるのに移動ツールで複製できてしまう(PhotoshopCC)


選択ツールの「自動選択」のチェックをはずしてからやれば。とかいう人がいますが、そんな毎回チェックつけたり外したり、使い勝手が悪すぎます。

そもそも、「ロック」しているレイヤーが選択されたり複製されてしまう方がどう考えても問題ですね。

レイヤーをまとめる方法が1つしか無い:Photoshopの不便なところ

レイヤーをまとめておきたい時、IllustratorやFireworksだと、「フォルダ」と「グループ」の2つの方法があるが、Photoshopでは、「グループ」しかない。(でもそのレイヤーまとめの見た目はフォルダのように表示される)

部位で単に大まかに分けておきたい時(ヘッダー、サイドメニューなど)は「フォルダ」を使って、基本的には1個の部品としてまとめておきたい時(ボタン背景と文字とアイコンなどのセット)は「グループ」にしておきたいのに、そういう使い方がしにくい。

せめてこういう場所の挙動はIllustratorと同じにすればいいのに。

2013年10月2日水曜日

テーブルセルの高さの最小値を指定したい

テーブルのセルが行全部中身空の場合(1行すべて<td></td>の状態)
この時、高さが無くなって、くっついてしまう。


min-heightを入れてもテーブルセルには効かないし。
とりあえず人から聞いた対策をやってみる。

見えない高さだけのある物体をセル内に入れるんですね。

.td_minHeight td:first-child:before {
display: block;
float: left;
height: 16px;
content: "";
}


min-heightや:before が効かない古いブラウザにはダメだし、見えないとはいえ、変な物体が必ず先頭セルに入るのでSEO的にはもしかしたらあまりよくないかもしれないけど、今回は「ブラウザはIE8以上、検索からは除外するページ」で使う場所なので、問題なしでしょう。

【css】テーブルセル高さ無くなってくっつく問題

2013年9月9日月曜日

「 ビッグ・ファット・キャットの世界一簡単な英語の本」

「 ビッグ・ファット・キャットの世界一簡単な英語の本」を読み始める。

「難しい文法用語はわすれましょう。学校で習った英語は一旦無かったことに。」
という感じでスタートするみたいです。

自分の場合、もうほぼ頭から文法系の事(前置詞が、ここは過去分詞で…などなど)はすっぽり無くなっているので比較的ラクに読み進められそうです。

そのへんがもうすでにガチガチに勉強で頭に入っている人には合わなそうな勉強法なのかなーという感じです。

2013年9月4日水曜日

Illustrator上のオブジェクトにPhotoshop切り抜き画像を配置するとオーバーレイがかかったように濃くプリントされる問題

Illustratorに配置したphotoshop画像がうまく透明に印刷できず困った。
切り抜いてるはずなのに、謎の四角い枠があるように印刷される。



使用アプリ:IllustratorCC,PhotoshopCC
使用プリンタ:EPSON LP-S5000

◆現象
PhotoshopCCで切りぬき透明処理(ベクトルマスク)した画像をIllustratorファイル上の白以外の部分の上に配置し、プリンタで印刷すると、Photoshopファイルの透明部分が四角く塗られたようになる。
(Photoshopファイルの四角い外枠、透明になっているはずの部分がIllustratorのベクトルデータなどに重なると、オーバーレイがかかったように少し濃く印刷される)

画面上ではまったく問題なし。
別のプリンタで試したが、出なかったので、プリンタの問題らしい。


◆解決策
これは確実じゃないみたいなのだが、やっぱりプリンターのカラーマネジメントというか、透明のとこの処理の問題らしい。
また、印刷状態が変わる可能性があるので、印刷物をよく確認する必要があるかも。ただ自分のプリンタで印刷するということはテストとか確認程度なのでぱっと見平気ならこの対処で問題ないかも?

・印刷ダイアログを開く
・「詳細」カテゴリー プリセットを一度[高解像度]選ぶ
・カスタムボタンをクリックし、ラスタライズとベクトルのバランスを「0」に設定。
「アンチエイリアス(ラスタライズ)」にチェックを入れる
・これで印刷すると余計な枠が印刷に出なくなる。

2013年9月2日月曜日

英語が簡単にでもわかるといいなーと常々思う。

仕事的にも、英語はもう少しできないとマズイなーと事あるごとに思う。
情報調べるために見るページや、解説してる動画など、やっぱり英語が多いですしね。
ちょっとずつでもいいからやってみよう。今更だけど。

でも仕事のためと言うより、英語で海外ドラマとか映画そのまま見れたらいいなーというのが本当の目的。
Fuluとかスカパーとか入ってるんで、やっぱり英語だと楽だし。

ネタは家族+友人が同じように思ってるけど、やらずに買いまくった教材とかがたんまりとあるので大丈夫。
なにからやろうかなー。まずはカンタンそうな猫の本。
一時期流行った「 ビッグ・ファット・キャットの世界一簡単な英語の本」ってやつですね。
そのシリーズが7冊くらいあるのかな。それが全部あるのでまず読んでみよう。


現在の英語レベル:中学校英語も危ういくらい…たぶん。

2013年1月18日金曜日

cssでaタグを無効にする

liタグaタグでメニューを作っているような時、ある状態の時だけリンク無効にしたい。という要望がよく来る。

jsとか使ってもいいんだけど、面倒だしcssだけできることが多いのでcssでごまかし対応。


◆カーソルをノーマルカーソルにするだけ
    cursor: default;


◆メニューを無効っぽく見せる
背景画像の時には
opacity:0.5; filter:alpha(opacity=50);で薄くしたり、 無効時の薄い画像を作って background-positionでずらして表示。

◆cssの機能でaタグイベントを無効に
pointer-events:none;  で無効にする。ただしcss3なので、IE6-8とかでは効かない。

これらを上手く組み合わせて無効っぽく見せる。