タグ

ブックマーク / labs.unoh.net (12)

  • ウノウラボ Unoh Labs: CSSで見る、IE7。

    Sashaです。 MicrosoftがIE7 RC1(Internet Explorer 7 Release Candidate 1)を公開しましたね。タブ・ブラウジング? RSS? 今ドキ当たり前。タブに出ているサイトのサムネイルが一括して見れるとか、印刷するときに用紙の大きさに合わせて印刷してくれるぴったり機能とかも、「あったらいいな」的機能であったことは確かですが、ウェブデザイナーたちの興味の中心は、今まで私たちの忍耐力をギリギリまで試してきた、IEの CSSへのサポートが、どのように変化するのか、ですよね。せっかくなので、今まで長年にわたって多くの人を悩ませてきたバグたちと照らし合わせながら見ていきましょう。ちなみに、私はまだ一つ一つ検証してませんので、その解決宣言に関する信憑性には責任は負いかねます。悪しからず。 positioniseverything.net では数年前から

    sciao
    sciao 2007/08/18
  • ウノウラボ Unoh Labs: ブログパーツ貼り付けタグのまとめ+Googleガジェット@はてな

    ごらんの通りこれらのタグは、一部例外を除き少なくとも上表にあるブログサービスでは、すべてOKかすべてNGかのどちらかで、つまりこれらのひとつがNGなら他のタグもNGであるようなので、どのタグを選択するか、ブログサービス側の制限を考慮して悩む必要はないようです。 そうするとFlashオブジェクトの表示は、「Internet ExplorerでのActiveXコントロールのアクティブ化問題」を考慮するなら、OBJECTタグを直接記述するのは避けて、JavaScriptで行ったほうがよいのかなと。 全般的な留意点 貼り付けコードはブログの投稿設定などに影響されないように配慮しておく必要があります。特に、サイドバーだけではなく記事文中にも貼り付けられることを想定している場合は、以下の設定は、殆どのブログサービスで記事文の投稿についてはデフォルトでONの筈なので、こうした設定に影響を受けないもの

  • ウノウラボ Unoh Labs: JavaScriptを使わないスターレイティングの作り方

    こんにちわ、山下です。 Amazonなどで使われているような商品を☆の数で評価するスターレイティングというものがあります。今回は、CSS The Star Matrix Pre-loadedに紹介されている記事を参考に、その作り方を簡単に紹介しようと思います。 1.画像を用意する まず次のような1枚の画像を用意します。16×16ピクセルの☆が、横に5個、縦に11個並んでいて、下に向かうに従って色の付いている☆の数が増えているのがポイントです。 2.HTMLを書く HTMLはとてもシンプルで、ULリストを使います。 <ul class="rating onestar"> <li class="one"><a href="#" title="1 Star">1</a></li> <li class="two"><a href="#" title="2 Stars">2</a></li> <l

  • ウノウラボ Unoh Labs: 携帯サイト作成のためにも使えるPHPのライブラリ

    harukiです。 携帯サイト作成の際に使えるPHPのライブラリを知っているだけ羅列してみます。 Net_UserAgent_Mobile 基となるライブラリです。機種判定など、様々な用途に使用します。 細かい情報については、スクレイピングなどをしたりして自前で用意する必要があります。 PEAR::Mail メールの送信に使用できます。 特殊な送信の際は、Mail::factory()にsmtpで使用することになりますが、キャリアの迷惑メールの設定にも気をつける必要があります。 Mail_mime_Decomail (Y-110's Wiki) Mail_mimeと同じ使い方で、デコメール送信用にMIMEを組み立てることができるのでとても便利です。 Mail_mimeDecode 空メール・エラーメールなどを受け取って解析する際に使用します。 解析の際には、Mail_RFC822:

  • ウノウラボ Unoh Labs: buttonタグでサブミットするあれこれ

    CSSでいつも悩まされるのはクロスブラウザですけど、フォームでは特に面倒くさい要素が山盛りですよね。ボタンの文言を動的に変えたいから画像はなるべく使いたくないけど、だからといってブラウザのデフォルトのボタンとか、味気ないですものね。 今日は、フォームにつきもののボタンについて考えてみます。 私たちがボタンに求めるモノって、何でしょう。 データを送信(submit)する どのブラウザでも同じように見える 使い回しが聞く ボタンについている文言がどんなに長くなっても、水平方向の長さがフレキシブル 上記のようにサイズ的にフレキシブルであっても、見た目の美しさを阻害しない ボタンの大きさ=クリックできるエリアの大きさ 画像がdiableされていても使用可 CSSがdisableされていても使用可 ボタンのように見えて実はただのリンクの時のもある これらの要求を解決してくれる方法が複数出

  • ウノウラボ Unoh Labs: SoftBank絵文字の対処法

    こんにちは。harukです。 今回はSoftBankの絵文字の対処法の基礎的な部分についてです。 絵文字コードは以下のようになっています。 0x1B 0x24($) 【 ? 】 【 X 】… 0x0F 【 ? 】 = G / E / F / O / P / Q 【 X 】 = 0x21~0x7E 【 X 】の部分には、[ < ]や[ ' ]や[ \ ]などが含まれているので多少やっかいです。 入力された絵文字を含む文字列を表示する際などには HTMLエンコード(実体参照化)してあげなければいけませんが、 絵文字の中もエンコードされてしまいます。 (例) こんにちは(0x1B)(0x24)G>(0x0F) ↓ こんにちは(0x1B)(0x24)G>(0x0F) となってしまい、4文字の別の絵文字になってしまいます。 対応するにはPHPでは以下のように行います。 function SB_ht

  • ウノウラボ Unoh Labs: 絵文字の相互変換リスト

    こんばんは。harukです。 2週間前からビデオポップ担当になり、まず最初に、3キャリアの絵文字の変換から取り組みました。 検索して探してみたものの、いいものが見つからなかったのですが、幸いにも、3キャリアそれぞれメールでは絵文字の自動変換があるので、それを利用して作ることができます。(昔は手入力で一つ一つやってました) Tab区切りのテキストファイル(TSV)を置いておきましたので使いたい方は使ってください。 絵文字の番号の付け方はそれぞれ以下のようになっています。 DoCoMo(i-mode) 基絵文字:%i(1~176)% 拡張絵文字:%i(1001~1076)% au(EZweb) 絵文字番号=%e(1~822)% SoftBank PAGE1(G):%s( 1~ 90)% PAGE1(E):%s(101~190)% PAGE1(F):%s(201~290)% P

  • ウノウラボ 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: 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

    sciao
    sciao 2007/05/31
  • ウノウラボ Unoh Labs: PHPの画像処理の紹介と簡単な比較

    Keita です。 僕は、フォト蔵チームではないので、フォト蔵の画像処理については見ていませんが、個人的に画像処理に興味があるためPHPにおいての画像処理を簡単に調べたことがあります。 その時の結果をお話させていただきたいとおもいます。 この他に、もし、こういう選択肢があるよというのがあれば、教えていただけると大変うれしいです。 主要なライブラリの一覧 GDで処理 LibGDを操作するPHP標準のライブラリです。 ほぼ、レンタルサーバなどで利用できる反面、対応形式が、JPEG,GIF,PNG,WBMP,GD{,2}にしか対応していないなどのいくつか機能的に制限があります。 (WBMPは、Wireless Bitmapという、WindowsBitmapとは別の形式です) imagick ImageMagick/GraphicsMagickという画像編集ソフトのPECLの拡張で

  • ウノウラボ Unoh Labs: JavascriptライブラリをJSANへアップする手順

    komagataです。 最近、色々なソースを読んでJavascriptの勉強をしているんですが、その中で比較的ソースが短く、シンプルなものが多いのでJSANのライブラリを参考にさせてもらっています。出来てから1年以上経ってるのにイマイチ使われていないような気がしますが、勉強ついでに以前作ったpprompt.jsというライブラリをJSAN用に変更してアップしてみました。 jsan logo posted from フォト蔵 そもそもJSANとはJavaScript Archive Networkの略で、要はTeXのCTAN、PerlのCPAN、PHPのPEARみたいなライブラリをアップしたりできるところだそうです。(アップに際して厳密な投票プロセスなどは無いのでPEARとは少し違うかもしれません) JSANライブラリの使い方は長くなるので下記等を参照していただいて、早速アップするモジュール作

  • ウノウラボ Unoh Labs: 最強のIDEを追い求める Eclipse + Aptana + TruStudio (+RadRails)

    こんにちは、ジュンヤです。 30歳を超えたあたりで急速に脳が老化し始め、物事をすぐ忘れるようになってしまいました。歌手やタレントの名前なんかはなかなか出てきません。若いウノウの他のつわものプログラマーはviやEmacsでコードを書いていたりしますが、僕の場合は、補完機能が優れたIDEでないともうだめです。 というわけで、補完機能が充実した最強の IDE を追い求めてみました。環境は Windows XP です。 Eclipse 最近 Aptana という Web エディタが良いと聞いたので、まずはこれから用意します。Aptana は Eclipse をベースに開発されていて、スタンドアロン版と Eclipse のプラグイン版があるのですが、他にも使いたい IDE があるので、Eclipse をまずインストールした上で、プラグインで拡張していくことにします。 Eclipse はeclipse

  • 1