ChromeのデベロッパーツールでCSSのコピーが使いづらくなった。
htmlをいじってると見た目の調整でChromeのデベロッパーツールでCSSの数値を調整することがよくあります。
調整が終わってCSSファイルに数値をコピペするんですが、新しいChromeは変な改行が入ります。
一行だけコピーするとこんな風になります。
なんか微妙な事になったなあと思っていたら、この記事を書いているうちに自己解決。
右クリックで宣言を全てコピーなどを選ぶと大丈夫みたいです。
けど、一行づつコピーしても改行入らない方が楽だったなあ。いちいち右クリックとか手間が一個増えた感じ。
createJSでIEとchromeの違い
作業中に気づいたのですが、IEでボタンのロールオーバーがボタン以外の画面をクリックしてしまうと、
ロールオーバーが動かなくなる現象がありました。
クロームではそんなことないのに何だろうと思って探したら、
createjs.Touch.enable(stage);
↑これを書いていると、IEでロールオーバーが効かなくなることがわかりました。
// タッチ操作をサポートしているブラウザーならば
if(createjs.Touch.isSupported() == true){
// タッチ操作を有効にします。
createjs.Touch.enable(stage);
}
けどこれやると、タブレットのPCとかをマウスで操作しているときに
動かなくなるような気がします。
CreateJSでボタンにマウスを乗せた時、指マークにする
createJSでPC向けのコンテンツを作ってる時に、当たり前ですけど、
ボタンとかリンクしてるところにマウスを乗せても矢印のまんまがデフォルトなんです。
なので、野中さんとICSさんの記事を見つけて、それを自分のボタン登録のファンクションみたいなやつに
追加しました。
野中さんの記事
http://f-site.org/articles/2012/11/29210000.html
ICSさんの記事
https://ics.media/tutorial-createjs/mouse_over.html
ウチの会社だと、ボタンのイベントを登録するのにいちいちリスナーを書いて行くのがめんどいので
createjs.MovieClip.prototype.makeBtn = functionfunction(p_mc,notRollOverFlg){
p_mc.addEventListener(
"click", function(e){
if(('ontouchstart' in window) && e.nativeEvent.type=="mouseup") return;//2回目をはじく
var mc = e.currentTarget;
mc.onclick(e);
}
);
if(!notRollOverFlg) {
p_mc.addEventListener("mouseover", handleMouseOver);
p_mc.addEventListener("mouseout", handleMouseOut);
}
}
// マウスオーバーしたとき
function handleMouseOver(event) {
document.body.style.cursor = "pointer";
}
// マウスアウトしたとき
function handleMouseOut(event) {
document.body.style.cursor = "";
}
これを書き出すAnimateの一番上の階層に書いておいて、
ボタンにしたいMCのあるところで、
this.makeBtn(btnName);
btnName.onclick = function(){〜};
と書きます。
いろんな所でボタンを作成する時に自動でポインタが指になるようになった!
これからFlashがブラウザで動かなくなって代わりにCJSとかで作った
りするものが増えたりしたら、こう言うのやっておくといいかもですね。
まー、これだとロールオーバーの時に別の挙動をさせたい時に
いい書き方を考えないといけないけど後で考えます。
一番いいのは普通にEaselJSが元々の機能として対応してくれれば良いんですけどね。
とりあえずこれからはこの機能を追加していこう!
04webserverでのsvgの表示
ローカルのマシンで、04webserverを使っている時に、
今までsvgの画像が表示されなかった。
MIMEタイプの設定を追加すれば動くと言う事だったので、
追加してみたのだけれど全然表示されなかった。書き方は
AddType image/svg+xml .svg
AddType image/svg+xml .svgz
だったので、04WebServerには
image/svg+xml svg
image/svg+xml svgz
と言う2行を付け足したのだけれど動かなかった。
何回かいろんなやり方試したんだけど駄目だったのだけど、
また今日表示させたい案件があってしつこくやってみた!
結果、表示された。
image/svg+xml svg svgz
って一括りに書く方法だとでた。
これでローカルのテストも同じように表示できて快適です。
ブラウザによるフォームのバリデーション機能
前はフォームに入力が無いと入力して下さいを出すのに、JavaScriptとか
サーバから返したりしてたんだけど、今は機能としてあるのでちゃんと確認します。
https://www.marineroad.com/staff-blog/14752.html
http://www.atmarkit.co.jp/ait/articles/1104/25/news137.html
↑ここら辺のを見ました。
1. required属性による入力必須制約
2. pattern属性による入力値のパターン制約
3. type属性に応じた入力値のタイプ制約
4. step属性による入力値制約
5. min属性、max属性による入力値の範囲制約
6. maxlength属性による入力値の長さ制約
入力されてない箇所があると警告みたいのが出ますね。
古いブラウザだと出ないのですが、JavaScriptきってても
出るのはいいですね。
DreamWeaverCCのインデント
DreamWeaverでタグを書いた時に「</」と書くと自動でタグを閉じてくれるんだけど、
毎回インデントが入ってイヤだった。
あと、改行入れても勝手にインデント入れてくれてそれもイヤだった。
http://www.webdesignersblog.jp/archives/2009/03/18143632.php
http://daisukebe.net/dreamweaver-turn-off-auto-indent/
こう言うのの通りやったけど、まだ直らないので、
環境設定>コードフォーマット
のインデントのチェックをはずしたら直った!スッキリ。
Emmet便利やね。
http://sole-color-blog.com/blog/internet/1049/
Emmetが便利って記事。
DreamWeaverに入ったから絶対覚えた方が早いな。つうか早い。
そんなにhtmlばっか書くことも無いけど、書く時覚えておいたら絶対早いね〜。
前の名前Zen-Codingって名前は聞いたことあったけど、
早くから覚えておけば良かった気もする。
まだ無意識で打てるようにはなってない。
PhotoShopCC 2017
PhotoShopCC 2017がすごく、固まるしおかしいんだけど、
みんなあんまり文句言ってないと思ったら使ってなかったりして、自分で調べたら、
windows7からwindows10にした人は特殊みたいだ。
しかしちょっと画像をリサイズするのにバウンディングボックス全く動かなくなって、
windowsのステータスバーのPhotoShopを右クリックして「閉じる」でキャンセルできる。
みたいなのを延々とやらされるのはPhotoShop作業大量だったら死亡だ。
書き出しの時もOK押せるまで3分はかかるからネットサーフィンしてた。
何度かアップデートしても直らないから自分から検索して調べることにした。
https://forums.adobe.com/thread/1891289
をみて、
http://faq.epsondirect.co.jp/faq/edc/app/servlet/relatedqa?QID=029915
これをやってみた。
これで直ればいいけど。。。
ついでに新規ドキュメントのダイアログがなんか重いしめんどくさいから前のに戻せるの
分かったので戻した。
https://forums.adobe.com/docs/DOC-7776
これがなんか重いから、
赤で囲まれたところのチェックを入れて
ああ、戻った。
「CC2017アップデートで、新規ファイル作成時のインターフェイスに大きな仕様変更がありました。以下の設定を行うことで、以前と同じ新規作成画面でお使い頂くことも出来ます。」
って書いてあったからみんなよっぽど前のにしてくれ〜。って言ったのかもしれないね。
だいたいwindows10はダイアログが背面にすぐまわってしまうことが多いんだけど、
こう言うなんか基本の所の思想がどうなんだろうと思うんだけど、みんな不便じゃ無いのかな?
アプリのせいか、OSのせいかどっちもか、よくわからない。