2017-01-10

［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-12-26

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つです。

連打系ゲーム
クイズ
ポ○モンGOのパロディゲーム
シューティングゲーム

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

連打系ゲーム

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

クイズ

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

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

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

シューティングゲーム

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

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

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

その他の目標

英語： △
自分のポートフォリオサイトの開設：×
アドベントカレンダーへの参加：×
オリジナルのステッカーをつくる：×
家にBARをつくる：×
LINEスタンプの作成：×

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

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

それでは、よいお年を。

2016-11-10

【GA計測にも使える！】押された要素が何番目なのかを調べる方法。

押された要素が何番目か調べる方法は、いくつかありますが個人的によく使うものをご紹介します。
※ jQueryを使用しています。

パターン1：リストで何番目を押されたかを調べる。

HTML

<ul id="list">
<li>ああああああああ</li>
<li>いいいいいいいい</li>
<li>うううううううう</li>
<li>ええええええええ</li>
<li>おおおおおおおお</li>
</ul>

Javascript

$("#list li").on('click',function(){
  var index = $("li").index(this);
});

純粋にli要素を押したものをindex(this)で返せば良いです。

パターン2：子要素(a)を押して、親要素(li)が何番目かを調べる。

HTML

<ul id="list2">
<li><span><a href="#">ああああああああ</a></span></li>
<li><span><a href="#">いいいいいいいい</a></span></li>
<li><span><a href="#">うううううううう</a></span></li>
<li><span><a href="#">ええええええええ</a></span></li>
<li><span><a href="#">おおおおおおおお</a></span></li>
</ul>

Javascript

$("#list2 a").on('click',function(){
  var index = $(this).parents("li").prevAll().length;
  return false;
});

押した要素の親要素を取得し、prevAll()を使いその要素の前以前にある兄弟要素の数を数えることで何番目かを判定します。
例）3番目のリンクを押した場合、3番目の要素より前にある兄弟要素は1番目と2番目の要素になるので返り値は“2”になる。

あまりよくない例。

var num = $(this).parent().parent().prevAll().length;

a要素のお父さんは、spanお父さんでそのお父さんは、liお父さんで..みたいなノリのやつですね。
ソースを見返した際に分かりずらいし、目的の要素を探すのに無駄な処理だと思います。
一歩ミスったら取得できないですし...危険ッ。

ってことで、parents(elem)で探した方が断然わかりやすいのでオススメです。
ちなみに、parents(elem)の場合 class名やID名も指定できるのでかなり便利。

パターン3：子要素(a)を押して、親要素(.test)が何番目かを調べる。

HTML

<ul id="list3">
<li class="test"><div><span><a href="#">ああああああああ</a></span></div></li>
<li class="test"><div><span><a href="#">いいいいいいいい</a></span></div></li>
<li class="test"><div><span><a href="#">うううううううう</a></span></div></li>
<li class="test"><div><span><a href="#">ええええええええ</a></span></div></li>
<li class="test"><div><span><a href="#">おおおおおおおお</a></span></div></li>
</ul>

Javascript

$("#list3 a").on('click',function(){
  var index = $(this).parents(".test").prevAll().length;
  return false;
});

子要素(a)の親要素(.test)を取得し何番目かを返すやり方です。

DEMO

パターン1からパターン3までのDEMOになります。

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

いかがだったでしょうか。
特にparents()は使い方によっては、押した要素の親のclass名を取得したり、ID名を取得したり色々便利ですね。
そのclass名やID名をlabelにしてdatalayerでもってpushすることもできたり、label名の指定に取得した番号と文字列を合わせてpushすることもできそうですね！
ソースのダイエットにも繋がります。

それでは、また。

2016-11-01

［GA］［Googleアナリティクス］iPhone7（iOS 10）safariでクリックイベント計測がうまくいかない時の対処方法。

GA JS jQuery

2016年9月13日にiOS 10が配信されました。
さっそくアップデートしましたが今までの仕様に慣れていたので起動時や目覚ましタイマーを止める際に、一度ホームボタンを押さないといけない新しい仕様が若干煩わしいです。
※ ちなみに自分のiPhoneはiPhone 6です。

前置きはさておき本題です。
iOS 10にしてから普段通りクリックイベントの計測をしていたところ...
「あれ！？クリックイベントが正しく計測されてない」という事に気づきました。

前に書いた記事でiPhoneなんて怖くない！と思っていたのですが再び、調査しなきゃいけないのかと少し青ざめました、、、がなんとか計測できるようになったので覚書きです。

iOS 10からclickの処理の仕様が変わった？

詳しくはわからないですが前に書いた記事の中でクリックイベント計測がうまく取れない理由として“リンク先に飛ぶ処理の方が埋め込んだイベント計測の発火よりも速く処理されてしまうのが原因”ということを述べました。
そこでeventCallback関数を使用してリンクに飛ぶ前に計測用の処理を入れてしまおう！というのが前回のお話でした。

しかし...

明らかにiOS 9以下で計測できていたものが計測できなくなっているんです。

憶測ですがiOS 10のsafariからviewportのプロパティuser-scalable=noを指定しても画面を拡大できるようになったり独自の仕様を積んでいるのでこのリンクを押してからリンク先へ飛ぶ処理についても若干変更されたのかと思います。（多分）

clickがダメならtouchで計測する。

もうこれしかないかなと思いつつ実装してみたところ無事に計測できるようになったので記しておきます。

実装の流れ

①iPhone（iOS）をユーザーエージェントで判定
②iPhone（iOS）と他の端末との計測方法を変える
③iPhone（iOS）のみ、touchイベントを使い計測する
④他の端末は従来通りの計測方法で計測する

ソース

※ 今回もjQueryを使用しております。

/*①iPhone（iOS系）をユーザーエージェントで判定*/
var appleKit = false;
if(navigator.userAgent.indexOf('iPad') > 0 || navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('iPod') > 0){
  appleKit = true;
}

//クリックイベント計測用
var eventGA = function(event,category,action,label,link,target){
  dataLayer.push({
    'event': event,
    'category':category,
    'action': action,
    'label': label,
    'eventCallback' : function(){
      /*別窓指定じゃない時だけ実行*/
      if(!target){
        document.location = link;
        return false;
      }
    }
  });
};

/*②iPhone（iOS）と他の端末との計測方法を変える*/
if(appleKit){
/*③iPhone（iOS）のみ、touchイベントを使い計測する*/

  $(".element").on("touchstart touchmove touchend",function(){
    /* touchstartの座標とtouchendの座標が同じ時 ＝ 疑似的なclick */
    if ('touchstart' == event.type){
      $(this).attr('data-touchstarted', '');
      return;
    }
    /*指を動かしたときは判定しない*/
    if ('touchmove' == event.type){
      $(this).removeAttr('data-touchstarted');
      return;
    }
    /*指をつけたところと指を離したところが同じ場合に処理*/
    if ('undefined' != typeof $(this).attr('data-touchstarted')){
      var link = $(this).attr("href");
      var target = ($(this).attr("target")) ? true : false;
      /*イベント送信！*/
      eventGA("event","category","action","label",link,target);
      
      /*フラグ削除*/
      $(this).removeAttr('data-touchstarted');
    }
  });

}else{
/*④他の端末は本来と同じように計測する*/
  $(".element").on("click" , function(){
    var link = $(this).attr("href");
    var target = ($(this).attr("target")) ? true : false;
    /*イベント送信！*/
    eventGA("event","category","action","label",link,target);
  });
}

説明はソース上にコメントアウトしておきましたが補足です。

touchstartのみだとリンクに触れた瞬間に計測が始まってしまうので、touchstart ＝ touchendのときに計測するようにする。
eventCallbackは、別窓でない時のみに使用する。（別窓リンクの場合は計測できるので）

「たった1つの要素を計測するのにこれだけ記述するのは、ちょっと...」って気がしますが本気で計測したい場合に使うと良いかもしれません。
暫定対応ではありますが、このやり方で計測していきたいと思います。

余談 Firefox クリックイベント計測ができない場合...?

たまにあるんですけど、Googleアナリティクスの管理画面を見ながら計測のテストをしているとFirefoxだけ計測がいきなり取れなくなることが...（僕だけでしょうか...）
その場合の自分の対処方法なんですが【新規ウィンドウを立ち上げる】と計測できるようになったりします。
※ 別タブやリロードではダメ

2016/11/2 追記

Firefoxやっぱりおかしいなーということでいろいろ試したのですが...

clickだと取れたり取れなかったり別窓ページ遷移の場合や同ページ内のクリックイベント計測であれば問題ないのですが、同窓ページ遷移の場合にうまくいかない事が多いですね。

そこで、clickからmousedownに変えたところ計測できるようになりましたが...
そうなると今度はキーボードからのクリックイベント計測はできなくなります。
キーボードもすべて網羅するのであれば、また別の実装方法を考えなくてはいけません。

あくまで“マウスを使ってクリックイベントを計測する”ということであれば、mousedownで計測すればよいかもしれませんが、、、要件定義次第ですね。

もし同じ事象でお困りの方は試してみてください。

それでは、また。

2016-10-05

［JavaScript］日本語を数値に変換 / 日本語を数値に変換

クイズの回答との照合やパスワードのチェックなどに使えるメソッド。

charCodeAt() メソッド

与えられたインデックスに位置する文字の Unicode コードポイントを10進数値で返す。
（例）"あいうえお"という文字列の場合、"あ" が charCodeAt(0)にあたる。
⇒ 指定されない場合は、デフォルトでcharCodeAt(0)が返ってくる。

String.fromCharCode() メソッド

Unicode の値の指定のシーケンスを使用することによって生成された文字列を返す。
このメソッドは String オブジェクトではなく文字列を返すので、JavaScript内で数値（文字）を指定しなければならない。
（例）String.fromCharCode(12354,12356,12358,12360,12362) ⇒ "あいうえお"

DEMO

See the Pen charCodeAt / String.fromCharCode by @paradox_tm (@takumaro-web) on CodePen.

※ jQueryを使用してます。

2016-09-26

［JQuery］たった9行でInstagram（インスタグラム）の写真一覧をWebサイトに表示する。

jQuery JS

準備するもの

Instagramのアカウント
Instagram APIの登録
アクセストークンの取得
jQuery

参考サイト

InstagramのAPIを使用して自分の投稿した写真をWEBサイトに出力する

instagram api 事始め access_tokenを取得する - Qiita

Instagram APIを取得してWebサイトと連携し、投稿写真を自動に掲載する方法 | 株式会社LIG

この辺の記事を参考にするとよい。

アクセストークンについて

もし「アプリの登録はできたけど、Instagramのアクセストークンが取得できない！」という場合、以下のページにアクセスし「Generate Access Token」をクリックすると良いかもしれないです。

instagram.pixelunion.net

※ ちなみに私はこちらのサイトを利用しました。

準備ができたところで、本題。

HTML

<ul id="js-instalib"></ul>

JavaScript

$(function(){
  var accessToken = 'xxxxxxxx.xxxxxxx.xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'; //取得したアクセストークンを貼り付ける
  $.getJSON('https://api.instagram.com/v1/users/self/media/recent/?access_token='+accessToken+'&callback=?',function (insta) {
    $.each(insta.data,function (photos,src) {
      if ( photos === 10 ) { return false; } //上限設定
      $('<li><img src="'+src.images.standard_resolution.url+'"></li>').appendTo('#js-instalib');
    });
  });
});

css

お好みで調整

DEMO

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

編集後記

//api.instagram.com/v1/users/self/media/recent/?access_token=[アクセストークン]にアクセスするといいね数やコメント、時間、リンク先など様々な情報が載っているので必要に応じてカスタマイズするのもありですね。

参考オプション

//インスタグラム詳細URL
src.link
//いいね数
src.likes.count
//コメント数
src.comments.count
//自分のコメント
src.caption.text

2016-09-06

TweenMaxを使ってオープニングアニメーションをつくる。

日本でもTweenMax（トゥイーンライブラリ）を使用しているリッチサイトが大分増えてきた気がますねー。大体、動きがかっくいいサイトのソースを覗くと「TweenMax」の文字が見受けられます！

本記事は、TimelineMaxの基本的なアニメーション操作と記述方法のメモ書き。

オープニングアニメーションっぽい適当なDEMO| TimelineMax

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

以下、ソース抜粋

//TweenMaxを使用するための宣言
var timeLine = new TimelineMax();

//セレクターを指定
var elm1 =  document.getElementById("js-anim-01");
var elm2 =  document.getElementById("js-anim-02");
var elm3 =  document.getElementById("js-anim-03");
var elm4 =  document.getElementById("js-anim-04");
var elm5 =  document.getElementById("js-anim-05");
var elm6 =  document.getElementById("js-anim-06");

//第1引数：セレクター指定.
//第2引数：秒数指定（1000msではなく1秒単位）.
//第3引数：アニメーション指定.
//第4引数：オプション指定.

//.toでタイムラインをつくっていく。
//コールバックは、onComplete: function(){}を指定.

//詳しくは以下を参照
//https://greensock.com/get-started-js
//https://ihatetomatoes.net/wp-content/uploads/2016/07/GreenSock-Cheatsheet-4.pdf

timeLine.to(elm1, 1, {opacity: '1', x:0, rotation:360}, "blueGreenSpin")
        .to(elm1, 1, {opacity: '0'})
        .to(elm2, 1, {top: '50%',opacity: '1'})
        .to(elm2, 1, {opacity: '0'})
        .to(elm3, 1, {right: '40%',opacity: '1'})
        .to(elm3, 1, {opacity: '0'})
        .to(elm4, 1, {opacity: '1', width:"50%", top:"100px", ease:Power2.easeInOut})
        .to(elm4, 1, {opacity: '0'})
        .to(elm5, 1, {opacity: '1', x:0, y:0, rotation:1440})
        .to(elm5, 2, {opacity: '0',top:'60%', ease:Power2.easeOut, onComplete:
                      function(){
                        //アニメーションが終わった後の処理
                     }})
        .to(elm6, 1, {opacity: '1',scale:"2"});

CDNの利用

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>

2016年7月16日に最新版の1.19.0をリリースされた模様。 greensock.com

Cheat Sheet

https://ihatetomatoes.net/wp-content/uploads/2016/07/GreenSock-Cheatsheet-4.pdf

触ってみての感想

直感的でわかりやすい！！
他にも色々なオプションがたくさんある！！
Canvas/WebGLなどの制御も可能！！
jQueryも使える！！

胸がワキワキしちゃいますね！