モバイルファースト時代のWebアプリケーションデバッグ手法 - クックパッド開発者ブログ
買物情報事業部の前田 (@TakatoshiMaeda) です。 Webアプリケーションを開発していると、思ったようなスタイルが適用されなかったりJavaScriptの挙動が意図しないものとなっているケースがままあります。そのような時に、Chrome Developer ToolsやSafari Web Inspector等を用いてスマートフォン実機に接続をしてデバッグしますが、 Android標準ブラウザ Android/iOSアプリケーション内部のWebView*1 ではインスペクタとの連携に対応しておらず、上記ブラウザでのみ再現がされる不具合に対してはHTML/CSSの確認やJavaScriptを実行しながらのデバッグは基本的に出来ません。 weinreというデバッグツールを用いて、上記ブラウザ環境下でWebアプリケーションのデバッグを行う方法について紹介します。 weinre we
スマートフォン向けフレームワーク注目の「jQuery Mobile」でスマホサイトを作ってみよう【基本編】 | HTML5でサイトをつくろう
jQuery Mobileってなに？ jQuery Mobileは、javascriptのフレームワークです。スマートフォン向けの直観的で使いやすいUIを瞬時に作成できます。 JavaScriptをWebデザイナーでも扱える身近な存在に変えた「jQuery」。そのjQueryと同じ開発元からリリースされていることもあって、スマートフォン向けフレームワークとして注目のjQuery Mobile、文法はjQueryとまったく同じですのでためしにサンプルを作ってみました。 jQuery Mobileは、解像度の違いなど、デバイスの特性の違いも吸収してくれるというのが最大の強みになっていて、ほとんど全ての機種に対応しています。そのため制作者は悩み所だったデバイスの違いを気にすることなく、スマートフォンサイトを作成できてしまいます！iOSやAndroidなどのWebKitベースのスマートフォンだけで
jQueryMobileを使って 簡単にRuby on RailsサイトをクールなiPhone対応サイトにしてみた - yuumi3のお仕事日記
jQuery Mobile | jQuery Mobile を使って Ruby on Rails で作ったWebサイトを iPhoneなどのスマフォに対応したサイトに変更してみました。以下の画像は Ruby on Railsの Scaffold で作ったサイトをjQueryMobile対応した後の画面です。 クールなスマフォサイトになっています！ 1. まずは普通にscaffold でアプリを作る Railsはjavascript周りが大幅に強化された3.1を使っています。 % rails new jq_mobile % cd jq_mobile % rails g scaffold todo due:date task:string % rake db:migration % rails s 2. PC と iPhone でview(layout)を切り替える jQueryMobile用
jQuery Mobile使用時によく使いそうなマークアップのリストと動作サンプル
自分用に備忘録。そろそろチートシート が出てくる頃じゃないかと思うので、そう 焦ることも無い情報だと思いますが、近々 使いそうなのでその時に面倒な事になら ないようによく使いそうなマークアップを リストとしてメモしておきます。 ちゃんとしたデモは本家で確認して下さい。ここにあるサンプルは僕のいい加減なサンプルです。尚、マークアップが見やすい様にするだけの為にコメントアウト入れていますが気にしないで下さい。 [note]追記 もう少し増やして見やすくしたものをダウンロード出来るようにしました。 [/note] プラグイン読み込み<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" /> <script type="text/javascript" src="h
手っ取り早く携帯サイトを作成する時のhtmlテンプレート - webの人 @ryryo
最近phpをいじるがてら、ひさびさに携帯サイトに触れているためメモメモ。 携帯サイトで装飾を入れるとなるとi-cssが云々って話があったりしますが、正直テストサイトでそんな面倒なことをしていられないので、だいたい以下のようなhtmlで作成しています。 とりあえず携帯サイト作りたい時テンプレート <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/2.3) 1.0//EN" "i-xhtml_4ja_10.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Co
永久保存版！？携帯コーディング、これだけ読めばすぐできる！ | KAYAC
マークアップエンジニア（以下、ME）のtacamyです！(`・ω・´) カヤックでは、デザイナーもHTMLコーディングをしてくれています。 （いつもありがとうございます！） そんなワケで、本格的にHTMLコーディングはしないけど、 ちょこっとしたページなら組みますっていうデザイナー向けの、 「コレだけ読めばすぐできる」シリーズを始めました。 第一回は「携帯コーディング」についてです。 携帯はPCとは全くの別物なので、なんとなく敬遠しがちですが、 最低限の内容であれば覚えることも少ないですし、 一度覚えてしまえばスタンダードがしばらく変わらないので、覚えておいて損はないですよ！ 携帯コーディングの基本 基礎の基礎 文字コードはShift-JIS CSSはインラインで指定（タグに直接style属性を追加する） 画像を含むページ容量100KB以内（HTML自体の容量は9KB以内） 画像はgifか
携帯電話のIPアドレスリスト
最終更新: 2007-10-10 各キャリアの公式発表などから抽出したデータです。携帯端末からのアクセスは、リストのアドレスからランダムに来ます（同一端末からの連続アクセスでも、同一IPアドレスではない）。 DoCoMo[編集] iモードブラウザ 210.153.84.0/24 210.136.161.0/24 210.153.86.0/24 フルブラウザ 210.153.87.0/24 メール送信時（インターネット⇒iモード対応携帯電話） 203.138.180.0/24 203.138.181.0/24 メール受信時（iモード対応携帯電話⇒インターネット） 203.138.203.0/24 SoftBank[編集] 123.108.236.0/24 123.108.237.0/27 123.108.237.1 123.108.237.9 202.179.204.0/24 202.253
つらくないケータイWeb開発（1/2）－ ＠IT
第1回 つらくないケータイWeb開発 設樂 洋爾 2008/10/20 何かと注文の多い日本の携帯電話向けWebサイト構築。jpmobileで、Ruby on Rails流の、つらくない携帯Webサイトを開発しよう（編集部） 本連載では、Ruby on Rails（Rails）をすでに利用されている方を対象に、Rails用プラグインjpmobileを使って携帯向けWebサイトを構築する方法を紹介します。 jpmobileは日本の携帯電話向けのサイトを構築するときに生じる厄介事を、Ruby on Rails流のやり方に倣って解決するためのプラグインです。 Mobile web development that doesn't hurt 日本の携帯電話は「ガラパゴス」と称され、時にやゆされもするように、良くも悪くも独自の進化・発展を遂げてきました。現代人の生活に密着して存在する携帯電話は、位置
Docomo携帯の識別番号を取り出すのにutnと言う属性 - Docomo携帯の識別番号を取り出すのにutnと言う属性を... - Yahoo!知恵袋
Docomo携帯の識別番号を取り出すのにutnと言う属性 Docomo携帯の識別番号を取り出すのにutnと言う属性を､<A>タグとか､<fomu>タグについての質問 Docomo携帯の識別番号を取り出すのにutnと言う属性を､<A>タグとか､<fomu>タグにつけると言うことはわかりましたが､それをCGIなどに送った場合､どのように受け止めればいいのでしょうか？ Docomoのサイトに､ <HTML><HEAD><TITLE>utn</TITLE></HEAD><BODY> <FORM action="reqist.cgi" method=post utn> 名前 <INPUT type=text name=name size=15> TEL <INPUT type=text name=tel size=10> <BR> <INPUT type=submit name=送信> </FORM
しゃおの雑記帳 - 携帯サイト開発者のためのセキュリティ再入門
通勤電車で周囲を見渡せば大抵数台のスマートフォンを見つけられるようなご時世ですが、現実は日本の伝統的な携帯電話が多数派です。今もそんなガラケー向けWebサイトの開発案件は衰えることありません。 そんなガラケーサイトの開発者の間で話題になっている「セキュリティ対策」について、ガラケー界の現状をふまえた上でまとめてみます。 携帯電話のIPからのアクセスであることを前提としたセキュリティ対策はすでに無駄 ソフトバンク3Gのプロクシ情報は検索すればすぐに出てきます イー・モバイルのEMnetに至っては公開情報です サイトのソースもFlashのswfも画像もPCから丸見えだと思うべきです 危険な「かんたんログイン」 かんたんログインで使う契約者IDはあなたのサイトにも他のサイトにも同じものが送出されてます 悪意をもった人が他人の契約者IDをヘッダに乗せてかんたんログインのアクションを呼び出したらどう
しゃおの雑記帳 - 携帯サイトセキュリティTODOリスト
前回のエントリ “携帯サイト開発者のためのセキュリティ再入門” が割と広範囲にお読みいただけているようです。ありがとうございます。ただあの記事は単に列挙しただけなので「何をまずやればいいのか」具体的なものが見えてこない気がしますのでメモとして再構成してみました。前回書いたように「契約者IDによるかんたんログイン機能を撤廃しよう」がすぐにできるのであればいいですが、なかなかできないのが現実でしょうから、「緊急度の高い対策」から順に扱っていこうと思います。 契約者ID(UID)で認証しているサイトはすぐにやろう キャリアのIP帯、User Agent、UIDのペアを確実に検証するようにする 例えばドコモのIP帯 + ドコモのUser Agent + X-DCMGUID でのみ認証できるようにします。 もし [携帯電話のIP帯 (各キャリアのリストをマージしたもの) + ドコモの User Ag
携帯端末の個体識別情報(uid)取得方法
携帯サイトでユーザー認証をする方法はいくつかあります。 一番簡単なのは、ユーザ名とパスワードを使う方法です。 しかし、毎回入力するのはユーザにとっては面倒ですよね。 PCサイトならばクッキーを使ってこれらの情報を保存しておけるので 毎回入力する必要はありません。 しかし携帯サイトではクッキーが使えない(一部機種によって可能らしい)ので 別の手法を取ることを考えなくてはいけません。 そこで出てくるのが、携帯端末の個体識別情報(uid)を使うというやり方です。 携帯電話は電話番号と同じように、その端末を識別するIDのようなものを持っています。 これを利用すれば、アクセスしてきたのがどのユーザなのかを判別することが可能になるというわけです。 キャリアによって取得方法や制限などがあるので、以下に紹介します。 なお、個体識別情報はキャリアによって様々な言い方があるようですが ここでは便宜上「端末ID
モバイルサイト構築前に知っておきたいユーザビリティ10のポイント（第1回） | モバイルサイト構築のユーザビリティいろは
端末特性に応じたユーザビリティの考え方最も身近で、どこでも気軽に使えるインターネット端末となった携帯電話。端末の急速な普及とハイスペック化にともない、携帯電話向けインターネットサービスによるマーケティングが各企業で本格的に取り組まれるようになっています。PC向けWebサイトと同様、携帯向けWebサイト（以降“モバイルサイト”）の構築においても当然、ユーザビリティの高いサイトを構築することが各企業のビジネスによい影響をもたらすことは必然です。 しかし、モバイルサイトでは、これまで各企業が構築・運用してきたPC向けWebサイトと比べると、画面サイズや1ページで表示できるページ容量制限、キャリアごとの違いなど、モバイルならではの制約があります。それらを踏まえたうえで、どうすればモバイルサイトでユーザーにメッセージを正確に伝えることができ、ストレスなく利用できるユーザビリティの優れたサイトを実現で
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HisasAnn.com is for sale | HugeDomains
jQuery Mobile 1.1.0 日本語リファレンス
ケータイでの自動ログインの実装方法について教えて下さい。…