css3で要素の大きさを変えるアニメーションを実装してみる

20130325
cssのtransformを使うと 比較的軽量かつスムーズなアニメーションを実装できる。 ここ最近では、Jqueryと併用されることも増えてきたんじゃなかろうか。 JqueryのAnimateよりもcssのtransformのほうが スマートフォン端末ではスムーズにうごいたりする。 是非積極的に活用していきたいところです。 今回は、要素の大きさを自在に変える例を書いてお...
続きを読む

selectタグのclickイベントをjQueryのtriggerで起動

20150319
スマホのUIで 任意のボタンをクリックするとselectの選択画面(option)を起動する なんて動きを見た事がある。 jQqueryで実装しようと思いtriggerでこんな感じでやってみた。 $("#elm").click(function(){ $("select").trigger("click"); }) すると、あれ??うまく起動できないので デ...
続きを読む

いつのまにか

20150318
・FORM がネストしている。 あれ、アイテムの「削除」ボタンがある FORM がネストしている、いつの間にこうなったんだ! でも、ちゃんと動いている。 放っておこうかと思ったが、我慢できず修正しJSから「削除」クリック時に新規 <FORM/>を 作成してサブミット。 もちろん「削除」ボタンのtype="submit"をtype="button"に変更。 本当は「削除」ボタ...
続きを読む

回れよ回れ!!

20150312-2
開発途中でローディングGIFや、プログレスバーのデザインが出来上がるのを待っている間 デバック用にとりあえず処理中の状態を見えるようにする時、css3のtransformを使って遊んでいます。 何をするかというと、単純にトリガーになった要素を transform:rotate で回転させているだけ。 transformもアイデア次第で色々利用できると思います。 具体的には、 var ...
続きを読む

facebook「いいねボタン」の正しい設置方法「アプリ登録編」※2015年3月版

20150304
●ソーシャルプラグインの一般化 サイトをつくった際に、 ソーシャルプラグインを実装する機会も増えましたよね。 その代表的なものに facebookの「いいねボタン」 があります。 いまや、どのサイトにいっても「いいねボタン」を目にします。 その設置が手軽なのも流行したひとつの要因と言えるかもしれません。 しかし、、、それら「いいねボタン」含むソーシャルプラグインは た...
続きを読む

本当は非同期がいいけど、どうしても同期処理を。

名称未設定-9
HTML5, File API を利用すれば複数ファイルのアップロードが簡単にできることは、本当に素晴らしいことです。 それ以前や、利用ブラウザがどうしても古い(たとえばIE9以前とか)場合は、今でもFlashとJavasScriptの 連携で複数ファイルのアップロードを組み込んでいるケースもあると思います。 さて、ここでサーバ側の仕様変更は無しで、JavaScriptだけで複数ファイル...
続きを読む

キャメルかスネークかハイフンかそれが問題だ

0012
自分の中でwebアプリ開発でよく悩むシリーズの1つにcssのセレクタ名とファイル名がある。 名前をキャメルケースにするかスネークケースにするかハイフンにするかです。 自分なりに考えて先に結論から言うとケースバイケース! あっちの有名なライブラリはハイフンか、なるほどね。 いやあっちのフレームワークはキャメルでないといけないのなど、ほんとにバラバラかつ、ケースバイケースな...
続きを読む

javascript ページの離脱

06
今見ているページから別のページに移動しようとすると、 「このページを離れる」、「このページにとどまる」といった確認ダイアログが出てくるページを(ボタンの文言はブラウザ ごとに異なる) よく見かけるようになった。 これは、onbeforeunload イベントを利用しているが利用シーンは問合わせ時に何かを入力していて問い合わせが 完了していない。 そんなときにページを移動すると入力した...
続きを読む

最近思う事

04
外部サービスのAPIを利用した開発や、簡単に利用できるライブラリを利用していると思わぬ事象に出くわして、 原因究明に多くの時間を割く事になる。 究明できればよいが時間の関係やらで別のスマートではない手段を考えて回避する。 そんなときに全てを自前で用意して開発できればと良く思う。 WEB開発の場合で多くのデータをPOSTして通信しなければならない場合は、F12 を押下してブラウザのデバッ...
続きを読む