ども。6月入社のjhoshinaです。 まだ入社したてのつもりだったのに、ラボブログ執筆がまわってきてあたふたしています。 何を書こうか迷ったのですが、環境も新しくなったことですし、設定しなおしたVimの設定・プラグインなどをちょこっと見ていこうかと思います。phpとsymfony関係を中心に見ていきます。 雑多な設定 特に変わったところもないのですが一応。 ~/.vimrc set nocompatible set showmatch showmode showcmd set laststatus=2 set statusline=%<%f\ %m%r%h%w%{'['.(&fenc!=''?&fenc:&enc).']['.&ff.']'}%=%l,%c%V%8P syntax on filetype on filetype indent on filetype plugin on ~

おはようございます。内田です。 最近はmixiアプリモバイルやモバゲー上のゲームのようなソーシャルゲームが流行ってるようですね。 私もソーシャルゲーム＆Flash Lite案件を手がけることになったので、その時に参考にしたサイトを紹介します。 開発の前に覚えること 最初にFlash Liteの仕様とケータイ開発の障壁ともいえるキャリア間の差異を知る必要があります。 Flash Lite ことはじめ。 我らがryosuke氏のエントリー 仕様とキャリア毎の情報が分かりやすくまとまってます。 [Flash Lite 1.1]制作前に知っておきたいことをQ＆A形式でまとめてみた 上記エントリーと重複する部分も多いですが、Q＆Aの形で調べやすい。 「一般的なガイドラインが知りたい！」を厳守すれば3キャリアで動作するswfがつくれそうです。 コンテンツの作成 Flash Liteコンテンツのつく

yamaokaです。 HTMLのフォームでチェックボックスやラジオボタンを扱う場合、 対応したlabel要素を用意することが多いと思います。 <input type="checkbox" id="foo" name="foo"> <label for="foo"> キャプション </label> わざわざ小さなチェックボックスやラジオボタンを狙ってクリックする必要がなくなり、 labelタグで囲まれたキャプションの部分をクリックすればよいようになります。 しかし、次のような場合どうでしょう。 <input type="checkbox" id="foo" name="foo"> <label for="foo"> <img src="bar.gif"> キャプション </label> label要素の中にimg要素（画像）が含まれているような場合を考えてみます。 もっと具体的にいうと、ユー

こんにちは！　のりPと同い年ですが、クラブ通いは●年前に卒業しました　やまもと＠テスト番長です。 早いもので、もうお盆の帰省シーズンですね。 今年の夏は世間の騒がしい日々が続いておりますが、みなさんお変わりございませんでしょうか。 さて、Firefoxといえば豊富なアドオンですが、今回はテスター目線で WEBアプリケーションのテストに便利なFirefoxアドオンを並べてみたいと思います。 Firesizer ブラウザの画面サイズを整えることが出来ます。 InFormEnter 準備しておいた値を入力フォームにセットしてくれます。 MeasureIt 画面上のピクセルサイズを測ることが出来ます。 Regular Expressions Tester 正規表現での検索がその場で出来ます。 FireShot キャプチャにメモを書き込んだり出来ます。 Web Developer F

こんにちは、日食を妙に楽しみにしていたわりには見ようともしなかった ryosuke です。曇りで残念でした。曇りでも日食と分かるぐらい暗くなったら嬉しかったのですが、東京ではそんな事は全然ありませんでしたね。 さてさて、そんな私ですが入社後半年が経過したところで、入社当初より携わって来た携帯サイト構築に関して得た知識(失敗談)をまとめてみようと思います。 初ラボブログ記事でも触れた様にそもそも本格的な携帯サイト構築は経験に乏しく、バッドノウハウの塊の様な面倒な思いこみが先行しがちだったわけですが(実際バッドノウハウの塊ですが)、端末の機能や表現力が豊かになるのと同時に開発環境的なツールやライブラリの充実、ノウハウの蓄積と情報公開により随分すんなり入って行けた様に思います。 結局はキャリア感の差異を知り吸収する事がすべて いきなりですが、PCサイトと携帯サイトの違いで最も厄介な所はこれにつき

酒徳(クジラ飛行机)です。以前、ラボブログにJavaScriptでクリップボードを使う(IE/Firefox) という記事を書きました。これは、Flash Player の機能を利用して、JavaScript でクリップボードを操作するというものでした。 ところが、Flash Player 10 になって、セキュリティ制約が強化されたため、この方法でテキストをコピーすることができなくなってしまいました。そこで、このセキュリティ制約を回避してクリップボードを扱う方法と、簡単に「コピー」ができるライブラリを公開します。 まず、Flash Player 10 のセキュリティ制約について紹介します。具体的に言うと、クリップボードにテキストをコピーするメソッド「System.setClipboard()」の使用が制限されるようになってしまいました。以前はこのメソッドを任意のタイミングで呼び出すことが

yamaokaです。 Webサイトを運営していると、同じページに複数の箇所からリンクが貼られている場合に、特定のリンクからのアクセスがどれぐらいあるかを調べたいことがあります。 もちろん、異なるURLで訪問者にアクセスしてもらえばトラッキングできるので、適当なクエリーストリングをリンクのURLに付加すれば調べることができるようになります。 <a href="/foo?bar">baz</a> ただし、その場合permalink（固定されたURL）ではなくなってしまいますね。 写真でつながる共有サイト「フォト蔵」では、アクセス解析にGoogle Analyticsを利用しています。Google Analyticsを利用している場合、次のようにして特定のリンクからのアクセスを違う名前で扱うことができるようになります。 <a href="/foo" onclick="pageTracker._t

yamaokaです。 Ajaxの普及に伴い、JavaScriptで扱いやすいJSON形式で サーバーからのレスポンスを返すことが増えてきているように思います。 PHPでJSONを扱う方法についていくつか紹介します。 JSON関数 もともとPECLの拡張モジュールとして提供されていましたが、 PHP 5.2.0以降、デフォルトでPHPに組み込まれるようになっています。 そのため、最も利用しやすい形式なのではないかと思います。 利用方法は以下のとおりです。json_decodeの戻り値はオブジェクトになります（第2引数にtrueを指定すると連想配列になります）。 $values = array('company' => 'ウノウ', 'name' => 'yamaoka'); $json = json_encode($values); // string '{"company":"\u30a6

こんにちは、山下です。 今回は、jQueryのパフォーマンス最適化について説明したいと思います。 軽量と言われているjQueryですが、いろいろな機能を実現しようとして複数のプラグインを導入すると、だんだんと動作が重くなってきます。サーバ側をいくらチューニングしたところで、ブラウザ側での処理に時間がかかっていたら、せっかく訪問してくれたユーザに重いサイトとして認識されてしまいます。以下に、ウノウで運営している「映画生活」で実際に行っている方法を紹介します。 1. Packed版ではなくMinified版を使う jQuery1.1まではPacked版のみだったのですが、jQuery1.2からMinified版もダウンロードできるようになりました。Packed版よりもMinified版を使うことをお勧めします。どう違うのかというと、Packed版はファイルサイズを極限まで削減するために静的辞

こんにちはsatoです。Windows以外の環境で仕様書を書こうと思うと、なかなか良いアプリがなかったりまします。今回はブラウザから使用できる仕様書作成ツールをまとめてみました。 1) オンラインで配置図などを描く Gliffy 配置図などをオンラインで描くことができます。また 画像への出力なども対応しています。いわゆるVisioの代わりになるツールです。 2) pdfファイルをtextに変換する PDFTextOnline pdfをtextに変換することができます。pdfの内容をスクリプトなどで切り出して、データ化するときなどに役に立ちます。他にもいろいろな変換するサイトやツールがあるのですが、ここは日本語が正常に通って見た目通りに変換できます。 3) データベースのテーブル定義などを書く WWW SQL Designer オンラインでER図などが書けます。以前miyakeさんが紹介して

Extは、ウェブアプリケーションを構築するための、クライアントサイドのJavaScriptフレームワーク（公式サイトのFAQより）です。日本ではまだ実際の利用例はあまり多くないようですが、たぶんに日本語のドキュメントがまだそれほど多くはないからではないかと思われ、今後利用事例は増えていくだろうと思われます。 Extの真骨頂は高機能でデザインの洗練された、（直ちに利用可能な）レディメイドのユーザインタフェースウィジェット群です。Extは「アダプタ」として、prototype.jsやjQuery、Yahoo! UIといったJavaScript拡張ライブラリを利用する設計ですが、現在は独自のアダプタも用意され、サードパーティのライブラリに依存しない実装も可能です。 現時点での安定版はバージョン1.1ですが、既に、大幅な機能強化が図られたバージョン2.0のアルファ版が公開されており、以下のページで

yamaokaです。 CSSに携わっている方なら、Holly hackを使ったことがあるかもしれません。 /* Hides from IE5-Mac \*/ * html .foo { height: 1%; } /* */ Internet Explorer（以下IE）で、レイアウトに問題のある要素に 上記のようなスタイルを指定をすると、 あら不思議、まともな表示がなされるというものです （上記のままではIE7に対応していませんが…）。 さて、どうしてレイアウトが意図したとおりに行われるようになるのでしょうか。 IEのhasLayoutプロパティ IEでは、全ての要素が 「hasLayout」という読み取り専用のプロパティを持っています。 これはそれぞれの要素がレイアウト情報（＝要素の幅・高さなどに関する属性情報）を 保持しているかどうかを示す値で、 デフォルトの状態では「hasLayo

こんにちわ、山下です。 Software Design 10月号にサーバ監視ツールCactiについての記事を書きました。この号のNagios,Swatch,Wiiの記事もウノウ・エンジニアによるものですので、ぜひ興味のある方はご覧ください。 さて、今日はWebブラウジングを快適にするAutoPagerizeというツールを紹介します。AutoPagerizeはGreasemonkey用の拡張スクリプトで、今、自分のまわりで爆発的に流行っています。先日の出張 Shibuya.js 24でも作者の方が発表されていたのでご存じの方も多いのではないでしょうか。 念のために何をするツールかを説明しておくと、Googleなどの検索結果で次のページを表示するときに「次へ」ボタンを押さなくてもページ下部までスクロールすると、勝手に次のページを読み込んでその下に付け足してくれるものです。なかなか文章では伝わ

yamazakiです。毎度毎度技術系なこのウノウラボには馴染まない話題を振りまいているわけですが、さてはてどの程度お役に立てているものか…。 今回のテーマは「視線」です。例えばWebサイトは「見てもらう」ことが大事ですし、また、UI設計の場面などでも、「視線をうまく導いてやる」のは使い勝手をよくする上でも大切なことだと思います。といったわけで、ユーザの視線をうまく捕まえてみたり導いてみたりする上で役に立つかもしれない情報を簡単にまとめてみます。 １．視線をつかまえる Web上にも街にも広告だの何だのと情報が氾濫しています。その中で「見てもらう」ためには何かしらの工夫が必要になることがあります。というわけでまずは「人の視線をつかまえる」ための方法論を少し。 「人の顔」を使う まずはこの画像を見てみてください。 01 posted by (C)フォト蔵 最初に、どれを「見てしまいました」か？

matsuda です。こんにちは 最近Googleマップで独自の地図を表示したりするのがちょっとしたブームだったりしたので、 よーし僕も挑戦するぞーと思ったのですが、Googleマップって1枚の画像で 簡単に出来るものじゃなかったんだと挫折(ズームごとに256×256pxに分割された画像が必要のよう…)。 しかし、この問題を解決してくれるツールがあったので紹介します。 1枚の写真とズームレベルを決めればあっという間にGoogleマップに画像が表示 されて拡大縮小できる優れものです。 ↓↓↓ The Google Maps Image Cutterよりダウンロードが可能 使い方はいたって簡単 1)メニューの左にあるFileから、地図にしたい写真を選ぶ gimc001 posted by (C)フォト蔵 2)最大のズームレベルを設定する ズームレベルが大きいほど、出来あがるタイルの

Firefoxは内部的に変換処理を行うようになっているようです。 問題はSafariとOperaですね。 選択されたファイルのパスからJavaScriptで ファイル名を抜き出してタイトルに設定する部分で、 正しく扱えるような文字コードに変換することにしたいと思います。 基本的な流れとしては、UTF-8-MAC特有の「U+3099」（COMBINING KATAKANA-HIRAGANA VOICED SOUND MARK）、 「U+309A」（COMBINING KATAKANA-HIRAGANA SEMI-VOICED SOUND MARK）がファイル名に含まれている場合は、 その前の文字と結合して濁音・半濁音の文字にしてあげればいいでしょう （ひらがな・カタカナのみの暫定的な対処に過ぎませんが）。 変換用の文字テーブルを用意して、逐一変換していくかたちにしたいと思います。 というわけ

こんばんわ、sashaです。今日は精神論的な話です。 みなさんは「やる気」とか、「意欲」とか、どうやって維持していますか？特に最近やる気がないとか言うわけではぜんぜんないのですけど、日々の雑務に追われていると、モーチベーションが下がったときにクリエイティブに対処出来なくなりがちだよね、といことは自分にも他人にもごくたまにあるように思います。 最近、A List Apartで紹介された記事を読んで、こういうこと、自分でもいつも覚えておきたいし、自分の周りにいる多くの人にとっても役に立てばいいなー、と思ったので、ちょっと自分なりの言葉に置き換えながら翻訳してみました。 すべて知っているかのような偉そうな口調をしていますが、私自身に対する戒めと教えとして書いてますので、お許しください。また、原文では「be motivated to create （作り出すために意欲的であること）」といった

こんにちわ。山下です。 最近、私の周りでは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

尾藤正人(a.k.a BTO)です 昨日ラボプロジェクトとして実験的に開発している新規プロジェクト「プラッシュ」をβ公開しました。 簡単に説明するとプラッシュはFlashとXMLSocketを使う事でブラウザだけでネットワーク対戦ができるゲームポータルサイトです。 今回はプラッシュで使われているFlashとXMLSocketを使ったアプローチについて考察してみたいと思います。 はじめに 正直に告白すると僕はFlashを一行も書いた事がありません。(汗) なので、Flashの部分に関してはFlash側の開発者であるyossyに聞いたり、Webで調べた情報がほとんどです。 不正確な情報が含まれてる可能性がありますが、その辺を考慮していただければと思います。 FlashのXMLSocketで何ができるのか FlashのXMLSocketを使うと直接ソケット通信を行う事ができます。 AjaxやCo

miyakeです。Webアプリケーションにおけるユーザーインタフェースの代表格と言えばフォーム。今日はそんなフォームのUIを作るに当たって、普段自分が心掛けていることをつらつらとご紹介します。 ■チェックボックスやラジオボタンはfieldset,label要素でくくる チェックボックスやラジオボタンには一般的にその内容を表すテキスト（ラベル）が付けられますが、input要素だけでマークアップした場合、チェックボックス（ラジオボタン）の部分しかクリックすることができません。 label要素を用いることで、ラベルの部分をクリックしてフォームを操作することが可能になります。これは是非設定しておきましょう。 ラベルをクリックできると思って期待を裏切られると、かなりのストレスになりかねません。 また、そのチェックボックスやラジオボタンのグループをfieldset要素で囲んでおくことをお勧めします。マ