MB blog

こちらは主に自分用のメモです。

Divi サイトを ConoHa Wing に移行したらページ保存できなくなった

Divi サイトを ConoHa Wing に移行

爆速という噂を聞いて ConoHa Wing を契約してみて、ロリポップサーバにあった Divi の Wordpress サイトを移行してみました。移行には下記同様、信頼の All in One Migration を使いました。

lake-michigan.hatenablog.com

ConoHa Wing へのインポート時にアップロードファイル上限などが引っかかりましたが、php.ini 上でインポートファイルを超える値まで十分に引き上げたら大丈夫でした。

(無料のエクステンションは  512MB までしか対応していないので、今回は使っていません)

 

ページ編集後、保存時にエラーが発生

移行後に固定ページを編集して、いざ保存しようとすると、見慣れないエラーが。

保存に失敗しました

 

divi エラー 保存


ここに書かれている対策は全て実行しても、やはり保存できず。

素の Wordpress の機能だけを使って編集した時は問題ないのですが、ページビルダーを使って編集したときは、どのページも同じ状態になってしまいました。

 

原因は、ConoHa の WAF が特定のファイルをブロックしていたこと

デベロッパーツールの Console を開きながら「保存」をしようとすると、403 エラーが出ていることがわかりました。

Failed to load resource: the server responded with a status of 403()

このようにファイアウォールに操作を邪魔されることが、 Divi のみならずページビルダーではよくあることのようです。

特に SiteGuard や、WordFence という WAF は Divi と相性が悪くて嫌われているみたいです。

ConoHa Wing では、サーバーサイドでですが SiteGuard が使われています。

ConoHa Wing の WAF でブロックされたファイルの除外設定

 ConoHa Wing の「サイト管理」から、「サイトセキュリティ」>「WAF」ページの下部に、攻撃としていくつかログが記載されています。

IP や日時を確認し、Divi を操作していた時のアクションだと確認できたら、左の「除外」ボタンをクリック。以降、同様のアクションはクリックされなくなります。

conoha wing WAF 除外

 

これ一回で済めば良いんですが、Divi でいろんな操作をしていると、いろんな理由でアクションがブロックされることがあります。その時は、都度この操作で除外をコツコツ繰り返す必要がありました。

 

また、WAF の設定はサーバ単位ではなく、サイト単位で都度行う必要があります。

Python 設定ファイルから値の読み込み(ConfigParser)

Python の ConfigParser とは

Python プログラムからプロパティファイルから値を読み込むのに、ConfigParser という標準モジュールを使うことで、めちゃ簡単に値の取得ができます。
8年前(!)書いた記事(Pythonで設定ファイルから値の読み込み (ConfigParser) - MB blog)の内容が古いので、Python 3.7 で書き直します。

設定ファイル setting.conf 準備

ちなみにファイル名を .conf 形式にすると、VSCode が自動的に設定ファイルだと読み取ってくれます。

[dest_id]
kyoto = 434312
tokyo = 346350
osaka = 2783622
takayama = 1905523
kanazawa = 2658464

コード

dest_id セクションのキーと値を全て出力するサンプルは以下の通り。

import configparser
conf = configparser.ConfigParser()
conf.read('/Users/hogehoge/Documents/hogehoge/setting.conf')
section = 'dest_id'
for key in conf.options(section):
  print (key, conf.get(section, key())

ConfigParser() は get(セクション名, オプション名) のほかにも、has_section や has_option 、また書き込みのための関数も用意されています。

Python の Null チェック

Python の NoneType


Java などでは戻り値が空だった時、

str != null

のようにして Null チェックを行います。
一方で静的型付け言語である Python は、戻り値を受け取る時にも型を指定しないので、ある関数を呼んで戻りの値が空だった時は NoneType という型を返します。

NoneType どうかの判定方法

前述のどのデータ型であっても、以下のやりかたで None であるかどうかの判定をすることができます。

if obj is None:
  print("None")

Python のコード規約的には if obj == None: とは書かず、None 判定には is を使うようです。

型はあるけど値が入ってない、の判定方法

NoneType 型ではないけれど、値が入ってないということもあります。
str の "" をはじめとして、整数の0、浮動小数の 0.0、bool の False、あらゆるコレクション型(リスト、タプル、ディクショナリ、セット)の中身が空、などなど。
例えばコレクションだと、他の言語だと list の length をとってそれが 0 以上かどうか... みたいなことをすると思うのですが、Python はシンプル。
if になんの演算子もつけなければ、その変数に何かしらの値が入っているときに True 、そうじゃないときに Falseを戻します。

if obj:
  print ("Not null")

この省略形、はじめは気持ち悪いけど、コードも短くなり結構合理的。
否定バージョン。

if not obj:
  print ("Null")

Python で差分から日付を計算する timedelta

今日から○日後... を計算するとき、Python の datetime や date は Javascript のようにそのままでは足したり引いたりできません。
datetime.timedelta に差分の日数を設定して計算します。

今日から 5 日後を計算する例。

import datetime

today = datetime.date.today()
td = datetime.timedelta( days = 5 )

print ( today + td )


timedelta () には、差分の日数(days)の他に、秒数(secounds)とマイクロ秒数(microseconds)が指定できるようです。

インポートを省略形で書くことも。

import timedelta from datetime
td = timedelta ( days = 5 )

Divi でヘッダー背景をダークカラーにすると、モバイルメニューが見えない

Divi のモバイルメニュー色変更できない問題

Divi で作ったサイトはモバイル表示ではメニューバーがハンバーガーメニューに収められます。
ハンバーガーメニューの色がデフォルトの黒のままで、ヘッダーのカスタマイズセクションにも、色を変更する箇所が見当たりません。

つまりヘッダー背景をダークカラーにしていると、ハンバーガーメニューが見えなくなってしまいます。

解決方法

左ペイン Divi メニュー>テーマのオプション>全般>カスタムCSS に以下を追記して、任意の色に変更します。

.mobile_menu_bar:before{
	color: #fff
}

(追記・修正)UI から変更する方法

外観 > カスタマイズ > 一般設定 > レイアウト設定 > テーマカラー
ここがハンバーガーの色に反映される。
「テーマカラー」がメニュー背景色と同じに設定されるのは、仕様のよう。。

Google Colaboratory で Google Drive 上の CSV ファイルを読み込む

Google Colaboratory(Colab)とは

Google Colaboratory を使う機会がありました。通称 Google Colab (コラボ)。ざっくり言うと Google Drive 上で実行できる Jupyter Notebook です。インストールやセットアップの必要もなくブラウザ上でいきなり動くし、ノートの共有もドライブを介して簡単にできるので、分析レポートをサクッと公開したり、初心者向けの勉強会とかにぴったり。

しかも作成したノートブック(.ipynb)は Jupyter と互換性があるので、ダウンロードしてローカルの Jupyter Notebook でも開いて実行できる。

FileNotFoundError で Colab から CSV が読めない

Jupyter Notebook で任意の CSV ファイルなどを読み込む場合は単にパスを指定すればよかった(.ipnyb と同じディレクトリにあればファイル名の指定のみでよかった)のですが、Colab の場合、Google ドライブ上の同一ディレクトリにファイルを置いていても FileNotFoundError で怒られます。

Colab から Google ドライブ上のファイルにアクセスするステップ

Google Drive のマウント

まず、自分の Google ドライブを Colab 上で読み込めるようにマウントしてやる必要があります。
f:id:lake_michigan:20190828140046p:plain

左ペインの「ファイル」タブをクリックすると、「ドライブをマウント」と表示されるので、そこをクリックすると、コードエリアにマウント用のコードスニペットが登場します。これを実行すると、別ブラウザが開いて認証用のコードが表示されるので、それをコピペしてコードエリアで入力。
左ペイン「ファイル」タブに、My Drive が確認できるようになります。

f:id:lake_michigan:20190828140908p:plain

ドライブ上のパスの取得

表示されたドライブのツリーから、目当てのファイルを右クリックして「パスをコピー」。
f:id:lake_michigan:20190828141755p:plain

そこでコピーしたパスをプログラム上で指定します。

import pandas as pd
df = pd.read_csv('/content/drive/My Drive/Colab Notebooks/sampledata.csv')

これでファイルにアクセスできました〜!
しかし、このマウントの処理、Colab を使うたびに毎回必要なんです。機械学習で画像とか、大量ファイルを扱う時にはキツくないですか...?

Divi のソーシャルメディアフォローモジュールのカスタマイズ(Google レビューへリンク)

Divi 「ソーシャルメディアのフォロー」モジュール

各種ソーシャルメディアへのフォローを促すアイコンを設置するモジュールがあります。
f:id:lake_michigan:20190823135221p:plain

事前定義されたいくつかのソーシャルアイコンを選べるようになっていますが、ここに存在しないものをモジュールからアップすることはできません。
f:id:lake_michigan:20190823135335p:plain
今回は、Google Map のレビューへのリンクを貼りたいと思います。

また、マウスオーバー時に "title" 属性から「twitter をフォロー」などの事前定義メッセージが表示されてしまいますが、これもモジュールからは編集不可。
Google Map のレビューをチェック」などにに変更したいと思います。

1. Socicon で目当てのアイコンをさがす

www.socicon.com

f:id:lake_michigan:20190823150420p:plain

アイコンの ID (ここでは \e937), カラーコード、そして "Download" ボタンを押した先にある URL をメモしておきます。・

2. ソーシャルメディアフォローモジュールを配置・設定

まずは適当なソーシャルメディアを選択してモジュールを設定します。今回は、dribbble を選択。
そして、モジュールの「背景」で、1. でメモったカラーコードに背景色を変更しておきます。

3. コードモジュールを設置

ソーシャルメディアフォローモジュールのすぐ上に、コードモジュールを挿入します。
f:id:lake_michigan:20190823142548p:plain

4. コードモジュールにコード追加

Socicon スタイルシートの読み込みと、css / jQuery の追記を行います。

<link rel="stylesheet" href="https://d1azc1qln24ryf.cloudfront.net/114779/Socicon/style-cf.css?u8vidh">

<style>
li.et_pb_social_icon.et-social-dribbble a.icon:before {
   font-family: "Socicon" !important;
   content: '\e937' !important; 
}
</style>

<script>
jQuery(function($){
  $('.et-social-dribbble a').attr('title', 'Google Map のレビューをチェック');
});
  
</script>

こんな感じに修正できました!

f:id:lake_michigan:20190823151030p:plain