モバイルサイトの3キャリア共通CSSと最新コーディング事情 : LINE Corporation ディレクターブログ
こんにちは、「livedoor Blog」を担当している吉沢です。 スマホの登場で、すっかりケータイ (フィーチャーフォン/ケータイ/ガラケー) が日陰に追いやられた感がありますが、ケータイも毎年進化していて、モバイルサイトの開発が行いやすいケータイがユーザへ浸透してきています。 livedoor Blog では、スマートフォン分野に注力しながら、月間15億PV あるケータイ版のUI最適化にも引き続き取り組んでいます。今回は、livedoor Blog で採用した事例を元に、この先1〜2年のケータイ開発・運用に役立てられる、3キャリア共通の CSS から最新のコーディング事情を紹介したいと思います。 アクセスシェア〜ライブドアの場合 まずはどの世代のケータイをメインに開発して表示くずれを起こさないようにするか検討するため、アクセスシェアを把握します。 1年前と比べると、iモードブラウザ2.
携帯サイト用３キャリア対応XHTMLテンプレートで中小規模のサイトを作る！ - digilog.blog
⇒【最新版】携帯サイトテンプレートをダウンロード 携帯サイトを作る場合に、キャリアごとの仕様や、端末ごとの特徴を全て把握することはあまり現実的ではありません。仮に全てを把握したとしても、一つのファイルで全端末を完璧にカバーする携帯サイト用ウェブページを作ることは非常に困難な状況です。 今回は携帯サイトを作る際に、なるべく無駄な作業が発生しないように、簡単にXHTML+CSSの携帯サイトを作れるやり方を説明します。 あくまで現時点でベターなやり方なので、「もっとこうしたらいいよ」というアドバイスやツッコミがあれば受け付けます。 それぐらい今の携帯サイト制作は曖昧な部分が多いので、皆様もネット上で拾った知識は参考程度に受け止め、是非「自分流」を作り出して欲しいと思います。 ソースのサンプルとテンプレートダウンロードは以下から。 各キャリアごとに最適化されたファイルを用意し、ユーザーエージェント
ケータイサイトのtableタグの特徴と、5つのデザイン例＆ソース : LINE Corporation ディレクターブログ
※文中のケータイ livedoorのPVに誤りがあり、修正いたしました (2010/9/22) こんにちは、『プチペット』を担当している吉沢です。 Webサービスのケータイ対応がやっと当たり前になってきたかと思ったら、今度はスマートフォンの対応と、モバイル業界の時の流れはものすごく速いですね。 そんな中、ケータイは新しい端末のシェアが増えていく度に、サイトで表現できる自由度が高くなり、単に作るだけではなく、デザインで差をつける時代が来ています。 それが読み取れる世の中の動きとして、たとえばモバイルデザインアーカイブさんは、年鑑が出るくらい書籍・サイト共に人気ですよね。また、ちょっと前に発売された書籍『ケータイサイト解体新書 デザインパターンから理解する実装テクニック』は、いろいろなデザインパターンからHTMLを引けるため、デザインをする上でとても参考になります。 携帯サイト年鑑2010 著
永久保存版！？携帯コーディング、これだけ読めばすぐできる！ | KAYAC
マークアップエンジニア（以下、ME）のtacamyです！(`・ω・´) カヤックでは、デザイナーもHTMLコーディングをしてくれています。 （いつもありがとうございます！） そんなワケで、本格的にHTMLコーディングはしないけど、 ちょこっとしたページなら組みますっていうデザイナー向けの、 「コレだけ読めばすぐできる」シリーズを始めました。 第一回は「携帯コーディング」についてです。 携帯はPCとは全くの別物なので、なんとなく敬遠しがちですが、 最低限の内容であれば覚えることも少ないですし、 一度覚えてしまえばスタンダードがしばらく変わらないので、覚えておいて損はないですよ！ 携帯コーディングの基本 基礎の基礎 文字コードはShift-JIS CSSはインラインで指定（タグに直接style属性を追加する） 画像を含むページ容量100KB以内（HTML自体の容量は9KB以内） 画像はgifか
携帯サイトを作成して公開した直後に知っておきたいこと | ウェブ力学
携帯サイトを作成したのはよいけど、検索エンジンにインデックスされない、アクセス解析ツールがうまく導入出来ない、といった悩みを抱えている人もいるのではないかと思います。 ここでは、携帯サイトの作成が一通り完了して、これから運用に入る際に是非とも知っておきたいことをまとめました。 携帯サイトを作成したばかりの人、これから携帯サイトを作成しようと思っている人向けの記事になります。 「0からモバイルSEOを学ぶ上で役に立った記事」と重なる部分もありますが、ご了承ください。 QRコードの作成 PCサイトを持っている場合、PCサイトに携帯サイトのQRコードを掲載することで、PCユーザーを携帯サイトに誘導させることが可能です。 QRコードは以下のサイトで簡単に作成することが出来ます。 ⇒ QRコード作成＆活用のススメ 【無料でQRコード】 検索順位の確認 検索エンジンごとの検索順位を確認したい場合、毎回
ゼロから学ぶGoogle Analytics 携帯版
本記事の情報は2009年11月時点でのものです。※現在においては参考にされないで下さい。あくまでいち資料としてどうぞ。 Google Analytics 携帯版とは Google Analytics は、本来JavaScriptをベースとしたトラッキングをします。したがって、国内の多くの携帯電話搭載ブラウザでは、測定出来ませんでした。 しかし、この度発表されましたGoogle Analytics携帯対応は、＜IMG＞タグを使って計測する、他社携帯解析ツールと同等のトラッキング方法を実現しました。 携帯トラッキングの必要環境 画像のやりとりをして、より多くの情報を測定するために、独自プログラミングによる疑似的な画像表示をしています。 したがって、サーバー側で以下の実行環境が備わっている必要があります。 PHP Perl JSP ASPX トラッキングコードの取得 グーグルアナリティクス管理画
エリクサーサポート
TOP 販売終了に関するお知らせ 2017.04.01 ELIXIR5、エリクサー・ユニバーサル の販売を終了しました。 2017.01.31 ELIXIR5、エリクサー・ユニバーサル 販売終了のお知らせ サポート情報 2020.02.26 対応端末一覧を更新しました。 2020.02.26 ソフトウェアアップデート・リリースのお知らせ(Ver. 2.265) 2020.01.08 ソフトウェアアップデート・リリースのお知らせ(Ver. 2.264) 2019.12.19 年末年始の製品サポートに関するお知らせ 2019.12.13 対応端末一覧を更新しました。 2019.12.13 ソフトウェアアップデート・リリースのお知らせ(Ver. 2.263) 2019.10.15 iPhone 11/11 Pro/11 Pro Maxへの対応のお知らせ 2019.08.27 対応端末一覧を更新し
文字列URLエスケープ
以下にURLエスケープしたい文字列を記入し、〔Shift_JIS変換〕または〔UTF-8変換〕ボタンを押してください。 英数字以外は、全てURLエスケープされます。
mailto:について
携帯電話内部のメールクライアントソフトを呼び出すものです。 現在、すべての携帯端末で、mailto:〜によるメールクライアント起動・メール送信先初期設定がサポートされています。 subject（メール題名）・body（メール本文）の初期設定に関してはサポートしていない機種がありますが、最近の機種はいずれもサポートしていると考えて良いと思います。 cc（同報）やbcc（匿名同報）をサポートしている端末もあります（下記表参照）。 ただし、これらの指定はあくまでデフォルト指定であり、ユーザー側で編集することができます。 題名等、固定化したいのであれば、フォームメール等のCGIスクリプトを使用する必要があります。 【参考サイト】 EZfactory mailto:の指定方法 http://www.au.kddi.com/ezfactory/tec/spec/wap_tag9.html
3キャリア対応ケータイXHTMLのTIPS 8つ : アシアルブログ
という素敵仕様なので、泣く泣く各タグ内にstyle属性を書きます。 どーしても我慢できない場合は、外部スタイルシートをインライン展開するようなフィルターを作成するとかでしょうか。ググッてみたら、HTML::DoCoMoCSSというPerlモジュールを作成されている方もいらっしゃいました。 ■画像形式 GIFとJPEGであれば大丈夫なようです。 ・iモード対応コンテンツ作成時の仕様 | サービス・機能 | NTTドコモ ・KDDI au: 技術情報 > 機種別情報一覧 ・ソフトバンク 端末情報 Part1 ～ ソフトバンク 端末情報 Part4 ・Mobile Creation 対応フォーマット一覧 ただ、SoftBankの場合、 ソフトバンク 端末情報 と気になる記述があったりするのですが、この2機種は、 ・V801SHをご利用のお客さまへ ・V-NM701/V801SAをご利用のお客さま
「携帯用ページ」の作り方
はじめに 本連載では、Web標準のメリットを最大限に活かすことをテーマに、仕様書には書かれていない部分を中心に取り上げ、実際のWeb制作現場で起こり得る問題について、解決の糸口を紹介しています。 多様なデバイス向けのページ制作として、前回は印刷用ページの作り方を紹介しました。連載第6回目となる今回は、携帯電話向けページの作り方を扱います。 携帯電話の国内3大キャリアと言えば、NTTドコモ、au by KDDI、ソフトバンクモバイルですが、それぞれに仕様が異なり、すべてのキャリアに対応させるには工夫が必要です。キャリアごとにページを作成し、ユーザーエージェントで振り分ければ、精度の高いデザインを再現できますが、それなりの制作・運用コストがかかってしまいます。本稿では、なるべくコストをかけずに3キャリアに対応した携帯サイトを制作・運用する方法を紹介します。 対象読者 XHTMLとCSSの基本を
[Think IT] 第1回：携帯サイトとPCサイトはここまで違う！ (1/3)
XHTML Mobile Profileに対応したHTML 本連載では、「PCサイトを制作してきたけど、携帯サイトは初めて」といった企業や個人クリエイター向けにPCとモバイルの違いなどをふまえ、携帯サイトを公開するまでの入門的なノウハウを紹介していきます。 まず、今回はHTMLの種類やタグ、CSSなど携帯ブラウザによる違いと、画面サイズやキャッシュ容量などの端末による違いについて紹介していきます。 では、早速携帯サイトを作る上でマークアップの基本となるHTMLについて説明します（図1-1）。携帯電話はPCと比べても非常に早い進化を遂げてきたため、どれも基本はHTMLを基準に作られていますが、携帯ブラウザ（iモード、EZweb、Yahoo!ケータイ）で表示可能なHTMLの仕様には実に多くの種類が存在します。 現在市場に出回っている機種ということに限定すれば、XHTML Mobile Prof
モバゲーのような携帯サイトを作るための12のTips 携帯ホームページを作ろう！ -ちょっと詳しいモバイルサイトの作り方-
当ブログが携帯サイト作成法に関する記事をかいていることから、読者の方から、 『モバゲーのような携帯サイトを作るためにはどうしたらいいんですか？』 っていう質問を最近良く受けます。 おそらく、モバゲーがとても有名で、ある種モバゲーが携帯サイト界のデファクトスタンダードのような 位置づけになってきているのでしょうか。 確かに、携帯サイトを作ってきている身としても、 モバゲーのサイトデザインにするには、結構難しいことも多いし、学ぶことも多い。しかし、最近の携帯サイトは、実機からしかアクセスできないようになっていて、PCからコードを覗くことができないことも多く、学ぶことも難しいようです。 ということで、今回は実際にモバゲータウンに携帯でアクセスして、携帯の画面を見ながら、デザインを真似て新しく自分なりに作ってみましたので、そこから得た経験をTipsとして公開したいと思います。 ちなみに、左のスクリ
モバイルサイト構築前に知っておきたいユーザビリティ10のポイント（第1回） | モバイルサイト構築のユーザビリティいろは
端末特性に応じたユーザビリティの考え方最も身近で、どこでも気軽に使えるインターネット端末となった携帯電話。端末の急速な普及とハイスペック化にともない、携帯電話向けインターネットサービスによるマーケティングが各企業で本格的に取り組まれるようになっています。PC向けWebサイトと同様、携帯向けWebサイト（以降“モバイルサイト”）の構築においても当然、ユーザビリティの高いサイトを構築することが各企業のビジネスによい影響をもたらすことは必然です。 しかし、モバイルサイトでは、これまで各企業が構築・運用してきたPC向けWebサイトと比べると、画面サイズや1ページで表示できるページ容量制限、キャリアごとの違いなど、モバイルならではの制約があります。それらを踏まえたうえで、どうすればモバイルサイトでユーザーにメッセージを正確に伝えることができ、ストレスなく利用できるユーザビリティの優れたサイトを実現で
これからゆっくり考L +α
先日から提供が開始されたAdobe Creative CloudのCCシリーズ。 とりあえず色々インストールしてみました。 まだそんなにガッツリと使い込んではいないのですが、Photoshop CCでぐっときた機能をご紹介。 透過pngで書きだしたい画像に乗算やオーバーレイや焼きこみカラー...などなど、描画モードが「通常」以外のものが使われていること、ありますよね？ 書きだしてから 「あれ...なんかデザインと違う...まさか...。あーやっぱり乗算だったー（泣」 っていうこと、ありますよね？（私だけですか...） 自分でちょちょいと修正できるときはいいんですけど、どう考えても無理な時とか、あまりに色々なところに乗算などを使われていると、 「次からはできればもうちょっと気をつけていただけるとありがたいです！」 と言いたい。 がしかし、なんで描画モード変更しちゃいけないの？と言われるとうま
携帯サイトを作る時に役立ちそうな情報まとめ - かちびと.net
Tips携帯サイト構築 どうもTwitterやってるとiPhoneや Androidなどのスマートフォンの 話題ばかりなので忘れそうですが、 携帯サイトはビジネスには必須 ですので備忘録として記事に。 ちょっと必要に迫られたのでメモ。 どうもTwitterやってるとiPhoneや Androidなどのスマートフォンの 話題ばかりなので忘れそうですが、 携帯サイトはビジネスには必須 ですので備忘録として記事に。 以前にも何度かまとめ記事が話題に上がっているので今更感も否めませんが自分のブログにあったほうが探しやすいのでメモします。 予備知識モバイルサイト構築前に知っておきたいユーザビリティ10のポイント ファーストビューの重要性、色の大事さ、リンク操作に関して記載されています。 モバイルサイト構築前に知っておきたいユーザビリティ10のポイント 携帯サイト（html）の制作に入る前に確認してお
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
