1時間で携帯サイトをスマートフォン対応にする方法 | GREE Engineering
初めての投稿となります。エンジニアのmatsuです。 携帯向けウェブサイトを1時間でスマートフォン対応する方法を紹介します。 概要 2011年4月7日のニュースにて携帯電話の新規契約数のうち、スマートフォンが占める割合が50%を越え、スマートフォンが本格的に普及する兆しが見えてきました。 現在、スマートフォン向けサイトを新規構築するためのチュートリアルは数多く出ていますが、既存の携帯サイトをスマートフォンに最適化する方法があまり紹介されていないのでこの記事で紹介したいと思います。 このチュートリアルを行うと以下のようになります。 実装 全部で8ステップあります。 このチュートリアルではブログのトップページを例にとって説明します。 前半では文字コードの変更、HTMLの変更といった構造を変更します。後半では絵文字や文字スタイルを行い、仕上げとしてHTML5のバリデーションを行っていきます。最初
jQuery Mobile が必須スキルになる！と思うのでこれから勉強する際に参考になる記事まとめ | バシャログ。
Adobe の Creative Suite 5.5 が発表になりましたね。 Dreamweaver の進化っぷりが凄まじいです。マジで。 HTML5+CSS3への対応が目に付きますが、個人的にはjQuery MobileとPhoneGapフレームワークの導入に注目します。 アプリ開発はこれまで、Objective-Cやjavaが主流でしたがDreamweaverでアプリへの書き出しまで出来てしまうなんて…。今後、モバイルアプリケーションの統合開発環境のデファクトスタンダードになる予感が。 ってことで、まずはjQuery Mobileを理解せねば！ jQery Mobile についてはまだ書籍はあまりなく洋書しかありませんでしたので、参考になる記事を取り上げてみます。 http://jquerymobile.com/ 本家サイト jQuery Mobile Gallery http://w
ケータイサイトのtableタグの特徴と、5つのデザイン例＆ソース : LINE Corporation ディレクターブログ
※文中のケータイ livedoorのPVに誤りがあり、修正いたしました (2010/9/22) こんにちは、『プチペット』を担当している吉沢です。 Webサービスのケータイ対応がやっと当たり前になってきたかと思ったら、今度はスマートフォンの対応と、モバイル業界の時の流れはものすごく速いですね。 そんな中、ケータイは新しい端末のシェアが増えていく度に、サイトで表現できる自由度が高くなり、単に作るだけではなく、デザインで差をつける時代が来ています。 それが読み取れる世の中の動きとして、たとえばモバイルデザインアーカイブさんは、年鑑が出るくらい書籍・サイト共に人気ですよね。また、ちょっと前に発売された書籍『ケータイサイト解体新書 デザインパターンから理解する実装テクニック』は、いろいろなデザインパターンからHTMLを引けるため、デザインをする上でとても参考になります。 携帯サイト年鑑2010 著
手っ取り早く携帯サイトを作成する時のhtmlテンプレート - webの人 @ryryo
最近phpをいじるがてら、ひさびさに携帯サイトに触れているためメモメモ。 携帯サイトで装飾を入れるとなるとi-cssが云々って話があったりしますが、正直テストサイトでそんな面倒なことをしていられないので、だいたい以下のようなhtmlで作成しています。 とりあえず携帯サイト作りたい時テンプレート <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/2.3) 1.0//EN" "i-xhtml_4ja_10.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Co
永久保存版！？携帯コーディング、これだけ読めばすぐできる！ | KAYAC
マークアップエンジニア（以下、ME）のtacamyです！(`・ω・´) カヤックでは、デザイナーもHTMLコーディングをしてくれています。 （いつもありがとうございます！） そんなワケで、本格的にHTMLコーディングはしないけど、 ちょこっとしたページなら組みますっていうデザイナー向けの、 「コレだけ読めばすぐできる」シリーズを始めました。 第一回は「携帯コーディング」についてです。 携帯はPCとは全くの別物なので、なんとなく敬遠しがちですが、 最低限の内容であれば覚えることも少ないですし、 一度覚えてしまえばスタンダードがしばらく変わらないので、覚えておいて損はないですよ！ 携帯コーディングの基本 基礎の基礎 文字コードはShift-JIS CSSはインラインで指定（タグに直接style属性を追加する） 画像を含むページ容量100KB以内（HTML自体の容量は9KB以内） 画像はgifか
ケータイサイト制作前にコーダーが確認しておきたいところ │ これからゆっくり考L +α
モバイルサイトの制作前に、もしくは打ち合わせに行った場合は必ずチェックしておきたいところをまとめてみました。 こちらから積極的に確認しないと、何も詳細が分からないままデザインだけぽーんと渡されてしまうことがあるので、自ら前のめりでチェックしておきたいところです。 個人的に「ここだけは外せない！」という項目は以下の6つ ・xhtml？html？ ・文字コードは？ ・tableは使ってOK？ ・絵文字は？ ・カタカナの扱いは？半角？全角？ ・VGA対応は？ xhtml？html？ 最近は基本xhtmlで作成という流れに（私の場合は）なってますが、それでも念のために一応聞いておきたいところ。 昔、xhtmlで作成してほぼほぼ終わった段階で「アップするサーバーでxhtmlが使えないのでhtmlに変更してください！」と言われてやり直したことがあります...。 文字コードは？ 携帯サイトといったらSh
携帯サイトを作る時に役立ちそうな情報まとめ - かちびと.net
Tips携帯サイト構築 どうもTwitterやってるとiPhoneや Androidなどのスマートフォンの 話題ばかりなので忘れそうですが、 携帯サイトはビジネスには必須 ですので備忘録として記事に。 ちょっと必要に迫られたのでメモ。 どうもTwitterやってるとiPhoneや Androidなどのスマートフォンの 話題ばかりなので忘れそうですが、 携帯サイトはビジネスには必須 ですので備忘録として記事に。 以前にも何度かまとめ記事が話題に上がっているので今更感も否めませんが自分のブログにあったほうが探しやすいのでメモします。 予備知識モバイルサイト構築前に知っておきたいユーザビリティ10のポイント ファーストビューの重要性、色の大事さ、リンク操作に関して記載されています。 モバイルサイト構築前に知っておきたいユーザビリティ10のポイント 携帯サイト（html）の制作に入る前に確認してお
case:MobileDesign! モバイルサイトのデザイン紹介ブログ
case:MobileDesign! モバイルサイトのデザイン紹介ブログ 引っ越ししました。 http://case-mobile-design.com/ case:MobileDesign! モバイルサイトのデザイン紹介ブログ > 2010-02-15 >
%26utm_content%3Dlivedoor)
PHP での携帯開発に使える絵文字変換ライブラリ | バシャログ。
ぼちぼち 11 月も終わりですね。焼き芋たべたい！nakamura です。 ここ最近、なぜか立て続けに携帯サイトの案件が舞い込んできたため、絵文字の自動変換ライブラリを探していくつか見つけました。ただ、どれが一番優れている、というよりはサイトの規模や特性に応じてうまく使い分けるのが良いように感じました。というわけで、今回見つけたライブラリを簡単な解説を交えながらご紹介していきます。 らくらくケータイ3キャリアコンバーター（仮名） PHPを使って3分で作る3キャリア対応ケータイサイト ke-tai.org の matsui さんが自作した絵文字変換ライブラリで、ソフト名も今現在募集中というできたてホヤホヤのものです。特徴はなんと言ってもそのシンプルさと、導入がヒジョーーーーに簡単な事です。 ライブラリとは呼べないかな、とも思ってしまうシンプルさで必要なファイルは viewer.php と .
iモードHTMLシミュレータII | サービス・機能 | NTTドコモ
901iシリーズ以降のiモード対応HTMLとFlash®、デコメールテンプレート、901iSシリーズ以降のPDF、902iシリーズ以降のトルカ、906iシリーズ以降のデコメアニメ、2009年度上期モデルより対応したiモードブラウザ2.0（およびそれ以降）の対応コンテンツを表示する機能 を表示することができます。 ログウィンドウ機能により、HTTP通信のやり取りをチェックすることができます。 表示中のコンテンツ画面の印刷、クリップボード経由で他のアプリケーションへの貼り付けができます。 表示中コンテンツのHTMLソースの表示、編集ができます。 このツールには機種毎の動作をシミュレートする機能はありません。シミュレータと実機では動作が異なる場合がありますので、最終動作確認は実機にて行ってください。
携帯サイト[xhtml]のコーディング前のチェックポイント │ これからゆっくり考L +α
前回のhtml版に引き続き、今回はxhtmlの場合です。 htmlと比べて出来ることが増えるので色々なデザインの再現が可能ですが、やはり3キャリア1ソースとなると気をつけるべきポイントがいくつかあります。 コーダー（もしくはディレクター？）さんは、デザインをパッと見て「このデザインで組めます！」「組めません無理です...」の判断が咄嗟にできるようになると素敵だと思います。 デザイナーさんは、これからあげるチェックポイントを頭の片隅にいれつつデザインしていただけると、コーダーからの戻しが少なくてすむようになるかと思います。 前置きはこのぐらいにして、早速本題へ。 以下が今回のサンプルデザインです。 「これをxhtml、3キャリ1ソースコーディングしてください」 と言われた場合で考えていきます。 前提条件は、 ・3キャリア1ソース ・xhtml ・文字コード：Shift-JIS ・改行コード：
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宣言とは
ウノウラボ Unoh Labs: ゼロからはじめる携帯サイト構築。
こんにちは、日食を妙に楽しみにしていたわりには見ようともしなかった ryosuke です。曇りで残念でした。曇りでも日食と分かるぐらい暗くなったら嬉しかったのですが、東京ではそんな事は全然ありませんでしたね。 さてさて、そんな私ですが入社後半年が経過したところで、入社当初より携わって来た携帯サイト構築に関して得た知識(失敗談)をまとめてみようと思います。 初ラボブログ記事でも触れた様にそもそも本格的な携帯サイト構築は経験に乏しく、バッドノウハウの塊の様な面倒な思いこみが先行しがちだったわけですが(実際バッドノウハウの塊ですが)、端末の機能や表現力が豊かになるのと同時に開発環境的なツールやライブラリの充実、ノウハウの蓄積と情報公開により随分すんなり入って行けた様に思います。 結局はキャリア感の差異を知り吸収する事がすべて いきなりですが、PCサイトと携帯サイトの違いで最も厄介な所はこれにつき
ウノウラボ 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ファイルも外部
絵文字変換ライブラリ HTML_Emoji - Revulo's Laboratory
概要 † HTML_Emoji は携帯の絵文字を変換するライブラリです。 PHP 4 以上で動作します。 docomo, au, SoftBank の絵文字に対応 (隠し絵文字を含む) 他キャリアの絵文字を、類似の絵文字に変換可能 ＰＣでは gif 形式の画像に変換して表示 絵文字の入出力は、UTF-8, Shift_JIS のバイナリ形式 文字エンコーディングを UTF-8 と Shift_JIS 間で相互に変換可能 User Agent からキャリアを自動判別 (キャリアを指定することも可能) フォームに入力された絵文字を処理したり、 携帯宛の絵文字メールを作成したりするのに使えるはずです。 ▲ サンプル † 動作確認のためのサンプルをいくつか用意しました。 PC や携帯から読み書きしてみて下さい。 UTF-8 での表示 Shift_JIS での表示 絵文字掲示板 PC での動作確認に
携帯サイトシュミレータまとめ - ゆうじろう日誌
メモです。 各社携帯サイトシュミレータのまとめ。 docomo: iモードシュミレータ?(II)のダウンロード http://www.nttdocomo.co.jp/service/imode/make/content/html/tool2/download/index.html # 『ぴたすちお』が起動していると、シュミレータは起動しない。 ## これで約半日潰れました。一つ一つプログラムを落としていって、最終的にこれが原因でした。 au: Openwave SDK 6.2Kは現在提供中止ではあるが、web.archive.orgで公開されているとの事。 携帯サイトを作ろう！さんの『au端末の携帯サイトシュミレータ入手先』という記事にリンクあり。 http://dspt.blog59.fc2.com/blog-entry-53.html softbank: 簡単なユーザ登録後、『WEB＆
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
携帯端末 - PHP Note
携帯端末の移り変わりは早くこのコンテンツははっきり言って古いです。ブラウザの判別や文字コードの処理の参考資料程度になるかと思いますので残しています。 わりと新しい情報としては↓この掲示板のやりとりや、このページ最下部の「携帯端末コンテンツ作成で役立つサイト」のリンク先が参考になります。 正規表現で抽出した文字 端末判別 携帯端末を判別するには PCでブラウザを判別する時と同じように、$_SERVER['HTTP_USER_AGENT'] の値を調べます。この書式は 4.1.0 以降のバージョンで利用可能です。それ以前のバージョンでは、$HTTP_USER_AGENT を使用します。 $_SERVER['HTTP_USER_AGENT'] の値には、i-mode端末は "DoCoMo"、j-sky端末は、"J-PHONE"、Ezweb端末は、"UP.Browser" という文字列が含まれてい
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の名称、記述
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Share it again – Smileys, Stickers, animated GIF & Emoji apps
