MB blog

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

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

AWS lightsail インスタンスで root ユーザになる

Lightsail サーバでは root ユーザとしてログインすることができない。
厳密にいうと、root ユーザのパスワードは設定されていない。

通常ユーザで SSH ログインした後に、su で root ユーザに変更するのが唯一の root ログインの方法。

sudo su -

Divi テーマでヘッダーメニューを非表示にする

Divi テーマを使っていて、固定ページを使ってランディングページ(LP)を作る必要がありました。

LP は本サイトのコンテンツから独立させたいので、ヘッダー部分に表示されるサイトのメインメニューは消したいです。

 

固定ページの通常編集画面で、右カラムのページ属性>テンプレートを、「デフォルトテンプレート」から「Blank Page」に変更。

 

f:id:lake_michigan:20190528091659p:plain

 

更新して、ページを表示すると、、、

 

f:id:lake_michigan:20190528091831p:plain

 

Voila!! メニューが消えました〜。LPっぽくなりましたね。

Divi で Adobe Fonts(旧Typekit)を使う!

Divi と Adobe Fonts(Typekit)

Divi ではデフォルトでたくさんフォントが使えるようになっていますが、日本語フォントは弱い...。
Google Fonts の日本語フォントも使えるのですが、いまいちバリエーションが少なく。

ちなみにデフォルトで Divi の日本語版で使われるのは Noto Sans なのですが、こちらも劇的に重くて有名。

そこで、 Divi で、もっとも優れたウェブフォントサービスである Adobe Fonts を使ってみました。

ちなみに、Adobe Fonts を簡単に使うための有名なプラグインはあるのですが、当記事を書いている時点でサポートしている Wordpress バージョンが 4.2 ということで、こちらは使わず主導で導入します。プラグインの管理大変ですしね。
wordpress.org

Divi テーマで Adobe Fonts を使えるようにする手順

0. Adobe Fonts で Web フォントプロジェクトを作っておく

fonts.adobe.com
お気に入りのフォントを、マイ Web プロジェクトに追加しておきます。
詳細は割愛。

1. Divi 子テーマを作る

header.php をさわるので、子テーマを作っておきます。
lake-michigan.hatenablog.com

2. header.php に Typekit コードを挿入

Adobe Fonts の マイ Web プロジェクト の「プロジェクトの埋め込み」に表示されているスクリプトをコピーする。
Wordpress 管理画面から、外観 > テーマエディターで子テーマの header.php を開く。
タグを探して、 と の間に先ほどのスクリプトをペースト。

3. CSS にフォントを指定

管理画面の Divi メニュー > テーマのオプション > カスタム css に、フォントの指定を追記します。
ちなみに私はグローバルなデフォルトフォントを設定したくて、以下のようにアスタリスクで指定していたのですが、

* {
	font-family: fot-tsukuardgothic-std, sans-serif;
	font-style: normal;
	font-weight: 400;	
}

これだとなぜか見出しテキスト(H1〜H6)に反映されず...
デフォルトのCSSに倣って以下のように指定することで、見出しでも使えるようになりました。

body, h1, h2, h3, h4, h5, h6, input, textarea, select {
	font-family: fot-tsukuardgothic-std, sans-serif;
	font-style: normal;
	font-weight: 400;	
}

追記

に typekit スクリプトを追記するだけであれば、左ペインの Divi > テーマのオプション > 「統合」タブ > 「コードをブログの < head > に追加する。」から入力することもできるので、その場合はわざわざ子テーマを作る必要がない。

参考
www.elegantthemes.com