ちょっと必要に迫られたのでメモ。 どうもTwitterやってるとiPhoneや Androidなどのスマートフォンの 話題ばかりなので忘れそうですが、 携帯サイトはビジネスには必須 ですので備忘録として記事に。 以前にも何度かまとめ記事が話題に上がっているので今更感も否めませんが自分のブログにあったほうが探しやすいのでメモします。 予備知識 モバイルサイト構築前に知っておきたいユーザビリティ10のポイント ファーストビューの重要性、色の大事さ、リンク操作に関して記載されています。 モバイルサイト構築前に知っておきたいユーザビリティ10のポイント 携帯サイト（html）の制作に入る前に確認しておきたいチェック項目 サンプルを元に解説してくれているので分かりやすいです。 携帯サイト（html）の制作に入る前に確認しておきたいチェック項目 携帯サイトの作り方 5年前の情報なので参考程度に。今は随
case:MobileDesign! モバイルサイトのデザイン紹介ブログ 引っ越ししました。 http://case-mobile-design.com/ case:MobileDesign! モバイルサイトのデザイン紹介ブログ > 2010-02-15 >
「デザインは素敵なんだけど、携帯でこれはちょっとできないなー」とか、「無理ではないけどできれば避けておいた方がいいよなー」っていうデザインがあがってくることが多い今日この頃。 モバイルコーディングをやり慣れている人じゃないとモバイルでできることできないこと、cssを使わないと実現できないこと、table使わないと実現できないこと、などが分かりにくいと思うので当然だとは思うのですが。 ですが、知っているのと知らないのとでは工数がかなり違ってきます。 一旦デザインして、コーダーにそれを見せて「ココとココとココは実現不可能。やり直してください。」で差し戻され、デザインをやり直してってなると、デザインも2度手間、デザインをチェックして無理な項目を洗い出すコーダーにも余計な手間がかかります。 今回洗いだした項目は、なんせ自分がコーダーなので、コーダーがデザインファイルをもらった時にバーッと見てチェッ
ケータイ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宣言とは
GT Nitro: Car Game Drag Raceは、典型的なカーゲームではありません。これはスピード、パワー、スキル全開のカーレースゲームです。ブレーキは忘れて、これはドラッグレース、ベイビー！古典的なクラシックから未来的なビーストまで、最もクールで速い車とカーレースできます。スティックシフトをマスターし、ニトロを賢く使って競争を打ち破る必要があります。このカーレースゲームはそのリアルな物理学と素晴らしいグラフィックスであなたの心を爆発させます。これまでプレイしたことのないようなものです。 GT Nitroは、リフレックスとタイミングを試すカーレースゲームです。正しい瞬間にギアをシフトし、ガスを思い切り踏む必要があります。また、大物たちと競いつつ、車のチューニングとアップグレードも行わなければなりません。世界中で最高のドライバーと車とカーレースに挑むことになり、ドラッグレースの王冠
せっかくコンテンツを作っても、リンクがユーザにクリックされず、内容を見てもらえない、という悩みをお持ちのWEBマスターの方は多いのではないでしょうか。 今回は、携帯サイトでユーザを次ページに導くためのテクニックをご紹介します。 筆者がユーザビリティテスト（ユーザ行動観察調査）を通して得た実感として、携帯サイトの方がパソコンサイトよりも次ページへの誘導が難しいという印象があります。ある携帯の有料会員制サイトでは、「ユーザはいつも利用しているリンク以外はほとんどクリックしない」というユーザ行動が見られました。 理由として、携帯サイトは 読み込みが遅い隙間時間に利用される場合が多く、利用時間が短いパケット代がかかる などが考えられます。 そのため、携帯サイトでユーザを次ページに誘導するためには、パソコンサイト以上に誘導方法を意識する必要があります。以下、ユーザビリティテスト（ユーザ行動観察調査）
ワッサーでつぶやいていて、PHPで個体識別番号をセッションIDとして使う方法を教えてもらった。http://wassr.jp/user/nihen/statuses/skctoRFZ3G 目からうろこが落ちた。 <?php session_id(get_mobile_id()); session_start(); if (!isset($_SESSION['count'])) { $_SESSION['count'] = 0; } else { $_SESSION['count']++; } echo $_SESSION['count']; ?>http://pastebin.com/m74eb934f ここで、get_mobile_id()で個体識別番号を取得するらしい。 で、それをセッションIDとして、session_idで認識させる。すると、CookieやHiddenを使えなくてもO
MT4i3.0.8X1の公開後、テンプレートセット作ったりしてますが、中には自分でコーディングしたい!って人もいると思われます。 そんな人のために、既に情報としてはいろいろなところで出ているんですが、一応3キャリア(i-mode/EZweb/Yahoo!ケータイ)共通のコーディングのポイントを纏めておこうかなと。 別にMT4i3.0.8X1だけじゃなく、普通にどんなモバイルサイトのコーディングでも使えます。 一応、注意点をまず述べておくと、XHTMLに対応しているのは、 docomoのFOMA端末 auのWIN端末 softbankの3GC端末 という、いわゆる上位端末になります。古い下位機種では利用できません。 最近は下位端末を利用している人は少なくなりましたし、仮に利用していてもまずネット閲覧にケータイを使う目的ではないので、このあたりは非対応でも問題ないかなと考えています。 次に全体
携帯サイトの作り方 第1回 作成方法の基礎携帯電話などから閲覧できる「ケータイサイト」を作ってみましょう。携帯端末に搭載されているブラウザに関するいくつかの制約を押さえておけば、あとは簡単に作成できます。まずは、携帯サイト作成の基本をご紹介。 (注) 本記事の解説は、ガラケーサイトの作成方法です。 本記事は、ガラケー(フィーチャーフォン)端末向けのウェブサイトを作成する方法の解説です。スマートフォン端末向けのウェブサイトの作成方法ではありませんのでご注意下さい。スマートフォン向けモバイルサイトの作成方法に関しては、下記の記事などをご参照下さい。 スマートフォン対応サイトを作る際の注意点 レスポンシブ・ウェブデザインの簡単な作り方 レスポンシブCSSで使うブレイクポイントの決め方 モバイルファーストでデザインする際のCSSの書き方 ブラウザの幅に合わせて表示を自動変更するレスポンシブ技12選
DoCoMoのiモードIDを取得する場合URLにguid=onという文字列を含める必要があります。 簡単サインインの際はformのactionに加えるのですが、Wicketの場合は以下のように書きます。 Form<SignInPage> signInForm = new StatelessForm<SignInPage>("signInForm") { private static final long serialVersionUID = 1L; @Override protected void onComponentTag(ComponentTag tag) { super.onComponentTag(tag); String action = tag.getAttributes().getString("action"); if (action.contains("?")) { t
auの端末はinputタグのtypeがcheckboxの場合にvalueを指定しないとデフォルトで0が送信されます。 Wicketはこれをfalseとして解釈してしまうので、明示的に値を設定するListenerを書きました。 package net.nagaseyasuhito.sandbox.listener; import org.apache.wicket.Component; import org.apache.wicket.application.IComponentInstantiationListener; import org.apache.wicket.behavior.SimpleAttributeModifier; import org.apache.wicket.markup.html.form.CheckBox; public class CheckBoxValu
Wicketは文字列を実体参照としてhtmlに出力してしまうので、それを抑制するためにComponent.setEscapeModelStrings(boolean escapeMarkup)を片っ端から呼び出すListenerを書きました。 package net.nagaseyasuhito.sandbox.listener; import org.apache.wicket.Component; import org.apache.wicket.application.IComponentInstantiationListener; public class EscapeModelStringsModifier implements IComponentInstantiationListener { private boolean modify; public EscapeModel
beBitさんの「ユーザービリティ実践メモ」に、携帯サイト製作についてのかなりありがたいTipsがあります。 今後の携帯サイト製作のためにメモメモです。 （１）ページを複数ページにするより、ページ内リンクで移動する。 「携帯電話=PCの代替」ユーザ(インターネットは基本的にPCで利用するユーザ)には、「携帯サイトでは毎回ページの読み込みに時間がかかって不便、面倒だ」という感情が共通している。 ・ページを複数に分割し、ページ遷移させる(ロードが必要) ・1ページに情報をまとめ、ページ内リンクでコンテンツ間を移動させる(ロードが不要) 上の２つの場合は、後者の方がストレスがない。 参考： 携帯サイトでのユーザナビゲーションのコツ http://www.bebit.co.jp/memo/2008/07/post_115.html （２）marqueeタグの動くテキストは見られない。 サイトの性格
教えてもらいました！！ http://wassr.jp/user/halt/statuses/fxq6wfs1Kj http://twitter.com/kosugi/status/1016128792 http://twitter.com/tokibito/status/1016118759 このページを参考にしますた。 http://ke-tai.org/blog/2008/04/03/docomocss/ Wicket の Content-Type を変更する。 Wicket は デフォルトでは 「Content-Type: text/html; charset=UTF-8」 なので Page クラスの setHeaders を Override で解決しますた。 import org.apache.wicket.markup.html.WebPage; import org.apa
制限の多いキャリアに合わせた作り 前回（http://www.thinkit.co.jp/article/143/2/）は、汎用的な携帯サイトを作る手順とポイントを解説しました。今回は、3キャリア対応の携帯サイトを作るテクニックと「こうしたい」を実現するデザインテクニックを技術的視点で解説します。 3キャリアに対応した携帯サイトを作るためには、各キャリアの仕様を比較し、最も制限の多い（自由度の低い）キャリアに合わせなくてはなりません。まず、第1回（http://www.thinkit.co.jp/article/143/1/）と第2回（http://www.thinkit.co.jp/article/143/2/）の内容をふまえて、3キャリアの携帯サイト制作のポイントをおさらいしましょう。 HTML／CSSに関しては、最新のデザインを取り入れるならHTML文書は「XHTML」で記述する、コ
こんにちは。ライブドアでモバイルディレクターをしている河野です。 モバイルディレクターをしていますと、モバイルのサイトをPCで見たいという要望が少なからずあります。それは、PC からの方が実機で見るよりレスポンスが早く、また電波状況に左右されずに閲覧できたり、リンク先の URL の情報やヘッダ情報、画面キャプチャーなど実機からでは得られない情報を取得することができるからです。 そこで今回はモバイルサイトを PC で閲覧する方法についてまとめながら、開発を進めるのに便利なツールや Firefox のアドオンを紹介できればいいなと思います。 Web サーバは一般的に2つの方法でアクセスがモバイルからかどうかを判定します。1つはアクセス元のIP、そしてもう1つは HTTP ヘッダ中にある User-Agent です。そのため、携帯キャリアのゲートウェイ経由からのアクセスのみ閲覧を認めるサイト(つ
初心者にとってはトラブルが発生しやすいケータイWebアプリの開発。携帯電話への対応サイトを初めて開発するときに想定するべき9つの注意点を紹介する（編集部） 携帯対応サイトを開発するときの注意事項 携帯電話が普及してもう随分たちます。いまでは、サイトを作るときにケータイに対応するかどうか、必ず意識されるようになりました。しかし、ケータイ対応のWebアプリを作ろうとするとPC用のサイトと違う部分も多く、Web開発経験はあるけれど携帯の開発経験がない人にとっては取り組み難く、実際に想像できなかったトラブルがいくつも発生します。 本記事は、Webサイトのモバイル対応を担当した私が、実際に携帯対応サイトを作ったときに発生したトラブルを踏まえて、携帯対応サイトを初めて開発するときに想定するべき注意事項を中心に説明していきます。 ケータイ向けとPC向けのWebページの相違点 インターネットへの接続方法に
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く