ウノウラボ 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: RjDjのシーン開発入門
こんにちは、五十川です。 RjDjというiPhoneアプリをご存知でしょうか。既によく知られたアプリですが、音声入力やタッチパネル、加速度センサーなど、iPhoneのデバイスインタフェースを使って、ユニークな音響をインタラクティブに作り出すことができるアプリです。と言っても、RjDj自体はその上で動作するアプリケーションのプラットフォームであり、さまざまなアプリケーションをインストールすることで、それぞれに異なるサウンドが体験できます。 RjDj上で動作するアプリケーションは「シーン」と呼ばれます。 以下のビデオの冒頭で流れる映像の音声は、Eargasmというシーンによる録音で、緩やかに流れる背景音に、深いエコーがかかった子供の声が重なり、なんだか夢の中にでも迷い込んだかのような雰囲気が醸し出されます。このシーンは、iPhoneのマイクが拾った音をリアルタイムに加工しており、それを加速度セ
ウノウラボ Unoh Labs: OpenSocialを始めよう！第1回
こんにちは五十川です。 先日、gooホームとmixiアプリが立て続けに公開され、いよいよ日本でもOpenSocialが注目を集めるようになりました。そこで今回は、これからOpenSocialアプリケーションの開発を始めるにあたっての基礎的な内容をまとめてみたいと思います。 OpenSocialとは Google Code - OpenSocialの冒頭には、OpenSocial は複数のウェブサイト間で使用可能な、ソーシャル アプリケーションの共通 APIの定義であると書かれています。 あるOpenSocial対応のウェブサイトで動作するプログラムは、他のOpenSocial対応アプリケーションでも動作する — 例えばmixiアプリ用のプログラムは、gooホームやMySpaceなどでもそのまま動作する可能性があるというのがOpenSocialの重要な点です。もちろんウェブサイトごとに細部の
ウノウラボ Unoh Labs: 紙のノートでToDo管理
yamaokaです。 最近、ToDo管理（タスク管理）を紙の小さなノートを使ってするようにしています。 今回は、実際どのように管理しているのかを書いてみます。 朝書く 作業を始める前に、やることを考える時間を作ります。 ぼくの場合、通勤の電車がかなり空いているので（乗換駅が始発駅です）、 座席に座りながらノートを広げるようにしています。 一日単位で書く まず、その日の日付を書きます。そしてその下に、 箇条書きでその日にやることをリストアップしていきます。 一日単位で書くことで、その日のゴール（到達目標）を明確にすることができます。 優先順位をつける その日のうちに絶対終わらせなければならない項目の先頭には、 二重丸を付けておきます。書き出した項目を一日で全部終えられるとは限りません。 最低限やらなければならないことをはっきりさせておきます。 終わった項目は消す そうして書き出したToDo項
ウノウラボ Unoh Labs: デザイナの立場からの「デザイン依頼のコツ」
こんにちは。yamazakiです。 このブログをご覧になっているのはエンジニアの方が多いと思いますので、デザイナの方とのやりとりをされている方も結構いらっしゃるはず。 社内で「どういうふうに依頼されるのがデザイナとしてはいいもの出てきやすい？」というお話を振られたので今回はそれについて書いてみようと思います。 ※もちろんあくまでこれは私個人が思うところであり、全てのデザイナにあてはまるわけではないと思います。 ので、できればこれをご覧になったデザイナーの皆様も、「こういうふうに依頼してくれると力が発揮できる」というポイントなど書いていただけたら非常に嬉しいです。 また逆に、デザイナにはこういう点気をつけて欲しい、といった、エンジニア視点でのデザイナへのリクエストなどもいただけると嬉しいです。 ---- ビジョン、ゴールを共有するこれは複数の人間が関わるプロジェクトなら当たり前といえば
ウノウラボ Unoh Labs: ブラウザから使用できる仕様書を書くツールまとめ
こんにちはsatoです。Windows以外の環境で仕様書を書こうと思うと、なかなか良いアプリがなかったりまします。今回はブラウザから使用できる仕様書作成ツールをまとめてみました。 1) オンラインで配置図などを描く Gliffy 配置図などをオンラインで描くことができます。また 画像への出力なども対応しています。いわゆるVisioの代わりになるツールです。 2) pdfファイルをtextに変換する PDFTextOnline pdfをtextに変換することができます。pdfの内容をスクリプトなどで切り出して、データ化するときなどに役に立ちます。他にもいろいろな変換するサイトやツールがあるのですが、ここは日本語が正常に通って見た目通りに変換できます。 3) データベースのテーブル定義などを書く WWW SQL Designer オンラインでER図などが書けます。以前miyakeさんが紹介して
ウノウラボ 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: 携帯開発向けに便利な支援ツール/サイト
どーも8makiです。 ウノウでは携帯サイトの開発も行っています。 携帯サイトの開発ってPC用のものと比べて制限が多かったり、面倒くさいことが目白押しです。そこで開発に便利なツール・サイトをリンク集的にまとめてみました。 ～～～～～～ツール編～～～～～～ ■必須ツールi 絵文字 ドコモの絵文字が入力/表示できるようになります。 User Agent Switcher (Firefox 拡張) User Agentを書き換えて携帯になりきることができます。 インポート用の各種端末のUser Agentリストを作成していただいたので皆さんもご利用ください。 useragentswitcher.xml ■あると便利なツールiモードHTMLシミュレータIIiモードHTMLシミュレータOpenwave SDK(au) ウェブコンテンツビューア(ソフトバンク)MediaCoder .
ウノウラボ Unoh Labs: ベンチャー流Webサービスの作り方(企画編)
尾藤正人(a.k.a BTO)です 僕はウノウが株式会社化するタイミングでウノウに参画しました。 それ以来はずっと二年半程Webサービスの開発に従事してきました。 ウノウに参画した当初はWebサービスのことは全く分かっておらず、 単なるLinux好きのエンジニアにすぎませんでした。 ウノウ株式会社の創業時に参画することにより、 サービスの企画から開発、運用まで携わることができました。 最初はエンジニアが自分一人だけだっとところから、 現在のように数多くの優秀なエンジニアを抱える企業に成長するまでの組織作りにも関わることができました。 全く経験のないところから始めたので、それこそいろんな失敗を重ねてきました。 そこで今までの経験を元にベンチャーがWebサービスを開発するにあたって気をつけておいた方がいいことをまとめてみます。 Webサービスの開発を始めるには、何はなくとも企画から。 今回はW
Smarty レイアウトテンプレート
こんにちは。先日入社しましたmiyakeと申します。新入りです。 今日はSmartyでRuby on Rails的なレイアウトテンプレート機能を実現するTipsをご紹介します。 まず、そもそもRailsのレイアウトテンプレートとはどんな物なのか、簡単に解説します。 Smartyに限らず、何らかのテンプレートエンジンでページを出力する場合、ヘッダやフッタといった共通部分を別ファイルに切り分けるというのはよくあるアプローチです。 この場合、そのページのテンプレートファイルに加えて、ヘッダとフッタのテンプレートを別途用意します。 これに対して、レイアウトテンプレートはそのページのテンプレートと「土台になるテンプレート（＝レイアウトテンプレート）」でページを出力します。 実際のHTMLに照らし合わせて図にすると、こんなイメージです。 レイアウトテンプレートのイメージ posted by (C)フォ
ウノウラボ Unoh Labs: ニンテンドーDSブラウザーにあわせてサイトを作るときの軽い覚書
こんにちは。matsudaです。 以前、こちらでも紹介させていただきました犬・猫写真でカワイイか投票する「Cute or Not」ですが、これはもともとNintendoDSで遊べるように作っていました。DSブラウザはいまさらな感が否めないですが、上画面に写真・下画面に投票ボタンにして、タッチパネルでポチポチできて、暇つぶしにはもってこいな気がしたからです。 簡単にデザインできるだろう…とはじめは思っていましたが、実はそうでもなく、ちょっと苦戦したところがあったので、メモ程度に残しておきます。 ※以下、DSブラウザー特有の“縦長モード”での場合です。 ■画面のデザインは1画面：縦176px×横247pxNintendoDS の液晶は1画面192px×256pxになっています。そのうち上画面は上16pxがURL表示、下画面は下16pxが機能表示に利用されています。横幅はスクロールバー用に9px
ウノウラボ Unoh Labs: Googleのサービスをケータイでも使い倒す
こんにちわ、hideです。 ゴールデンウィークの真っただ中、皆さんいかがお過ごしでしょうか？この時期、旅行に出かけたり、実家に帰省したりして、いつものインターネット接続環境が使えないことも多いかと思います。今日は、そんなあなたにGoogleのサービスを携帯電話で使う方法を紹介したいと思います。 ※一緒にQRコードも載せておきますので、バーコードリーダーで読み取ってご利用ください。 Google検索 携帯電話でもGoogleの検索エンジンが利用できます。このサービスの便利なところは、PC用のサイトを検索できるだけでなく、携帯電話での表示に適した形に変換してくれるところです。画像サイズの変換、長いページの分割、簡単なJavaScriptの描画などもしてくれるようです。 Google Mobile Proxy PC用のサイトを携帯電話での表示に適した形に変換してくれます。Google検索
ウノウラボ Unoh Labs: IE6 CSS 『border-leftとpadding-bottom』の謎
こんばんは、sashaです。 次のような形のスタイルを実装しようとしていて、 実例 posted by (C)フォト蔵 IE5.5や6でこんな状況に出会ったことはありませんか？ （赤と青のボーダーは、elementの境目がわかりやすいように入れてあります） 実例バグ posted by (C)フォト蔵 どこがおかしいかお分かりになりますでしょうか。2項目目の赤と青で囲まれたテキストが、左に飛び出ていますね。その下にあるテキストまで、左にずれてます。 これは、多くのデザイナーの悩みの種である、「IE」の代表的なバグのひとつです。 このバグを再現させるのに必要なことはたったこれだけ。 「divの中にdiv」など、ブロック要素を2重にする 外側のブロック要素に、border-leftとpadding-bottomを定義する 以上。これだけでIEさんの地雷を踏めます。 以下のH
ウノウラボ Unoh Labs: FlashでWiiリモコンのイベントを取得する方法まとめ
ここでは、任天堂Wii上で、Flashゲームなどを作るのに必須である、Wiiリモコンを操作する方法を紹介します。 ウノウで酒徳率急上昇の真相 こんにちは。酒徳峰章です。これまでの人生で「酒徳」という名字の人は、妻と家族親族だけだったのですが、なんと、先日より、ウノウ（株）に、酒徳千尋さんが入社されました。そこで、酒徳２号（もしくは、クジラ飛行机）と呼んで下さい。酒徳千尋（１号）さん、ともども、今後ともよろしくお願いします。(※私の方が先に入社しているのですが、酒徳１号をかけて勝負したところ負けてしまったので、私が２号となりました。) Wiiの可能性 先日より、Nintendo Wiiについて研究しております。Wiiを使うと、お茶の間のＴＶでインターネットができるようになります。これは、とてもすごいことで、Wiiが持つ今後の可能性にワクワクしています。 但し、お試し版のブラウザ上のFlash
ウノウラボ Unoh Labs: JavaScriptでクリップボードを使う(IE/Firefox)
こんにちは、さかとくです。師走で忙しいですね。今回は、JavaScriptでクリップボードを使うプログラムを作ってみます。IEとFirefoxで動く簡単なライブラリを作ってみましたので、参考にしてください。 IEだけで動かすのは、簡単なのですが、FireFoxではクリップボードを操作する方法がありません。そこで、FireFoxでも使えるようにFlashを使って工夫してみます。 まず、参考までにIEでクリップボードを扱うJavaScriptを見てみましょう。IEなら以下のように一行書くだけです。
ウノウラボ Unoh Labs: 人見知りな技術者のプレゼンの準備方法
Keita です。 先日、enNetForumという所で、Wikiについてお話させていただきました。 僕は、どちらかというと、引きこもりたい人間で、人前で話しをするのは苦手です。 しかも、今回は、Wikipedia創始者 Jimmy Donal Wales氏 の後で話すということで大変緊張しました。 しかし、当日は、わりとちゃんと準備したおかげか、それなりに、ちゃんとお話できたかと思います。 そういうわけで、僕のような人見知りが、どのようにして、プレゼンを準備したかを今回はお話させていただこうと思います。 ネタを蓄積する 今回、僕は、自分のサーバのWikiにテーマである、Wikiの社内共有のネタを大量に蓄積しました。 この作業はお昼休みや帰宅したとき思いついたときにちょこちょこ書き足していました。 内容は、まとまっていなくてもとりあえず書いていくのがいいようです。 とにかく思いついた
ウノウラボ Unoh Labs: ローカルPCへ大容量データを保存するJavaScriptライブラリ「save2local.js」
こんにちは。さかとくです。 JavaScriptでローカルPCにデータを保存するライブラリ「save2local.js」を作りましたので公開します。 通常、JavaScriptではセキュリティが考慮されているため、データをローカルPCに保存するには、Cookieを利用します。 しかし、Cookieを利用する場合は、それほどたくさんの情報を保存することができません。 そのため、ゲームのセーブデータや、フォームに記入したデータなどは、セッションの仕組みを利用してサーバーに保存するのが一般的でした。「save2local.js」ライブラリを使えば、サーバーを利用することなく、ローカルPCに任意のテキストを保存できます。 今回ローカルPCにデータを保存するために、Flashの機能を使います。Flashには、SharedObjectと言ってローカルPCにデータを保存する機能がついています。
ウノウラボ Unoh Labs: ユーザビリティって何だろう？（基本のまとめ）
こんばんわ、Sashaです。フォト蔵のUI改善への要望が高まっているのをうけて、最近、ユーザビリティについてみんなで考えています。 基本の基本が気になる私は、「ユーザビリティって何だろう」というところから考えるべく、『ユーザビリティのguru』と呼ばれるJakob Nielsenの「ユーザビリティ」の定義を復習しました。以下はそのまとめです。 ユーザビリティって何だろう？ ユーザビリティは、UIがどのくらい使いやすいものであるのかを示す質的属性です。「ユーザビリティ」という言葉は、モノをデザインする過程で「使いやすさ」を改善するための方法でもあります。 ユーザビリティは、次の5つの品質によって表すことができます。 「学習しやすさ」 初めてそのデザインに触れるユーザーが、どれだけ容易に基本的なタスクを発見し、遂行できるだろう？ 「効率のよさ」 ひとたびそのデザインを学習したユーザーが
ウノウラボ Unoh Labs: 【Web Design】なるほどリンク集 その１
こんばんわ、sashaです。 ラボブログの当番が回ってきて、ネタがなくて困っていたところに、私がCSSでデザインをする上で参考にしているサイトを書いてみたら、とみんなに言われました。なるほどねー！じゃ、そうしよう。 ただ、恐縮ですが、私は7月にウノウに入社するまで6年間海外にいたため、リソースも英語サイトばっかです。おっと。アレルギー反応を起こさないでください。興味がある分野で日々英語のサイトを見続けるのも、英語に親しむ手段の一つです。 逆に、国内のリソースに関しては浦島太郎状態なので、皆様からの「このサイトいいよ！」をお待ちしてます☆ さて、第一回目は、日々チェックしたいサイトたちです。今後、「チュートリアル系」、「ユーザビリティ系」など、気が向いたときにまとめたいと思います。 日々の読み物 - 最低限、目を通したいサイトたち A List Apartmezzoblue456bereas
ウノウラボ Unoh Labs: IE7 RC1をスタンドアローンで動作させる方法
naoyaです。 本日、ウノウ社内でIE7 RC1をスタンドアローンで動作させる方法を教えたところ評判がよかったので、IE7 RC1をスタンドアローンで動作させる方法を書いてみたいと思います。 この方法を使うと、既存のIE6を上書きすることなく、IE7を実行できるのでとても便利です。 IE7 Standaloneから IE7 Standaloneツール（IE7RC1.zip）をダウンロードします ダウンロードしたツールを解凍します IEホームページからIE7 RC1をダウンロードします ダウンロードしたIE7 RC1を、解凍した IE7 Standaloneツールと同じディレクトリにおきます IE7 Standalone Setup.batバッチファイルを実行します ie7rc1_standalone.regファイルをダブルクリックしてレジストリを結合します IE7.batバッチファイル
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
