携帯/モバイル

2009年04月02日

一歩先行く、デザインQRコード。

はてなブックマーク -一歩先行く、デザインQRコード。
さて。
はじめましてこんにちは。

ゆめみの開発者によるブログ「ゆめ技」ですが、ゆめみにはもちろん開発者じゃないメンバーもいるんです。
そんな「じゃない」側のトップバッターとして、ケータイサイト外観構築からリニューアルのお手伝い、はたまたドット画像やケータイFlashコンテンツなどなどを幅広くを担当するゆめみ稀少職種、デザイナーのShoe'sが今回はお届けしてまいります。

挨拶もほどほどにして、ケータイから離れ気味の路線を少し戻し、
「ふーん」と言っていただけるくらいの、QRコードについて小ネタです。

続きを読む "一歩先行く、デザインQRコード。" »
はてなブックマーク -一歩先行く、デザインQRコード。
日時: 2009年04月02日 10:00 | コメント (2) | トラックバック (0)
2009年10月30日

携帯にキャッシュさせる方法(キャッシュコントロールについて)

はてなブックマーク -携帯にキャッシュさせる方法(キャッシュコントロールについて)



初めまして、石原です。

モバイル端末において、webページを効率よくキャッシュさせるということは、パケット代の節約や応答性の観点から考えてとても重要なことだと思います。

今回は、コンテンツ内容の検証を毎回行い、変更がない場合はキャッシュを使用させる方法と、注意点について投稿させていただきたいと思います。

はじめに




キャッシュを制御する方法は大きく分けて、METAタグによる制御HTTPヘッダによる制御の2種類があります。

今回は、HTTPヘッダを使用した制御を行いたいと思います。

HTTPヘッダを使用した制御には、キャッシュの有効期限を定め、有効期限内ならばキャッシュを使用するという期限モデルと、キャッシュサーバがWEBサーバーに条件付きリクエストを行う事でリソースの検証を行い、リソースの変更がされていなければキャッシュを使用するという検証モデルがあります。



今回のケースでいうと、検証モデルを使用したいところなのですが、、、後に記述する問題点の為に、検証モデルと期限モデルの両方を使用します。



続きを読む "携帯にキャッシュさせる方法(キャッシュコントロールについて)" »
はてなブックマーク -携帯にキャッシュさせる方法(キャッシュコントロールについて)
日時: 2009年10月30日 11:16 | コメント (0) | トラックバック (0)
2009年11月19日

【3キャリア共通コーディング】テーブルで、シンプルなソリッドを。

はてなブックマーク -【3キャリア共通コーディング】テーブルで、シンプルなソリッドを。
お久しぶりです。Shoe'sです。

モバイル向けのXHTMLで3キャリアで同じ表現をしようとした場合には、必然的に一番表現能力の劣るドコモに合わせる必要があります。モバイルユーザビリティ・デザインにも載せているコーディング例の他にも、ハマってしまうポイントや汎用的に表現したいもの。という観点から今回は『TABLEで実線(solid)を表現する』方法を紹介します。

続きを読む "【3キャリア共通コーディング】テーブルで、シンプルなソリッドを。" »
はてなブックマーク -【3キャリア共通コーディング】テーブルで、シンプルなソリッドを。
日時: 2009年11月19日 17:50 | コメント (0) | トラックバック (0)
2010年02月15日

【3キャリア共通コーディング】au(EZweb)端末で、divの隙間を消す裏技。

はてなブックマーク -【3キャリア共通コーディング】au(EZweb)端末で、divの隙間を消す裏技。
お久しぶりです。Shoe'sです。

モバイル向けのXHTMLで3キャリアで同じ表現をしようとした場合には、必然的に一番表現能力の劣るドコモに合わせる必要があります。モバイルユーザビリティ・デザインにも載せているコーディング例の他にも、ハマってしまうポイントや汎用的に表現したいもの。という観点から今回は『au(EZweb)端末で、div要素間の無駄な隙間(スペース)を生まない』方法を紹介します。

モバイルに於ける細かい制約等はここでは控えますが、「div要素で隙間が生まれる」ということは、3キャリア共通では「margin属性やpadding属性に対応していない」ということが前提になります。というところで、まずは問題点から。

au(EZweb)端末に於ける、div要素の問題点

ごく普通にdiv要素を記述すると、au(EZweb)端末では要素の上下に余分なスペースが開いてしまいます。
3キャリア共通コーディング:au(EZweb)端末に於けるdiv要素の問題点
モバイルサイトでより凝ったレイアウトを実現しようとした場合に、悩んだことがある方は多いと思います。

div要素を入れ子で記述してみる

解決策として、真っ先に思い浮かぶ手法だと思いますが、以下の様にdiv要素-Bのスペースによって、外側(div要素-Bの下)に数ピクセルの予期しないdiv要素-Aの背景色が表示されてしまいます。
3キャリア共通コーディング:div要素を入れ子に記述しau(EZweb)端末で表示
この方法で落ち着いてるモバイルサイトはよく見掛けます。
ただし、このままではdiv要素を繋ぐ画像を表示させたい場合に、しっくりこないのです。
3キャリア共通コーディング:div要素を入れ子に記述しau(EZweb)端末で表示  3キャリア共通コーディング:div要素を入れ子に記述しau(EZweb)端末で表示
div要素-Aの下辺(左)に置いても、div要素-Bの上辺(右)に置いても、
表示させている側の背景色が数ピクセル、余計なスペースとなって立ちはだかります。

目から鱗のコーディングで解決する

このような問題は、細かな説明は省きますが(といっても説明のしようがありませんが)、
『全て入れ子にし、閉じタグを最後にまとめる』というコーディングにより解決できるのです!

是非、活用してみてください。


■3キャリアでdiv要素間の無駄な隙間(スペース)を生まないソース

<div style="background-color:char">div要素-A<br />
	<div style="background-color:char">div要素-B<br />
		<div style="background-color:char">div要素-C<br />
		</div>
	</div>
</div>

はてなブックマーク -【3キャリア共通コーディング】au(EZweb)端末で、divの隙間を消す裏技。
日時: 2010年02月15日 15:00 | コメント (0) | トラックバック (0)
2010年06月08日

PhotoShop・Illustrator CS5 からWeb用に保存したファイルが一部携帯端末で見れない場合

はてなブックマーク -PhotoShop・Illustrator CS5 からWeb用に保存したファイルが一部携帯端末で見れない場合

こんにちは。Nairoです。

CS5が発売されましたね。
使っている方も多いかと思いますが、先日CS5で書き出したファイルが初期設定のままでは、一部携帯端末(例えばSoftbank 905SH)で表示しないということに気づきました。
初期設定ではWeb書き出し機能(Web およびデバイス用に保存)にメタ情報を付与するようになっています。
これです。

メタデータ

このまま初期設定で保存してしまうとメタ情報などが付与されてしまい、一部端末で表示しないことがあります。
ということでメタ情報をなしに。
情報を付けなければファイル容量も小さくなりますし忘れずに!
特にインストールした直後などは注意しましょう。

メモ書きでした。

はてなブックマーク -PhotoShop・Illustrator CS5 からWeb用に保存したファイルが一部携帯端末で見れない場合
日時: 2010年06月08日 20:29 | コメント (0) | トラックバック (0)
ゆめみ深田浩嗣のブログ Mercury mobmail
YUMEMI Labs Sweet