facebookのOGPキャッシュをボタン1つで消せるBookmarkletを作製しました。
ページ公開直後のコンテンツに対してシェアボタンを押してもOGP情報をうまく取得できずシェアされない場合がありますよねー。 これは公開前のURLにfacebookのクローラがアクセスしてしまうことによって、facebook側にキャッシュが残ってしまいそちらを参照してしまうのが原因だそう。 (つまり、空ページをfacebook側がキャッシュしてしまっている。)
今まではページが公開されるとfacebook側が提供しているデバッグページにてキャッシュをクリアしていたけど少し煩わしさを感じていた。 いちいちfacebookにログインしなきゃいけないし、対象のURLをコピーして貼り付けなきゃだし、ボタンを押さなきゃいけないわけで...
『なんとかこの作業について簡略化・自動化できないか』と調べたところAPIの「https://graph.facebook.com/?scrape=true&id=URL」にPOSTメソッドでアクセスすると、再クロールしてくれるという記事を発見!
公開ページそのものにこのスクリプトないしプログラムを組み込めば、完全に自動化できるけど閲覧する度にPOSTするのもパフォーマンス的にいかがなものか? と思いBookmarkletでポチッとボタンを押すだけでキャッシュを消すことができるものを作製することにした。
自分は普段使いのブラウザがChromeなのでこちらのBookmarkletで問題ないのだが、現場から「Firefoxで動かねぇーよ!」という声が上がってきた。実際に確認してみるとなぜか、FirefoxだとBookmarklet内でAjaxを使ってPOSTできない..(誰かエロい人教えてください。)
2016/9/8修正
実は圧縮でミスってることがわかりました。
YUI Compressorを使用していたのですが、圧縮に問題が...
他の圧縮ツールを使用したところ、問題なくできたのでこちらを使用ください。
こちらは、Firefox/Chromeでも使用できます。
Bookmarkletソース(Firefox/Chrome用)
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(a){a.ajax({url:"https://graph.facebook.com/?scrape=true&id="+location.href,method:"post"}).done(function(){alert("OGPキャッシュを消しましたー。")})})})();
これで、facebook側が提供しているデバッグページを使わずに済むので煩わしさが無くなりそう。
参考
【canvas】画像を回転させながら落とす
最近、インタラクティブな実装に興味を持ち始めました。
覚え書きとして、canvasで画像を用いて回転させながら落ちるアニメーションの実装方法を記しておきます。
DEMO
補足
- 画像を複数個使用することを想定して、配列を用いています。
JavaScriptコード
$(function(){ var canvas = document.getElementById ('canvas'); var ctx = canvas.getContext ('2d'); function canvasbg(pageY,pageX,flag){ var counter1 = 0; var counter2 = 0; var TO_RADIANS = Math.PI/180; var SPEED = 5; var X = pageX; var Y = pageY; function start() { x = []; y = []; /*初期座標*/ x[0] = X / 2; y[0] = 0; x[1] = 150; y[1] = 0; img = []; img[0] = new Image (); img[0].src = "data:image/png;base64,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"; img[1] = new Image (); img[1].src = "data:image/png;base64,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"; // img[2] = new Image (); // img[2].src = ""; // img[3] = new Image (); // img[3].src = ""; // img[4] = new Image (); // img[4].src = ""; // img[5] = new Image (); // img[5].src = ""; var time; time = setInterval(function(){ draw(X,Y); },SPEED); } function draw(X,Y) { ctx.clearRect (0 , 0 , pageX , pageY); drawRotatedImage(img[0],x[0], y[0],counter1); drawRotatedImage(img[1],x[1], y[1],counter2); /*回転用 角度*/ counter1 += 0.5; counter2 += 0.3; /*落下スピード*/ x[0] -= 1 * Math.random(); y[0] += 2; x[1] -= 1 * Math.random(); y[1] += 1; /*再描画判定座標*/ if(y[0] > pageY + 20){ x[0] = pageX / 2; y[0] = 0; } if(y[1] > pageY + 20){ x[1] = pageX / 3; y[1] = 0; } } /*回転*/ function drawRotatedImage(image, x, y, angle) { ctx.save(); ctx.translate(x, y); ctx.rotate(angle * TO_RADIANS); ctx.drawImage(image, -(image.width/2), -(image.height/2)); ctx.restore(); } /*ループ*/ window.requestAnimationFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback){ window.setTimeout(callback, 1000 / 60); }; })(); requestAnimationFrame(start); sizing(); } function sizing(){ $('#canvas').attr({height:$('#wrap').height()}); $('#canvas').attr({width:$('#wrap').width()}); } $(window).load(function(){ pageY = $('#wrap').height(); pageX = $('#wrap').width(); canvasbg(pageY,pageX,0); }); });
- 初期座標、イメージパスを指定する。
- 画像を描画する際に回転用の関数を使用する。
- 角度をつける(インクリメント)
- 落下スピードを指定する。
- 最下部までいったら元の位置に戻す。
応用として、「雪」「落ち葉」「雨」などにも適応できそうです。
最近よく使う、CSSプロパティ 3選(vw/vh,calc(),flex) - #レスポンシブwebデザイン
ここ最近よく使うなーと思うCSSプロパティの紹介。
Viewport units: vw, vh, vmin, vmax
ビューポートの縦・横に対する割合の単位ですが、
めっちゃ使えるなぁーと思う今日この頃です。
記事紹介
Can I use 状況
Can I use... Support tables for HTML5, CSS3, etc
Android4.3以下は、フォールバックを用意しておけばガンガン使えんじゃん! って感じでガンガン使ってます。
特にお気に入りは、ビューポートに合わせて文字サイズが変更できるところですね。
※ 一部次に紹介するcalc()との組み合わせの内容が含まれております。
対象ブラウザや要件定義が合えば積極的に使っていきたいですね!
calc() as CSS unit value
calc()関数です。 calc = calculation(計算)の略でその名の通り、四則計算ができます。
レスポンシブwebデザインをやる上で今までは、Sass(SCSS)内で計算させて横幅等を指定していたのですが、 これを使えば、そのまま「計算式」を「値」として指定できます。
もちろん、さらに洗練されたmixinにしても使えますね。
記事紹介
Can I use 状況
Can I use... Support tables for HTML5, CSS3, etc
Android4.3以下は、フォールバックを用意しておけばガンガン使えんじゃん! って感じでガンガン使ってます。
疑似要素で上下に画像を配置し、間の高さだけ背景を指定したい!といった場合に calc(高さ - 疑似要素で配置した大きさ*2 ) のように指定できたのに感動した記憶があります。
Flexible Box Layout Module
言わずもがなな感じがしていますが、便利ですねー。
記事紹介
css3のflexboxを使うとすごい簡単になるレイアウトを試してみた | スターフィールド株式会社
Can I use 状況
Can I use... Support tables for HTML5, CSS3, etc
ほぼ、接頭辞を付ければ問題なく使えます。 今まで、JSで高さ揃えを実装し構築してたものについても、CSSのプロパティ1つで済む可能性があるというのはかなりでかい点ですね。
以上、最近よく使う、CSSプロパティ 3選でした。
【自分メモ】cookieの値を取得する。
特定のcookieの値をだけを取得したい場合。
var getCookieValue = function(key) { var val = document.cookie.match(new RegExp('(^|\\s)'+key+'=([^;]+)')); return !!val && unescape(val[2]); }; alert(getCookieValue("COOKIE名"));
参考URL blog.manaten.net
cookies.jsを使用した場合。
参考URL developer.mozilla.org
/*\ |*| |*| :: cookies.js :: |*| |*| A complete cookies reader/writer framework with full unicode support. |*| |*| https://developer.mozilla.org/en-US/docs/DOM/document.cookie |*| |*| Syntaxes: |*| |*| * docCookies.setItem(name, value[, end[, path[, domain[, secure]]]]) |*| * docCookies.getItem(name) |*| * docCookies.removeItem(name[, path]) |*| * docCookies.hasItem(name) |*| * docCookies.keys() |*| \*/ var docCookies = { getItem: function (sKey) { if (!sKey || !this.hasItem(sKey)) { return null; } return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1")); }, setItem: function (sKey, sValue, vEnd, sPath, sDomain, bSecure) { if (!sKey || /^(?:expires|max\-age|path|domain|secure)$/i.test(sKey)) { return; } var sExpires = ""; if (vEnd) { switch (vEnd.constructor) { case Number: sExpires = vEnd === Infinity ? "; expires=Tue, 19 Jan 2038 03:14:07 GMT" : "; max-age=" + vEnd; break; case String: sExpires = "; expires=" + vEnd; break; case Date: sExpires = "; expires=" + vEnd.toGMTString(); break; } } document.cookie = escape(sKey) + "=" + escape(sValue) + sExpires + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "") + (bSecure ? "; secure" : ""); }, removeItem: function (sKey, sPath) { if (!sKey || !this.hasItem(sKey)) { return; } document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT" + (sPath ? "; path=" + sPath : ""); }, hasItem: function (sKey) { return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie); }, keys: /* optional method: you can safely remove it! */ function () { var aKeys = document.cookie.replace(/((?:^|\s*;)[^\=]+)(?=;|$)|^\s*|\s*(?:\=[^;]*)?(?:\1|$)/g, "").split(/\s*(?:\=[^;]*)?;\s*/); for (var nIdx = 0; nIdx < aKeys.length; nIdx++) { aKeys[nIdx] = unescape(aKeys[nIdx]); } return aKeys; } } alert(docCookies.getItem("COOKIE名"));
[jQuery]スクロールバーのデザインと実装方法と注意点 - 超軽量スクリプト Perfect Scrollbar
一昔前だとスクロールバーのデザインモックを見ただけで吐きそうになっていましたが、 今では便利なプラグインとCSS3といった技術を用いて比較的容易に実装できるようになりました。
本記事では、超軽量スクリプト Perfect Scrollbarを用いたデザイン性に富んだスクロールバーの実装方法を紹介したいと思います。
Perfect Scrollbarについて
Perfect Scrollbarについては、3年くらい前にcoliss様のサイトで紹介されていますので そちらをご参照ください。
http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-perfect-scrollbar.html
ダウンロードはこちら
実装方法
準備するもの
サンプルデモ
さっそくですが、今回自分が作ったサンプルを見ながら解説します。
これは線路を走る電車のつもりです...汗
サンプルデモのデザインについては、ご了承ください。
まずは、スクロールバーを出す部分を実装していきます。
HTML
<div class="box"> <div id="js-scroll" class="inner"> <!-- スクロールさせるコンテンツ --> </div> </div>
.box:スクロールさせる部分を囲っています。
.inner:実際にスクロールさせる場所になります。
※ デザインによってマークアップは調整してください。
CSS
.box { height:320px; width: 320px; box-sizing: border-box; padding: 20px 30px 20px 20px; border: 1px dotted #333; margin: 50px auto; background-color: #fff; } /*こちらがスクロールさせる箇所 */ .inner { position: relative; overflow: hidden; background-color: #fff; width: 280px; height: 280px; }
それぞれのスタイルになります。こちらもデザインによって調整ください。
※ 但しスクロールさせたい箇所に「position: relative;とoverflow: hidden;」はつけるようにしてください。
JS
$(function() { $('#js-scroll').perfectScrollbar(); });
jQueryとperfectScrollbarを読み込ませた上で、指定してください。
GitHubを覗くと様々なオプションがありますが、今回はデフォルトの指定にしておきます。
気になる方は以下を参照してみてください。
https://github.com/noraesae/perfect-scrollbar
これで下準備完了です!
デザインの反映
ここでperfectScrollbar側から提供されているCSSを読み込ませると本家のサンプルデモと同じものができあがりますが、 今回はオリジナルのデザインを反映させたいのでその提供されているCSSをカスタマイズしていきます。
以下、必要な箇所を抜粋したCSSになります。
.ps-container { -ms-touch-action: none; touch-action: none; overflow: hidden !important; -ms-overflow-style: none; } @supports (-ms-overflow-style: none) { .ps-container { overflow: auto !important; } } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .ps-container { overflow: auto !important; } } /*スクロールバーのレールの背景指定*/ .ps-container.ps-active-y > .ps-scrollbar-y-rail { display: block; background: url(body.jpg) center center repeat; /*色でも可能*/ } /*スクロールバーのレールの位置の指定*/ .ps-container > .ps-scrollbar-y-rail { position: absolute; right: 6px; /*位置調整*/ width: 15px; /*デザイン幅の指定*/ } /*スクロールバーの指定*/ .ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y { position: absolute; background: url(head.jpg) top center no-repeat, /*スクロールバーを三分割したうちの上矢印の部分*/ url(foot.jpg) bottom center no-repeat, /*スクロールバーを三分割したうちの下矢印の部分*/ url(body.jpg) center center repeat; /*スクロールバーを三分割したうちのお腹の部分(リピートできるもの)*/ right: -2px; /*位置調整*/ width: 19px; /*デザイン幅の指定*/ }
ポイントは、以下の通りです。
- スクロールバーのレールの背景の切り出し(リピートできるもの)
- スクロールバーのデザイン部分を三分割し、上矢印部分(固定)/下矢印部分(固定)/お腹の部分(リピート) に分けて3枚の背景画像を指定
- それぞれの位置調整と幅調整
この3点を守れば、素敵なスクロールバーが実装できます。
今回は、縦スクロールで実装しましたが、横スクロールの場合も同じです。
デザインの注意点
デザインを反映する上での注意ですが、スクロールバーは可変になります。スクロール量(コンテンツ量)が増えれば、当然スクロールバーの長さも変わります。
実装できない(厳密には、不自然になる)デザインは、スクロールバーの大きさが固定のものです。 またスクロールバーのお腹のリピート部分が不規則な形になると繋ぎ目が美しくなくなってしまいます...(今回のデモサンプルのように...)
以上です!
デザイン次第でかなり素敵なものができそうですね!
ネイティブアプリでシェアされない!? Twitterでシェアする内容を動的に変える時の注意点。
某案件で[クイズに答えて正解数に応じてTwitterでシェアする内容を変更するもの]を実装しました。
ここでネイティブアプリ(iPhoneとかに入っているTwitterアプリ)でハマったので記録として記しておきます。
jQueryを使用した話になります。
attrメソッドを使用してのシェア内容の変更はネイティブアプリでは動かない。
そのままですが、attrメソッドを使用しhrefの内容を変更すると、Twitterアプリを立ち上げてシェアした際に変更したシェア内容が継承されず、真っ白になります。
ダメなサンプル例
HTML
<a id="tweetBtn" href="">ツイート</a>
if(count === 1){ $('#tweetBtn').attr('href','http://twitter.com/intent/tweet?original_referer=URL&url=URL&text=%e3%81%bb%e3%81%92%e3%81%bb%e3%81%92'); } // countはクイズの正解数 // %e3%81%bb%e3%81%92%e3%81%bb%e3%81%92 = ほげほげ(エンコード) // URLの:(全角)を:(半角)に変更してください
PCで検証した場合、Twitterページが立ち上がりうまくシェアできますが、ネイティブアプリがiPhoneなどに入っている場合ツイート内容が消えてしまいます。
※ Androidは試していないのでわかりません(汗)
解決策
HTML
<div id="tweetBtn"><a href="">ツイート</a></div>
if(count === 1){ $('#tweetBtn').find('a').remove(); $('#tweetBtn').append('http://twitter.com/intent/tweet?original_referer=URL&url=URL&text=%e3%81%bb%e3%81%92%e3%81%bb%e3%81%92') } // countはクイズの正解数 // %e3%81%bb%e3%81%92%e3%81%bb%e3%81%92 = ほげほげ(エンコード) // URLの:(全角)を:(半角)に変更してください
一度aタグを消して再度、DOMを生成させています。
こうすることでネイティブアプリでも動的に変更したシェア内容を引き継ぎ、ツイートすることができます。
パフォーマンス的にはその都度、要素を消したり追加したりしているのであまりよくない気がしますが...
jQueryを使用する場合、この方法で良いかと思います。
まとめ
以上です。
一言
試してないですが、ReactやAngularJSだとこんなことしなくてもうまくいけるかもですねー。