2017-07-19

node.jsのアップデートとかnpmとか

手順１：nodistのインストーラー

https://github.com/marcelklehr/nodist/releases/

環境変数の設定とかすべてやってくれるので最新版をインストールすればOK。
めっちゃ楽だ。

nodistとは

Windowsでnode.jsのバージョン管理をするのに便利なやーつ。

コマンド

アップデート
nodist update

最新の安定板をインストール
nodist stable

インストール可能な node バージョンを確認
nodist dist

node.jsの最新バージョンを表示
nodist latest

指定バージョンのnode.jsをダウンロード
nodist add v6.11.1

切り替え
nodist use v0.10.32

一覧を表示
nodist ls

npmのバージョン指定
nodist npm 5.x

手順2：npmの指定

node - v でバージョンを確認してnpmを使えると思いきや、使えないのでnpm のバージョンも指定してあげる。

npmのバージョン指定
nodist npm 5.x

最新版を指定したければ、npmのバージョンを指定後に以下のコマンドを叩く。
npm install npm

とりあえず、これでアップデート完了！！
ってかnodeのバージョンの最新版って、v8.1.4 なのｗ（2017年7月現在）

手順3 既存プロジェクトで使用しているgulpとか動くか確認

大体動かないので、npm init からすべていれ直す。

Local gulp not found が出た時の対処法

npm link gulp

Node Sass could not find a binding for your current environmentが出た時の対処法

npm rebuild node-sass

Could not read response for https://nodejs.org/dist/index.jsonが出た場合

$ set HTTP_PROXY=http://proxy.server.co.jp:8080

ホスト名の proxy.server.co.jp は自分の環境にあわせて編集
ポート番号の 8080 も自分の環境にあわせて編集

エディターのコマンド/ターミナルは使うな。

PCに入っているコマンド・ターミナルから使うと動く。エディタのやーつだとエラーを吐き出す可能性あり。

参考

http://qiita.com/yokoh9/items/20d6bdc6030a3a861189 http://qiita.com/shika358/items/0be01167d02c1abec186

2017-06-13

【脱jQuery】YouTubeから取得したプレイリスト（JSON）をVue.jsで表示してみた。

「昔作ったサイトをVue.jsで書き換えています。」的な記事をチラホラみかけるので私も勉強がてらに実装してみました。
※ 本記事では、YouTubeからプレイリスト（JSON）を取得するところの説明は省いております。
（ググれば優秀な記事がたくさん出てくるので…）

jQueryでつくったサンプル

https://codepen.io/takumaro-web/pen/dNepxr

今回はこちらのソースをVueに書き換えていきます。

脱jQueryすっぞ。

XHRライブラリは、「ajax」の代わりに「axios」を使用します。
Vue.jsの公式ページでもオススメしているのでこちらでよいかと思います。

axios.get('https://www.googleapis.com/youtube/v3/playlistItems', {
    params: {
      part: 'snippet',
      playlistId: '******************************', /*Youtubeのplaylist id*/
      maxResults: 9, /*表示する動画の数*/
      key: '******************************' /*アクセストークンを指定*/
    }
  })
  .then(function 

(response) {
    initVue(response.data.items);
  })
  .catch(function 

(error) {
    console.log(error);
  });

こんな感じで取得完了！
直感的で結構シンプル！Angularの$httpっぽい！

さっそくVueで書き換えていく。

htmlから書き換えていく。

手順1：生成させたいhtmlをとりあえずかく。

テンプレート的なものになるので完成形をイメージしながらそれっぽくかく。
ポイントは、とりあえずVueで処理するところは{{ }}でかこっておく。

<ul id="list">
  <li>
    <a href="{{}}" >
      <img src="{{}}">
      <span class="title">{{ }}</span>
      <span class="des">{{ }}</span>
    </a>
  </li>
</ul>

手順2： Vueで操作するhtmlをかきかえていく。

li がループされていい感じに表示されればよいから「v-for」を使う。
v-for を使うときに後々、「何番目の要素が押されたか？」的な話になるので「(item,index) in items」で指定する。
とりあえず、aタグにはv-on:clickを指定し動画を選択できるようなイメージをもたせておく。
hrefとsrcは、v-bindで指定しないと動かないのでこちらを指定しておく。
テキストは{{ JSONの中身 }}を指定しておく。

<ul id="list">
  <li v-for="(item,index) in items">
    <a v-on:click="movieDetail(index)" v-

bind:href="item.snippet.resourceId.videoId" >
      <img v-bind:src="item.snippet.thumbnails.high.url">
      <span class="title">{{ item.snippet.title }}</span>
      <span class="des">{{item.snippet.description }}</span>
    </a>
  </li>
</ul>

これでなから(※)html側の準備は完了しました。
※ なから：地元長野の方言で大体という意味。

手順3： Vue.jsをつかってjsをかいていく。

ターゲットとなる要素を指定し、dataには配列（items）を指定する。
これでインスタンスが生成されたのでcreatedフックで、取得したデータ分だけfor文でまわしデータを格納していく。
methodsを使用し、data（this）にアクセスする。
※ 今回は、methodsの中身は生のJavaScriptを記述してみました。
JavaScriptの記述に合わせて、htmlも多少修正。

  function initVue(moveInfo){
    var vm = new Vue({
      el: "#list",
      data: {
        items:[]
      },
      created: function(){
          for(var i = 0; i < moveInfo.length; i++){
             this.items.push(moveInfo[i]);
          }
      },
      methods: {
        movieDetail: function (index) {
          var videoId = this.items[index].snippet.resourceId.videoId;
          var title = this.items[index].snippet.title;
          
          var mainVideoElem = document.querySelector('#main-video');
          
          //削除処理
          var move = document.querySelector('iframe');
          var moveTitleElem = document.querySelector('#moveTitle');
          mainVideoElem.removeChild(move);
          
          //追加処理
          var iframe = document.createElement('iframe');
          iframe.src = 'https://www.youtube.com/embed/'+ videoId +'?rel=0';
          iframe.width = "600";
          iframe.height = "315";
          mainVideoElem.appendChild(iframe);
          moveTitleElem.innerHTML = title;
        }
      }
    });
  }

感想「とりあえず動くものが完成！！」

https://codepen.io/takumaro-web/pen/owgbMm

探り探りな部分もありましたが、なんとか形になりました。 methodsの中身ももしかしたら、もっとうまいことできるのかもしれません…。やりたい事は明確なのに、記述方法がわからないということが多々あったので今後はこの辺を勉強していきたいです。

アドバイスがある方は、是非コメントくださいませ。

2017-06-13

フリック操作時のエラー（Firefox）

本日はフリック操作時のエラーについてです。
過去にも何度かうまくいかず原因を解明しては、忘れてしまっていた内容なので備忘録として残しておきます。

エラーになる記述

e.changedTouches[0].pageX
event.changedTouches[0].pageX

エラー内容

e.changedTouches is undefined
event.changedTouches is undefined

解決策

e.originalEvent.changedTouches[0].pageX
event.originalEvent.changedTouches[0].pageX

※ event.originalEventオブジェクトにアクセスすることで取得できるようになる。
（参考：http://api.jquery.com/category/event-object/）

プラグインつくりました

これを機にカルーセルのプラグインも作りました。
自分用に作ったので詳しい解説しません（笑）
（できれば、コンバージョン率も低くなると言われているカルーセルは使いたくないですが…）

DEMO

carousel slider flick responsive

機能

クリック操作
フリック操作
レスポンシブ対応
カレント表示
画像が１枚のときはボタン非表示
リサイズ対応（ランドスケープ対応）
スピード調整
無限ループ無し

など…
自由にお使いください。

では、また。

2017-05-18

［ネタ？］コピペでOK!JavaScriptでなんちゃって認証をつくる。

f:id:paradox_tm:20170518185323p:plain

htaccessを用意できないなんて時に気休めくらいに使って頂ければと思います。
「なんちゃってでもいいから、とりあえず認証かけておこう！！」みたいな時にオススメです。

今回使用するJavaScriptソース

document.body.style.display = "none"; 

var inputText = prompt("パスワードを入力して下さい☆","");
var x = [];
var len = inputText.length;

for(var i = 0 ; i <len; i++) {
   x[i] = inputText.charCodeAt(i);
}

if(x == '12358,12435,12371'){
   document.body.style.display = "block";
}else{
   location.href = "https://www.google.co.jp/";
}

これだけです。
これをbodyタグの前にベコっと貼り付けてください。

この「12358,12435,12371」をみてパスワードがわかってしまった人は相当な変態か神か凄腕技術者です。
大抵の人はわからないと思うので大丈夫かなーと思います。
※ あくまでなんちゃって認証なので。

この数字を設定するヒントは、以下の記事を参照ください。

paradox-tm.hateblo.jp

以上ネタ記事でした。

この認証の正解は下にあります。

正解：「うんこ」

2017-03-27

【SVG】ホバーで円アニメーション

メモです。
IEは動きません。

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

ソースはコードペンを参照ください。

2017-02-09

JavaScriptで複数ワード検索品質向上を目指す。

f:id:paradox_tm:20170209163001p:plain

Webサイトを構築する上で必ずルールが存在します。
そのルールの1つが表記。

納品前の成果物に対して「表記揺れ」や「禁止ワード」を効率よく確認できないものかと思いJavaScriptで実装してみました。

イメージ的にはChromeの拡張機能「goodbye “Zenkaku” - さよなら全角英数」を意識しております。
全角英数のみであればこの拡張機能だけでよいのですが、それぞれのサイトによってルールが違うので【調べたいワード】が指定できるものを考えてみました。
※ 【調べたいワード】はJavaScriptにて指定
※ jQuery使用

DEMO

See the Pen JavaScriptで複数検索 by paradox_tm (@takumaro-web) on CodePen.

ロジック

ワードを指定する。
親要素（id、classなど）を指定しその中のhtmlの記述をeachで指定されたワード分だけ探しにいく。
指定されたワードがあった場合、<b>タグで囲み強調させる。
検出されなかった場合、アラートを出す。

自分が運用しているサイトにあったブックマークレットを作成するとさらに効果的！

ワードを指定する。
圧縮する。 ※ JSの頭に「javascript:」をつける。
URL：https://syncer.jp/js-minifier
検索したいページでブックマークレットをポチッ。

サンプルソース

圧縮前

javascript:(function(){
!function(d,f,s){s=d.createElement("script");s.src="//j.mp/1bPoAXq";s.onload=function(){f(jQuery.noConflict(1))};d.body.appendChild(s)}(document,function($){
/**************************************************
*　BOOKMARKLET by jQuery
***************************************************/
var str = [
  "０","１","２","３","４","５","６","７","８","９",
  "Ａ","Ｂ","Ｃ","Ｄ","Ｅ","Ｆ","Ｇ","Ｈ","Ｉ","Ｊ","Ｋ","Ｌ","Ｍ","Ｎ","Ｏ","Ｐ","Ｑ","Ｒ","Ｓ","Ｔ","Ｕ","Ｖ","Ｗ","Ｘ","Ｙ","Ｚ","ａ","ｂ","ｃ","ｄ","ｅ","ｆ",
  "ｇ","ｈ","ｉ","ｊ","ｋ","ｌ","ｍ","ｎ","ｏ","ｐ","ｑ","ｒ","ｓ","ｔ","ｕ","ｖ","ｗ","ｘ","ｙ","ｚ","jQuery"
];

//種類のカウント
var count = 0;
var cssCheck = function(reg,str){
  $("#content").each(function(){   
    var txt = $(this).html();
    //マッチした場合、置き換え
    if(txt.match(reg)){
      //ハイライト
      $(this).html(txt.replace(reg,"<b style='background:#FFFF00;display:inline-block;font-weight:bold;'>"+str+"</b>"));
      count++;
    }
  });
};

//指定ワードのループ
for(var i = 0; i < str.length; i++){
  //変数を検知
  var reg = new RegExp(str[i], 'g');
  cssCheck(reg,str[i]);
}

//検出判定 countは種類を検知する
if(count === 0) {
  alert("検出されませんでした(◍ ´꒳` ◍)b");
}

//処理はここまで
});})();

圧縮後

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(e){var f=["０","１","２","３","４","５","６","７","８","９","Ａ","Ｂ","Ｃ","Ｄ","Ｅ","Ｆ","Ｇ","Ｈ","Ｉ","Ｊ","Ｋ","Ｌ","Ｍ","Ｎ","Ｏ","Ｐ","Ｑ","Ｒ","Ｓ","Ｔ","Ｕ","Ｖ","Ｗ","Ｘ","Ｙ","Ｚ","ａ","ｂ","ｃ","ｄ","ｅ","ｆ","ｇ","ｈ","ｉ","ｊ","ｋ","ｌ","ｍ","ｎ","ｏ","ｐ","ｑ","ｒ","ｓ","ｔ","ｕ","ｖ","ｗ","ｘ","ｙ","ｚ","jQuery"];var d=0;var c=function(g,h){e("#content").each(function(){var i=e(this).html();if(i.match(g)){e(this).html(i.replace(g,"<b style='background:#FFFF00;display:inline-block;font-weight:bold;'>"+h+"</b>"));d++}})};for(var a=0;a<f.length;a++){var b=new RegExp(f[a],"g");c(b,f[a])}if(d===0){alert("検出されませんでした(◍ ´꒳` ◍)b")}})})();