Fly higher! Sky is the limit!

webの現場で働く人のブログ

Webの現場で使えるテクニック集まとめ(完全メモ帳)

Webの現場でたまに使うけど忘れてしまい、またググるみたいな記事やこれだけは読んどけ的な記事を載せていきます。
完全メモ帳なので、随時更新していきます。

CSS

天地中央

.hoge{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
 }

https://coliss.com/articles/build-websites/operation/css/css-centering-vertically-and-horizontally.html
天地中央ってよく使いますよね。

CSS3を使った新しい画像置換の方法

https://kojika17.com/2011/03/css3-image-replacement.html

セレクトボックスをいい感じにするデザイン

https://copypet.jp/797/
セレクトボックスのスタイルとか忘れがちなので大分参考になります。

JavaScript

クラス名(class属性に値)を削除(IE9有)

http://shanabrian.com/web/javascript/remove-class.php
もうほとんど使う事ないけど、IE9対応有りであれば参考になります。

Ajax

https://qiita.com/tonkotsuboy_com/items/0722ad92f370ab0c411b
then()いうメソッドを使ってECMAScript 2015のPromise風のコードが使えます。

ブラウザバック禁止

https://qiita.com/masashi68/items/d53f2195dde0712e641f
ブラウザバックってペナルティ受けそうですが...たまにある要望です。

Cookieが有効かどうかを確認する。

1.変数宣言(フラグ判定用)
2.Cookie にダミー Cookieを書き込む
3.書き込めた場合、Cookieの値を過去日付にして削除し、有効フラグを立てる

let cookieFlag = false;
document.cookie = "cookie_dummy=cookie_dummy";

if(document.cookie.length){
//Cookie有効化
  cookieFlag = true;
  document.cookie = "cookie_dummy=cookie_dummy;expires=Thu, 01 Jan 1970 00:00:00 GMT;"
}else{
 //Cookie無効化
}  

その他、HTMLとか制作環境まわりなど

aria-hidden="true"」と「speak: none;」

http://blog.e-riverstyle.com/2015/02/aria-hiddentruespeak-none.html

noindex,nofollow

https://digital-marketing.jp/seo/about-noindex-and-nofollow/
noindex,nofollowの仕組みや利用タイミングなど

Gitとがクローンできない場合

環境変数とか疑え。

nodeがインストールできない。

proxy設定とかを疑え。

$ npm config set proxy http://proxy.example.com:8080

https://qiita.com/tenten0213/items/7ca15ce8b54acc3b5719

バージョン指定、gulpインストール方法

$ npm install --save-dev gulp@x.xx.x

html差分ツール

https://chrome.google.com/webstore/detail/html-diff-check-tool/fjbonpakihikkocmockbkndhooihpijo
めっちゃ便利

Vue.js初心者向け:インラインテンプレートから単一ファイルコンポーネントの使い方まで

https://qiita.com/sygnas/items/c0228eabbb3157766d5c
単一ファイルコンポーネントの理解

jQueryを使用しない現在地表示(ES6:JavaScript)

お久しぶりです。
もうES2015(ES6)を使用すれば、大分楽な時代になりました。
なんとなくjQueryを使用しない現在地表示のJavaScriptを記述したのでご自由にお使いください。

想定されるhtml

<ul class="element">
  <li><a href="/aaa/">りんく1</a></li>
  <li><a href="/bbb/">りんく2</a></li>
  <li><a href="/ccc/">りんく3</a></li>
</ul>

JavaScript

const dir = location.href.split('/');
const dir2 = dir[3];
let glovalNav = document.querySelectorAll('.element a');

glovalNav = Array.prototype.slice.call(glovalNav, 0);
glovalNav.forEach( (element) => {
  if(dir2 !== '' && element.getAttribute('href').match(dir2)){
    /*aタグにclass付与する場合*/
    element.classList.add('active');
    /*
      親要素 liタグにclass付与する場合
      element.parentNode.classList.add('active');
    */
  }
});
  1. 現在閲覧しているURLを取得し、/(スラッシュ)ごとでスプリットして分割する
  2. 第二階層のdir[3]を格納
  3. ターゲットとなる要素の a要素を指定
  4. a要素のhrefが、2で取得した第二階層と一致しているか確認し、一致した場合 classを付与
    ※ トップページのみ第二階層を持たないので、第二階層が空でないことも確認

IE11でも動くようにしたい場合は、以下。

"use strict";
var dir = location.href.split('/');
var dir2 = dir[3];
var glovalNav = document.querySelectorAll('.element a');
glovalNav = Array.prototype.slice.call(glovalNav, 0);
glovalNav.forEach(function (element) {
    if (dir2 !== '' && element.getAttribute('href').match(dir2)) {
        /*aタグにclass付与する場合*/
        element.classList.add('active');
        /*
          親要素 liタグにclass付与する場合
          element.parentNode.classList.add('active');
        */
    }
});

JSONジェネレータを作る(Vue.jsとかJavaScriptとか)

!!!いきなり完成品!!!!

See the Pen JSON GENERATOR by paradox_tm (@takumaro-web) on CodePen.

作成手順

1. JSONを用意して、HTML上に表示する。

{
    "name": "安室奈美恵",
    "sex": "女性",
    "age": "41"
}

私が今回利用したサイトはこちら(というかいつも利用している。)
http://hilite.me/

2. 値が変わるところを書き換えていく。

JSONジェネレータを作る(Vue.jsとかJavaScriptとか)

※ 大枠のmain要素に#generatorも追加してます。

JS - code

var createJson = new Vue({
  el: '#generator',
  data: {
    name: "安室奈美恵",
    sex: "女性",
    age: "41"
  }  
});

3. それぞれの値を変更できるようにinputタグを用意する。

これでリアルタイムにJSONの値を変更することができる。

JSONジェネレータを作る(Vue.jsとかJavaScriptとか)

エアロスミスは、バンドやし!バンド結成から48年やし(2018年現在)!

JSONをダウンロードするためのJSを記述

var test;
function json_create() {
  test = [
      {
          "name": "安室奈美恵",
          "sex": "女性",
          "age": "41"
      }
  ];
}

function json() {
  var data = JSON.stringify(test);
  var a = document.createElement('a');
  a.textContent = 'Download JSON' //ボタンの文言を定義
  a.download = 'test.json'; //JSONの名前を定義
  a.href = window.URL.createObjectURL(new Blob([data], { type: 'text/plain' }));
  a.dataset.downloadurl = ['text/plain', a.download, a.href].join(':');
  var exportLink = document.getElementById('download');
  exportLink.appendChild(a);
}json();

参考サイト https://kuroeveryday.blogspot.com/2015/07/javascriptExportFile.html

値をリアルタイムで監視し、生成するJSONの中身も書き換えていく

ここが今回のミソ。

function jsonGenerat() {
  test = [
      {
          'name': createJson.$data.name,
          'sex': createJson.$data.sex,
          'age': createJson.$data.age
      }
  ];
}

createJson.$watch('name', function (newValue, oldValue) {
   document.querySelector('#download a').remove();
   jsonGenerat();
   json();
})
createJson.$watch('sex', function (newValue, oldValue) {
   document.querySelector('#download a').remove();
   jsonGenerat();
   json();
})
createJson.$watch('age', function (newValue, oldValue) {
   document.querySelector('#download a').remove();
   jsonGenerat();
   json();
})
  • 生成するJSONの中身もinputタグで書き換えられた内容にする
  • ダウンロードリンクも新しいものになるように毎回上書きをおこなう

これでJSONジェネレータの完成!!!

あまり難しいテクニックもなく、このようなジェネレータを作ることができました。
あなたの日々の更新が少し楽になるかもしれません。

以上です。

平成も終わろうとしているのにjQueryにヤラレル

事象

Google ChromeFirefoxのコンソールからJavaScriptを実行するとエラーが起きないのにサーバーにそのJavaScriptをアップすると謎のエラーが起きる。

エラー内容

Google Chrome
Cannot read property 'replace' of undefined

Firefox
TypeError: e is undefined

そもそも、replaceなんてしてないし、eが定義されてないってなんだ..?
久々に苛立ちと焦りが...これはIE6を対応していた頃を思い起こさせるような感じであった。

仕方がないので1行ずつデバックしてみる。

苛立ちや焦りは、良い波紋をうまない。
よって、安定した呼吸をしながら1行ずつデバックする必要がある。

原因発見

以下のソースが犯人のようだ

$('.className').prev('.className').css({"display":"block"}).text('やれやれだぜ。');

一見、正しそうに見える。いや、むしろ正しい。
しかし、なぜだか「cssのメソッドチェーン」ところでこける...
css({"display":"block"}) → show()にしたら、ケロッと動いた。
まったく「やれやれだぜ。」

一言

そもそもclassで出し分けすればいいのになんでこんなめんどくさいことをしないといけないかは、
システム絡みの大人の事情ということで、お察しください。
恐るべし、jQuery

WordPress(ワードプレス)の投稿内でJavaScriptを実行するTips

この記事は以下の現象の人におススメの記事です。

  • JavaScriptを記述したのになぜかpタグに書き換えられてしまう。
  • 複数人で更新しているため、できれば自分の投稿(固定)ページのみに適応させたい。
  • 事情によりサイト共通部分(php)は弄れない。

など

WordPressの投稿内でJavaScriptを実行する方法

以下のページを読めば、大体方法はわかる。

WordPressの記事内にJavaScriptを挿入する4つの方法
https://minory.org/wordpress-javascript.html

WordPressの投稿でjQueryJavaScriptを使う方法
https://itstudio.co/2015/07/24/4455/

こちらのページで解決されたら、この記事にはもう用がない。

しかし...

divで囲んでも『jQuery』と接頭辞をつけてもJSコードがpタグに書き換わってしまう場合

こちらの方法でpタグに書き換わってしまうのを阻止すればええやん」と声が聞こえてきそうだが、複数人でサイトを管理しており、勝手にプログラムを修正したら他の人にも影響が出てしまうので不可能という状況の場合、どうするか。

悩んだ結果...解決策が浮かんだ。

それは、JavaScriptの難読化だ。

JavaScriptの難読化

  • 難読化させることでpタグになるのを回避させる!
  • さらにセキュリティ面も向上するので一石二鳥!

我ながら、「キタコレ」と思った瞬間であった。

手順

http://utf-8.jp/public/aaencode.html

  1. 上記のサイトにアクセスし、自分がかいたJavaScriptを張り付ける
  2. 記事内にコピぺする

難読化できるサービスはいくつかあるが、とりあえず顔文字のやつは動いてくれた。

めでたし、めでたし。
少しでもお役に立てれば幸いです。

以上

無料画像編集ソフト「Pixlr Editor」の広告が邪魔だから、消すブックマークレットつくった。

普段、Photoshopを使用しているので私は必要はないんですが、作ってくれと頼まれたのでつくった。
以下のブックマークレットをブックマークに登録し、「Pixlr Editor」のページを開いた状態でポチっと押せば消える。

ソースコード

javascript:(function(){!function(c,b,a){a=c.createElement("script");a.src="//j.mp/1bPoAXq";a.onload=function(){b(jQuery.noConflict(1))};c.body.appendChild(a)}(document,function(a){a("body").css({"padding-right":"0"});a(".ad-wrap").remove()})})();

サイト

https://pixlr.com/editor/