気になるネットワークカメラの大切な情報

2018/02/27 ビジネス系 投稿者:千本木

こんにちは、千本木です。

突然ですがネットワークカメラってご存知でしょうか。

ネットワーク上に設置して、パソコン等からネットワーク経由でリアルタイム映像を閲覧できたり、SDカードや録画サーバなどに録画を行えるカメラです。

特に最近ではブロードバンド化が進み、データサイズの大きな映像が苦も無く閲覧できるようになり、企業だけでなく個人にも徐々に浸透してきたように感じます。

弊社もデータセンターである以上、防犯や入退室の厳格な管理のためネッワークカメラを設置し録画をしています。

今回はそんなネットワークカメラのお話です。

ネットワークカメラのメリット

同軸ケーブルを引き回すDVR方式の監視カメラと比較するとネットワークカメラには以下のようなメリットがあります。

  • 配線がLANケーブル1本で済むため取り回しが楽、電源ケーブルも不要(※PoE対応製品)
  • パソコンとの親和性が高い
      - 画像処理に様々なソフトウェアを使用できる
      - より高度な処理を実施することができる
  • パソコンだけでなくスマートフォンからもアクセスすることが可能
      - 遠隔地からのモニタリングができる
  • 最近では以下の製品のようにネットワークカメラで撮影した人の顔を判断して人物を特定するという顔認証システムも出てきています。顔認証は防犯だけでなく、人物を特定して扉を開けるなどのセキュリティ面の向上に役立てることができます。

    ディープラーニング顔認証システムFacePRO|パナソニック
    https://sol.panasonic.biz/security/software/asf950/

    カメラの映像・録画データは大切な情報

    個人識別符号

    さて、上記システムのようにネットワークカメラが撮影している映像には当然のことながら人が映り込み、知っている人が映像を見れば〇〇さんだと認識することができます。

    これらの映像や録画データは、映像から個人が特定できれば個人識別符号という個人情報になります。

    ※個人情報保護法より

    (定義)
    第二条 この法律において「個人情報」とは、生存する個人に関する情報であって、次の各号のいずれかに該当するものをいう。

    1. 当該情報に含まれる氏名、生年月日その他の記述等(文書、図画若しくは電磁的記録(電磁的方式(電子的方式、磁気的方式その他人の知覚によっては認識することができない方式をいう。次項第二号において同じ。)で作られる記録をいう。第十八条第二項において同じ。)に記載され、若しくは記録され、又は音声、動作その他の方法を用いて表された一切の事項(個人識別符号を除く。)をいう。以下同じ。)により特定の個人を識別することができるもの(他の情報と容易に照合することができ、それにより特定の個人を識別することができることとなるものを含む。)
    2. 個人識別符号が含まれるもの

    2 この法律において「個人識別符号」とは、次の各号のいずれかに該当する文字、番号、記号その他の符号のうち、政令で定めるものをいう。

    1. 特定の個人の身体の一部の特徴を電子計算機の用に供するために変換した文字、番号、記号その他の符号であって、当該特定の個人を識別することができるもの
    2. 個人に提供される役務の利用若しくは個人に販売される商品の購入に関し割り当てられ、又は個人に発行されるカードその他の書類に記載され、若しくは電磁的方式により記録された文字、番号、記号その他の符号であって、その利用者若しくは購入者又は発行を受ける者ごとに異なるものとなるように割り当てられ、又は記載され、若しくは記録されることにより、特定の利用者若しくは購入者又は発行を受ける者を識別することができるもの

    最近のカメラは高画質高精細を謳う製品が多く、映像から顔の認識も容易にできるため、カメラの映像・録画データ=個人情報と思って良いと思います。

    利用目的を通知しよう

    カメラの映像・録画データが個人情報ということになると、設置している団体はあらかじめ利用目的を対象となる本人に通知、または公表しなければなりません。

    ※個人情報保護法より

    (利用目的の特定)
    第十八条 個人情報取扱事業者は、個人情報を取得した場合は、あらかじめその利用目的を公表している場合を除き、速やかに、その利用目的を、本人に通知し、又は公表しなければならない。

    ショッピングモールなどに行くと「モール内の安全と防犯のため常にカメラで録画・監視をしています。ご理解とご協力をお願いいたします。」などという掲示を見ることがありますが、これは上記の理由からです。

    会社内にカメラを設置している場合には、従業員に周知したうえで、お越しいただくお客様に対しても何らかの方法でカメラで録画していることと、利用目的の通知が必要になります。

    録画データの安全管理措置や従業員監督も必要

    ネットワークカメラを設置している場合、大抵録画をしていることが多いはずです。

    先ほど述べた通り、カメラの映像や録画データが個人情報であるからには、ネットワークカメラはもちろんのこと、録画データを保持しているサーバに対しても、安全管理措置が必要になります。

    ※個人情報保護法より

    (安全管理措置)
    第二十条 個人情報取扱事業者は、その取り扱う個人データの漏えい、滅失又はき損の防止その他の個人データの安全管理のために必要かつ適切な措置を講じなければならない。
    (従業者の監督)
    第二十一条 個人情報取扱事業者は、その従業者に個人データを取り扱わせるに当たっては、当該個人データの安全管理が図られるよう、当該従業者に対する必要かつ適切な監督を行わなければならない。

    例えば録画サーバは、ウィルス対策や不正アクセス対策はもちろんのこと、鍵付きのラックに入れるとか、入退室管理ができる部屋に設置するということが安全管理措置に繋がります。

    特にネットワークカメラの場合はパソコンやスマートフォンを使ってどこからでもアクセスができますので、アクセス制限をかけるということも必要でしょう。

    また、従業員に適切な監督が必要なため従業員教育などの取り組みも重要になってきます。

    ネットワークカメラの設置は是非弊社まで!

    こうして個人情報保護の観点から見ていくとネットワークカメラの設置って敷居が高そうに感じませんか。

    弊社ではネットワークカメラの設置や適切なセキュリティ設定はもちろんのこと、情報セキュリティマネジメントシステムISO27001を取得運用している実績から、適切な安全管理措置や個人情報保護にまつわるアドバイスをさせて頂いております。

    ネットワークカメラの設置は是非弊社にお任せください!

    カレンダー

    1234567
    891011121314
    15161718192021
    22232425262728
    293031    
           
         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  ブログ
    無線LANルーターを新しくするだけで通信速度が早くなる?!

    2018/02/21 その他 投稿者:栗原

    こんにちは。営業部の栗原です。
    みなさんは、自宅や会社でスマートフォンをWi-Fi接続していますか?
    スマートフォンに限らず、パソコンやゲーム機にも無線でネットワーク接続をされている方は多いと思います。

    我が家では、スマートフォン4台、ノートパソコン3台、プレステーション4 2台、タブレット、テレビ、amazon echo、スマートウォッチ計13台を無線接続しています。

    有線接続にしたい物もあったのですが、自宅の設計上無線接続にせざるを得ないので当時(5年ほど前)の機種の中では、無線接続でも比較的安定して繋げるようなルーターを選定して使用していました。

    使用中のルーター

    ■BUFFALO製
    型番:AirStation NFINITI HighPower GigaWZR-HP-G302H
    価格:販売終了(私の記憶ですと1万円ほど)
    発売日:2010年12月
    無線LAN規格:IEEE802.11b/g/n

    購入してから5年以上経過しており、ルーターの老朽化に気付いてはいたのですがたま~にネットワークの通信が切れるけど、2分くらい待てば再接続されるしまだ大丈夫。と先延ばしにしていたところでした。

    しかし、パソコンやスマートフォンでWebブラウジングなどをしている時にネットワーク通信が切断されるとストレスにもなりますので、新しく購入することにしました。

    新しく購入したルーター

    ■BUFFALO製
    型番:AirStation HighPower Giga WSR-1166DHP3
    価格:8,300円
    発売日:2017年5月
    無線LAN規格:IEEE802.11a/b/g/n/ac

    この機種を選んだ理由としては、通信スピードテストをするにあたって同じメーカーのほうが比較しやすいのと、個人的にBUFFALO製ルーターの設定に慣れている事もありBUFFALO製のルーターにしました。
    また、BUFFALOから現行モデルの無線LANルーターはワンルームで使用するものから3階戸建てで使用するものまで10種類ほど販売されていますが我が家は、2階戸建てなのでこの製品で充分だと思い購入しました。
    BUFFALO無線LANルーター種類

    Wi-Fiの規格と速度

    同じ規格でも最大通信速度が異なる製品が出ていますが、
    これは搭載されているアンテナ数の違いなどによるものです。

    参考サイトより

    通信スピードテスト

    スピードテストを行うのに、今回使用したアプリはこちらです。

    ■Speedtest.net:http://www.speedtest.net/
    ■Speedtestアプリのダウンロード:IOS Android

    そして、測定場所です。

    旧ルーターは11ac対応ではありません。新ルーターは11ac対応していますが、今回のスピードテストにあたってはどちらも11g(2.4GHz)で接続して行います。
    また、自宅のインターネット回線はフレッツ光ネクストギガファミリーです。

    測定結果

    旧ルーターの通信スピードテストの結果

    新ルーターの通信スピードテストの結果

    アップロードもダウンロードも通信スピードは早くなっています。
    さらに、新しくしたので途切れたりすることもなく快適にネットワークに接続出来ています。

    まとめ

    古いルーターを新しくするだけで、通信速度は上がり接続も安定します。
    機械本体の寿命は大体4~5年と言われています。
    使用年数が経過していたり、無線接続されているのに速度が遅い、切断されてしまった、など少しでも異常が見えたら無線LANルーターの買い替え時期ではないでしょうか。

    以前は無線LANルーターを購入するとなると10,000円は覚悟していましたが、今は1,000円から購入出来るものもあります。
    まだ、接続出来ているし使えるからと先延ばしにしがちなネットワーク機器ですが新しくするだけで、安定した通信でネットワークに接続することが出来ます。

    カレンダー

    1234567
    891011121314
    15161718192021
    22232425262728
    293031    
           
         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  ブログ
    RTX830でバグを発見!

    2018/02/14 YAMAHA, 技術系 投稿者:長澤

    このブログでは主にYAMAHAルータのRTX1200やRTX1210を使用した内容を紹介してきました。今回は2017年10月に発売されたRTX830についてお話したいと思います。

    最近のYAMAHAルータはインターネット接続設定、VPN設定がブラウザから簡単に設定ができるようになりました。以前はブラウザからではなくコマンドを調べながら1行づつ設定していたのでとても便利です。今回設定するRTX830もブラウザから設定を行うことができました。

    設定内容

    今回RTX830を設定する内容です。

    1. インターネットへの接続
    2. 外部から社内へPPTPを用いてVPN接続
    3. PPTP接続した時にルータから割り当てられるIPアドレスは特定のIPアドレスの範囲内(192.168.1.230-192.168.1.249)から割り当てる

    「1」と「2」に関してはブラウザから問題なく設定ができましたが、「3」に関しては設定する項目がどこにもありませんでした。

    コマンド(CLI)で設定確認

    そこで現在の設定を確認するため今までどおりの方法であるTelnetを使ってコマンドから現在の設定を確認しました。確認した内容が下記になります。

    上記は外部からPPTP接続した時ルータから割り当てられるIPアドレスは、ルータがDHCP サーバとして割り当てる IP アドレスの範囲内になります。
    つまり、「192.168.1.101~192.168.1.200」の範囲内のIPアドレスになります。
    (例えば、「192.168.1.101」や「192.168.1.150」などです。)

    今回は「特定のIPアドレスの範囲内(192.168.1.230-192.168.1.249)から割り当てる」ようにしたいので、「ip pp remote address pool dhcp」の箇所を変更する必要があります。

    設定変更

    Telnetでログイン後、「ip pp remote address pool dhcp」を下記のように変更します。

    がそこでエラーが発生しました。

    エラー内容を確認すると指定したIPアドレスの範囲が不適当という内容でした。
    YAMAHAの下記サイトで確認したところ「ip pp remote address pool」で設定できるIPアドレス数はRTX830の場合、「32」個でした。

    リモート IP アドレスプールの設定
    http://www.rtpro.yamaha.co.jp/RT/manual/rt-common/ip/ip_pp_remote_address_pool.html

    今回は「192.168.1.230~192.168.1.249」の「20」個なので設定できるはずでしたが、ルータ再起動、初期化、を行い入力しても結果は同じでした。

    YAMAHAへの問い合わせ

    そこでYAMAHAのサポートへ問い合わせを行いました。
    結果からお話すると今回の件はバグということが判明しました。サポート担当者もRTX830を実際設定したところ同じ現象が発生したということで、今後提供するファームウェアで対応するとの回答を頂きました。

    今回の設定でIPアドレスの範囲は「192.168.1.230-192.168.1.249」の20でなくても問題はなかったので「192.168.1.230-192.168.1.240」で設定を行いました。

     まとめ

    今回はファームウェアのバグという問題に直面しましたが、ブラウザからでは設定できない細かい設定変更が必要だった為に起きた問題でもありました。問題自体はYAMAHAのサポートへすぐに問い合わせすることで解決できました。ファームウェアのバグについてもYAMAHAからの回答で今後提供するファームウェアで修正するそうです。

    ブラウザで設定できる項目が以前より増えたことで簡単に設定することができますが、細かい設定まではまだまだできません。前回紹介したL2TPv3/IPsecトンネル機能を使った2つの拠点間を同一のIPアドレス帯でネットワークを構築するはその一例です。

    また、本来であればブラウザで設定するのであれば全てブラウザから設定を行い、Telnetなどでコマンドから設定を加えてはいけません。
    なぜならコマンドで設定の追加・変更をしたあとに、ブラウザから設定の追加・変更を行うとコマンドで追加・変更した箇所が消えてしまう場合があるからです。
    便利になった分、注意しなければならない部分も増えるので気を付けたいものです。

    カレンダー

    1234567
    891011121314
    15161718192021
    22232425262728
    293031    
           
         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  ブログ
    スマホセレクトボックスの脱デフォルトスタイル

    2018/02/06 サイト制作, 技術系 投稿者:王

    こんな事で困ったことありませんか?

    セレクトボックスのデザインがスマホ画面で見るとこんなに変わります。

    PC画面

    PC画面セレクトボックス

    スマホ画面

    スマホ画面セレクトボックス

    セレクトボックスがスマホのデフォルトスタイルに従ってしまいました。

    ちなみにソースはこんな感じです。

    ではでは、このデフォルトスタイルから脱出するには、どうすればいいでしょうか?

    お試しで下記一行の-webkit-を追加してみました。

    CSS

    (そもそもwebkitとはなんぞやって思う方、appearanceプロパティについて詳しく知りたり方は、こちらのサイトをご参考ください。)

    スマホでもう一度確認してみましょう

    スマホでセレクトボックスもう一度確認

    おぉ!見事に出来たんじゃないですか!と思いきや、右側にある小さい三角がどこかに消えてしまいました。

    スマホセレクトボックス右側にある小さい三角がどこかに消えてしまいました

    ここで、疑似クラス::afterを用いて三角を入れてみましょう。

    追加したCSS

    今回はどうでしょう。確認してみます。

    スマホ確認してみます

    もう大丈夫みたいですね!

    と、ここで Point です。

    ::afterで入れた三角をクリックしても反応しないことがあります。この状況を避けるため、もう一行入れておくと安心です。

    追加したCSS

    pointer-eventsはマウスやタッチによるイベントを制御できるCSSプロパティーです。
    pointer-eventsをnoneに設定することによって、該当要素がマウスイベントのターゲットになることはありません。よくページ内の文章や画像をコピーされたくない時に使われます。

    コードまとめ

    最後に、注意点として

    ブラウザー対応について、「Can I use_?」で調べてみたところ、IE MobileとMicrosoft Edgeを含め、グローバルブラウザー対応率91.56%(2018年2月時点)となっています。

    Firefox固有の-moz-appearanceプロパティは2017年2月から廃止され、-webkit-で対応できるようになりました。

    参考サイトはこちら:

    いかがでしたか?あなたもスマホセレクトボックスを自分好みにカスタマイズしてみましょう。

    カレンダー

    1234567
    891011121314
    15161718192021
    22232425262728
    293031    
           
         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(エニューム)