2017-11-28

もうclassの付与とか剥奪ならこんなに短くかけるのか。

すみませんッ！ブログさぼってました。
今回も大した内容ではないですが、メモです。

もうclassの付与とか剥奪だけならこんなに短くかけるのか

ということでソースとDEMOです。

ソース

let btn = document.querySelector('.btn');
btn.addEventListener('click', function(e) {
  btn.classList.toggle('active');
});

DEMO

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

各種ブラウザ対応状況

https://kangax.github.io/compat-table/es6/

2017-10-23

最近見つけた超カオスなユーザーエージェント

最近みつけた超カオスなユーザーエージェントがある。
それがこれだ。

カオスなユーザーエージェント

mozilla/5.0 (windows nt 10.0; wow64; trident/7.0; touch; .net4.0c; .net4.0e; .net clr 2.0.50727; .net clr 3.0.30729; .net clr 3.5.30729; tablet pc 2.0; rv:11.0) like gecko

なんということでしょう。

Windows10でIE11なのに“touch”端末でしかも“tablet”であり“pc”である。

おいおいおい。マジかよ。
正気じゃねぇーぜ兄貴。

条件分岐を増やせば、出し分けができるかもしれないけどもうここまできたらユーザーエージェントによるコンテンツの出し分けはやめて、すべてレスポンシブ対応にしましょう！

ちなみに以下の端末っぽい。
https://www.amazon.co.jp/HP-x2-210-P5U14AA-ABJ/dp/B01MYD7RWW

2017-08-25

［Chrome］セキュリティ警告を出すようになるらしい。

Googleからこんな通達が届いた。

2017 年 10 月より、ユーザーが Chrome(バージョン 62)で HTTP ページのフォームにテキストを入力すると、「保護されていません」という警告が表示されるようになります。

非SSL環境だと安全でないと判断されるようになるようだ。

セキュリティの観点から個人情報やパスワードとかプライベートな情報を送信するページであったら、入力した情報がハッカーに盗まれないように警告が出るのはありがたいけど、なぜ検索フォームでも出るようになるんだろうか…。

f:id:paradox_tm:20170825171332p:plain

f:id:paradox_tm:20170825171415p:plain

ブラウザの仕様とはいえ、仕方がないが今後HTTPS 移行は避けられなさそう。

尚、 Chrome ブラウザの仕様変更なので、検索アルゴリズムの影響はない模様。

2017-07-28

好きなツイートを自分で選択してグリッド形式でWebサイト上に表示する方法（Tweet Gridの使い方）

「Tweet Grid」が発表になったのは2015年でかなり今更感あるけどあんまり日本語記事が出てこないので備忘録としてまとめておきやす。

「Tweet Grid」とは？

好きなツイートを自分で選択してグリッド形式でWebサイト上に表示する方法。
カスタマイズ可能で見た目も美しい。

サンプルを見たほうが早いので以下のDemoページで確認ください。
https://codepen.io/takumaro-web/full/LjpWpg/

手順

TweetDeckにログインする。
https://tweetdeck.twitter.com/
※ ツイッターのアカウントとパスワードが必要
左側のメニューの一番下の「＋」を押す。
「Choose a column type to add」の中から「Collection」を選択
「＋ Create collection」を押す
「Name」と「Description」を適当に入力（省略可）
画面上に新しいカラムが表示されるので表示させたいツイートを検索してドラッグ&ドロップ
※ このボタン押しながらドラッグ&ドロップ
上のメニューボタンを押して「Share」→ 「View on twitter.com」を選択
Twitter画面が立ち上がるので表示されたURLをコピー！！
https://publish.twitter.com/ こちらにアクセスし8でコピーしたURLを貼り付ける。
Copy Codeでコードをコピーし、Webサイト上に貼り付けて完了。
※ set customization optionsで変更してもよい。

表示させたいツイートを変えたい場合は、TweetDeck上で編集すればよいから非常に楽だ。
是非、お試しください。

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

機能

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

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

では、また。

Fly higher! Sky is the limit!

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

もうclassの付与とか剥奪ならこんなに短くかけるのか。

もうclassの付与とか剥奪だけならこんなに短くかけるのか

ソース

DEMO

各種ブラウザ対応状況

最近見つけた超カオスなユーザーエージェント

カオスなユーザーエージェント

なんということでしょう。

［Chrome］セキュリティ警告を出すようになるらしい。

好きなツイートを自分で選択してグリッド形式でWebサイト上に表示する方法（Tweet Gridの使い方）

「Tweet Grid」とは？

手順

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

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

nodistとは

コマンド

手順2：npmの指定

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

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

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

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

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

参考

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

jQueryでつくったサンプル

脱jQueryすっぞ。

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

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

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

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

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

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

エラーになる記述

エラー内容

解決策

プラグインつくりました

DEMO

機能