モバイルサイトの3キャリア共通CSSと最新コーディング事情 : LINE Corporation ディレクターブログ
こんにちは、「livedoor Blog」を担当している吉沢です。 スマホの登場で、すっかりケータイ (フィーチャーフォン/ケータイ/ガラケー) が日陰に追いやられた感がありますが、ケータイも毎年進化していて、モバイルサイトの開発が行いやすいケータイがユーザへ浸透してきています。 livedoor Blog では、スマートフォン分野に注力しながら、月間15億PV あるケータイ版のUI最適化にも引き続き取り組んでいます。今回は、livedoor Blog で採用した事例を元に、この先1〜2年のケータイ開発・運用に役立てられる、3キャリア共通の CSS から最新のコーディング事情を紹介したいと思います。 アクセスシェア〜ライブドアの場合 まずはどの世代のケータイをメインに開発して表示くずれを起こさないようにするか検討するため、アクセスシェアを把握します。 1年前と比べると、iモードブラウザ2.
携帯サイト（html,table使用可）の制作に入る前に確認しておきたいチェック項目 │ これからゆっくり考L +α
前回のエントリー「携帯サイト（html）の制作に入る前に確認しておきたいチェック項目」では、tableを使わずにできるデザインでサンプルページを作成しました。 今回は「tableを使用してよい」という条件のもとで制作した場合、で考えてみます。 ただ、table非対応機種で見てもそこまでむごい崩れ方をしないように考慮して制作します。 デザイン、条件は前のエントリーと同様です。 前提条件は、 ・3キャリア1ソース ・html（CSSは使用不可） ・文字コード：Shift-JIS ・改行コード：CR LF 対応端末は、 ・docomo 901以降 ・au WIN端末 ・sb 3G です。 ※table非対応端末が含まれているがtableは使用してよいこととする。ただし、table非対応機種でもサイトの閲覧に支障がないようにすること。 チェックポイント tableが使えることによって前よりもチェッ
携帯サイト（html）の制作に入る前に確認しておきたいチェック項目 │ これからゆっくり考L +α
「デザインは素敵なんだけど、携帯でこれはちょっとできないなー」とか、「無理ではないけどできれば避けておいた方がいいよなー」っていうデザインがあがってくることが多い今日この頃。 モバイルコーディングをやり慣れている人じゃないとモバイルでできることできないこと、cssを使わないと実現できないこと、table使わないと実現できないこと、などが分かりにくいと思うので当然だとは思うのですが。 ですが、知っているのと知らないのとでは工数がかなり違ってきます。 一旦デザインして、コーダーにそれを見せて「ココとココとココは実現不可能。やり直してください。」で差し戻され、デザインをやり直してってなると、デザインも2度手間、デザインをチェックして無理な項目を洗い出すコーダーにも余計な手間がかかります。 今回洗いだした項目は、なんせ自分がコーダーなので、コーダーがデザインファイルをもらった時にバーッと見てチェッ
Top - FireMobileSimulator.org
FireMobileSimulatorはFirefox/Chrome版ともに配布・メンテナンスを終了しました。本ページの内容は記録のみの目的で残しています。 FireMobileSimulatorとは？ FireMobileSimulatorは、主要３キャリア（DoCoMo/Au/SoftBank）の携帯端末ブラウザをシミュレートして、モバイルサイト開発を容易にするために作成されたGoogle Chrome/Firefoxの拡張機能です。携帯端末のHTTPリクエスト、絵文字表示、位置情報送信機能などの動作をシミュレートすることができます。 モバイルサイトをPCで閲覧するために、従来からある方法として、キャリア公式シミュレータの使用、Proxyの使用、Firefoxのuseragentswitcher+modify headersの組み合わせ等、色々と手段はありましたが、これらの方法はそれぞ
[Rails] Railsで携帯サイトを作る時のまとめ - shohu33's diary
携帯サイトを作る際のまとめを記載しておく 携帯からのアクセスの時には、jpmobileを使用する jpmobileを使用すると携帯からのアクセスの時、コントローラーを切り替えられたり、session_idをURLに付与する事ができ、InvalidAuthenticityTokenエラーを防げたりする。 http://d.hatena.ne.jp/shohu33/20080825 携帯からのアクセスの際にコントローラ切り替え http://d.hatena.ne.jp/darashi/20061031/1162236300 あらかじめ携帯のコントローラーを作っておき、携帯からのアクセス時にリダイレクトするようにする。これはjpmobileがインストールされている事を前提とする。 以下引用 class PcController < ApplicationController before_fi
![[Rails] Railsで携帯サイトを作る時のまとめ - shohu33's diary](https://cdn-ak-scissors.b.st-hatena.com/image/square/35ec55e1cfffc298fc4befe62d148cb14f04d0da/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F13208692334729901932%2F12704591929883846786%2F1338469720)
携帯サイトのページコーディングでよく使うHTMLタグ 携帯サイトを作ろう！ -ちょっと詳しいモバイルサイトの作り方-
携帯サイトのページを作成する場合と、パソコン向けのページでは よく使用するHTMLタグがまったくといっていいほど異なります。 今回は携帯サイトを作成する際によく使うHTMLタグのご紹介です。 まずは、携帯ページとPC向けページについて、 使用頻度の高いタグを比較してみます。 □PC向け <A>リンクタグ <IMG>画像挿入タグ <P>段落タグ <DIV>汎用ブロックレベル <STRONG>論理強調タグ <Hx>見出しタグ <UL><LI>リストタグ <TABLE>テーブルタグ ■携帯サイト向け <A>リンクタグ <IMG>画像挿入タグ <DIV>汎用ブロックレベル <BR>改行タグ <FONT>フォントタグ <HR>区切り/水平線タグ <CENTER>中央揃え <MARQUEE>マーキータグ どうでしょう。だいぶ違っていますね。 AタグやIMGタグといった基本的なタグはPC向けもモバイル向
Docomo＋xhtmlだとアンカータグがウザい件。 - c/fe
いや初めて知ったんですが、Docomoでxhtmlだと、ページ内リンクが以下の書き方だと動かないんですね。 <a href="#a">goto a</a> hogehoge <a name="a"></a>なんと指定先として、nameプロパティじゃなく、idプロパティを使わないといけないという。 <a href="#a">goto a</a> hogehoge <a id="a"></a>まあ、これならこういう風に書けばいいじゃん、って思うんですが、 <a href="#a">goto a</a> hogehoge <a id="a" name="a"></a>これはコレでauで問題があるらしいですよ！（事実確認してませんが）アホか！ さらに、個人的な理由として、MceEditorでアンカーを指定すると、nameにしか入れてくれないので（まあ普通そうだよね）、これをどうにかせんといかん、と
高木浩光＠自宅の日記 - やはり退化していた日本のWeb開発者「ニコニコ動画×iPhone OS」の場合
■ やはり退化していた日本のWeb開発者「ニコニコ動画×iPhone OS」の場合 一年前、「退化してゆく日本のWeb開発者」という題で、ケータイWebの技術面での蛸壺化について次のように書いた。 iPhoneに契約者固有ID送信機能が搭載される日 （略）こうして退化してゆくケータイWebが、日本のスタンダードとなってしまい、いつの日か、PC向けの普通のインターネットまで、単一IDの全サイト送信が必須になってしまうのではないかと危惧した。 （略）iPod touchでNAVITIMEを動かしてみたところ、下の図のようになった。 （略）契約者固有IDがないとどうやって会員登録システムを作ったらいいのかわからないんじゃないのか……というのはさすがに穿ち過ぎだと思いたい。NAVITIMEからソフトバンクモバイルに対して、契約者固有ID送信用プロキシサーバの用意を要請している……なんてことがなけれ
ドコモで下の例のように、テキストの一部に背景色をつけたいのですが 例） http://mc.rumic.org/index.html この部分↓ <div style="font-size:smaller; bac…
ドコモで下の例のように、テキストの一部に背景色をつけたいのですが 例） http://mc.rumic.org/index.html この部分↓ <div style="font-size:smaller; background-color:#ffe0e0;"> <span style="color:#ff0080;">もばこまっ！</span>では、ケータイで手軽に読める数コマの笑えるマンガを掲載しています。お楽しみ下さい。 </div> ※全体の背景色に色をつけたいわけではありません。 bodyタグを対象にするのではありません。 ドコモで表示させるには、xhtmlで拡張子を.xhtmlにしなければならないことが分かりました。 ですが記載しているQRコードの関係で、拡張子が.htmlではないと非常にマズイのです。 いくつかのモバイルサイトを見ましたが、 例）http://mc.ru
音声投稿型コミュニティーサイト ニタコエ
歌える曲を教えてくれる他にいろんなアーチストに何パーセント似ているかを教えてくれます。 声を登録した際の気分も分かるので今の気分に合った曲選びができます。 ※利用料は無料ですがパケット通信費が発生します。 コミュニケーション手段として文字だけのつながりだけではなくニタコエは声でつながる事ができます。 声の掲示板やユーザー同士の声で相性がチェックできます。
モバイルサイトを使いたがらない人に、 モバイルサイトを使わせるには?（1/2）：MarkeZine（マーケジン）
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
Firefoxを使ってマルチプラットフォームで携帯サイトをエミュレート·FireMobileSimulator MOONGIFT
モバイルサイトの開発については、実機またはエミュレータ（シミュレータ）を使っての確認作業が多かった。だが公式に提供されるエミュレータはWindows用が多く、Mac OSXやLinuxでは不便な思いをしていた。またデバッグがPCで使うものとは異なるのが問題だった。 モバイルサイトのチェックに便利！ だがFireMobileSimulatorを使えばそんな心配は無用だ。Firefoxを使い、機能拡張を織り交ぜつつ開発を行えるようになる。 今回紹介するオープンソース・ソフトウェアはFireMobileSimulator、Firefoxを使った携帯エミュレータだ。 FireMobileSimulatorはFirefoxアドオンとして提供されるソフトウェアで、Docomo、au、ソフトバンクの3キャリアについてエミュレート機能を提供する。各キャリアごとに数機種登録されており、切り替えはメニューから
Firefoxを簡単に携帯エミュレータにするアドオン「FireMobileSimulator」が素晴らしい件について – 我流天性 がらくた屋
Firefoxを簡単に携帯エミュレータにするアドオン「FireMobileSimulator」が素晴らしい件について 2012 6/07 追記 2009/05/24) Webデザイナー向けの絵文字ライブラリを公開しました。 codecheck.in:PHP携帯絵文字表示ライブラリ(PHP埋込型・au絵文字名対応版)のダウンロードサイトはこちら ダウンロードや使い方の説明は上記のリンク先をご覧ください。 絵文字一覧表はこちら。 携帯開発者がずっと待望だったFirefoxのアドオンでの携帯シミュレーター、それがFireMobileSimulator！ 実際に携帯サイト(FDS)を表示してみたのが左の画像。 PHPでの携帯分岐処理も出てる（UserAgent） 絵文字変換にもちゃんと対応！ (絵文字コードをDocomoの絵文字で、imgタグで置換されます) オプションを見ると、機種固有IDとかG
Rails 2.1 で Shift-JIS - babie, you're my home
Rails 2.1 で、DBもビューもSJISの場合に、旧来の方法が使えることを確認した。 おさらい。 config/database.yml で、encoding を sjis に設定。 development: adapter: mysql encoding: sjis database: sjisapp_development username: root password: socket: /var/run/mysqld/mysqld.sock config/environment.rb の先頭で、KCODE を SJIS に設定。 $KCODE = "sjis" レイアウト(app/views/layouts/application.html.erb) はこんな感じで。 <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE ht
いまからでも遅くない！ ケータイデザインの基礎固め
いまからでも遅くない！ ケータイデザインの基礎固め：一撃デザインの種明かし（6）（1/2 ページ） 普段はPCサイトを作っているけど、ケータイサイトに興味が出始めた人向けの、初めてケータイのデザインハウツーです。日々変化するケータイデザインの基礎の基礎をご紹介 ケータイ機種のスペックが上がりデザイン表現の幅は広がっていますが、PCサイトに比べまだまだ容量やスタイル、キャリア対応などさまざまな制限があるのも確かです。 今回は、普段PCサイトを作っているけど、ケータイサイトに興味が出始めた人、初めてケータイのデザインに触れる人のための基礎固めとして、日々変化するケータイデザインの基礎の基礎をご紹介したいと思います。 誰でも最初は初心者だった！ ケータイデザインの基礎の基礎 ケータイの画面サイズを考える！ 一般的な画面サイズはQVGA（縦320px×横240px）ですが、最近ではQVGAワイド（
DoCoMoのCSSとXHTMLまとめ | 村式開墾日記
DoCoMoのCSS、XHTMLにはクセがあります。注意すべき点をまとめてみました。 これに関してはいろいろなサイトで論じられていますが、既出のネタや仕様書の内容も含めなるべく広範囲に渡って情報を集めました。 他のキャリアについてはまた書くと思います。 特に気をつけるべき点を先にまとめると、こんな感じです。 ・CSSはインラインでしか記述できない。 ・XHTMLが必須でかつ適切なContent-Typeヘッダを吐く必要がある。 ・istyle属性は使えない。 ・MARQUEEタグは使えない。 ・object要素によるFlashの埋め込みはiモード対応XHTML1.1から。 ・TABLEタグはiモード対応XHTML2.0以降でないと使えない。 ・GPS用の属性lcsはiモード対応XHTML2.1以降でないと使えない。 (DoCoMoに限った話ではない内容も含まれています) CSSの名称、記述
つらくないケータイWeb開発（2/2）－ ＠IT
case request.mobile when Jpmobile::Mobile::Docomo # for DoCoMo when Jpmobile::Mobile::Au # for au when Jpmobile::Mobile::Softbank # for SoftBank when Jpmobile::Mobile::Willcom # for Willcom when Jpmobile::Mobile::Emobile # for EMOBILE else # for PC end と書くこともできます。 jpmobileが提供するインターフェイスの雰囲気はつかめましたか。詳しい使い方は次回以降で説明していくことにして、本稿では残るjpmobileの機能の概略を紹介します。 ・端末位置情報の取得 携帯電話のGPS利用を支援するための機能です。位置情報を取得するために必要な
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webサイトをスマートフォン対応してと言われた時に見ておきたいサイトまとめ｜caraldo.net | WebとiPhoneとロードバイクが大好き！
http://q.hatena.ne.jp/1252999999の続きなのですが、モバイルサイトで、リダイレクトしたいのです。…
codecheck.in