Fly higher! Sky is the limit!

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

好きなツイートを自分で選択してグリッド形式で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.

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

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.

ロジック

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

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

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

サンプルソース

圧縮前

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 = [
  "0","1","2","3","4","5","6","7","8","9",
  "A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","a","b","c","d","e","f",
  "g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","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=["0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","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")}})})();

このブログで実行したイメージ

f:id:paradox_tm:20170209163022p:plain

「おッ、jQueryに反応してる!」

以上です。では、また。