ニコニコ動画のコメント取得のスクリプトが

動かなくなっちゃってしばらく経つ。
次回のコメント返信までに解決策を考えておかないとなー。
プラグインが動かないのか
JSが動かないのか
XMLの取得がかわったのか
アイコンも表示されてないから
Firefoxのバージョンアップが原因かなぁ。

あとCeVIOのインポートテキストを吐き出すプログラムをAjaxで現在のサーバーで動かすように変更中。
毎回ローカルでXAMPを立ち上げて動かすのもちょっと面倒になって来た。
そんなに頻繁にやる作業じゃないけど、まぁせっかくだしね。

Ajaxの通信で非同期にしろとのこと

あと追加できになったこと

	url: ajaxurl,
	dataType: 'json',
	async: true,
	type: 'POST',

async: true,

ここをfalseにしているとコンソール画面でお説教がでてくる。
非同期通信の設定が推奨されているということみたい。
けど通信が完了しないとと表示できないものなんかもあるしまたややこしいことになりそうだ。

gulpのwacthの停止の方法

コントロール+c
で停止。

家のWinに会社に近いコーディング環境を作っておこう。
エディタ
Atom
パッケージ
show-ideographic-space
Japanese-menu
platformio-ide-terminal
emmet
キーマップに追加

'.platform-darwin atom-workspace':
  'alt-cmd-t': 'platformio-ide-terminal:toggle'

エメットの展開はデフォルトだとタブキー

gulp-ejsの設定。


作業ディレクトリ
- src/(開発環境)
-- assets/
--- sass/
--- img/
--- css/
--- js/
-- ejs/(テンプレートフォルダ)
--- util/(テンプレート関数)
--- parts/(ヘッダー等)
- dist/(本番環境)
-- assets/
--- img/
--- css/
--- js/
package.json
gulpfile.js

ejsの中身
● index.ejs

<%
	var option = {
		subtitle: "ああああはあああ",
		description: "index",
	} 
%>
<%- include('parts/_head',{absPath:filename , option:option }) %>
  <body>
<main>
ddddd

</main>
<%- include('parts/_footer',{absPath:filename , option:option }) %>
  </body>
</html>

● parts/header.ejs

<%- include('../util/_filepath',{absPath:filename}) %>
<%- include('../util/_description') %>
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width">
    <meta name="keywords" content="">
    <meta name="description" content="<%= description(option) %>">
    <link rel="stylesheet" href="<%= pathSet(absPath) %>assets/css/style.css">
    <title>サイトタイトル<%= subtitle(option) %></title>
  </head>
<header>
	<nav>
		<ul>
			<li>
				<a href="<%= pathSet(absPath) %>">Home</a>
			</li>
			<li>
				<a href="<%= pathSet(absPath) %>about">About</a>
			</li>
		</ul>
	</nav>
</header>

● parts/footer.ejs

<footer class="footer">
ふったー
</footer>

● util/_description.ejs

<%
 description = function(option){
    if( !option.description){
	    return 'デフォルトテキスト';
    }else{
        return option.description;
    }
 };
  subtitle = function(option){
    if( !option.subtitle){
	    return ' | のんびり日記';
    }else{
        return ' | '+option.subtitle;
    }
 };
%>

● util/_filepath.ejs

<%
 pathSet = function(absPath){
    var rootPath = absPath.split('src/ejs')[1];
    if(rootPath.split('/').length - 2 > 0){
        return '../'.repeat(rootPath.split('/').length - 2);
    }else{
        return '';
    }
 };
%>

動かすのに必要な要素
gulp-data
gulp-ejs

基本のテンプレートにオプションの値をつけタイトル名の追加やディスクリプションの上書きをさせている感じ。
実務ではまだ使っていない草案の状態なのでもっと変わるかもしれない。
実際の案件によっても構造も違うしね。
jsonファイルを使ってテンプレートのディレクトリとファイル名からディスクリプションの設定をしようとも考えたけど
学習コストが高そうなのでとりあえず実務で一度ためしてから問題点を出してみる。

テンプレートエンジンのメモ

ttps://stella-design.biz/2017/01/01/235346.html
gulp-ejs でHTMLの編集をカンタンにする
ttps://www.syngram.co.jp/blog/4824
テンプレートエンジンEJSで使える便利な構文まとめ
ttps://qiita.com/y_hokkey/items/31f1daa6cecb5f4ea4c9

プラグインのSSL対応

●プラグイン
・jQuery Colorbox
最新の状態に更新するとレイアウトが崩れるので現状維持。

・スキーマーにhttpが記述されていたのでssl対応に読み込めないので修正対応。
jquery-colorbox/includes/jquery-colorbox-frontend.php

261行目付近

  function addJQueryJS() {
    if ($this->isTrue('useGoogleJQuery')) {
      if ($this->isTrue('debugMode')) {
        $jQueryLibraryUrl = "//code.jquery.com/jquery-".JQUERYLIBRARY_VERSION.".js";
      }
      else {
        $jQueryLibraryUrl = "//code.jquery.com/jquery-".JQUERYLIBRARY_VERSION.".min.js";
      }

      wp_deregister_script('jquery');
      wp_register_script('jquery', $jQueryLibraryUrl, false, JQUERYLIBRARY_VERSION, true);
    }
    //enqueues WP's jQuery library if useGoogleJQuery==false
    wp_enqueue_script('jquery');
  }

sassのメモ

モジュール化されたSCSSファイルはパーシャルという「_」を付けた読み込み専用ファイルにしてstyle.scssに読み込ませる。
その際は
@import “layout”;
_layout.scss
@import “content”;
_content.scss
となるよ。

あと
@import url();
を使う場合はカッコの中身をダブルクォートで囲む必要があるコンパイラーもあるので囲っておいた方がよい。
またhttpやhttpsのスキーマーはない状態で記述するのが良いかなと思う。
サイトを途中でssl化する場合などもあるのだろうし
その辺を先に見越した読み込みにする必要があると思う。

やっと原因がわかった。

どうも不自然に自分のサイトを見たときにブラウザが止まる。
サーバーを移管したせいかどうなのかも含めて判断がつかなかったけども
クエリーモニターやらいろいろ試して細かく確認していっても自分のphpには問題がなかった。

ページによってはスムーズに表示できるからもしかしてプラグイン?と思い探って見ると
Syntax Highlighterが原因っぽかった。
ほかのプラグインをいろいろ探しても現状と同じような使い方をできるものが少なくちゃんと表示されないので
どうしたものかと悩む。

ちょっとプラグインの設定でどうにかできないかと見て見るとSyntax Highlighterのプラグインのバージョン違いというものがあるようで
設定を変更し余計な挙動を行わないように再度保存。

無事に正常なタイミングで表示されるようになる。
はー、よかったよかった。

SnapUpがめっちゃ便利じゃない?

さくらで初めて知って自分のサイトのサーバー移管のためにちょっと触ってみたのだけど。
(そのときはちゃんと使えなかったけど
いろいろ調べてみたらすごいなぁ。
もう1回サーバー移管してみようかな。

というわけでphp7.28モジュールに対応してついでにSSLの対応もしました。
そのほかの対応もしたのでグーグルスピードチェックが55から95まで上がりました。
うーん、どんだけほったらかしだったんだって話だー。

php7.2cgiでも体感できる速度差だったけどそれ以上に動作が速い。
昔はうぃいいいいいいいいん、ぽ〜〜〜ん。
という感じだったが、今はきゅっきゅ。って感じがする。

SnapUpはメールアカウントの移行までは行えない感じかな?
あくまでWebサイトだけの話なんだろうか。
要検証。

初期ドメインからSSL化した独自ドメインにリダイレクトするように変更。

これで一通りの作業が終わりかな?

変更されないファイルがある。(Wordpressの設定だからなどいろいろあると思うけど
wp-config.php
.htaccess
データベース名とか

最初に手動でデータを移動してWordpressの移行をしているので
その辺りの場合でもデータベースの中身はちゃんと移動していた。
サーバーのファイルも更新されている。
データベースの中身が移動されているのでプラグインによってはエラーを出すものものある。
・保存先のディレクトリのパスが変わる場合ことなど
・例:本番[home/test_a/www/] 移行元[home/test_old/www/]
などの違い。
まるまる移行するのでそのこと念頭におく。

SSLの環境でも若干変化がある感じではある。

便利な部分はあるけどちゃんと挙動を知っておかないといけないな。
いろいろかんがえるとちょっと便利だなという感じ?