Giphy APIから画像取ってくるサンプルコードはこれだ
なお実際に使用出来るのはここだ
サンプルコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
<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> <!--この辺で操作するタグ--> <textarea id="word">cat</textarea> <textarea id="limit">10</textarea> <button id="btn">検索</button> <!--このdivに表示される--> <div id="lgtm_images"></div> <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=", limitUrl = "&limit=", imgTag1 = '<img class="copy" data-clipboard-text="" id="lgtm', imgTag3 = '" src="', imgTag4 = '">', clipboardClass = ".copy", lgtmId = "#lgtm_images"; lgiftm.setGiphySearchImage = function( word, limit ){ $.getJSON( giphyRoot + searchUrl + word + apiUrl + apiKey + limitUrl + limit, 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 ); } ); }; lgiftm.clear = function(){ $( "div" + lgtmId ).empty(); } })(); ( function(){ "use strict"; // 初期表示用 lgiftm.setGiphySearchImage( "cat", 10 ); $( "#btn" ).click( function( e ) { // 表示初期化してから検索画像を表示しまっせ lgiftm.clear(); lgiftm.setGiphySearchImage( $( "#word" ).val(), $( "#limit" ).val() ); }); })(); </script> |
すごく簡素にしてます。
空のindex.htmlとかいうファイルにこのソースコード貼り付けただけで
実現できちまうんだぜこれ。
じゃ一つ一つ見ていくます。
解説のようなもの
|
1 2 |
<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> |
まずこれCDNからの贈り物
jQuery大先生とclipboard大先生です。
jQuery大先生は説明不要ですね。
clipboard大先生はクリックしただけでクリップボードに好きな文字列をコピーできてしまうというライブラリ。
後ほど使う時に出てきます。
この二つのライブラリを読み込んでおります。
|
1 2 3 4 5 6 7 |
<!--この辺で操作するタグ--> <textarea id="word">cat</textarea> <textarea id="limit">10</textarea> <button id="btn">検索</button> <!--このdivに表示される--> <div id="lgtm_images"></div> |
次に入力する箇所と検索ボタンです。
ここも説明不要ですかね。
LGTM画像を表示するためのエリアのためdivタグを追加してます。
|
1 2 |
var lgiftm = {}; ( function(){ |
ここではlgiftmとかいうライブラリのような名前にしてます。
なんでも良いです。
そして即時関数でlgiftmのプロパティを設定していきます。
JavaScriptで即時関数を使う理由
|
1 2 3 |
lgiftm.setGiphySearchImage = function( word, limit ){ $.getJSON( |
いろいろ使う文字列を宣言しときます。
lgiftmにsetGiphySearchImage関数式で追加します。
そしてajaxでJSONを取得しにいきます。
ほんまjQueyって便利ですわ。
|
1 2 3 4 5 6 7 8 |
$.each(data.data, function( key, val ) { $( lgtmId ).append( imgTag1 + val.images.original.url + imgTag2 + i + imgTag3 + val.images.fixed_width_small.url + imgTag4 ); i++; }); |
取得したJSONを調理します。
lgtmIdってのがLGTM画像を表示するdivのやつ。
このdivにimgタグ作ってどんどんapendしていくだけ。
このimgタグにはすでにクリックした時何をクリップボードに保存するか決めています。
あとclipboardで指定するclass属性も付与します。
ここでは”copy”としています。
|
1 2 |
// クリックしただけでクリップボードに貼り付けちゃう便利ライブラリ new Clipboard( clipboardClass ); |
そんでclipboardのコンストラクタに指定したいclass属性名を渡したげる。
class属性名でヒットしたdivに追加されたimgタグのdata-clipboard-text属性がクリップボードのコピーされる文字列というわけ。
|
1 2 3 |
lgiftm.clear = function(){ $( "div" + lgtmId ).empty(); } |
そして忘れちゃいけない画像のリセット関数作って終わり。
|
1 2 3 4 5 6 7 |
$( "#btn" ).click( function( e ) { // 表示初期化してから検索画像を表示しまっせ lgiftm.clear(); lgiftm.setGiphySearchImage( $( "#word" ).val(), $( "#limit" ).val() ); }); |
初期化して検索した画像結果を表示するという内容を検索ボタンに設定して完了や！
あとがき
なんかランダムとか100件以上の表示とか追加したいなーと。
暇があればどんどん改良します。
あ、暇だった。
スポンサードリンク