ARCHIVE  ENTRY  COMMENT  TRACKBACK  CATEGORY  RECOMMEND  LINK  PROFILE  OTHERS
<< September 2018 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 >>
2018.03.14 Wednesday

createJSでIEとchromeの違い

作業中に気づいたのですが、IEでボタンのロールオーバーがボタン以外の画面をクリックしてしまうと、

ロールオーバーが動かなくなる現象がありました。

クロームではそんなことないのに何だろうと思って探したら、

 

createjs.Touch.enable(stage);

 

↑これを書いていると、IEでロールオーバーが効かなくなることがわかりました。

 

// タッチ操作をサポートしているブラウザーならば
if(createjs.Touch.isSupported() == true){ 
    // タッチ操作を有効にします。
    createjs.Touch.enable(stage);
}

 

けどこれやると、タブレットのPCとかをマウスで操作しているときに

動かなくなるような気がします。

2017.06.16 Friday

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が元々の機能として対応してくれれば良いんですけどね。

とりあえずこれからはこの機能を追加していこう!

2017.06.05 Monday

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

って一括りに書く方法だとでた。

これでローカルのテストも同じように表示できて快適です。

2017.04.20 Thursday

ブラウザによるフォームのバリデーション機能

前はフォームに入力が無いと入力して下さいを出すのに、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きってても

出るのはいいですね。

2017.04.14 Friday

DreamWeaverCCのインデント

DreamWeaverでタグを書いた時に「</」と書くと自動でタグを閉じてくれるんだけど、

毎回インデントが入ってイヤだった。

あと、改行入れても勝手にインデント入れてくれてそれもイヤだった。

 

http://www.webdesignersblog.jp/archives/2009/03/18143632.php

http://daisukebe.net/dreamweaver-turn-off-auto-indent/

 

こう言うのの通りやったけど、まだ直らないので、

環境設定>コードフォーマット

のインデントのチェックをはずしたら直った!スッキリ。

2017.03.28 Tuesday

Emmet便利やね。

http://sole-color-blog.com/blog/internet/1049/

 

Emmetが便利って記事。

DreamWeaverに入ったから絶対覚えた方が早いな。つうか早い。

そんなにhtmlばっか書くことも無いけど、書く時覚えておいたら絶対早いね〜。

 

前の名前Zen-Codingって名前は聞いたことあったけど、

早くから覚えておけば良かった気もする。

 

まだ無意識で打てるようにはなってない。

2017.03.16 Thursday

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のせいかどっちもか、よくわからない。

2017.03.01 Wednesday

SASS

DreamWeaverでSASSが使えるようになったので使ってみます。

「CSSプリプロセッサー」ってやつね。

 

あと、仕事で bootstrap使ってやることになったから最新を確認して、

DreamWeaverでEmmet使えるって書いてあって普通に使えたので使ってみよう。

 

今までゲームとかメインでhtmlは手書き止まりだったけど、

Emmetできると爆速らしいから練習しよう。

 

https://blogs.adobe.com/creativestation/web-learning-emmet-abbreviations-for-html

 

html専門じゃ無いから今知ったの?って感じだろうけど、覚えよう。

 

いま、 Emmet でもCSSかけるって書いてあったのみて、 SASS とぶつかるというか

どうやって両方使っていくのか不安になったけど、両方使ってやりましょう。みたいな

記事があったのでできそうなのですすめてみます。

 

【追記】

あと、

CSS設計における3大メソッド[OOCSS][BEM][SMACSS]

http://www.risewill.co.jp/blog/archives/5652

だってさ。

なんかちょっとしたことを一括りにして名前つけて「自分●●使ってまス。」

みたいなこと言わないといかんのかねえ。全部CSSの書き方なんだろうけど。

まあやってればなれるのかな。

2017.02.23 Thursday

bootstrap IE スクロールバー

bootstrapでサイトを組んでいたら、IEで右のスクロールバーが

出ているところがかぶっていて変だったので、「bootstrap IE スクロールバー」

でググってみた。

そしたらこんな記事が、↓

 

http://cly7796.net/wp/css/scrollbar-overlaps-the-content-when-viewed-in-initenet-exproler-when-you-use-the-bootstrap/

 

@-ms-viewport {

    width: auto;

}

って書けば直ると書いてあるので、

custom.css

につけたしてみたら、無事直りました!

2017.01.26 Thursday

Spine

Spineが良さそうなので落としてみた。

無償版だと保存と書き出しが全然できないので練習にならなかった。

Essentialでも69ドルなんだけど、3Dっぽいの使うのは299ドル払わないと

いけないらしい。

 

個人ではお金が無いと買えない。

会社だと元とれないと買えない。

Powered by
30days Album