ウノウラボ by Zynga Japan: iPhone向けのサイトを作るときのちょっとした気配り
yamaokaです。 だいぶiPhoneやAndroidといったスマートフォン向けのwebページを作ることが増えてきたのではないでしょうか。ちょっとした気配りで使いやすくなるケースもあるかなと思うので、いくつか使えそうな工夫について書いてみたいと思います。 ただし、今回はiPhone向けです。 タップされた場所をハイライトする iPhoneのSafariでは「-webkit-tap-highlight-color」という拡張された属性があり、タップされた箇所に色を付けることができます。CSS3ではRGBaによる色指定ができるので、半透明の色を指定すればタップされた箇所をわかりやすく示すことができます。例えば、-webkit-tap-highlight-color:rgba(255,0,0,0.40);と指定すると薄い赤色を付けることができます。「outline:none;」と併せてリンク文
ウノウラボ Unoh Labs: 携帯向けXHTML
おはようございます。 最近携帯向けのページを作成することが多いので、携帯向けのXHTMLと格闘しておりますkayです。 その際に個人的に感じたこと等をまとめてみましたので、少しでもご参考になればと思います。 なお、ここでご紹介しますものはあくまでも個人的な趣味に基づいており、一定時期より古い機種は配慮しておりませんのでご了承ください。 3キャリア対応の携帯サイトを作成する場合、docomoに合わせてCSSをインラインで書く必要があります。 これはPCサイトを作成したことのある人にとってはきっととても気持ち悪いことなんですが、我慢してstyle=""を使っています。 また携帯ですので、実際に出来ることはとても限られており、機種やキャリアによっても異なりますので個人的にはベーシックなものを中心に使用してデザインすることをおすすめします。 その際、一番制限が厳しいのは相変わらずdocomo
ウノウラボ Unoh Labs: WEBアプリのテストに便利なFirefoxのアドオン
こんにちは！ のりPと同い年ですが、クラブ通いは●年前に卒業しました やまもと＠テスト番長です。 早いもので、もうお盆の帰省シーズンですね。 今年の夏は世間の騒がしい日々が続いておりますが、みなさんお変わりございませんでしょうか。 さて、Firefoxといえば豊富なアドオンですが、今回はテスター目線で WEBアプリケーションのテストに便利なFirefoxアドオンを並べてみたいと思います。 Firesizer ブラウザの画面サイズを整えることが出来ます。 InFormEnter 準備しておいた値を入力フォームにセットしてくれます。 MeasureIt 画面上のピクセルサイズを測ることが出来ます。 Regular Expressions Tester 正規表現での検索がその場で出来ます。 FireShot キャプチャにメモを書き込んだり出来ます。 Web Developer F
ウノウラボ Unoh Labs: ゼロからはじめる携帯サイト構築。
こんにちは、日食を妙に楽しみにしていたわりには見ようともしなかった ryosuke です。曇りで残念でした。曇りでも日食と分かるぐらい暗くなったら嬉しかったのですが、東京ではそんな事は全然ありませんでしたね。 さてさて、そんな私ですが入社後半年が経過したところで、入社当初より携わって来た携帯サイト構築に関して得た知識(失敗談)をまとめてみようと思います。 初ラボブログ記事でも触れた様にそもそも本格的な携帯サイト構築は経験に乏しく、バッドノウハウの塊の様な面倒な思いこみが先行しがちだったわけですが(実際バッドノウハウの塊ですが)、端末の機能や表現力が豊かになるのと同時に開発環境的なツールやライブラリの充実、ノウハウの蓄積と情報公開により随分すんなり入って行けた様に思います。 結局はキャリア感の差異を知り吸収する事がすべて いきなりですが、PCサイトと携帯サイトの違いで最も厄介な所はこれにつき
ウノウラボ Unoh Labs: JavaScriptライブラリといえば jQuery（入門編）
こんにちわ。山下です。 最近、私の周りではJavaScriptライブラリといえば、jQuery の名前がまず最初に挙がってくるようになってきました。今回は、jQueryって何が便利なの？っていう人向けに、ポイントを掻い摘んで説明します。 1.名前空間を汚さない 他のJavaScriptライブラリとかだとStringとかArrayを直接拡張してたりしますが、jQueryはグローバルな名前空間を汚しません。eachとかmapのような便利な関数もすべてjQueryオブジェクトの属性として定義されています。 jQuery.each, jQuery.extend, jQuery.grep, jQuery.map, jQuery.merge, jQuery.trim, etc. また、標準では $ にショートカットが割り当てられるのですが、jQuery.noConflict()と書くことで proto
ウノウラボ Unoh Labs: Ext JSをUIに使って携帯サイトのシミュレータを作ってみた
五十川です。 携帯サイトの見栄えをシミュレートするウェブアプリ作りました。と言っても、実際に作ったのはかれこれ半年以上前で、手直ししてから公開しようと思ってたら、結局「guid=ON」を付け足したくらいであとは放置だったので、さすがにいい加減晒そうと。 任意のヘッダでリクエストして、レスポンスの絵文字とか変換してサイトの見栄えを確認するというものですが、これはそもそもExt JSをいじってた頃に、Ext JSでこういうの作ればいい感じになるんじゃね？ということで、丁度2.0がリリースされた頃にデモ用に作ったものなのでした（なので、かれこれ半年以上前） 実機テストの代用になるわけでは、もちろんありませんが、絵文字も含めたマルチキャリアでの見栄えを手軽に確認したいときなどに、わりと便利に使えてたりします。 スクリーンショット 機種ごとのプリセットのヘッダグループをYAMLファイルに書いておいて
ウノウラボ Unoh Labs: viを使おう
ウノウでは指定のエディタやフレームワークというのはなく、サクラエディタ やvi、emacsなど個々に使いやすいエディタを使用しています。 vi派、emacs派に分かれて、いかに優れているか度々論争になりますが、ウノウではどうもvi派が優勢なようです。 さて、その多数派のviですが、初心者向けとは言いがたくとっつきにくい面があります。 かく言う私もずっとサクラエディタ派でしたが、今ではviの移動コマンドに慣れてしまいブラウザでもjやkをタイプしたりCtrl+bしたりしてます。 またカスタマイズすることでどんどん使いやすくなり、もはや手放せないモノになってきます。 そこで、私が使っているのはvimですが、使っているvimの設定を一部ご紹介しようと思います。 .vimrc set autoindent #オートインデント set number #行番号表示 set incsearch
ウノウラボ Unoh Labs: さくらインターネットで添付画像付きのマルチパートメールをPHPで送ってみる
matsudaです。こんにちは。 最近周りの環境に触発され、PHPでプログラミングを初めています。 で、なんとなくHTMLで画像が添付されてて、マルチパートなメールを送りたくなったので簡単な雛形を作ってみました。 ・最近プログラミングはじめた ・PEARのインストールとかよくわからない ・簡単に、添付画像とテキストでメールを送れればいい な人にオススメです。 さくらインターネットを利用していて、PEARのライブラリのインストールとかよくわからない！っていう人に効果を発揮するはずです。宛先と送信元メアドをかきかえて、ためしに利用してみてください。 <?php //内部のエンコード mb_language("japanese"); mb_internal_encoding("UTF-8"); //画像の取得と画像のエンコード $img = file_get_contents("
ウノウラボ Unoh Labs: デザインセンスの無い人がwebサイトを作成する際に参考にしているサイト
こんにちは satoです。 いくら面白くて、高機能なwebサイトを作成しても、デザインがダサいとサイトの魅力や開発意欲は半減です。 僕もまったくデザインセンスが全く無いのですが、新しい物を作成する際には以下のサイトを参考にしています。 (1)Color Scheme Generator 2 デザインの大まかな配色等を決めるのに使用することがあります。 真似するだけで、Coolなサイトに見えるような気がします。 (2)Color Palette Generator ロゴ等の画像を指定すると、その画像に合ったカラースキームを 教えてくれます。 (3)Web 2.0 Colour Palette 有名なサイトのカラースキームの一覧があります。 (4)pmob.co.uk CSSや画面分割などのさまざまなサンプルや解説があります。 (5)logopond さまざまなロゴのサンプルがありま
ウノウラボ Unoh Labs: Tab Mix Plus の良さが分かってきました
FireFox のプラグイン，Tab Mix Plus は 以前から使っていたのですが， せいぜいタブの復元くらいしか活用していませんでした． Tab Mix Plus ユーザにとっては常識なのかも知れませんが， 最近になって「タブを保護」と「タブをロック」を知り， これがなかなか便利なのでここに書いておきます． * タブを保護 - タブを誤って閉じるのを防ぐ * タブをロック - 表示しているページが変更されるのを防ぐ ブラウザでいつも開いているページ（例えば Gmail や Livedoor Reader） を保護してロックするのがおすすめです． そうすると， CTRL + W で誤ってタブを閉じてしまったり， ブックマークやホームに移動したときに開いていたページが変更される， といったことがなくなります．
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
