1時間で携帯サイトをスマートフォン対応にする方法 | GREE Engineering
初めての投稿となります。エンジニアのmatsuです。 携帯向けウェブサイトを1時間でスマートフォン対応する方法を紹介します。 概要 2011年4月7日のニュースにて携帯電話の新規契約数のうち、スマートフォンが占める割合が50%を越え、スマートフォンが本格的に普及する兆しが見えてきました。 現在、スマートフォン向けサイトを新規構築するためのチュートリアルは数多く出ていますが、既存の携帯サイトをスマートフォンに最適化する方法があまり紹介されていないのでこの記事で紹介したいと思います。 このチュートリアルを行うと以下のようになります。 実装 全部で8ステップあります。 このチュートリアルではブログのトップページを例にとって説明します。 前半では文字コードの変更、HTMLの変更といった構造を変更します。後半では絵文字や文字スタイルを行い、仕上げとしてHTML5のバリデーションを行っていきます。最初
スマートフォン向けサイトの作り方 | ユージック
スマートフォン向けサイトの作り方 2011年1月22日 iPhoneとAndroid両方に対応するスマートフォン向けサイトの作り方をまとめてみました。 スマートフォン向けサイト作成にあたっての基本概要 まず最初にスマートフォン向けサイトを作成する際に気になる点は画像の扱いだったりすると思います。 横幅ですが、解像度は機種によって様々ですが、縦向きで320px～640px、横向きで480px～960pxが主流となります。 標準となるものを設けるとなると、320px(横)/480px（縦）を標準として良いかなと思います。 ※iPhone4、4Sは640px/960pxの解像度ですが、内部解像度で320px/480pxと解釈してくれるため。 ですので、クライアントに見せるデザインカンプなどを作成する際も縦を標準とする際は320px（横）で作成すれば問題ないといえますが、iPhone4、4SやAn
[携帯]xhtmlのリンク指定方法〜cssとbodyの違い │ これからゆっくり考L +α
結論から言ってしまうと、「bodyとcss、どちらで指定しても見え方は一緒」です。 <body link="#5994FF" vlink="#59E2FF"> <style type="text/css"> <![CDATA[ a:link{color:#5994FF;} a:focus{color:;} a:visited{color:#59E2FF;} ]]> </style> サンプルページ →サンプルページを見る bodyに指定してもCSSに指定してもどっちも変わらないなら別にどっちでもーじゃん？ って思うんですが、CSSを使って一工夫するとちょっとだけよくなる！っていうのをご紹介します。 まずは予備知識として docomoのiモードブラウザ1.0では、CSSを使う場合はインラインに記述する必要があったのですがく（リンクの疑似クラスのみhead内に記述することができます）、iモード
携帯サイトを作る時に役立ちそうな情報まとめ - かちびと.net
Tips携帯サイト構築 どうもTwitterやってるとiPhoneや Androidなどのスマートフォンの 話題ばかりなので忘れそうですが、 携帯サイトはビジネスには必須 ですので備忘録として記事に。 ちょっと必要に迫られたのでメモ。 どうもTwitterやってるとiPhoneや Androidなどのスマートフォンの 話題ばかりなので忘れそうですが、 携帯サイトはビジネスには必須 ですので備忘録として記事に。 以前にも何度かまとめ記事が話題に上がっているので今更感も否めませんが自分のブログにあったほうが探しやすいのでメモします。 予備知識モバイルサイト構築前に知っておきたいユーザビリティ10のポイント ファーストビューの重要性、色の大事さ、リンク操作に関して記載されています。 モバイルサイト構築前に知っておきたいユーザビリティ10のポイント 携帯サイト（html）の制作に入る前に確認してお
[携帯]リンク色の指定方法、フォーカス時の各キャリア表示差異 │ これからゆっくり考L +α
モバイルサイトでリンク色を指定するには、htmlの場合はbodyタグ内に記述、xhtmlの場合はhead内に記述する必要があります。 <body link="#000000" vlink="#ff0000" alink=""> ・link 通常のリンク色 ・vlink 訪問済みのリンク色 ・alink フォーカス時のリンク色 <head> ... <style type="text/css"> <![CDATA[ a:link{color:#000000;} a:visited{color:#666666;} a:focus{color:;} ]]> </style> </head> ・a:link 通常のリンク色 ・a:visited 訪問済みのリンク色 ・a:focus フォーカス時のリンク色 未選択時のリンク色はどのキャリアも同じ表示ですが、選択時の文字色、背景色は各キャリアによって
モバイルユーザビリティ改善のチェックポイント保存版 - 全10回総まとめ（最終回） | モバイルサイト構築のユーザビリティいろは
2009年1月から連載してきた「モバイルサイト構築のユーザビリティいろは」も今回で最終回です。そこで今回は、今までの連載内容をおさらいしながら、モバイルサイト構築時におさえておきたいモバイルユーザビリティの総まとめをします。 前半では今までのおさらいをし、最後に自分でモバイルサイトのユーザビリティを改善するためのポイントを紹介します。 モバイルサイト構築時の基本チェックポイント公式サイトに関するポイントモバイルメールマガジンに関するポイントモバイルECサイト構築時のポイントモバイルFlashサイトの制作ポイント自分でできる！ モバイルユーザビリティ改善の3ステップモバイルユーザビリティ改善のケーススタディ1. モバイルサイト構築時の基本チェックポイント1-1. モバイル端末ならではの制約や特性を理解するモバイルサイトには、画面サイズや1ページで表示できるページ容量制限、キャリアごとの違いな
ke-tai.org > Blog Archive > Google Analytics携帯版の導入方法まとめ
Google Analytics携帯版の導入方法まとめ Tweet 2009/11/30 月曜日 matsui Posted in 記事紹介・リンク | 14 Comments » 先月発表された「Google Analytics携帯版」ですが、Googleから正式なリリース告知は無いものの、ケータイからのアクセス解析が一応利用できる状態になっているようです。 PC版でGoogleAnalyticsを利用しているので、モバイル版でも利用したいという方も多いと思います。 しかしながら、セットアップ方法が少し複雑なため、導入に手間取っているという話も良く聞きます。 今回は自分のメモ代わりもかねて、Google Analytics携帯版について触れているブログを集めてみました。 まず便利なのがこちらのサイトです。 タイトルからもわかるとおりGoogle Analyticsを専門に扱っているブログ
case:MobileDesign! モバイルサイトのデザイン紹介ブログ
case:MobileDesign! モバイルサイトのデザイン紹介ブログ 引っ越ししました。 http://case-mobile-design.com/ case:MobileDesign! モバイルサイトのデザイン紹介ブログ > 2010-02-15 >
[携帯]の入力フォームの横幅制御方法 │ これからゆっくり考L +α
入力フォーム（テキスト：1行）の横幅サイズの調整について、いつもコーディング時に迷うのでメモしておきます。 ※前提条件：3キャリア1ソース、xhtml size="**"のみ指定 <input type="text" size="27" name="hoge" /> 他のキャリアに合わせてサイズを調整していると、auで見た時に縦に2行になる場合があります（※端末の文字サイズにも依存します）。数字が大きすぎた場合？になるようですですが、だからといってauに合わせて数字を小さくすると、他のキャリアで見た時の横幅がかなり短くなってしまいます。 後、sizeで指定すると端末で設定している文字サイズによってフォームの長さも変わってきてしまうので、そこもちょっと気になるところです。 style="width:**"のみ指定 <input type="text" style="width:80%" na
エリクサーサポート
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 対応端末一覧を更新し
FlashLite2.0の動向 | _level0 - KAYAC Front Engineer Blog
アナウンス直後からかなり注目していたFlashLite2.0に、そろそろ動きが出てきそうです。 先日、今年のクリスマス商戦モデルとなる各キャリアの最新新機種一覧が発表されました。 MNPが本格的に始まるためか、各キャリア共にデバイスのスペックにもかなり力が入っています。 GPSをはじめ、Flashクリエイター念願のFlashLite2.0対応機種も一気にリリースされます。 以下３キャリアの対応状況 Flashlite2.0対応状況// ソフトバンク 機種別情報一覧 対応機種：910SH、810SH、811SH、910T、810T、811T ファイルサイズ：150KB 備考：SharedObjectが使用できない。 AU 機種別情報一覧 対応機種：W43SA、W45T、W43CA、W43H、W43S、W43K、W42SA ファイルサイズ：100KB上限 備考：loadMovieの連続読込みで
携帯サイト（html）の制作に入る前に確認しておきたいチェック項目 │ これからゆっくり考L +α
「デザインは素敵なんだけど、携帯でこれはちょっとできないなー」とか、「無理ではないけどできれば避けておいた方がいいよなー」っていうデザインがあがってくることが多い今日この頃。 モバイルコーディングをやり慣れている人じゃないとモバイルでできることできないこと、cssを使わないと実現できないこと、table使わないと実現できないこと、などが分かりにくいと思うので当然だとは思うのですが。 ですが、知っているのと知らないのとでは工数がかなり違ってきます。 一旦デザインして、コーダーにそれを見せて「ココとココとココは実現不可能。やり直してください。」で差し戻され、デザインをやり直してってなると、デザインも2度手間、デザインをチェックして無理な項目を洗い出すコーダーにも余計な手間がかかります。 今回洗いだした項目は、なんせ自分がコーダーなので、コーダーがデザインファイルをもらった時にバーッと見てチェッ
Developing Flash Lite 2.x Applications
FLASH LITE 2.x ® ™ アプリケーシ ョンの開発 © 2007 Adobe Systems Incorporated. All rights reserved. Flash® Lite™ 2.x アプリケーションの開発 本マニュアルがエンドユーザー使用許諾契約を含むソフトウェアと共に提供される場合、本マニュアルおよびその中に 記載されているソフトウェアは、エンドユーザー使用許諾契約にもとづいて提供されるものであり、当該エンドユー ザー使用許諾契約の契約条件に従ってのみ使用または複製することが可能となるものです。当該エンドユーザー使用許 諾契約により許可されている場合を除き、本マニュアルのいかなる部分といえども、Adobe Systems Incorporated ( アドビ システムズ社 ) の書面による事前の許可なしに、電子的、機械的、録音、その他いかなる形式・手段で
mineoで節約暮らし✨
mineoを契約する時の初期費用、けっこうかかりますよね…。 ①契約事務手数料・・・3300円 ②SIMカード発行料・・・440円 ①＋②で合計3740円となりますが、申し込み時にエントリーパッケージ（エントリーコード）を使えば、①の契約事...
PHPを使って3分で作る3キャリア対応ケータイサイト | ke-tai.org
PHPを使って3分で作る3キャリア対応ケータイサイト Tweet 2009/11/17 火曜日 matsui Posted in ソフト紹介, 全キャリア対応 | 28 Comments » 本日は3分で3キャリア対応ケータイサイト作れてしまうというPHPスクリプト、「らくらくケータイ3キャリアコンバーター（仮名）」を作成してみましたので、そのご紹介をさせていただきます。 先日のPHP勉強会で発表させていただきました。 ご参加いただいた皆様、本当にありがとうございました。 発表資料をアップしてありますので、まずはこちらをご覧ください。 PHPを使って3分で作る3キャリア対応ケータイサイト View more documents from ketaiorg. ということで、「3分で作る」とは謳っているものの、ドコモ用に作られたHTMLを他キャリア用にコンバートするだけの、実に簡素な作りです。
Flash Lite入門講座 第1回 日本のFlashLiteの仕様 | デベロッパーセンター
はじめに このアドビデベロッパーセンターを見ている方は、PCでのFlash開発は慣れていると思いますが、「携帯Flashは制限が多くて作りにくい」というイメージを持っているのではないでしょうか？ 本連載では、そうした方々に向けて、日本での携帯Flashコンテンツ開発について解説していきます。第1回目は、ざっくりとしたFlash Lite制作ガイドラインを記していきたいと思います。 日本では勝手が違う Flash Lite開発環境 「Flash Lite」とはモバイル用のFlash Playerのことで、これまでにバージョン1～３がリリースされています。Flash Liteの各バージョンは、PC向けFlash Playerのバージョンと比較すると、以下の関係となります。ただし、該当するFlash Playerバージョンの全機能をサポートしているわけではありません。 Flash Lite
無料の携帯アクセス解析「うごくひと2」: 商用利用可
無料の携帯アクセス解析の決定版。ページビューのほか直帰率やキーワード分析などの豊富な機能・見やすい管理画面が特徴。携帯サイトのアクセスアップに貢献するランキング機能付き。個人・法人でご利用いただけます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
作ろうiモードコンテンツ：基本絵文字一覧
http://www.designwalker.com/2009/06/mobile-web.html
モバイルサイトを見やすくする絵文字活用&テキストレイアウトのポイント（第3回） | モバイルサイト構築のユーザビリティいろは