モバイルサイトの3キャリア共通CSSと最新コーディング事情 : LINE Corporation ディレクターブログ
こんにちは、「livedoor Blog」を担当している吉沢です。 スマホの登場で、すっかりケータイ (フィーチャーフォン/ケータイ/ガラケー) が日陰に追いやられた感がありますが、ケータイも毎年進化していて、モバイルサイトの開発が行いやすいケータイがユーザへ浸透してきています。 livedoor Blog では、スマートフォン分野に注力しながら、月間15億PV あるケータイ版のUI最適化にも引き続き取り組んでいます。今回は、livedoor Blog で採用した事例を元に、この先1〜2年のケータイ開発・運用に役立てられる、3キャリア共通の CSS から最新のコーディング事情を紹介したいと思います。 アクセスシェア〜ライブドアの場合 まずはどの世代のケータイをメインに開発して表示くずれを起こさないようにするか検討するため、アクセスシェアを把握します。 1年前と比べると、iモードブラウザ2.
jQuery Mobile使用時によく使うマークアップで日本語サンプルを作ったので配布します - かちびと.net
簡単なものですけど、jQuery Mobile でのマークアップ時によく使うっぽい UIのサンプル作ったので配布します。 簡単なチートシート代わりになるのでは 無いかと思ったのでシェアしてみよう かと。良かったら使ってください。 というのも、JQMの日本語サンプルの配布先を見かけなかったので、なかなかお困りの方もいらっしゃるんじゃないかなと。調べるの面倒ですし、手元にサンプルコードあったほうが何かと便利ですよね。 というわけで、以前マークアップサンプルの記事書いたときに作ったサンプルサイトに手を加えた物を丸ごと配布します。 流石にかなり出てるので今更説明不要かもですけど、ざっくり説明するとWebサイトをスマフォ向けに簡単に出来るjQueryプラグインです。 以下のサンプルで使用しているファイルが丸ごと梱包してあります。 サンプル※別窓 いちおうキャプチャ。 目次 サムネイル付きのサンプルと
永久保存版！？携帯コーディング、これだけ読めばすぐできる！ | KAYAC
マークアップエンジニア（以下、ME）のtacamyです！(`・ω・´) カヤックでは、デザイナーもHTMLコーディングをしてくれています。 （いつもありがとうございます！） そんなワケで、本格的にHTMLコーディングはしないけど、 ちょこっとしたページなら組みますっていうデザイナー向けの、 「コレだけ読めばすぐできる」シリーズを始めました。 第一回は「携帯コーディング」についてです。 携帯はPCとは全くの別物なので、なんとなく敬遠しがちですが、 最低限の内容であれば覚えることも少ないですし、 一度覚えてしまえばスタンダードがしばらく変わらないので、覚えておいて損はないですよ！ 携帯コーディングの基本 基礎の基礎 文字コードはShift-JIS CSSはインラインで指定（タグに直接style属性を追加する） 画像を含むページ容量100KB以内（HTML自体の容量は9KB以内） 画像はgifか
「これから携帯サイト作成」お役立ちサイト集 2010年version - Feel Like A Fallinstar
このブログは引用メインのまとめブログではないんですが、たまたま携帯サイトを個人的に1個作ることになったので、こんなエントリーを。 何だかんだ言っても、日本の携帯電話ってしばらくは生き延びる（＋普通に利用目的によってはスマートフォンより上）わけで、一度まとめておくと便利かな、ということで。 モバイルの利用状況とか、マーケ系 さすがに2010年のものばっかりはムリなので、ここ数年以内のもの中心で。 あんまり沢山見ても訳分からないので、絞りました。 携帯電話におけるインターネットおよび検索エンジンの利用状況（インデックス） 個人的にはもう少しGoogleが多いのかと思っていましたが、携帯でもYahooの方が多いんですね。 モバイルユーザー傾向DATABOX 2010年5月版 アクセス解析ソフトMyRTのデータが元になっていて、若干偏がありそう。 画像対応とか、ディスプレイサイズとか、最低限見てお
オレ標準JavaScript勉強会発表資料 - ockeghem's blog
Loading...での発表に用いた資料です。 お役に立つかどうかは心許ないのですが、ドキュメントの一部を希望されていた方もおられましたので、slideshareで公開します。 ガラケーで楽しむオレJSの勧めView more presentations from Hiroshi Tokumaru.
モバイルページ向けの画像をリアルタイムで作成するために「lsyncd」を使ってみた
2010年度5月分のGIGAZINEのアクセス解析結果でも述べられていますが、モバイル版GIGAZINE（http://m.gigazine.net/）の画像の大きさと画質を向上させました。その画像作成には「lsyncd」を用いています。 lsyncdはLinux 2.6.13から導入されたinotifyと呼ばれるファイルシステムイベント監視機構を用いてファイルを同期するためのデーモンで、最新の実装 (現時点で1.33) ではサブディレクトリの再帰的監視、監視ディレクトリを引数としたコマンド実行 (デフォルトではrsyncが実行される) が可能です。 本来、このlsyncdはコンピュータ間でのファイルの同期を行うためのものですが、この「監視ディレクトリを引数としたコマンド実行」の機能を用いて、縮小画像を作成するスクリプトをリアルタイムで作成するようにしてみました。 詳細は以下から。 lsy
モバイルユーザビリティ改善のチェックポイント保存版 - 全10回総まとめ（最終回） | モバイルサイト構築のユーザビリティいろは
2009年1月から連載してきた「モバイルサイト構築のユーザビリティいろは」も今回で最終回です。そこで今回は、今までの連載内容をおさらいしながら、モバイルサイト構築時におさえておきたいモバイルユーザビリティの総まとめをします。 前半では今までのおさらいをし、最後に自分でモバイルサイトのユーザビリティを改善するためのポイントを紹介します。 モバイルサイト構築時の基本チェックポイント公式サイトに関するポイントモバイルメールマガジンに関するポイントモバイルECサイト構築時のポイントモバイルFlashサイトの制作ポイント自分でできる！ モバイルユーザビリティ改善の3ステップモバイルユーザビリティ改善のケーススタディ1. モバイルサイト構築時の基本チェックポイント1-1. モバイル端末ならではの制約や特性を理解するモバイルサイトには、画面サイズや1ページで表示できるページ容量制限、キャリアごとの違いな
case:MobileDesign! モバイルサイトのデザイン紹介ブログ
case:MobileDesign! モバイルサイトのデザイン紹介ブログ 引っ越ししました。 http://case-mobile-design.com/ case:MobileDesign! モバイルサイトのデザイン紹介ブログ > 2010-02-15 >
case:MobileDesign! モバイルサイトのデザイン紹介ブログ
case:MobileDesign! モバイルサイトのデザイン紹介ブログ 引っ越ししました。 http://case-mobile-design.com/ case:MobileDesign! モバイルサイトのデザイン紹介ブログ > 2010-02-08 >
ウノウラボ Unoh Labs: 位置情報を取得してみる
こんにちは。ryosuke です。 先週からモバゲータウン内において、弊社の携帯まち育成ブラウザゲーム「まちつく！モバゲー版」の提供を開始しています。よろしければ遊んでみてください。 まちつく！は、まち育成シミュレーションゲームですが、育成だけではなく携帯電話の位置情報を利用したおみやげやスタンプといった機能があります。最近は海外でもGPS機能を搭載したスマートフォンが普及してきたためか、世界的に位置情報を利用したサービスが活発化し始めているようです。 NHKのTV番組ブラタモリと連携しているiPhoneアプリの「ブラアプリ」や、位置情報でつながる街情報SNS「foursquare」 が話題になったりしていていますね。位置情報自体は今更感があるのですが、個人的興味でにわかに位置情報がホットです。 携帯電話 位置情報の活用と言えば一番に思い浮かぶのが携帯電話ですね。基地局を利用した位置情報と
[携帯]フォントサイズ（XHTML版） │ これからゆっくり考L +α
フォントサイズ（HTML版）に引き続き、今回はXHTML版です。 CSSでフォントサイズを指定するので、こんな感じになります。 <span style="font-size:x-small;">文字文字</span> 各指定方法で、実際どのぐらいの大きさで表示されるのかをチェックしやすくするため、サンプルページをつくりました。 サンプルページを色々な端末で見てみると、だいたいどのサイズがいいかーというのが見えてくるかと思います。 サンプルページ QRコード →サンプルページを見る 各種フォントサイズと、ついでに太字のサンプルもおいております。 太字の指定方法はbとstrongとfont-weight:bold;です。 各キャリア、端末の表示 docomo 【大】xx-large,x-large 【中】large,medium 【小】small,x-small,xx-small ※全端末共通
asahi.com（朝日新聞社）：これも個性？ 壁面が巨大ＱＲコードのビル登場 - 携帯電話 - デジタル
壁面に巨大な「ＱＲコード」をデザインしたテナントビル＝東京都立川市錦町２丁目、上田潤撮影 携帯電話のカメラで読み込むＱＲコードをデザインしたビルが、東京都立川市にお目見えした。 飲食店などが入る予定の「エヌ・ビルディング」。正面のガラス壁の上部に縦横約９メートルの巨大なＱＲコードがプリントされている。携帯電話で読み取るとビルのサイトにつながり、各テナントの情報を得られる。 従来の看板では、街やビル自体の景観を損なう。またサイトを随時更新することで、テナントの最新情報を伝えることができるという。
テーブルを使ってauの「隙間」を消す | 株式会社シンメトリック公式ブログ - 携帯開発から生まれる技術情報
テーブルを使ってauの「隙間」を消す|株式会社シンメトリック公式ブログ - 携帯開発から生まれる技術情報| 携帯サイト開発から生まれる技術情報ブログ auでたびたび問題となる、画像とブロック要素の上下にある消せないマージン、いわゆる「隙間」について、その回避方法を紹介します。divタグを入れ子にすることで消す方法もありますが、今回紹介するのは別解という位置づけになるでしょう。使うのは、携帯サイトでは何かと御法度のように言われているtableタグです。 au隙間バグ回避方法 使うのはtableタグ tableタグは携帯で使えないのでは？と思った方もいると思います。そんなことはないんです。使えないと言っているのは携帯サイト制作のノウハウ本などだけで、実際はほとんどの端末がtableタグに対応しています。現在サービス中のau端末でtableタグ非対応機種はありません。 au隙間バグとはどんな現象
携帯サイト（html）の制作に入る前に確認しておきたいチェック項目 │ これからゆっくり考L +α
「デザインは素敵なんだけど、携帯でこれはちょっとできないなー」とか、「無理ではないけどできれば避けておいた方がいいよなー」っていうデザインがあがってくることが多い今日この頃。 モバイルコーディングをやり慣れている人じゃないとモバイルでできることできないこと、cssを使わないと実現できないこと、table使わないと実現できないこと、などが分かりにくいと思うので当然だとは思うのですが。 ですが、知っているのと知らないのとでは工数がかなり違ってきます。 一旦デザインして、コーダーにそれを見せて「ココとココとココは実現不可能。やり直してください。」で差し戻され、デザインをやり直してってなると、デザインも2度手間、デザインをチェックして無理な項目を洗い出すコーダーにも余計な手間がかかります。 今回洗いだした項目は、なんせ自分がコーダーなので、コーダーがデザインファイルをもらった時にバーッと見てチェッ
いままで iモードID(guid, 個体識別番号)は大文字・小文字の区別ありなことを意識していなかった - IMAKADO::BLOG
いわゆる、かんたんログインと呼ばれる認証方法をドコモ端末で実装するときにつかわれていると思われるiモードIDですが、大文字・小文字の区別あり、だということを今日初めて知りました。 以下、問題になった部分の最小構成。かんたんログインの是非はいったん置いておきます。 CREATE TABLE `user` ( id INTEGER UNSIGNED NOT NULL AUTO_INCREMENT, mobile_id VARCHAR(255) NOT NULL, PRIMARY KEY(id), UNIQUE INDEX user_mobile_id(mobile_id) ); INSERT INTO `user` (mobile_id) VALUES('xx0000x'); -- => Query OK, 1 row affected (0.06 sec) INSERT INTO `user
Googleで加速するモバイルサイトビジネス【第2回】あなたのサイトはなぜ検索されないのか
Googleといえば、さまざまなツールやサービスを提供しているが、やはりメインとなるのは検索サービスだろう。GoogleではPC向けだけではなく、ケータイ向けにも検索サービスを提供している。このケータイ向けの検索サービスは、年々重要度を増している。 とくにケータイの場合はPCと異なり、いつでもどこでも使えることがポイントとなる。テレビを見ながらや布団の中、あるいは最近増えつつある防水ケータイならば台所やお風呂場など、ケータイが使われる場面は多い。そういった場面で、ちょっと調べたいことや気になったこと、欲しいものがすぐに検索できてしまうのだ。 グーグル株式会社のソフトウェア エンジニアの向井淳氏は、「検索件数でいっても、PCと遜色のない量の検索がケータイから来ています。ケータイで検索するという行為は、より重要になりつつあります」と語る。 ケータイでのGoogle利用がそれだけ多いのであれば、
携帯電話向けWebアプリのセッション管理はどうなっているか - ockeghem's blog
最近購入したPHP×携帯サイト 実践アプリケーション集を読んでいて妙な感じがしたので、この感覚はなんだろうと思っていたら、その理由に気づいた。本書に出てくるアプリケーションは、PHPのセッション管理機構を使っていないのだ。そんな馬鹿なと思ったが、目次にも索引にも「セッション」や「session」という語は出てこない。サンプルプログラムのCD-ROM上で session を検索しても出てこないので、セッションはどこでも使っていないのだろう。 そうは言っても、本書にはブログやSNSなど認証が必要なアプリケーションも登場する。本書で採用している認証方式はこうだ。 携帯電話の個体識別番号を用いた、いわゆる「かんたんログイン」のみを使う 認証状態をセッション管理機構で維持しない。全てのページで毎回認証する そのため、「iモードID」など、ユーザに確認せずに自動的に送信されるIDを用いる つまり、全て
携帯XHTMLでの入力モードのまとめと、ちょっとしたハマりどころについて - 絶品ゆどうふのタレ
先日の勉強会での発表内容に関して、ke-tai.orgさんのところで入力モードについて突っ込まれたので、せっかくだし書きかけの記事をきちんとまとめてみることにしました。 元々、wideの%MobileStudyで入力モードの話が出た際、意外と情報が間違って知られていたりすることが多いようだったので、特にはまりやすいあたりを中心に、入力モード指定についてざっくりと書いておこうと思って、まとめたかけでそのまま放置していたｗものがあったんですが、それがベースです。 そんなわけで、記憶頼りが中心であんまり検証しないで書いてるので、間違いが含まれてたらごめんなさい。 では本題。 入力モードとは まず、入力モード指定って何のことかという話からすると、みんな携帯をいじる時に「全角かな」とか「数字」とか「英小文字」とかいろいろ端末の文字入力を切り替えると思うんですが、あれのことです。 サイトを作る時にin
携帯サイトで成果を出すためのアクションボタン配置【ユーザビリティTips】
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
絵文字対応表(DoCoMo)