Fly higher! Sky is the limit!

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

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

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

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

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

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

f:id:paradox_tm:20170825171332p:plain

f:id:paradox_tm:20170825171415p:plain

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

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

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

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

「Tweet Grid」とは?

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

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

手順

  1. TweetDeckにログインする。
    https://tweetdeck.twitter.com/
    ツイッターのアカウントとパスワードが必要
  2. 左側のメニューの一番下の「+」を押す。
    f:id:paradox_tm:20170728150543p:plain

  3. 「Choose a column type to add」の中から「Collection」を選択

  4. 「+ Create collection」を押す

  5. 「Name」と「Description」を適当に入力(省略可)

  6. 画面上に新しいカラムが表示されるので表示させたいツイートを検索してドラッグ&ドロップ
    f:id:paradox_tm:20170728151034p:plain このボタン押しながらドラッグ&ドロップ

  7. 上のメニューボタンを押して「Share」→ 「View on twitter.com」を選択
    f:id:paradox_tm:20170728151132j:plain

  8. Twitter画面が立ち上がるので表示されたURLをコピー!!

  9. https://publish.twitter.com/ こちらにアクセスし8でコピーしたURLを貼り付ける。

  10. Copy Codeでコードをコピーし、Webサイト上に貼り付けて完了。
    ※ set customization optionsで変更してもよい。

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

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

手順1: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 なのw(2017年7月現在)

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

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

参考

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

【脱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の中身ももしかしたら、もっとうまいことできるのかもしれません…。 やりたい事は明確なのに、記述方法がわからないということが多々あったので今後はこの辺を勉強していきたいです。

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

フリック操作時のエラー(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

機能

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

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

では、また。

[ネタ?]コピペで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

以上ネタ記事でした。

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

正解:「うんこ」

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

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

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

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