Facebook for Developers に登録してシェアダイアログ機能を使ったシェアボタンを設置する
概要
- デフォルトのFacebookシェアボタンを使わないでFacebookのシェアボタンを作った
-
ざっくりした流れ
- Facebook for Developersに登録・アプリケーションを作成し、app_idを発行
- シェアダイアログを使ったシェアボタンを作成
jQueryタグのついた記事一覧
YouTube Data API v3 を使って任意のプレイリストの動画情報をJSON形式で取得する jQuery + Ajax
jquery.qrcode.js を使用して生成したQRコードをPNG画像として保存する
jquery.qrcode.jsとは
jquery.qrcode.js
http://jeromeetienne.github.io/jquery-qrcode/
- QRコードを生成するjQueryプラグイン
- 画像は生成されず、tableタグまたはcanvasタグで描画することができる。
- ソースはGitHubで公開されている。
使用手順
- GitHubから jquery.qrcode.min.js をダウンロードし、jQuery本体よりあとで読み込む
- HTML側に描画スペースを用意
- 用意した要素に対してjQueryスクリプトを記述
YouTubeのサムネイル画像をクリックしたら埋め込みiframeを読み込むjQuery
やりたいこと
- 余計なデータ通信を発生させないために、YouTube動画のサムネイルをタップ・クリックしたときにだけ、埋め込み動画のiframeを読み込ませる。
- 16:9のレスポンシブ対応をする。
- サムネイル画像と埋め込みiframeで表示位置がズレないようにする。
サンプル
Read More2つのプルダウンから要素の絞込表示をするjQuery – boxfilter_double.js
概要
incboxfilter_select.jsをさらに改造して、2つのプルダウンセレクターで要素の絞込表示をする。
成果物
- https://hi3103.net/study/boxfilter_double/
-
https://hi3103.net/study/incboxfilter_double/
- incファイルの場合
HTML
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="css/style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="js/boxfilter_double.js"></script> <title>boxfilter_double.js</title> </head> <body> <select name="filter_area" class="filters"> <option value="area_all" selected="selected">Show All Area</option> <option value="area_1">Show Area_1</option> <option value="area_2">Show Area_2</option> <option value="area_3">Show Area_3</option> <option value="area_4">Show Area_4</option> </select> <select name="filter_genre" class="filters"> <option value="genre_all" selected="selected">Show All Genre</option> <option value="genre_1">Show Genre_1</option> <option value="genre_2">Show Genre_2</option> <option value="genre_3">Show Genre_3</option> </select> <div class="boxes"> <a class="area_1 genre_1 genre_2" href="#">Box1</a> <a class="area_2 genre_1 genre_3" href="#">Box2</a> <a class="area_3 genre_2 genre_3" href="#">Box3</a> <a class="area_4 genre_3" href="#">Box4</a> <a class="area_1 genre_1 genre_2 genre_3" href="#">Box5</a> <a class="area_2 genre_1 genre_2" href="#">Box6</a> <a class="area_3 genre_1 genre_3" href="#">Box7</a> <a class="area_4 genre_1 genre_2 genre_3" href="#">Box8</a> <a class="area_1 genre_1 genre_3" href="#">Box9</a> <a class="area_2 genre_1 genre_2 genre_3" href="#">Box10</a> <a class="area_3 genre_3" href="#">Box11</a> <a class="area_4 genre_1 genre_2 genre_3" href="#">Box12</a> <a class="area_1 genre_1 genre_2 genre_3" href="#">Box13</a> <a class="area_2 genre_1 genre_3" href="#">Box14</a> <a class="area_3 genre_1 genre_2" href="#">Box15</a> <a class="area_4 genre_1 genre_3" href="#">Box16</a> <a class="area_1 genre_3" href="#">Box17</a> <a class="area_2 genre_1 genre_2 genre_3" href="#">Box18</a> <a class="area_3 genre_1 genre_2 genre_3" href="#">Box19</a> <a class="area_4 genre_1 genre_2" href="#">Box20</a> </div> </body> </html>
boxfilter_double.js
$(document).ready(function(){
var $boxes = $('.boxes a');
$('select.filters').change(function () {
$boxes.removeClass('match');
$('select[name=filter_area] option:selected').each(function () {
var $sa = $(this).attr('value');
if($sa == 'area_all'){
$boxes.addClass('match');
}else if($boxes.hasClass($sa)){
$boxes.filter('.'+$sa).addClass('match');
}
});
$('select[name=filter_genre] option:selected').each(function () {
var $sg = $(this).attr('value');
if($sg != 'genre_all' && $boxes.hasClass('match')){
$boxes.filter(':not(.'+$sg+')').removeClass('match');
}
});
$boxes.fadeOut().promise().done(function() {
$boxes.filter('.match').fadeIn();
});
});
});
style.CSS
@charset "UTF-8";
a {
display: inline-block;
text-decoration: none;
text-align: center;
margin-bottom: 1em;
margin-right: 1em;
}
.boxes a {
width: 10em;
color:#CCC;
}
.area_1{ border: 2px solid gold; }
.area_2{ border: 2px solid lightblue; }
.area_3{ border: 2px solid lightgreen; }
.area_4{ border: 2px solid pink; }
.match{
background-color: #000;
color: #FFF;
}
参考URL
incboxfilter_select.js
概要
読み込んだincファイルの要素を絞込表示するjQuery – incboxfilter.jsをプルダウンセレクターにしたバージョン。
スタイルもシンプルにした。
成果物
http://hi3103.net/study/incboxfilter_select/
HTML
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="css/style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="js/incboxfilter_select.js" charset="UTF-8"></script> <title>incboxfilter_select.js</title> </head> <body> <select name="filter"> <option value="all" selected="selected">Show All</option> <option value="green">Show Green Boxes</option> <option value="blue">Show Blue Boxes</option> <option value="red">Show Red Boxes</option> <option value="hoge">Show Hoge Boxes</option> </select> <div class="boxes"></div> </body> </html>
incboxfilter_select.js
$(function(){
$('.boxes').load('inc/box.inc', null, function() {
var $filters = $('select[name=filter]');
var $boxes = $('.boxes a');
$filters.change(function () {
$('select option:selected').each(function () {
var $filterColor = $(this).attr('value');
if ($filterColor == 'all') {
$boxes.fadeOut().promise().done(function() {
$boxes.fadeIn();
});
} else {
$boxes.fadeOut().promise().done(function() {
$boxes.filter('.'+$filterColor).fadeIn();
});
}
});
});
});
});
box.inc
<a class="red" href="#">Box1</a> <a class="green" href="#">Box2</a> <a class="blue hoge" href="#">Box3</a> <a class="green" href="#">Box4</a> <a class="red" href="#">Box5</a> <a class="green" href="#">Box6</a> <a class="blue" href="#">Box7</a> <a class="red hoge" href="#">Box8</a> <a class="green" href="#">Box9</a> <a class="blue" href="#">Box10</a> <a class="red" href="#">Box11</a> <a class="green hoge" href="#">Box12</a> <a class="blue hoge" href="#">Box13</a> <a class="green" href="#">Box14</a> <a class="red" href="#">Box15</a> <a class="blue" href="#">Box16</a>
style.css
@charset "UTF-8";
a {
display: inline-block;
text-decoration: none;
text-align: center;
margin-bottom: 1em;
margin-right: 1em;
}
.boxes a {
width: 10em;
color:#FFF;
}
.green{
background: lightgreen;
}
.blue{
background: lightblue;
}
.red{
background: lightcoral;
}
.hoge{
border: 2px solid #000;
}
参考URL
読み込んだincファイルの要素を絞込表示するjQuery – incboxfilter.js
概要
- 読み込んだincファイルの要素を付与されたクラス名を元に絞込表示する。
改造元
以下のエントリーを元に改造させていただきました。
成果物
http://hi3103.net/study/incboxfilter/
HTML
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="css/style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="js/incboxfilter.js" charset="UTF-8"></script> <title>incboxfilter.js</title> </head> <body> <div class="filter"> <a class="all active" data-filter="all" href="#" role="button">Show All</a> <a class="green" data-filter="green" href="#" role="button">Show Green Boxes</a> <a class="blue" data-filter="blue" href="#" role="button">Show Blue Boxes</a> <a class="red" data-filter="red" href="#" role="button">Show Red Boxes</a> <a class="hoge" data-filter="hoge" href="#" role="button">Show Hoge Boxes</a> </div> <div class="boxes"></div> </body> </html>
box.inc
<a class="red" href="#">Box1</a> <a class="green" href="#">Box2</a> <a class="blue hoge" href="#">Box3</a> <a class="green" href="#">Box4</a> <a class="red" href="#">Box5</a> <a class="green" href="#">Box6</a> <a class="blue" href="#">Box7</a> <a class="red hoge" href="#">Box8</a> <a class="green" href="#">Box9</a> <a class="blue" href="#">Box10</a> <a class="red" href="#">Box11</a> <a class="green hoge" href="#">Box12</a> <a class="blue hoge" href="#">Box13</a> <a class="green" href="#">Box14</a> <a class="red" href="#">Box15</a> <a class="blue" href="#">Box16</a>
incboxfilter.js
$(function(){
$(".boxes").load("inc/box.inc", null, function() {
var $filters = $('.filter [data-filter]');
var $boxes = $('.boxes a');
$filters.on('click', function(e) {
e.preventDefault();
var $this = $(this);
$filters.removeClass('active');
$this.addClass('active');
var $filterColor = $this.attr('data-filter');
if ($filterColor == 'all') {
$boxes.fadeOut().promise().done(function() {
$boxes.fadeIn();
});
} else {
$boxes.fadeOut().promise().done(function() {
$boxes.filter('.'+$filterColor).fadeIn();
});
}
});
});
});
style.css
@charset "UTF-8";
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
font:18px/3 Arial,sans-serif;
text-align: center;
}
a{
text-decoration: none;
display: block;
color: #333;
}
/* filter */
.filter{
margin: 2em 30%;
}
.filter a{
display: block;
position: relative;
margin-bottom: 1em;
}
.filter a.active:before{
content: '';
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 15px 15px 0 0;
border-color: #333 transparent transparent transparent;
}
/* boxes*/
.boxes{
display: flex;
flex-wrap: wrap;
}
.boxes a{
width: 23%;
margin: 0 1% 1em 1%;
}
.all{
background: lightgray;
}
.green{
background: lightgreen;
}
.blue{
background: lightblue;
}
.red{
background: lightcoral;
}
.hoge{
border: 1px solid #333;
}