Fly higher! Sky is the limit!

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

【脱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

機能

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

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

では、また。

［ネタ？］コピペで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

以上ネタ記事でした。

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

正解：「うんこ」

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 = [
  "０","１","２","３","４","５","６","７","８","９",
  "Ａ","Ｂ","Ｃ","Ｄ","Ｅ","Ｆ","Ｇ","Ｈ","Ｉ","Ｊ","Ｋ","Ｌ","Ｍ","Ｎ","Ｏ","Ｐ","Ｑ","Ｒ","Ｓ","Ｔ","Ｕ","Ｖ","Ｗ","Ｘ","Ｙ","Ｚ","ａ","ｂ","ｃ","ｄ","ｅ","ｆ",
  "ｇ","ｈ","ｉ","ｊ","ｋ","ｌ","ｍ","ｎ","ｏ","ｐ","ｑ","ｒ","ｓ","ｔ","ｕ","ｖ","ｗ","ｘ","ｙ","ｚ","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")}})})();

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

f:id:paradox_tm:20170209163022p:plain

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

以上です。では、また。

［jQuery不要］［OAuth認証不要］自分のWebサイトにツイートを取得し表示する方法

2017年12月28日更新
仕様変更によりこちらのソースは利用できなくなっておりました。。

Twitterから投稿を取得して自分のWebサイトに表示させるのにAccess Tokenを取得したりOAuth認証させたりで色々手間なんですがそんな手間を省いてくれるありがたいライブラリを発見したので紹介します。

自分のWebサイトにツイートを取得し表示させるTwitter-Post-Fetcher

現在GoogleのWebエンジニアのJASON MAYES（http://www.jasonmayes.com/）さんが開発されたものです。
“Google”というだけで不思議と信頼が生まれるのが不思議ですね。

説明サイト（英文）

http://jasonmayes.com/projects/twitterApi/#sthash.bImrQmll.dpbs

GitHub

https://github.com/jasonmayes/Twitter-Post-Fetcher

説明サイトは英語ですがCodePenのサンプルがあるのでコードを見るとなんとなく使い方がわかると思います。
自分も少しカスタマイズしてCodePenにアップしてみました。

sample

See the Pen Twitter Post Fetcher - compiled -fork by paradox_tm (@takumaro-web) on CodePen.

デザイン次第で素敵にツイートを表示することができそうですね。
※ ご利用の際は免責事項をお読みください。

2016年を振り返って。

もう今年も残りわずかですが、いかがお過ごしでしょうか。
今年ラストの更新になります。

毎年、新しい年の始まりに「今年はやってやるぜ！！」と意気込んで色々目標を立てるのですが本記事はその振り返りになります。
※ 実際に所属している組織とは関係ありません。あくまで個人的な目標（趣味）です。

目標その1 ブログを開設する。

2016年最大の目標でした。
ずっとやるやる詐欺をしていたブログ開設。
約1年間、亀もびっくりなペースで更新してきましたが無事に続けることができました！
まずは御礼申し上げます。ありがとございました！

過去のお話

過去にも数回技術ブログを立ち上げたことがありました。
開設当初は「学んだことをアウトプットしまくって自己研鑽に努めるぜ！！うぇーい！」とノリノリで意気込んでいたのですが、「ブログをせっかくやるならアドセンス（広告）っしょ！」とスケベ根性が邪魔をし誰も閲覧するはずもない自分の記事のアドセンス（広告）をクリックしまくっていたら一銭も収益が出ないままGoogle先生から鉄槌が下されました。
そして アカウントの停止、アドセンスの永久剥奪...。
完全に自業自得でした（反省）。

f:id:paradox_tm:20161226160326p:plain
アドセンスが消えた後の当時のブログ

それがちょうど3年前のお話で最初のブログ構築（wordpress）でした。
しばらくGoogle先生にアドセンスをバンされたことを引きずり「ブログなんてやんねぇー！」と思っておりましたが、心のどこかではモヤモヤが晴れず自問自答の日々を繰り返しておりました。

f:id:paradox_tm:20161226160502p:plain

その事件の半年後くらいに先輩から「Jekyll いいぜ」という話を聞き、とりあえずやってみるかと思いJekyll でブログを開設しました。
しかし...「こうやって、Jekyll って使うんだ！！へぇ～！」で記事を1つ投稿したくらいで満足して閉鎖してしまいました。

その後も友人のブログに寄稿したりもありましたが、継続的にブログを続けるということはありませんでした。

自分のためのブログを開設

元々なぜブログを始めたかったのかを考えた時に一番は自分のためだったことに気付きました。
【学んだこと・悩んだこと・頑張ったこと】を忘れないためにも記録としてとっておきたかったのが一番の理由です。
あわよくば同じ制作者の力にでもなれたらいいなーと思っていたり...
wordpressにしろ、Jekyllにしろ書かなければ意味がないですし継続できなきゃ意味がないと思っていたのでいつでもどこでも更新できそうな『はてなブログ』を選んで開設した感じでした。（あと、なんかスターとかもらえるし）

ブログを1年通して感じたこと。

純粋に閲覧者の反応がおもしろいと思いました。
このブログの流入元の8割が検索エンジンからですが、明らかにアクセスに偏りがあったりスターやSNSのシェア数が無くてもアクセス数が多かったり、解析をしていて面白かったです。

またうれしいことに購読者が5人まで増えたという奇跡が！！
※ 5人の方、こんなヘッポコの記事を購読してくださってありがとうございます！！

そういった閲覧者の反応がモチベーションに変わったりもしました。
今後は、自分のためだけでなく閲覧者にも優しい記事を心がけて書けていければなーと思いました。

今後ともよろしくお願いいたします！！

目標その2 ゲームをつくる。

Twitterを中心に活躍されている某漫画家（友人）とコラボし、主にスマホ向けのWebブラウザゲームを4つほどリリースしました。
リリースしたWebブラウザゲームは以下の4つです。

ではそれぞれについて振り返ってみたいと思います。

連打系ゲーム

漫画に登場するキャラを10秒間でどれだけ叩けるか というめちゃくちゃシンプルなゲームでしたが、叩けた回数に応じて描き下ろし漫画がGETできるという報酬があったので挑戦してくれるユーザーが多くなかなか見ていても楽しかったです。
リリースして間もなくチートが現れたのも驚きでした。

クイズ

制作的には普通のクイズでした。こだわった点は背景にcanvasを用いてparticleを散りばめてポコポコ動くようにした点くらいです。（クイズはあまり関係ない）
ただ、問題が難しすぎてあまり反応が無かったようにも思えます。

ポ○モンGOのパロディゲーム

漫画に登場するキャラをGETするとステータスが見れるというものでした。
ステータス画面はかなり本家を真似しつつ、おもしろおかしくできたので賞賛の声がうれしかったです。
また漫画家の細部へのこだわりがファンの方たちにも伝わっていて感動しました。

シューティングゲーム

おそらく4つの中で一番苦労した作品でした。リリースすると「簡単すぎる！」「つまんねぇ」などと言われてしまいリアルにへこみました。
その後難易度の設定や報酬の追加などをして多少マシになった気がしますがゲームづくりの難しさを痛感した瞬間でもありました。

目標その2 ゲームをつくる。-まとめ

とりあえず目標を達成できたのはよかったです。ただ今までゲームをほとんどやってこなかった事に少し後悔しております。
エフェクトであったり、モーションであったり、難易度であったり、なんせ引き出しがない...というのはつらい。
今後はもっと色んなゲームに触れつつ学びつつ楽しんでいこうと思いました。

その他の目標

なかなか達成できていません...
来年は、もっと目標を達成できるようにしたい！（毎年言ってるやつ）

最後まで読んで頂きありがとうございます。

それでは、よいお年を。