ウノウラボ Unoh Labs: Flash Lite初学者の為のまとめ
おはようございます。内田です。 最近はmixiアプリモバイルやモバゲー上のゲームのようなソーシャルゲームが流行ってるようですね。 私もソーシャルゲーム＆Flash Lite案件を手がけることになったので、その時に参考にしたサイトを紹介します。 開発の前に覚えること 最初にFlash Liteの仕様とケータイ開発の障壁ともいえるキャリア間の差異を知る必要があります。 Flash Lite ことはじめ。 我らがryosuke氏のエントリー 仕様とキャリア毎の情報が分かりやすくまとまってます。 [Flash Lite 1.1]制作前に知っておきたいことをQ＆A形式でまとめてみた 上記エントリーと重複する部分も多いですが、Q＆Aの形で調べやすい。 「一般的なガイドラインが知りたい！」を厳守すれば3キャリアで動作するswfがつくれそうです。 コンテンツの作成 Flash Liteコンテンツのつく
ウノウラボ Unoh Labs: ゼロからはじめる携帯サイト構築。
こんにちは、日食を妙に楽しみにしていたわりには見ようともしなかった ryosuke です。曇りで残念でした。曇りでも日食と分かるぐらい暗くなったら嬉しかったのですが、東京ではそんな事は全然ありませんでしたね。 さてさて、そんな私ですが入社後半年が経過したところで、入社当初より携わって来た携帯サイト構築に関して得た知識(失敗談)をまとめてみようと思います。 初ラボブログ記事でも触れた様にそもそも本格的な携帯サイト構築は経験に乏しく、バッドノウハウの塊の様な面倒な思いこみが先行しがちだったわけですが(実際バッドノウハウの塊ですが)、端末の機能や表現力が豊かになるのと同時に開発環境的なツールやライブラリの充実、ノウハウの蓄積と情報公開により随分すんなり入って行けた様に思います。 結局はキャリア感の差異を知り吸収する事がすべて いきなりですが、PCサイトと携帯サイトの違いで最も厄介な所はこれにつき
ウノウラボ 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: デザイナの立場からの「デザイン依頼のコツ」
こんにちは。yamazakiです。 このブログをご覧になっているのはエンジニアの方が多いと思いますので、デザイナの方とのやりとりをされている方も結構いらっしゃるはず。 社内で「どういうふうに依頼されるのがデザイナとしてはいいもの出てきやすい？」というお話を振られたので今回はそれについて書いてみようと思います。 ※もちろんあくまでこれは私個人が思うところであり、全てのデザイナにあてはまるわけではないと思います。 ので、できればこれをご覧になったデザイナーの皆様も、「こういうふうに依頼してくれると力が発揮できる」というポイントなど書いていただけたら非常に嬉しいです。 また逆に、デザイナにはこういう点気をつけて欲しい、といった、エンジニア視点でのデザイナへのリクエストなどもいただけると嬉しいです。 ---- ビジョン、ゴールを共有するこれは複数の人間が関わるプロジェクトなら当たり前といえば
ウノウラボ Unoh Labs: 携帯サイトとクローラ
harukiです。 ケータイユーザも検索エンジンから来るユーザも増えています。 そのため、携帯サイトも検索エンジンのクローラへ対応する必要があります。 ・Mobile Link Discoveryの記述を追加する PC用のページのheadタグ内に <link rel="alternate" media="handheld" href="(ケータイURL)" /> の記述を追加するだけです。 Mobile Link Discoveryに対応しているサイトでは、ケータイからのアクセス時に直接アクセスしてもらえるようになります。 Mobile Link Discovery 仕様 http://www.sixapart.jp/docs/tech/mobile_link_discovery_ja.html 検索エンジンでは、Googleモバイルのgoogle mobile proxy http
ウノウラボ Unoh Labs: グラフィック作りのコツとカン
こんにちは。yamazakiです。 前回はレイアウトなどについて非常にざっくりとですが書いてみたわけですが、いかがでしたでしょうか。 そろそろ「グラフィック」のほうも少し書いてみようかという気になってきたので、グラフィック品質を高めるベーシックな技術についても少しずつ書いていってみようと思います。 基本のき 具体的な話に入る前に、まずは基本的な話から。 とりあえず、ざっとあなたの周囲を見回してみてください。壁にしても、PCにしても、「単なる一色のベタ塗り」にはなっていないのではないかと思います。光の加減などで、「影」や「グラデーション」がついていると思います。また、ものの表面には「つるつる」「ざらざら」といった「質感」があるのが当たり前、という中で私たちは生活しています。 そのため、人の目はそういう「グラデーション」や「影」、「質感」がある状況を「見慣れて」います。 グラフィック上
ウノウラボ Unoh Labs: プログラミングに使いやすいフォントを選ぶ
yukiです。 人によってまちまちですが、見易さや生産性にかなり影響する(と思っている)プログラミング時のフォントについて紹介します。 マカーの方はデフォルトで十分読みやすいフォントが入っているので、ここではwindows向けとして紹介させて頂きます。 個人的に選ぶポイントは、 ゼロ・オーは斜線で区別がつく 日本語も使える 長時間見ても疲れない(一番大事) です。これいいよ！というのがあったら絶賛募集中です。 有名どころかもしれませんが M+フォント M+フォント posted by (C)フォト蔵 普段はコレを使わせていただいています。 自分的にはゼロ(0)とオー(O)の差が分かりやすく◎です。 ゼロの中にスラッシュやドットが入っていて読みやすく、等幅なので使いやすいです。 VLゴシックフォントファミリ 上記のM+を元に製作されたフォントです。 弊社CTOが過去に参加
ウノウラボ Unoh Labs: WEBアプリテストのチェック項目リスト
こんにちは！やまもと＠テスト番長です。 TestingGeekという耳障りの良い名前のサイトをご存知でしょうか？ 総合的にテストの話を取り扱っており、それでいて読みやすいサイトです。 そこのTemplatesのコーナーにWeb Application Testing Checklist という便利そうなものがありましたので、日本語にしてみました。 ちょっとそのままだと物足りない感がありますが、テストポリシー作成の叩き台に使ってみるのも良さそうですね。 この手のリストを他にもご存知の方がいらっしゃれば、是非ご一報ください。 1. 機能テスト 1.1 リンク 1.1.1 記載された通りの先に遷移するか 1.1.2 どこからもリンクされないページは存在しないか 1.1.3 全ての外部リンク 1.1.4 参照しているサイトおよびメールアドレスはハイパーリンクになっているか？ 1.1
ウノウラボ 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: 水平方向のナビゲーションの作り方
yamaokaです。 水平方向に並んだナビゲーションを作る場合、 皆さんはどのようにマークアップされているでしょうか。 とりあえず必要な項目を羅列してみましょう。 それぞれの項目には矢印の画像を付加するものとします。 == HTML == <p id="navigation"> <img src="arrow.gif">編集 <img src="arrow.gif">削除 <img src="arrow.gif">追加 </p> horizontal_nav_1 posted by (C)フォト蔵 一見よさそうです。 ただ、HTMLの論理的な構造としてふさわしいものでしょうか。 ナビゲーションと言えども論理構造としてはリストの一種なので、リストとしてマークアップするのが適当と言えます。 リストにしてみましょう。 == HTML == <ul id="navigation"> <li>編集<
ウノウラボ Unoh Labs: 「名刺作り」で学ぶレイアウト（＋α）基礎講座
こんにちは。yamazakiです。 4月に入社してはや3ヶ月目。同じように4月に入った方などは、仕事にも少しずつ慣れてきて、そろそろ少しずつ外に目を向ける余裕も出てくる頃でしょうか。 たとえば社外のイベントや勉強会などに参加する、となれば必携の「名刺」。 会社から支給される場合がほどんどだとは思いますが、中には自分でオリジナルの名刺を作って配る、なんていう人もいるかもしれませんね。 今回は「名刺のデザイン」をネタに、「レイアウト」の基本的なあれこれを解説してみたいと思います。 名刺といえば大抵の場合、以下のような内容を載せますね。 名前 肩書き メールアドレス 携帯電話番号 会社の電話番号、Fax番号 会社名 会社の住所 これ以外にも会社によって色々あるかと思いますが、ひとまず今回はこれだけの要素で作ってみることにします。 また、使うフォントは、（MS ゴシックは印刷向けには
ウノウラボ Unoh Labs: ニンテンドーDSブラウザーにあわせてサイトを作るときの軽い覚書
こんにちは。matsudaです。 以前、こちらでも紹介させていただきました犬・猫写真でカワイイか投票する「Cute or Not」ですが、これはもともとNintendoDSで遊べるように作っていました。DSブラウザはいまさらな感が否めないですが、上画面に写真・下画面に投票ボタンにして、タッチパネルでポチポチできて、暇つぶしにはもってこいな気がしたからです。 簡単にデザインできるだろう…とはじめは思っていましたが、実はそうでもなく、ちょっと苦戦したところがあったので、メモ程度に残しておきます。 ※以下、DSブラウザー特有の“縦長モード”での場合です。 ■画面のデザインは1画面：縦176px×横247pxNintendoDS の液晶は1画面192px×256pxになっています。そのうち上画面は上16pxがURL表示、下画面は下16pxが機能表示に利用されています。横幅はスクロールバー用に9px
ウノウラボ Unoh Labs: 簡単Ajaxライブラリ「jQuery」と便利なプラグインたち
こんにちわ、hideです。 最近は、jQueryというJavaScriptライブラリを使ってAjax関連の処理を書くことが多いです。なんといっても軽量で高速、XPathによる要素の指定がとても便利です。今回は、その便利なjQueryをもっと便利にするプラグインをいくつか紹介します。 ThickBox LightBoxのようなもので、画像の他にHTMLの表示も可能です。難点は、$()を使って書かれているので、他のライブラリと混ぜて使えないこと。僕はソース内の$()をすべてjQuery()に書き換えて使っています。 JSON for jQuery AjaxでJSONを取得して、処理できるようにするプラグイン。これは必須とも言っていいと思います。CallBack関数を指定してのJSONPも簡単。 BlockUI Plugin 画面の一部や全体を半透明のレイヤーで覆って操作できなくするものです
ウノウラボ Unoh Labs
gotandajinです。 なにかGUIアプリケーションを作ろうとした時、一番手軽に手を出せる開発環境はVisual Studioあたりかなぁと思われますが、Visual Studio は基本的にWindows専用です。Javaを使えばプラットフォーム間の差異を吸収して、同一ソースでWindows、Mac、Linux などの複数のOSで動くGUIアプリを作れますが、他の選択肢としては、開発言語をCやC++で、マルチプラットフォームなGUIフレームワークを利用しての開発、なんかが挙げられます。マルチプラットフォームなGUIフレームワークを使えば、Javaと同様に同一ソースで複数のプラットフォーム用のGUIプログラムが作成できます。こちらはJavaとは違い、オブジェクトコードとして生成できるのが特徴です。 代表的なマルチプラットフォームGUIフレームワークにはQT(キュート)やwxWidget
ウノウラボ Unoh Labs: 失敗から学んだ効率のよい会議術
こんにちはmatsudaと申します。 ２月に中途でウノウへ入社した新人です。 まだウノウでの体験は少ないので、これまで勤めてきた企業でやっていた会議で、自らの失敗談から学んだ会議を円滑にすすめるための会議術をご紹介します。 頭の片隅にちょっとでも残していただけるのであれば、とてもうれしいですね。 ■時間通りに会議をはじめる当たり前のようでなかなかできないのが時間通りに集まり、会議をはじめることです。ダラダラはじまる会議ほど、ダラダラと会議をする傾向にありました。 ■必ずアジェンダを用意する会議には必ずアジェンダを用意してください。アジェンダのない会議ほどあさっての方向に話題がそれることはありません。簡単なものでいいです。必ずアジェンダを用意するクセをつけてください。 ■冒頭に会議の目的を共有する何のために集まった会議なのか？お互い確認してください。「いや、会議しろと言われたから集まっ
ウノウラボ 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: すべてのWebデベロッパーに必須なFirefox拡張20(+1)選
naoyaです。 CyberKonowledgeに20 FireFox Extensions That Every Web Designer Should Know Aboutという記事がありました。ちょうど、タイムリーな記事だったので、さっそくすべてのFirefox拡張を試してみましたので紹介します。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウノウラボ Unoh Labs: 3G携帯のみに限定したサイトを作る場合