2008年3月

以前紹介したWeb上で画像の加工・編集が出来る無料ツール「Picnik」が日本語化され、
有料だった機能の一部が無料にバージョンアップされていたので続報をお伝えします。

英語が得意な人もいますが、日本語だと「ホッ」としますね。
日本語になった画面のキャプチャーをいくつか紹介します。

トップページも日本語になっています。





これは画像に雪が降っているような効果を付ける機能ですが、「？」部分をクリックすると効果の内容や簡単な使い方も日本語で表示されます。

Webページをブラウザで確認しているとよくページのソースを見る事がありますが、皆さんはどのようにソースを見ているでしょうか。
普通は右クリックして「ページのソースを表示」でソースを見ますが、いつも使っているエディタで開ければそのまま編集できるのに。。。と思ったことはありませんか。
そんなときは今回紹介するアドオン（拡張機能）「View Source With」を使ってみて下さい。

この拡張機能の良いところは、日本語に対応していて、複数のエディタを設定出来たり、ソースだけでなくCSSをやJavaScript等も指定のエディタで開く事が出来るのでWeb担当者に必要な機能が充実しています。

ではインストールから利用方法までを紹介していきます。

まず「View Source With」のページでインストールします。



インストールが終わったらFireFoxを再起動して画面上で右クリックから「ソースをプログラムから開く」を選択します。




「設定」を選択します。




設定画面が開いたら一般タブから「追加」を選択します。




利用するエディタプログラムへのパスを設定し、概要を記載したらOKをクリックします。



これで設定は完了です。

見たいページで右クリックから「ソースをプログラムから開く」から先ほど設定したプログラムを選択すると指定したエディタで該当ページのソースを開く事が出来ます。




CSSやJavaScriptを指定したエディタで開くには右クリックからCSSを選択します。




該当ページで利用されているCSSファイルを選択する画面が立ち上がるので、エディタで開きたいCSSやJavaScriptを選択するとデフォルトに指定したエディタ開いてくれます。




やはりいつも使い慣れているエディタで編集したり閲覧する方が何かと便利です。
複数のエディタを設定する事ができるので、ぜひお気に入りのエディタを指定して利用してみてください。

インストールはこちらからどうぞ「View Source With」

w3cが規定したhtmlの規格「html4.01」とか「xhtml1.0」とか色々ありますよね。xhtml1.0の規格に準拠してないと後々面倒だし、チェックしなければいけない。でも、知らないわけじゃないけど正直良く覚えてない。。。しかも、いちいち本を見ながらチェックするのも面倒だし。。。そんな人居ませんか？

そんな時に便利なのがこのアドオン「HTML Validator」。htmlの規格に合わせて自動でチェックしてくれます。

インストールするとブラウザの右下に、マークが表示されます。エラーや警告がある場合、エクスクラメーションマークが表示されます。


エクスクラメーションマークにマウスを乗せるとポップアップが表示されます。ダブルクリックすると、このページのソースが開かれるわけですが、下にエラーの内容と説明、エラー部分に網掛けのハイライトで表示されます。



右下小窓の「ページの文法を修正」というボタンを押すと、自動で修正されたソースが表示されます。

Web担当者をしていると写真を見ていて良いものがあると「この配色をサイトに使ってみたい！」とついついそんな目で写真や画像を見ている事が多いのですが、実際に写真に使われている色をWebで利用しようと思うと、コードを調べたりしなければなりません。

そんなときはカラーコードであれこれ調べる前に、colr.org にアクセスしてみて下さい。

このサイトはアップロードした画像から、配色を抽出してくれたり指定したURLからそのWebサイトで利用されている配色を抽出してくれます。

簡単に抽出する事ができますので、実際にサイトを見てみましょう。

アクセスすると画像共有サイトの「flickr」の画像がランダムに表示されているので今回はそれを使ってみます。




※配色を抽出したい画像がある場合は左側の画像の下にある　「load your own」をクリックして画像をアップロードします。



まず画像の上にマウスを持ってきてみて下さい。
すると利用されている色がモザイクのように抽出されます。



個別の色のコードやRGBの割合を知りたいときは画像上の色をクリックすれば右側のコード部分にコードが表示されます。



右側にある「more」を押せばRGBの割合も表示されます。



画像の上にある「Pick a scheme from image」をクリックします。




カラーパレットが表示されます。



パレットの色にマウスを合わせると、画像のどの部分に使われている色なのかがわかります。



パレットの右側にある「＋」をクリックするとカラーパレットに色を追加する事が出来ますしtagをつけたり、「more」から「.aco形式」のファイルをクリックすればカラーパレットとしてローカル上に保存する事も出来ます。

気になる配色の画像を見つけたら、ぜひこのcolr.orgで配色を調べて下さい。

Web担当者であれば、自分のサイトがどのように見えているのかがとても気になります。
公開前にいろいろなブラウザでサイトを見たり、Macを使っている人、Linuxを使っている人に
「ちょっと見てみて」とお願いしたりしているかと思います。

今回紹介するのはそんな手間をかけずに何種類ものOSやブラウザの
Screenshot（キャプチャー）を一括で取得できるサイト「Browsershots」です。

英語のサイトなんですが、利用方法は簡単です。

サイトにアクセスしScreenshot（キャプチャー）したいサイトのURLを入力して
OSやブラウザを選択して右側にある「submit」と書かれているボタンをクリックするだけです。

※たくさんのOSとブラウザを選択するとScreenshot（キャプチャー）に時間がかかります。




WebPersonsのURLを入力してみるとチェックしたOSとブラウザの組み合わせのサムネール画像が表示されます。




各画像をクリックすると詳細を見る事が出来ます。
下の画像ではMacのOSXとSafariの組み合わせです。

OS	ブラウザ
Linux	Dillo
	Epiphany
	Firefox
	Galeon
	GranParadiso
	Iceape
	Iceweasel
	Kazehakase
	Konqueror
	Mozilla
	Navigator
	Opera
	SeaMonkey
Windows	Firefox
	Flock
	K-Meleon
	MSIE
	Navigator
	Opera
	Safari
	SeaMonkey
Mac OS	Firefox
	Safari
BSD	Epiphany
	Galeon
	Opera
	SeaMonkey

ネットサーフィンしていると偶然見たサイトがすごく綺麗で配色を参考にする事があります。

そんなときここで使われているこのパーツの色は何色なんだろ？？
なんて思うことありませんか。

そんな時どうするかといえば、画面キャプチャーをとって画像処理ソフトで開いて色を取得してとか、ソースを開いて色の数値を探して・・・なんて方法もありますが、今回紹介するアドオンを使えば、ブラウザ上でマウスオーバーするだけで色が解っちゃいます。

今回紹介するアドオンは、「ColorZilla」です。


インストールが完了すると、ブラウザウィンドウの左下にスポイトのマークが表示されます。




アドオンを使用する時はこのスポイトマークをクリックします。すると、マウスポインタが十字マークになりますので、あとは知りたい色の上に合わせるだけ。
実際に合わせてみると、下の画像のようにRGB数値や、ポインタの座標、パーツの属性などを知らせてくれます。

前回までで「ピボットテーブル」の基本的な使い方を

押さえていただいたかと思います。

 

今回は、集計したデータを「簡単に抽出する手順」を学んで行きましょう。

※以下の手順ではEXCEL2007の手順をご説明いたします。

 

通常、EXCELでデータを抽出するとしたら、フィルタ機能を

思い浮かべる人が多いかもしれませんが、

ここまでに学んできたピボットテーブルにも「レコードを抽出する」機能

「ドリルダウン」が備わっています。

 

例題）

全てのリストのうち、男性のレコードのみを抽出する。

 

手順1

ピボットテーブルを起動します。

 

 

手順2

抽出に使う集計表を作成します。

※ここでは男性を抽出するので 「行ラベル」に「性別」を入れています。

 

 

手順3

抽出しようとするセルをダブルクリック。

※今回は「男性を抽出する」ので「B5」をダブルクリックします。

 

 

完成！

 

 

上記の手順通り、抽出するセルをダブルクリックするだけで、

データの抽出作業が完了し、抽出するべきデータが別シートに表示されます。

 

手間も少なく、かつ素早い抽出が出来るこの「ドリルダウン」機能 。

一度お試し頂いてはいかがでしょうか。

 

 

ピボットテーブルについての、各エントリーはこちら

EXCEL（エクセル）でデータを集計する方法【ピボットテーブル（1）】
EXCEL（エクセル）でデータの個数を集計する方法【ピボットテーブル（2）】
EXCEL（エクセル）でデータの平均値を求める方法【ピボットテーブル（3）】
EXCEL（エクセル）でデータを抽出する方法【ピボットテーブル（4）】

 

前回は「EXCEL（エクセル）でデータの個数を集計する手順」について

ご説明しました。

 

今回は【EXCEL（エクセル）でデータの平均値を求める方法】を、

具体的に見てみましょう。

※以下の手順ではEXCEL2007の手順をご説明いたします。

 

例題） 

体重の平均値を年齢ごとに単純集計する。

 

 手順1

体重毎の平均を集計するので「Σ　値」に「体重」をドラッグ＆ドロップします。

 

 

 このままだと「データの個数」を集計していますので、

「平均」を集計するよう、設定を変更します。

 

手順2

 「Σ　値」枠内の 「データの個数/体重」をクリックします。

 

手順3

「Σ　値」枠内の 「データの個数/体重」をクリックします。

 

 

手順4

表示されるダイアログボックス内の「平均」を選択し、OKをクリックします。

 

手順5

「Σ　値」枠内と、集計表の表示が「平均/体重」に

変更されていることをご確認下さい。

 

手順6

「行ラベル」に「年齢」をドラッグ＆ドロップします。

 

手順7

「平均/体重」部分を右クリックし、表示されるメニュー内で

「値フィールドの設定」をクリックします。

 

手順8

表示されるダイアログボックスで左下の「表示形式(N)」をクリックします。

 

手順9

表示形式から「数値」を選択し、小数点以下の桁数を揃えます。

※このままだと、小数点以下が多く、見た目がそろわないためです。

 

完成！

 

 

以上で「年齢」ごとの「体重」の平均が求められます。

 

「データの個数の求め方」「データの平均値の求め方」と

順番に見てきましたが、いかがでしょうか？

 

ピボットテーブルでの集計って考える以上に簡単だと思いませんか？

集計の基本的な方法は以上ですが、利用されるデータによって、

いろいろな変化を加えて、集計の作業を簡単に終わらせてしまいましょう。

 

次回は「集計したデータを簡単に抽出する方法」を学びます。

 

ピボットテーブルについての、各エントリーはこちら

EXCEL（エクセル）でデータを集計する方法【ピボットテーブル（1）】
EXCEL（エクセル）でデータの個数を集計する方法【ピボットテーブル（2）】
EXCEL（エクセル）でデータの平均値を求める方法【ピボットテーブル（3）】
EXCEL（エクセル）でデータを抽出する方法【ピボットテーブル（4）】

 

前回は「EXCEL（エクセル）でピボットテーブル機能を使うときの最初の手順」

について簡単にご説明しました。

 

今回の【EXCEL（エクセル）でデータの個数を集計する方法】では

できあがったピボットテーブルから、データの個数を集計する方法を

具体的に見てみましょう。

※以下の手順ではEXCEL2007の手順をご説明いたします。

 

例題） 

メールアドレスの個数を年齢と都道府県別にクロス集計する

 

ピボットテーブルが下図の用に出来ているとします。

 「値」や「行ラベル・列ラベル」「レポートフィルタ」といった

枠があるのが見えると思います。

Σ　値	集計するアイテムや計算方法等を指定します。
行ラベル	行側（左側）で集計を行うアイテムを指定します。
列ラベル	列側（上側）で集計を行うアイテムを指定します。
レポートフィルタ	取得するデータを、指定したアイテムで絞り込みます。

 

ピボットテーブルは、この枠内に

「集計を行いたいアイテム（メールアドレス・性別などの項目）」を

ドラッグ＆ドロップしていくことで、集計を行います。

 

手順1

「Σ　値」に「メールアドレス」をドラッグ＆ドロップ

※データの個数を集計するためです。

    

 

手順2

「行ラベル」に「年齢」をドラッグ＆ドロップ

※年齢を行項目として集計を行います。

 

手順3

「列ラベル」に「都道府県」をドラッグ＆ドロップ

※都道府県を列項目として集計を行います。

 

 

完成！

 

 

以上で集計の作業は終了し、完成したクロス集計表が表示され、

「年齢と都道府県」ごとに「データの個数」が集計出来ました。

簡単に集計を出すことができるので一度使ってみて下さい。

次回は「EXCEL（エクセル）でデータの平均値を求める方法」に
ついてです。

 

 

ピボットテーブルについての、各エントリーはこちら

EXCEL（エクセル）でデータを集計する方法【ピボットテーブル（1）】
EXCEL（エクセル）でデータの個数を集計する方法【ピボットテーブル（2）】
EXCEL（エクセル）でデータの平均値を求める方法【ピボットテーブル（3）】
EXCEL（エクセル）でデータを抽出する方法【ピボットテーブル（4）】

 

皆さんはEXCEL上でどのようにデータを集計していますか？

【データ】→【集計】でしょうか？それとも関数を駆使していますか？

どのような形でデータの集計を行っても、かなりの手間がかかると思います。

 

実は、EXCELには「ピボットテーブル」という

集計に特化した強力な機能が有り、非常に簡単に利用できます。

「簡単でかつ高機能」な集計ツールである「ピボットテーブル」を

以下に簡単にご紹介しましょう。

 

■ピボットテーブルとは

• EXCEL上で単純・クロスの集計・比較を行う ツール

 

■ピボットテーブルの基本的特色

• 基本的にマウス操作のみでデータの集計・比較が可能
• 大量のデータであっても高速で計算が可能
• 集計した結果をいろいろな形式で比較可能
• 着目した部分を抜き出して、新しいデータテーブルを作成可能

  

早速、簡単な例を挙げて「ピボットテーブルの作成手順」を

学んでみましょう。

※以下の手順ではEXCEL2007の手順をご説明いたします。

 

例題）

以下のデータを元にピボットテーブルを作ってみる。

 

 

手順1

「集計データの入っているセル」を選択します。

 

手順2

「挿入」タブをクリックします。

 

手順3

左側「ピボットテーブル」をクリックします。

 

 

手順4

1. 「テーブルまたは範囲を選択(S)」でデータの範囲を選択します。 
2. ピボットテーブルを配置する場所を選択します。

※1　データの参照範囲が違う場合には選択をやり直して下さい。

※2　「既存のワークシート」にチェックを入れることで、

　　ピボットテーブルの作成場所を指定することも可能です。

 

 

手順5

下図のような「何も選択がされていない」ピボットテーブルができあがります。

この時点で「データの表題行」が自動的に表示されています。

現在では「何も選択がされていない」ので、左のテーブルは何もありませんが

矢印のようにデータをドラッグ&ドロップすると？

 

 

完成！

　　下図の通り、ピボットテーブルのできあがりです。

 

 

いかがでしょうか？

ピボットテーブルを始める事って、考えているほど難しくないですよね？

 

「知らない」「使ってみたいけど...」

ではあまりにももったいないですし、そもそも尻込みするほど

難しいことではないんです。

 

では、ピボットテーブルを使うことによって、何が出来るのか、

次回からはピボットテーブルの各機能について細かく見ていきます。

 

ピボットテーブルについての、各エントリーはこちら

EXCEL（エクセル）でデータを集計する方法【ピボットテーブル（1）】
EXCEL（エクセル）でデータの個数を集計する方法【ピボットテーブル（2）】
EXCEL（エクセル）でデータの平均値を求める方法【ピボットテーブル（3）】
EXCEL（エクセル）でデータを抽出する方法【ピボットテーブル（4）】