タグ: Web

SASSでいろいろ嵌まったこと

ツレのWebサイトの仕事を手伝ったときにSASSで嵌まった。とても単純でまたどうせ嵌まりそうなので、自戒の意味でメモしておく。

Sass: Syntactically Awesome Style Sheets

まずはSASSのコード

#wrapper
  margin: 0
  padding: 0
  width: 960px
  height: auto

これをCSSにコンパイルするとエラーになる。こちらはインデントにタブと空白を混じっていたのが原因だった。CSSからSASS型式で逆変換したときにタブが入ったCSSをコピペしたときの原因。サイトのサンプルからコピペしてもタブが入っているのでこれも注意。結果的には何かエラーがあるとしたら、インデントの書き方が悪いとか、プロパティと値のコロン（；）の間の空白を疑うこと。

Successfully generated CSS：　・・・・・・・

となって今度はうまく行くと思っていたけど、正しく指定されたスタイルシートで表示してくれない。SASSのコードが間違えていると思ってドキュメントを見直したけど正しい。他のサイトを見たけどこれといった誤りもない。

しかしながら、「これからはスタイルシートをCSSではなくてSASSスタイルで書こう」とい言いながら、SCCSスタイルでサンプルを書いているサイトがなんて多いことか。これは関係ない話し・・・。

出力されたCSSファイルを見てみると、margin-paddingとかおかしなプロパティに変換されていた。

#wrapper  {
  margin: 0;
  margin-padding: 0;
  width: 960px;
  height: auto;
}

こちらもタブがまだ残っていたのが原因だった。このようにエラーなく変換されているのは、SASSの仕様上何かあるのだろうか？

使っているエディタはVisual Studio Codeだが、良いか悪いかわからないけどタブを入力すると自動的に空白にしてくれる。ただし、他のコードからコピー＆ペーストしたときはタブはそのままになってしまうので注意が必要である。VS Codeでタブと空白を区別してくれる表示の方法がどこかにあるのだろうな。秀丸エディタならあった。

それにしてもSASSは楽チンだな。今までLESSを使ってたけど、直接CSSを書く気にはなれないな。

と書いたら、SCCSスタイルの方がSASSスタイルの後に出てきたとか記事が出てきた。今までのCSSのように{}で囲むからタブとか空白でコンパイルエラーがなさそうだし、SCCSスタイルの方がいいのかな？

会社のホームページのサーバー移行を行う

会社のホームページを常時SSL化に伴い、サーバーの移行のついでにWordPressからbaserCMSに乗り換えてしまう。ページ数も少ないし手でコピペしてしまう。それにしてもアクセスの少ないサイトである。周りにはSSLでアクセスさせたほうがいいよと言いながら、自分のところではやっていなかったという、ようやくやってみる。

さくらインターネットのVPSにApacheを立てて名前ベースのバーチャルホストで動かしていたが、これを同じくさくらインターネットのレンタルサーバーに移してしまう。ドメインを設定して、/etc/hostsにIPアドレスを追加して、ドメイン名でさくらインターネットのレンタルサーバーにアクセスできるようにしておく。あとは、MySQLの設定やbaserCMSのインストールをごにょごにょやって、ページのコピペ、適当にテーマを変更、DNSを変更、SSLの設定して完了。

と思いきや、以下のさくらインターネットのサポートサイトに書いてあるように.htaccessを追加すると、HTTPにアクセスしたときリダイレクトループが発生する。SさくらインターネットのレンタルサーバーではSNI SSLとか普通のSSLではないようなので、普通にrewriteルールを書いたらダメだそうな。

ブラウザのキャッシュをクリアしたり、別のテーマにしたり、テーマの初期化データを再投入とか、.htaccessを元に戻したりしても、今度は元に戻らなくなった。なにかやってしもうた、感が大きい。

しかしながら、テーマの初期化データを再投入をやると、今まで作っていたページが来てしまったのは辛かった。これをやらないとテーマを変えたらブログ一覧が取得できないとか、原因不明な動きをする。こちらは今回ページ作成で追加されたデータがあるテーブルを、SQLで強引に入れ替えてしまうというこ手段で回避した。テーマの管理に初期データを出力する機能で一旦データを作成して、こちらを初期データとして再投入したけど、元に戻らなくなったのでやめた。

リダイレクトルールの原因は、私のbaserCMSのシステム設定の勘違いだった。WebサイトURLがSSLとなっていないものとSSLと明示されているURLの2つ設定しないといけないが、SSLなっていない方にHTTPを設定してしまっていた。こちらもHTTPSのURLを設定しないといけなかった。なんで2つURLを設定しないといけないかはソースを見てみないとわからない。

その下にSSLのチェックがあるけど、こちらは管理者画面でSSLでアクセスするかの設定だった。このチェックでSSLのURLを自動的にアクセスしてくれるのかと思い込んでいたの大きな間違いだった。

「管理者画面SSL設定」で「SSL通信を利用する」にチェックを入れると、HTTPSで管理者画面にログインできなくなったので外しておいた。これは原因不明。

以上、なんだかんだで当初の目標通り無事にSSL化ができた。しかし、HTTPからのリダイレクトに若干問題あるけど時間があったら対応する。

追記（2018年9月5日）

初期データを投入したからいろいろなところで元に戻ってしまっている。見つけたら直している最中。タイトルが初期データだったのはまずかったな。

プロバイダーのメールアドレスを使い続けるか？

以前Webサイトを作ったお客さんから連絡があった。ADSLを現在使っているけどサービスが停止になるからWiMAXに乗り換えたいということだった。ADSLのプロバイダー（OCN）から発行されているメールアドレスを、そのまま使ってもWebサイトに問題ないかという質問だった。

プロバイダーを辞めるのならプロバイダーのメールアドレスを辞めたら、と答えたけど、結局そのメールアドレスはよく使っているのでやめられないということだった。プロバイダーにメールアドレスを縛られるのは、いろいろな理由を説明してお勧めしないと言っておいたけど、その理由にメリットを感じてもらえなかったようでそのままOCNをメールアドレスだけで使うようだ。

念のためにOCNに確認したら「OCNバリュープラン」に入れば、今使っているOCNのメールアドレスをそのまま使えるとのこと。月額250円（税抜）也。迷惑メール、ウイルスチェックは別料金。

私だったら、今持っているドメインのメールアドレスをメインにして光回線でつなぐけど、面倒さと値段の高さで却下だろうな。

SSL証明書の認証レベル

今作業しているお客さんの病院サイトがSSL化が完了。SSL化は自分のところが作業していないけど。

どんな認証レベルを使っているかを見てみたら企業認証（OV）を使っていた。お金の関係でドメイン認証（DV）だと思っていた。EVまでは使っていないが、頑張ったな。

他の競合する国立の病院のサイトを見たら、こちらはドメイン認証だった。まあ、他の地域の中核病院なんてSSLにも対応していいないから、そんなもんかな？

しかしながら、EVは組織名がブラウザのアドレス出てきて頑張っている感があるけど、DVとOVの違いはパッと見ただけではわからない。OVを使っているぜ、を見た目でもっとアピールできたらいいのにと個人的な感想。

WebサイトのSSL証明書の違いとサイトにあった証明書の選び方

自動車保険の更新手続き完了

今まで自動車保険の手続きはツレに任しておいたけど、今回は私がやることにする。最近クルマの運転にちょっと自信がなくしてきた。と言っても事故を起こしたわけではなく、運転していてヒヤッとすることが多くなってきたことが一つある。それで今まま値段だけで安い自動車保険を選んだけど、今度は事故後の対応がよさそうなところを選んでみた。といいながら、結局はWebでの申込みの簡単さとかシステム的に選んでしまう。

見積もりを取ったのは、

  • ソニー損保
  • アクサダイレクト
  • チューリッヒ
  • イーデザイン損保
  • 三井ダイレクト

の5社。Googleさんに聞いたときに、そのときに上位に出てきた会社である。その他まだまだたくさんの自動車保険はあるが、これ以上面倒なのでこの5社にした。

今入っている保険内容を条件して入力する。入力が簡単だったのはアクサだった。入力項目も簡潔。氏名も漢字を入力すればカナが自動入力されているのがよい。三井ダイレクトは個人データを入力しなくても、保険の内容を選択すれば見積もりまでしてくれるのはいい。

チューリッヒは、保険内容を保存しようとすると個人情報を入力させようとする。保存するときに個人情報を入力させるのはどの会社も同じだけど、チューリッヒでは既に登録されている警告が出て受け付けてくれない。だいぶ昔にチューリッヒで見積もりを取ったことがあるので、それが原因かもしれないが。だけど、顧客でもない昔の個人データを残しておくなんて、ちょっと危なっかしい。しかも、登録し直そうしても受けて付けてくれないという最低な扱いだったので、チューリッヒは今回の候補から外した。

各社比べてみて結局はソニー損保にした。理由はすんなり見積もりを取れたし、保障もいまよりもいい感じなので、多少前よりも保険料が高くなったが申し込んだ。

どの保険会社の見積サイトは、慣れていくと大抵は同じ質問だから問題なく保険条件を選択できる。しかし、保存の際に必要なパスワードの設定は、どの会社も2～10文字の英数字の組み合わせだったのが興味深い。10文字以下のパスワードなんて今は短すぎるので、10文字以下なんて短いのではないかと思うがいかがなものだろうか？

もういちいち条件を入力していくのも面倒なので、保険証書と車検証をスキャンして送れば、AIさんが勝手に見積もりしてくれればいいのにと思うのでした。そのときの個人情報の取り扱いなんては考えていない。まあ、既にどこかでやっているかもしれないが。

個人情報保護委員会の相談窓口への質問

最近、登記簿と電話番号データをマッチングした個人データを使って、セールス電話をかけてくる不動産会社が多くなってきているし、その他プロパン会社の営業も重なって来ているので、そのような個人データを使うことがOKか関係省庁に聞いてみた。最近、個人情報保護法は改正されて個人情報保護委員会という組織ができたらしいので、個人情報保護委員会の相談窓口に電話して聞いてみる。

とても個人情報保護委員会の人には、法律に則って丁寧に回答してもらった。以下にやり取りの内容を上げるが、Comment：に続くのは私の個人的な感想。でも、まだまだわからないことばかり。

Q. 土地の登記簿は個人情報か？

A. 個人データである。

Comment.

  • 公開された情報も個人データだったのね。
  • 個人情報（情報の取得）と個人データ（情報の管理、利用）を区別しなければいけないらしい。

Q. 土地取引以外の営業活動で登記簿の情報を使用してもよいか？

A. 公開されている情報なので使用できる。

Comment.

あくまでも登記簿の情報は土地取引が利用目的だから、プロパンの営業は利用目的外だからアウトだと思うけどな。

Q. 登記簿のデータを販売している会社は違法か？

A. 違法ではない。第三者提供のためのオプトアウト届出をしているはず。それだったら削除してくれるはず。（利用停止等）30条

Comment.

  • オプトアウト届出を出したら、知らない間に第三者に個人データを出してもOKと言うことなのか？
  • これは法務局が公開しているからOKということか？　（適正な取得）第17条第5項

Q. 住所にマッチングさせた登記簿の載っていない電話番号は個人情報であるか？

A. 個人データである。不正に取得されていなければの話しだけど。

Comment.

携帯電話番号はただの記号で個人情報にはならないという話しもある。どっちだ？

Q.  どこから入手したかを開示させることができるか？

A.  開示請求してみて。　（開示）28条2項

  • 　保有個人データの開示項目に入手先があれば、どこから入手したかわかるが、入っていなければわからない。
  • 　開示項目にどの項目（氏名、住所、電話番号、嗜好・・・）があるかは相手次第。内容には規定はない。

Comment.

これはとてもいい加減だな。名簿を持っている事業者が入手元を教えないというのが実際のところだし、頑張って聞き出すしかないのかな？

Q.　セールス電話の会社と個人データの利用目的の通知と公表は行わなければいけないのか？

A.　利用目的はWebサイトか何かで必ず公表すること。（取得に際しての利用目的の通知等）18条  公表していなければ違反。

Comment.

これは事業者が個人情報保護法を理解していることが前提だな。

Q.　開示の依頼の方法は？　文書、その場の電話でOKか？

A.　事業者の定めた方法で行う。

Comment.

これは事業者が方法を定めていることが前提ということ。大抵の不動産会社は、個人情報保護法なんて知らないから、開示依頼しても無意味かもな。

Q.　削除してもらった場合は文書で改めて通知してもらった方がいいのか？

A.　それも事業者の定めた方法に従う

Comment.

削除したかどうかは調べようがないから、相手を信じるしかないということみたい。

Q. 　個人情報保護法を知らないで電話かけてくるけど、どうしたらいいの？

A.　本社にの個人情報保護の窓口に連絡して。担当でわからなければ上司。それでもダメだったら通報して。当事者同士の解決が一番だけど。

Comment.

個人情報保護法なんて知らないし関係ないとか言ってくるやつらが結局多いから、これでは通報が増えるな。

Q.  削除を拒否されたときは、どこの窓口に通報すればいいか？

A.　個人情報保護委員会の窓口に通報して。会社名、連絡先、担当者名、時間、その他状況を窓口で聞くから。

Comment.

これまた通報が増えそう。

以上、質問と回答終わり。

個人情報保護法なんて、個人データを使われる方を守ってくれるなんて考えていてはダメだと思った。円滑に個人データを使いましょうってことなのね。使われたくなかったら電話した業者に言ってね。ただし、まとめて言わないで個別に言ってね、ってことなのかな。

それにしても、セールス電話を受けるたびに「個人情報保護法って知っている？」って聞くと、ほとんどの不動産会社は「知らない。初めて聞いたとか。」か、「名簿を買ったから大丈夫。」「個人データを削除しろと言われたら削除するって言うから大丈夫。（本当は削除しないけどね）」なんて答えが来る。ほぼ、不動産業界の人って個人情報保護法なんて知らないで電話かけてくる。特商法についても同じでセールス電話をしているのに知らない。法律の細かい内容なんで理解するまでもないけど、おおまかな知識を講義を受けてから電話するくらいにしたほうがいいのにね。

個人情報保護委員会の相談窓口の人は、そもそも「これは個人情報保護法の○条です。」って言ってくれるくらいに「個人情報保護法は知ってて当たり前でしょう。」という前提で答えてくれる。だけど、もっと啓蒙活動をやったほうがいいぞ。特に全日本不動産協会と一緒に活動したら、もっと個人情報保護について世間に知らしめることの成果が上がるぞ。ちなみに、ここの国交省のサイトで不動産会社名で検索すると、その会社がどこの協会に所属しているかわかる。中には結果に出てこないような自称不動産会社なんているけどな。

そういえば、全日本不動産協会の個人情報取り扱い窓口で尋ねたら、ここは協会の個人情報の窓口であって、会員の不動産会社の個人情報取り扱いクレーム窓口ではなかった。全然つながらない支部の電話番号を紹介されてしまったので。その辺りの啓蒙活動は全日本不動産協会は力を入れていないと思った。不動産会社ではない者にとっては、全く役に立たない組織かもな。

AWS ELBで常時SSL化したときの嵌まったことのメモ

お客さんのサイトを常時SSL化をしたときのメモ。というか嵌まったことをメモする。

現在は、AWSのELB＋EC2（Windows Server）で運用している。EC2はとりあえず一台で運用している。インスタンスが一つでも、ELBを入れておけば、サーバーのアップデートとか入れ替えが簡単だし。

以上を常時SSL化を実施する。まずは、AWS Certificate Managerで証明書を発行する。認証が必要なのでDNSで認証する。AWS Certificate ManagerかかRoute 53に認証するSNAMEを追加してくれるので認証が簡単。

HTTPでアクセスしたとき簡単にリダイレクトの設定をしてしまうとループするようなので、IISのReWriteモジュールにリダイレクトのルールを追加する。Web,configにAWSのサポートページにあったルールを追加するとエラーになる。これからがトラブルの始まり・・・。

IISの設定から手作業でリダイレクトルールを追加する。参考にしたのは、こちらのページ。こちらでエラーもなくリダイレクトルールを追加できた。

【AWS】HTTPS＋ELB リダイレクトループから抜け出す方法とは

次にAWS ELBにHTTPSのリスナを追加する。そのときAWS Certificate Managerで作成した証明書を指定する。これで完了を思いきやサイトにつながらなくなった。

EC2のセキュリティグループを確認したり、Windows Serverのファイヤウォールを確認したりといろいろやってみたところダメ。これで作業終了かと思ったら、単にELBのセキュリティグループにHTTPSの設定がなかっただけだった。HTTPSを追加したらアクセスできた。

しかし、www.付きのドメインだとEdgeやFirefoxでは証明書エラーとなる。www.なしのドメインだけだと正常。Chromeだとどちらでも保護されていると正常となる。

これはAWS Certificate Managerで証明書を作ったときの失敗だった。www.無しのドメイン名だけで作成していた。www.付きでも大丈夫のように別名を指定して証明書を作ってあげるようにする。おかげで再度証明書を作り直す。

AWS Certificate ManagerでDNS認証で、どういうわけかwww.付きのドメインの認証がやたら時間がかかった。作成に失敗したかと思って、もう一回証明書を作成し直してしまった。www.無しだとすぐに認証してくれたけど、無しだと1時間くらい認証に時間がかかった。これがAWSの仕様かどうかは不明。

ELBのリスナーにHTTPSを追加する。このとき前の証明書の選択項目が残っていてリスナーの追加に失敗する。ELBから一旦別のAWSのサービスに行ってからELBに戻ると正常に追加できた。

これで常時SSL化は完了。HTTPでアクセスしてもHTTPSにリダイレクトしてくれることも確認する。www.付きでも無しでも正常にアクセスしてくれることも確認する。

途中、心が折れそうになったけど、無事に常時SSL化は完了。

WordPressのメディアライブラリで新規追加するとHTTP エラー

ここのWordPressのサイトでメディアライブラリから画像ファイルを新規追加するとHTTP エラーが出てしまいました。心当たりは全くありません。

さて、Googleさんに聞くといろいろでてきます。

WordPress の「HTTPエラー。」でメディアアップロードができない、

「HTTPエラー」WordPressでメディアをアップロードできない現象

などなど。

Webサーバーのエラーログを見ましたが、エラーは出ていませんでした。何かfunction.phpが怪しいとのことでしたが、WordPressのテーマのままでした。

とりあえず、別のテーマにしてみると、今度はうまくファイルをアップロードできるようになりました。テーマを元に戻してみると、これも成功しました。

以上、原因不明で解決できてしまいました。結局テーマを一度別のテーマにしたら解決でした。

非常持ち出し訓練実施

今日一日Webの更新作業を外出先でもできるかをテストしていた。モバイル環境とMacBookProなんですが。

一番の問題は日頃の作業を4Kモニタの広々環境で作業していること。小さな画面で作業するのは辛くなっていた。ですので、4Kモニタを買うのは覚悟したほうがよい。快適すぎて小さな画面に戻れなくなるから。何とかデスクトップを3枚切り替えて使ってみたけど。

だけど、Macのcopy＆pasteってcommandキーの位置がPCと違って使いにくいのね。しかもcontrolキーじゃないし。これはPCとMacの違いだから仕方ないけど、これはしばらく使っていけば慣れていくので無問題。

アプリケーションはほぼMacとWindowsを同じものを使えるからこちらも問題なし。WinSCPの代わりにFileZillaを使うくらいかな。同じアプリケーションでも微妙にショートカットキーが違ってくるのは辛いな。ここでcontrolキーを押すかcommandキーを押すか迷ってしまう。

特に問題なく非常持ち出し訓練完了。

TP-Linkのスマートスイッチを導入する。

長時間稼働したままだとアクセスできなくなるNET GEARのスイッチングハブに代わりに、バッファローのスイッチを入れ替えたのですが、ファンがうるさいというクレームがツレから入りましたので、新しいスイッチングハブを導入します。導入したのは、TP-LinkのTL-SG1016DEという16ポートのスイッチングハブです。TP-Linkは今まで無線LANのアクセスポイントを買ったことがありますので何とかなりそうです。

アマゾンに夕方に注文して午前中に到着しました。アマゾンはさすがに速いです。しかしながら、海外メーカーといってもVLAN可能なスイッチングハブも安くなったものです。この値段ではハブ機能だけでも国産メーカーでは買えません。もちろんファンレスなので静かです。ただし、16ポートのスイッチングハブですので図体はとても大きいです。バッファロー、NET GEARと16ポートのスイッチングハブを買ってきましたが、TP-Linkのこのスイッチングハブが一番大きくなりました。

VLANとかポートミラー、QoS、簡単な管理機能が付いてきます。今のところスイッチングハブしか使う予定がありませんので、各機能は無効にしています。デフォルトの設定はVLANなどの機能は無効になっていますので、そのままだと単純なスイッチングハブとなります。今回はスイッチングハブの機能しか使わないと言っても、とりあえずはIPアドレスくらいは設定していきます。

まずは、IPアドレスを振ります。192.168.0.1がデフォルトらしいので、現在のLANのサブネットのIPアドレスに振り直します。マニュアルではhttp://192.168.0.1/にアクセスしろと書いてありますが、このままではアクスできないので、以下のTP-Linkのサポートサイトから管理ユーティリティ（Easy Smart Configuration Utility）をダウンロードして（付属のCD-ROMにも入っているらしいけど）LAN上のTL-SG1016DEを検出させてしまいます。

http://www.tp-link.com/jp/download/TL-SG1016DE.html#Easy_Smart_Configuration_Utility

Easy Smart Configuration Utilityを起動するとLAN上のTP-Linkのスマートスイッチ一覧が表示されますので（TL-SG1016DE一つしか表示されないけど）、ログインアイコンをクリックして管理画面にアクセスします。デフォルトのID/パスワードはadmin/adminでした。マニュアルのどこかに書いてあるようですけど、見つからなかったので適当に入れたら当たりました。パスワードも後で変えておきましょう。

IPアドレスを設定してしまえば、Easy Smart Configuration Utilityを使わなくても、Webブラウザで http://設定したIPアドレス/ で管理画面にアクセスできます。いずれにしても、どちらでも日本語化されていないので英語のままです。ネットワークに関する簡単な英語ですから日本語ではなくても問題ないでしょう。

ついでにファームウェアアップデートもしてしまいます。以下のサポートサイトからV3のファームウェア（公開日: 2017-05-30）をダウンロードします。スイッチングハブの裏面のシールを確認したらV3で大丈夫のようでした。

http://www.tp-link.com/jp/download/TL-SG1016DE.html#Firmware

ファームウェアのアップデートはEasy Smart Configuration Utilityで行います（Webブラウザの設定画面でもできますが）。こちらはダウンロードしたファイルを指定してアップデートしてしまうだけです。意外と時間がかかり、まさか失敗したかもしれない不安を押させながらアップデートを完了するのを待ちます。


TP-Linkのスイッチングハブはファームウェアをアップデートすると、設定を全部クリアしてしまうようです。IPアドレスの設定は残してくれるのでまだマシですが、いろいろ設定した後のファームウェアアップデートは注意した方がよさそうです。設定をファイルに出力することができますので、必ずアップデート前に設定ファイルを出力しておきましょう。

以上でスイッチングハブの機能しか使っていないので設定は完了です。これから正常に再起動させなくても長期間放っておいて動くかを検証していきます。時間があったら（目的があったら）、VLAN、QoSとかリンクアグリゲーションを試していきましょう。