Memo | ページ 6

HOME
Diary
Cate: Memo

18/10/19

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

よくわからないイベントのリードを考えないといけない場合。

人を集めるのが目的
ブースでなにをやるかわからないので何をするかなどは考えずイベントの趣旨や会場などをさらりとリードにする感じ。
ふんわりさっぱり。

最終更新日：18/10/05

18/10/01

Memo

やっと原因がわかった。

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

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

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

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

最終更新日：18/10/01

18/09/23

Memo

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の環境でも若干変化がある感じではある。

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

最終更新日：18/09/25

18/09/13

Memo

いまさらだけど

すっかり忘れていてつまづいたので
Wordpressでフロントページの設定をしているとis_home()のチェックを抜けてしまう。
またメインクエリもフロントページに設定したページのクエリに変わる。
まっさらの状態から作っているのではなくデータベースを移して使用している場合には固定ページが
フロントページに設定されていないかどうか注意。

最終更新日：18/09/13

18/09/11

Memo

さくらのSSLの更新

ラピッド

申請
振込確認とか
メール通知
会員メニューより認証ファイルをDL。
指定の場所にアップ
その際にブラウザでアクセスできるかの確認。
場合によっては.htaccessの編集。
認証ファイルアップ後に再度メール通知（SSLの証明書の発行通知メール）
会員メニューに移動し証明書をDL
サーバーのコンパネに移動
中間証明書の更新（SSLの証明書発行通知のメールにリンク先あり）
SSL証明書の更新

＊DLしたファイルをテキストエディタで開き内容をすべてコピペ。

SSLの更新忘れはダメよ。

最終更新日：18/09/11

Page 6 of 39« First ‹ Prev 2 3 4 567 8 9 10 Next ›Last »