これで完璧！ Chromeエクステンション決定版 (1/5)
特集第1回では、人気ブラウザー「Firefox」ユーザー向けの拡張機能「アドオン」の中から上級者向けのアドオンを紹介した。第2回として紹介するのは、まさにその対抗勢力となる「Google Chrome」の拡張機能「エクステンション」だ。 こちらも以前、エクステンション機能のベータ版が登場して間もないころ、初めに入れておくべき入門的なエクステンションを紹介している。紹介した当時はエクステンションもまだ500本ほどだったが、正式版として提供を開始した現在、アドオンの種類は2000本を超えている。 そこで今回は前回紹介したものに加える形で新たに入れておきたい「上級エクステンション」を取り上げる。自社開発ならではの強み「Google活用」をはじめ、サイト閲覧に便利なもの、ネットサービスの使いこなしに使えるものなどを決定版として集めてみた。 もっとChromeを便利にしたい はじめに紹介するのは、ブ
40分で覚える！jQuery速習講座 (1/6)
いまやWeb制作に欠かせなくなったJavaScript。でも、「JavaScriptはほとんど“アリモノ”で済ませている」という方も多いのでは？ そこで、WebデザイナーやマークアップエンジニアなどのWeb制作者の方向けに、いま一番人気のJavaScriptライブラリー「jQuery」の基本を学べる特別レッスンをお届けします。題して、「40分で覚えるjQuery」。要点だけにぎゅっと絞って解説しますので、手を動かしながら今すぐjQueryを始めましょう。 【0分目：導入編】 jQueryのダウンロードと利用方法 jQueryのライブラリー本体（JavaScriptファイル）は公式サイトからダウンロードし、head要素などにscript要素を書いて読み込みます。
jQueryでバリデーション付きメールフォームを作ろう (1/3)
今回はjQueryを使って、「問い合わせフォーム」にバリデーション（検証）機能を付ける方法を解説します。入力漏れや入力ミスがないか、サーバーへ送信する前に、クライアント側であらかじめ簡易的な検証を済ませることで、フォームのユーザビリティを高められます。今回のサンプルでは特に、入力漏れやミスのあった項目を分かりやすくユーザーに示すように工夫しています。 バリデーションルールをclass属性で設定 「問い合わせフォーム」のサンプルとして、以下のようなWebページを作成します。バリデーション機能としては、必須項目の「お名前」「性別」「どこでこのサイトを知りましたか？」「お問い合わせ内容」が入力されているか、「郵便番号」が数値で入力されているか、「メールアドレス」がメールアドレスの書式になっているか、「メールアドレス」と「メールアドレス（確認）」に入力されたテキストが同じか――をチェックします。
Flash for iPhoneの衝撃 これから何が起こる？ (1/2)
Adobe MAX 2009の様子はアドビのビデオ配信サービス「ADOBE TV」にて確認できる（関連リンク）。英語のみだが、Flash関連を知りたい人は基調講演の「MAX 2009 KEYNOTE - DAY 1」をチェックしてみよう。 マルチタッチに対応したFlash Player MAXにて発表されたFlash Player 10.1 は、モバイル環境で動作する、初の本格的なFlash Playerである（関連リンク）。 従来、モバイル用のFlash Playerには、サブセットである「Flash Lite」が使用されていた。一方、今回のFlash Player 10.1では、PC、携帯電話、ネットブックなどで同じ機能性を実現している。これにより（スペックさえ足りていれば）PCで表示されるものと同一のコンテンツを、携帯電話でも表示できるようになる。 ちなみにFlash Player
30分でできる！Webサイトを高速化する6大原則 (1/4)
Webサイトを制作するとき、「パフォーマンス」を気にしたことがあるだろうか？ もしまったく気にしたことがないなら、気をつけた方がいい。閲覧に時間のかかる“遅いWebサイト”はユーザーにフラストレーションを与え、閲覧をやめさせてしまう恐れがある。 下記のグラフは、「Simple-Talk」という海外のオンラインメディアで発表されたユーザー調査の結果だ。アンケートページの表示にかかる時間を意図的にコントロールし、表示時間によってユーザーが感じるフラストレーションの違いを調べたものだ。 縦軸がフラストレーション（10段階）、横軸が表示までの時間を表している。1～5秒以内にページが表示された人に比べ、ページ表示までに5秒以上かかった人は2倍以上もフラストレーションを感じている。フラストレーションがあまりに高ければ、せっかく何らかの目的を持って訪れてきたユーザーも待ち切れずにブラウザーを閉じてしまう
レスポールの死と、初音ミク「白いクスリ」削除問題を考える (1/2)
TBSストアで販売中の「平沢唯モデル初心者用エレキギター」。25万円のGibsonは手が出せなくても、2万9800円で買える「ギー太モデル」なら手が出る 子どもの頃は「Les Paul」はギターの名前だと思っていたし、マルチトラックレコーダーで遊んでいた時代も、それを誰が発明したかなんて考えもしなかった。もっと早い時期に知っていれば別の側面から音楽に興味を持てたかも知れないのに。 そういう個人的な反省に基づき、この偉人について広く知ってもらうには、今なら躊躇せず、こう言い切ってしまっていいのではないかと思った。 「平沢唯のギー太を作った人だよ」と。 Les Paulの業績で最も知られているのは、共鳴胴を持たないソリッドギターの原型※を発案し、自身のシグネチャーモデルである「Les Paul Model」を開発したこと。 これはGibson初のソリッドギターとして1952年から量産が始まり、
ロックバンドからニコ動にシフトした、キャプミラＰの生き様 (1/4)
ボーカロイドを使ったアーティストには「そそそP」として活動する津久井箇人氏など「プロ」が参加している例も多い。今回取材したキャプミラPも、かつてインディーズバンドのメンバーとして活動していた。画像はキャプミラP本人が、画像を共有するコミュニティーサイト「pixiv」に掲載しているもの。フューチャーナウ！ いわゆる「ボーカロイド職人」にはマルチタレントが揃っている。活動の舞台が動画サイトということで、音、映像、コンピュータと、メディア操作のスキルがそのまま表現力の幅につながるからだ。 中でも「キャプテンミライ」こと映像作家の丹治まさみさんは、飛びぬけてマルチな人だと思う。昨年「幻想論」シリーズでニコニコ動画に登場し、ボーカロイド職人の中にもファンが多い。しかし彼の作品の魅力は、独自の世界を展開する歌詞にある。 その彼のバックグラウンドを如実に示しているのが、今年6月にアップロードされたリン＆
Webデザイン劇的ビフォーアフター09年春版 (1/4)
この4月、新しい事業年度のスタートに合わせ、各社のWebサイトが相次いでリニューアルした。ここでは、3月下旬～4月にかけて大規模なリニューアルを実施したWebサイトを編集部でピックアップし、リニューアル前後の画面写真付きで紹介する。最新の企業サイトのトレンドをつかみ、自社サイトのリニューアルの参考にしよう。 マイクロソフトが運営するポータルサイト「MSN」は、2008年4月以来ほぼ1年ぶりにトップページをリニューアル。「毎日使いたくなるMSN」（マイクロソフト）を目指し、使い勝手を高めた。 3カラムのレイアウトは従来のままだが、それぞれのカラムの役割を明確にし、各カラムに入る要素を分類、整理している。具体的には、左カラムにHotmailの受信状況や天気などを確認できる個人ツール類を、中央カラムにニュースなどの最新情報を配置。ディスプレイ広告や企画広告への誘導はすべて右カラムに集約した。 ま
自分だけのPhotoshopが作れる！超便利な新機能
間もなく出荷が始まる「Adobe Creative Suite 4（CS4）」（関連記事1、関連記事2）。多彩な製品群、見どころの多い新機能の中で、個人的に「これはいい」と思ったのが、勝手に“Photoshop CS4の目玉機能”と思い込んでいる強力なカスタマイズ機能だ。 この新機能を使うと、なんと自分専用のユーザーインターフェイス（UI）が作れてしまう。もう少し詳しく言うと、Photoshopのツールやコマンドの中からよく使うものだけを抜き出して、独自のパネル（パレット）が作れるのだ。11月18日にはカスタマイズ用ツール「Adobe Configurator」のプレリリース版が米アドビ システムズから公開され、いよいよ一般ユーザーも試せるようになった。編集部で確認したところ、日本語版のPhotoshop CS4（ベータ版）環境でも動作したので、簡単な使い方を紹介しよう。 Adobe Co
古いPhotoshopで最新ブラシを使うチュートリアル
Photoshopのカスタムブラシを使えば、Webサイトで使えるカッコいいグラフィックをあっという間に作れる――。先週、「アナログな質感」をテーマにネット上で入手できるいくつかのブラシファイルを紹介したが（関連記事）、「自分の環境では使えなかったぞ！」という読者もいるだろう。というのも、Photoshopのカスタムブラシ（ABRファイル）はバージョンによって異なり、新しいバージョンで古いバージョンのABRファイルは読めても、その逆はできない。たとえば最新のPhotoshop CS3で作成されたABRファイルは一昔前のPhotoshop 6では使用できないのだ。 古いPhotoshopで最新のPhotoshopブラシを使えるようにするにはどうすればよいのか？ 今回はオープンソースソフトを使って手軽に実現する手順を紹介しよう。 そもそもPhotoshopブラシってどうやって作る？ 手順の説明に
これが大学？議論呼んだSFCの新サイト (1/2)
Flashを使った今どきのユーザーインターフェイス（UI）デザインの要素を取り込みたい。一味違った楽しいコンテンツの魅せ方でインパクトのあるサイトにしたい。昨年12月18日にリニューアルされた「慶應義塾大学湘南藤沢キャンパス（SFC）」の新サイトは、そんな要素が散りばめられた「FlashによるUIのショウケース」とも呼べそうなWebサイトだ。 つながりが見える「教員マップ」 新サイトの目玉は、トップページに設置された「教員マップ」。教員の顔写真や学部をイメージした写真のサムネイルが並び、それぞれ関連性の高い項目が線でつながっている。見た目はソーシャルグラフサービスで用いられるような相関図に近い。
ASCII.jp：もう配色には困らない！「Adobe Kuler」
「オリジナルのWebデザインをしたいけど、いまいち配色センスがなくて困る」「いつも好きな（得意な）色の組み合わせばかりでデザインしてしまう」「でも色彩理論を勉強するのは面倒だ」。 そんな人にぜひおすすめしたいのが、アドビ システムズが提供しているオンラインサービス「Adobe Kuler」（クーラー）だ。Kulerは、さまざまな色の組み合わせ（配色パターン、Kulerでは「テーマ」と呼ぶ）をWebブラウザー上で作成し、保存・公開もできる、ちょっと変わったサービス。いわば“みんなの力”で作られたカラーチャート集ともいえるもので、すでに7000種類以上（2009年1月現在）ものテーマが公開されている。利用料は無料だが、保存などの機能を使うにはAdobe IDが必要だ（以降の説明はログインしているものとして進める）。
DS-10を歌わせる、ヨナオケイシの超絶テク (1/4)
ヨナオケイシ。「あすか120％」など、ゲーム音楽の作曲家として有名。同じゲーム音楽の作曲家である梅本竜氏、せんたろ氏らと共に「SPIN→OUT」を結成。DS-10による先鋭的でドライブ感たっぷりのサウンドを聴かせる 今回はゲーム音楽作曲家のヨナオケイシさんのインタビューだ。「KORG DS-10 EXPO 2008 in TOKYO」（関連記事）にも登場し、女声ボーカルサウンドを奏で、場内の喝采をさらっていった、あの人である。 アナログシンセサイザーのフィルター設定で人声に近い音を出すことは不可能ではない。でも、あそこまでリアルに歌わせるのは、（DS-10でやったということを抜きにしても）驚きだ。そのワザの秘密はどこにあるのか？ あの声の謎がここで公開 ── ということで、わざわざ編集部までお越しいただいてすみません。早速ですが、ちょっとやってもらえますか？ ヨナオ ああ、この部分ですよね
海外Webデザイン、2008年の潮流 (1/2)
Webデザインの世界で著名なブログ「Web Design Wall」が年末恒例の「Best of CSS Design 2008」を発表した。同ブログの姉妹サイトである「Best Web Gallery」の中から、CSSレイアウトの優れたWebサイトを全部で50サイト選出。こちらのエントリで画面ショット付きで紹介している。 選出されたサイトの一覧はぜひ元エントリを参照していただくとして、ここでは50サイトの中から特徴的なデザインのサイトと、共通する傾向をピックアップして紹介しよう。 JavaScriptでアニメーション＆エフェクト 今年に限ったことではないが、多くのサイトで何かしらの形で使われていたのが、JavaScriptだ。中でも、画像の拡大にLightbox系（ページを遷移せずにオーバーレイ表示）の効果を使ったり、ページ内リンクにスムーズスクロールを取り入れるのは相変わらず人気のよう
これは便利だ！Excel→Table化するjQueryプラグイン
Webページに掲載する面倒な表（テーブル）の作成を楽にしたい――。以前、本サイトではExcelファイルを簡単にHTML（Tableタグ）に変換するExcelアドイン「XLS2HTMLTable」を紹介した（関連記事）。XLS2HTMLTableはとても便利なツールだが、それでも表が大量に必要な時にはやはり手間がかかる。 今回はさらに楽をできて便利なアイテムを紹介しよう。それが、CSVファイル（カンマ区切りテキスト）を読み込み、Tableに整形して表示するJavaScriptライブラリ「jquery.csv2table.js」だ。 JavaScript関連の著書も多い高橋登史朗氏が作った「jquery.csv2table.js」は、名前のとおりjQueryのプラグインとして動作するもので、HTMLにわずか数行のスクリプトを書き加えるだけで使える手軽なライブラリだ。さっそく実際にjquery.
ASCII.jp：Web制作会社が作った！超使えるJavaScriptライブラリ
「Webサイトを作るときに本当によく使う機能を、自分で作らずにさくっと実装したい」――。そんなワガママな願望をかなえてくれる JavaScriptライブラリが登場した。ミツエーリンクスが今月オープンソースとして公開した「MJL（MITSUE-LINKS JavaScript Library）」は、Webサイト制作に必須の“最小限の機能”に絞ったJavaScriptライブラリだ。 昨今相次いで公開されている、リッチなUIを実現するJavaScript/Ajaxライブラリとは異なり、MJLの機能はとてもシンプルだ。もともとWeb制作会社であるミツエーリンクスが「自社標準ライブラリ」として作成したものだけあって、汎用性・実用性を重視したライブラリになっている。 具体的な機能は以下の6つ。確かにどれもよく使いそうなものばかりだ。 画像のロールオーバー Flashオブジェクト埋め込みの機能拡張 新規
Web制作に超便利！無料のプロトタイプ作成ツール
本格的なWebデザインに取り掛かる前に作るプロトタイプ。特に受託サイトの制作やチームで制作する場合にはある程度きっちり作っておきたいものだが、「なかなかちょうどいい作成ツールがない」という人も少なくないのではないだろうか。 FireworksやillustratorからVisio、PowerPointまで、プロトタイプの制作に使えるツールはいろいろあるが、今回は無償で使える便利な専用ツールを紹介しよう。それが、オープンソースの「Pencil」だ。Firefox 3のプラグインとして動作するものだが、実際の使い勝手としては独立したアプリケーションのように動く。 使い方は簡単だ。インストールが済むと、Firefoxの[ツール]に[Pencil Sketching]という項目が追加される。Pencilの起動はここをクリックしよう。 プロトタイプを作るための基本操作は、左側に並んでいるGUI部品を
Flash不要！JavaScriptで派手なWebデザイン
ブラウザーいっぱいに広がる鮮やかなグラフィック。フェードインでゆっくりと出現する写真画像。スクロールしながら画像に重なっていく半透明のテキストボックス――思わず見とれてしまう、キャンペーンサイトなどでおなじみの“派手なWebサイト”は、フルFlashが一般的だ。「Flashはよく分からないし、そもそもオーサリングツールもない」という個人サイトの制作者はあきらめるしかなかった。 パリ在住のフリーコンサルタント／Webデザイナー「Sebcreation」のWebサイトは、そんな常識を打ち破ることに挑戦している。まずはトップページを見てみよう。 おなじみのローディングアイコン、上下右左から次々とスライドしてくる半透明のテキストボックス……といったダイナミックなデザインに、「またFlashか」と思わずつぶやいてしまうかもしれない。ところがSebcreationでは、アニメーション／エフェクト処理を
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
現場でプロが培ったGoogle Analyticsの使い方
ASCII.jp － Web Professional（ウェブ・プロフェッショナル）｜デザインからマーケティングまで、Webを仕事にする人の情報サイト