ぼっちサーファーのブログ

一人海外サーフトリップの記録と雑記

はてなブログからWordPressへの移行とhttps(SSL)化の手順まとめ

当ブログを「はてなブログ」から「WordPess」へ移行する。


【現状の環境】
はてなブログ + 独自ドメイン + 非https

【移行後】
さくらのVPS + Kusanagi + WordPress + 独自ドメイン + https


移行に伴う条件
・パーマリンクは「/(スラッシュ)」を含まない形式に301リダイレクトを行うこととする。
・Kusanagaiコマンドを使ってSSL化する




  • WordPressのパーマリンク設定
  • はてなブログからデータエクスポート
  • WordPressにインポート
  • 見出しタグ置き換え(H3〜H5)
    • Search Regex
  • 「はてなフォロライフ」から「WordPess」内に画像を複製
    • ①記事中に使われているURLを抜き出す
    • ②URLを元に一括でダウンロード
    • ③WordPressにアップロードする。
  • WordPress記事のimgタグのsrc置き換え
  • アイキャッチ作成
  • 301リダイレクト設定
    • 1.WordPressプラグイン「Redirection」
    • Kusanagi環境でのプロビジョニング毎のnginx.conf設定
  • DNSを新サイトへ向ける
  • https化 + hsts設定 その他
  • まとめ & 移転のご挨拶 & 今後について
    • 移転の理由
    • はてなブログへの感謝
    • 強くてニューゲーム
    • このブログは残す
続きを読む

【WordPress5】SANGO+Rinker+Gutenbergブロックエディターで記事を書いてわかった便利さと不便さ

SANGO(WordPressテーマ)とRinker(物販アフィリンク作成プラグイン)がWordPress5 Gutenbergブロックエディタに正式対応しました。


saruwakakun.com
oyakosodate.com



これでWordPress5に移行できるようになったのでブロックエディタで1記事書きあげてみました。



まぁ「慣れればいけるかな?」という感じ。


というか旧エディタに縛られず「ブロックエディターに合わせた書き方」をすればかなり使えそうです。



  • ブロックエディターへ期待していたこと
    • 実際のサイトに近いプレビュー
    • 使い物にならなかった旧ビジュアルエディタ
    • ブロックエディターでは再現度が改善
  • ブロックエディターのカスタマイズ
    • プレビューの精度を上げる
      • ブロックエディター幅の変更
      • フォントサイズの変更
      • エディター用CSS作成+読み込み設定
    • インライン装飾
      • マーカープラグインを使う方法
      • Advanced Rich Text Tools for Gutenberg
  • ブロックエディタの便利なポイント、不便なポイント
    • 再利用可能ブロックが便利
    • ショートカットキーで保存
    • 複数のブロックをまとめて移動
    • 関連記事へのリンクを貼るのが面倒
    • クラシックブロックのツールバーが消えない
  • まとめ
続きを読む

【アクセスアップ】Bing WebマスターツールでURL検査(Fetch as Google)を行う

みなさんBing使ってますか?

私は全然使ってないですw

でも世の中には何かしらの理由でBingを使っている方がいるようで、保有サイトの2%弱はBingからの検索流入です。


ただ2%って低すぎるんですよね。

BingのシェアはPCので10%弱モバイルでも5%ぐらいはあるようなので、もう少し流入あってもいい感じです。


ま、考えたら当たり前だったんですけどね!



そもそもBing対策してなかった。

  • Google Search Console と Bing Webマスターツール
    • 怠りがちなBing Webマスターツールへの登録
    • Bing WebマスターツールでもURL検査(Fetch as Google)
  • まとめ
続きを読む

【WordPress】記事タイトルの切れ目がわかる「区切り線」を入れるCSSとJavaScript。文字数カウントより効果的かな?

WordPressの記事投稿エディタの記事タイトルに32文字目が分かる線を引きました。

f:id:Apps:20181211103054p:plain

文字数カウンタは付けてるんですが検索結果で見切れそうなところを確認したいからです。


ちなみに文字数カウンタは寝ログさんのを使っています。WordPressで検索するとだいたい押さえてる寝ログさんスゲェ。
WP管理画面でタイトル文字数カウンターを表示するカスタマイズ方法nelog.jp




関連記事
www.lonely-surfer.com
www.lonely-surfer.com


  • クラシックエディタとグーテンベルクに対応
  • 32文字以外にしたい時
    • グーテンベルク
    • クラシックエディタ
  • なんでこんなことをするのか?
    • Google Bot向けの左。クリックされるための右。
    • タイトルにも「正解はWebで」が必要
  • 【まとめ】
続きを読む

【Google Analytics(アナリティクス)】リアルタイムのピーク値のスクリーンショットを自動取得する方法

Google Analyticsのリアルタイムのピーク時のスクリーンショットを自動取得できる方法を考えました。



こんなヤツね。
f:id:Apps:20171130220041j:plain


ついつい見ちゃいますよね。
バズったりドレンドを追ってる時は特に。


そんなことより記事書かなきゃダメなんですが一日何度も見てしまいます。


これ何度も見てしまう理由って「履歴が見れない」ってもあると思います。


リアルタイムの値はログが残らないので最大値ってわからないんですよね。



あとから「本当はどれ位までいったんだろう」って思ったことないですか?



ということで「リアルタイムを監視しピーク値のタイムスタンプとスクリーンショットを自動で撮る」ようにしてみました。

【概要】Google ChromeのコンソールとJavaScriptを使う

Google Analyticsの「リアルタイム→コンテンツ」を開く

Chrome DevToolsを開く

コンソールに下記のJavaScriptを貼り付け実行

//html2canvasを読み込み
var ele = document.createElement("script");
ele.type = "text/javascript";
ele.src = "https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js";
$('body').append(ele)

//結果を表示させるエリアを追加しておく
$('#ID-reportHeader').before('<div id="screenshot" style="width:100%; height:350px; border:1px solid #ddd;overflow:hidden;"><p></p><img src=""></div>');

//監視ターゲット
var target = $('#ID-overviewCounterValue');

//変数宣言
var peak_access = 0; //最高アクセス数
var access = 0; //現在のアクセス数
var imgData
//スクリーンショット取得
function getCounterValue(){
    access = Number(target.text());
    //console.log('access:'+access);
    //console.log('peak_access:'+peak_access);
    if (  peak_access < access) {
        peak_access = access;
        //アクセス数を転記
        $('#screenshot p').text('peak_access='+peak_access+' ['+Date($.now())+']');

        //html2canvasでid="ID-contextOverviewPanel"を描画
        html2canvas( $('#ID-contextOverviewPanel') , {
            onrendered: function(canvas) {
                //描画した画像のURLを取得
                imgData = canvas.toDataURL();
                //imgのソース入れ替え
                $('#screenshot img').attr('src',imgData);
            }
        });    
    }
}

//オブザーバーの作成
var observer = new MutationObserver(getCounterValue);

//テキストの変更を監視するようにオプション設定
var options = {
    childList: true
};

//監視開始
observer.observe(target[0], options);

もう少し詳しい手順

Google Analyticsのリアルタイム→コンテンツを開く→右クリック→検証
f:id:Apps:20181209141644p:plain


コンソールタブを選択肢、コンソールの「>」の部分を選択し、先程のJavaScriptを全文貼り付け→エンター
f:id:Apps:20181209141953p:plain


動作

JavaScriptを実行するとリアルタイムの上部に空白エリアができる。
f:id:Apps:20181209142921p:plain

しばらくする最高値・タイムスタンプ・スクリーンショットが表示される。
f:id:Apps:20181209142442p:plain

グラフは描画されていないけどまぁ良しとしてください。「html2canvas」というライブラリの仕様です。


JavaScript実行後はChrome DevToolsを閉じてもOK。
多分ウインドウを最小化しててもOKかな?

ちゃんと見てないです。


コンテンツタブ以外ではエラーが出るかも。
その時は"ID-overviewCounterValue"とか書き換えると動くかも

まとめ

はぁ。。。良い気分転換にはなったなw

これで記事執筆に集中できるわ〜

お役に立てれば幸いです。


【追記】
一晩動かしてみた。
ちゃんと動いてるみたい。
f:id:Apps:20181210065417p:plain

【WordPress5.0リリースは12/7】更新前にテスト環境で試してみよう!新エディタGutenberg(グーテンベルク)

WordPress5.0に余地通り12/7に配信されはじめました!

f:id:Apps:20181207065438p:plain

今回のメジャーアップデートは無視できない大幅な変更が含まれます。

記事を書く「エディタ」が従来のものからGutenberg(グーテンベルク)と呼ばれる新エディタに変更になります。



【関連記事】
www.lonely-surfer.com

  • エディタの変更は序章にすぎない
  • 事前テストならLocal by Flywheelが便利
    • Local by Flywheelは仮想環境でWordPressを動かせる
    • All-in-One WP MigrationはWordPress移行アプリ
  • まとめ
続きを読む

Osmo Pocketが惜しい!サーフィン用に使うにはFOVが足らないよ!

くっそ〜。「これは!!」と思える製品だったになぁ。

Osmo Pocketをサーフボードのオンボードカメラに使えないか検討してましたが。。。

今んとこ無理そうね。


ちなみに「Osmo」の読み方は「オズモ」らしい。


f:id:Apps:20181130093452j:plain

  • Osmo Pocketは防水ケースに入る
  • 未だにハードルが高い水平保持
  • ベンチャーの微妙な製品たち
    • Quark - Stabilizer for GoPro
    • revl Ark
  • DJIから革新的なハンドヘルドジンバル登場。でも微妙。
    • 防水ケースの仕様がいまいち
  • 致命的に狭い画角
    • 撮影可能範囲をざっくり計算
  • まとめ
続きを読む

Kusanagiをyum updateしたらSSHログインできなくなったときの対処法

先日Kusanagiをyum update したらSSHログインできなくなった。

firewalldもアップデートされたので設定ファイルが上書きされてしまったことが原因。


Update前は「/usr/lib/firewalld/services/ssh.xml」を編集してsshポートを22から任意のポートに変更していた。

<?xml version="1.0" encoding="utf-8"?>
 <service>
 <short>SSH</short>
 <description>Secure Shell (SSH) is a protocol for logging into and executing commands on remote machines. It provides secure encrypted communications. If you plan on acc    essing your machine remotely via SSH over a firewalled interface, enable this option. You need the openssh-server package installed for this option to be useful.</description>
 <port protocol="tcp" port="[任意のポート]"/>
</service>


しかし本来「/usr/lib/firewalld/services/ssh.xml」は変更するべきでなく「/etc/firewalld/services」にコピーしてから使うべきだった。

firewalld.org

cp /usr/lib/firewalld/services/ssh.xml /etc/firewalld/services/ssh.xml


「/etc/firewalld」はデフォルトのセッティングを上書きするがupdateの影響を受けない。
WordPressの子テーマ的な感じ。


基本的な設定ミスだけどヒヤッとしたので今後気をつけよう。