SVG線画が美しいリッチアニメーションの作り方 (1/2)
ページ遷移が楽しい繊細で滑らかな動き CSS3を使った滑らかな動きと大胆なタイポグラフィが魅力的な「Beatrice Creations」。黒と白を基調とした至ってシンプルなデザインながら、つい全ページを見てみたくなる、飽きのこない演出が施されている。 Béatrice Créationsでは、複数ある作品のロゴにSVGが使われており、作品ページを移動するたびに美しいカーブを描く。軽量で、枠線や線画によって繊細でリッチな世界観を演出する、今注目のSVGアニメーションを有効に活かしたサイトだ。 今回はこのサイトをヒントに、SVGの基本と、CSS3アニメーションを使った動かし方を解説する。CSSとHTMLのみで次のような枠線とテキストを描き、最終的にはjQueryを使って色を変えるデモを制作する。 STEP 1：SVGのパスを作成する アニメーションを作る前に、Illustratorを使って素
レスポンシブWebデザインとは (1/5)
スマートフォンやタブレット、PCなどあらゆるデバイスに対応する制作手法として注目されている「レスポンシブWebデザイン」。レスポンシブWebデザインの概念からサイト制作の基本まで、レスポンシブWebデザインによる制作案件を数多くこなす菊池 崇氏が解説します。（編集部） 本連載で紹介したレスポンシブWebデザインの基礎に加えて、画像や動画のレスポンシブ対応、パフォーマンス改善といった商用サイト構築のノウハウを大幅に加筆。さらに、解像度に依存しないレスポンシブWebデザインの考え方やスマートテレビ対応などの応用テクも盛り込みました。 レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック 定価：2,625円 (本体2,500円)／形態：B5変 (232ページ) ISBN：978-4-04-886323-0 レスポンシブWebデザイン（Responsive Web Design）
PhoneGapでiPhoneのカメラアプリを作ろう (1/5)
HTMLやCSS、JavaScriptといったWeb技術でスマートフォンアプリを開発できるフレームワーク「PhoneGap」。今回は、PhoneGapでiPhoneのカメラ機能を使う方法を紹介します。 PhoneGapのカメラ機能は非常にシンプルで、背面のメインカメラで撮影するだけですが（カメラの切り替えはできない）、撮影した画像データはJavaScriptで自由に処理できます。画像をCanvasに描画して特殊効果（エフェクト）を施せば、ちょっとした加工機能付きのカメラアプリも作れます。 今回は、撮影した写真をページ内に次々と追加するアプリを作成してみましょう。今回のサンプルはカメラ機能を使うので、iOSシミュレータでは動作しません。また、カメラ機能がない初代iPadではエラーになり、動作しません。 Capture APIとCamera API 最近のPhoneGapでは、W3Cで仕様策定
jQuery Mobileを使った国内スマホサイトまとめ (1/3)
jQuery Mobileの採用が国内でも進んでいる。jQuery Mobileは、iPhone/Android、WindowsPhoneやBlackBerryなど、主要なスマートフォンに対応したUIフレームワーク。HTMLに簡単な記述を追加するだけで、スマートフォンに最適化したサイトやWebアプリケーションを制作できる、注目のフレームワークだ。 昨年11月には、待望の「jQuery Mobile 1.0」正式版がリリースされ、実務でも本格的に利用しやすくなった。今後、ますます増えそうなjQuery Mobileを使ったスマートフォンサイトの事例をチェックしておこう。 ※商品紹介／キャンペーンサイトに、「太鼓の達人学園（太鼓の達人×AKB48キャンペーンサイト）」を追加しました。（2012年3月1日16時更新） ※ネットサービスに、「一休.com」「recbike」を追加しました。（201
Dreamweaver CS5.5でスマホアプリ作ってみた (1/3)
たった1年で新バージョンの登場となったDreamweaver（関連記事）。5月下旬発売の「Dreamweaver CS5.5」はCS5からのアップグレードでも1万5750円という価格設定に驚かされる。だが、ベータ版を触って価格以上に驚いたのがスマートフォン対応機能の“本気度”だ。 Dreamweaver CS5.5では、オープンソースのJavaScriptフレームワーク「jQuery Mobile」をテンプレート的に利用することで、iPhoneやAndroidに最適化されたスマートフォンサイトをわずか数ステップで作れてしまう。jQuery Mobileは、iPhone/Android/Windows Phone/BlackBerryなどで利用できるクロスプラットフォーム設計のフレームワーク。以下のようなシンプルなスマートフォンサイトなら、PhotoshopもFireworksも使わず、Dr
ビジョン駆動のデザイン (1/3)
ユーザー中心のデザイン 米国コンピューター学会（ACM）のSIGCHI※1に代表されるヒューマン・インターフェース研究の分野では、それまでの技術主導のデザインに対する反動として、ユーザー中心のデザイン（User-Centered Design）の重要性が強調されるようになってきた。ユーザーの行動を観察分析し、ユーザーの立場に立ってシステム設計を行い、その初期の段階からモックアップやプロトタイプを用いてユーザーのフィードバックを集めるアプローチである。 ※1 米国コンピューター学会（Association for Computing Machinery）の分科会にあたるSIGCHI（Special Interest Group on Computer-Human Interaction）は、世界最大のヒューマン–コンピューター・インターフェース（HCI）研究団体のひとつ。 プロダクトデザイン
jQuery Mobileとは――スマホ時代の到来とWeb制作 (1/3)
「jQuery Mobile」は、モバイルWebアプリケーションやスマートフォンサイトの構築でいまもっとも注目されているフレームワークです。jQuery Mobileを使えば、iPhone/Androidをはじめ、さまざまなスマートフォンのブラウザーに対応したスマートフォンサイトを手軽に制作できます。 jQuery Mobileを使ったスマホサイト制作の基本から実践的なテクニックまで、ベストセラー「Web制作の現場で使う jQueryデザイン入門」（Web Professional Books）の著者・西畑一馬さんが解説します。（編集部） 「jQuery Mobile」は、モバイルWebアプリケーションやスマートフォンサイトの構築でいまもっとも注目されているフレームワークです。jQuery Mobileを使えば、iPhone/Androidをはじめ、さまざまなスマートフォンのブラウザーに対
実は重要！ よくわかる電子書籍フォーマット規格!! (1/4)
一口に「電子書籍」といっても、実はそのフォーマット（データ形式）によってさまざまな種類が存在する。そのため、気に入った電子書籍を読む前に、その本がどのフォーマットのものなのか把握して、サポートしている閲覧用ソフト（あるいはハードウェア）を手に入れなければならない。いわば、VHS対ベータ、Blu-ray対HD DVDのような規格争いが電子書籍においても繰り返されており、主流となりそうなフォーマットはどれか、ある程度気に留めておく必要があるのだ。 ユーザーとしては悩ましいところだが、閲覧用端末を数多く売りたいメーカーの思惑、不正コピーは避けたいがより多く流通させたい出版社の本音、場所や時間を気にせず紙同様に楽しみたい消費者の心情、その狭間で落とし所を見つけようという努力の結果が、フォーマットとしての電子書籍だといえる。 電子書籍フォーマットは、いくつかの基準により分類できる。その分類を把握した
HTML5/CSS3で作るスマートフォンサイトの基本 (1/5)
スマートフォンサイトのサイト設計、画面設計に続き、今回はデザインとHTML/CSSの制作です。前回作成したワイヤーフレームをもとにデザインカンプを作成し、HTML/CSSをコーディングしていきます。 Photoshopでデザインカンプを作成する 最初に、グラフィックソフトを利用してデザインカンプを作成します。今回はPhotoshop CS5を使いましたが、FireworksやIllustratorなど使い慣れたツールで構いません。 デザインにあたっては、スマートフォンのブラウザーの画面領域を定義したテンプレートを用意してからデザインパーツを作成、配置していきます。画面領域はサイズを測ってガイドを引いてもよいですが、本連載の第5回で紹介したデザインテンプレートを利用するのが手軽です。
MacBook Proでデュアルモニター「基本のキ」 (1/2)
13インチMacBook Proといえば、均整なアルミのボディーに、デジタルライフを楽しむための機能をギュっと詰め込んだプロダクト。国内でも人気が高くて、「初めてのMac」として選ぶ人も多いです（Apple Storeで見る）。 本連載「目指せ快適！ MacBook Pro長期レビュー」では、本体の見所や併せて使うと便利な周辺機器、覚えておくと便利なソフトの設定方法など、MacBook Proをより楽しく使うための情報を提供していきます（連載の目次）。 13インチであることの強みは、コンパクトで持ち運びやすいこと。しかし一方で、その小ささがダイナミックさを損ねることも……。そう、DVDを大迫力で楽しみたいといった用途には適さないのだ。 MacBook Proユーザーといえど、ときには大画面を楽しみたい!! というわけで、今回は外部ディスプレーへの出力を可能にする「Apple Mini Di
YUREXをWindows 7のセンサーに大改造だっ！ (1/8)
昨年末、突如として「定価の92％引き」が発表された、世界初のビンボーゆすり計測器「YUREX」（ユレックス）。ウルトラシュールなこのガジェットを単なるビンボーゆすりカウンターとして使うだけではもったいなすぎる！ ということで、話題のWindows 7やSilverlightを使った“開発者的楽しみ方”をカヤックの本間哲平さんがこってり伝授しちゃいます！ （編集部） みなさん、Windows 7使ってますか？ 僕は手持ちのマシン5台中3台をWindows 7にしました。きれいにまとまるタスクバーが、ついついウィンドウをたくさん開いてしまう派の僕にはありがたいですね。 ところでWindows 7から搭載された新機能に「Windows Sensor and Location プラットフォーム」というのがありますが、知っていますか？ 簡単に言うと、「センサーを簡単に扱える共通基盤をOSが用意してく
WordPressがTwitterふうのライフストリームに！ (2/2)
個別のページではなく、テンプレートに以下のタグを追加すれば、サイドバーなどのサイトの一部にライフストリームを出力できます。 <?php lifestream(); ?> たとえば、WordPressの標準テーマを使っている場合、サイドバー用のテンプレートに以下のタグを追加すればよいでしょう。 <li><h2>Lifestream</h2> <?php lifestream(); ?> </li> Lifestreamプラグインをさらに使いこなす Lifestreamプラグインの詳しい解説は、以下のWebサイトにあります。カスタマイズを楽しみたい場合は参考にしてください。 http://www.ibegin.com/labs/wp-lifestream/ なお、Lifestreamプラグインは海外製のプラグインなので、残念ながら日本のWebサービス（「はてな」や「livedoor Blog」
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
