これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ
スマートフォン向けの Web サイトを作るとき、viewport の設定次第で使い勝手が大幅に変わる。 最近はレスポンシブ Web デザインが流行してるけども、その大前提として viewport の設定パターンを抑えておくのは重要だろう。 この記事では、viewport の設定によって、見た目・使い勝手がどう変わるかを解説する。 パターン1: 何も考えずに HTML を書く まずは、viewport を指定せずに、単純な HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> </head> <body> <img src="/images/logo-ja.png"> <p>色んな素材がごった煮になった様子をお椀で表現しています。 湯気が<strong>「てっく」</strong>に見えるのが隠し味になっていま
case:MobileDesign! モバイルサイトのデザイン紹介ブログ
case:MobileDesign! モバイルサイトのデザイン紹介ブログ 引っ越ししました。 http://case-mobile-design.com/ case:MobileDesign! モバイルサイトのデザイン紹介ブログ > 2010-02-15 >
KDDIが斬新なデザインの携帯電話「iida」の第2弾を発表、大量の周辺アイテムも
KDDIが本日、斬新なデザインの携帯電話「iida」の第二弾の発表会を開催することが明らかになりました。 「INFOBAR」や「talby」「MEDIA SKIN」といった斬新なデザインの携帯電話を数多く生み出してきたKDDIの「au design project」をベースに、今年4月に新たに立ち上げられた「iida」ですが、第2弾は「INFOBAR」を手がけた深澤直人氏の最新作や「カドケシ」などで知られる神原秀夫氏が考案した端末がラインナップされています。 詳細は以下から。 11:00から発表が行われています。 会場は東京ミッドタウンにある「21_21 DESIGN SIGHT」です。 いよいよ開始 iidaの第1弾。「G9」は非常に好評だったとのこと。 デザイン志向のユーザーは圧倒的に多いことを示すグラフ 「iida」と「au」は互いに活力を与える存在となっています ツタのような充電ケ
モバイルサイトデザイン集のモバイルデザインアーカイブ 公式サイト
モバイルデザインアーカイブとは？ 携帯サイトを制作する上で、「ケータイサイトを参考にしたいけど、仕事に役に立つケータイサイト集ないかなー？」と思っているデザイナーの方へ向けて公開させていただきました。 そんなモバイルデザイナーのモバイルデザイナーによるモバイルデザイナーのための国内最大の携帯サイト集です。 モバイルサイト制作を請け負ったけど、「なかなかデザインがまとまらない」「洗練 された携帯サイトのデザインを参考にしたい」といった方のために、優れたデザインの ケータイサイトを集めました。 デザインに優れた携帯サイトはもちろん、技術的に優れた携帯サイト、そして現在のウェブトレンドを捉えた携帯サイトを掲載しています。
Flash Lite1.1で制作するときのメモ - MotuLog
仕事でモバイルのFlash待ち受けを作る機会があったので、忘れないよう書いておきます。 基本設定 ・容量は100KB以内で書き出す ・フレームレートは8～12fpsが妥当 ・待受サイズは240x320pxが多い。他サイズも考慮して背景などを広めにとっておく 変数にアクセス スラッシュシンタックスと (/) コロン (:) を組み合わせて使用。 例）メインタイムラインの car 変数。 /:car 例）メインタイムラインにあるムービークリップインスタンス mc1 にネストされたムービークリップインスタンス mc2 の car 変数。 /mc1/mc2/:car tellTarget() ムービークリップを制御する場合に以下のように使用する tellTarget("ball") { gotoAndPlay(2); } 日付・時計 today = fscommand2("GetDateDay")
[Think IT] 第2回：携帯サイトの制作から公開まで (1/3)
サイト規模に合わせて作り方を選ぶ 前回（http://www.thinkit.co.jp/article/143/1/）は、携帯サイトとPCサイトがどのように違うかを紹介しました。今回は、汎用的な携帯サイト作りを行うための制作の基本から、実機テストまで含めた公開までの手順を解説します。 携帯サイトでは、キャリアによる仕様の違いがあるため、これをどの程度まで考慮するか、はじめに考えなくてはなりません。携帯サイトの作成法には、下記の5つの方法がありますが、ここでは「3キャリア対応の静的サイト+プログラム」について紹介します。 1.キャリア別に静的なサイト 2.3キャリア対応の静的サイト+プログラム 3.プログラムによる動的生成 4.CMSを使ったジェネレータ型 5.MobaSiF（http://sourceforge.jp/projects/moba）などのフレームワーク型 3キャリア対応の静
[Think IT] 第1回：携帯サイトとPCサイトはここまで違う！ (1/3)
XHTML Mobile Profileに対応したHTML 本連載では、「PCサイトを制作してきたけど、携帯サイトは初めて」といった企業や個人クリエイター向けにPCとモバイルの違いなどをふまえ、携帯サイトを公開するまでの入門的なノウハウを紹介していきます。 まず、今回はHTMLの種類やタグ、CSSなど携帯ブラウザによる違いと、画面サイズやキャッシュ容量などの端末による違いについて紹介していきます。 では、早速携帯サイトを作る上でマークアップの基本となるHTMLについて説明します（図1-1）。携帯電話はPCと比べても非常に早い進化を遂げてきたため、どれも基本はHTMLを基準に作られていますが、携帯ブラウザ（iモード、EZweb、Yahoo!ケータイ）で表示可能なHTMLの仕様には実に多くの種類が存在します。 現在市場に出回っている機種ということに限定すれば、XHTML Mobile Prof
ke-tai.org < Blog Archive > ケータイの端末ID・ユーザIDの取得についてまとめてみました
ケータイの端末ID・ユーザIDの取得についてまとめてみました Tweet 2008/9/8 月曜日 matsui Posted in au, DoCoMo, PHP, SoftBank | 12 Comments » ケータイサイトでは、端末ID・ユーザIDを取得する、という処理をよく行うことがあります。 ログインの度に、ユーザ名とパスワードを入力するというのは、ケータイの操作性の面からも現実的ではないためです。 今回はそんな各種IDの取得方法について、PHPを使った場合を例にとりまとめてみました。 ※ここでは端末IDを「ケータイに振られた個体識別情報（製造番号など）」、ユーザIDを「契約に紐付くID」として解説しています。 ドコモ端末での取得方法 1. utnを使う ドコモ端末ではutn属性を使うことによって、フォームやリンクから個体識別情報を取得することができます。 対応機種は、iモー
Firefoxでモバイル端末をシミュレートする独自アドオン「FireMobileSimulator」を公開します - 遙かへのスピードランナー
★重要★2008/11/15追加：公式サイトFireMobileSimulator.org開設にともない、この記事の更新はストップします。今後のアップデート情報は公式サイトで行いますのでよろしくお願いします。 モバイルサイトをPCで閲覧するために、従来からある方法として、キャリアの提供するシミュレータの使用、Proxyの使用、Firefoxのuseragentswitcher+modify headersの組み合わせ等、色々と手段はありましたが、これらの方法は、それぞれに不足している機能があったり、またITに詳しくない人とかだと導入段階でつまづいてしまったりします。 そこで、もっと簡単にモバイルサイトをPCで見るために便利なツールを作成しました。 Firefoxを簡単に携帯シミュレータにできるアドオンです。モバイル端末のHTTPリクエストや絵文字表示をシミュレートすることができます。３ヶ月
モバイルサイトをPCで見るためのツールやFirefoxアドオン : LINE Corporation ディレクターブログ
こんにちは。ライブドアでモバイルディレクターをしている河野です。 モバイルディレクターをしていますと、モバイルのサイトをPCで見たいという要望が少なからずあります。それは、PC からの方が実機で見るよりレスポンスが早く、また電波状況に左右されずに閲覧できたり、リンク先の URL の情報やヘッダ情報、画面キャプチャーなど実機からでは得られない情報を取得することができるからです。 そこで今回はモバイルサイトを PC で閲覧する方法についてまとめながら、開発を進めるのに便利なツールや Firefox のアドオンを紹介できればいいなと思います。 Web サーバは一般的に2つの方法でアクセスがモバイルからかどうかを判定します。1つはアクセス元のIP、そしてもう1つは HTTP ヘッダ中にある User-Agent です。そのため、携帯キャリアのゲートウェイ経由からのアクセスのみ閲覧を認めるサイト(つ
DeNAテクノロジーセミナー行ってきた - public static void main
モバイルサービスでもっともPVを集めているモバゲータウンの技術的な話を聞いてきました。 モバゲータウンは簡単にいうとオンラインゲーム＋SNSな携帯電話向けのサービスです。 ｢http://d.hatena.ne.jp/tokiharu/20080128/1201520133｣に応募したところ、運良く抽選に通ることができました。出席率が非常に高く、部屋がいっぱいになっていました。 id:tokiharuさんが司会で、前半はモバゲーのインフラの構築・運用の話、後半はテンプレートエンジンとか絵文字とかTips的な話。 以下個人的に参考になった話の箇条書き。 モバゲータウンのインフラストラクチャ構築・運用 データベースはMySQL5でテーブルはinnoDB HWはHP、Dellのマシンでメモリ16GのCPUはCore2Duo * 2。全部64bitだそうです。 1回のメンテナンスにかかる時間は90
mod_ktai/YUMEMI Labs [ゆめみラボ]
mod_ktai （もっど・けーたい） 「mod_ktai」は、弊社が開発したApacheモジュールです。 Apache上で動くアプリケーションに対して、開発言語を問わず携帯サイト作成のための様々な機能を提供することができます。 最新情報 2008/12/26 mod_ktai_emojiマニュアルに追記 & 「よくある質問について」ページを新規追加 2008/10/29 mod_ktai第二弾公開(mod_ktai_image) & バージョンアップ & 対応ＯＳ、配布パッケージ追加 2008/07/16 mod_ktai第一弾公開(mod_ktai_info、mod_ktai_emoji) 動作環境 mod_ktaiは現在以下の環境で動作します。 OS：CentOS 5、RedHat Enterprise 5 ミドルウェア：Apache 2.2以上、Boost 1.3
本邦初公開！ これがiPhone 3Gだ（前編）
明日11日、いよいよ日本でiPhoneが発売される。6月9日に米国で開催されたアップル開発者会議でiPhone 3Gが発表されて以来、連日のようにiPhone関連のニュースがメディアをにぎわせた。買おうかどうか迷っている人も多いだろう。 一体、iPhoneのどこがすごいのか。他の携帯電話と何が違うのか。発売前に、iPhone 3Gの実機を手に入れることができたので、実際に使ってみた使用感をレポートしよう。 通話 iPhoneの通話スタイルは3通り まずは最も基本となる、電話としての使い勝手を見てみよう。iPhoneの通話スタイルは、耳に当てる、付属のマイク付きヘッドホンを使う、iPhone内蔵スピーカーを使う──の3通り。普通の携帯電話とデザインが明らかに異なるが、実際に耳に当ててみるとそれほど違和感はない。通話時に声を拾うマイクは、iPhone下部および付属のヘッドホンのケーブル途中にあ
モバゲーのような携帯サイトを作るための12のTips 携帯ホームページを作ろう！ -ちょっと詳しいモバイルサイトの作り方-
当ブログが携帯サイト作成法に関する記事をかいていることから、読者の方から、 『モバゲーのような携帯サイトを作るためにはどうしたらいいんですか？』 っていう質問を最近良く受けます。 おそらく、モバゲーがとても有名で、ある種モバゲーが携帯サイト界のデファクトスタンダードのような 位置づけになってきているのでしょうか。 確かに、携帯サイトを作ってきている身としても、 モバゲーのサイトデザインにするには、結構難しいことも多いし、学ぶことも多い。しかし、最近の携帯サイトは、実機からしかアクセスできないようになっていて、PCからコードを覗くことができないことも多く、学ぶことも難しいようです。 ということで、今回は実際にモバゲータウンに携帯でアクセスして、携帯の画面を見ながら、デザインを真似て新しく自分なりに作ってみましたので、そこから得た経験をTipsとして公開したいと思います。 ちなみに、左のスクリ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Engadget | Technology News & Reviews
WILLCOM｜〜超小型通信モジュールW-SIM（ウィルコム シム）搭載。いつでもどこでも日本全国が無線LANスポットに〜 「どこでもWi-Fi」の発売について
http://pixy.in/hotspotmaps/
第３回日本ケータイ小説大賞：あたし彼女
モバイルSEOの注意点 - ぐうたら玉子丼
株式会社ETS