モバイルサイトの3キャリア共通CSSと最新コーディング事情 : LINE Corporation ディレクターブログ
こんにちは、「livedoor Blog」を担当している吉沢です。 スマホの登場で、すっかりケータイ (フィーチャーフォン/ケータイ/ガラケー) が日陰に追いやられた感がありますが、ケータイも毎年進化していて、モバイルサイトの開発が行いやすいケータイがユーザへ浸透してきています。 livedoor Blog では、スマートフォン分野に注力しながら、月間15億PV あるケータイ版のUI最適化にも引き続き取り組んでいます。今回は、livedoor Blog で採用した事例を元に、この先1〜2年のケータイ開発・運用に役立てられる、3キャリア共通の CSS から最新のコーディング事情を紹介したいと思います。 アクセスシェア〜ライブドアの場合 まずはどの世代のケータイをメインに開発して表示くずれを起こさないようにするか検討するため、アクセスシェアを把握します。 1年前と比べると、iモードブラウザ2.
モバゲーのような携帯サイトを作るための12のTips 携帯ホームページを作ろう！ -ちょっと詳しいモバイルサイトの作り方-
当ブログが携帯サイト作成法に関する記事をかいていることから、読者の方から、 『モバゲーのような携帯サイトを作るためにはどうしたらいいんですか？』 っていう質問を最近良く受けます。 おそらく、モバゲーがとても有名で、ある種モバゲーが携帯サイト界のデファクトスタンダードのような 位置づけになってきているのでしょうか。 確かに、携帯サイトを作ってきている身としても、 モバゲーのサイトデザインにするには、結構難しいことも多いし、学ぶことも多い。しかし、最近の携帯サイトは、実機からしかアクセスできないようになっていて、PCからコードを覗くことができないことも多く、学ぶことも難しいようです。 ということで、今回は実際にモバゲータウンに携帯でアクセスして、携帯の画面を見ながら、デザインを真似て新しく自分なりに作ってみましたので、そこから得た経験をTipsとして公開したいと思います。 ちなみに、左のスクリ
-wap-input-format プロパティ(WAP 2.0 フィーチャフォンでの入力フォーマット指定 - CSS リファレンス
平成27年12月15日現在の定義です。 プロパティの定義 WAP 2.0 フィーチャフォンでの入力フォーマット指定。 定義のある水準 私的プロパティのため定義なし。 WAP 2.0 での定義 必須プロパティ。 対象メディア 対話型メディア。 対象要素 <input>要素 上位要素からの値の継承 無し。 WAP 2.0 フィーチャフォンでのプロパティ値 以下の文字をフォーマットに従って指定： 大文字の A 大文字英字か数字以外の記号 小文字の a 小文字英字か数字以外の記号 大文字の N 数字のみ 大文字の X 大文字英字, 数字及びその他の記号。小文字は不可。 小文字の x 小文字英字, 数字及びその他の記号。大文字は不可。 大文字の M デフォルトでは大文字英字入力だが、小文字入力も可。 小文字の m デフォルトでは小文字英字入力だが、大文字入力も可。 同タイプの文字を続けて入力してもら
ケータイサイト制作前にコーダーが確認しておきたいところ │ これからゆっくり考L +α
モバイルサイトの制作前に、もしくは打ち合わせに行った場合は必ずチェックしておきたいところをまとめてみました。 こちらから積極的に確認しないと、何も詳細が分からないままデザインだけぽーんと渡されてしまうことがあるので、自ら前のめりでチェックしておきたいところです。 個人的に「ここだけは外せない！」という項目は以下の6つ ・xhtml？html？ ・文字コードは？ ・tableは使ってOK？ ・絵文字は？ ・カタカナの扱いは？半角？全角？ ・VGA対応は？ xhtml？html？ 最近は基本xhtmlで作成という流れに（私の場合は）なってますが、それでも念のために一応聞いておきたいところ。 昔、xhtmlで作成してほぼほぼ終わった段階で「アップするサーバーでxhtmlが使えないのでhtmlに変更してください！」と言われてやり直したことがあります...。 文字コードは？ 携帯サイトといったらSh
携帯サイト制作のメモ。 ｜ MujuuLog
携帯サイトを制作したい時のメモ。個人的には比較的新しい機種に絞ったとしても、3キャリア共通で1つのファイルですませたい。 共通で作るには、CHTMLベースに各キャリアの共通部分のみのhtmlを使って簡単に書くこともできるが、最近じゃXHTML + CSSにするのが良いみたいだ。 CSSはauとSoftBankは外部cssに対応しているけど…Docomoが非対応なのでインラインで書くことになる。（Docomoも2009年5月モデルからは対応してるとか…） 1．XML宣言 <?xml version="1.0" encoding="Shift_JIS" ?> 2．DOCTYPE宣言 ■Docomo 推奨 <!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/2.0) 1.0//EN" "i-x
半角カナのなせる技～オシャレかつスマートに着飾る魅力 携帯サイトを作ろう！ -ちょっと詳しいモバイルサイトの作り方-
なんか、タイトルがアパレル業界の広告文言みたいになってしまった、、、 それはさておき。今回は「半角かな」を上手く使ってページを作成するという、有名な手法を紹介します。 半角カナをホームページのページ内に使うと、必ずや質問されること。 それは、、 「半角カナってホームページに使うと文字化けするから使っちゃいけないんでしょう？」 と言う質問。 いえいえ、半角カナはホームページ内の文章に使用したからといって文字化けすることはありません。文字化けを起こすのは、メールのデコード上の問題であり、HPの作成にはなんら問題はありません。 この点を理解していることが前提で話を進めますが、 携帯電話の画面いっぱいに表示できる文字数というのは、物理的な制約があります。1画面に表示できる最大の文字数は、液晶の大きさや解像度・表示サイズの設定等によっても左右されますが、あの小さな画面に表示できる文字数にはやはり限界
携帯サイトは半角カナが当たり前？！
半角カナにすると ・同じ内容の文章なら、全角よりはデータ量が少ないので、閲覧者の通信料金が微妙に安くなる ・１画面にたくさん文字が表示できる という利点があるのですが、すべての半角カナをきれいに表示させるような仕組みは、上級技（すべての携帯端末で表示されるようなコンテンツを作ったあと、すべての携帯端末で閲覧確認をするという、かなり体育会系作業で、工数もかかります）だと思います。 もともと、コンピュータは日本語をあつかえません。それを扱うためにいくつかの文字コード体系があります。 携帯電話端末に載っているブラウザの機種、サーバの中のアプリケーション、制作するパソコンなどにより使う文字コード体系がいろいろ違うため、表示結果が同じになるとは限りません。 半角カナはとくにコードが作られた頃にあまり考慮されなかった部分のようで、いろいろなところで文字化けしやすいようです。
携帯サイト（html）の制作に入る前に確認しておきたいチェック項目 │ これからゆっくり考L +α
「デザインは素敵なんだけど、携帯でこれはちょっとできないなー」とか、「無理ではないけどできれば避けておいた方がいいよなー」っていうデザインがあがってくることが多い今日この頃。 モバイルコーディングをやり慣れている人じゃないとモバイルでできることできないこと、cssを使わないと実現できないこと、table使わないと実現できないこと、などが分かりにくいと思うので当然だとは思うのですが。 ですが、知っているのと知らないのとでは工数がかなり違ってきます。 一旦デザインして、コーダーにそれを見せて「ココとココとココは実現不可能。やり直してください。」で差し戻され、デザインをやり直してってなると、デザインも2度手間、デザインをチェックして無理な項目を洗い出すコーダーにも余計な手間がかかります。 今回洗いだした項目は、なんせ自分がコーダーなので、コーダーがデザインファイルをもらった時にバーッと見てチェッ
ke-tai.org > Blog Archive > ケータイ3キャリアに対応するためのDOCTYPE宣言について
ケータイ3キャリアに対応するためのDOCTYPE宣言について Tweet 2009/10/14 水曜日 matsui Posted in 全キャリア対応, 記事紹介・リンク | 11 Comments » XHTMLを使ってケータイサイトを作成する際には、HTMLの冒頭にDOCTYPE宣言を記述する必要があります。 先日からこの「DOCTYPE宣言」に関するブログエントリーが人気を集めているようなので、当サイトも触れてみようと思います。 下記2つのサイトでは、どちらもif文でユーザエージェントを判定して、DOCTYPEを出し分けるという処理を紹介しています。 → ma-san.org 携帯サイトをHTMLではなくPHPで組むときのDOCTYPE分岐方法 [ma-san.org] → ある人のぼやき 携帯サイトのDOCTYPE分岐方法 [d.hatena.ne.jp] DOCTYPE宣言とは
モバイルサイトのWebデザイン15選
携帯、モバイルサイトの デザインってどうなってるのか 少し興味が沸いたのでモバイル サイトのキャプチャを取って アーカイブとしてまとめている モバイルデザインアーカイブさん から15のモバイルサイトで好きな デザインを15個厳選しました。 個人的なギャラリーとなっていますが、共感して頂ければ幸いです。キャンペーンサイトのデザインなどもあるので現在は確認出来ない事もあります。 FAT ONLINE SHOPPING 余計な情報を入れず、一番伝えたい事は画像にしてTOP絵にしています。 FAT ONLINE SHOPPING AEON Lake Town シンプルですが、画面の小さいモバイルサイトで情報を絞り込むのはかなりいいのでは。Ｆｌａｓｈで操作も軽快でした。 AEON Lake Town MOS BURGER モスバーガーのモバイルサイト、凄くいいですね。メニューも見やすいし、色使いもか
モバイルサイトを使いたがらない人に、 モバイルサイトを使わせるには?（1/2）：MarkeZine（マーケジン）
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
いまからでも遅くない！ ケータイデザインの基礎固め
いまからでも遅くない！ ケータイデザインの基礎固め：一撃デザインの種明かし（6）（1/2 ページ） 普段はPCサイトを作っているけど、ケータイサイトに興味が出始めた人向けの、初めてケータイのデザインハウツーです。日々変化するケータイデザインの基礎の基礎をご紹介 ケータイ機種のスペックが上がりデザイン表現の幅は広がっていますが、PCサイトに比べまだまだ容量やスタイル、キャリア対応などさまざまな制限があるのも確かです。 今回は、普段PCサイトを作っているけど、ケータイサイトに興味が出始めた人、初めてケータイのデザインに触れる人のための基礎固めとして、日々変化するケータイデザインの基礎の基礎をご紹介したいと思います。 誰でも最初は初心者だった！ ケータイデザインの基礎の基礎 ケータイの画面サイズを考える！ 一般的な画面サイズはQVGA（縦320px×横240px）ですが、最近ではQVGAワイド（
iモードブラウザ2.0の死角2
docomoがこの夏モデルから導入した「iモードブラウザ2.0」。CookieやReferer、JavaScript対応など従来より大幅に進化しているのは間違いないのですが、ちょっと気になることもちらほら。この記事では新たに導入された「VGA描画モード」について書いてみたいと思います。 実は今までのiモード端末では、画面がVGA（480×640）以上の解像度を持つ端末であっても、画像ファイルなどはQVGA（240×320）を想定して描画を行っていました。つまりVGA端末では画像が縦横2倍に拡大表示されていたわけです。これは従来のQVGA端末との互換性を優先した仕様ですが、せっかくのVGA解像度が生かされず、画像が粗く表示されてしまうという問題点もありました。 そこでiモードブラウザ2.0では、従来のQVGA描画モードに加え、画像ファイルなどをネイティブにVGA描画するモードが追加されました
ウノウラボ Unoh Labs: iモードブラウザ 2.0まとめ
こんばんは、五十川です。 ご存知の通り、5月以降に発売開始されたNTTドコモの携帯電話の殆どには、新しいiモードブラウザ 2.0が搭載されています。iモードブラウザの大幅な仕様の拡張はi-XHTMLの登場以来ということになりますが、iモードの登場から10年経って登場した新しいブラウザは、i-XHTMLのときよりも遥かに大きな、過去最大の変化を遂げています。 iモードブラウザ 2.0の詳細は、ドコモ公式のiモードブラウザ 2.0にまとめられています。以下では主要な変更点を確認していこうと思います。 キャッシュ容量拡大 1画面あたり読み込めるデータの最大量が、従来の100Kバイトから500Kバイトに、大幅に拡大されました。ご存知の通りiモードの場合この値は、画像などの外部リソースもすべてひっくるめた値ですが、iモードブラウザ 2.0では、新たにCSSファイルやJavaScriptファイルも外部
docomo i-modeブラウザ2.0 対応についての新機能・特徴と問題点や注意点について | ブログ | 携帯サイト制作・携帯システム開発・携帯サービス構築 VISHモバイル[愛知県名古屋市]
2009年5月19日、NTT docomo の夏モデルが発表されました。ただのニューモデルなら自分もそんなに気にしないのですが、ニューモデルと同時に、 i-modeブラウザ2.0 が発表されました。 JavaScript/Ajax、Cookie、Referer、VGA表示（480×640ピクセル）にも対応など、今後のモバイルサイト制作に大きく影響するキーワードが目白押しです。 docomoの携帯が遂にJavaScript対応！ 遂にと言うか、ようやく対応されました。これによってAjaxも利用可能になります。 具体的にサイトがどう変わるかと言うと、例えば折りたたみメニュー等が実装出来るようになります。 今までは１ページに占めるメニュー項目がやたら多かったり、目的のページまでの階層が深かったりしたりといった事が改善出来るので、より使いやすいサイトを作る事が出来ます。 Cookie(クッキ
“iモード2.0”はCookieやAjax、インライン動画に対応 － ＠IT
2009/05/19 NTTドコモは5月19日、Android端末を含む夏モデル18機種を発表すると同時にiモードブラウザの機能拡充を発表した。操作性や応答性を向上させたほか、JavaScript対応、最大ページサイズを100KBから500KBへ拡大させるなど、新しいコンテンツサービスやUIを実現するポテンシャルを感じさせる機能が満載だ（iモードブラウザ2.0新機能一覧）。 キャッシュ対応でiMenuを即時起動 使い勝手を向上させる変更として、まず、iMenu起動時間の短縮が挙げられる。これまで、iボタンを押してから実際にiMenuが起動して使えるまでタイムラグがあったが、キャッシュしたメニューを表示することで、即時表示を実現した。また、これまで使えなかった左右キーに対応。十字キーを使ったナビゲーションを可能とし、目的のリンクへたどり着きやすくした。 文字列のコピー＆ペーストも可能となり、
i-modeに置けるxhtmlにおいてのマーキーの配置について - OKWAVE
<div><img src="" alt="" title="" width="" height="" style="float:left;・・・" /><span style="display:-wap-marquee;">文字列</span><br style="clear:left;" /></div> xhtmlならば「marquee」は使えませんので上記の様に成る筈です。 style="-wap-marquee-style:scroll;" (behavior="scroll") style="-wap-marquee-style:slide;" (behavior="slide") style="-wap-marquee-style:alternate;" (behavior="alternate") style="-wap-marquee-dir:rtl;" (directi
携帯キャリア、「今後も利用したい」比率が最も高いのはNTTドコモ
各キャリアの夏モデル発表でにぎわっている携帯電話業界。ユーザーはキャリア各社にどのようなイメージを持っているのだろうか。 C-NEWS編集部では、各携帯キャリアに対するイメージを尋ね、コレスポンデンス分析（複数の変数間の類似度や関係の深さを調べるための手法で、結果を散布図の形で表す）を行った。その結果、NTTドコモは「安心できる」「通話品質が良い」、auは「女性向き」「エンタメサービスが充実している」、ソフトバンクは「新しいことに挑戦している」「利用料金が安い」といったイメージを持たれていることが分かった。 携帯電話の利用料金はいくらくらいなのだろうか。「最もよく利用している携帯電話機の利用料金は月額いくらですか？」と聞くと、平均月額料金は5379円。キャリア別に見ると、NTTドコモユーザーは5433円、auユーザーは5497円、ソフトバンクユーザーは5310円だった。 ユーザーはキャリア
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://groups.google.com/forum/#!topic/google-maps-api-japan/ilYdw2uXzwM
Mobile Web Design | Best Mobile Websites | Mobile Website Gallery