RSS
 

Archive for the ‘携帯サイト’ Category

HEROES携帯版公開！

02 3月

HEROES QRコード

HEROESの携帯版が本日昼頃公開！
HEROES本体+大塚明選手ら千葉ロッテマリーンズの選手5名のサイトが携帯からも見れる様になりました！！

HEROES もっとスポーツを楽しもう
http://mobile.heroes.ne.jp/
千葉ロッテマリーンズ大塚明公式サイト
http://mobile.heroes.ne.jp/ohtsuka
千葉ロッテマリーンズ塀内久雄公式サイト
http://mobile.heroes.ne.jp/heiuchi
千葉ロッテマリーンズ青野毅公式サイト
http://mobile.heroes.ne.jp/aono
千葉ロッテマリーンズ内竜也公式サイト
http://mobile.heroes.ne.jp/uchi
千葉ロッテマリーンズ大嶺祐太公式サイト
http://mobile.heroes.ne.jp/ohmine

※携帯からしか携帯版は見れません。

今回はコーディングだけじゃなくてPC版のデザインを元にデザインもウチがしました。
携帯サイトのデザインって単純に見えてファイル容量・キャリアごとの制約・ユーザビリティの特殊さとか注意しない事がいっぱいあって結構大変なんです。

それを全部ふまえつつKさんのPC版素敵デザインをどこまで忠実に携帯版化出来るかで凄く悩みました。
まだまだ勉強中なので使いづらい所とかあったら教えてね！

画像の拡張子の切り替えとか絵文字の出力とかローカル環境の整備とかプログラマのアッキーさんに滅茶苦茶苦労＆お世話かけつつ出来上がったので是非携帯からアクセスしてみてね！

デザイン渡した時にアッキーさんに「相当忠実に再現してんね」って言われて嬉しかった。
何かWebに関してはプログラマさんに褒められんのが一番嬉しいかもしんない。
何か「プログラマ」ってだけで褒め言葉にものすごい説得力ある気がすんだよね。何でも知ってるし。

生まれ変わったらプロ野球選手かおまわりさんかプログラマになりたいなぁ。

 
2 Comments

Posted in 携帯サイト

 

携帯からこんにちは

19 2月

使ってるサーバがPHP5対応になったので携帯用プラグインをMobile Eye+からKtai Styleに変えてみた。

こっちは絵文字が使える上テンプレートもいじれるらしい。
暇を見てカスタマイズしよ〜っと♪

ついでに例のプロジェクトOP用にモバイルサイトを個人的に開発中です。
CakePHPで掲示板と簡単なページを作ってみようかと。
執筆の合間だからいつ完成するか分かんないけど頑張ります！
やっぱWeb遊びも好きだからやめらんない！

 
No Comments

Posted in 携帯サイト

 

携帯サイト制作はドキュメントタイプXHTML 1.0 Transitionalがオススメ

13 1月

前提条件

  • 携帯サイトで<div>や見出し（<h1><h2>…など）に背景色をつけたい
  • <p>はdocomoで上下にスペースが空きすぎて使いづらい
  • 携帯サイトでもW3C準拠のソースを書きたい

全てに挙手っていうウチと気が合いそうな人にはXHTML 1.0 Transitionalをオススメします。
あなたとはとても仲良く出来そうです。
ついでにパ・リーグ好きだったりしたら付きあって下さい！位の勢いですw

理由

携帯サイトなら本来だと<!DOCTYPE HTML SYSTEM “html40-mobile.dtd”>が妥当です。
でも<div>や見出し（<h1><h2>…など）に背景色をつけたい場合、docomoはXHTMLじゃないとアウトです。

更にdocomoはページ内リンクが<a name=”hoge”>にしか飛べない（idには飛べない）ので<a name=”hoge” id=”hoge”>と記述します。

個人的に<p>はdocomoで上下にスペースが空きすぎて使いづらいので<p>は使わず<div>内にテキストなどを直に記述します。

XHTML1.1はStrictのみだから文法的にアウト。

以上をふまえて正しくマークアップすると出来上がった文書はXHTML 1.0 Transitionalが妥当です。
コピペ用にソース置いておきますね。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

ちなみにdocomo・au・softbank各キャリア独自のドキュメントタイプもありますが、W3C万歳派なウチは使うのに抵抗があるので使いません。
IEの独自拡張仕様使うみたいでものすごく気持ち悪い。
プログラム側でUA判別してそれぞれ適合したのを吐くならその限りではないです。

 
3 Comments

Posted in 携帯サイト

 

携帯サイトの作り方

04 1月

Web年賀状制作復習メモ第一弾。
「とりあえず携帯サイト作るのにコノ辺は知っとこう」的なネタです。

知識0から今すぐ携帯サイトを完成させなきゃいけないWeb屋さん（先月のウチだ）に読んで頂けると、（先月のウチから削られた）睡眠時間をプレゼントできるかと思います。

最近の携帯Webブラウザは頭良くてCSSも割かし分かってくれます。
けどちょっと凝ったデザインをやろうとするととたんにツンツンしだします。
でれツンで非常に萎える事この上ない……。

主観でかしこさを羅列するとこんな感じ。
au > softbank >>> 越えられない壁 >>> docomo

ちなみにウチの知識レベルはこんな感じ。

XHTML・CSS ★★★★☆ そこそこ自信有り
PHP ☆☆☆☆☆ 超うんこ
携帯サイトの知識 ☆☆☆☆☆ 的場の打率程度

で、制作時に困った事ランキングは以下の通り。

  1. コーディング・CSS
  2. 絵文字
  3. pngとgif
  4. 1ページあたりの容量

ググれば解説はいっぱいあるけど小難しくて「結局の所、結論は！？結論だけ教えて！！」と頭がスポンジになりました。
ので、能書き抜きで出来る限りバッサリきっぱりクッキリ要点のみまとめます。

コーディング・CSS

  1. 言語はXHTML
  2. ドキュメントタイプはXHTML 1.0 Transitional
  3. docomoにはHTTPヘッダでContent-Type: application/xhtml+xmlを吐く
  4. コンテンツの横幅は240px目安
  5. 一行の文字量はfont-size:middle;の場合横に9文字程度
  6. 画面サイズより大きい画像は画面サイズちょっきりに縮小表示される
  7. CSSはタグにstyle要素で直書き
  8. 背景色は<div>にしかつけられない
  9. <p>は上下にスペースが空きすぎて使いづらい
  10. ページ内リンクは<a name=”hoge”>にしか飛べない（idには飛べない）
  11. リンクの部分的な色かえはちょっと面倒

絵文字

  1. PHP絵文字変換スクリプトを使う
  2. i絵文字を使う（auはdocomoの絵文字を自動で変換する）

3キャリア共通を意識するならPHP絵文字変換スクリプト
softbankの時だけ絵文字がアホになっても良ければ
もしくはsoftbankの時だけ絵文字がアホになるのを直すテクがある人はi絵文字がオススメ。

pngとgif

  • docomo・Lモード・古いsoftbank→gif
  • それ以外→png

上記の様に画像の拡張子を切り替える。出来ない・めんどくさい場合は全部jpegにする。

1ページあたりの容量

  • 文書→10kb前後
  • 画像→30kb前後

とりあえず身も蓋もないけどこんだけ知ってればサクッとこなせる筈。
あくまでウチ流なので間違い訂正・突っ込み大歓迎です。

そのうち各々の解説エントリーが出来る筈。なんでその結論が出たのか知りたいって人は読んでみて下さい。
「これを先に知りたいなぁ〜」ってリクエストあればコメントでどうぞ。優先的にエントリーします。

 
6 Comments

Posted in 携帯サイト