[JS] Vue.jsでもjQuery jScrollPaneプラグインを使いたい

2017/03/31

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

年度末です。3月が終わってしまいます。
みなさまいかがお過ごしでしょうか。

今回は「Vue.jsでもjQuery jScrollPaneプラグインを使いたい。」です。

Vue.jsなど最近のコンポーネント思考のライブラリは、htmlの現在のDOMの状態をJS内部に別で管理していて、データの変更があり、DOMを更新する必要が出てきたときに、差分だけを更新するような仕組みになっているようです。(Virtual DOM)

このときjQueryで独自にDOMをいじると、このVirtual DOMと衝突しちゃうからおかしなことになってしまうというわけです。

なのでjQueryをVue.jsの中で使うときは、DOMの生成はしない方が良いです。
DOMのプロパティを読みとる分には問題ないと思う。たぶん。

この投稿の続きを読む »


[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

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

この投稿の続きを読む »


ページトップへ戻る