[CSS3] transform: scale(0, 0) からのアニメーションをしようとしてIE11で変な挙動だった

2017/02/12

こんにちは。きんくまです。

Vue.js の transitionは便利です。
それでやっていたところ、IE11で挙動がおかしかったのでメモ。

transform:scale(0, 0); -> scale(1, 1); へのアニメーションを作っていました。
Vue.jsのtransitionには appear という、画面に現れる初回のみ適用されるアニメーションがあります。

予想されるイメージとしては、何もないところから、拡大して画像が現れる予定。

そしたら、Win10版のIE11 だと 一瞬 scale(1,1) の状態で画面にぱっと現れた後、transitionが適用されるような挙動がありました。

で、いろいろと試した結果、scale(0,0);という値がマズかったみたい。

scale(0.01, 0.01); からだとうまくいきました、、。

これひょっとして何かの値を0で割っちゃって出ちゃってるエラーなのかな、、?
数値を0で割ると、無限大になってエラーになりますよね。それだったりして。
ちなみに、他のブラウザChromeやmobile safari, Androidではうまくいっていました。

こうして記事にして書いてしまえば、しょうもない小ネタなんですが、数時間を返してwww


[プログラミング] エラーの知らせ方のメモ

2017/02/9

こんにちは、きんくまです。

エラーに関していろいろな考えがあると思うのですが、ちょっとしたメモ。

1. エラーがおきるが、何事もないように動き続ける

-> 後から全然別のところで、原因不明の別のエラーが起きる場合がある。なので、あまり良くないと思われます。

==
追記
考えてみると、エラー自体はプログラマというか開発者側が把握していて、それをユーザーには知らせなくてもOKという場合もありますね。とりあえず開発側はエラー自体は把握しておきたいです。
==

2. エラーがおきて止まるが、何が原因でおきたかは知らされない

-> 例えばブラウザの画面が真っ白で表示されてしまい、明らかにエラーの状態なのですが、何のエラーかわからない。みたいなやつです。

1よりはよいと思いますが、エラーに対して何をしていいかわからないため、修正するプログラマや、エラーの状態になってしまったユーザーが困ってしまう状況です。

3. エラーがおきて止まる。原因も何らかの手段で知らされる

-> 一番いい気がします。次の行動を起こすことができます。

プログラマなら修正をしやすいし、ユーザーなら入力内容を変更してリトライすることができます。

プログラマは、プログラムを書いているといろいろなエラー表示に出くわす立場でもあるのですが、それと同時にエラーが起きたときそれを表示してユーザーにも届ける立場でもあるんだなーと。

そもそものOSなどのランタイム環境で起こるシステム的なエラーもあれば、名前に半角使うとアウト的な自分で「それはエラーです」を定義する場合もある。

てなことをここ何日かふわっと考えていたので、まとめてみました。ポエムです。


[Android] Androidの実機のAndroid標準ブラウザのConsole.logが確認したい

2017/02/9

こんにちは。きんくまです。

Androidの実機の、Android標準ブラウザのConsoleをみるのにどうしようかと思いました。

そういえばと思って、検索してみたら、以前に自分でログを画面に表示するjQueryのプラグインを作っていました。
>> [Javascript] モバイル開発でJSログ出力が便利になる jQueryプラグインのmieloggerを作りました

ただ、今回はこれじゃなくて、普通にconsole.logを表示させたいのです。

Android版ChromeはPCからデバッグできるみたいだけど、、

調べたところ、Android版Chromeは普通にデバッグができるもよう(2項目目の Chrome Developper Tools を参照)

>> Androidのテストに役立つツール2つ

実機とUSB接続すると、PCのChromeでデバッグできちゃうすごいやつです。

ただ、標準ブラウザはできない、、、。

この投稿の続きを読む »


[Android] Android 4.3 の標準ブラウザとChromeでSoundJSを使って音を鳴らしたい

2017/02/9

こんにちは。きんくまです。

タイトルの通り今回は、「Android 4.3 の標準ブラウザとChromeでSoundJSを使って音を鳴らしたい」です。

SoundJSは音を鳴らすライブラリ。これです。
>> SoundJS

今回PreloadJSも使ってるのでこちらも。こちらはあらかじめリソースを読み込んでおくライブラリです。
>> PreloadJS

で、Chromeだと鳴るんだけど、標準ブラウザだとうまく鳴らなかったので、いろいろと調べたことをまとめてメモします。
先に結論を書いてしまうと

Android標準ブラウザでは、HTMLAudioPluginを使って、音を1つだけ鳴らす

この投稿の続きを読む »


[JavaScript] 全角文字のJIS第一水準、第二水準などをチェックしたい。あとencoding.js

2017/01/14

こんにちは。きんくまです。

文字の入力チェックで、全角文字のJIS第一水準、第二水準などをチェックしたかったです。

それで、最初はこちらのencoding.jsライブラリを使って、文字コードの範囲をチェックしたりしてました。

>> polygonplanet/encoding.js

encoding.jsライブラリについては最後に書きます。
でも、次の項目のように、結局は文字列をそのまま書き出してチェックするようにしました。

この投稿の続きを読む »


[日記] 2017年 あけましておめでとうございます!

2017/01/1

あけましておめでとうございます! きんくまです。

本年もよろしくお願いします。

2017_kinkuma_bmd_72dpi

今年の年賀状は、「ヒヨコをジャグリングするニワトリ」です。

この投稿の続きを読む »


[JavaScript] Vue.js / React / AngularJS の個人的な感想 – 後編

2016/12/23

こんにちは。きんくまです。

前回各ライブラリの感想を書く前に終わってしまいましたが、今回はようやく本編でございます。
>> [JavaScript] Vue.js / React / AngularJS の個人的な感想 – 前編

概要

Vue.js
・html/css/js のファイルを分けられる
・トランジション(アニメーション)が柔軟に書ける
・親子関係以外のイベントの受け渡しが可能 – (new Vue()).$emit
・ES6で書く
・cssはグローバル、スコープと分けて定義できる
・webpackの設定で詰まった時があった(これをこうして書き出したいのに!!みたいのをするのに時間がかかった)

React
・jsx の中にテンプレート(html部分)とjs部分を同時に書く
・ES6で書く
・関数型プログロミングの影響が強い
・3つの中では一番機能を絞っているのでシンプル。わりとすぐに使える
・cssは扱わない

AngularJS
・html/css/js のファイルを分けられる
・htmlの記法でちょっと見慣れないところがあるが( ()や[]のバインディング )、慣れると一目でデータの方向がわかるので便利
・3つの中では一番巨大なライブラリ。全部入り
・TypeScriptで書く
・cssはコンポーネント単位で閉じている

プログラム言語について
ES6だったり、TypeScriptというのは、ライブラリ側が基本プランとして想定している言語です。
ReactをTypeScriptで書いたりすることもできますが、とても面倒くさかったです。
基本的に、ライブラリで想定している言語をそのまま使ってあげた方が良いかと思います。

私は前からTypeScriptを使っていたので、当初ReactやVueをTSで書こうとしましたが、いろいろと設定が難しくあきらめました。
ES6はTSからちょうど型定義を抜かしたような形になっているので、移行も簡単です。

ライブラリの大きさ順に並べると
React < Vue.js << 壁 << AngularJS

という感じです。

これだけ書いてもよくわからないと思うので、ここからは個人の感想でございます。
好き嫌いが多分に含まれるので、気分を悪くした方がいれば申し訳ございません。

この投稿の続きを読む »


ページトップへ戻る