ホームページ制作ブログ » 携帯サイト

HEROES携帯版公開！

阿部マリコ — Mon, 02 Mar 2009 12:37:20 +0000

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に関してはプログラマさんに褒められんのが一番嬉しいかもしんない。
何か「プログラマ」ってだけで褒め言葉にものすごい説得力ある気がすんだよね。何でも知ってるし。

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

携帯からこんにちは

阿部マリコ — Thu, 19 Feb 2009 03:22:54 +0000

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

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

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

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

阿部マリコ — Sat, 12 Jan 2008 18:56:17 +0000

前提条件

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

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

理由

携帯サイトなら本来だとが妥当です。
でも

や見出し（

…など）に背景色をつけたい場合、docomoはXHTMLじゃないとアウトです。

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

個人的に

はdocomoで上下にスペースが空きすぎて使いづらいので

は使わず

内にテキストなどを直に記述します。

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

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

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

携帯サイトの作り方

阿部マリコ — Thu, 03 Jan 2008 17:25:31 +0000

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

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

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

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

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

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

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

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

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

コーディング・CSS

言語はXHTML

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

リンクの部分的な色かえはちょっと面倒

絵文字

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

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

pngとgif

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

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

1ページあたりの容量

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

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

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