1時間で携帯サイトをスマートフォン対応にする方法 | エンジニアブログ | GREE Engineering

初めての投稿となります。エンジニアのmatsuです。 携帯向けウェブサイトを1時間でスマートフォン対応する方法を紹介します。 概要 2011年4月7日のニュースにて携帯電話の新規契約数のうち、スマートフォンが占める割合が50%を越え、スマートフォンが本格的に普及する兆しが見えてきました。 現在、スマートフォン向けサイトを新規構築するためのチュートリアルは数多く出ていますが、既存の携帯サイトをスマートフォンに最適化する方法があまり紹介されていないのでこの記事で紹介したいと思います。 このチュートリアルを行うと以下のようになります。 実装 全部で8ステップあります。 このチュートリアルではブログのトップページを例にとって説明します。 前半では文字コードの変更、HTMLの変更といった構造を変更します。後半では絵文字や文字スタイルを行い、仕上げとしてHTML5のバリデーションを行っていきます。最初

[yuushacollector]

すごいと素直におもった。

[ponharu]

ぐぅぅぅぅぅぅぅぅぅぅぅぅっど！！さんこうになりました！！

[divingate]

そういえば、スマホでサイトをみたときにPCサイトは少なくなったなぁ。

[hagihide]

ガラケーからスマホへの整形手術

[wasai]

これすごいな…

[hanrawai]

まっちゃんの記事がhotentryでトップになってる！

[hatotaka]

1時間で携帯サイトをスマートフォン対応にする方法 | GREE Engineers' Blog

[misshiki]

元ファイル準備→UTF-8化、HTML5化→ jQuery Mobileマークアップ追加・読み込み→フィーチャーフォン用HTMLコード削除→ HTMLをjQuery Mobileに最適化→絵文字をemoji-spriteに置換→正しいHTML5コードに→アイコンをつける。

[conceal-rs]

emojiをcssと言うのは参考になる

[glat_design]

うおおおおおおええええ絵文字すぷらいと！！！初めて知った、使う！

[jyontan]

そんなことができるんですか！？

[rival-arena-vs]

携帯サイトはもうなくなってしまった・・・。

[dorapare02]

スマホは小型ＰＣですね。

[line-sweets01]

素晴らしいです。

[shingun-destroy]

それぞれのステップ別に時間数まで書いてあるとやる気出ますね。

[linetouchmonster]

携帯サイトをスマホに対応する方法

[monslobattle1]

携帯サイトをスマートフォン対応にする方法

[puzzlederby]

あとで読ませてもらいます。

[AVABELONLINE]

あとで読もう。

[pokonyon]

正攻法だった

[monaken]

実際に適用する手法が書かれているのでメモ。

[tact_tomi]

携帯用コンテンツをスマートフォン用に移植する時のポイントまとめ。

[taityou3]

HTML5

[TamaC]

[

[jumbo]

メモ

[yananaki]

「1時間で携帯サイトをスマートフォン対応にする方法 | GREE Engineers' Blog」 面白いなぁ…今度やってみたい！

[yoshida2855]

やりたい。

[cookichi]

1時間で携帯サイトをスマートフォン対応にする方法 | GREE Engineers' Blog

[anima_annabel]

速い、簡単。jQuery Mobileすごい。うちの携帯サイトもこれにしよう。

[kote233]

やってみよう。HTML5はソースもシンプルでいいですね。

[monoshiri7]

携帯からスマートフォン対応へ

[avalon1982]

@robo_pop 1時間で携帯サイトをスマートフォン対応にする方法

[s5-style]

JQueryMobileを使った携帯サイトのスマートフォン対応手順

[glassednarcist]

ふげぇ。。。びっくりした。

[h5y1m141]

"jQuery Mobileは専用の属性指定を必要とします。 まず、bodyタグ内を、header, content, footerの3つに区切るマークアップをします。"

[Kwappa]

めも。

[sigwyg]

memo: emoji-sprite

[Mist]

すげーなー。