LGTM画像を検索してコピペできるツールを作ったのソースコード3

多分LGTM画像表示では最後の機能追加

なお実際に使用出来るのはここだ

ではソースコードの公開です。

ソースコード

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.3/clipboard.min.js"></script>
<!--トレンド表示-->
トレンド検索：<input id="trending" type="checkbox">
<!--この辺で操作するタグ-->
<textarea id="word">cat</textarea>
<textarea id="limit">10</textarea>
<button id="btn">検索</button>
<!--このdivに表示される-->
<div id="lgtm_images"></div>
<button id="more_btn">もっと表示する</button>
<script type="text/javascript">
var lgiftm = {};
( function(){
"use strict";
var giphyRoot = "https://api.giphy.com/v1/gifs/",
apiKey = "dc6zaTOxFJmzC",
apiUrl = "&api_key=",
searchUrl = "search?q=",
trendUrl = "trending?",
limitUrl = "&limit=",
offsetUrl = "&offset=",
imgTag1 = '<img class="copy" data-clipboard-text="![LGTM](',
imgTag2 = ')" id="lgtm',
imgTag3 = '" src="',
imgTag4 = '">',
clipboardClass = ".copy",
lgtmId = "#lgtm_images",
offsetValue = 0;
lgiftm.setMoreGiphySearchImage = function(){
this.setGiphySearchImage( $( "#word" ).val(),
$( "#limit" ).val() +
offsetUrl + offsetValue)
};
lgiftm.setGiphySearchImage = function( word, conditions ){
var url = "";
if ( $( "#trending" ).prop( "checked" ) ) {
url = giphyRoot + trendUrl + apiUrl +
apiKey + limitUrl + conditions;
} else {
url = giphyRoot + searchUrl + word + apiUrl +
apiKey + limitUrl + conditions;
}
$.getJSON(
url,
function(data) {
var i = 0;
$.each(data.data, function( key, val ) {
$( lgtmId ).append(
imgTag1 + val.images.original.url +
imgTag2 + i + imgTag3 +
val.images.fixed_width_small.url + imgTag4
);
i++;
});
// クリックしただけでクリップボードに貼り付けちゃう便利ライブラリ
new Clipboard( clipboardClass );
}
);
offsetValue += parseInt( $( "#limit" ).val() );
};
lgiftm.clear = function(){
$( "div" + lgtmId ).empty();
offsetValue = 0;
}
})();
( function(){
"use strict";
// 初期表示用
lgiftm.setGiphySearchImage( "cat", 10 );
$( "#btn" ).click( function( e ) {
// 表示初期化してから検索画像を表示しまっせ
lgiftm.clear();
lgiftm.setGiphySearchImage( $( "#word" ).val(), $( "#limit" ).val() );
});
$( "#more_btn" ).click( function( e ) {
// 検索画像をもっと表示しまっせ
lgiftm.setMoreGiphySearchImage();
});
})();
</script>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

トレンド検索：<input id="trending" type="checkbox">

<button id="more_btn">もっと表示する</button>

var lgiftm = {};

( function(){

"use strict";

var giphyRoot = "https://api.giphy.com/v1/gifs/",

apiKey = "dc6zaTOxFJmzC",

apiUrl = "&api_key=",

searchUrl = "search?q=",

trendUrl = "trending?",

limitUrl = "&limit=",

offsetUrl = "&offset=",

imgTag1 = '<img class="copy" data-clipboard-text="![LGTM](',

imgTag2 = ')" id="lgtm',

imgTag3 = '" src="',

imgTag4 = '">',

clipboardClass = ".copy",

lgtmId = "#lgtm_images",

offsetValue = 0;

lgiftm.setMoreGiphySearchImage = function(){

this.setGiphySearchImage( $( "#word" ).val(),

$( "#limit" ).val() +

offsetUrl + offsetValue)

};

lgiftm.setGiphySearchImage = function( word, conditions ){

var url = "";

if ( $( "#trending" ).prop( "checked" ) ) {

url = giphyRoot + trendUrl + apiUrl +

apiKey + limitUrl + conditions;

} else {

url = giphyRoot + searchUrl + word + apiUrl +

apiKey + limitUrl + conditions;

}

$.getJSON(

url,

function(data) {

var i = 0;

$.each(data.data, function( key, val ) {

$( lgtmId ).append(

imgTag1 + val.images.original.url +

imgTag2 + i + imgTag3 +

val.images.fixed_width_small.url + imgTag4

);

i++;

});

// クリックしただけでクリップボードに貼り付けちゃう便利ライブラリ

new Clipboard( clipboardClass );

}

);

offsetValue += parseInt( $( "#limit" ).val() );

};

lgiftm.clear = function(){

$( "div" + lgtmId ).empty();

offsetValue = 0;

}

})();

( function(){

"use strict";

// 初期表示用

lgiftm.setGiphySearchImage( "cat", 10 );

$( "#btn" ).click( function( e ) {

// 表示初期化してから検索画像を表示しまっせ

lgiftm.clear();

lgiftm.setGiphySearchImage( $( "#word" ).val(), $( "#limit" ).val() );

});

$( "#more_btn" ).click( function( e ) {

// 検索画像をもっと表示しまっせ

lgiftm.setMoreGiphySearchImage();

});

})();

</script>

解説

今回の機能はランダムはめんどくさかったのでGiphy APIのトレンド表示を使用しました。

トレンド検索：<input id="trending" type="checkbox">

1	トレンド検索：<input id="trending" type="checkbox">

トレンド表示のチェックボックスを追加

lgiftm.setGiphySearchImage = function( word, conditions ){
var url = "";
if ( $( "#trending" ).prop( "checked" ) ) {
url = giphyRoot + trendUrl + apiUrl +
apiKey + limitUrl + conditions;
} else {
url = giphyRoot + searchUrl + word + apiUrl +
apiKey + limitUrl + conditions;
}
$.getJSON(
url,

lgiftm.setGiphySearchImage = function( word, conditions ){

var url = "";

if ( $( "#trending" ).prop( "checked" ) ) {

url = giphyRoot + trendUrl + apiUrl +

apiKey + limitUrl + conditions;

} else {

url = giphyRoot + searchUrl + word + apiUrl +

apiKey + limitUrl + conditions;

}

$.getJSON(

url,

あとはjQuery先生のajax通信するURLをGiphy APIのトレンドのエンドポイントに変更するだけです。
検索機能はほとんど完成していたので変更はほぼ無しでござる。

あとがき

本当はGIF画像にLGTMが重なって作成されるように改良したい！！
時間があればやると言っておきます。

ソースコード

解説

あとがき

関連