サイトのssl化の手順 覚書
さくらのレンタルサーバー かつ wordpress 利用の場合
-----------------------------------------------------------------------------------------
１．さくらのサーバーコントロールから無料SSL証明書を発行
２．Really Simple SSL をインストールして実行
さくらインターネット提供のプラグインも存在するが php のバージョンが違ったので Really Simple SSL をインストールした
参考サイト
https://zenlogic.jp/aossl/operation/wp-plugin/
３．google の Search Console と analytics の設定を変更する
https://candy.fun-net.biz/https-google-search-console-analytics/
-----------------------------------------------------------------------------------------
さくらのレンタルサーバー かつ wordpress でないの場合
-----------------------------------------------------------------------------------------
1さくらのレンタルサーバー wordpress でない場合
１．さくらのサーバーコントロールから無料SSL証明書を発行
２．CSS や 画像ファイル の URL を http → https に変更
SSL証明書を発行後に https のアドレスでページにアクセスすると表示はされるもののレイアウトが崩れる。このとき chrome のアドレスバーには鍵マークでなく「!」になっていた。原因は http CSS や画像ファイルを http で読み込んでいるのが原因なので https に書き換える。
３．htaccess で http → https の301リダイレクトを設定
htaccess に記述
---------------------------------------------------
RewriteEngine on
RewriteCond %{HTTPS} off //RewriteRuleが実行される条件。直後の RewriteRule のみが対象
RewriteRule ^(.*)$ https://example.com/$1 [R=301,L]
---------------------------------------------------
４．google の Search Console と analytics の設定を変更する
https://candy.fun-net.biz/https-google-search-console-analytics/
-----------------------------------------------------------------------------------------
さくらのvpsの場合
基本的にここ↓を参考にする
https://knowledge.sakura.ad.jp/10534/
しかしリンク先の解説は CentOS7 を対象としているが、自分が利用しているのは CentOS6.9なのでちょいちょい違うので注意。
ファイアウォールのコマンドは CentOS6.9を利用しているので firewall-cmd ではなく iptables を使う。
iptables の起動状態を確認
-------------------------------------
/etc/init.d/iptables status
-------------------------------------
ssl で利用する 443 ポートが開いていることを確認
-------------------------------------
ACCEPT tcp -- 0.0.0.0/0 0.0.0.0/0 state NEW tcp dpt:443
-------------------------------------
Let's Encrypt を利用するには Certbot を利用する必要があるのでインストール
コマンド
-------------------------------------
wget https://dl.eff.org/certbot-auto
chmod a+x certbot-auto
./certbot-auto
-------------------------------------
その後指示に従う。
途中で、http でのアクセスを https にリダイレクトするか聞かれるが、手動（htaccess）でリダイレクトしたいので「1」を選択
-------------------------------------
Please choose whether or not to redirect HTTP traffic to HTTPS, removing HTTP access.
-------------------------------------------------------------------------------
1: No redirect - Make no further changes to the webserver configuration.
2: Redirect - Make all requests redirect to secure HTTPS access. Choose this for
new sites, or if you're confident your site works on HTTPS. You can undo this
change by editing your web server's configuration.
-------------------------------------------------------------------------------
-------------------------------------
インストールが完了したら httpd を再起動
-------------------------------------
service httpd start
-------------------------------------
https でアクセスできるか確認する
二つ契約しているさくらのVPSの片一方がうまく SSL化できなかった。
適用するドメインを選択するこの場面で現在利用してないドメインも選択したのが原因だと思われる。
Which names would you like to activate HTTPS for?
-------------------------------------------------------------------------------
1: one,example.com
1: two,example.com
1: three,example.com
1: four,example.com
1: five,example.com
1: six,example.com
1: seven,example.com
1: eight,example.com
-------------------------------------------------------------------------------
エラーが出てきちんと完了しない場合は、関連ファイルを全部消して再度実行するといい。
削除したファイル１
----------------------------------------------------
rm -rf /opt/eff.org/certbot
rm -rf /etc/letsencrypt
----------------------------------------------------
削除したファイル２
certbot-auto というファイルがいくつかのディレクトリ内にできているのですべて削除
探す場所
----------------------------------------------------
cd /opt/eff.org/
cd /etc/
cd /etc/httpd/conf.d/
----------------------------------------------------
不要ファイルをすべて削除したら再度実行。
コマンド
-------------------------------------
wget https://dl.eff.org/certbot-auto
chmod a+x certbot-auto
./certbot-auto
-------------------------------------
カテゴリー：さくらインターネット, サーバー設定
まず、cron が使える状態であることを確認
-------------------------------------------------
# /etc/rc.d/init.d/crond status
crond (pid xxxx) を実行中... // 動いている！
-------------------------------------------------
ターミナルからサーバーにログインしてcrontabを編集
-------------------------------------------------
crontab -e
-------------------------------------------------
※ crontab -r は全消去なので注意
※内容確認は crontab -l
//編集内容。一分おきに「テスト出力」を追記
-------------------------------------------------
*/1 * * * * echo "テスト出力" >> /var/backup_sql/test.txt
-------------------------------------------------
日付入りファイルの場合
--------------------------------------------------
*/1 * * * * echo "テスト出力" >> /var/backup_sql/backup_`date +\%Y\%m\%d`.txt
--------------------------------------------------
日付は本来 date +%Y%m%d でいけるが、cron の場合 % のエスケープが必要
一分過ぎたらファイルが出力されているか確認する
-------------------------------------------------
cat /var/backup_sql/test.txt
-------------------------------------------------
cron のログ確認ならこっち
-------------------------------------------------
tail -f /var/log/cron
-------------------------------------------------
※tail は最後の10行のみ表示
毎晩三時二分にシェルスクリプトを実行
-------------------------------------------------
#am03:02 execution
2 3 * * * /var/myshellscript/backupmysql.sh
-------------------------------------------------
backupmysql.sh の内容
-------------------------------------------------
#!/bin/sh
# バックアップの保存期間（days）
period=30
# バックアップ保存用ディレクトリの指定
dirpath='/var/backup_sql'
# MySQLrootパスワード
ROOTPASS=xxxxxxxx
# ファイル名を指定する(※ファイル名で日付がわかるようにしておきます)
filename=`date +%y%m%d`
# 指定したDBのスキーマおよびデータをすべて吐き出す
mysqldump -u root --password=パスワード データベース名 テーブル名 > $dirpath/ファイル名接頭辞_$filename.sql
# パーミッション変更
chmod 700 $dirpath/$filename.sql
# 保存期間を過ぎたバックアップを削除
oldfile=`date --date "$period days ago" +%y%m%d`
rm -f $dirpath/$oldfile.sql
-------------------------------------------------
カテゴリー：linux
mysql のデータベース内に入っているデータをphpを使ってデータマイニングした際、時間がかかったのでしたこと。
何も対策せずにすると35日ほどかかった。
もう一度する必要でてきたのでそのときにしたこと。
ブラウザを複数立ち上げて同時に処理していった。
このとき同じブラウザ（IE）でやると、それぞれのブラウザで処理が倍になってトータル時間が変わらなかった。
なので、IE、chrome、opera の三つで同時に行った。
単純に三倍速くはならなかったけど、2.5倍ほど早くなったように思う。
カテゴリー：mysql, PHP, データマイニング
http://naming-dic.com/word2.html?lang=en&wordurl=48132895
スクロールできるモーダルウインドウの作り方
以下のページを参考にして、自分の環境用にいじったもの
jQueryでスクロールバーの出るモーダルウィンドウを作る方法
ウィンドウのスクロールバーの横幅を計算するjQueryコード
モーダルを表示したときに背景部分はスクロールできないようにする
/////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>[DEMO]jQueryでスクロールバーの出るモーダルウィンドウを作る方法</title>
<script src="js/jquery.js"></script>
<script>
//スクロールバーの出るモーダルウィンドウ
///////////////////////////////////////////////////////
// スクロールバーの横幅を取得
$('html').append('<div class="scrollbar" style="overflow:scroll;"></div>');
//これがスクロールバーの横幅
var scrollbar_width = window.innerWidth - $(window).outerWidth(true);
$('.scrollbar').hide();
var current_scrollY;
// 「.modal-open」がクリックされたら
$('.modal-open').click(function(){
//スクロール済みの距離を取得
current_scrollY = $( window ).scrollTop();
//overflow: 'hidden' で下地画面をロックすると、画面が上に戻ってしまうので
//現在地まで移動させる
$( '#wrap' ).css( { top: -1 * current_scrollY } );
//下画面ロック
$( 'html, body' ).css( { overflow: 'hidden' } );
// オーバーレイ用の要素を追加
$('body').append('<div class="modal-overlay"></div>');
// オーバーレイをフェードイン
$('.modal-overlay').fadeIn('slow');
// モーダルコンテンツのIDを取得
var modal = '#' + $(this).attr('data-target');
// モーダルコンテンツを囲む要素を追加
$(modal).wrap("<div class='modal-wrap'></div>");
// モーダルコンテンツを囲む要素を表示
$('.modal-wrap').show();
// モーダルコンテンツの表示位置を設定
modalResize();
// モーダルコンテンツフェードイン
$(modal).fadeIn('slow');
// モーダルコンテンツをクリックした時はフェードアウトしない
//「.modal-open」がクリックされたときにはじめてイベントの登録（イベントが起こったとき関数が呼ばれるようにする）
$(modal).click(function(e){
e.stopPropagation();
});
// 「.modal-overlay」あるいは「.modal-close」をクリック
//「.modal-open」がクリックされたときにはじめてイベントの登録（イベントが起こったとき関数が呼ばれるようにする）
$('.modal-wrap, .modal-close').off().click(function(){
// モーダルコンテンツとオーバーレイをフェードアウト
$(modal).fadeOut('slow');
$('.modal-overlay').fadeOut('slow',function(){
// オーバーレイを削除
$('.modal-overlay').remove();
// モーダルコンテンツを囲む要素を削除
$(modal).unwrap("<div class='modal-wrap'></div>");
//モーダルウインドウを開いたときに設定したの current_scrollY を解除
$( '#wrap' ).css( { top: 0 } );
//overflow 'hidden' から戻す
$( 'html, body' ).css( { overflow: 'visible' } );
alert('current_scrollY' + current_scrollY + 'px');
//モーダルを表示する前の位置に戻る
$(window).scrollTop(current_scrollY);
});
});
// リサイズしたら表示位置を再取得
$(window).on('resize', function(){
modalResize();
});
// モーダルコンテンツの表示位置を設定する関数
///////////////////////////////////////////////////////
///////////////////////////////////////////////////////
function modalResize(){
// ウィンドウの横幅、高さを取得
var w = $(window).width();
var h = $(window).height();
// モーダルコンテンツの横幅、高さを取得
var mw = $(modal).outerWidth(true);
var mh = $(modal).outerHeight(true);
// モーダルコンテンツの表示位置を設定
if ((mh > h) && (mw > w)) {
$(modal).css({'left': 0 + 'px','top': 0 + 'px'});
} else if ((mh > h) && (mw < w)) {
var x = (w - scrollbar_width - mw) / 2;
// alert('アラート２\nx' + x + 'px\nh' + h + 'px\nw' + w + 'px\nscrollbar_width' + scrollbar_width + 'px\nmw(モーダル幅)' + mw + 'px\nwindow.innerWidth(垂直スクロールバー（表示されている場合）を含む幅)' + window.innerWidth + 'px\nclientWidth' + $('.scrollbar').prop('clientWidth') + 'px\ncurrent_scrollY（スクロールした距離）' + current_scrollY + 'px');
$(modal).css({'left': x + 'px','top': 0 + 'px'});
} else if ((mh < h) && (mw > w)) {
var y = (h - scrollbar_width - mh) / 2;
$(modal).css({'left': 0 + 'px','top': y + 'px'});
} else {
var x = (w - mw) / 2;
var y = (h - mh) / 2;
$(modal).css({'left': x + 'px','top': y + 'px'});
} //if
}
///////////////////////////////////////////////////////
///////////////////////////////////////////////////////
//function modalResize ここまで
</script>
<style>
body {
margin:10px;
padding:10px;
border:10px solid #ddd;
}
.lock {
overflow:hidden;
}
.modal-content {
position:relative;
display:none;
width:50%;
margin:30px;
padding:10px 20px;
border:2px solid #aaa;
background:#fff;
}
.modal-content p {
margin:0;
padding:0;
}
.modal-overlay {
z-index:1;
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:120%;
background-color:rgba(0,0,0,0.75);
}
.modal-wrap {
z-index:2;
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
overflow:auto;
}
.modal-open {
color:#00f;
text-decoration:underline;
}
.modal-open:hover {
cursor:pointer;
color:#f00;
}
.modal-close {
color:#00f;
text-decoration:underline;
}
.modal-close:hover {
cursor:pointer;
color:#f00;
}
</style>
</head>
<body>
<a data-target="con1" class="modal-open">リンク1</a>
<a data-target="con2" class="modal-open">リンク2</a>
<a data-target="con3" class="modal-open">リンク3</a>
<a data-target="con4" class="modal-open">リンク4</a>
<a data-target="con5" class="modal-open">リンク5</a>
<div id="con1" class="modal-content">
<p><a href="./">リンク1の内容です。</a>・・・</p>
<p><a class="modal-close">閉じる</a></p>
</div>
<div id="con2" class="modal-content">
<p><a href="./">リンク2の内容です。</a>・・・</p>
<p><a class="modal-close">閉じる</a></p>
</div>
<div id="con3" class="modal-content">
<p><a href="./">リンク3の内容です。</a>・・・</p>
<p><a class="modal-close">閉じる</a></p>
</div>
<div id="con4" class="modal-content">
<p><a href="./">リンク4の内容です。</a>・・・</p>
<p><a class="modal-close">閉じる</a></p>
</div>
<div id="con5" class="modal-content">
<p><a href="./">リンク5の内容です。</a>・・・</p>
<p><a class="modal-close">閉じる</a></p>
</div>
<p>
クリックしてみてください。ウィンドウより大きいモーダルウィンドウにはスクロールバーが出ていると思います。<br>
</p>
</body>
</html>
/////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////
カテゴリー：JQUERY
mysql で update を実行した際、以下のエラーが出た
-------------------------------------------------
Row size too large (> 8126). Changing some columns to TEXT or BLOB or using ROW_FORMAT=DYNAMIC or ROW_FORMAT=COMPRESSED may help. In current row format, BLOB prefix of 768 bytes is stored inline.
-------------------------------------------------
ROW_FORMATが「Compact」のときに、8126バイト以上のレコードを入力しようとすると出るエラーらしい。
ターミナルの mysql から現在の ROW_FORMAT を確認
-------------------------------------------------
use データベース名 ← データベースを選択
SHOW TABLE STATUS LIKE 'テーブル名'\G
-------------------------------------------------
出力結果
*************************** 1. row ***************************
Name: テーブル名
Engine: InnoDB
Version: 10
Row_format: Compact
Rows: 35155
Avg_row_length: 4583
Data_length: 161136640
Max_data_length: 0
Index_length: 0
Data_free: 6291456
Auto_increment: 46319
Create_time: 2018-03-09 16:18:39
Update_time: NULL
Check_time: NULL
Collation: utf8_general_ci
Checksum: NULL
Create_options:
Comment:
1 row in set (0.01 sec)
Row_format の Compact の部分を、DYNAMIC か COMPRESSED に変更すれば消えるらしい。で、変更するには innodb_file_format が Barracuda になっていないといけない。
innodb_file_format を確認
-------------------------------------------------
mysql> SHOW GLOBAL VARIABLES LIKE '%innodb_file_%';
-------------------------------------------------
出力結果
+--------------------------+-----------+
| Variable_name | Value |
+--------------------------+-----------+
| innodb_file_format | Antelope |
| innodb_file_format_check | ON |
| innodb_file_format_max | Antelope |
| innodb_file_per_table | ON |
+--------------------------+-----------+
4 rows in set (0.00 sec)
innodb_file_format が Antelope なので Barracuda に変更する必要がある。
my.cnfを編集
-------------------------------------------------
vim /etc/my.cnf
-------------------------------------------------
[mysqld]以下に追記
-------------------------------------------------
[mysqld]
innodb_file_per_table = 1
innodb_file_format = Barracuda
innodb_file_format_max = Barracuda
-------------------------------------------------
service mysqld restart で再起動
変更を確認
mysql> SHOW GLOBAL VARIABLES LIKE '%innodb_file_%';
+--------------------------+-----------+
| Variable_name | Value |
+--------------------------+-----------+
| innodb_file_format | Barracuda |
| innodb_file_format_check | ON |
| innodb_file_format_max | Barracuda |
| innodb_file_per_table | ON |
+--------------------------+-----------+
4 rows in set (0.00 sec)
↑一度 mysqld を再起動しても反映されていない時があった。必ず反映していることを確認すること。
ここまでで、Row_format を Compact → DYNAMIC （or COMPRESSED）に変更する下準備ができたことになる。
再度確認
-------------------------------------------------
use データベース名 ← データベースを選択
SHOW TABLE STATUS LIKE 'テーブル名'\G
-------------------------------------------------
まだ Row_format は Compact のまま
今回は ROW_FORMAT を DYNAMIC にするので以下を実行
-------------------------------------------------
mysql> ALTER TABLE `テーブル名` ROW_FORMAT=DYNAMIC;
-------------------------------------------------
無事に変更されていることを確認する
-------------------------------------------------
use データベース名 ← データベースを選択
SHOW TABLE STATUS LIKE 'テーブル名'\G
-------------------------------------------------
カテゴリー：mysql
phpmyadminからデータベースをエクスポートしたらphpの実行時間オーバーでできなかった。
解決方法１
ターミナルでサーバーにログインしてダウンロードする
phpの実行時間オーバーなので php を使わずにエクスポートする。
////////////////////////////////////////
mysqldump -u root -p database_name > ダウンロード後のファイル名.sql
////////////////////////////////////////
上記は mysql はログインせずに実行する。ダウンロード先はカレントディレクトリになるので、不都合ならパスを指定する。
解決方法２
php の実行時間を延長させる。
カテゴリー：mysql
１．レシート、領収書を月ごとに分ける。分けたものを現金で支払ったもの、事業用に使うカードで支払ったもの、プライベートカードで支払ってしまったものに分ける。amazon の領収書もダウンロードする。
２．現金で支払ったものは、やよいの青色申告で現金出納帳を記入。
３．やよいの青色申告で預金出納帳を記入。通帳の内容を丸写しするだけ。クレジットカードでの支払いはプライベートカードと考えて「事業主貸‐自家消費・家事消費」にしてある。プライベート用のクレジットカードで事業経費を支払ったことにする。事業用のクレジットカードで事業経費を支払うより記入が簡単。
参考サイト
参考サイト
フリーランスの経費は、すべて「事業主借」で処理する！
仕訳入力に使う帳簿は「振替伝票」だけ！
（個人事業主が自分一人で「記帳」できる自信がつく４つのポイント。）
４．振替伝票でクレジットカード払いした経費を記入。クレジットカードの利用履歴をダウンロードして、経費で落とせるものをピックアップして記入していく。
５．プライベート用カードで支払ったものも振替伝票で記入していく。
参考サイト
６．家事按分する。仕訳書出しないと決算書（緑色の）には反映されないので忘れずに。
７．所得税青色申告決算書を確認。必要ならコピー。
８．７の書類をもとに国税庁のホームページから確定申告書Ｂを作成。（やよいの青色申告では更新しないとつくれない）
９．以下の書類をコピーして保存する。
現金出納帳
預金出納帳
仕訳日記帳
総勘定元帳
カテゴリー：未分類
amazon kindle のハイライトを ブラウザで確認すると特定の本で読み込みが完了しない。
url: https://read.amazon.co.jp/kp/notebook
「申し訳ありませんが、問題が発生しました。もう一度お試しください。」と出る。時間を変えて何度か再読み込みを試みるも変化なし。スマホサイトでも同じ。
windows の kindle アプリでは問題なく表示される。ただし、サイトに引用したいのでコピペすると一文字ずつとなりに不要な半角スペースが入って扱いにくい。
問題解決のために、エラーが出る手前、表示できているハイライトまで消してみた。そして再読み込み。
すべてのハイライトが「エクスポートの制限に達したため、一部のハイライトが非表示になっているか、省略されています。」になってしまった。そんなはずないのだが。
windows の kindle とかではハイライトを確認できるのでデータが消えたりしていることはないよう。
解決策が分からないので、windows kindle アプリからコピペして対応した。
不要な半角スペースを削除する秀丸エディタでの正規表現は
検索（上段） \s([^ ])
置換（下段） \1
これで全角スペースが続かない半角スペースをすべて削除できる。ハイライトは改行が半角スペースに置き換えられるので改行の代わりと思われる半角スペース以外を消している。八割方この方法でwebハイライトと同じ表示になるだろうと思う。
↑ windows kindle からコピペしてたら制限に引っかかってコピーできなくなった！
しょうがないのでテキストデータからコピペした。
秀丸エディタで連続改行を一つに置換するには
検索（上段） ^\n
置換（下段） （空欄）
その後改行コードを半角スペースに置換
検索（上段） \n
置換（下段） （半角スペース）
カテゴリー：電子書籍
破綻したhtmlタグとは
１．こんにちは</div> ← 開始のdivタグがない
２．<span>こんばんは ← 終わりの span タグがない
文字列操作をしていると上記のような状況が出てきたので、htmlタグに破たんがないように修正したかった。
方法
/////////////////////////////////////////////////
var string = 破綻した html
//破綻している html を作業スペースに置く
$('#tmp_place').html(string);
//再度取り出す
string= $('#tmp_place').html();
/////////////////////////////////////////////////
//作業スペースはあらかじめ用意しておく
/////////////////////////////////////////////////
htmlファイル
<div id="tmp_place" style="display:none"></div>
/////////////////////////////////////////////////
jQuery の .html でエレメント内に挿入して、ふたたぎ取り出すと破綻した html は修正される。確認は chrome のみ。ほかのブラウザは不明。
カテゴリー：javascript, JQUERY
iphone で一部のページが読み込めない。PCでは問題なく表示されるページでも iphone では safari も chrome もダメだった。
「ページを開けません。サーバーが応答を停止しています。」と出る。
PCでページの読み込み時間を計測した
FFTBが長すぎ
原因は、サーバーサイド（PHP）の処理に時間がかかりすぎるため。どうも iphone では 60 秒以上データを送信しない PHP ファイルはサーバー停止と同じエラーがブラウザに出るみたい。
対策として PHP の繰り返し処理中に１バイトの送信を繰り返す。するとサーバー停止扱いにはならない。
//半角スペースを出力してファイルが処理中であることを iphone に伝える
-------------------------------------------------
echo " ";
-------------------------------------------------
カテゴリー：PHP
