（非フレームワークの）PHPで携帯対応( #phpadvent2010 ) - gusagiの日記
はじめに この記事は「PHP Advent Calendar jp 2010 : ATND」の12日目です。 昨日はyuyakさんの「PHPマニュアルを読み解く」でした。 PHPで携帯対応とか 最近はフレームワークを利用した開発が主流なこともあり、（CakePHPであればKtai Libraryと言った具合に）フレームワークごとのライブラリで対応することも多いかと思います。 ですが、仕事で自社独自のフレームワークを利用していたり、昔から運用されているシステムだったり、何らかの理由で携帯対応のライブラリが簡単に導入できない場合もあります。 そういった場合に「このあたりを知っておくと何とかなるんじゃない？」的なものを書いてみます。*1 前提条件 前提条件としては、3G以上の携帯前提です。 また、3G以上の携帯に対応させるための基礎知識としては、 3G携帯のみに限定したサイトを作る場合(ウノウラ
3キャリア対応ケータイXHTMLのTIPS 8つ : アシアルブログ
という素敵仕様なので、泣く泣く各タグ内にstyle属性を書きます。 どーしても我慢できない場合は、外部スタイルシートをインライン展開するようなフィルターを作成するとかでしょうか。ググッてみたら、HTML::DoCoMoCSSというPerlモジュールを作成されている方もいらっしゃいました。 ■画像形式 GIFとJPEGであれば大丈夫なようです。 ・iモード対応コンテンツ作成時の仕様 | サービス・機能 | NTTドコモ ・KDDI au: 技術情報 > 機種別情報一覧 ・ソフトバンク 端末情報 Part1 ～ ソフトバンク 端末情報 Part4 ・Mobile Creation 対応フォーマット一覧 ただ、SoftBankの場合、 ソフトバンク 端末情報 と気になる記述があったりするのですが、この2機種は、 ・V801SHをご利用のお客さまへ ・V-NM701/V801SAをご利用のお客さま
ウノウラボ Unoh Labs: 携帯向けXHTML
おはようございます。 最近携帯向けのページを作成することが多いので、携帯向けのXHTMLと格闘しておりますkayです。 その際に個人的に感じたこと等をまとめてみましたので、少しでもご参考になればと思います。 なお、ここでご紹介しますものはあくまでも個人的な趣味に基づいており、一定時期より古い機種は配慮しておりませんのでご了承ください。 3キャリア対応の携帯サイトを作成する場合、docomoに合わせてCSSをインラインで書く必要があります。 これはPCサイトを作成したことのある人にとってはきっととても気持ち悪いことなんですが、我慢してstyle=""を使っています。 また携帯ですので、実際に出来ることはとても限られており、機種やキャリアによっても異なりますので個人的にはベーシックなものを中心に使用してデザインすることをおすすめします。 その際、一番制限が厳しいのは相変わらずdocomo
ke-tai.org > Blog Archive > ソフトバンク2Gの停波に伴ってユーザエージェントによるキャリア判定のロジックを書き直してみました
ソフトバンク2Gの停波に伴ってユーザエージェントによるキャリア判定のロジックを書き直してみました Tweet 2010/4/15 木曜日 matsui Posted in PHP, 全キャリア対応 | 2 Comments » 3月末にソフトバンクの2G端末がひっそりと停波となりました。 これに合わせてユーザエージェントが「J-PHONE」の端末からのアクセスはなくなることになります。 （一部クローラで使われていることもありますが、おそらくこれもじきになくなるでしょう） というわけで、それに伴ってユーザエージェント判定のプログラムをPHPで書き直してみました。 // ユーザエージェントの取得 $agent = $_SERVER['HTTP_USER_AGENT']; // 振り分け処理 if (preg_match('/^Vodafone/', $agent) or preg_match(
がとらぼ
4KのDDPAI Z50と2Kの中華ルームミラー型ドラレコの走行動画比較 DDPAI Z50は、フロントカメラが4Kでリアカメラが2Kです。中華ルームミラー型ドラレコはフロント・リア共に2Kです。 この2つドラレコ映像をフロント同士・リア同士で比較しました。 DDPAI Z50は、高精細ですが色が不自然なまでに強調されます。ただし、これは情報量を増やすための色合い調整のようです。人に見せるための走行動画としては良くはないでしょうが、記録動画としては良いといえるでしょう。 中華ルームミラー型ドラレコは青みが強くはあるもののDDPAI Z50よりは自然な色合いです。ただし、明るい部分が白飛びしやすいので情報が失われやすくなります。どちらのドラレコもGPS内蔵で、走行速度を記録映像に焼き付けることができます。DDPAI Z50はGPSアンテナがフロントカメラ内蔵で、中華ルームミラー型ドラレコはG
携帯サイトを作る時に役立ちそうな情報まとめ - かちびと.net
Tips携帯サイト構築 どうもTwitterやってるとiPhoneや Androidなどのスマートフォンの 話題ばかりなので忘れそうですが、 携帯サイトはビジネスには必須 ですので備忘録として記事に。 ちょっと必要に迫られたのでメモ。 どうもTwitterやってるとiPhoneや Androidなどのスマートフォンの 話題ばかりなので忘れそうですが、 携帯サイトはビジネスには必須 ですので備忘録として記事に。 以前にも何度かまとめ記事が話題に上がっているので今更感も否めませんが自分のブログにあったほうが探しやすいのでメモします。 予備知識モバイルサイト構築前に知っておきたいユーザビリティ10のポイント ファーストビューの重要性、色の大事さ、リンク操作に関して記載されています。 モバイルサイト構築前に知っておきたいユーザビリティ10のポイント 携帯サイト（html）の制作に入る前に確認してお
はてなブログ | 無料ブログを作成しよう
来年も作りたい！ふきのとう料理を満喫した 2024年春の記録 春は自炊が楽しい季節 1年の中で最も自炊が楽しい季節は春だと思う。スーパーの棚にやわらかな色合いの野菜が並ぶと自然とこころが弾む。 中でもときめくのは山菜だ。早いと2月下旬ごろから並び始めるそれは、タラの芽、ふきのとうと続き、桜の頃にはうるい、ウド、こ…
PHPを使って3分で作る3キャリア対応ケータイサイト | ke-tai.org
PHPを使って3分で作る3キャリア対応ケータイサイト Tweet 2009/11/17 火曜日 matsui Posted in ソフト紹介, 全キャリア対応 | 28 Comments » 本日は3分で3キャリア対応ケータイサイト作れてしまうというPHPスクリプト、「らくらくケータイ3キャリアコンバーター（仮名）」を作成してみましたので、そのご紹介をさせていただきます。 先日のPHP勉強会で発表させていただきました。 ご参加いただいた皆様、本当にありがとうございました。 発表資料をアップしてありますので、まずはこちらをご覧ください。 PHPを使って3分で作る3キャリア対応ケータイサイト View more documents from ketaiorg. ということで、「3分で作る」とは謳っているものの、ドコモ用に作られたHTMLを他キャリア用にコンバートするだけの、実に簡素な作りです。
[携帯]フォントサイズ（XHTML版） │ これからゆっくり考L +α
フォントサイズ（HTML版）に引き続き、今回はXHTML版です。 CSSでフォントサイズを指定するので、こんな感じになります。 <span style="font-size:x-small;">文字文字</span> 各指定方法で、実際どのぐらいの大きさで表示されるのかをチェックしやすくするため、サンプルページをつくりました。 サンプルページを色々な端末で見てみると、だいたいどのサイズがいいかーというのが見えてくるかと思います。 サンプルページ QRコード →サンプルページを見る 各種フォントサイズと、ついでに太字のサンプルもおいております。 太字の指定方法はbとstrongとfont-weight:bold;です。 各キャリア、端末の表示 docomo 【大】xx-large,x-large 【中】large,medium 【小】small,x-small,xx-small ※全端末共通
携帯サイト[xhtml]のコーディング前のチェックポイント │ これからゆっくり考L +α
前回のhtml版に引き続き、今回はxhtmlの場合です。 htmlと比べて出来ることが増えるので色々なデザインの再現が可能ですが、やはり3キャリア1ソースとなると気をつけるべきポイントがいくつかあります。 コーダー（もしくはディレクター？）さんは、デザインをパッと見て「このデザインで組めます！」「組めません無理です...」の判断が咄嗟にできるようになると素敵だと思います。 デザイナーさんは、これからあげるチェックポイントを頭の片隅にいれつつデザインしていただけると、コーダーからの戻しが少なくてすむようになるかと思います。 前置きはこのぐらいにして、早速本題へ。 以下が今回のサンプルデザインです。 「これをxhtml、3キャリ1ソースコーディングしてください」 と言われた場合で考えていきます。 前提条件は、 ・3キャリア1ソース ・xhtml ・文字コード：Shift-JIS ・改行コード：
モバイルサイトマークアップ5つの小技 : LINE Corporation ディレクターブログ
こんにちは。10月の組織編成でブログビジネス部に異動になりました飯田です。 普段はディレクターしてますが、時にモバイルサイトのマークアップをするときがあります。以前、こちらのエントリーでモバイルサイトを作るうえでのノウハウを紹介していますが、本エントリーではもう少し実践的な「モバイルサイトで○○を表現するには」をすごく簡潔に紹介してみたいと思います。 ある程度の端末で正常に表示されることを確認していますが、一部を除いて正常に表示されない場合もありますがご了承ください。なお、本エントリーで紹介している記述はわかりやすいように style 属性を全てインラインで記述しています。 見出しに背景色 div タグXHTML 対応の端末であれば下記のタグで簡単に見出しに背景色をつけることができます。 <div style="background-color="#0000ff;">ほげほげ</div>
iモード専用サイトのhtmlソースの閲覧方法 « mpw.jp管理人のBlog
iモードブラウザ2.0のJavaScriptを調査･研究する過程で、iモード専用サイトのhtmlソースを閲覧する方法を発見しました。 今回発見した方法を用いれば、「ドコモ・ゲートウェイ以外からのアクセスを禁止している」、「サーチエンジンのクロールを禁止している」、「XSS脆弱性が存在しない」の三つの条件を満たしているiモード専用サイトでも、htmlソースを閲覧することができます。 しかし、htmlソースを閲覧するためには、そのiモード専用サイトが別の二つの条件を満たしている必要があります。 htmlソースが閲覧可能なiモード専用サイトの条件 デフォルトホストで運用されている。（ヴァーチャルホストではない） iモードブラウザ2.0のJavaScriptからのアクセスを禁止していない。 iモード専用サイトのhtmlソースの閲覧方法 iモードブラウザ2.0のJavaScriptで、htmlソース
携帯サイト（html）の制作に入る前に確認しておきたいチェック項目 │ これからゆっくり考L +α
「デザインは素敵なんだけど、携帯でこれはちょっとできないなー」とか、「無理ではないけどできれば避けておいた方がいいよなー」っていうデザインがあがってくることが多い今日この頃。 モバイルコーディングをやり慣れている人じゃないとモバイルでできることできないこと、cssを使わないと実現できないこと、table使わないと実現できないこと、などが分かりにくいと思うので当然だとは思うのですが。 ですが、知っているのと知らないのとでは工数がかなり違ってきます。 一旦デザインして、コーダーにそれを見せて「ココとココとココは実現不可能。やり直してください。」で差し戻され、デザインをやり直してってなると、デザインも2度手間、デザインをチェックして無理な項目を洗い出すコーダーにも余計な手間がかかります。 今回洗いだした項目は、なんせ自分がコーダーなので、コーダーがデザインファイルをもらった時にバーッと見てチェッ
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宣言とは
モバイルサイトのWebデザイン15選
携帯、モバイルサイトの デザインってどうなってるのか 少し興味が沸いたのでモバイル サイトのキャプチャを取って アーカイブとしてまとめている モバイルデザインアーカイブさん から15のモバイルサイトで好きな デザインを15個厳選しました。 個人的なギャラリーとなっていますが、共感して頂ければ幸いです。キャンペーンサイトのデザインなどもあるので現在は確認出来ない事もあります。 FAT ONLINE SHOPPING 余計な情報を入れず、一番伝えたい事は画像にしてTOP絵にしています。 FAT ONLINE SHOPPING AEON Lake Town シンプルですが、画面の小さいモバイルサイトで情報を絞り込むのはかなりいいのでは。Ｆｌａｓｈで操作も軽快でした。 AEON Lake Town MOS BURGER モスバーガーのモバイルサイト、凄くいいですね。メニューも見やすいし、色使いもか
高木浩光＠自宅の日記 - やはり退化していた日本のWeb開発者「ニコニコ動画×iPhone OS」の場合
■ やはり退化していた日本のWeb開発者「ニコニコ動画×iPhone OS」の場合 一年前、「退化してゆく日本のWeb開発者」という題で、ケータイWebの技術面での蛸壺化について次のように書いた。 iPhoneに契約者固有ID送信機能が搭載される日 （略）こうして退化してゆくケータイWebが、日本のスタンダードとなってしまい、いつの日か、PC向けの普通のインターネットまで、単一IDの全サイト送信が必須になってしまうのではないかと危惧した。 （略）iPod touchでNAVITIMEを動かしてみたところ、下の図のようになった。 （略）契約者固有IDがないとどうやって会員登録システムを作ったらいいのかわからないんじゃないのか……というのはさすがに穿ち過ぎだと思いたい。NAVITIMEからソフトバンクモバイルに対して、契約者固有ID送信用プロキシサーバの用意を要請している……なんてことがなけれ
ウノウラボ Unoh Labs: ゼロからはじめる携帯サイト構築。
こんにちは、日食を妙に楽しみにしていたわりには見ようともしなかった ryosuke です。曇りで残念でした。曇りでも日食と分かるぐらい暗くなったら嬉しかったのですが、東京ではそんな事は全然ありませんでしたね。 さてさて、そんな私ですが入社後半年が経過したところで、入社当初より携わって来た携帯サイト構築に関して得た知識(失敗談)をまとめてみようと思います。 初ラボブログ記事でも触れた様にそもそも本格的な携帯サイト構築は経験に乏しく、バッドノウハウの塊の様な面倒な思いこみが先行しがちだったわけですが(実際バッドノウハウの塊ですが)、端末の機能や表現力が豊かになるのと同時に開発環境的なツールやライブラリの充実、ノウハウの蓄積と情報公開により随分すんなり入って行けた様に思います。 結局はキャリア感の差異を知り吸収する事がすべて いきなりですが、PCサイトと携帯サイトの違いで最も厄介な所はこれにつき
"iida"のグラフィックが残念なたったひとつの理由 | 使える「デザインセミナー」
http://iida.jp/products/misora/ こちらはウェブサイトです。見くらべて頂きたいのですが、"iida"のロゴの書体やトンマナ（トーンアンドマナー）と"m i s o r a"のロゴの書体やトンマナ（トーンアンドマナー）がまったく違うのです。 ロゴタイプに使用している書体は"FUTURA"系。商品カテゴリのロゴタイプは"HELVETCA"です。しかも"iida"は、フォントのクセを強調するようにあえて、文字間を詰めて上部をカットしています。"FUTURA"は、もともと、Oや小文字のdaなどに丸みを強くつけています。「丸みの強調｣されたフォルムと言うのは、そもそも人間はかわいい、女性的だ、と感じるようにできています。 それに対して、すべての文字のくせを極力排除した"HELVETCA"をさらに、文字間隔をあける、というのはくせ自体をさらに弱くする、主張を弱める、フラッ
ディレクターなら押さえておきたいモバイルSEO34項目 : LINE Corporation ディレクターブログ
ディレクターの渡邉雄介です。 ディレクターブログで以前に何度かモバイルSEOについて言及していますが、今回は、モバイルコンテンツ制作に関わるディレクターが最低限押さえておきたいSEOの進め方と、34個のチェック項目を紹介したいと思います。 SEO、その前に SEOを行うとき、まず最初に何をしていますか？ 「さっそく実施する」とお答えになる方もいるかもしれませんが、私は最初は何も手を付けず、現状の数値の把握から始めています。 たとえば、ページ内に特定のキーワードの出現回数を増やして、そのワードの検索順位の向上を目指しているような場合、施策を実施する前に最低1週間は過去の順位の推移・平均をみておかないと、結果どれだけ向上したのか、適切な検証ができません。 モバイルはPCと違って、まだまだ解析できる項目が限られているため、SEOの実施後にどれだけの変化があったのかを適切に検証をするには、実施前の
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。