月: <span>2018年10月</span>

HOME
Diary
月: 2018年10月

18/10/31

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

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

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

最終更新日：18/10/31

18/10/29

Memo

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

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

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

async: true,

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

最終更新日：18/10/29

18/10/29

WordPress

php

fullcalendarのイベントの日付の問題。

//終日設定がうまく起動しないので時間をつい1日分の時間を自動で追加　（それに伴い日付の表示をCSSで削除
$start_date = $event_schedule['start_date']."T00:00:00+09:00";
$end_date = $event_schedule['end_date']."T23:59:59+09:00";

WordPressでAjaxをつかってfullcalendarにイベントを掲載しようとしていたときに
ドツボにはまりそうだったのでメモ書き。
現在でもスマートな解決にはなってない。

phpでjonsを返しているが
fullcalendarのallDay（終日設定）を入れても最終日の最後までイベントが開催されていることになっていない。
原因としてはphp側でデータを引っ張って来ている時に足りない部分をfullcalendarが自動変換することが原因のようなことらしい？

現状としてはソースを掲載しているように時間を付け足し
画面上に表示される時刻の表記をCSSで消しているという美しくない実装で終わっている。
う〜〜〜ん。
~~手書きで書いたjson形式のデータだと問題ないから~~ 手書きでも問題あったわ。
もしかしたらphp側のjson_encodeの問題なのかもしれない。
もうちょっとこれは見てみようか。

最終更新日：18/10/29

18/10/19

Memo

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'

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

最終更新日：18/10/19

18/10/18

Memo

作業ディレクトリ - 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ファイルを使ってテンプレートのディレクトリとファイル名からディスクリプションの設定をしようとも考えたけど
学習コストが高そうなのでとりあえず実務で一度ためしてから問題点を出してみる。

最終更新日：18/10/31

18/10/17

Memo

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

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

最終更新日：18/10/17

18/10/17

Memo

プラグインの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');
  }

最終更新日：18/10/17

18/10/11

Memo

HTML

sassのメモ

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

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

最終更新日：18/10/11

18/10/05

Memo