Web制作の「時短」に役立つChromeデベロッパーツールの活用法を紹介する本連載。第2回は、Webページの修正をリアルタイムで反映する「Elements」パネル、「Sources」パネルの使い方を説明します。 細かい修正の手戻りにもさくさく対応したい！ コーディングが完了したあとで、「やっぱりフォントサイズを大きくして」「下の余白をもう少し小さくして」と、クライアントやディレクターから細かい修正を求められることはよくありますよね。さらに、修正後、「やっぱり元に戻してくれる？」「もっと小さくしてできる？」と手戻りが発生し、作業時間がどんどん伸びてしまうこともあります。 どんなに確認のステップを踏んでも、この手の手戻りは完全にゼロにはできないもの。そこで、Chromeデベロッパーツールを使って、リアルタイムでページをさくさく修正する方法を説明します。 Elementsパネルの起動方法 Goo

5秒ごとに撮影して写真をアップロード １つのカメラ映像を複数端末から閲覧もできる 監視をスタートすると、5秒ごとに撮影し、写真データがクラウドに送信される。監視する側の端末で「あんしん監視カメラ」のURLにサインインすると、最新12枚の写真が表示される。タップすればやや拡大表示される。全画面表示したり、ダウンロードできないのが残念なところ。 「自動更新」をONにすると、5秒ごとに新しい写真が追加される。動画ではないが、現場の雰囲気を知るには十分だろう。「騒音通知音」をONにしておくと、現場の音量が一定以上になるとアラームが鳴る。ペットの監視だと鳴りっぱなしになってしまうが、留守中の自宅やオフィスを監視する時に活用したい。「一覧」タブでは過去の映像をチェックできる。 1つのカメラの映像を同時に複数の端末で閲覧することが可能。さらに、サインアウトしてほかのアカウントでサインインすれば、複数台の

自分で撮影した日々のスナップ写真や、旅行、学校行事などのイベント事の記録。YouTubeやニコニコ動画といった動画共有・配信サイトのコンテンツなど、スマホ／タブレットで動画や写真を見る機会はかなり多い。 自分の恋人や子供を映したものなら、やっぱり親しい人と一緒に思い出を振り返りたいと思うし、仕事終わりにビールとツマミを用意して、アニメ全話放送を一人で楽しむのも個人的には大好きだ。でも携帯端末の液晶ディスプレーじゃあ、皆で観るのは物理的に難しい。PCの前で食事をするのもちょっと。できればもうちょっと迫力も欲しい……。そこで目を付けたのがプリンストンから発売されているMiracast（ミラキャスト）端末「デジ像Miracast」（PTW-MA1）である。 Miracastとは、スマホやタブレットの画面を、Wi-Fi経由で対応したディスプレーやアダプターに伝送する技術のこと。要するに本製品は、テ

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

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

XMLやJSON(P)形式でデータを得られるWebサービス（API）がここ数年で充実し、外部のサイトのさまざまなデータを簡単に利用できるようになりました。特にJSONP（JavaScript Object Notation with Padding）形式でデータを取得できれば、サーバー側に通信プログラムを置く必要がなくなり、ユーザー（Webブラウザー）側のJavaScriptだけで通信処理をこなせるので便利です。 ただ、Webサービスによっては、XML形式でしかデータを提供していない場合もあります。そんなときには、米ヤフーが提供する「Yahoo! Pipes」の出番です。Yahoo! Pipesは複数のフィードを束ねる“フィードアグリゲーター”として知られていますが、XMLをJSONPに変換する機能もあるのです。Yahoo! Pipesを使えば、XMLしか提供していないWebサービスも、J

いまやWeb制作に欠かせなくなったJavaScript。でも、「JavaScriptはほとんど“アリモノ”で済ませている」という方も多いのでは？ そこで、WebデザイナーやマークアップエンジニアなどのWeb制作者の方向けに、いま一番人気のJavaScriptライブラリー「jQuery」の基本を学べる特別レッスンをお届けします。題して、「40分で覚えるjQuery」。要点だけにぎゅっと絞って解説しますので、手を動かしながら今すぐjQueryを始めましょう。 【0分目：導入編】 jQueryのダウンロードと利用方法 jQueryのライブラリー本体（JavaScriptファイル）は公式サイトからダウンロードし、head要素などにscript要素を書いて読み込みます。

Webサイトを制作するとき、「パフォーマンス」を気にしたことがあるだろうか？　もしまったく気にしたことがないなら、気をつけた方がいい。閲覧に時間のかかる“遅いWebサイト”はユーザーにフラストレーションを与え、閲覧をやめさせてしまう恐れがある。 下記のグラフは、「Simple-Talk」という海外のオンラインメディアで発表されたユーザー調査の結果だ。アンケートページの表示にかかる時間を意図的にコントロールし、表示時間によってユーザーが感じるフラストレーションの違いを調べたものだ。 縦軸がフラストレーション（10段階）、横軸が表示までの時間を表している。1～5秒以内にページが表示された人に比べ、ページ表示までに5秒以上かかった人は2倍以上もフラストレーションを感じている。フラストレーションがあまりに高ければ、せっかく何らかの目的を持って訪れてきたユーザーも待ち切れずにブラウザーを閉じてしまう

文字と音声を紐付けて記録できる！ 第二世代のデジタルペンPulseは、カメラ機能に加えてスピーカーとマイクまでも内蔵してしまっている。従来のデジタルペンにも増してより多くのことができるが、最も魅力的なアプリケーションは、録音データと筆記した手書き文字との同期連携処理だ。 セミナーや会議などに出席したPulseペンのユーザーは、録音機能をオンにし、講義内容を常時録音しながら、その時気付いた重要なポイントを簡潔に手書きでメモするだけでいい。録音データと手書きデータが同じペン内部のメモリーに記録されるので、両者の紐付けが簡単に実現出来るのが特徴だ。 後日、ある重要なポイントを筆記記録した時に、発言者は他にいったいどんなことをを言っていたか知りたくなったら、ノート上の筆記された場所をペン先でクリックするだけでいい。メモしたときの発言内容が即座に内蔵スピーカーからプレイバックされる。音声録音データと

15日の深夜販売を皮切りに、ついに製品が登場しはじめた次世代CPU「Nehalem」こと「Intel Core i7プロセッサー」。Core i7はどこが新しいのか？　Core i7を使うには何が必要なのか？　お馴染み“10の疑問”形式で解説しよう！ Coreアーキテクチャー＋新アーキテクチャーの 新世代CPU Q1　そもそも「Core i7」って何？ A1　新しいアーキテクチャーを備えたインテルの最新CPUのこと。「コア アイ セブン」と読む。将来的には、現行のパソコン用CPU「Core 2 Duo／Quad」シリーズや、サーバー向けCPU「Xeon」を置き換える予定。「Nehalem」（ネハレム）とは、Core i7のアーキテクチャーに対するコード名。 現在のCore 2 Duo／Quadは、1993年に登場した「Pentium」で構築された「CPU～チップセット～メモリー」の基本構成

4月30日、マイクロソフトは次世代WindowsクライアントOS「Windows 7」の製品候補版（RC版）を、MSDN、TechNet会員など開発者・テスター向けに公開した。RC版はその名のとおり、最終的な製品版の完成に向けて、多くの開発者やテスター、パートナー企業などに幅広くテストしてもらうためのバージョンだ。そのため、Windows 7のほとんどの機能が実装され、パフォーマンス面でも製品に近いものとなっている。いよいよWindows 7の完成が近づいたというわけだ。 日本では5月7日から一般ユーザー向けにもRC版の公開が予定されているが、ASCII.jpではそれに先立ち、Windows 7 RC版を画面で紹介する大ビジュアルツアーを作成した。Windows Vistaをすでに使っている人も、Windows XPを使い様子見を続けていた人も、期待の新Windowsの姿をとくとご覧あれ！

初心者から上級者まで、今使うべきアドオン50を徹底紹介 次世代ブラウザー、Firefoxの魅力は快適な動作速度（関連記事）だけではなく、ユーザーの好みに合わせて機能を拡張できる「アドオン」の存在だ。とはいえ5000以上もあふれるアドオンの海から自分に合ったものを選ぶのは至難のワザ。まずは鉄板の定番アドオンを導入し、そこから自分仕様にカスタマイズしていきたい。 そこで今回は使用シーンに合わせ、筆者が勧める50のアドオンを徹底的に紹介。インストールしたばかりのFirefox初心者はもちろん、Greasemonkey（グリースモンキー、詳しくは後述）を使いこなしている上級者にもぜひ使ってもらいたいものを集めてきた。

本連載では、竹島愼一郎氏が提唱するインパクト抜群の「1枚企画書」をPowerPointで作る手順を全5回で紹介します。社会人になったらWordやExcelだけでなくPowerPointも使いこなせなくては、社内や取引先でのプレゼンに勝ち抜けません。しかし、ただ単に企画書をPowerPointで再現しただけでは、印象に残るプレゼンにはほど遠く、居眠りを誘う会議になってしまうことでしょう。 「1枚企画書」の最終回として、本書が出版に至った企画書の実例を含む、「プレゼン力の高い企画書」を3種類ご紹介します。実際の成功事例を踏まえてPowerPointをフル活用すれば、皆さんの仕事もきっと成功に近づくはずです。 ※本記事は「ビジネス極意シリーズ パワポで極める1枚企画書」から一部抜粋し、編集・再構成したものです。 Table of Contents プレ企画書1――飽和市場の「新商品企画書」 ■

マンネリ化した方法でExcelを使っていないでしょうか。実はもっと簡単で手早くできる技があるのです。使わないなんてもったいない。アナタの知らない「新」Excel技大特集！　第1回は、手間を省いて操作をすばやく！　今すぐ役立つ厳選早技15を紹介します。面倒な入力や編集作業をどんどん片づく！ 驚きのExcel 超早業ベスト15――インデックス 技1――表の早技　表の見出しを除いて列幅を自動調整 技2――入力の早技　支店名をいつも決まった順番でオートフィル入力 技3――入力の早技　「＝」の代わりに「＋」キーで式を入力 技4――入力の早技　セルを組み合わせて思いどおりに連続データを入力 技5――入力の早技　ながーい連番を一発入力 技6――編集の早技　ツールバーの［下線］ボタンで二重下線を引く 技7――表の早技　基本の行列入れ替えはボタンで 技8――表の早技　多様な罫線を使った複雑な表は「罫線なし」

「Webサイトを作るときに本当によく使う機能を、自分で作らずにさくっと実装したい」――。そんなワガママな願望をかなえてくれる JavaScriptライブラリが登場した。ミツエーリンクスが今月オープンソースとして公開した「MJL（MITSUE-LINKS JavaScript Library）」は、Webサイト制作に必須の“最小限の機能”に絞ったJavaScriptライブラリだ。 昨今相次いで公開されている、リッチなUIを実現するJavaScript/Ajaxライブラリとは異なり、MJLの機能はとてもシンプルだ。もともとWeb制作会社であるミツエーリンクスが「自社標準ライブラリ」として作成したものだけあって、汎用性・実用性を重視したライブラリになっている。 具体的な機能は以下の6つ。確かにどれもよく使いそうなものばかりだ。 画像のロールオーバー Flashオブジェクト埋め込みの機能拡張 新規

本格的なWebデザインに取り掛かる前に作るプロトタイプ。特に受託サイトの制作やチームで制作する場合にはある程度きっちり作っておきたいものだが、「なかなかちょうどいい作成ツールがない」という人も少なくないのではないだろうか。 FireworksやillustratorからVisio、PowerPointまで、プロトタイプの制作に使えるツールはいろいろあるが、今回は無償で使える便利な専用ツールを紹介しよう。それが、オープンソースの「Pencil」だ。Firefox 3のプラグインとして動作するものだが、実際の使い勝手としては独立したアプリケーションのように動く。 使い方は簡単だ。インストールが済むと、Firefoxの[ツール]に[Pencil Sketching]という項目が追加される。Pencilの起動はここをクリックしよう。 プロトタイプを作るための基本操作は、左側に並んでいるGUI部品を

気持ちはドシドシ、現実はポツポツ仮想化 すべてのブレードにCentOSとVMwareのインストールを機械になった気分で10回繰り返し、環境を構築した。一応、VMwareをこんな風に使おうとか、パーミッションはこうしようといった事を決めた上で運用にあたりたかったのだが、新社屋に運ばれつつある、PCサーバの筐体の山を排除しなければ、マシンルームが 秋葉原ラジオセンター級の細密充填構造 になってしまう。仮想化を阻害する全ての要因は実力をもって排除、仮想化を最優先事項として、少なくとも気持ち的には「ドシドシ」行うこととした。 Windowsサーバ系は、VMwareからリリースされているVMware Converterというツールを使うことで、比較的簡単に仮想マシンのファイルを作成することができる。多少の時間とHDDの空き領域は必要なものの、待っていればできるのはありがたい。作成された仮想マシンのフ

明日11日、いよいよ日本でiPhoneが発売される。6月9日に米国で開催されたアップル開発者会議でiPhone 3Gが発表されて以来、連日のようにiPhone関連のニュースがメディアをにぎわせた。買おうかどうか迷っている人も多いだろう。 一体、iPhoneのどこがすごいのか。他の携帯電話と何が違うのか。発売前に、iPhone 3Gの実機を手に入れることができたので、実際に使ってみた使用感をレポートしよう。 通話 iPhoneの通話スタイルは3通り まずは最も基本となる、電話としての使い勝手を見てみよう。iPhoneの通話スタイルは、耳に当てる、付属のマイク付きヘッドホンを使う、iPhone内蔵スピーカーを使う──の3通り。普通の携帯電話とデザインが明らかに異なるが、実際に耳に当ててみるとそれほど違和感はない。通話時に声を拾うマイクは、iPhone下部および付属のヘッドホンのケーブル途中にあ

「こんな長いWebページ、まったく読む気がしない」。Webサイトを閲覧していてこんな経験をしたことは誰しもあるのではないだろうか。一方で、Webサイトを作る側にとっては、どこまでを1ページにまとめるかは常に悩むところだと思う。長いからといってむやみにページが分割されているのも考えもので、今度は「次のページへ」ボタンをクリックするのが面倒になり、ストレスがたまる。 CogniTom Academic Designが作った「bookreader.js」は、そんな悩みを解決してくれるかもしれない。bookreaderは、本や雑誌をめくるような感覚で、Webページの本文を横にスクロールさせるJavaScriptライブラリだ。 「bookreader.js」のWebサイト。サイト自体がbookreader.jsを使ったデモサイトを兼ねている。中央にある [<] [>] をクリックすると1ページずつ、