これはイイ表情だ！　全体がちゃんと撮れてる！　さぁ、この写真で……と思ったら、背景にジャマなものが映っているじゃないか!!　「フォトショでさ、チャチャっと消しちゃってね」とポンと肩を叩かれても……。大丈夫です！　Photoshop CS5から搭載された、いわゆる「コンテンツに応じる」系のテクニックで、ジャマものは一気に消し去れます。 以下はそのムービー。 左上の作業画面にある背景に注目してください。真ん中下は、作業中のキーボード操作画面。作業を高速化するため、マウスを使わないようにショートカットも多用してします。ほとんど待ち時間ですね…… 壁にあった落書きがキレイさっぱり消えて、いい感じに使える写真になりました。 昔のPhotoshpでは、［スタンプツール］で地道に修正してなじませる作業が必要でしたが、CS5やCS6では［塗りつぶし］の「コンテンツに応じる」で、不要な部分を一気に、自然に、

デジタルマーケティングやWebアプリの企画開発を手がけるtadashikuのメンバーが、いま話題のサイトをピックアップ。UIやフロントエンドの技術を中心に、サイトの裏側に迫ります。 アディダスが立ち上げた、フットボール向けシューズブランド「predator lethal zones」のキャンペーンサイト「predator lethal zones」。このスマートフォンサイト、操作感がたまらなく気持ちいいです。ついつい、細部まで見てしまう、商品が欲しくなってしまうサイトです。なにがそんなに気持ちいいのか、UIに注目してみましょう。

本連載で紹介したレスポンシブWebデザインの基礎に加えて、画像や動画のレスポンシブ対応、パフォーマンス改善といった商用サイト構築のノウハウを大幅に加筆。さらに、解像度に依存しないレスポンシブWebデザインの考え方やスマートテレビ対応などの応用テクも盛り込みました。 レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック 定価：2,625円 (本体2,500円)／形態：B5変 (232ページ) ISBN：978-4-04-886323-0 前回までで幅320pxの画面を基準としたCSSが完成しました。今回は、タブレットやデスクトップなどの大きなスクリーンでも閲覧しやすいように、メディアクエリーを使ってCSSを切り替えるようにします。また、大画面用のレイアウトのためにグリッドデザインの考え方も導入します。 レスポンシブWebデザインでは、「メディアクエリー」を使って画面幅に応じ

企業がSNSを有効に活用していくための、SNSのコンセプトの考え方、既存サイトとSNSの位置づけにについて前回お話しました。今回は、SNSを導入、運用していくための企業としての方針の作り方、ノウハウを紹介します。 「投稿するネタが続かない」。企業SNSを運用するサイトマスターの方から私がよくいただくのが、こんな相談です。ネタにつまると、ネタ探しに時間を取られて、ただでさえ負担の多いSNS運用が、ますます大変になっていきます。 しかし、「ネタが続かない」と言う前に考えるべきは、SNSの運用方針でしょう。方針がしっかりしていないから、ネタに困るわけです。そこで、ネタに困る前に取り組みたい、企業SNSの運用方針の立て方について考えてみましょう。 企業SNSには「企業の顔」が必要 企業SNSは「企業が顧客と接触する場」ですから、「どのようなときに、どのような対応をするか」をきめ細かく決めておかなく

スマートフォンやタブレット、PCなどあらゆるデバイスに対応する制作手法として注目されている「レスポンシブWebデザイン」。レスポンシブWebデザインの概念からサイト制作の基本まで、レスポンシブWebデザインによる制作案件を数多くこなす菊池 崇氏が解説します。（編集部） 本連載で紹介したレスポンシブWebデザインの基礎に加えて、画像や動画のレスポンシブ対応、パフォーマンス改善といった商用サイト構築のノウハウを大幅に加筆。さらに、解像度に依存しないレスポンシブWebデザインの考え方やスマートテレビ対応などの応用テクも盛り込みました。 レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック 定価：2,625円 (本体2,500円)／形態：B5変 (232ページ) ISBN：978-4-04-886323-0 レスポンシブWebデザイン（Responsive Web Design）

アップルが、Mac用最新OS、「OS X Mountain Lion」を今夏リリースすると発表した（Mac App Store経由のみで提供）。現バージョンの「OS X Lion」から、わずか1年足らずのメジャーアップデートながら、搭載される新機能は100以上にのぼる。 アップルは、現バージョンOS X Lionから、iPad／iPhoneなどiOS機器における操作の特徴を取り入れ始め、OS X Mountain Lionでそれをさらに押し進める。iCloud連携も大幅に強化しているのだ。 同時に、世界的に勢いのあるMacを中国市場でも本格的に展開する模様で、中国独自のインターネットサービスとの連携も強化されている。 1年足らずでのメジャーアップデート アップルは突如、Mac用新OSの「OS X Mountain Lion」を発表した。実際のリリースは夏頃の予定だが、一時は2年に一度ほどだ

2012年02月09日　13時58分更新 文●斉藤祐也／<a href="http://css.studiomohawk.com/">CSS Radar</a> 最近のWebサイトは大規模傾向にあり、Webアプリケーションを構築する機会も増えてきました。jQueryやMooToolsなど、JavaScriptを手軽に利用できるようにするライブラリーが普及する一方、Webサイトの表示を担うCSSにも、「Blueprint」や「960 Grid System」に代表されるフレームワークが登場しています。 「LESS」や「Sass」のようなCSS拡張メタ言語は、こうしたフレームワークとは異なり、CSSの言語自体を拡張し、CSSには存在しない機能を追加するものです。CSS拡張メタ言語を利用することで、変数、ミックスイン、入れ子ルール、名前空間、四則演算、関数などの動的な処理をCSSに追加でき、CS

iPhone 4Sの発売と同時にiOSがバージョンアップされ、「iOS 5」になりました。iOS 5の新機能といえばiCloudとの連携が有名ですが、WebブラウザーのSafariも改良され、コンパスの値をリアルタイムで取得する機能と、並列処理を実行できる「Web Workers」が追加されました（Web Workersについては本連載の第42回「JavaScriptで並列処理ができるWeb Workers」を参照してください）。 今回はコンパスの値をリアルタイムで取得する機能を使って、iPhone/iPadの方角に合わせた画像を表示する「パノラマビュー」アプリを作ってみましょう。1枚の画像を表示し、方角に合わせて位置をずらすだけのシンプルなアプリですが、観光地や室内の様子などを見せたい場合にはよいでしょう。 また、アプリのUIには、正式版がようやくリリースされた「jQuery Mobil

HTMLやCSS、JavaScriptでスマートフォンアプリを開発できるフレームワーク「PhoneGap」。PhoneGapでは、通常のWebアプリでは実現できない、スマートフォンならではの機能を使ったアプリも作れます。今回は、iPhone用のボイスレコーダーアプリを作ってみましょう。 PhoneGapで音声を録音するには、W3Cで仕様策定中のCapture APIと、Phone Gap独自のMedia APIの2つの方法があります。Capture APIを使うと専用のUIに切り替わりるので、JavaScriptでは録音と再生しか処理できません。一方、Media APIでは、通常のWebページの中に録音・再生機能を埋め込んでアプリを作れます（ただし、現行バージョンではまれに録音が途切れることがあります）。今回は、Media APIを採用します。 なお、録音処理はiOSシミュレーターでは動作

HTMLやCSS、JavaScriptでスマートフォンアプリを開発できるフレームワーク「PhoneGap」。今回はPhoneGapを使って、iPhone用の動画アルバムアプリを作成します。 以前紹介したフレームワーク「NimbleKit」では動画を扱うための専用のAPIが用意されていましたが、PhoneGapにはありません※1。そこで、PhoneGapではHTML5 Videoを使って動画を再生します。HTML5 Videoの仕様やiPhone/iPadの制約を受けるので、動画を扱う場合はNimbleKitのほうが手軽かもしれません。 今回は上記のNimbleKitの連載で使用した動画ファイルを流用し、サムネイルリストをタップすると動画を再生するだけのシンプルなアプリを作ります。なお、iPhone/iPadでは動画の再生方法が異なるので、iPhoneをメインに解説します。 PhoneGap

この連載が本になりました！ 「HTML5タグの誤用で恥をかいた」「分厚い仕様書は読み切れない」コーダー＆デザイナーのためのコーディングガイド。最終草案に対応したほか、商用サイトを意識したコーディング例を新たに書き下ろし。HTML5マークアップへ移行するために必要な知識を効率よく学べる1冊です。ネットで話題の「HTML5カルタ」付き! HTML5マークアップ 現場で使える最短攻略ガイド 定価：2,808円 （本体2,600円）／形態：B5変 (240ページ) ISBN：978-4-04-866070-9 HTML5と従来のHTML4.01やXHTML1.0との違いは、既存のサイトをHTML5化してみると理解しやすいでしょう。今回は、実在するWebサイトをHTML5に（勝手に）リニューアルしながら、HTML 4.01やXHTML 1.0との違いを解説します。ソースコードだけをリニューアルするこ

ECサイトの運営には、企業サイトなどにはない在庫管理（Web上と実際の在庫の連動）や物流業務などが含まれます。稼働しているECサイトの運営を制作会社で受託するときには、サイトに掲載する商品データの制作や注文対応、在庫管理・配送、プロモーション、カスタマーサポートなど業務が多岐にわたることから、クライアントとの業務分担や責任範囲を明確にする必要があります。 商品ページ制作から在庫管理・配送まで ECサイトの運営で発生する基本的な業務を、商品の仕入れ後から注文までの流れに沿って説明します。 商品を仕入れると、Webサイトに掲載するための商品データを作成します。商品撮影、商品の説明文や商品サイズなどの商品に応じたデータを作成し、価格を設定して掲載します。 ユーザーからの商品の注文が入ると、注文内容の確認、配送担当者への配送依頼などの注文対応指示を出します。 在庫管理・配送では、注文対応指示に基づ

ローソン、無印良品、テレビ朝日など、国内でもHTML5で企業サイトを制作する事例が増えてきました。今すぐではないにせよ、「次のリニューアルはHTML5で制作したい」と考えるWeb制作者も少なくないでしょう。本連載では、「XHTML 1.0/HTML 4.01からの移行」をテーマに、HTML5マークアップの基本から実務で使用するポイントまで、ライブドアのマークアップエンジニア　浜 俊太朗さんが解説します。（編集部） 「HTML5タグの誤用で恥をかいた」「分厚い仕様書は読み切れない」コーダー＆デザイナーのためのコーディングガイド。最終草案に対応したほか、商用サイトを意識したコーディング例を新たに書き下ろし。HTML5マークアップへ移行するために必要な知識を効率よく学べる1冊です。ネットで話題の「HTML5カルタ」付き! HTML5マークアップ 現場で使える最短攻略ガイド 定価：2,808円 （

HTMLやCSS、JavaScriptといったWebの技術でスマートフォン用のアプリを開発できるモバイルフレームワークが注目されています。本連載でもこれまで、Web技術を使ってiOS向けのアプリを開発できる「NimbleKit」を紹介してきましたが、他にも以下のような同様のモバイルフレームワークがあります。 スマートフォン向けのアプリケーション開発フレームワーク Titanium http://www.appcelerator.com/ PhoneGap http://www.phonegap.com/ NimbleKit (iPhone専用) http://www.nimblekit.com/ JSWaffle (Android専用) http://d.aoikujira.com/jsWaffle/wiki/ 今回から数回にわたって、「PhoneGap」を使ったiPhone/iPad向け

HTML/CSS+JavaScriptでiPhone/iPadアプリを開発できるNimbleKit。前回まではNimbleKit独自のAPIを使ってアプリを開発する方法を紹介してきましたが、NimbleKitを使うとHTML/CSS+JavaScriptで作ったWebアプリケーションもiOSアプリとしてパッケージ化できます。NimbleKit編の最終回は、HTML5 Canvasを使ったお絵かきツール「シンプルペイント」をiPhoneアプリに変換する方法を紹介します。 シンプルペイントはPCのブラウザー向けに作ったWebアプリですので、iPhone/NimbleKitでは実装が難しい機能もあります。そこでiPhoneアプリにするにあたって、以下の点を変更します。 iPhoneの画面サイズに合わせてCanvasの描画領域を調整 ブラシサイズは固定 ブラシのカラーはNimbleKitのスライダ

Expressは雛型として扱うテンプレートエンジンを選択できます。デフォルトのテンプレートエンジンは「jade」です。jadeは以下のようにしてインストールします。 $ npm install jade jadeはXML形式でなく、インデント形式で記述します。jade以外にも、EJSやCoffeeKup、Hamlなどのテンプレートがありますので、好みで選びましょう。HTML形式で書きたい場合はEJSを選択するとよいでしょう。 Expressとjadeをインストールしたら、実際にWebアプリの雛形を作ってみましょう。 $express sample create : sample create : sample/app.js create : sample/logs create : sample/pids create : sample/public/images create : sam

再生したい動画ファイルを用意し、1つのフォルダにまとめておきます。今回はQuickTime形式／H.264コーデックの動画を用意し、movieフォルダに入れました。 Xcodeで新規プロジェクトを作成し、動画ファイルが入っているフォルダをプロジェクトウィンドウ内のResourcesフォルダにドラッグ＆ドロップで追加します。 NimbleKitでは、NKVideoPlayerクラスを使って動画を再生します。newでNKVideoPlayerオブジェクトを生成します。 var video = new NKVideoPlayer(); 次に、openFileName()メソッドで再生する動画ファイルを指定します。引数に動画ファイルのパスを指定します。 video.openFileName("movie/lake.mov"); openFileName()で指定できるのはアプリのパッケージ内に配置

スマートフォンの普及を背景に、「レスポンシブWebデザイン」（Responsive Web Design）という制作手法が海外で注目を集めている。レスポンシブWebデザインとはどのようなアプローチなのか？　実例で解説する。 ウィンドウサイズを基準にデザインを調整 レスポンシブWebデザインとは、デバイスごとに複数のデザインを用意するのではなく、ブラウザーのウィンドウサイズに合わせてデザインをフレキシブルに調整する制作手法だ。モバイルサイトの制作では、デバイスやスクリーンサイズごとにページを振り分ける方法が一般的だが、レスポンシブWebデザインではHTMLはそのままに、CSS3のメディアクエリーを利用してスタイルシートだけでデザインを変更する。 レスポンシブWebデザインは、2010年5月、米国のイーサン・マルコッテ氏によって提唱され、海外では企業サイトを含む多くのWebサイトで採用されてい

「jQuery Mobile」は、モバイルWebアプリケーションやスマートフォンサイトの構築でいまもっとも注目されているフレームワークです。jQuery Mobileを使えば、iPhone/Androidをはじめ、さまざまなスマートフォンのブラウザーに対応したスマートフォンサイトを手軽に制作できます。 jQuery Mobileを使ったスマホサイト制作の基本から実践的なテクニックまで、ベストセラー「Web制作の現場で使う jQueryデザイン入門」（Web Professional Books）の著者・西畑一馬さんが解説します。（編集部） 「jQuery Mobile」は、モバイルWebアプリケーションやスマートフォンサイトの構築でいまもっとも注目されているフレームワークです。jQuery Mobileを使えば、iPhone/Androidをはじめ、さまざまなスマートフォンのブラウザーに対

普段はDTMで曲を作っているボカロPが、バンドを組んでステージに上がる。そんな画期的なイベント「ドキッ☆　ボカロ曲だらけの生ライブ　〜Pもあるよ〜」（略してドキ生）が、7月16日・17日の第8回開催をもって最終回を迎える。 2009年5月から現在までに計7回。「ドキ生アコースティック」と銘打った小規模編成のライブも計3回行なわれてきた。その間、このイベントがボカロシーンにもたらしたものは大きい。ボカロPには人前に立って演奏する面白さを提供し、またボカロファンにはさまざまなアレンジで演奏する生バンドの楽しみ方、ライブという場の面白さを教えた。 今では同様のイベントも増えてきたが、ドキ生はアマチュアのイベントながら回を重ねるごとにグレードアップし、Pやファンの支持も厚かった。そんなイベントが、このタイミングでなぜ終わってしまうのか。ドキ生の主催者である、アカサコフ（にいとP）に話を聞いた。 第