スマホサイト：Webアプリモードで意外と書かれていない落とし穴 - Kaleidoscope
ちょっと今回はまめ知識的な内容です。 最近、「iPhoneでWebアプリを作成」といった記事をよく見かけます。 （jQuery Mobileなどを利用した開発方法は置いといて） HTML5+CSS3+JavaScriptで一から作成する方法について、意外と肝心な注意点が抜けてるように思います。 とくに、よくmetaタグを使った「Webアプリモード（フルスクリーンモード）」にする方法が書かれていたりします。 <meta name="apple-mobile-web-app-capable" content="yes" /> これをやると、URLバーとかが無くなって、サイトがネイティブアプリっぽくなってかっこいいんですよね。 これで、サイトをアプリっぽく見せられる！ってちょっと興奮しちゃいますよね。 ただ、これって意外な落とし穴があるんです(￣▽￣;) 今回は、僕が知ってる大きな２つの注意点を
モバイルサイトの3キャリア共通CSSと最新コーディング事情 : LINE Corporation ディレクターブログ
こんにちは、「livedoor Blog」を担当している吉沢です。 スマホの登場で、すっかりケータイ (フィーチャーフォン/ケータイ/ガラケー) が日陰に追いやられた感がありますが、ケータイも毎年進化していて、モバイルサイトの開発が行いやすいケータイがユーザへ浸透してきています。 livedoor Blog では、スマートフォン分野に注力しながら、月間15億PV あるケータイ版のUI最適化にも引き続き取り組んでいます。今回は、livedoor Blog で採用した事例を元に、この先1〜2年のケータイ開発・運用に役立てられる、3キャリア共通の CSS から最新のコーディング事情を紹介したいと思います。 アクセスシェア〜ライブドアの場合 まずはどの世代のケータイをメインに開発して表示くずれを起こさないようにするか検討するため、アクセスシェアを把握します。 1年前と比べると、iモードブラウザ2.
実は厄介、ケータイWebのセッション管理
実は厄介、ケータイWebのセッション管理：再考・ケータイWebのセキュリティ（3）（1/3 ページ） “特殊だ”と形容されることの多い日本の携帯電話向けWebサイト。そこには、さまざまな思い込みや性善説の上しか成り立たないセキュリティが横行しています。本連載は、ケータイWebの特殊性をていねいに解説し、正しいケータイWebセキュリティのあるべき姿を考えます（編集部） 「Cookieを使えない端末」でセッションを管理する方法は？ 第2回「間違いだらけの『かんたんログイン』実装法」ですが、多くの方に読んでいただきありがとうございました。 今回は、前回に引き続き架空のSNSサイト「グダグダSNS」のケータイ対応を題材として、ケータイWebのセッション管理の問題点について説明します。携帯電話向けWebアプリケーション（ケータイWeb）のセッション管理は、かんたんログインよりも対策が難しく、厄介な問
jQuery Mobileとは――スマホ時代の到来とWeb制作 (1/3)
「jQuery Mobile」は、モバイルWebアプリケーションやスマートフォンサイトの構築でいまもっとも注目されているフレームワークです。jQuery Mobileを使えば、iPhone/Androidをはじめ、さまざまなスマートフォンのブラウザーに対応したスマートフォンサイトを手軽に制作できます。 jQuery Mobileを使ったスマホサイト制作の基本から実践的なテクニックまで、ベストセラー「Web制作の現場で使う jQueryデザイン入門」（Web Professional Books）の著者・西畑一馬さんが解説します。（編集部） 「jQuery Mobile」は、モバイルWebアプリケーションやスマートフォンサイトの構築でいまもっとも注目されているフレームワークです。jQuery Mobileを使えば、iPhone/Androidをはじめ、さまざまなスマートフォンのブラウザーに対
Pttrns — Mobile User Interface Patterns
Stay ahead of the curve and become a better interface designer. With a Pttrns membership, gain access to thousands of curated mobile design patterns, get online advice, and connect with other designers from all over the world. What you get UX and UI Patterns Learn and follow industry best practices that can be applied to your app to help ensure the best user experience possible. App database Save
1時間で携帯サイトをスマートフォン対応にする方法 | GREE Engineering
初めての投稿となります。エンジニアのmatsuです。 携帯向けウェブサイトを1時間でスマートフォン対応する方法を紹介します。 概要 2011年4月7日のニュースにて携帯電話の新規契約数のうち、スマートフォンが占める割合が50%を越え、スマートフォンが本格的に普及する兆しが見えてきました。 現在、スマートフォン向けサイトを新規構築するためのチュートリアルは数多く出ていますが、既存の携帯サイトをスマートフォンに最適化する方法があまり紹介されていないのでこの記事で紹介したいと思います。 このチュートリアルを行うと以下のようになります。 実装 全部で8ステップあります。 このチュートリアルではブログのトップページを例にとって説明します。 前半では文字コードの変更、HTMLの変更といった構造を変更します。後半では絵文字や文字スタイルを行い、仕上げとしてHTML5のバリデーションを行っていきます。最初
間違いだらけの「かんたんログイン」実装法
今回は、そのかんたんログインの問題点について説明します。 「契約者固有ID」を用いるかんたんログイン かんたんログインとは、携帯電話の「契約者固有ID」を用いたログイン手法です。 第1回で説明したように、携帯電話のブラウザのリクエストヘッダには契約者固有IDと呼ばれるIDを付けることができます。契約者固有IDは、携帯電話事業者によって詳細は異なりますが、すべての携帯電話事業者が対応しています。 図1は、NTTドコモの携帯電話がサポートしている契約者固有IDである「iモードID」がサーバに送信される様子です。この情報は、ユーザーがそれと意識することなく送信されます。携帯電話のかんたんログインとは、契約者固有IDのみを用いて認証を行い、ログイン機能を実現することです。 かんたんログインは、ベーシック認証のようにIDとパスワードを管理する必要もなく、Cookieのように対応する端末を考慮する手間
ke-tai.org > Blog Archive > デザインに優れたスマートフォンサイトのキャプチャを集めたサイト「iPhoneデザインボックス」とこの手のサイトのまとめ
デザインに優れたスマートフォンサイトのキャプチャを集めたサイト「iPhoneデザインボックス」とこの手のサイトのまとめ Tweet 2011/2/8 火曜日 matsui Posted in Android, iPhone, 記事紹介・リンク | 2 Comments » デザインに優れたスマートフォンサイトのキャプチャを集めたサイト「iPhoneデザインボックス」というサイトがオープンしたようです。 → 参考にしたい優れたiPhone(スマフォ)Webデザイン集 – iPhoneデザインボックス [design.web-hon.com] この手のデザインの参考になりそうなサイトのキャプチャを集めるという手法は以前からあり、幾つか同様のサイトがあります。 当ブログで過去にご紹介させていただいたことのあるサイトや書籍を改めてまとめてみました。 まず、恐らくこの手のサイトの元祖であると思われる
「jQuery Mobile」の登場で、モバイルアプリケーション開発は大きく変わる － Publickey
このところHTML5関連のモバイルアプリケーション開発について調べていて、先週の水曜日にはSwapSkills主催のイベント「jQueryモバイルで簡単！ スマートフォンサイト作成」に参加してjQuery Mobileについて勉強してきました。 jQuery Mobileとは、jQueryのプラグインとして利用するモバイルアプリケーション用のライブラリです。そしてその驚異的なまでの簡単さは、これから業務用のモバイルアプリケーションの作り方を一変させてしまう可能性を感じさせます。 jQuery Mobileの大きな特徴は次の3つです。 1）HTMLを書くだけでモバイルアプリケーションができてしまう 2）モバイルのユーザーインターフェイス対応の部品が多く揃っている 3）iOS、Android、WebOS、Windows Moblie、Symbianなどクロスプラットフォーム対応である 具体的な
後発なのに大ヒット 携帯ブログ「DECOLOG」がつかんだ“女心”
携帯電話向けブログサービス「DECOLOG」が、10代後半～20代の女性に支持され、月間60億ページビュー（PV）以上を稼ぐ人気となっている。月間ユニークユーザーは800万人。アクセスランキング上位のブロガーは、街で声をかけられたり、握手や写真を求められるほどの知名度という。 デコメ素材や写真を使ってユーザーがページをデコレーションできるのが特徴。出会い系やアダルト、コンプレックス商材の広告を掲載しないなど“健全さ”も売りだ。2007年2月にオープンし、当初はまったく流行らなかったが、08年4月ごろから口コミで広まり始めた。 ランチの感想に友達とのプリクラ、恋人のグチ――DECOLOGには若い女性の日常が詰まっている。他愛もない内容に思えるが「みんなそれぞれにストーリーがある。毎日こんな生活でこんなふうに頑張っているんだと知るうちにブログのファンになるんです」と、運営元ミツバチワークスの光
スマートフォン向けサイトの作り方エントリのまとめ:phpspot開発日誌
スマートフォン向けサイトの作り方エントリのまとめ。 スマートフォン元年といわれる2011年ですが、注目を集めているせいか、サイト作成法についてのエントリも盛り上がりをみせていますね。 個人的にもしっかり覚えておきたかったのでまとめてみました。 基本的には解像度が大きく異なるので、それにあったインタフェースに変えましょうね、という点と、HTML5/CSS3が使えるので駆使して楽にＵＩデザインしましょうという点、ユーザインタフェースがマウスではなくタッチである、という３点以外は、普通のサイト作りと変わりませんが、クセやバグがあったり、テクニックもあるので、しっかり押さえておきたいですね。 基本 スマートフォン向けサイトの作り方｜ユージック サイトの幅、高さ viewportによるズーム指定の方法 便利なJSライブラリ ユーザエージェント シュミレーター 等の有用情報 Androidサイトは横幅
モバイル開発に欠かせないテストツール14選
Adobe Device Central CS5 Adobe CS5 をパッケージ購入すると一緒についてくるモバイルデバイスのテスト環境。様々なエミュレーターが存在しますが、オールインワンで素早くテストがしたい場合はこちらがオススメです。特に Flash を活用したモバイルサイトをテストするのであれば欠かせない存在です。 Android SDK Javaで開発されているので、Mac, Windows, Linux で動作する公式のエミュレーター。2011年1月現在、Android OS 1.1 〜 2.3 までのテストが可能。エミュレーターは実際のスマートフォンと同じ動作をするので、ディフォルトのブラウザだけでなく、Opera Mini や Firefox など他のブラウザをインストールしてテストすることができます。 iOS SDK XCode も含め諸々ダウンロードしなければいけませんし
なぜGREEの無料ゲームで3000円の釣竿が売れるのか？
こう疑問に思っている人は少なくないのではないだろうか？はてなブックマークではその答えを出しているかのような記事がいくらか人気を集めているが、どうにも納得できなかった。例えば、「GREEで検索、無料です」と謳うGREEの釣りゲームでは、数回使うだけで折れる釣竿アイテムが2,100円。価格設定が理不尽なこと極まりない。まともな判断力があれば、こんな釣竿アイテムは絶対に購入しないだろう。いや、そもそもこんな不条理な設定になっているゲーム、最初からやる気もしないかも知れない。こんなアイテムを購入しているのはあのときお婆ちゃんの手を取って店に入ってきた少年のように数もろくに数えられない少年ばかりなんじゃないかしらんと思ってしまう。親は無料だと思って携帯ゲームを子供にやらせてたら、二桁の数字すら数えられない子供が知らない間にアイテムを購入する。そして、翌月とその翌月にはとても高額な請求書がキャリアから
Flash Liteで嘆かないための3つのコーディングTips（2/3）- ＠IT
連載で何度もお伝えしているとおり、Flash Lite 1.1では、メソッドの定義ができません。フレームスクリプトを動作させる方法としては、gotoAndPlay()やgotoAndStop()、tellTarget()などが思い浮かびますが、どれも、フレームを飛び越えて、処理が走ってしまいます。 しかし、させたい処理がそのフレーム上にあるとは限りません。この場合多くのFlash開発者の方々は、「function xxx():void」のように自分で定義したメソッドを呼ぶでしょう。しかし、このようなメソッドの定義ができません。フレームとは関係のない処理を走らせたいときは、call()メソッドを使います。call()メソッドは、以下のように書きます。 これで、所定のフレームラベルの書かれたところにある処理を実行できます。今回は、市松模様のサンプルの処理系を外出しにしてみましょう。 まずは、f
高木浩光＠自宅の日記 - かんたんログイン方式で漏洩事故が発生
■ かんたんログイン方式で漏洩事故が発生 ガラケーからiPhoneに乗り換えた人々が「ガラケーサイトが見れない!!」とご不満らしいという話は、聞いたことがあったし、そういう方々向けに「ガラケーサイトを閲覧できる」と謳うスマホ用の専用ソフトが提供されたというのも、どこかで見た記憶があった。 そんな10月9日の夜遅く、ある方から、「iPhone用のSBrowserというアプリで、クロネコヤマトのサイトを使ったら、知らない人の個人情報が出てきてびっくりした。どうしたらいいか」という相談が舞い込んできた。 早速、iTunes Appストアで「SBrowser」の商品説明ページを見に行ったところ、数々の雑言レビューが付いており（図1）、この種のアプリの需要とユーザ層が見えた。
月間60億ページビューを誇るケータイ・ブログサービス”DECOLOG”のストーリー前編 【三橋ゆか里】 | TechWave（テックウェーブ）
［読了時間：7分］ DECOLOG（デコログ）というケータイ・ブログサービスをご存知ですか？TechWave読者には初めて耳にする方も多いかも？DECOLOGは月間ページビューが60億、10代後半から20代前半の女の子に圧倒的に支持されるケータイ・ブログサービスです。モバイルページビューは、ミクシィやモバゲー、Yahoo!モバイルに次ぐ規模。そんなDECOLOGを運営するミツバチ・ワークスの代表取締役で、TSUTAYAオンラインの立ち上げメンバーでもあった光山一樹さんにお話を伺ってきました。今回の取材はとっても新鮮でした。一言で表現しようとすると、どうしても便利な「ギャル」って言葉になってしまうけれど、実際のブロガーはそれくらいの年齢層の普通の女の子。そんな彼女たちのお話を聞いていたら、ある意味外国より異文化かもなんて思っちゃいました。新規ブロガー登録が数件だったサービス開始当初から、月間
問題点の概要 - 「PHPで作成する携帯会員サイトの基本」の諸問題(1) - 徳丸浩の日記
_問題点の概要 CodeZineから発表されている「PHPで作成する携帯会員サイトの基本」という記事はツッコミどころ満載で、既にいくつかの問題が修正されているのだが、まだ残っている問題があることや、修正内容にも疑問があるので、いくつか指摘してみたい。ざっと書いたところ、ものすごく長くなりそうだったので、小出しで「連載」の形で書く。忙しいので途中でやめるかもしれない。今回は、問題点の概要を報告する。 くだんの記事をざっと見たところ、以下の問題を見つけた。 IPアドレス制限のない「かんたんログイン」 Net_UserAgent_Mobileを用いて携帯電話の端末IDを取り出し、かんたんログインを実装しているが、ゲートウェイのIPアドレス経由であることを確認していない。以下のリストは、端末IDを取り出しているところ（4ページ目）。 $agent = Net_UserAgent_Mobile::s
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
sp-web.jp
case:MobileDesign! モバイルサイトのデザイン紹介ブログ
YOMIURI ONLINEに掲載された「iPhoneで人の情報丸見え」記事について、当事者から。
