サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
iPhone 16
designdrill.jp
クリック率の大きな差 Android版のコメントで広告に関する意見が多かったので色々調べてみました。 まず広告のクリック率(CTR)を調べてiOSとAndroidに大きな差があることに ビックリ!以下は同じ期間中のCTRの表。Androidは後から広告を追加したので 前半は0となっています。 Androidは4%を下ることなく時に6%を越えています。 広告表示の仕様が異なる これだけ差があるとユーザーの性向とは考えられません、ということで広告の表示 を観察することにしました。すると仕様が微妙に異なることを発見しましたのです。 広告はネットを通じてデータが送られてくるので表示までに若干の間が生じます。 この間の処理がiOSとAndroidで異なるのです。 iOS:受信完了しなくても表示 iOSでは広告データが読み込まれなくても前回表示した古いデータをとりあえず 表示します。結果として広告を表
とりあえずobjective-c → javaScript objective-cとjavaScriptの連携は簡単だと思っていたのですが、予想外に時間が 掛かってしまいました…とりあえず、objective-cからjavaScriptを実行する部分は 簡単だったので、ここではobjective-cからjavaScriptについてメモしておこうと思います。 →参考:Web&ハイブリッドアプリ開発者ブログさま 動画で確認 今回作成したサンプルはobjective-c側で作成した「引数を渡す」ボタンをクリックすると 表示しているhtmlのjavaScriptに引数を渡して処理(チェックボックス操作)を実行します。 また返値も受け取ることができるので、「返値を受取」ボタンをクリックすると チェックボックスの状態を受け取りラベルに表示するようにしました。 独学xcode: objective-cか
引き続きwebデザイニングの2011.11月号のスマートフォン向けの記事をもとに勉強。 今回はスマートフォン用サイトへの誘導についてです。 ・ユーザーに選択の機会を! スマートフォンでは簡単に画面の拡大ができたり、最近の高解像度ディスプレイの おかげもあり、意外とストレス無くPCサイトを閲覧することができます。しかし 画面が小さいこともありPCと同レベルのユーザビリティは期待できません。 そこで最近の企業サイトはスマートフォン用のサイトを用意し、スマートフォンで アクセスした場合はそちらへ誘導するようにしています。 その方法は色々あるようですが、私は「無条件にスマートフォン用サイトに移動」 させる方法は良くないと考えています。前述したように最近のスマートフォンは 通常のPCサイトもそれほどストレス無く閲覧できるのですから、ユーザーに選択させた ほうが良いと思うのです。 というわけで.hta
本日の記事「cssによるラジオボタンの装飾(1)」にて読者様より、windowsのIEで機能しない とのご連絡を受けました。制作環境がmacなので、忙しいとついwindowsチェックを怠って しまいます(仕事では怠りませんよ)。 で早速原因を調査したところ、結論としては以下の様になりました。 windows IEでフォーム修飾する際の注意 windowsIEではフォームのインターフェイスをdisplay:noneで消してしまうと クリックすることができなくなる。※labelの設定をしていても無理でした。 —以下、windowsIEで確認してください– 検証に利用したサンプルです。2つのサンプルともinputタグ(ラジオボタン)をクリック したらアラートを表示するだけのシンプルな処理です。2つの違いはinputタグをdisplay:noneで 消すか否かです。02_radio_win01b.
バグ取りには時間がかかります…。 前回の最後で紹介した画像がずれるバグですが、結果から言うとcssで簡単に対処できました。 ※デバッグしやすいように一定時間でページが切り替わる処理は外しています。 flipsnap.jsのコードを調べて、フリックの位置がcurrentXで管理されていることを 確認したので、currentXがどのようにずれるのかを調べました。 以下のjQueryを追加してタッチ後のcurrentXを確認するようにしていました。 $(document).on("touchend mouseup",function(){ var myX = flipsnap.currentX; $(".debug").text(myX); }) しかしバグが発生した状態でもcurrentXは正常の値を表示しており問題はありませんでした。 ここで早速手詰まりになったのですが、PCで動作確認中に表
これまでのサンプルではクリックの対象にマウスオーバーしても、カーソルが指カーソルになりません でした。これではUI的に良くありませんので、今回はマウスカーソルを変更するサンプルを紹介します。 とはいえマウスカーソルはcssで変更できるので、jQueryを利用してcssを変更することで対応します。 cssを変更するメソッドはcssメソッドでした。これを利用して以下の様にします。 $(this).css("cursor","pointer"); これをhoverのイベントハンドラで利用すれば、マウスオーバーで指カーソル マウスアウトで通常のカーソルにする事ができます。以下のサンプルでソースを 確認してください。青いdivにマウスオーバーすると指カーソルになるだけです。 http://www.designdrill.jp/jquery/04/01_mouseCursor.html 次回はスライド
前回に引き続きflipsnap.jsの機能を学ぼうと思います。 next/prevボタン flipsnap.jsではnext/prevボタンも簡単に追加することができます。 ややこしいページ管理も一切必要ありません。 jQueryのポイントは以下の部分です。flipsnapオブジェクトに対してtoNextやtoPrevメソッドを 実行するだけで、ページの管理など必要なくインジケータと連携されます。 $("#showcase .pointer .next").click(function() { flipsnap.toNext(); }); $("#showcase .pointer .prev").click(function() { flipsnap.toPrev(); }); インジケーターをクリックできるようにする flipsnap.jsは指定したページに移動する機能も用意されている
sample : ウインドウ中央に移動するdiv http://www.designdrill.jp/jquery/04/02_center_1.html ※最初は左上に配置されていますが、リサイズすると中央に移動します。 ポイントはresizeイベントとwidthメソッド/heightメソッドです。resizeイベントの構文は これまでのイベントハンドラと同様ですが、セレクタとしてwindowを指定します。 このとき注意するのはwindowにはクォートは必要ないという点です。 readyイベントのdocumentも同じようにクォートは必要ありませんでした。 $(window).resize(function(){ //---リサイズされたときに実行したい処理 }) つづいてwidthメソッド/heightメソッドですが、これも通常のメソッドの構文と同じです。 要素の幅/高さを取得できるの
フォーム内容を置換するのは… ネットでフォームを入力する際、数字の半角全角で注意されることがたまにあると思います。 私は電話番号を全角で記入してしまうことはありませんが、住所の番地などを半角で入力して 全角への書き換えを求められたことが何回かあります(半角でもOKのケースも多いですけどね)。 今回紹介するように数字の全角/半角の変換は容易なのですが、多くのフォームでは変換はせずに 利用者自身に修正を求めるケースが多いと思います。これはユーザビリティ的にどうなの?と 考える方もいるかもしれませんが、ネットではなく役所などに書類を提出するときのケースを 考えると得心する部分があります。 役所に書類を提出する際、記入忘れのような簡単な間違いでも「こちらで記入しておきますよ」 とか「こちらで直しておきます」とは言われないと思います。役所に提出するような書類は 本人記入が原則だからです。それがweb
●queueという仕組み jQueryではアニメの演出はqueueという仕組みで管理されます。これはアニメの演出を 格納する配列で、animateだけでなく他の演出も命令(メソッドの実行)されると queueに格納されていきます。つまり命令された分は律儀に全て実行されます。 これは仕様として正しく感じますが、ケースによっては不都合です。step24.htmlを 開いてください。moveボタンをクリックする度にグレーのdivが右に移動します。 このmoveボタンを連打してください。すると連打を中止してもdivは移動し続けます。 これは連打した分のアニメが律儀に全て再生されるためです。 http://www.designdrill.jp/jquery/02/step24.html もしこのような仕様をやめて、連打してもクリックをやめたらすぐに停止して欲しい 場合はどうしたらよいのでしょうか?方
●表示されてからアニメ 今回はanime.jsの勉強ではありませんが、内容的には前回の続きです。 前回作成した文字アニメは表示されてから開始するようにしたいです。cssの追加/削除で完結する場合は以下のライブラリが便利だと思います。しかし今回はanime.jsを利用するので、ビューポートに入ったら指定のfunctionを実行する部分を自作しようと思います。 →参考:要素がビューポートに表示されたか判定する -Emergence.js ●各種パラメータの取得 まずは表示している要素のY座標とスクロールしたときの表示範囲(Y座標)を取得しました。 まずアニメさせたい要素(今回はclass属性がanimeText)のY座標を以下のように取得しています。scrollTopの位置はブラウザによって書き方が変わるのが少し面倒です。 var elms = document.querySelectorAl
●Flashは無くならない 非Flashが増えるというものの、Flashがなくなることはないと思います。 ActionScript3.0で作成する高度なコンテンツはjavaScriptでは代替できないので、 スペシャルサイトを中心に利用され続けるでしょう。 さらにActionScript3.0以外のFlashも残っていくと考えています。 ●アニメはやっぱりFlash まず残るのがアニメを多用したショーケースFlashやバナー広告でしょう。 HTML5 + CSS3 + JavaScriptでもアニメを作成することができますが、 Flashに比べれば機能も低く時間的/金銭的コストがかかってしまいます。 adobeがHTML5, JavaScript, CSS3でアニメーションを作成するツール 「Adobe Edge」を発表しましたが、まだFlashのアニメーションには及びません。 Adobe
このページを最初にブックマークしてみませんか?
『designdrill.jp』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く