mobile

ファミ通.comのモバイルサイトである「ファミ通MAX」を制作させていただきました。

３キャリア対応はもちろんなのですが、iPhoneにも対応し、僕としては初めてのiPhoneサイト制作となりました。

企画からデザイン・設計・開発と行程としては上から下まで、エンターブレインの方と打ち合わせを重ねながらわりと自由に制作させていただきました。

開発スタートからリリースまでは期間は半年ぐらいです。

今までの色々な経験やモバイル開発のノウハウを詰め込んだものに仕上がっていると思います。

サイト自体は「ファミ通.com」のニュースや販売ランキング、発売スケジュールなどをモバイルで閲覧できるようにしたものです。

今後はコミュニティ機能などを追加していく予定だそうで、そちらの制作も担当させて頂く予定です。

どうぞよろしくおねがいします！
http://www.famitsu.com/game/news/1227619_1124.html
　
ファミ通MAX
http://m.famitsu.com/

表題のものを作ったので書き残しておきます。
まず、全部を解説するとすごく大変なので、ポイントを順をおって解説していきます。

1. 準備
2. 入力
3. 出力

ってな感じでいきます。

Continue reading

ゼロから携帯サイトを作ることになったので、cakephpを使って携帯サイトを素早く構築してみる。

携帯サイトを作るとなるとネックになるのが携帯独自の機能の実装。
すごくおおざっぱに分けると以下の３つかな

• キャリア依存絵文字
• 端末毎の動作の違い
• セッション管理

んで、これを実現させるとなるとなにが必要かということですが、それぞれこんな感じ

Continue reading

iPhoneの登場でスマートフォンで閲覧しやすいサイトの需要が高まってきたようです。
でもわざわざiPhoneやスマートフォン向けにサイトを作るのは大変・・・。
そんな方に、今までに制作したモバイルサイトをスマートフォン対応させる方法があります。
しかも5分でお手軽にできます！
htmlとCSSで解決する方法なのですが、実はこの方法を使うだけで開発もしやすくなる優れものです。

論より証拠ということで、まずはこちらをご覧ください。
（PCからでもオッケーです。htmlはこちらの記事で作成したものを使ってます。）
まず、こちらが普通に作成したモバイルサイト→before
そしてこれがその方法を使ったもの→after

Continue reading

デフォルトでapacheは画像ファイルのログを出すのだけれど、
ログが肥大するし、あまり見ないので、こちらを消してしまいます。
あとついでにログの出力方法を調整したり、日別の集計にしたり、携帯用の設定を追加してみたりしてみる。

Continue reading

先日、IDEA*IDEAさんのブログ上で募集されていた「PHP×携帯サイトデベロッパーズバイブル」のプレゼント企画に応募させていただいたところ、見事当選しました！

IDEA*IDEAさんの中の方、ご献本された執筆者の荒木さんありがとうございました！
こちらの本ですが、一言でいうと、「これだけでレベルの高いモバイルサイトがつくれる本」です。

内容ですが、

Continue reading

前々からすこしずつ作っていたswfファイルをphpで動的に生成したモバイルFlashサイト「画像検索 for mobile」ができた！
使ったものはこんな感じ

• google画像検索API
• swfmill
• ImageMagick
• FlashLite1.1
• php

細かいところはそのうち記事にまとめます。

携帯サイトですが一応PCからもアクセスできます。

でもよかったら携帯から見てね！！

ちょっとだけiPhoneっぽくグリグリ動きます。

使い方

• 普通に検索窓から検索
• 上下キーで移動
• 4,6でページ移動
• 画像を選択すると携帯用に縮小した画像が見れる。

QRコードも貼っとくよ！

http://img.sj6.org/

仕事で某ポータルサイトのモバイルページを構築するようになって1年近く。

ノウハウがある程度溜まってきたのでxhtmlのことを中心に色々とまとめてみる。

Continue reading

こうすると各キャリアで共通の見え方をします。
hrタグ

<hr style="color:#9dcce0;background:#9dcce0;height:2px;border:0px solid #ffffff;margin:0.3em 0;" size="2"/>

h1タグ

<h1 style="line-height:1em;margin:0;font-size:small;">