フリック操作時のエラー(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でなんちゃって認証をつくる。
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」をみてパスワードがわかってしまった人は相当な変態か神か凄腕技術者です。
大抵の人はわからないと思うので大丈夫かなーと思います。
※ あくまでなんちゃって認証なので。
この数字を設定するヒントは、以下の記事を参照ください。
以上ネタ記事でした。
この認証の正解は下にあります。
正解:「うんこ」
JavaScriptで複数ワード検索 品質向上を目指す。
Webサイトを構築する上で必ずルールが存在します。
そのルールの1つが表記。
納品前の成果物に対して「表記揺れ」や「禁止ワード」を効率よく確認できないものかと思いJavaScriptで実装してみました。
イメージ的にはChromeの拡張機能 「goodbye “Zenkaku” - さよなら全角英数」を意識しております。
全角英数のみであればこの拡張機能だけでよいのですが、それぞれのサイトによってルールが違うので【調べたいワード】が指定できるものを考えてみました。
※ 【調べたいワード】はJavaScriptにて指定
※ jQuery使用
DEMO
See the Pen JavaScriptで複数検索 by paradox_tm (@takumaro-web) on CodePen.
ロジック
- ワードを指定する。
- 親要素(id、classなど)を指定しその中のhtmlの記述をeachで指定されたワード分だけ探しにいく。
- 指定されたワードがあった場合、<b>タグで囲み強調させる。
- 検出されなかった場合、アラートを出す。
自分が運用しているサイトにあったブックマークレットを作成するとさらに効果的!
- ワードを指定する。
- 圧縮する。
※ JSの頭に「javascript:」をつける。
URL:https://syncer.jp/js-minifier - 検索したいページでブックマークレットをポチッ。
サンプルソース
圧縮前
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")}})})();
このブログで実行したイメージ
「おッ、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先生から鉄槌が下されました。
そして アカウントの停止、アドセンスの永久剥奪...。
完全に自業自得でした(反省)。
アドセンスが消えた後の当時のブログ
それがちょうど3年前のお話で最初のブログ構築(wordpress)でした。
しばらくGoogle先生にアドセンスをバンされたことを引きずり「ブログなんてやんねぇー!」と思っておりましたが、心のどこかではモヤモヤが晴れず自問自答の日々を繰り返しておりました。
その事件の半年後くらいに先輩から「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スタンプの作成:×
なかなか達成できていません...
来年は、もっと目標を達成できるようにしたい!(毎年言ってるやつ)
最後まで読んで頂きありがとうございます。
それでは、よいお年を。
【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することもできそうですね!
ソースのダイエットにも繋がります。
それでは、また。