vol.31 ajaxでページを快適なものに（前編）
こんにちは。Webエンジニアの毛利です。
Webページにjavascriptの機能を実装することが多くなっています。
今回は意外と身近なサービスで、それと知らずに使っている「ajax」について
解説します。
ajax「エイジャックス」とは
「a」……Asynchronous（非同期）
「ja」……javascript
「x」……XML
これらの頭文字を取った「ajax」です。
簡単に言うと、画面の切り替えを行わずにサーバーとの通信を実現した
Webアプリケーションの総称です。
ajaxはjavascriptの機能を使って実現します。
「非同期通信」という通信方法で、サーバーと通信をしています。
身近なサービスでたとえるならば「Google Map」です。
画面上で地図をスクロール、拡大したとき、
その動きに合わせて地図の情報を読み込んでいます。
ユーザーの操作に合わせてリアルタイムに情報を取得しています。
実はこの「ajax」というものは、技術的には新しいものではありません。
先ほど例にあげた「Google Map」は注目されるようになったきっかけのひとつとなっています。
javaやFlashを使うこと無く、HTML+CSS+javascriptのみで
ユーザーの操作に対して、リアルタイムで情報を取得し、
表示する方法がとても画期的で、注目されるようになりました。
最近では「ajax」をつかったサービスは身近にたくさんあります。
「同期通信」と「非同期通信」
ajaxは非同期通信でサーバーとやりとりをします。
では、非同期通信とは何でしょうか？
対となる同期通信と比較してみます。
同期通信
サーバーにリクエストを送信する（Google Mapを移動したり拡大するなど）とき、
画面の切り替えをします。
リクエストに対して、サーバーから応答がないかぎり、画面が表示しないため
ユーザーは操作することができません。
また、たとえ見た目が同じようなページでも、
ページを構成するファイルをもう一度取得するように指令をだします。
リクエストに関係ないファイルとのやりとりが発生してしまうため、
サーバーとの通信量が多くなります。
非同期通信
サーバーにリクエストを送信するとき、画面を移動せずに通信します。
画面全体を更新しないため、サーバーからリクエストを待っている間も画面操作をすることができます。
リクエストに関係のある必要な通信のみを行うため、サーバーとの通信量が減ります。
ajaxは「非同期通信」
ajaxは「非同期通信」でサーバーとファイルのやりとりします。
非同期通信についてまとめると下記のようになります。
・リクエストを送ったとき、レスポンスを待つあいだ操作が可能なため、
ユーザーは待たされること無く操作を続けることができる。
・リクエストが一部のため、サーバーから取得するファイルの数が減り、
通信量を軽量化することができる。
「ajax」は従来の手続き的なやりとりを省略し、リアルタイムでデータを取得することで、まるで会話をしているようにWebアプリケーションの動作を実現できることがポイントです。
まとめ
今回の前編では、ajaxとはなんだろう？をかんたんに説明しました。
次回後編では、ajaxとは知らずに使っている身近なウェブサービスの紹介、
jQueryを使った実装例をご紹介していきます。
参考URL
ajaxを使用するメリット
http://thinkit.co.jp/free/books/2/1/1/
いまさらきけない、"ajax"とはなにか
http://www.atmarkit.co.jp/ait/articles/0708/23/news134.html
vol.30 CSS3のキーフレームでアニメーションをつくる
こんにちは、デザイナーの菅野です。
サイトにアニメーションをつかうことによって、さまざまなインタラクションが
加えられ、表現をよりリッチにすることができます。
今回は、CSS3から使用できるようになったキーフレームをつかった
アニメーションについてご紹介します。
上のビジュアルもCSSアニメーションで表現しています。
魚のくねくねしている動きに関してはSVGモーフィングという手法を
つかっているのですが、これについてはまた別の機会でご紹介します。
@keyframesって何？
@keyframesとは
@keyframesとは、CSSアニメーションの中でキーフレームと呼ばれる任意のポイントで
スタイルを指定することにより、複雑なアニメーションが可能になります。
具体的にどんなことができるのかは、後ほど実例とともに見ていきましょう。
対応ブラウザ
• IE(10〜)
• Firefox
• Opera
• Chrome
• Safari
-webkit-や-moz-、-ms-などのベンダープレフィックスは忘れずにつけておきましょう。
プロパティ一覧
◯ animation-name
アニメーションを定義する名前を指定します。
ー 例 ー
animation-name: test1;
◯ animation-duration
一回のアニメーションにかかる時間を指定します。
ー 例 ー
animation-duration: 6s;
◯ animation-timing-function
アニメーションするときの変化の方法を指定します。
ー 例 ー
animation-timing-function: ease-in;
◯ animation-delay
アニメーションが始まるまでの遅延時間を指定します。
ー 例 ー
animation-delay: 3s;
◯ animation-iteration-count
アニメーションを行う回数を数値で指定します。
infinite
アニメーションを無限に繰り返します。
number（数字）
アニメーションを繰り返す回数。
ー 例 ー
animation-iteration-count: 3;
◯ animation-direction
アニメーションを反転させて再生するかどうかを指定します。
normal
毎回、通常方向のアニメーションを行います。
reverse
毎回、逆方向のアニメーションを行います。
alternate
通常再生と逆再生を交互に行います。
alternate-reverse
逆再生と通常再生を交互に行います。
ー 例 ー
animation-direction: normal;
◯ animation-play-state
アニメーションを一時停止、または再開することができます。
running
アニメーションを実行中。
paused
アニメーションを一時停止。
ー 例 ー
animation-play-state: paused;
◯ animation-fill-mode
アニメーションを実行する前後に、スタイルを適用するかどうかを指定します。
none
アニメーションで指定されたスタイルは、アニメーションの実行前や実行後には適用されません。
forwards
アニメーションの最後に適用されているスタイルの状態を維持します。
backwards
アニメーションの最初に適用されているスタイルの状態を維持します。
both
forwards と backwards の両方が指定されます。スタイルはアニメーションの実行前と実行後の両方が適用されます。
ー 例 ー
animation-fill-mode: forwards;
◯ ショートハンドでまとめて指定する場合は以下のような内容で書きます。
animation: name duration timing-function delay iteration-count direction fill-mode
実演
文字だけでは分かりにくいですよね。
それでは実際に実演していくと同時に、
どうやってアニメーションを発生させるかをみていきましょう。
.move_testはいままで説明したものをショートハンドでまとめたものです。
@keyframesの部分で動かしたい要素に
0%(スタート)から100%(アニメーション終了)までの間でCSSを指定してあげます。
.move_test{
animation: test 4s ease-in-out 2s infinite normal both;
-webkit-aanimation: test 4s ease-in-out 2s infinite normal both;
}
@keyframes test {
0% {transform: translateX(-150%); opacity: 0;}
30%{transform: translateX(4%); opacity: 1;}
70%{transform: translateX(4%); color: red; opacity: 1;}
100% {transform: translateX(500%); opacity: 0;}
}
@-webkit-keyframes test {
0% {-webkit-transform: translateX(-150%); opacity: 0;}
30%{-webkit-transform: translateX(4%); opacity: 1;}
70%{-webkit-transform: translateX(4%); color: red; opacity: 1;}
100% {-webkit-transform: translateX(500%); opacity: 0;}
}
まとめ
いかがでしたか？
今までJavaScriptやFlashでつくらなればいけなかったアニメーションを
CSSで簡単に表現し、工夫次第で、CSSだけでもユーザーの目をひく
質の高いインタラクションを実現することができます。
IE10以降やグーグルクローム、Firefox最新版などのモダンブラウザと
呼ばれるものであれば、遠慮なくつかえるので、ぜひ試してみてください。
vol.29 photoshopでGIFアニメを作る
こんにちは。イラストレーターの西山です。
イラストを描いていると一度は思いえがくアニメーション。
しかしアニメを作る専用ソフトを買ったり、画像を大量に描いたり、
なんとなく難しそうで作ったことがないという人も多いと思います。
実はphotoshopひとつあれば比較的簡単な方法で
ショートアニメを作れてしまいます。
今回はphotoshopで作るGIFアニメの
基本的な作り方と便利機能をご紹介します。
GIFアニメは、Webブラウザなどで表示できる動画の一つです。
複数の静止画をアニメーションのコマ（フレーム）のように順番に表示することで、
画像が動いているように見せているんです。
※photoshopのバージョンはCS5を使用しています。
基本的な作り方
フレームの作り方
まずはphotoshopで異なる画像を複数作っておきます。
グループで分けておくことも可能ですが、
まずは1つの動きにつき1レイヤーで用意しておきましょう。
次に「ウィンドウ」から「アニメーションウィンドウ」を表示させます。
※ccでは「ウィンドウ」から「タイムライン」。
選択でフレームアニメーション。
まずは「フレームアニメーション」に設定しましょう。
ウィンドウに画像が表示されるのでわかりやすいです。
アニメーションウィンドウで、レイヤーごとに新しいフレームを作ります。
このときレイヤー1つにつき、その都度フレームを追加するようにします。
フレームを作ることでレイヤーを順番に表示できるようになります。
ウィンドウにある「選択したフレームを複製」を
クリックして新しいフレームを作ります。
プレビューの仕方
フレーム作り終えたら実際にどのように動くか確認しましょう。
アニメーションウィンドの下にある
「アニメーションを再生」をクリックします。
アニメーションを繰り返し表示したいときは「無限」に変更します。
書き出し方
サイズが重くならないよう、「Webおよびデバイス用で保存」から保存します。
GIFアニメを保存するときはループオプションを確認しておきましょう。
アニメをくり返したいときは「無限」に変更してから保存します。
作業効率をあげるポイント
レイヤーからフレームを一括作成する方法です。
レイヤーが多いとフレームを作るだけで一苦労です。
こんなとき一括でフレームを作れる機能があります。
右上メニューから「レイヤーごとにフレームを作成」を選択します。
※ccでは「レイヤーからフレームを作成」で一括フレーム作成します。
途中でレイヤーを追加するときに気をつけること
フレーム作っている途中で新しいレイヤーを追加したいときがあります。
こんなとき陥りやすいのがすべてのフレームに追加画像が表示されてしまうことです。
多くは右上メニューにある「全てのフレームで表示される新規レイヤー」にチェックが入っているので外します。
また、レイヤーを作るときもフレームを作ってからレイヤーを作るように注意します。
応用！トゥイーンをつかって自動で動きをつける
自分で1フレームごとに画像を用意するのが大変という人に、
なんと自動で動きを作ってくれる機能があります。
メニュー下の「アニメーションフレームをトゥイーン」という機能です。
※ccでは「トゥイーン」と呼んでいます。 これは2つのフレーム間を自動で補ってくれる機能です。
例えば右から左への動きをつけたいとき、始め位置と終わり位置の画像だけあれば
自動で間の動きを作ってくれるのです。
トゥイーンにも3種類の効果があります。
位置 始め位置と終わり位置が違う時その間の動きを補う
不透明度 始めと終わりの間を不透明度をかえながら補う
効果 レイヤーにはレイヤー効果という効果があります。この効果に対して補間します。
注意点
フレームの枚数と容量です。
何百枚もの画像をGIFアニメにするとWebにあげられる容量の限度を超えてしまいます。
自分のパソコンでスムーズに見れていても容量には注意しましょう。
まとめ
いかかでしたか？
photoshopだけでもアニメを作るのに十分な機能が備わっています。
画像を作りながら動きをつけられるので、作業がスムーズです。
最近はtwitterが対応可能になったりと活躍の場所も増えています。
効果的に情報を発信する手段として取り入れてみてはいかがでしょうか。
vol.28 よりよい睡眠で寝起きの良い朝を！
今回は睡眠と寝起きのよい朝についてのお話です。寝ているあいだは時間の意識はありませんが、じつは睡眠の時間は仕事のつぎに長いのです。
人生の3分の1は眠っている
vol.15「1日には24時間しかない？」でお話した１日の円グラフでは睡眠は、24時間のうち3分の1にも達しています。人生を80歳と考えるとその3分の1になる27年弱も寝ています。27年もですよ！それも無意識のうちにです！
「惰眠（だみん）を貪（むさぼ）る」という言葉があります。
三省堂大辞林によると
①なまけて眠ってばかりいる
②何もせずだらだらと日を送る
と解説されています。
眠ることについて否定的に感じませんか？
睡眠は決して無駄なことではなく、人間が生きていく上で欠かすことのできない大切なものなのです。
なぜわたしたちは眠るのでしょうか？
睡眠はからだを休めるはたらきはもちろん、脳が休むために大切なものです。からだの疲れは横になるだけでもある程度回復できますが、意識や知能、記憶などの活動を行う大脳は起きている限り休めないのです。
睡 眠は脳を深く眠らせて、精神的なつかれを回復する上で大切です。また、昔から「寝る子は育つ」と言い伝えられていますが、脳が深い眠りに入ると成長ホルモ ンが分泌されます。この成長ホルモンは新陳代謝を上げ、皮膚や筋肉、骨などを成長させたり、日中の活動で傷ついた筋肉や内臓などを効率よく修復する働きが あります。
このように睡眠は「心とからだの健康を保つために必ず必要であって、決してなまけたりだらだら過ごしているのではなく明日への活力に不可欠なものなです。
よりよい眠りをとるための12条
では、どうすれば私たちの体内時計が正しいリズムを刻み、よりよく眠れるのでしょうか？久留米大学医学部の内村直尚先生は体内時計を整える１２カ条を提唱しています。
体内時計を整える12カ条
第1条
朝起きたらカーテン開け、日光を取り入れましょう。
第2条
休日の起床時刻は平日と2時間以上ズレないようにしましょう。
第3条
1日の活動は朝食から始めましょう。
第4条
昼寝するなら、午後３時までの２０〜３０分以内にしましょう。
第5条
軽い運動週間を身につけましょう。
第6条
お茶やコーヒーは就寝４時間前までにしましょう。
第7条
就寝2時間前までに食事を済ませましょう。
第8条
タバコは就寝1時間前にはやめましょう。
第9条
就寝1〜2時間前にぬるめのお風呂に入りましょう。
第10条
部屋の照明は明るすぎないようにしましょう。
第11条
寝酒はやめましょう。
第12条
就寝前のパソコン、テレビ、携帯電話やテレビゲームは避けましょう。
まとめ
わたしたちはさまざまな就業時間、残業、運動不足、夜更かしなどの不規則な生活習慣のため体内時計が乱れがちになってしまいます。
体内時計の乱れが続く と、リズムが乱れて不眠を引き起こしてしまいます。
「体内時計を整える１２カ条」を意識してよりよい睡眠をとり、寝起きの良い朝を迎えましょう！
vol.27 自由にデザイン！Tumblrのカスタマイズ方法
こんにちは。デザイナーの寺田です。
SNS（ソーシャルネットワーキングサービス）は世界中で利用されています。
最近では、宣伝のためにSNSを利用する企業が増えています。
当社もTumblrを利用し、自社コンテンツの宣伝やオフィスの雰囲気が伝わるよう社内で起きた出来事を更新しています。 代表的なSNSはTwitter、Facebook、google+、Pinterest、Tumblrなどたくさんあります。
なかでも「Tumblr」は他のSNSと比べ、サイトのデザインを自由にカスタマイズできるので、自分のイメージに合ったサイトにすることができます。
今回はさまざまな機能がある「Tumblr」について、カスタマイズの方法をご紹介します。
Web日記に拡散機能を追加した多機能ブログ
Tumblrは一般的なブログ機能であるテキスト、画像の投稿だけでなく他サイトからの引用や、音声、動画などが投稿できます。
また、他ブログを自分のブログに表示する「リブログ」や相手のブログを評価し、評価したことを自分のブログに表示する「スキ！」の登録により、
情報が拡散がしやすいのが特徴です。
TwitterとFacebookへ拡散する機能もついているので、他のSNSとの連携もカンタンです。
またURLを「http://◯◯◯.tumblur.com」の形で、自分の好きなURLに変更できます。
アクセス数などのサイトのデータがカンタンに参照できるGoogle Analyticsを挿入することも可能なんです！
「写真をキレイに見せたい！」「自分のポートフォリオサイトをつくりたい！」など自由にカスタマイズできるので、自分に合った使い方ができます。
カンタンにデザインを変えられる便利なテンプレート
Tumblrではデザインをカンタンに変更できる「テーマ」というデザインテンプレートがあります。たくさんある「テーマ」からおすすめのテンプレートをご紹介します。
Pieces レスポンシブデザイン
https://www.tumblr.com/theme/39541
Voices レスポンシブデザイン
https://www.tumblr.com/theme/39519
Two 写真をたくさん載せられそうです。
https://www.tumblr.com/theme/38094
Oblivion SNSの共有がしやすく、情報拡散が期待できそう！？
https://www.tumblr.com/theme/32724
他にもテンプレートがたくさんあります。
デザインを変えてみよう
今回は記事の内容がビジュアルで判別しやすいように画像と文章の両方が見やすいレイアウトの「Elise」をつかって、
サイトに変えていきます。
Elise
https://www.tumblr.com/theme/38712
まずは自分のTumblrのサイトへいきます。
「テーマの編集」で、編集画面を開きます。
「テーマを見る」で、テーマを検索をします。
検索したものが表示されなかった場合も、 画面の左下「更にテーマを検索」をクリックすると、 別タブでテーマページヘ移動します。
ページ移動後、右側の検索アイコンでテーマ名を入力。
探していたテーマが出てきたので、設定をします。
右上の「設定する」をクリックすれば、テーマがTumblrに反映されます。
テーマのデザインをより自分の好みに変えていこう
今回はサイト全体の基本である 背景色、フォント、文字サイズ を変更します。
テーマ編集メニューの一覧から 変更することができます。
背景の色を変えよう
編集画面の上からスクロールして真ん中あたりにある、
「Blog Backgrond Color」の右の丸い部分をクリック。
カラーパレッド、文字コードを入力するエリアが表示され、 色を指定できます。
編集を終えるとリアルタイムで変更が反映されます。 完了したら、テーマ編集メニューの右上部分「保存」をクリックします。 こまめに保存をしていきましょう。
タイトルのフォントを変更しよう
編集画面に「タイトルのフォント」という項目があります。
これを変更し「保存」をクリック。
しかし、フォントを変えたい部分が変化してくれません。
文字サイズの変更は
文字サイズが変更できそうな項目が編集画面の真ん中にありました。
「Header Title font size」から文字サイズをピクセルで指定します。
ですが10pxにしても500pxにしても変化しません。
このセクションで変更できたのは「背景色」のみとなってしまいました。
「Elise」では背景色しか変更できないのでしょうか？
次の「htmlの編集」で、解決します。
オプションではできないより細かなデザインの変更をしよう
htmlを直接編集してみよう
Tumblrではhtmlを直接編集することができます。
「テーマの編集」から「カスタムテーマ」の下に「HTMLを編集」があります。
そこをクリックするとサイトのHTMLソースの全文を記述を見ることができます。
ブログサービスで文章を一部コードで指定できるサービスは多いですが HTMLを一から編集することができるのはTumblrならではの機能です。
しかもエディターも記述毎に色付けされていて見やすいです。
フォントサイズの変更
タイトルフォントを変更するにはCSSのクラス名が必要です。 そこでブラウザの機能である開発者ツールを使って「要素の検証」を行ってみましょう。
Google ChromeやFirefoxではブラウザの設定をしなくてもデフォルトで機能が使えるので、 これらのブラウザを使うことをおすすめします。
（Chromeの場合…要素の検証 Firefoxの場合…要素の調査）
いったんブログ画面を開き、タイトル部分にマウスカーソルを置き、右クリック 「要素の検証（要素の調査）」を選択します。
ウィンドウが開き、タイトルを表示しているソースコードが開かれます。
ブラウザの機能を使い、クラス名を調べて、 下記のように直接CSSを記述します。
「保存」をクリック、サイトをプレビュー変更されていることが確認できました。
.header-text > .wrap > a, .tittle-text{font-size:56px;font-family:"Garamond";} .typography p{font-size:18px;}
Tumblrはたくさんのテーマから好きなものを選ぶことができますが、 なかにはHTMLを直接編集しないと変更できないテーマもあるようです。
テーマを選ぶときはサイトとして目的にあったテーマ選びも重要です。
加えてカンタンにカスタマイズすることが出来るかを確かめて自分のスキルにあったテーマ選びをすることも、 Tumblrの利用がより快適になると思います。
カンタンに無料で自分のサイトがつくれるTumblrのメリット・デメリット
メリット
・無料でできる
・広告が入らない
・他のSNSと連携している
・自分の好きなようにURLを変更できる
・Google Analyticsのトラッキングコードを設置できる
・HTMLコード全体を編集できる
・コードを編集するエディタが色分けされていて見やすい
・リアルタイム（シームレス）に変更を確認できる
デメリット
・コードを編集するとCSSなどのファイルのアップロードが面倒
・テーマ編集の難易度がテーマを適用するまでわからない
カスタマイズのためのおすすめサイト
Tumblr公式サイト カスタマイズについて
Creating a custom HTML theme | Tumblr
Tumblr公式サイト Tumblrの無料のテーマをまとめたサイトです。
これもTumblrでつくられている！
背景に動画が入っています。Tumblrだといわれないと分からないです。
ロゴをオーバーしたときの動きがすごい！
まとめ
いかがでしたか？
Tumblrはここまで自由にカスタマイズができるんですね！
サイトの目的に合わせて、デザインを変えてみてはどうでしょうか？
次回は動きのあるJSを入れたり、実用例を増やした Tumblrカスタマイズの応用編をご紹介します。
vol.26 知って得する？！フランス旅行が倍楽しくなるフランスの伝統色
こんにちは、デザイナーの菅野です。
さんぽが気持ちのよい季節になってきましたね。東京の桜もちらほらと咲いているようです。
さて、今回はフランスの伝統色についてお話しします。
突然ですが、フランスの伝統色が使われているものといえば何が思いうかびますか？
多くの人はフランスの国旗を思いうかべたのではないでしょうか。伝統色が青、白、赤のトリコロールで配色されています。他には、世界的に有名なルイ・ヴィトンの柄であるモノグラムにも伝統色が使われていますね。
実は日本にも馴染み深いものが多くあるんです。
知識として少しでも知っておくと、色選びの参考になります。
また、フランス旅行‥とまではいかなくても、日常で目にするフランスのインテリアや
フランスの映画などを見ることが、より楽しくなるかもしれませんね。
今回は日本人にはない色のとらえ方や文化、豊かで奥深いフランスの伝統色の魅力や背景などをご紹介します。
1. いくつ知ってる？フランスの伝統色36選
みなさんはフランスの伝統色をいくつ知っていますか？
ぱっと思いうかんでこないかもしれません。
魅力的な色彩をもつ伝統色から耳にしたことがあるような名前や、全然聞いたこともないような名前までご紹介します。
フランスの伝統色36選
名前から連想できる色
いかがですか？マリー・アントワネットやシャンパーニュ（シャンパン）は一度は耳にする言葉ですよね。色の名前から連想できるような色がたくさんあって面白いですね。
2. 歴史や日常から知る、フランスの配色
先ほどは色単体についてご紹介しましたが、次は実例とともにフランスならではの配色を見ていきましょう。フランス人の感性やその時代の背景も知ることができます。
-Histoire-歴史編
Moyen中世
出典：http://photo-dslr.blog.so-net.ne.jp
パリのノートルダム大聖堂にあるバラ窓
Baroque バロック
出典：wikipedia http://ja.wikipedia.org/wiki/ニコラ・プッサン
17世紀フランスを代表する画家、ニコラ・プッサンの「アルカディアの牧人たち」
Rococo ロココ
出典：wikipedia http://ja.wikipedia.org/wiki/アントワーヌ・ヴァトー
18世紀フランスを代表する画家、アントワーヌ・ヴァトーの「シテール島への巡礼」
Empire アンピール
出典：wikipedia http://ja.wikipedia.org/wiki/帝政様式
ナポレオンの居室
Art Nouveau アール・ヌーヴォー
出典：wikipedia http://ja.wikipedia.org/wiki/アルフォンス・ミュシャ
アール・ヌーヴォーを代表するグラフィックデザイナー、アルフォンス・ミュシャの「スラヴ叙事詩」
Art Déco アール・デコ
出典：http://art.pro.tok2.com/D/Delaunay/Delaunay.htm
0世紀前半に活動したフランスの画家、ロベール・ドローネーの「パリ市」
Moderne モダン
出典：http://architecture-post.com/unite-dhabitation/
フランスで有名な建築家、ル・コルビュジエが設計したフランスのマルセイユにある「ユニテ・ダビタシオン」
Postmoderne ポストモダン
出典：http://paris.navi.com/miru/27/
フランス、パリにある総合文化施設「ポンピドゥー・センター」
-Paysage- 風景編
Côte d'Azur コート・ダジュール
出典：wikipedia http://ja.wikipedia.org/wiki/コート・ダジュール
フランス南部にある海岸、コート・ダジュール
Champ de lavande ラベンダー畑
南フランスのプロヴァンスにあるラベンダー畑
Colmar コルマール
フランス東部にあるコルマールの街並み
Le Puy-en-Velay ル・ピュイ＝アン＝ヴレ
出典：http://dlift.jp/photo/photoDisplayWorldHeritage621
世界遺産「フランスのサンティアゴ・デ・コンポステーラの巡礼路」の一部にもなっているル・ピュイ＝アン＝ヴレの街並み
Automne 秋の風景
パリにある秋のテュイルリー公園
3. 日本とフランス、色のとらえ方の違い
太陽は赤色？黄色？
なんとなくフランスの色彩の特徴がわかりますね。
次にフランスと日本の色彩感覚の違いについてお話しします。
みなさん、太陽といえば何色ですか？そうです、赤ですね。
日本人のほとんどの人が赤と答えるでしょう。日本の国旗である日の丸が代表的ですね。しかし、フランスで聞くと、ほとんどの人が黄色と答えるそうです。
下の画像は有名なフランスの本「星の王子様」にでてくる太陽です。
出典：http://charlottefrancais.blog12.fc2.com/
このように色のとらえ方が日本とは違います。他にもフランスでは、りんごといえば緑、月と言えば白です。虹の色の数は５〜７と人によって違うみたいですよ。（諸説あります）
お国柄なのでしょうか、びっくりですね。
なぜでしょう？
このような違いは、気候や土地、文化や歴史、ファッションなど、さまざまな違いが影響しているのでしょうね。
幼いころから見ているものが大きく違うのだと思います。とても興味深いですね。
4. デザイナーが使う色見本
またまた登場？正確に色を確認するための色見本
TIPS VOL.21でもご紹介した色見本のフランス版ですね。デザイナーが色を確認するときに使う実物の色見本です。
Web上で色を探すのもよいですが、実物から色を探すことも大切ですね。ここでは「DICカラーガイド フランスの伝統色第4版」というものをご紹介しています。
5. まとめ
いかかでしたか？色だけで、色だけではなく文化の違いなどもわかりますね。
フランスの色彩は豊かで、日本にはない色彩感覚もあり、とても勉強になります。日本人であろうとフランスの伝統色がふさわしいと思ったら、ためらわずにつかっていけるといいですね。
ケースバイケースでそのデザインやコンセプトにあった色を選ぶことが大切です。
うーん、知れば知るほどフランスにいきたくなりますね…実は僕はフランスはおろか、海外にいったことがありません。
情報が簡単に手に入る現代はとても便利ですが、自分の目や肌で感じることは大切にしていきたいものです。
参考資料：城一夫(2014)「フランスの配色」
参考資料：城一夫(2014)「フランスの伝統色」
vol.25 あなたもできるWebサイトのパフォーマンステストと脆弱性テスト
こんにちは。エンジニアの金村です。
今回は、Webサイトを作る上で重要な「パフォーマンステスト」と、「脆弱性テスト」についてお話します。
パフォーマンステストとは、Webサイトの運用が始まったとき、負荷によりサーバーが落ちるといったトラブルを未然に防ぐためにWebサイトの性能を確保するテストです。
脆弱性テストとは、Webサイトの脆弱性を狙った改ざんや情報漏えい、外部からの攻撃を防ぐためにWebサイトの問題点を検出するテストです。
ここでは、さまざまな目的に応じた各種テストをご紹介します。
パフォーマンステストの種類
性能テスト
実際にWebサイトを見たとき、十分な表示・処理速度があるかなど、ユーザーが満足するレベルに達しているかを検証するためのテストです。
ストレステスト
Webサイトに、大量アクセスを試験的に発生させ、どのようなバグが発生するかを検証するテストです。これによって、アクセスがどれだけ増えるとエラーが起きるのか、データの破損が発生するのかを確認できます。
負荷（ロード）テスト
Webサイトの負荷を一時的に増大させて、想定されるピーク時の負荷に耐えられるかを検証するテストです。
負荷が通常時からピーク時に移り変わるにつれて、どれだけパフォーマンスが低下していくか、どれだけのユーザー数をサポートできるかなどを数値化して測定することを目的とします。
キャパシティテスト
Webサイトで管理するアプリケーションにおいて、最大ユーザー数を検証することに特化したテストです。
耐久テスト
Webサイトに長時間の負荷をかけ、安定性を維持できるかを検証するテストです。
検証のメリット
パフォーマンステストを行うことには、さまざまな利点があります。
応答にかかるまでの時間、同時ユーザー数における処理能力の限界、どのコンテンツがパフォーマンスを劣化させる原因となっているか、想定外の負荷がかかったときにどのような影響を及ぼすのかを確認できます。
それらの結果を指標にして、どのような対応が必要になるかが明らかになるのです。
例えばサーバーが大量のアクセスに耐えられないことが分かった場合は、サーバーの性能向上を考えてみる必要があるかもしれません。また将来的にユーザー数が増大した場合に想定されるサーバーを拡充するプランをたてる指標にもなります。
パフォーマンステストのツール
スウェーデンの会社が提供している負荷テストツールです。（月5回まで無料使用可）
URLを入力するだけで簡単に検証ができるので便利です。有料版にすると、同時接続数を増やすといったこともできるようになります。
無料で使えるツールで、GUIを使って操作できるオープンソースです。さまざまなシナリオでテストができます。例えば、応答時間、ループ回数、ユーザー数など細かく設定し、サイトに見合った検証が行え、とても便利です。
パフォーマンステストのツールは、無料のサービスがWeb上にたくさんあります。
検証したいWebサイトの性格に合うツールをぜひ探してみてください。
脆弱性テストとは
パフォーマンステストと合わせて行ってもらいたいのは脆弱性テストです。
Webサイトは常に悪意のある攻撃者の脅威にさらされています。個人情報の漏洩や改ざん、運用妨害といったリスクを軽減するためにもテストの実施をすることはとても重要です。
※テストをする前に...レンタルサーバなどの場合は、サーバ管理者に一度テストの旨を伝えておくといいです。
無料でWebサイトの脆弱性の有無をスキャンしてくれるオープンソースのツールです。日本語にも対応しているので初心者にも扱いやすいと思います。
ただし、自前ではなく共用レンタルサーバーなどの場合、データベースに検査用のレコードを挿入したり、フォームなどの動的コンテンツに大量にリクエストが送信されるとサーバー管理者が攻撃されたと判断してしまいパスワードが変更されるといったこともあるのでテストするときは前もって申告するのがベターです。
まとめ
いくら素晴らしいWebサイトでも、たくさんのアクセスに耐えられないとなるともったいないことです。せっかくなら、多くの人にアクセスしてもらいたいですからね。
パフォーマンステストと聞くとちょっと難しく感じるかもしれませんが、ぜひともチャレンジして頑丈なサイトを作っていきたいですね。
