Google Maps APIを使わずに、埋め込みiframeの色合いカスタマイズ

2018/09/18 サイト制作 投稿者:王

2018年6月11日からGoogleマップのサービスを大幅に刷新し、新しくGoogle Maps Platformとしてスタートしました。
APIで埋め込んでいる地図は、APIキーが必須となり、正しく設定されていない場合は表示されなくなりますが、Googleマップから共有タグで取得したiframeを埋め込む場合は変更しなくても大丈夫です。

Google Maps APIを使わないなら

今日は設定するのにやや面倒になるGoogle Maps APIを使わずに、埋め込みiframeの色合いをカスタマイズしてみたいと思います

使うのはCSSのfilterプロパティ

filterプロパティは主に画像に様々な視覚効果を与える際に使われています。
もちろんbackgroundbordertext-decorationiframeなどにも使用できます。

具体的にできること

関数名(単位) 効果
blur(px) 0px(初期値)~10px ぼかし
brightness(%) 0%~100%(初期値) 明度
contrast(%) 0%~100%(初期値) コントラスト
drop-shadow x軸方向の影の位置 y軸方向の影の位置 広がりの大きさ 色
grayscale(%) 0%(初期値)~100% モノクロ
hue-rotate(deg) 0deg(初期値)~360deg 色相回転
invert(%) 0%(初期値)~100% 階調反転
opacity(%) 0%~100%(初期値) 透過
saturate(%) 0%~100%(初期値) 彩度
sepia(%) 0%(初期値)~100% セピア

サイトの雰囲気に合わせて

Google マップに相性よさそうな色合いをいくつかご紹介します。
当然サイトに合わせてカスタマイズしてOKです。

・オリジナル

・色相回転

薄い蛍光色が表現できる、個人的に一番気に入ってます

CSS

・階調反転

ネオン街のナイトを連想させる配色です

CSS

・彩度

彩度が高く、色も可愛く見えます

CSS

・mix効果

関数をmixして使うこともできます。
ちょいレトロな雰囲気です。

CSS

・モノクロ

モノトーンをメインにしたいサイトに

CSS

・transitionを加えてふわっと

さらにhoverしてモノクロからカラーにもできます

CSS

気を付けてもらいたいこと

ブラウザー対応について、やはりIE系には対応していません
今後のアップデートによる改善に期待したいです。

おまけ

使い合わせ、度合いの調整など苦手な方に、CSSのfilterプロパティの項目を画像を見ながら調整できる便利なサービスをご紹介します ↓

カレンダー

     12
3456789
10111213141516
17181920212223
24252627282930
       
  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 
       
   1234
567891011
12131415161718
19202122232425
262728    
       
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   
       
     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  ブログ
突然NASが使えなくなった原因はSMB1.0の無効化だった!

2018/09/11 技術系 投稿者:佐藤

先日、弊社のお客様より突然NAS(ファイルサーバ)へ接続が出来なくなったとの問い合わせがありました。

社内にはNASが2台あるのですが、詳しく調べてみると古い方のNASにだけ接続できなくなっていることが分かりました。
NASへ接続出来なくなったパソコンを特定するとOSはWindows10だったのですが、他のWindows10のパソコンは接続出来ているので、どうやらNAS側の問題ではなさそうです。

原因はSMB1.0の無効化だった!

「SMB(Server Message Block)」は、Windowsネットワークにおける標準のファイル共有プロトコルです。SMBの歴史は長く、Windowsにネットワーク機能が標準搭載される前から存在し、さまざまなバージョンがあります。
最も古いものはバージョン1であり、これは最新のOSであるWindows 10(Creator Update)でもサポートされています。
しかし、マイクロソフト セキュリティ情報 MS17-010 緊急等でも公開されているように、SMB1.0は古いプロトコルであり多数の脆弱性を抱えており、また上位のバージョンよりも性能面等で劣るため、SMB1.0を使用しない場合にはSMB1.0は停止しておくことが推奨されています。

SMB1.0は勝手に無効化されることがある

Windows 10 Home と Windows 10 Professional をクリーン インストールした場合、既定で SMB1.0 クライアントはインストールされます。
しかしSMB1.0クライアントが使用されていない期間 (コンピューターの電源が切れていた期間を除く) が合計 15 日間になると、SMB1.0は自動的にアンインストールされるそうです。

また、Windows 10 Fall Creators Update と Windows Server バージョン 1709 以降のバージョンの既定では SMB1.0はインストールされません。
https://support.microsoft.com/ja-jp/help/4034314/smbv1-is-not-installed-by-default-in-windows

今回の不具合はまさにそれでした。

コントロールパネルから「Windows 機能の有効化または無効化」を開いて確認してみると、
SMB 1.0/CIFS クライアント のチェックが消えており、アンインストールされた状態となっていましたので、
チェックを入れて、再度インストールしたところ、無事NASへの接続が出来るようになりました。

SMB 1.0/CIFS クライアントの下に、SMB 1.0/CIFS サーバーという機能もあるのですが、同様にこちらが無効化されてしまうことで、複合機のスキャナ送信機能が使えなくなる等の不具合も出るようです。

Windows PCでSMB1.0の設定が現在どうなっているか簡単に確認する方法

Windows7、2008 R2、vista、2008、8、2012であればコマンドプロンプトで下記のコマンドを実行することでSMB1.0の設定状態(有効or無効)が確認できます。

「sc.exe qc lanmanworkstation」

赤枠で囲った、
MRxSmb10 という文字列が結果で出た場合は、SMB1.0が有効になっている状態
MRxSmb10 という文字列が結果で出ない場合は、SMB1.0が無効になっている状態
となります。

NAS以外のSMB 1.0が関係する不具合等について

本件について各メーカーで解決策や複合機ごとの対応状況が載っていますので、ご紹介いたします。

なお、前述しました通りSMB 1.0自体は脆弱性を抱えております。有効になっていることでランサムウェアにかかりやすいとの情報もありますので不要であれば無効にしておくことが望まれます。
上記で紹介した方法と逆の手順(チェックを外す)を行うことで、無効化出来ますのでSMB 1.0が不要な環境では無効にしておくと良いでしょう。

・SHARP様
http://www.sharp.co.jp/business/print/information/info_security_2017-07-04.html

・Canon様
https://cweb.canon.jp/e-support/information/ransomware/office-mfp.html

・KONICA MINOLTA様
https://www.konicaminolta.jp/business/support/important/180525_01_01.html

・RICOH様
http://faq.ricoh.jp/app/answers/detail/a_id/124/~/%E3%83%A9%E3%83%B3%E3%82%B5%E3%83%A0%E3%82%A6%E3%82%A7%E3%82%A2%E3%80%8Cwannacry%E3%80%8D%E3%81%AB%E3%82%88%E3%82%8B%E3%80%81%E3%83%AA%E3%82%B3%E3%83%BC%E8%A3%BD%E5%93%81%E3%81%B8%E3%81%AE%E5%BD%B1%E9%9F%BF%E3%81%A8%E5%AF%BE%E5%BF%9C%E6%96%B9%E6%B3%95

最後に環境的にSMB1.0を有効化したままにしたいけど、ランサムウェアも怖いのでなんとかしたいという方には、当社のサービス WideNet CLOUD BACKUP を強くオススメ致します。

■WideNet CLOUD BACKUP (1日32円から / 0.99円 1GBから高速クラウドバックアップを実現)
https://www.wide.ne.jp/backup/

■ランサムウェア対策 「Active Protection」
https://www.nedia.ne.jp/blog/business/2017/11/02/10685

カレンダー

     12
3456789
10111213141516
17181920212223
24252627282930
       
  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 
       
   1234
567891011
12131415161718
19202122232425
262728    
       
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   
       
     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  ブログ
波紋エフェクトプラグイン「jquery.ripples」

2018/09/04 サイト制作 投稿者:前原

今回は波紋エフェクトプラグイン「jquery.ripples」をご紹介します。
「jquery.ripples」は画像を水面のようにして、マウスホバーやクリックに合わせ波紋が広がるようなエフェクトをかけるプラグインです。
DEMOはこちら
(スマホには基本対応していませんのでお気を付けください。※当方のiOSではクリックだけは反応しました。)

jquery.ripplesの使い方

jquery.ripplesの使い方についてご説明します。

HTML

まずbody内に画像を表示させる場所を用意してあげます。

div要素のidにdemoと名付けました。

CSS

要素のbackgroundに波紋エフェクトをかけたい画像を指定します。
この時忘れずに要素自体のサイズも指定してあげましょう。
(backgroundなのでサイズを確保しないと描画されません。)

今回は画面いっぱいに画像を表示させました。

js

続いて公式GitHubから、プラグインをダウンロードしてきて解凍します。
公式GitHub
使うのは「jquery.ripples-min.js」です。
jquery.js本体と一緒に読み込みます。

その後で、要素にjquery.ripplesを設定するscriptを書きます。

これで動くはずです。

Chromeブラウザのローカルプレビューだと、何故か波紋が控えめになる不具合がありましたので、
波紋の大きさなどの調整を行う際は、他のブラウザでも確認してみてください。

ちなみにbackgroundに複数画像を設定すると表示がおかしくなりますので、
:before、:after疑似要素を使って指定を分けるなど、background画像は1要素に1枚にしましょう。

コードまとめ

カスタマイズ

オプションをいじってみます。
速度を速く、波紋は小さく、揺れの量を大きく、変更してみました。

オプションDEMO
小雨が降ったような波紋になりました。
工夫次第で様々な演出が出来ると思います。色々試してみてください。

まとめ

上手くできたでしょうか?
揺れる水面は癒し効果がありますね。ずっと眺めていたくなります。
このプラグインを効果的に使えばワンランクおしゃれなサイトが出来そうです。
手軽に実装できるので積極的に使っていきたいものです。

カレンダー

     12
3456789
10111213141516
17181920212223
24252627282930
       
  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 
       
   1234
567891011
12131415161718
19202122232425
262728    
       
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   
       
     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    
       

カテゴリー

PRODUCE ネディアプロデュース
群馬データセンター
群馬の法人ITサポートサービス Wide Net[ワイドネット]
ワイドオフィス
イヤホンのブランドでハイクラスを誇る | n+um(エニューム)