CSS3で作るナビゲーション
CSS3で作るタブメニュー 今回は、前回のWEBパーツに続き、これまで紹介してきたCSS3の機能を使ってナビゲーションパーツを作成してみましょう。まずは、図 1のような、タブ型ナビゲーションの作り方を紹介します。タブ画像を並べたようなデザインですが、テキストはWebフォント、グラデーションはlinear-gradient、角丸はborder-radiusで指定し、CSSだけで実装したサンプルになります。 HTMLは以下のようになります。 ［リスト01］HTMLソース（tab01.html） <head> ～中略～ <link href='http://fonts.googleapis.com/css?family=Terminal+Dosis:800' rel='stylesheet' type='text/css' /> <link rel="stylesheet" type="text
CSS3で作るWebパーツ
CSS3で作るグラデーションの見出し 今回は、これまで紹介してきたCSS3の機能を使って、コンテンツの見出しやボタン、アイコンなどのWebパーツを作ってみましょう。WebパーツをCSS3で描画することは、特にスマートフォン向けサイトにおいて有効です。 画像を使わないので、サーバへのリクエスト数を減らすことができます。また、スマートフォンでは縦と横に傾けた場合に画面幅が変化しますが、WebパーツをCSSで描画することで、縦横それぞれの向きに合わせて表示を最適化できるため、非常に有効です。 さらに、スマートフォンなどでは画面解像度が高いため、PC向けのWeb画像が荒く表示されることがありますが、こういった問題も、CSSで描画することで回避が可能です。 今回紹介するサンプルは、IEには非対応ですが、スマートフォンであれば、ほぼ問題なく表示されるはずです。IEに対応させたい場合には、CSS3.PI
CSS3のWebフォントを使ってみよう
CSS3のWebフォント機能は、サーバー上にあるフォントを利用するもので、ユーザーの閲覧環境に依存しません。使用したいフォントファイルをサーバーにアップロードし、CSSで読み込ませるだけで利用できるので、フォントの選択肢が広がります。 これまでテキストを画像化して表現していたWebのタイポグラフィも、Webフォントを使って自由に表現できるわけです。テキストなので、選択やコピー＆ペーストも可能、SEOにも有効です。もちろん、font-sizeやcolor、text-shadowなどのCSSプロパティも適用できます。 主要なブラウザは、既にWebフォントに対応しているので、少しの工夫ですぐに利用できます。ただし、フォント形式やライセンスなど、利用に際してはちょっとした注意が必要です。本稿では、これら注意点を踏まえてWebフォントの利用方法を紹介します。 Webフォントの利用方法 では早速Web
DBサーバーの負荷分散
MySQLアクセスを負荷分散する ユーザーからのアクセス数が非常に多いWebサイトにおいて、MySQLのSLAVEサーバーを複数台並べて負荷分散させるということがよく行われています。ただ、Webアクセスの負荷分散は一般的なテーマなのでいろいろなところで語られているのに対し、DBアクセスの負荷分散というテーマは一般的でないのかあまり語られていないように感じます。 DBアクセスを負荷分散するにあたって一番荒っぽい方法は、Webサーバー上のプログラムの中でどのSLAVEサーバーに接続するかをランダムで決める方法です。ランダムと言っても長時間アクセスしているとほぼ接続先が均等化されるので、一見この方法でも問題ないように見えます。しかしこの方法だと、接続しに行こうとしたSLAVEサーバーが高負荷もしくはサービス停止中であっても構わず接続しに行ってしまうという問題があります。 このような問題を解決する
HTML5+WebSocketsで作るリアルタイムWeb
はじめに HTML5+WebSocketsは、Ajax+CometやWCF+Silverlightと異なる特徴としてコネクションが1つという特徴を持ちます。これは、コネクションを張りっ放しにするコストより、コネクション開始のリクエスト発行時にコストを多く必要とすることから考えられた方法です。また、標準のHTML5を使うこと、Webサーバーを特定しないことは重要な要件と考えられます。 WebSocketsは、HTML5での仕様策定から独立した経緯があり、標準に近い仕様と考えることができるため、いずれ多くのWebサーバーでサポートされることが予想されます。サポートとは、WebSocketsの独自プロトコルによって、コネクションを長時間維持することができ、1つのコネクションで、サーバー、クライアント双方からメッセージを送信できることです。 また、コネクションの維持やサーバー、クライアント双方から
Seam3によるWebプログラミング
第1回でも説明したように、Seam3はCDI仕様の上に構築された新しいJava EEのフレームワークです。連載の最終回となる今回は、CDIプログラミング・モデルとSeam3の具体的なモジュールについて紹介します。 Seam3とは Seamのミッションは「リッチで標準ベースのインターネット・アプリケーションを構築するための統合開発プラットフォームを提供すること」です。SeamFramework.orgでは現在、Seam2とSeam3を並行して開発しています。Seam2は2006年に登場したバージョン1.0と同じコンポーネント・モデルを引き継いだフレームワークですが、Seam3はアーキテクチャを刷新した久しぶりのメジャー・バージョン・アップとなります。 Seam2のプログラミング・モデルはJSR-299（CDI: Contexts and Dependency Injection）として提案さ
CDIプログラミングの基本（その2）
CDI (Contexts and Dependency Injection) は、Java EE 6で導入された、コンテキストに対応したDI (Dependency Injection) の仕様です。今回は、コンテキストとDIの関係について引き続き説明します。 限定子を使ったインジェクション スコープという概念でインスタンスを管理するため、サーバー上の状態を表現するものが「コンテキスト」です。CDIのインジェクションはコンテキストにバインドしている（複数の）インスタンスの中から型に基づいて適切なものが選択されます。 この際、利用者はBeanのスコープを意識しないということに注意してください。利用者は、Beanの「型」だけを知っていればよく、Beanのスコープやライフサイクルについては意識する必要はありません。 CDIのインジェクションは「型」に基づいて行われますが、アプリケーション内でイ
CDIプログラミングの基本（その1）
連載の第2回となる今回は、Seam3の土台となるCDI (Contexts and Dependency Injection) の基本を確認します。SeamFramework.orgではCDI仕様の参照実装Weldを開発しています。今回はJBossアプリケーションサーバー(JBossAS)上でWeldのサンプル動作させてみましょう。 CDI サンプルプログラムの実行 開発環境の準備 CDIのプログラミングを試すためには、以下の開発環境を準備してください。 JDK 1.6 Ant 1.8 JBoss AS 6.0.0.Final (jboss-as-distribution-6.0.0.Final.zip) Weld 1.10.GA (weld-1.1.0-Final.zip) JDKはバージョン1.6以降が必要です。JBossAS 6はJBoss.orgからダウンロードします。Weld は
AjaxとCometで作るリアルタイムWeb
はじめに Ajax+Cometは、WebSocketsが定着するまでのつなぎの技術という見方もあります。しかしながら、クライアントがシンプル、プロトコルを拡張しない、といったメリットもありますので概要を紹介します。 今回は実装までのソースを解説していくのではなく、Ajax+Cometアプリケーションでの在席状況確認の仕組みやシステム構成のポイントといった部分を中心に解説していきます。 Ajax+Cometアプリケーションの場合、クライアント側にはリクエストを投げる仕掛けのみを構築しますので、Cometを実現するWebサーバーのアプリケーションが双方向通信の実体になります。 システムの構成 今回は、CometをJavaで実装するケースを想定しますので、jetttyのサーブレットの仕組みを解説することになります。 クライアント側の仕掛けは非常にシンプルですので、サーブレットの解説の前にクライア
分散KVS「okuyama」の活用ノウハウ
前回の記事では「okuyama」のインストールから起動、そして操作までを、手順を追ってご説明しましたが、いかがだったでしょうか、無事に「okuyama」は動きましたか？ さて連載最終回となる今回は、実際の導入時におけるシステム構成をご説明します。 本連載の1回目のタイトルともなっている"NOSQLは「知る時代」から「使う時代」へ"の通り、今後NOSQLの導入が様々な種類のシステムへ始まるのではないかと考えています。 ではどのようなケースで利用できるのか？ 今までご説明させていただいた通りNOSQLは全てのシステムケースにも向いているといったものではありません。どちらかと言えば特定のケースで力を発揮するタイプのストレージです。よって、適応するケースを見極める力が今後重要になってくると考えています。 今回は筆者が実際に構築したケースを基に「okuyama」を利用したケースをご紹介します。 1.
Low-Level APIを使ってデータ・ストアを検索する
連載最終回の今回は、データ・ストアを対象としたデータ検索について解説します。 App Engineのデータ・ストアは、分散キー・バリュー・ストア（KVS）を使っています。ここまでは主に、キー・バリュー・ストアのメリットを解説してきました。データ・ストアを対象としたデータ検索は、キー・バリュー・ストアの弱点と言われることもあります。実際のところはどうなのでしょうか。 今回は、キー・バリュー・ストアを対象とした検索の仕組みについて簡単に説明し、そのあとで、Low-Level APIを使ってデータ・ストアを検索する方法を、サンプル・プログラムを例に解説します。 1. GAEのデータ・ストアとBigtable 1.1. エンティティ・テーブルとプロトコル・バッファ ユーザー・データ（エンティティ）は、どのようにキー・バリュー・ストアに書き込まれるのでしょうか。App Engineのデータ・ストアの
分散KVS「okuyama」のインストール
前回の記事では「okuyama」の概要と機能的特徴を紹介しました。ご紹介できていない機能もまだいくつもあるのですが、説明ばかりでもつまらないと思いますので、今回は実際に「okuyama」を動かしてその機能を体感していただこうと思います。 1.「okuyama」のインストールから起動まで （1）事前準備 「okuyama」はJavaでできていますので、とにもかくにもJavaが必要です。 Javaは一度コードを書けば実行環境の差はJavaバーチャルマシンが埋めてくれる"Write once, run anywhere"の思想でできているため、基本的に環境は選びません。 実際に筆者が開発に利用している環境はCentOS、Red Hat、Windows7、WindowsXp、Mac OS Xなどです。本連載ではCentOS5.5(32bit)をベースに進めていきます。筆者は今回の環境をWindow
アンドロイドマーケットにアプリを公開しよう！（その2）
はじめに 昨今急速に注目を集めているアンドロイド（Android）。本稿では、そんなアンドロイド用のアプリケーションをプログラマではない人でも簡単に作る事ができるウェブサービス「ドロクリ」の魅力をお伝えしていきたいと思っております。 第3回までの記事で、「ドロクリ」を利用してアンドロイドマーケットに公開するためのアプリケーションを作成しました。最後の記事となる第4回では「ドロクリ」とは少し離れ、アンドロイドマーケットサイトにアカウントを作成し、アプリケーションを公開するまでを解説していきます。 一般的な解説となっていますので、アンドロイドマーケットにアプリケーションを公開しようと考えているプログラマの方々にも参考にしていただけたらと思います。 アンドロイドマーケットへ登録するには アンドロイドマーケットへアプリケーションを登録するには「デベロッパーアカウント」を作成する必要があります。 G
Web SQL DatabaseとIndexed Database API
HTML5では、API群が整備され、データベース関係のAPIも充実します。これによって、これまでよりも柔軟なWebアプリケーションを作れるようになるでしょう。今回は、それらのAPIの中から、「Web SQL Database」と「Indexed Database API」の2つを取り上げます。 Web SQL Databaseの概要 第4回では、Web Storageを紹介しました。Web Storageは、シンプルなデータベースAPIで、Cookieの代わりとして使うなどの使い道があります。ただし、単純なキー・バリュー型のデータベースなので、検索などの複雑な処理には向いていません。Webアプリケーションの中で本格的なデータベース処理を行うには、Web Storageでは機能的に不十分です。 そこで、「Web SQL Database」と呼ぶデータベースAPIが提案されています。Web S
Active Recordのその先へ ～RailsでMongoDBを使う～
MongoDBのインストールは、MongoDBのWebサイトから配布パッケージ・ファイルをダウンロードし、任意のディレクトリに展開します。ログを出力するフォルダと、DBを格納するディレクトリを作成し、画面1のようにmongodコマンドを使って起動します。 画面1: MongoDBの起動 # mongod --logpath ログ・ファイルまでのパス --dbpath DB格納ディレクトリまでのパス MongoDB starting : pid=21599 port=27017 dbpath=/usr/local/mongodb-1.6.3/db 64-bit db version v1.6.3, pdfile version 4.5 git version: 278bd2ac2f2efbee556f32c13c1b6803224d1c01 sys info: Linux ofc-n1.10
番外編 mixi Pluginであなたのサイトをソーシャルに！
mixi Graph APIはmixiの各種機能を外部のサイトやiPhone/Androidをはじめとしたスマートフォン、PCアプリケーション、家電などから使うことができる、非常にパワフルなAPIセットです。Graph APIを使うことで、mixi上のソーシャルグラフ（友人関係）や、プロフィール、ボイス、フォトなどの各種機能を使って、外部の方々が自由にアプリケーションを開発できるようになります。いずれは、mixiとつながる携帯電話やテレビ、ハードディスクレコーダ、フォトフレームなどが出てくるかもしれませんね。 GraphAPIを使うには、現時点ではパートナー契約が必要で、残念ながら個人の開発者の方がすぐにご利用いただく事はできません。しかし、できる限り早いタイミングで一般の皆様にも広く公開できるように、現在、全力で準備を進めておりますので、どうぞお楽しみにお待ちいただければ幸いです。 mi
HTML5関連のデータベースAPIとWeb Storageの基本
HTML5時代にはWebブラウザでデータベースを扱える 最近のWebの世界で、トレンドになっている技術の1つとして、「HTML5」があります。Webブラウザ上で動作するアプリケーション（Webアプリケーション）が一般化したことがあって、Webブラウザに求められる機能が増えてきました。そこで、その状況に即してHTMLをバージョンアップしようという流れが起こり、HTML5の仕様策定が進められています。 HTML5では、HTMLのタグの仕様だけでなく、周辺のAPI（Application Programming Interface）の仕様も明確化して、Webブラウザによる動作の差異をなくそうという方向になっています。また、Webアプリケーションを作る上で従来不十分だった機能について、各種の新しいAPIも追加されます。 APIの中で、特に不足していた分野の1つとして、「データ管理」が挙げられます。
これからはじめるRuby on Rails
はじめに Rubyと出会ったころ、その簡潔さに感動した著者は、「ここまで自然言語に近い形でプログラムが書けるのであれば、インターネットとPCの違いすら理解しない妻でも、少しはプログラミングができるようになるかもしれない」と、家庭での普及に挑戦したことがあります。 その試みは、渡した入門書を「はじめてのRUBAI」と読まれた時点で頓挫したわけですが、その経験から「Rubyの文法に従ってはいるが、何やら他言語の匂いを感じるコード」のことを、Rubyの潜在力を生かしきれていないという意味で「RUBAIコード」と呼ぶことにしました。 そして、社内のさまざまな分野のプログラマにRuby開発を指導してみて分かったのは、"RUBAIコード"には、実装レベルの間違いと、設計レベルの間違いがあるということです。 実装レベルの間違いとは、処理を他言語の習慣に従って記述することで引き起こされます。Javaプログ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
チューニングに使えるJava性能監視ツール
リスト・プロパティを含むエンティティの永続化