2019年08月29日

お客様各位

　　　　　　　　　　　　　　　　　　　　　　　　　　　　株式会社ネディア

　　　　　　フレッツ複数エリア障害発生のご報告

　平素より、弊社サービスをご利用いただき誠にありがとうございます。

　本日、フレッツサービス複数エリアにつきまして、お客様がインターネット
サービスをご利用できない障害が発生しております。

　現在、原因調査中です。
　お客様には、ご迷惑をお掛けしておりますことをお詫び申しあげます。

　　　　　　　　　　　　　記

　　　■不具合詳細
　　　　発生時刻：2019年08月29日(木)　08時30分から

　　　　障害原因：大量トラフィック流入

　　　　影響範囲：フレッツ全サービス　下記エリアのお客様
　　　　　　　　　全国エリア

　　　　影響内容：インターネットに接続しづらい状況

　詳しくは、故障情報 | NTT Com お客さまサポートを御覧ください

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　以上

この記事を読んだ方はこちらも読まれています

ユーザ数無制限！法人向けクラウドストレージサービス、はじめました！

Dockerは、ホストOSのディレクトリをコンテナに見せることが出来ます。
この機能を使うことでホストOSが提供するデータをコンテナに配布して利用したり、コンテナ内のデータのバックアップをホストOSのディレクトリに直接取得するといったこと可能です。
今回は、その手順を紹介します。

bind mountによるディレクトリの提供

bind mountというオプションを指定してDockerエンジンが稼働しているホストOS上の任意のディレクトリをコンテナに見せます。以下は、ホストOSが提供する/tmp/host_dirディレクトリをDockerコンテナ内で利用する例です。

コンテナ用ディレクトリの作成

ホストOS側で、コンテナに提供するディレクトリを作成します。今回は/tmp/host_dirディレクトリをコンテナに提供します。

# mkdir /tmp/host_dir

ホストOS側にファイルを作成

作成したホストOSの/tmp/host_dirに、テスト用のファイル(test.txt)を作成します。

# echo "This is a test file." > /tmp/host_dir/test.txt

ホストOSのディレクトリをコンテナに提供

ホストOSの/tmp/host_dir をコンテナに提供します。以下の実行例は、ホストOSの/tmp/host_dirをコンテナ内の/home/container_dirとして利用する設定例です。

–mountオプションを使っているところに注目してください。

# docker run -it --name centos7 -h dirtest --mount type=bind,src=/tmp/host_dir,dst=/home/container_dir docker.io/centos:latest /bin/bash

オプションの説明
-i： Dockerコンテナ起動時に、標準出力を受け付けます
-t： 仮想端末(pseudo-TTY)をコンテナに割り当てます
–name：作成するコンテナに名前を付けます
-h：コンテナにホスト名を与えることが出来ます
–mount：ホストOSデータの参照方法を指定出来ます(type=bindを指定)
※src(source)でホストOS上のディレクトリを指定して、dst(destination)でコンテナ内のディレクトリを指定します。

提供されたディレクトリの確認

コンテナ内の/home/container_dir ディレクトリ内にホストOS側が提供するファイルが存在するか確認してみます。

[root@dirtest /]# ls /home/container_dir/
test.txt

[root@dirtest /]# cat /home/container_dir/test.txt
This is a test file.

コンテナ内のファイルの削除

コンテナ内で、ファイルを削除してみます。

[root@dirtest /]# rm /home/container_dir/test.txt

[root@dirtest /]# ls /home/container_dir/

test.txtが削除されて空っぽになっていることを確認

コンテナ内にファイルを作成

コンテナ内にファイルを作成してみます。

[root@dirtest /]# echo "This is a test_container file." > /home/container_dir/test_container.txt

[root@dirtest /]# ls /home/container_dir/
test_container.txt

[root@dirtest /]# cat /home/container_dir/test_container.txt
This is a test_container file.

ホストOS側のディレクトリの状態を確認

CTRL + P、CTRL + Q でコンテナから抜けて、ホストOS側のディレクトリ内のファイルが変更されていることを確認します。

[root@docker /]# ls /tmp/host_dir/
test_container.txt

[root@docker /]# cat /tmp/host_dir/test_container.txt
This is a test_container file.

ホストOSのディレクトリを書き込み不可でコンテナに提供

読み込みだけを許可して、書き込み不可の状態でディレクトリを提供することも可能です。

–mountオプションで指定するコンテナのディレクトリ名の後に「,readonly」を追加します。

# mkdir /tmp/host_dirRO
# echo "This is a test file." > /tmp/host_dirRO/test.txt

# docker run -it --name centos7RO -h dirtestRO --mount type=bind,src=/tmp/host_dirRO,dst=/home/containerRO_dir,readonly docker.io/centos:latest /bin/bash

提供されたディレクトリの確認

コンテナ内の/home/container_dir ディレクトリ内にホストOS側が提供するファイルが存在するか確認してみます。

[root@dirtestRO /]# ls /home/containerRO_dir/
test.txt

[root@dirtestRO /]# cat /home/containerRO_dir/test.txt
This is a test file.

コンテナ内のファイルの削除(編集が出来ないことを確認)

コンテナ内で、ファイルを削除してみます。

[root@dirtestRO /]# rm /home/containerRO_dir/test.txt
rm: cannot remove '/home/containerRO_dir/test.txt': Read-only file system

読み込みのみで削除などの編集が出来ないことが確認出来ました。

以上でDockerのテクニック、「ホストOSのディレクトリをコンテナに見せる。」の説明を終わります。

SNSなどで話題となっている、画像切り抜きサービス「remove.bg」。
AIが自動で人物などの輪郭を切り抜いてくれ、他の画像と簡単に合成できます。
公式のサンプルがこちら
サンプル
切り抜ける対象は人物、製品、服、家具、自転車、車、動物などです。
（2019年8月現在）

合成する背景画像はサイトにいくつか用意されているのと、
ローカルからアップロードすることもでき、
画像ソフトを持っていなくても手軽に合成できます。

オンライン上で無料で利用できますが、
フォトショップ上でも会員登録してAPIキーを入手・拡張機能をインストールすれば使用できます。

無料プランだとサイズ制限があり、
大きい画像を使用しても仕上がりは0.25メガピクセル（例えば625×400ピクセル）以下になります。

英語なので見落としがちですが、商用利用は有料プランとなっています。
よくある質問

手動でフォトショップ等で切り抜く場合は、パスでちまちま選択するか、
クイック選択ツールを使うことになると思いますが、
髪の毛などの繊細な切り抜きを自然に見せるのは難しいです。
その点remove.bgは細かい箇所もAIが自然に切り抜いてくれます。

切り抜くスキルが無い方や、大量の画像切り抜きを行う場合は、
かなり時間の節約になるので有料プランを使う価値はあると思います。

「remove.bg」でなにしよう？

詳しい使い方については色々なサイトで紹介されていますので、
参考：
【必見】人物写真の切り抜きが一瞬でできるサイト「remove.bg」 | ぽこみち日和
Photoshopでも写真の背景を自動で切り抜く「remove.bg」が使えるよ！ | SONICMOOV LAB

今回はremove.bgで何ができるか、アイデアを紹介したいと思います。

出品用画像に

メルカリ・ヤフオクなどの個人販売サービスで、
品物を撮影するときにセッティングが大変だったり、
関係ない私物まで写ってしまったりで嫌ですよね。
そんなとき背景も何も気にせず品物を撮影してremove.bgを使えば、簡単に出品できます。

※出品用画像は有料プランの商用利用にあたる可能性がありますのでお気をつけください。

証明写真に

スマホからも利用できるので、スマホで自撮りしてremove.bgで背景を白く加工、
証明写真作成アプリに取り込んでコンビニ印刷すれば
印刷代30円だけで証明写真ができちゃいます。

モザイクでプライバシーを守るために

SNSに車の写真をアップしたいけど、自宅やナンバープレートが写っちゃって載せられない。
モザイク機能と、切り抜き範囲を修正できる機能があるので、簡単に加工できます。

シール作成

切り抜いた人物やペットの写真を並べ、ラベルシールやカメラ屋さんなどのシールプリントで印刷、
白い部分をちょっと残し輪郭をハサミで切れば、可愛いオリジナルシールのでき上がり。

まとめ

他にも色々できますが、くれぐれも悪いことには使用しないようにしましょう。

実際使ってみて、普段切り抜きに苦戦する髪の毛などを、一瞬で奇麗に切り抜いてくれるのにはとても感動しました。
remove.bgのブログを見ると短いスパンでどんどん改善されていっています。
公式ブログ
これからも進化が期待できる熱いサービスです。

Webサイトを手軽にダークモード表示にすることができるスクリプト「Darkmode.js」というものがあるそうですので、弊社のWebサイトも対応させてみたいと思います。

Darkmode.js公式サイト

Darkmode.js

英語はあまり得意ではありませんが、簡単な文章なのでなんとなくわかります。
CSSの『mix-blend-mode』を使用してダークモード表示化しているとのことです。

CSSの『mix-blend-mode』は現在のところ、IEとEdgeが対応しておりません。

使い方

HTMLの場合

以下のコードをHTMLに貼り付けるだけです。
注意点としまして、このスクリプトは「bodyタグ内」に設置する必要があるようです。

<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.4.0/lib/darkmode-js.min.js"></script>
<script>
  new Darkmode().showWidget();
</script>

WordPressの場合

WordPressを使用しているサイトではプラグインで対応しましょう。どちらか一方を導入して下さい。

・ Blackout: Dark Mode Widget
　　→ プラグインページはこちら

・ Dark Mode for WordPress
　　→ プラグインページはこちら

当サイトに設置してみましたが、設定方法は特になく、インストールして有効にするだけで大丈夫です。
当サイトでは「Dark Mode for WordPress」の方が相性が良かったようです。「Blackout: Dark Mode Widget」では画像やヘッダー領域など広範囲の色が変わってしまい調整が大変そうでした。

利用可能なオプション

公式サイトではオプションの設定方法も書かれています。オプションを含めた記述の仕方は下記の通りとなります。
WordPressプラグインではオプションの記述はできませんが初期値の状態で十分運用できるようになっています。

ダークモード切り替えボタンの「🌓」はオプションの「label:」で指定してあげる必要があります。
「🌓」はユニコードの特殊文字です「🌓」と記述します。コピペでそのまま使おうとするとうまく表示されないこともあるのでご注意下さい。

注目して頂きたいのが「autoMatchOsTheme：」初期値でtrue（有効）になっているので別途設定は必要ありませんが、デバイスのOSのテーマがダークモードだった場合に自動でダークモード表示になる機能となります。
また、「saveInCookies:」の項目は有効にすることで、一度ダークモード表示にするとCookieを使ってダークモード表示のままサイト内を巡回できます。

<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.4.0/lib/darkmode-js.min.js"></script>
<script>
var options = {
  bottom: '64px', // default: '32px'
  right: 'unset', // default: '32px'
  left: '32px', // default: 'unset'
  time: '0.5s', // default: '0.3s'
  mixColor: '#fff', // default: '#fff'
  backgroundColor: '#fff',  // default: '#fff'
  buttonColorDark: '#100f2c',  // default: '#100f2c'
  buttonColorLight: '#fff', // default: '#fff'
  saveInCookies: false, // default: true,
  label: '🌓', // default: ''
  autoMatchOsTheme: true // default: true
}

const darkmode = new Darkmode(options);
darkmode.showWidget();
</script>

WordPressにHTML用のコードを貼り付けたら？

当サイトはWordPressです。WordPressにHTML用のコードを貼り付けたらどうなるのか試してみたところ切り替えボタンの挙動は大丈夫だったのですが、ページ遷移で白表示に戻ってしまったりするのでWordPressは素直にプラグインで対応した方が良さそうです。

CSSを調整する

特定の文字の色を変更したり、ボタンはダークモードを適用しないなどCSSで調整できます。

.darkmode--activated p, .darkmode--activated li {
  color: #000;
}

.button {
  isolation: isolate;
}

.darkmode--activated .logo {
  mix-blend-mode: difference;
}

またダークモードを適用したくない要素に対してclassで”darkmode-ignore”を指定することによって個別に調整も可能です。

切り替えボタンを表示させずにダークモード表示に固定する場合

<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.4.0/lib/darkmode-js.min.js"></script>
<script>
const darkmode =  new Darkmode();
darkmode.toggle();
console.log(darkmode.isActivated()) // will return true
</script>

ネディアのサイトに実装します

↑導入直後の当サイトです。
WordPressなのでプラグインの「Dark Mode for WordPress」を利用しました。プラグインを有効にしただけでは文字色や罫線が暗いままで全然だめでした。フッターも何故かオレンジ色になっています。
15個ほど個別にCSSで上書き調整を行っています。表示確認をしながら30分ほどで調整完了しました。

IEとEdgeが対応していないのでスマホ表示のみ対応

CSSの『mix-blend-mode』は現在のところ、IEとEdgeが対応しておりません。
スマホでIEやEdgeを使っている人はいないと思いますので、スマホ表示のみ対応という形式で実装してみたいと思います。

@media print, screen and (min-width: 813px) {
	.darkmode-toggle, .darkmode-layer--button {
	  display: none !important;
	}
}

@media screen and (max-width: 812px) {
	.darkmode-toggle, .darkmode-layer--button {
	  display: !important;
	}
}

実装してみて気になったところ

予定通りスマホ表示のみダークモード表示へ切り替えるボタンが表示されるようになりました。実装にあたりいくつか気になるところがありました。

・IEとEdgeが対応していない。
→IEとEdgeが対応していない部分は他にも対応方法はあると思いますが、今回はスマホブラウザのシェアの関係でスマホ表示のみ対応という形で実装しました。

・スクリプト設置後にCSSでのカラー調整は必要。
→「たったコレだけ」のような謳い文句ではありましたが、CSSの調整は必要です。

・bodyタグ内に記述する必要があることがわかりにくかった。
→最初はbodyタグ外に設置してしまい動作しませんでした。公式サイトでは設置場所の記載はなかったように思います。

・サイト表示高速化プラグインの「Autoptimize」と併用できない。
→サイト表示高速化プラグイン「Autoptimize」を有効にすると、Cookie保存のページ遷移が出来ず白ベースの表示に戻ってしまいました。他にも相性の悪いプラグインがあるかもしれません。

・表示切り替えボタンが画像などの要素の裏側に配置されてしまう。（特に画面の狭いスマホ表示）
→切り替えボタンが要素の裏側に配置されてしまうのはもしかすると弊社の環境が要因かもしれません。画面外の読み込みを遅らせる機能（Lazy Load関連）が影響している可能性もあります。下記のようにCSSでz-indexを調整しました。

.darkmode-toggle, .darkmode-toggle--white {
  z-index: 10;
}

まとめ

手軽に導入できるダークモード表示化スクリプトだったと思いますが、その後の調整に結構時間がかかりました。
せっかく当サイトに導入したので、しばらく運用してみようと思いました。
特に良かったのは「デバイスのOSでダークモード設定にしていると連動して自動でダークモード表示になる」ところです。

久しぶりにスクリプトの検証を行ってみて楽しいお勉強の時間になりました。