モバイルサイトをPCで見るためのツールやFirefoxアドオン(livedoorディレクターBlog)
    このエントリをはてなブックマークに登録

2008/8/18 月曜日 matsui Posted in 記事紹介・リンク | No Comments »

以前も何度か取り上げさせていただいたことのある「livedoorディレクターBlog」に、役に立ちそうなエントリーがありましたのでご紹介します。

→　livedoorディレクターBlog　モバイルサイトをPCで見るためのツールやFirefoxアドオン [livedoor.jp]

 

モバイルサイトを開発していると、ケータイよりもレスポンスの良いPCでサイトを確認したいということがよくあります。

上記エントリーでは、そんなときに便利なツールを、次の3つのケースに分けて紹介しています。

  1. モバイルシミュレータを使う方法
  2. 汎用のWebブラウザ＋プロキシを使う方法
  3. ブラウザそのものの機能やアドオン/プラグインを使う方法

 

「Modify Headers」の箇所では、当サイトの記事へもリンクしていただいています。ありがとうございます。

その他、XMLでパースエラーが出てしまう場合の対処法や、URLのQRコードを簡単に表示する方法など、役立つテクニックがいろいろ紹介されています。

ケータイサイト開発を行っている方は必見ですね。

 

関連：


タグ: , , ,



iPhoneでJavaScriptを使わずCSSだけでアニメーションする方法
    このエントリをはてなブックマークに登録

2008/8/13 水曜日 matsui Posted in iPhone | No Comments »

iPhoneはJavaScriptを使わなくても、CSSのみでアニメーションができるようです。
今回はその方法をご紹介します。

サンプルとして、ボタンを押すと赤い四角が右にツーっと動く、というものを例に解説しようと思います。


この赤い四角が


「move right」ボタンを押すことで、右にアニメーションします

 

サンプルのHTMLは次の通りです。

<html>
<head>
<meta name="viewport" content="width=320, user-scalable=no, maximum-scale=1.0" />
<style type="text/css">
.slide {
	-webkit-animation-name: "slide-right";
	-webkit-animation-duration: 2s;
}
@-webkit-keyframes "slide-right" {
	from { left: 10px; }
	to { left: 190px; }
}
</style>
<script type="text/javascript">
function slideStart() {
	document.getElementById("target").className = "slide";
	document.getElementById("target").style.left = '190px';
}
</script>
</head>
<body>
<input type="button" name="hoge" value="move right" onClick="slideStart();" />
<div id="target" style="width:120px; height:120px; background-color:red; position:absolute; top:120px; left:10px;"></div>
</body>
</html>

 

ポイントとなるのは「-webkit-animation-xxx」の部分です。

上記の例では、クラス名「slide」に対して、上記のようなアニメーションのような定義を書いています。

-webkit-animation-name: "slide-right";
-webkit-animation-duration: 2s;

1行目で名前を定義します、この名前は下と一致していれば適当なもので構いません。
2行目でアニメーションの速度を定義しています。
今回の例では2秒です。こちらの数字を少なくすれば早く移動することになります。

 

@-webkit-keyframes "slide-right" {
	from { left: 10px; }
	to { left: 190px; }
}

こちらの部分で、移動開始位置と終了位置を設定します。

以上でアニメーションの定義は終わりです。

 

あとはアニメーションさせたいオブジェクトのクラス名を「slide」とセットしてやれば、アニメーションが開始されます。

document.getElementById("target").className = "slide";

なお、上記でアニメーションは開始されるのですが、アニメーション終了後は元に位置に戻ってしまうので、その後に座標を終了位置に変更しています。

document.getElementById("target").style.left = '190px';

 

厳密にはアニメーションの発動時にJavaScriptを使ってしまっているので、タイトルの「CSSだけで」というのはちょっぴり嘘になりますが、まあ使わないでもできないことはないということでお許しください。

サンプルＨＴＭＬをアップしましたので、iPhoneをお持ちの方はこちらから実際にお試しください。
→　iPhone用　アニメーションのサンプル

 

このアニメーションのテクニックは、応用すれば次のようなflick動作などに使うことができます。

→　Ajaxian » iPhone Safari Flick Navigation By Example [ajaxian.com]

→　iPhoneから見れるflickのサンプル　myDailyPhoto [mydailyphoto.com]

このようなインターフェイスは、なかなか便利そうです。
iPhoneをお持ちの方は試してみてはいかがでしょうか。

 

関連：


タグ: , , ,



PerlでCPANモジュールを組み合わせてモバイルサイトを作る方法を紹介するプロジェクト「MobileCat」
    このエントリをはてなブックマークに登録

2008/8/12 火曜日 matsui Posted in 記事紹介・リンク | 1 Comment »

本日は、PerlでCPANモジュールをさまざま組み合わせてモバイルサイトを作る方法を紹介するプロジェクト「MobileCat」をご紹介します。

→　MobileCat　トップページ [mobilecat.koneta.org]

→　Elementary, … CPAN モジュールを使って楽に携帯サイトを作る方法 （紹介ページ） [e8y.net]

→　tomi-ruのモバイル日記　ブログで告知した　（作者tomi-ruさんのブログ） [hatena.ne.jp]

 

このMobileCat （http://mobilecat.koneta.org/） のページ自体がデモサイトとなっており、Perlのフレームワーク「Catalyst」を使って作られています。

名前の由来は、Mobile + Cat[alyst] なので「MobileCat」とのことです。


ケータイから見たところ

 

特に参考になるのは、「ソース逆引き」のページです。

→　MobileCat　ソース逆引き [mobilecat.koneta.org]

機能面から見たソースと利用モジュールを参照できるため、とてもわかりやすいです。
Perlを使ってモバイルサイトを作成しようと考えている方は要チェックではないでしょうか。


ロゴのネコがかわいいです

 

関連：


タグ: , , ,



iPhone向けサイト作成のベースに便利なテンプレート集「iPhone Universal」
    このエントリをはてなブックマークに登録

2008/8/11 月曜日 matsui Posted in iPhone | 1 Comment »

本日は、iPhone向けサイトを作成する際に、ベースとして利用できそうなテンプレート「iPhone Universal」をご紹介します。

→　Google Code　iphone-universal [code.google.com]

 

「iPhone Universal」は、iPhone向けのページを作成するためのサンプルとなるHTML, CSSのテンプレートです。

ライセンスはGPL v3で公開されており、リストやボタン、フォームやパネルなど、一通りのサンプルが収録されています。


シンプルなリスト


入力フォーム


パネル

 

上記画像はネイティブアプリではなく、すべてHTMLとCSSを使って作られたiPhone風インターフェイスです。

なお、こちらにサンプルもアップしてみましたので、iPhoneをお持ちの方はどうぞご確認ください。

→　iPhone Universal デモ

 

関連：


タグ: , , ,



PHPで携帯位置情報を扱うライブラリ「Geomobilejp_Converter」（ウノウラボ）
    このエントリをはてなブックマークに登録

2008/8/8 金曜日 matsui Posted in 記事紹介・リンク | No Comments »

ウノウラボさんで、PHPで携帯位置情報を扱うライブラリための「Geomobilejp_Converter」が公開されていますのでご紹介します。

1週間くらい前にリリースされたものなのですが、紹介するタイミングを逸してしまい、すっかり遅くなってしまいました。

→　ウノウラボ　PHPで携帯位置情報を扱うライブラリ「Geomobilejp_Converter」を作りました [unoh.net]

 

以下公開ページからの引用です。

日本のモバイル端末のGPS機能で送信される情報を想定した、緯度経度フォーマット、測地系の相互変換ライブラリです。また、緯度経度からdocomoの提供するオープンiエリアのエリアコードやエリア名を取得することができます。
例えば、「位置情報付きで掲示板に書き込む」などの機能を簡単に実装することができます。

フォーマットや測地系の変換は、GPS系のプログラムを作る際にはほぼ必ず必要になりますし、緯度経度からエリア名が取得できるという機能も便利ですね。

PHPのバージョン5で動作し、ライセンスは「New BSD License」とのことです。

 

なお、GPSによる緯度経度の取得をサポートするライブラリとして、「Net_UserAgent_Mobile_GPS」というものもあります。
位置取得プログラムの作成をお考えの方は、こちらも合わせて確認してみてはいかがでしょうか。

→　GPS PEARライブラリ / Net_UserAgent_Mobile_GPS [mgps.org]

 

関連：


タグ: , ,



« 過去の記事へ
次の記事へ »