縦にスワイプしようとした際にはイベントを仕込んだ要素にタッチしてもイベントを発生させない方法 | WebDelog
タイトルになんて書いたらわかりやすいだろうか… って悩んでたら一ヶ月経ってしまいました。嘘ですけど。 『縦にスワイプしようとした際にはイベントを仕込んだ要素にタッチしても何も起こさせない方法』 どういうこと…？ わかりにくくて申し訳ないです…。図に表してみました。 縦に長いレイアウトのサイトを見ています。 ページ下を見るために下から上へスワイプします アコーディオンのリスト部分にクリックイベントが仕組んであり、ユーザが予期しない動作をしてしまいました… つまり、スワイプ時にtouchイベントが誤動作するのを防止します とは言ったもののどうすればいいのでしょうか。 少しづつ整理しつつ解決法を探してみましょう‥ 現状の問題点 問題解決フロー 結果、タッチした瞬間に発火するtouchstartイベントとtouchendイベントを使えばうまく動作させられそうです。 実際にどんなコードになるか書いて
「はじめてのjQuery Mobile（初級編）」セミナー資料（サンプルコード付き） | DevelopersIO
2012年2月10日、弊社セミナールームで行われたjQueryMobileセミナーに講師として参加しました。 お忙しい中ご来場下さいました皆さま、最後までお付合い頂き誠に有難う御座いました。 今回は「はじめてのjQueryMobile」ということで、かなり初心者向けにフォーカスした内容だったわけですが、 参加された方の中には、既に実開発に取組んでいる方もおられて、最後のパネルディスカッションでは、 意外と濃い目の質問なども飛び交ったりと・・ビール片手に盛り上がりました。 私が担当したセッション（初級編）で使った資料はSlideShareで公開しています。 またサンプルコードは本文一番下のリンクからダウンロードできますので、 社内勉強会などで入門資料としてご活用頂ければ幸いです。 はじめてのjQueryMobile（初級編）
initTouchEventにおけるAndroidとiOSの引数違い - KAYAC Engineers' Blog
こんにちは。毎日欠かさずAndroidと心で対話をおこなうHTMLファイ部の高橋です。入社4週目にしての初投稿です。 UIのタッチ操作が絡むJSのテストで、タッチイベントを生成する際のハマりどころをエントリします。 きっかけ 先日、JsTestDriverでタッチイベントの生成をした際、Androidだけイベントが生成されず何のエラーも出ないという事象が発生。 その答えは「selenium」の中にありました。 events.js#443 | selenium // Android's initTouchEvent method is not compliant with the W3C spec. // Android's initTouchEvent method is not compliant with the W3C spec. // Android's initTouchEven
スマホ対応の参考に。JavaScriptでウェブページがどのくらい拡大されているのかを取得する方法。
こんにちは。開発担当の林です。 iPhone / iPad のウェブブラウザでページを見ているとき、けっこうな割合でピンチイン・ピンチアウトすると思いますが、それがどのくらい拡大されているのかを取得する方法を書きます。 また、応用でピンチイン・ピンチアウトされても、見た目のサイズを維持するにはどのくらい拡大すれば良いかということにも触れたいと思います。 広告バナーなんかでよく使われてるアレの仕組みです。何かのお役に立てれば幸いです。 ウェブページがどのくらい拡大されているのかを取得する // ページの幅 ÷ 表示されている幅（この行だけでいいかな） var zoomer = document.body.clientWidth / window.innerWidth; // 以下で拡大率を目視できるでしょう alert( zoomer ); // 小数点がたくさんつくので、第二位までに丸め込
続：Androidブラウザでviewportのwidth指定
続：Androidブラウザでviewportのwidth指定 １年ほど前にAndroidブラウザでviewportのwidth指定という記事を書いたのですが、１年間いろんな端末や状況に対応しているうちに今は結構違うスクリプトを利用しています。 var portraitWidth,landscapeWidth; $(window).bind("resize", function(){ if(Math.abs(window.orientation) === 0){ if(/Android/.test(window.navigator.userAgent)){ if(!portraitWidth)portraitWidth=$(window).width(); }else{ portraitWidth=$(window).width(); } $("html").css("zoom" , por
Titanium Mobile Best Practices - JP::HSJ::Junknews::HatenaSide
この記事はAppcelerator公式Wikiのドキュメント(2011/10/20更新版)に基づき、和訳±αしたものです。 訳質は良くないので眉に唾を付けて読んでくださいね(^^; https://wiki.appcelerator.org/display/guides/Mobile+Best+Practices （補足：Titanium Mobile SDK 1.7.x以前とは状況が異なる部分もありますので、1.8.x前提ということでご覧ください） このガイドラインの目的 Titanium Mobileは比較的歴史浅く、継続的に変化をしているプラットフォームです。 このベストプラクティスは変更される可能性も否めませんし、Titaniumのアプリケーションを構築するのに必要な知識のすべてを網羅する事も出来ません。 そのため、現在Titanium Mobileアプリケーション開発（もしくは一
jQuery Mobileのデザインを簡単に作れる「ThemeRoller」徹底解説
jQuery Mobileのデザインを簡単に作れる、jQuery Mobile公式サイトで提供している「ThemeRoller」を紹介します。 ThemeRoller こんな風にjQuery Mobileのデザインが簡単に出来上がります。リンクをクリックすれば同じデザインが表示された状態で「ThemeRoller」が起動します（2012/01/11頃まで）。 このエントリーで紹介する情報は2011年12月のものです。 １．ThemeRollerへのアクセス方法と全体レイアウト jQuery Mobileのトップページにある「Themes」をクリック。 ウェルカムメッセージが表示されるので、「Get Rolling」をクリック。 冒頭の編集画面が現れます。左ペインにテーマの各種設定項目、右ペインにプレビュー画面が表示されます。プレビュー画面は複数表示させることができるので出来栄えを見比べるこ
Titanium Mobile: Build an Image Uploader | Envato Tuts+
This tutorial will demonstrate how to build a custom progress bar by creating an image uploader with Titanium Mobile. Specifically, the demo project will allow you to select an image from the device photo gallery and upload it to a remote server for storage. Both the Titanium Mobile code and the server-side code will be explained. Now, let's get started! Project Preview The following is a preview
Titanium MobileでJavaScriptが実行されるまでのソースコード追ってみた
はじめに 毎日が夏休みのみなさんこんにちは。ダニーです。 Titanium Mobile使ってると、なんでiPhoneアプリなのにObjective-CじゃなくてJavaScriptで作れるか大変不思議ですよね。 今回はTitanium Mobileでアプリ起動から、JavaScript(app.js)を読み込んで実行しているところまでをソースコードを読んで追ってみました。 方針としては、Titanium Mobileで適当なプロジェクトを一つ作成してビルドして生成された/build/iphone/以下にあるソースコードを読んで行きます。 今回のビルドに使ったTitanium SDKのバージョンは1.7.1です。 今回、掲載してるソースコードで行番号が飛んでる部分は長いので省略しています。 ソースコード /build/iphone/main.m 25:int main(int argc,
jQuery Mobileでのアプリケーション開発にBackbone.jsを導入しよう | Lab by engineering@dwango.jp
こんにちは、2011年度新卒エンジニアの夏目です！突然ですがみなさんJavaScript書いてますか？ 最近はjQuery Mobileなどを利用したスマートフォン向けアプリ開発において、クライアントサイドでもヘビーなJavaScriptのコーディングをする機会があると思います。そのようなときコードのいたるところにHTMLが混入したり、どこでどのデータを扱っているのか分からなくなるということになりがちです。 今回はそんな悪夢のようなコーディング生活に一筋の希望の光を照らすBackbone.jsを紹介したいと思います。 対象読者 JavaScriptでの開発経験がある方 Backbone.jsとは Backbone.jsはDocumentCloudが開発をしている、クライアントサイドのJavaScriptコードをModel、View、Controllerで構築するためのフレームワークです。b
[jQuery Mobile]役立つコード集とつまづきやすいポイント | コリ
jQuery Mobileを使って、スマートフォン対応ページをはじめて作成する際に役立つコード、つまづきやすいポイントを紹介します。 10 handy jQuery mobile tips and snippets to get you started [ad#ad-2] 下記は各ポイントを意訳したものです。 スマフォ対応ページの基本HTML jQuery Mobileの利用方法 AJAXナビゲーションの停止 リストアイテムの省略を阻止 Media Queriesの利用 プラットフォームの特定 フォームを使用する際の注意点 ポップアップ ダイアログの作成 キャンセルとセーブのボタン カラム構造を作る時のポイント スマフォ対応ページの基本HTML まずは、スマートフォン対応ページを作成するための基本となるHTMLです。 HTML <!DOCTYPE html> <html> <head> <
「Titanium mobileのARマーカー検出モジュール」を試してみました - 僕は発展途上技術者
» マシュマロにダイブ: Titanium mobileのARマーカー検出モジュール！ を頼りに Titanium mobile の AR マーカー検出モジュールを試してみました。 上記リンク先の説明通りやったら、./build.py の部分で Error が出たので、 » 阿部諒が試してみた！『Titanium mobileのARマーカー検出モジュール」編 その１ - りょうのはてな を参考に、titanium.xcconfig の TITANIUM_SDK_VERSION と TITANIUM_SDK を自分の環境にあわせて修正し、ビルドし直したらうまくいきました。 何ができるかは、百聞は一見に如かず、貼りつけた動画をみてください。 印刷するのが面倒だったので、画面に映したマーカーに iPhone をかざしています。A のマーカーに反応して、小文字の a が iPhone の方でチラチ
Titanium Mobileの暗黒ノウハウを公開します。主にAndroid編。 - このブログは証明できない。
すこし前の話になりますが、Titaniumを使ってiPhoneアプリとAndroidアプリを同時リリースしました。iPhoneアプリの方は、以前公開した暗黒ノウハウでわりと楽に作れました。問題は、Android。iPhoneとは違う暗黒ノウハウが必要となりました。 Titanium Mobileの暗黒ノウハウを公開します。 - このブログは証明できない。 今回は、ボリューム少なめです。もう少したまってから公開しようと思ったのですが、Objective-Cを使った開発に戻ったので、しばらくTitaniumは使わないだろうということで公開することにしました。そうそう、日本語でTitaniumの書籍が出るみたいですね。 Android対応 TitaniumはiPhone対応が先行していて、Androidだと機能がなかったりバグがあったりするそうです。私はわりとどうでもいいアプリしか作ってないので
iPhoneやAndroid向けのJavaScriptフレームワーク・Wink Toolkitが割と良かったので日本語サンプル作った - かちびと.net
スマホ向けのWebアプリ用JavaScript製フレームワークです。 動作サンプルを日本語にしたのでお手持ちのiPhoneなどでサンプルを触りながら記事を読んでいただけると嬉しいです。 [note]お持ちでない場合でも、Safariでご覧頂くと同様の動作確認が出来ます。Chromeでも多少確認出来ました。また、デモ動画もいくつかありますので宜しければご覧ください。[/note] サンプル ※Androidも動くらしいですが、僕が持っていないのでiPhone以外は動作確認していません。 サンプルにアクセスすると以下のような画面になります。 結構な数のサンプルが用意されているのですが、ここでは一部ご紹介したいと思います。 アコーディオン アコーディオンコンテンツです。タップで開閉します。 ページめくり ページめくりです。フリックすると本をめくるようなアニメーションエフェクトで次のコンテンツに進
iPhone／Androidブラウザのアドレスバーを隠す方法 | alt
これはスマートフォンに限定した話になってしまうかもしれませんが、 コンテンツの領域が端末の縦幅より長いときってフリックやスワイプ操作でスクロールしますよね。 iPhoneやAndroidのブラウザで横向きにしたときは ファーストビューのエリアが狭いのでアドレスバーがすごく邪魔でちょっと不親切。 ユーザビリティを考慮したサイトには必ずといっていいほど、 初期時にブラウザのアドレスバーを隠してあげる工夫がされています。 やることは単純。 window.onloadか、jQuery使ってれば$(document).readyとかで1px移動しておくと、 ブラウザの仕様でバーの高さ分引っ込めてくれます。 人のやつ参考にしてみたけど、こんなんでいいのかな。。 iPhoneは読み込み遅延のせいでsetTimeout使わないとうまく反映されなかったです。 一応、両OSで動くのは確認
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SavageLook.com » Path menu with Appcelerator Titanium
JavaScriptエンジニア向け！スマートフォンで動くブラウザゲームの作り方
Welcome to nginx!
jQueryやHTML5を使ってiPhoneやiPad向け電子書籍を作成する為のフレームワーク・Laker | コブスニュース かちびと.net | コブスオンライン／COBS ONLINE
IBM Developer
