Googleマップ＋jQueryで作るAjaxなデザイン (1/5)
今やさまざまなWebサイトで使われ、すっかり地図の定番となったGoogleマップ。 コーポレートサイトや飲食店のサイトなどで、純粋に案内図としてページに埋め込むのが一般的ですが、中にはもっとおもしろい使い方で、ユーザーを楽しませているサイトもあります。 一例として、「hitotoki」というWebマガジンを紹介しましょう。hitotokiは、ある特定の場所に関するショートストーリーを地図と絡めて紹介するWebマガジンです。Googleマップをまるで独自に描いた絵地図のようにうまくサイトになじませ、「地理と文学を結びつけた町の文学地図」というコンセプトに合わせて効果的に活用しています。 今回は、このhitotokiのGoogleマップ活用法をお手本としましょう。 今回のお手本サイト： 『hitotoki―町の文学地図』 「場所」にまつわる読者の思い出を募り、地図と写真とともに紹介する投稿型の
リコー「CX1」のマニアックな機能で猫撮り (1/2)
リコーの「CX1」（関連記事）はぎゅっと締まったブラックボディがなかなかそそられるコンパクトデジカメである……が、中味はかなり普通じゃない。もちろん褒め言葉です。 なぜなら、普通のコンパクトデジカメで流行の「おまかせオート」とか「顔検出して笑顔でシャッター」的な一般受け機能より、連写とかダイナミックレンジを広げた写真とか、微妙にピント位置をずらした写真を連写してあとから最適なカットを選べるとか、カメラが水平になってるかどうか教えてくれる電子水準器とか、そんな「決定的な1枚を何とかして撮るぞ」機能に力を入れたカメラなのだ。 それで猫を撮ってみたのである。たとえばこんな感じ。
HTML5先取り！CanvasならFlash不要で絵が描ける (1/3)
現在主流のHTML 4.01が勧告されたのが1999年12月。その後もWebは進化し続け、HTML+CSS+JavaScript（≒DHTML）でできないことはFlashやSilverlightで補うことで、さまざまな表現が可能になっています。たとえば、ユーザーの操作で画像の位置などが変化するゲームや、刻々と変化するデータを外部が取り込んで図形を描く株式市場の相場グラフはFlashを使うのが一般的ですが、できればHTMLやJavaScriptだけで済ませてしまいたいもの。そこで今回は、HTML5の新機能「Canvas」を使い、Webページ上にJavaScriptで図形を描画する方法を紹介します。 Canvasってナニ？ 2010年の勧告を目指してW3C（World Wide Web Consortium）で策定中のHTML5では、「Canvas」という新しいHTML要素（タグ）が追加される
ソフトバンクの「お父さん」を激写！ (1/3)
「お父さん」と言えば、最近ではソフトバンクCMに出ている白戸家（ホワイトけ）の北海道犬・カイくんを思い浮かべる人も多いだろう。 その人気はなかなかのもの。CM総合研究所がまとめる「CM好感度白書」で並みいる有名人を押しのけて1位を獲得。「カイくんのきもち」「しゃべる犬 カイくんのひとりごと」といった書籍まで発売されている状況だ。 その「お父さん」がソフトバンクの新製品発表会に出るとの一報を受けて、急遽、会場に足を向けた。連載「這いつくばって猫に近づけ」を100回以上続けており、猫好きなイメージの強いASCII.jpだが、「お父さん」だけは特別。ということで発表会レポートに先駆けて、お父さんにフォーカスした記事をお届けしよう。 お母さんに引かれて登場 ソフトバンクの新機種発表会に「お父さん」が登場したのは、実は今回が初めてだ。ソフトバンク広報によれば、今まで「発表会会場の制約があったり、お父
心まで癒される！ 東京のパワースポット巡り 第2弾！ (1/4)
皆さん、前回のパワースポットへは行きましたか？ 今回は、パワースポット巡り第2弾のご案内です。さあ、パワーガンガン届けちゃいますよ!! 暖かくなり、ポタリングには持ってこいの春到来と共に、新年度のパワーを充電しちゃいましょう。 前回のパワースポット巡りから、出会い運が最強になった気がする今日このごろ。こんにちは！ アズサです。いや～、これマジで強運と偶然で、たくさんの素敵な出会いに恵まれていますよ。前回行った愛宕神社は、出世のご利益で有名ですが、出会い運が上がると出世にも繋がると思いません!? 思わぬ大抜擢！ みたいな。 さあさあ、そんな可能性を秘めたパワースポット巡り第二弾も張り切っていきますよ!! 今回は、代々木界隈のパワースポットで癒され→日本一の繁華街、新宿に佇むパワースポットを巡る、1時間半のコースをご案内。距離的には、前回より短いけど、なんせ人が多い東京のど真ん中をポタリングす
猫兄弟をGH1の動画機能で撮ってみた (1/2)
円筒形のケースにすぽっとおさまった2匹。上にいるのがあとから割り込んだ「ちっち」。下になってるのが「ねーね」。最近やっと2匹の区別を覚えた（2009年5月 パナソニック LUMIX GH1） 「パナソニックのGH1で猫を撮るぞ Part2」である。 GH1を持ってお馴染みの公園に行くと、石のテーブルの上に円筒形の猫用キャリングケースが置いてある。公園地域猫の世話を手伝ってる猫好き女子が最近買ったもので、ここに猫世話グッズ（餌とかおもちゃとか）を入れて、休日になると自転車で通ってる。 ケースの中を見ると、「ねーね」と呼ばれてる人なつこい猫が丸くなって寝てる。この円形が身体にぴたっと沿うので気持ちがいいらしい。 猫の性格も千差万別で、一定距離以上は人に近づかないヤツもいれば、こんな無防備なヤツもいるのだ。 ねーねはときどき人の膝に勝手にのっかるくらいの懐きぶりである。
3分でできるJS＋CSS「角丸」テクニック (1/3)
“Web2.0”っぽいWebデザインの定番、角丸ボックス。実際、ここ数年、サイドメニューやナビゲーションバーなどに角を丸くしたブロック要素を多用するサイトを目にする機会が増えています。 ところがこの角丸ボックス、（X）HTMLとCSSだけで実現するには、コーナー部分の背景画像を用意したりCSSを書き足したりと、意外に手間がかかって面倒です。現在、W3C（World Wide Web Consortium ）で策定が進められているCSS3（CSS level 3）では、ブロック要素の角を丸くできる border-radiusプロパティが追加される予定ですが、現在のところCSS3は一部のWebブラウザーしか対応していませんし、border-radiusプロパティの実装状況にもばらつきがあります（Firefoxの -moz-border-radius、Safariの -webkit-border
猫撮りに最適！ パナのデジイチ「GH1」 (1/2)
先週の「猫におやつをあげる」話で大事なことを言い忘れました。 猫によっては食べ物を手で奪おうと爪をの伸ばしてくるヤツもいます。その場合、手をひっかかれて怪我をする可能性があるので十分注意し、危険だと思ったら、手から直接あげるのはあきらめること。 ときどき、奪ってでも食べ物をゲットする猫もいて、不用意におやつを持った手を伸ばすと、引っかかれちゃうからご注意あれ。 猫撮影に必要な3つの機能を備える デジタル一眼「LUMIX DMC-GH1」 さて、今回は新しく買ったデジカメの話。パナソニックの新型デジタル一眼カメラ「LUMIX DMC-GH1」である。発売日にゲットし、最初に撮ったのはもちろん猫。 まだ入手したばかりなので速報写真だけど、こいつがなかなか面白い。 GH1はフルHDの動画を撮れるレンズ交換式デジタル一眼。「女流一眼」なんてコピーがつけられてるけど、男だって使うのである。何しろ猫撮
jQueryプラグインで世界に1つの右クリックメニュー (1/2)
Windowsアプリケーション上でテキストや画像を選択して右クリックすると、選択した対象に応じたメニュー（コンテキストメニュー）が表示されます。必要な機能をすぐに選択できるので、メニューバーに並んだ膨大なメニューの中から選ぶのに比べて効率的です。Webサイトでも同じように、ページ上のそれぞれの項目に応じたコンテキストメニューが表示されれば、ユーザーにとって便利ではないでしょうか。 実はこのコンテキストメニュー、JavaScriptライブラリを使えば意外に簡単にできます。今回は、jQueryの「Context Menu Plugin」を使ってコンテキストメニューを表示する方法を紹介します。 「Context Menu Plugin」を使ってみよう 「Context Menu Plugin」は、Cory LaViska氏が開発したjQueryプラグインです。以下のページで配布されています。 h
jQueryでクールなくるくるウィジェットを作ろう (1/5)
数年前に登場した「Googleマップ」を皮切りに、ページを遷移せずに一部を書き換える“Ajax”が大流行しました。Ajax/JavaScriptによるユーザーインターフェイス（UI）はWebサイトの操作性を大きく向上できるので、地図サイトなど、いわゆる「Web 2.0的」サイトでは多用されていますが、（特に国内の）テキストと画像を組み合わせた昔ながらのWebサイトでは、まだまだ活用されていないようです。 今回は、AjaxでリッチなUIを実現している英国のWeb制作会社のWebサイト「Web Design by TVI」に注目します。単に見た目がかっこいいだけでなく、Ajaxを効果的に活用した使い勝手のいいUIをお手本にします。 今回のお手本サイト： 『Web Design by TVI』 Webデザイン、ECサイト構築、CMS開発などを手掛ける英国のWeb制作会社「TVI」の企業サイト。会
TCP/IPで使われるIPアドレスとポート番号 (1/3)
TCP/IPの通信と名前 TCP/IPはコンピュータのデータ通信を行なうために作られたプロトコルスイート（プロトコル体系）である。TCP/IPでは、通信に使用する回線やアプリケーションの種類が異なっても、共通の仕組みを利用できるようにするため、「アプリケーション層」「トランスポート層」「インターネット層」「ネットワークインターフェイス層」の4つの階層に分けて組み立てられている。 アプリケーション層は、いわゆるアプリケーションソフトウェアが動作する階層で、通信データの起点と終点となる階層である。このアプリケーション層において通信を行なう起点と終点は、文字の組み合わせである「名前」で識別される。しかし、名前のまま通信が行なわれるわけではなく、実際には各階層のプロトコルに応じて番号やアドレスといった数値情報に置き換えられ、その情報によって宛先を示すようになっている。 アプリケーション層の名前 た
荻窪圭の“這いつくばって猫に近づけ” 第97回 猫に出会ったら指を差し出そう
人になれてるどこかの飼い猫。同じベンチに座り、差し出された指の匂いをさっそく嗅いでいたところをすかさず撮影（2007年11月 パナソニック DMC-L10） 散歩してたら猫を見つけた……としよう。 そしたら、まず相手が逃げない距離でしゃがんでみる。見つめ合う。おもむろに、左手の人差し指を突き出して、指を上下左右に動かして気を引いてやる。 猫の本能が警戒心に勝てば……なんだろうと寄ってくるのである。本能なのだから指じゃなくても、草でもその辺に落ちてる木の枝でもいいんだけれども、やっぱ「指」だよね。その方が楽しい。 そして、おもむろに指に鼻を近づけて匂いを嗅ぐのだ。そのくんくんってするさまがなんとも可愛い。この時点ではまだ警戒心を解いてない（と思う）ので無闇に動かないように。 もちろん、そうなったら右手でカメラである。そんな指くんくん写真を3枚どうぞ。
ステーキ丼をJavaScriptで美味しく拡大 (1/5)
海外のWebサイトを眺めていると、日本ではあまり見かけない変わった商品を紹介しているネットショップに行き当たることがあります。国内では、「楽天」や「Yahoo！ショッピング」などのモールに出店しているネットショップがほとんどですが、海外では趣向を凝らした独立系のショップも多く、Webデザインの参考になることも少なくありません。 変りダネのUSB機器や玩具などのガジェットを販売する「I Want One Of Those」もそうした個性的なネットショップの1つです。今回はI Want One Of Thoseが使っている“技”を参考にさせてもらいましょう。 今回のお手本サイト：『I Want One Of Those』 眺めているだけでも楽しい、おもしろガジェットを販売するイギリスのネットショップ。ロボットやラジコンなどの玩具からキッチン用品やアウトドアグッズまで、数百種類以上の商品を取り扱
チッちゃい画像にはデッカいツールチップを！ (1/5)
「プロが作ったWebサイトのあの“技”をウチのサイトでも（それもタダで）マネしたい！」――。そんな欲求に応えてくれるJavaScriptライブラリ／フレームワークが、ネット上にはたくさん公開されています。この連載では、国内外の商用サイトの優れたUIをお手本にして、なるべくカンタンに、手間をかけずに自分のWebサイトをブラッシュアップしていく方法を紹介します。 「フォト蔵」というWebサイトをご存知ですか？ ユーザーが自分で撮った写真や動画をWeb上にアップできる、いわゆる「写真共有サービス」です。同種のサービスは数多くありますが、フォト蔵は日記やコミュニティなど、他のユーザーとのつながりを意識したSNS的な機能が充実しているのが特徴で、現在18万人のユーザーが利用しています。 今回はこのフォト蔵のトップページをお手本にしたいと思います。写真共有サービスということで、フォト蔵のサイトはシンプ
意外性が心地よいJSメニューのWebデザイン (1/5)
JavaScriptライブラリでリッチなUIを手軽に作れるようになったのはいいけど、最近ではそれもすっかりマンネリ気味。そろそろ、ほかのWebデザイナーとは違うデザインを取り込んで何とか差をつけたい――。そんなときは、国内のデザイン誌やブログではなく、海外サイトに目を向けてみてはどうでしょうか。たとえば、優れたWebサイトを紹介している「dzineblog」というブログなら、海外のWebデザインのトレンドをいち早くチェックできます。 そのdzineblogの膨大なコンテンツの中から、今回注目するのが、「10 Websites That use JavaScript Animation Effectively!!」という少し前のエントリー。JavaScriptによるアニメーションエフェクトを上手に使っているサイトを取り上げており、その中から、「Playground Blues」をピックアップ
「5枚プレゼン」のレイアウトを理解する
本連載では、「1枚企画書」に続いて竹島愼一郎氏が提唱する「5枚プレゼン」をPowerPointで実践する手順を全5回で紹介します。即断即決を可能にするのが以前に紹介した「1枚企画書」ですが、プランニングの王道はやはり複数枚の企画書です。ただし枚数は5枚に限定するというのが秘中の秘策です。 第2回では、5枚プレゼンのトップとボトム、導線の作り方、流れのデザインなどについてレクチャーします。 ※本記事は「ビジネス極意シリーズ パワポで極める5枚プレゼン」から一部抜粋し、編集・再構成したものです。 レイアウト――「5枚プレゼン」のトップとボトム 「5枚プレゼン」のそれぞれのページが、どういった内容でどう見てほしいのかを瞬時に理解してもらえるよう、見出しのフレーズを書き入れておくといい。タイプとしては、ページの一番上を利用した「トップ型」、一番下の「ボトム型」、トップとボトムが呼応した「問答形式型
クロキバの犬歯はやはり長かった (1/2)
前回（関連記事）の続き。おべんとを食べながら、鶏肉の味がついてないところをこっそりラップにくるみ、猫へのお土産にしたのである。そして再び猫だまりの休憩所へ向かうと……1匹もいない。がーん。 めげずに手に肉片を持って、口笛を吹いたり舌打ちをしたりしてると、遠くからひょっこりと1匹登場。 今回の狙いは「クロキバ」なんだけど、まあしょうがない。猫を安心させるためにしゃがんで姿勢を低く取り、手のひらに肉片を乗せて呼ぶと、少しずつ少しずつ近づいてくる。 このままでは撮れないので、近くにあったコンクリート製テーブルの近くまでおびきよせ、肉片を乗せてじっと待つことしばし。やがて興味ぶかげに身を乗り出して匂いを嗅ぎ、パクリ。さすが、人に餌をもらいなれてる（と思う）だけあって、行動が素直。
ジャパネットたかたのテレビ論（続） (1/2)
前回の続き。 ジャパネットたかたといえば、先週の『日経ビジネス』（2009年3月30日号）の「消費退国／ニッポンの生活者を掴め！」で扱われていたのをご覧になった方もおられるはず。大手家電量販店を含む国全体の消費が冷え込む中、2008年も対前年比18％増、経常利益率5％前後を維持し続けている秘密に迫ろうというものだ。この記事の中でいちばん注目すべきなのは、「（販売する商品を）最終決定するのは当日の午前9時頃だ」という部分ではないかと思う。 ジャパネットたかたは「テレビジョン」の具現 駅前の魚屋を地でいく手法 テレビジョン（television）というのは、遠くにあるものが見える装置である。『Oxford English Disctionary』には、“『Scientific American』（1907年6月15日号）によると、電送写真の技術などが「テレビジョン」実現への着実なステップになる
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
猫におやつをあげてみる (1/2)
ホリエモンがラジオで語る、拘置所時代ウラ事情
