【CSS】CSSで出来るマウスオーバーエフェクト

2015/03/26 サイト制作, 技術系 投稿者:竹内

CSSの小技 その8
今回は「CSSで出来るマウスオーバーエフェクト」です。
マウスカーソルを乗せた時(主に画像)の演出についてCSSのみでいろいろと出来ます。
当ブログのトップページでは画像に対してズームがかかるエフェクトを導入しています。

ズームイン/ズームアウト

hover01

transform: scale()を使って画像の大きさを変更し、ズームエフェクトにします。
マウスオーバー時にアニメーションをして画像をズームさせます。
transform: scale()の数値を調整することでズームイン、アウトの使い分けができます。

HTML

CSS

明るくする(半透明にする)

hover02

お次は、opacityを利用して、マウスを乗せた時に画像を半透明にして、
白い背景を透かせることで画像が明るくなったように見せます。
このエフェクトは良く見かけるものです。
背景の黒いサイトでは黒が透けて逆に暗くなってしまいますので、
その場合は画像と同サイズの白い背景を置きます。

HTML

CSS

白黒画像、セピア画像、ブラー

hover03

filter: grayscale()を利用して白黒画像に、またfilter: sepia()を利用してセピア画像にすることができます。
それからfilter: blur()を利用してブラー(ぼかし)の画像にすることもできます。
この3つの効果についてはIEでは効果が無いようで、FirefoxやGoogleChromeでは表示されました。

HTML

CSS

他にも

他にも、画像を回転させたり、ピカっと光る演出を入れたりすることもできるようですし、いくつかのエフェクトを複合することもできます。
ズームや半透明はよく使いますが、白黒画像、セピア画像、ぼかし画像は今後使っていきたいと思いました。

また、もう少し調べてみようと思いますが、IEでも問題なく使えれば、白黒画像、セピア画像はマウスオーバーに限らず画像をおしゃれに見せる演出として使えそうです。

参考にさせていただいたサイト
NxWorld様 CSSのみで実装できる、画像と相性が良さそうなホバーエフェクト 15 http://www.nxworld.net/tips/css-image-hover-effects.html

カレンダー

    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
     12
3456789
10111213141516
17181920212223
24252627282930
31      
   1234
567891011
12131415161718
19202122232425
2627282930  
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728     
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
1234567
891011121314
15161718192021
22232425262728
29      
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
      1
2345678
9101112131415
16171819202122
232425262728 
       
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
1234567
891011121314
15161718192021
22232425262728
2930     
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
     12
3456789
10111213141516
17181920212223
2425262728  
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       

カテゴリー

ブログ
Nedia What's up!
 HOME  ブログ
【CSS】nth-child()で要素の指定

2015/03/24 サイト制作, 技術系 投稿者:竹内

CSSの小技 その7
今回は「nth-child()で要素の指定」です。
今までのデモページで使用していましたが、nth-child()について
もう少し掘り下げていきたいと思います。

用途

テーブルやナビゲーションや横並びなどで、何番目かの要素に特定の装飾をしたいときに、
今までですとclassを加えて装飾していましたが、nth-child()を使うことで便利に、かつ綺麗なソースで構築する事が出来ます。

実装方法

css07-01

今回は前回使ったナビゲーションで説明します。
ナビゲーションの順番によって要素の色を変更し、1番左の要素の横幅を半分にします。
ひとつ目の要素はfirst-childで指定することも出来ます。
CSSは下の方に記述しています。

HTML

CSS

奇数行、偶数行に指定する

css07-02

テーブルで奇数行と偶数行で色を変えたりすることが良くあります。
行がたくさんある場合やプログラム等で動的に行数が増える場合に全て設定するのは大変です。
そこでnth-child()の括弧内をodd(奇数行)、even(偶数行)とし、それぞれ装飾することが出来ます。

HTML

CSS

他にも

3番目以降全てを指定する場合:nth-child(n+3)
3番目までを指定する場合:nth-child(-n+3)
1番目と3の倍数(3,6,9)を指定する場合:nth-child(3n+1)
最後の要素を指定する場合:nth-last-child(1)
最後からn番目の要素を指定する場合:nth-last-child(n)
とnと数字の組み合わせでいろいろと指定することが出来ます。
classを細く設定してソースが汚くなってしまうこと無くマークアップ出来るのは技術者としても気持ちが良いです。

カレンダー

    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
     12
3456789
10111213141516
17181920212223
24252627282930
31      
   1234
567891011
12131415161718
19202122232425
2627282930  
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728     
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
1234567
891011121314
15161718192021
22232425262728
29      
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
      1
2345678
9101112131415
16171819202122
232425262728 
       
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
1234567
891011121314
15161718192021
22232425262728
2930     
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
     12
3456789
10111213141516
17181920212223
2425262728  
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       

カテゴリー

ブログ
Nedia What's up!
 HOME  ブログ
【CSS】Flexboxでレイアウト

2015/03/19 サイト制作, 技術系 投稿者:竹内

CSSの小技 その6
今回は「Flexboxでレイアウト」です。
何やらFlexbox(Flexible Box Layout Module)が横並びレイアウトに便利らしいとの情報を聞きつけました。
モダンブラウザであれば問題なく利用できるらしいので早速実践投入したところ、
使ってみた感想「なるほどこれは便利だ」というわけで記事にしてみます。

ここが便利!Flexbox

実際に使ってみて感じた今までの手法との違いは
・とにかく簡単なのでコーディングの工数短縮
・要素を等間隔に並べる、要素の高さを揃えることが容易
・上下左右の中央揃えもすんなり
こんなところです。
デメリットや使いにくい部分は特にありませんでした。

実装方法

やはりナビゲーションが一番わかり易いと思いますので、そちらでやってみましょう。

HTML

CSS

アレンジ

上記のままだと右側に空間がでていますので均等幅にします。
さらに、レスポンシブなナビゲーションにしてみます。
横幅を調整して「HOME」のボタンのみ半分の横幅にしました。

HTML

CSS

最後に

以前、display:tableを紹介しましたが、負けず劣らずdisplay: flex;も便利です。
個人的に完全な均等幅だけでなく、個別に幅を調整出来るのが便利と感じました。
他にもflex-direction flex-grow flex-shrink flex-basis justify-content align-items align-self align-contentなど
様々なプロパティを使えるらしいので、ナビゲーションに限らずその他の要素にも今後積極的に活用していきたいと思います。
厄介なfloatをなるべく使わずにマークアップして、その分レスポンシブに工数を割いていければと思います。

参考にさせていただいたサイト
CSS Flexible Box Layout Module Level 1 http://www.w3.org/TR/css3-flexbox/

カレンダー

    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
     12
3456789
10111213141516
17181920212223
24252627282930
31      
   1234
567891011
12131415161718
19202122232425
2627282930  
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728     
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
1234567
891011121314
15161718192021
22232425262728
29      
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
      1
2345678
9101112131415
16171819202122
232425262728 
       
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
1234567
891011121314
15161718192021
22232425262728
2930     
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
     12
3456789
10111213141516
17181920212223
2425262728  
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       

カテゴリー

ブログ
Nedia What's up!
 HOME  ブログ
【CSS】text-overflow: ellipsis;を使って はみ出した文字を「・・・」で省略

2015/03/17 サイト制作, 技術系 投稿者:竹内

CSSの小技 その5
今回は「text-overflow: ellipsis;を使って はみ出した文字を「・・・」で省略」です。
ブログの記事などで最初の数行を表示して残りを「・・・」や「続きを読む」などで省略するのを見かけます。
ブログだけでなく、Webサイト制作でスマホ対応をする際に、ニュースのタイトルや記事など文字数が確定していない部分について
スマホの縦表示でも横表示でも綺麗にレイアウトするためにこの手法が便利でした。

本ブログのトップページでは[・・・]を使って省略しています。
これをtext-overflow: ellipsis;を使ってCSSのみで表現することが可能です。

text-overflowプロパティとは

テキストが表示領域からはみ出している(隠れてしまった部分がある)事をブラウザ上で表示するためのプロパティです。
最近の主要ブラウザでは問題なく動作するようです。

実装方法

HTML

CSS

アレンジ

「・・・」を「…」や「,」など任意の記号にしたり、記号を使わずに切り取るだけにすることも可能ですが、
こちらの機能はFirefoxのみの対応で、その他のブラウザでは通常の「・・・」が表示されるようですので汎用性はあまり高いとは言えません。

HTML

CSS

他にも・・・

はみ出たテキストのお尻側を省略するのではなく冒頭のテキストを省略したり、
冒頭とお尻側両方を省略したり、さらに冒頭とお尻で別の記号を用いたりと
「そんな使い方するかなぁ」といったことも出来るようです。
ちょっと用途が思いつきませんが、そんなこともできるよと言うことだけ覚えておくと
何か役に立つことがあるかもしれません。

カレンダー

    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
     12
3456789
10111213141516
17181920212223
24252627282930
31      
   1234
567891011
12131415161718
19202122232425
2627282930  
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728     
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
1234567
891011121314
15161718192021
22232425262728
29      
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
      1
2345678
9101112131415
16171819202122
232425262728 
       
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
1234567
891011121314
15161718192021
22232425262728
2930     
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
     12
3456789
10111213141516
17181920212223
2425262728  
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       

カテゴリー

ブログ
Nedia What's up!
 HOME  ブログ
第3回 無償版のXenServerで本格運用しよう ~テクニックの紹介~ –

2015/03/12 技術系 投稿者:佐藤

XenServerを利用する上で最低限必要な操作はXenCenterから行うことが出来ますが、XenServerホスト上で利用出来るxeコマンドを使いこなせるようになると何かと便利です。

第3回目となる今回は、以前の2回の記事でもいくつか登場したxeコマンドの代表的なものを紹介したいと思います。

基本編

■仮想マシンの起動

■仮想マシンのシャットダウン

■仮想マシンのリストを表示

■UUIDで指定した仮想マシンのドメインIDを取得

■ドメインIDで指定した仮想マシンのコンソール画面を出す①

■ドメインIDで指定した仮想マシンのコンソール画面を出す②

■XenServerホストのコンソール画面を出す

xenserver-08

直接コンソールにアクセスした際と違って、どぎつい配色で表示されますがデフォルトでこの仕様です。

■ファイル名を指定してVMをインポート

■タスク一覧の表示

■タスクをキャンセルする

障害対応

最後にxeコマンド以外のコマンドについても紹介します。

■VMを 停止/再起動 しても黄色いアイコンのまま停止してくれない場合に強制シャットダウンを行う方法

■何か不整合が生じた際にxapi(管理用のサービス)を再起動する

コマンドの紹介は以上です。

xeコマンド等による操作は、XenCenter上での操作と比べて自由度が高い分、操作を誤る可能性も高くなりますので十分注意が必要です。

ただ、使いこなすことが出来ればコマンドの戻り値からオリジナルのスクリプトを作成することも難しくないと思います。

基本機能に満足していない方は色々と思考錯誤してみるのも良いかもしれませんね。

カレンダー

    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
     12
3456789
10111213141516
17181920212223
24252627282930
31      
   1234
567891011
12131415161718
19202122232425
2627282930  
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728     
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
1234567
891011121314
15161718192021
22232425262728
29      
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
      1
2345678
9101112131415
16171819202122
232425262728 
       
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
1234567
891011121314
15161718192021
22232425262728
2930     
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
     12
3456789
10111213141516
17181920212223
2425262728  
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       

カテゴリー

ブログ
Nedia What's up!
 HOME  ブログ
第2回 無償版のXenServerで本格運用しよう ~2台構成による運用~

2015/03/10 技術系 投稿者:佐藤

2台構成による本格運用

今回は、XenServer2台で運用する構成について紹介したいと思います。

「XenServer 2台 と 共有ストレージサーバ1台で、仮想マシンのデータは全て共有ストレージにて保管・運用する。」
という構成が紹介されていることがありますが、この方法ですと共有ストレージサーバが故障した際の復旧が困難になります。

今回紹介するのは、前回の記事で紹介した「仮想マシンの自動バックアップ」を応用した構成で、2台のXenServerにそれぞれ仮想マシンで作成したストレージサーバを1台ずつ準備し、お互いにバックアップを取得し合います。この構成で本格運用を行うというものです。

構成およびバックアップの手法について

構成

2台の物理サーバそれぞれにXenServerをインストールし、バックアップ対象となる仮想マシンの他にストレージサーバ用の仮想マシンを1台ずつ用意します。

xenserver-06

そしてバックアップは下記のように別のXenServer内のストレージサーバ用の仮想マシンに取得するようにします。

xenserver-07

■物理サーバ 1台目
XenServer-1ホスト :192.168.0.100
仮想マシンVM-A01 → VMStorage-B へバックアップ
仮想マシンVM-A02 → VMStorage-B へバックアップ

仮想マシンVMStorage-A :192.168.0.101
 (XenServer-2用バックアップサーバ、OSはCentOS 6.6を使用)

■物理サーバ 2台目
XenServer-2ホスト :192.168.0.200
仮想マシンVM-B01 → VMStorage-A へバックアップ
仮想マシンVM-B02 → VMStorage-A へバックアップ

仮想マシンVMStorage-B :192.168.0.201
 (XenServer-1用バックアップサーバ、OSはCentOS 6.6を使用)

ストレージサーバ用に別の物理サーバを準備するのではなく、XenServer内にストレージサーバを仮想マシンで作成するというのがポイントとなります。

尚、通常通りに XenServer をインストールした場合、XenServerホストにはストレージサーバとして使える程のディスク容量が割り当てられないため、
今回のようにストレージ用の仮想マシンを別途準備する必要があります。

この構成のメリット

例えばXenServer-1ホスト に障害が発生した際には、VMStorage-Bで取得している仮想マシンVM-AxxのバックアップデータをXenServer-2にインポートするだけで、すぐにXenServer-2ホスト上で仮想マシン VM-Axx を稼働させることが可能です。

この方法であればXenCenterを使って、ローカルPC内に仮想マシンのバックアップイメージを取得しておく方法と比べて遥かに早く復旧が可能となり、またXenServer 2台 と 共有ストレージサーバ 1台の3台構成よりも安全な運用が出来ます。

また、共有ストレージ用に物理サーバを別途用意する必要がないため省スペース・省エネルギーにもつながります。

バックアップの手法

第1回目と似ていますが、XenServerが2台になっていますので同じ設定を2度行います。

■バックアップ設定1 XenServer-1のバックアップ
1. NFSマウントを用いてXenServer-1ホストからVMStorage-Bのストレージを使えるようにする。

2. xeコマンドを記述したスクリプトで、【スナップショットの作成】【スナップショットから仮想マシンのエクスポート】【スナップショットの削除】を行う。

■バックアップ設定2 XenServer-2のバックアップ

3. NFSマウントを用いてXenServer-2ホストからVMStorage-Aのストレージを使えるようにする。

4. xeコマンドを記述したスクリプトで、【スナップショットの作成】【スナップショットから仮想マシンのエクスポート】【スナップショットの削除】を行う。

手順の説明

続いて手順の具体的な説明を行います。

■バックアップ設定1 XenServer-1のバックアップ
1. NFSマウントを用いてXenServer-1ホストからVMStorage-Bのストレージを使えるようにする。

■対象サーバ:192.168.0.201 (バックアップサーバ VMStorage-B)

バックアップサーバ(VMStorage-B)にrpcbindとnfsをインストールします。

hosts.allow の設定を変更します。

rpcbindを起動します。

nfsを起動します。

ストレージ用のディレクトリを作成します。

公開ルールの設定をおこないます。

nfsを再起動します。

全てのディレクトリを一度エクスポート・アンエクスポートします。

NFSエクスポートの状況を確認します。

次にXenServer-1ホスト側にNFSクライアントの設定を行います。

■対象サーバ:192.168.0.100 (XenServer-1ホスト)

マウント用のディレクトリを作成します。

NFSマウントを実行します。

2. xeコマンドを記述したスクリプトで、【スナップショットの作成】【スナップショットから仮想マシンのエクスポート】【スナップショットの削除】を行う。

次に、XenServer-1ホストでバックアップ用のスクリプトを作成します。
今回はスクリプトの中でバックアップデータの保存先をマウント及びアンマウントするようにしていますが、こちらはお好みで設定してください。(サーバ起動時からずっとマウントしておく方法でも構いません。)

■対象サーバ:192.168.0.100 (XenServer-1ホスト)

スクリプトを作成します。

作成したスクリプトに実行権限を与えます。

作成したスクリプトを実行してテストを行います。

正しく設定が出来ていれば、バックアップサーバの /export/common 内に仮想マシンの全データが含まれているイメージファイルが出来ているはずです。

スクリプトのテストが終わりましたら最後にcronによる自動化の設定を行います。

バックアップ設定2 XenServer-2のバックアップについてはバックアップ設定1とほぼ同じになりますので省略します。
また仮想マシンの復元については、第1回目の記事で紹介していますのでご覧ください。

XenServer2台構成でのバックアップ設定の説明は以上です。

いかがしたでしょうか?

尚、仮想マシンのバックアップデータは、仮想マシンに割り当てられていたディスク容量そのままでなく、実際に使っているデータ容量に応じて大きくなります。

「バックアップ設定の自動化は行っていたものの、いつの間にかバックアップサーバの容量が一杯になってしまいバックアップが正常に取れていなかった。」ということのないように、バックアップサーバはバックアップ対象となる仮想マシンの台数・ディスク容量をあらかじめ考慮して準備しておく必要があります。また別途バックアップサーバの容量をチェックする仕組みを用意するのも良いかもしれませんね。

3回目となる次回はXenServerのちょっとしたテクニックについて紹介する予定です。
それでは。

カレンダー

    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
     12
3456789
10111213141516
17181920212223
24252627282930
31      
   1234
567891011
12131415161718
19202122232425
2627282930  
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728     
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
1234567
891011121314
15161718192021
22232425262728
29      
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
      1
2345678
9101112131415
16171819202122
232425262728 
       
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
1234567
891011121314
15161718192021
22232425262728
2930     
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213