ナビゲーションのマークアップとCSSデザイン
はじめに 本連載では、「クロスブラウザに対応したデザインテクニック」をテーマに、保守性や互換性に優れたXHTML+CSSの書き方を紹介していきます。 これまでの記事では、クロスブラウザなCSSデザインをするうえで知っておきたいポイントとして、「ブラウザの表示モード」や「CSSハック」、「デフォルトスタイルの初期化」など、ブラウザの実装差異に関する基本的な事項を紹介してきました。今回から次回にかけて、より実践的なテクニックとして、「ナビゲーション」を例にクロスブラウザな表示を意識したスタイリング方法を紹介していきたいと思います。 ナビゲーションのマークアップに使われる代表的な要素には、a要素とリスト関連の要素（ul要素、ol要素）がありますが、今回は、これら要素のプレゼンテーションをコントロールする代表的なCSSプロパティを押さえておきましょう。 対象読者 XHTMLとCSSの基本を理解して
【RubyKaigi'08】詳細レポート : 多様化するRuby：CodeZine
日本Ruby会議2008 初日（注1）は、日本Rubyの会／東京大学のささだこういち氏による、『現在の、そしてこれからのRubyVM開発』で幕を開けた。 この記事では、日本Ruby会議2008から次の5つのセッションを中心に、日本Ruby会議2008で示された現在のRuby、将来のRubyについてまとめてみたい。『現在の、そしてこれらからのRubyVM開発』（ささだこういち）『JRuby：Ready for Action』（Charles Nutter）『The Magic of Rubinius』（Evan Phoenix）『Ruby《を》教えてるんじゃない、Ruby《で》教えてるんだってば』（増原英彦）『Rails症候群の研究』（前田修吾） なお、本記事は必ずしもセッションの内容をそのまま書いているわけではない点をお断りしておく。 本記事では、セッションの限られた時間では語りつくせな
「Webページの表示速度を向上させる最新研究結果」 米Yahoo!がプレゼン資料公開：CodeZine
米Yahoo!は、開発者向けWebサイト「Yahoo! Developer Network」内のブログで、Webページのパフォーマンスを向上させる最新研究結果について解説したプレゼン資料を公開した。 これは先週開催されたPHP Quebec Conferenceのセッションにおいて、同社のStoyan Stefanov氏が使用した資料を公開したもの。Yahoo!が研究を続けている「より速くWebページを表示させるテクニック」として、既存の14種類に加え、新しく20種類のルールが明かされている。 改善対象はサーバ、コンテンツ、クッキー、JavaScript、CSS、画像、モバイルとなっており、同社が提供するFirefox拡張機能YSlowなどを利用して検証する。YSlowで「A判定」が出ていないようであればこれらの改善に取り組むよう推奨しており、A判定が出ている場合でも新しい20のルールを
RSSリーダーの作成から学ぶ、はじめてのiGoolgeガジェット開発：CodeZine
はじめに iGoogleは、Googleが提供するWebサービスで、ユーザーがニュースや天気予報をはじめとした任意のコンテンツをブラウザ上で閲覧できるサービスです。 既に多数のコンテンツが公開されていますが、これらのiGoogleガジェットは簡単に作成することができます。 自分で開発したアプリケーションやサービスの一部をiGoogleガジェットのコンテンツとして公開することで、コンテンツの使い勝手や付加価値を向上させることが可能です。 この記事では、RSSリーダーを作成しながらiGoogleガジェットの開発方法に触れてみたいと思います。今回作成するiGoogleガジェットのイメージを以下に示します。 本記事は、以下の順序で進みます。iGoogleガジェットでHello WorldRSSリーダを実装するユーザーの設定情報を扱う複数のRSSをタブ切り替えを利用して表示する 対象読者 JavaS
CodeZine：Zend Framework入門（1）：フレームワークの全体像とインストール（フレームワーク, PHP）
はじめに 本連載では、PHP上で動作するアプリケーションフレームワークの「Zend Framework」について紹介していきます。本連載では、以下の内容を扱う予定です。Zend Frameworkフレームワークの特徴Zend Frameworkを利用するための環境設定手順Hello, Worldアプリケーションの作成／基本的なコンポーネントについての解説その他Zend Frameworkにおける各種コンポーネントについて 導入の今回は、まずZend Frameworkの特徴と環境設定手順までを紹介します。対象読者 PHPの基本構文は一通り理解しているが、フレームワークを利用したことはないという方を対象としています。必要な環境 Zend Frameworkは、PHP5.1.4以降とWebサーバがインストールされている環境で利用可能です。本稿ではWebサーバとしてApache2.2を、OSに
不審なメールに要注意、トロイの木馬「新首相」：CodeZine
シマンテックは26日、福田康夫総裁の首相就任を利用したバッグドア型のトロイの木馬が出回っていると発表した。脅威レベルは最低レベルの1としている。 これは、福田新首相を送信者と偽った不審なメールが配信されているもので、メールに添付された圧縮ファイルを解凍すると、マルウェアが仕込まれる可能性がある。同メールはアジアとの外交に関する内容で、末尾には事務所の実際の住所や電話番号が記してあり、信憑性を高めようとしている。添付ファイル名は「mofa.zip」で、この「MOFA」は、外務省（Ministry of Foreign Affairs）の頭文字を語源としたものと考えられる。 シマンテックではウイルス対策ソフトを最新アップデートしておくほか、予想外のメールを受信したときは削除することを推奨している。 また福田首相公式サイトでも、本件に関する注意を呼びかけている。 Symantec Sec
フリーの高性能画像編集・写真加工ソフト「Paint.NET v3.07」リリース：CodeZine
フリーのフォトレタッチソフト「Paint.NET」の最新版、「Paint.NET v3.07」が8日にリリースされた。Paint.NETのWebサイトより無償でダウンロードできる。設定を変更すれば日本語で使うこともできる。 Paint.NETは、.NET Framework 2.0上で動作するフォトレタッチソフトで、画像のリサイズや回転、エフェクトや加工、ブラシ・ライン・楕円ツール、レイヤー機能などを備えている。画像の保存形式はPNG、JPEG、GIF、BMP、Paint.NET形式などに対応している。 今回のバージョンアップでは、ライン/カーブの先端を矢印で描画できるようになり、点線での描画も可能になった。保存されていない画像のサムネイルにオレンジ色のアスタリスクが表示されるようになったほか、いくつかの改良やバグフィックスが加えられている。 Paint.NETは、Microsoftと
[PHPプロ!] 重複するURLを防ぐことでSEO効果を上げるTips：CodeZine
onPHP5.comで、非常に見落としやすいSEOのTipsが掲載されています。これは、重複するURLを無くすことに重点が置かれたSEO対策です。 たとえば、http://www.example.com/ というサイトに http://example.com/ でも繋がるようであれば、これは重複するURLであるといえます。このようなURLが存在すると、同じページへのリクエストが複数のURLに分散されてしまうためSEO的に不利になるということです。 この記事ではこのような重複URLを、mod_rewriteとPHPスクリプトを用いて防ぐ方法が紹介されています。記事で取り上げられているのは、どちらを入力しても同じページが開く以下のような3つのケースです。 ドメイン名の違いによる重複
[PHPプロ!] お手軽にページのキャッシュを行う方法：CodeZine
ibzi's blogにて簡単にページのキャッシュを行う方法が紹介されています。この方法はPHPでMySQLクエリを使用してページを表示するページのキャッシュ方法です。ページをキャッシュしてしまえば、次からのアクセスではキャッシュが使用されるので、無駄な処理は行われません。ここで紹介されているのは、POSTやSESSIONの内容が加味されていないので、ユーザー名を出力するようなページでは使用できないので注意が必要です。 手順は非常に簡単で、以下の5つのステップで完了です。 ドキュメントルートに.htaccessファイルを作成し、start_cache.phpとend_cached.php、キャッシュを保存するためのcache_filesを作成する。 cache_filesにWebサーバーの実行ユーザーが書き込めるように設定する。 .htaccess内に以下のような記述を加えます。
Firefox拡張機能の基礎を実例で学ぶ：CodeZine
はじめに Internet Explorer（以下、IE）が主流のブラウザ市場の中で、Firefoxはシェアを伸ばしています。Firefoxがシェアを拡大している理由の一つに、拡張機能の存在があるでしょう。非常に多くの拡張機能が世界中の人々によって開発されています。これらの拡張機能を組み合わせることによって、Firefoxを自分の好みのブラウザにカスタマイズできるのです。 とはいえ、他人が作った拡張機能がぴったり自分に合っているとは限りません。幸いなことにFirefoxの拡張機能は、XML言語の一種でUI部分を規定するXUL、動作を規定するJavaScript、そしていくつかの設定ファイルから構成されています。これらはいずれもごくありふれた開発言語であり、特別な知識は必要ありません。しかも、エディタとFirefoxがあれば高価な開発環境をそろえる必要もありません。他人の作った拡張機能を自分
猫プログラミング 第1話 「プログラム仕掛けの猫」
はじめまして、柳井です。今回から、4コママンガの連載をすることになりました。……お、お手柔らかによろしくお願いします（低姿勢 さて、世の中にはさまざまな読者向けのマンガがあります。冒険好き、恋愛好き、スポーツ好き、ペット好き……。人々の好みは千差万別。現代は「好みが細分化された時代」です。 このような時代背景を踏まえ、ここでは「プログラムが好きな人向けのマンガ」に果敢にチャレンジしてみたいと思います。……だ、大丈夫なのか？ 読者はどれくらいいるのか？ というわけで、みなさま、息抜きに楽しんでいただければと思います（ぺこり さて、息抜きといえば、2月から通いはじめた飲み屋のスタンプカードがいっぱいになりました。次回訪問時に、焼酎のボトルを1本もらえるそうです。 しかし、忙しくて行く暇がありません！ はやくマイ・ボトルをゲットしたいものです。 編集部の斉木です。柳井さんと打合せをし
デスクトップCGIでWebとデスクトップを融合する 第1回：CodeZine
はじめに パーソナルコンピュータの高性能化とインターネットのブロードバンド化が進み、Perlなどのスクリプト言語の活躍する場が大きく拡がっています。言うまでもなく、Webの情報を載せるHTMLはテキストファイルなので、テキスト処理の得意なスクリプト言語にとって、Webは自由自在に取り扱える対象なのです。代表的なスクリプト言語の一つであるPerlは、1987年にLarry Wall氏により生み出され、インターネットの発展と共に、CGI用のプログラミング言語としても普及しました。本稿では、Perlを使用して、Windowsのデスクトップで動作するCGIアプリケーションを作成します。「デスクトップCGIでWebとデスクトップを融合する」というタイトルは、デスクトップにある情報とWebの情報を結び付けるCGIアプリケーションを作るという意味です。例えば、デスクトップの情報を元に、Webサイトの内容
画像を小刻みに回転して写真の傾きを補正する：CodeZine
はじめに デジタルカメラなどで写真を撮影するとき、誤って傾けてしまい、水平でなくなってしまうことがあります。そこで本稿では、補正画像を見ながら、0.5°刻みで画像を回転して補正する方法を紹介します。完成版のアプレットを見る 対象読者 画像処理に興味を持ち、特に撮影した写真の補正に関心のある人。必要な環境 J2SE 5.0を使っていますが、これより古いバージョンでも、本稿のコードをコンパイルし実行することができます。ただし、添付のコンパイル済みアプレットの実行には、J2SE Runtime Environment 5.0が必要です。概要 デジタルカメラで写真を撮影するとき、液晶モニターが見にくくて、水平を十分確認できないことがあります。そのような状況下で撮影した写真に対して、傾斜を補正する方法を紹介します。有償無償の既存画像ソフトは、90、180、270度などの一定の角度しか回転できないもの
マウスジェスチャを実装する（Win32版）：CodeZine
はじめに 私はGUI環境で簡単にコマンドを送ることができるマウスジェスチャが大好きです。今回はそんなマウスジェスチャを作ってみましょう。なお、.NET版については別稿を参照してください。対象読者 C言語（またはC++言語）でWin32のプログラムを開発したことがある方。必要な環境 少なくとも32bitのWindows環境が必要です。64bit環境でのテストはしていませんが大丈夫だと思います。設計 まずは構想を練らなければなりません。今回はサンプルなのでこちらで決めさせて頂きます。右ボタンが押されたら始まり、離されたら終わる。入力可能方向は4方向（斜め判定は無し）同じ方向への連続入力は無し（普通はこうすると思います）ある方向に動かすと反対側の移動量は0になる縦横の移動量を比較して多い方だけを考える（より自然な移動になる）ウィンドウの外に出てもしっかりと動作するようにする（これを行わないと変な
prototype.jsを使った画像サムネイルの表示ライブラリ：CodeZine
動作デモ はじめに ブロードバンドの普及、ストレージデバイスの大容量化に伴い、最近のWebサイトでは画像ファイルのような大容量のメディアを扱う機会が多くなってきました。しかし、Webサイトで画像のアップロードに対応するときに、従来のようにファイル名を指定する方法だと、アップロードをする側はどのファイルがどんな画像かを把握する必要があり、簡単に画像ファイルをアップロードすることができません。 筆者が開発を担当している「フォト蔵」という写真共有サイトでは、上記の問題を解決するための画像サムネイル表示ライブラリを作成して、使用しています。 画像サムネイル表示ライブラリを使用することで、画像ファイルをアップロードする前にブラウザ上で画像のサムネイルを表示させることができます。 セキュリティ機能の関係上、動作可能WebブラウザはIE限定になってしまいますが、IEは日本および世界におけるブラウザ市場で
プログラミング・開発者・ソースコード CodeZine：prototype.jsを利用したドラッグできるWebカスタムコントロール（Webカスタムコントロール, prototype.js, ドラッグ）
はじめに ネットサーフィンをしているとホームページなどで、ドラッグ＆ドロップ可能な、ふわふわ浮かぶメニューなどを見かけることがあります。例えば菊池さんの工作室のメニューのようなコントロールです。これを実現するASP.NETのカスタムコントロールを作成します。対象読者 HTML、StyleSheet、JavaScriptの基礎知識がある人。また、ASP.NETでカスタムコントロールを作成した経験があり、prototype.jsの理解もあることを前提にしています。動作環境 prototype.js ver 1.4、ASP.NET 2.0、IE6.0で動作確認しています。それ以外での動作は未確認です。解説の流れ 以下の順で解説していきます。ASP.NETカスタムコントロールの作成外部JavaScriptファイルへのリンクの方法prototype.jsの拡張ドラッグ＆ドロップ機能の実装浮遊機能の実
画像からASCIIアートを自動生成する：CodeZine
実行例の元画像（kingyo.gif） はじめに 文字を組み合わせて絵を表現する「アスキーアート」を知らない方はいないと思いますが、これを作れるのは一部の職人だけです。とても素人が作れる代物ではありません。しかし本稿で紹介する手法を用いれば、職人には遠く及ばないまでも、誰でも簡単にアスキーアートを作ることができます。 画像からアスキーアートを自動生成するのに問題となる事柄は次のとおりです。文字を画像に変換する方法余白を含めたフォントサイズを取得する方法画像に最も近い文字を判定する方法 また単色である文字と画像とを比較するために画像を2値化する方法 も解決しなければなりません。本稿ではこれらについて一つ一つ解説していきます。さらにHTMLにも対応することで文字の色やフォントを指定できるようにしました。対象読者 「C言語」「Win32API」および「DIBSection」を理解している方。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SQLiteとPHPで軽快なWebアプリケーションを作る：CodeZine
CodeZine：C++ 開発者のためのRubyガイド（XML, 言語比較）
RailsでWikiシステムを作成する：CodeZine