iOS6のposition:fixedバグ対策 « console.log :) | Don't forget trace :)
こんにちは、コウワキです。 スマホサイトの制作だと、 ナビゲーションを上部に固定してスクロールについてこさせたり、 常にバナーを表示させたり、position:fixedを使いたいシーンがPCに比べて多いですね。 今日はそんなposition:fixedの話。 iOSはiOS5以降、Androidは2.2以降で使用できる はず の positon:fixedですが、 やっぱりですがちらほらバグがあったりします。 今回はiOSでのバグについて。 上に書いたとおりiOSでも5以降は positon:fixed使えるんですが、 ページを一旦スクロールしないとfixedされない というバグがあります。 例えば、 ・アンカーリンクでページ内飛んだ場合 ・scrollTop でページ内を強制的に移動させた場合 ・戻るボタンで戻ってきた場合 そんな時、positon:fixedを
jQuery＋HTML5なメディアプレーヤー「Demos for Acorn Media Player」:phpspot開発日誌
Demos for Acorn Media Player, Accessible and customizable HTML5 media player jQuery＋HTML5なメディアプレーヤー「Demos for Acorn Media Player」 次のようなYoutubeライクな動画プレイヤーが実装できます。 プレイヤー部分に各種テーマが用意されており、サイトに合ったUIの動画プレイヤーが実装できます。 関連エントリ YoutubeのChannel・Playlistの動画リストを表示できるjQueryプラグイン「PlumTube」 動画/地図/画像のポップアップが可能でレスポンシブなLightBox実装jQueryプラグイン「MagnificPopup」 動画を背景にするとこんなにカッコいい、というデモと実装jQueryプラグイン
asm.jsとかPNaClとかLLVMに興味あったので調べて回ったら少しだけ理解できた話 - hdk_embeddedの日記
このエントリーは以下の「Webの未来 PNaClとasm.jsでカワルミライ - いま、モバイルWebの先端で起こっていること〜」というスライドへのアンサーエントリーです。 ひょんなことからまとめはじめたのですが、とりあえずタイトルにあがっているようなasm.js（あせむじぇいえす）やPNaCl（ぴなくる）、LLVMという単語が知らない人でもわかないひとがわかった気になれるように書きました。つまりわかってないやつとはエントリを書いている本人のことだよ！ PNaClとasm.jsでカワルミライ Webの未来 〜 PNaClとasm.jsでカワルミライ - いま、モバイルWebの先端で起こっていること from Kei Nakazawa 結構ブクマが多いのでみんな気になっているんだろうなぁ、という雰囲気があります。 でも読んでみると良く分からない単語があったり、業界背景を理解して
Cre » スマホのフォーム入力時にキーボードを消す
Web制作初心者によるWebデザインやWebプログラムを扱った忘却ログフォームのボタンクリックからAjax通信を行う場合など、フォーム自体のsubmitイベントを無効化するケースがある。この場合、スマホだと入力を終えエンターを押してもキーボードが消えない問題が出てくる。 例えば以下のようにフォーム値を入力後、「検索」を押しても元のsubmitイベントを無効化している場合はキーボードが消えない。 「完了」を押せばキーボードを消すことはできるがユーザビリティは悪い。 対処方法 特定タイミングでキーボードを消すには、blur()で現在のフォームからフォーカスを外すことで対処することができる。 <form onsubmit="return false;"> <input type="text" id="text" > <input type="button"> </form> $("form").
Webアプリケーションのテストを書くときに考えていること - 車輪を再発明 / koba04の日記
テストを書く目的 自分の書いたコードが意図した通りに動いてるか確認するために書くのですが、自分が楽をするためと他の人のために書いてます。 自分が楽するため Webアプリの場合、実装した機能がちゃんと動作するかを確認するために何度もブラウザポチポチしてというのは時間がかかります。なのでその回数をなるべく減らすためにテストとして書けるところはなるべくテストで確認して、ブラウザポチポチする回数を必要最低限にしたいと思っています。 ブラウザポチポチするのも立派なテストだと思っています。再現性のない。 他の人のため テストがないと他の人がその機能に関連する機能を変更しようとした時に変更の影響がないのか確認することが出来ず、その機能に対するテストを手動で行わせてしまうことになってしまいます。 テスト書く時間がない問題 テストの話をすると書く時間がないと言われたりしますが、既存の開発の流れにテスト書くこ
Google タグマネージャで Web ページに読み込む JavaScript を管理してみる
Google タグマネージャ （Google Tag Manager） をこの Blog 内の各ページで読み込んでいる JavaScript コードの管理に数ヶ月前から使い始めていますが、結構使いやすくて便利なのと、ページの表示速度的にもいい結果が出たので紹介してみます。 Google タグマネージャ公式サイト 機能 ： Google タグマネージャ Google タグマネージャとは？ Google タグマネージャは無料で簡単に使用できるタグ管理システムです。ウェブ上の使いやすい管理画面から自分でタグを管理してモバイル アプリを設定できるため、面倒なコード書き換えは不要で、IT 部門に依頼する必要もありません。 機能 ： Google タグマネージャ から引用 と公式には書いてありますが、簡単にいえば Web ページ内で読み込む各種の JavaScript コード、例えば Google A
Google ChromeでiPhoneとかのtouch系イベントをエミュレートできるようになってた。これは便利。 | Ginpen.com
右上User Agentのところね。Emulate touch eventsにチェックを入れると、マウスのクリックやドラッグ＆ドロップでtouchstart, touchmove, touchendが発火するようになる。 開発時にいちいち実機やXcodeのエミュレーターを用意しなくても動作確認できるようになるのはとても便利。さすがにマルチタッチはできないけど、とりあえずエラーが出てないとかそういう確認ならできる。 ついでに隣の項目のOverrride User AgentでiPhoneやiPadを選ぶとなお良さそう。（ちなみにIEとかも指定できます。もちろんエミュレートはないけどね。） 画面サイズは、それを指定値に変更できるプラグインがあるから、探してみてください。 Settingsの項目は、なんか気がついたら（Chromeが更新されてて）変わってるから、ときどき覗いてみるといいんじゃない
JavaScriptでスクリプトを動的に読み込む３つの方法
createElementでscriptタグを作成してheadに入れる 一般的に広く使用されている方法。 var script = document.createElement("script"); script.setAttribute("src", "hoge.js"); document.getElementsByTagName("head")[0].appendChild(script); JQueryでscriptタグを作成してheadに入れる JQueryを使用した方法。チェーンメソッドで拡張可能。 $("<script>") .attr("src", "hoge.js") .appendTo("head"); JQueryの$.getScriptで読み込む 同じくJQueryを使用した方法だがコードは1行で済む。 $.getScript("hoge.js");
重要！ まずは「オリジン」を理解しよう
連載目次 皆さんこんにちは。ネットエージェントのはせがわようすけです。今回から、HTML5やJavaScriptに関連したセキュリティの話題について連載することになりました。よろしくお願いします。 もう読みましたか？ HTML5のWebアプリセキュリティに関する報告書 皆さんすでにご存じかと思いますが、2013年10月30日にJPCERTコーディネーションセンター（以下、JPCERT/CC）から「HTML5 を利用したWebアプリケーションのセキュリティ問題に関する調査報告書」が公開されました。 この報告書の調査の一部は、弊社が行いました。また、JavaScriptのセキュリティ上の問題について次々と鋭い指摘を行っているmalaさんにもさまざまな技術的アドバイスを頂いた上、日常的にWebアプリケーションのセキュリティ検査や構築を実際の業務として行っておられる専門家の方々にも査読をお願いして
[JS]スマフォに最適！フォームのラベルをアニメーションでぽんっと表示するスクリプト -Label Better
フォームにフォーカスすると、プレースホルダーに配置したラベルがアニメーションでぽんっと上に移動するjQueryのプラグインを紹介します。 デスクトップ用のページで使用してもかっこいいですが、スマフォ用のページにも省スペースを兼ねて使用してもいいですね。 デモページ name, mailの他にもpasswordなどのフォームも用意されています。4番目のデモでは、プレスホルダーのテキストとは異なるテキストを表示します。 また、デモにはありませんが、ラベルは上・下・左・右に移動させることもできます。 Label Betterの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
JavaScript 例えば小数点第2位以下を切り捨てる | Yasigani-ni Blog
JavaScriptは、小数点第N位以下切り捨てという関数は用意されていません。 というわけで、『JavaScriptで小数点第N位以下切り捨てる方法』をメモも兼ねてブログに残しておきます。 最初にも書いたように、小数点第N位以下切り捨てる関数は用意されていませんが、小数点以下を切り捨てる関数や四捨五入する関数はあります。 これらの関数を利用し、ちょっとした計算をすることで、小数点第N位以下切り捨てなどを実現します。 Math.floor() 小数点以下を切り捨てる。 Math.ceil() 小数点以下を切り上げる。 Math.round() 四捨五入する 『9.87654321』という数があったとします。 この数を小数点第2以下切り捨てる場合、まずは、『9.87654321』を10倍にしてしまいます。 var val = 9.87654321; val *= 10; 結果 val
micropolisJS - ハマると危険なHTML5製シムシティクローン
これは危険！ 筆者はシムシリーズに良い思い出がありません。例えば夢中になりすぎて学校に遅刻したり、寝不足になったり、気がつくと週末を全てシムシティーやシビライゼーションに費やしてしまったり…ろくな思い出がありません。 そんな触るな危険シリーズの初代シムシティがHTML5/JavaScriptで開発されています。それがmicropolisJSです。 最近のシムシティでは色々なメッセージが出て、街を成長させるパラメータも多彩にありますが、さすがに初代とあって内容がシンプルです。作れるオブジェクトも大して多くありません。 何より怖いのはmicropolisJSはJavaScriptだけで動作しているということです。データを保存する仕組みがないので、中途半端にはじめるとブラウザを終了させることができなくなります（再読み込みすると最初からやり直しです）。 仕事で忙しい方は絶対に下のリンクはクリックし
JavaScriptで ""+x を文字列変換に使うのは気持ち悪い - 風と宇宙とプログラム
JavaScriptの本やブログなどで非常に良く見かけるのだが、数値などの文字列でないものを文字列に変換する方法として var s = "" + x; のように空文字との連結によって行っているが、私としてはちょっと気持ち悪さを感じる。もちろん、間違いではない。確かにxは文字列に変換される。+の左側が空文字でなく、何かの文字が書かれている場合には、普通にやることだ。空文字との連結に違和感がある。じゃ、どう書くかというと、 var s = String(x); と書く。なんか、タイプ数が増えるし面倒じゃん？という声が聞こえてきそうだが、Stringという引数を文字列に変換するという目的そのものの関数が定義されているのに、わざわざ + 演算子を使うことが気持ち悪いのである。しかも、+ 演算子という多層演算子を使うのでコードが読みにくい。さらに、上のような書き方があまりにも普及してしまっていて、S
YappoLogs: 2014年に向けた JSON API の実装の方向性と X-JSON-Status 改め X-API-Status header のご提案
2014年に向けた JSON API の実装の方向性と X-JSON-Status 改め X-API-Status header のご提案 追記 2014/11/20 14:00:00 わりと JSON やら XML やら各種フォーマットで API を運用している環境がある場合に JSON API の時だけ X-JSON-Status にすると XML とかの時と整合性取れないし、 X-XML-Status みたいのを量産するのは困る的なレビューを頂いたので X-JSON-Status をやめて X-API-Status にしました。 へたに JSON に限定するから REST とか JSON-RPC とかいわれるんや！ X-API-Status にしたら全部解決したし MessagePack な API でも使い回せるって songmu さん言ってた！ XML とかからどうやって引っこ抜
Javascript yyyymmdd日付形式をyyyy/mm/dd形式にする | RoguMe
onblurでフォーカスが離れたタイミングで、 chgDateを呼び出し、全角文字を半角文字に置換後、 yyyymmdd日付形式をyyyy/mm/dd形式に変換します。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xml:lang="ja" lang="ja" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <p>申請日：<input type="text" size="
【iOS】JavaScript を使って、UIWebView でページ内検索
こんにちは！ Sleipnir Mobile for iPhone / iPad 開発担当の宮本です。 ちょっと前ですが、UIWebView についての記事を書きました。 【iOS】UIWebView Hacks 〜ブラウザ開発テクニック ページ内検索についての内容が抜けていたので、今回はその話です。 UIWebView にはページ内検索関連の API はありません。Objective-C で DOM をたどることもできないので、ほとんどを JavaScript を使って実装します。 実装するポイント ソースコードは一番最後にあります。まあまあ長いコードなので、ポイントとなる部分だけ紹介します。 全てのエレメントをたどる body から childNodes をたどっていっても、iframe 内の document にはアクセスできません。window.frames で frame 一覧が
【iOS】UIWebView Hacks 〜ブラウザ開発テクニック〜
こんにちは。 Sleipnir Mobile for iPhone / iPad 開発担当の宮本です。 調べてみると、Sleipnir Mobile の最初のコミットは 2010年9月6日で、もう3年近く開発しているようです。最初はこんな貧弱な API でブラウザなんて作れるわけ無いと思っていましたが、なんとかなるものですね。今では多くのユーザーさんに使っていただけるプロダクトになりました。 今回は、この3年間で、使ってきた UIWebView の技を紹介したいと思います。詳細な方法については書きませんが、UIWebView で何ができて何ができないのかはわかるかと思います。それぞれの詳細なやり方については機会があれば書いていきたいです。 目次 長くなりそうなので、目次を用意しました。 余裕があればアップデートするので、ブックマークでもしておいてください。 UIWebView の API
[JS]スクロールに合わせてページ内のさまざまな要素を最適なポジション・スタイルで表示するスクリプト -Auto Fix Anything
これは二番目のヘッダとサイドバーで、スクロールすると一番目と同様に上部に貼りつきます。 Auto Fix Anythingの使い方 Step 1: 外部ファイル jquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="jquery.autofix_anything.js"></script> <link href='autofix_anything.css' rel='stylesheet' type='text/css'> </head> Step 2: HTML サイドバーをスクロールに合わせてポジ
iOS 7 Mobile Safari でアプリ化したWebページの挙動が変化しています - latest log
このエントリの賞味期限は iOS 9 登場までです。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[js] スマートフォンのAjax フォーム送信時にキーボードを消す![[js] スマートフォンのAjax フォーム送信時にキーボードを消す](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
