PR

GIFアニメを簡単に追加できる拡張機能 GIFMAGAZINE for Chrome

スポンサーリンク
スポンサーリンク

GIFMAGAZINE for Chrome

GIFアニメーションをサイトやブログにドラッグ&ドロップするだけで、簡単に追加できるchrome拡張機能「GIFMAGAZINE for Chrome」をご紹介します。

画像形式の「GIF」には、GIF画像をパラパラ漫画のように並べて表示して、動画のように見せることができる「GIFアニメーション」という機能があります。

形式は画像ですが、アニメーションで動きを表現できるので、短い動画の代わりとして使うことができます。実写やアニメ、スマホのスタンプ調といったGIFアニメがたくさんあります。

GIFアニメーション

また、以下のようにPCの操作説明にもよく使われます。サイズが小さいので表示も早いし、画像だけで説明するより、GIFアニメを使ったほうがはるかにわかりやすいですね。

GIFアニメ PC操作説明

Chrome拡張機能「GIFMAGAZINE for Chrome」は、GIF作品の投稿・共有サービスを運営しているGIFMAGAZINEがリリースしたPC向けのアプリです。

ブラウザにインストールすると、ドラッグ&ドロップだけでGIFアニメを簡単に追加することができます。GIFアニメをブログの画像に使うと、LINEやSNSのスタンプみたいに扱えますよ。

スポンサーリンク

GIFMAGAZINE for Chromeを追加

では、さっそく GIFMAGAZINE for Chrome を使ってみましょう。まずは以下のChromeウェブストアから「GIFMAGAZINE for Chrome」をインストールします。

GIFMAGAZINE for Chrome - Chrome Web Store
Search GIFs in GIFMAGAZINE, and embed it to your editor with drag and drop.

まずは右上の「Chromeに追加」をクリックしてください。

GIFMAGAZINE for Chrome インストール

「GIFMAGAZINE for Chrome」を追加しますか?と表示されるので、「拡張機能を追加」します。

GIFMAGAZINE for Chrome 拡張機能を追加

「GIFMAGAZINE for Chrome」がchromeに追加されました。chromeの右上に赤い拡張機能のアイコンが表示されています。これで使用準備が整いました。

GIFMAGAZINE for Chrome 拡張機能を追加

GIFMAGAZINE for Chrome の使い方

続いて、GIFMAGAZINE for Chrome からブログ記事にGIFアニメを挿入してみます。右上の赤いアイコンをクリックすると、GIFアニメがたくさん出てきます。

GIFMAGAZINE for Chrome GIFアニメーション検索

では検索窓から単語を入力して、好きなGIFアニメを検索してみましょう。「ねこ」で検索すると、猫のGIFアニメがたくさん出てきました。

GIFMAGAZINE for Chrome の使い方

下にスクロールして「もっと見る」をクリックすると、さらにGIFアニメが表示されます。実写やアニメ、スマホのスタンプ調、おもしろGIFなど、様々なGIFアニメがありますね。

GIFMAGAZINE for Chrome の使い方

あとは好きなGIFアニメを選んで、編集画面にドラッグ&ドロップするだけです。

GIFMAGAZINE for Chrome GIFアニメを追加

記事内にGIFアニメのHTMLコードが追加されました。ドラッグ&ドロップするだけなので、とっても簡単です。

GIFMAGAZINE for Chrome GIFアニメを追加

実際に表示されるのは、以下のかわいいネコさん拡大GIFアニメです。


via gifmagazine.net

該当のGIFアニメをクリックすると、リンク先とGIFアニメ表示用のHTMLコードが表示されます。ドラッグ&ドロップでGIFアニメが追加できない場合は、こちらでコードを取得してください。

GIFMAGAZINE for Chrome HTMLコード取得

ちなみに、WordPressにGIFアニメを追加する場合は、ドラッグ&ドロップするだけでOKです。

スポンサーリンク

GIFMAGAZINE GIFアニメ検索のポイント

さて、GIFMAGAZINE for Chrome でGIFアニメを検索するときのポイントが一つあります。

例えば「ねこ」や「猫」で検索した場合と、「cat」で検索した場合の表示結果は異なります。以下は「ねこ」で検索した場合の表示結果です。

GIFMAGAZINE ねこで検索

続いて「cat」で検索すると、違うGIFアニメが表示されました。

GIFMAGAZINE catで検索

カタカナの「ネコ」で検索すると、マンガ調のGIFアニメがたくさん出てきました。検索で表示されるGIFアニメの結果は、英語と日本語で異なります。

GIFMAGAZINE ネコで検索

以前にGIFMAGAZINEの方から聞いたのですが、GIFMAGAZINE は海外で人気が高いそうです。英語圏からGIFアニメを投稿するときは英語のタグを付けるので、検索結果は異なります。

また、クリエイターごとにタグの付け方も違うので、検索ワードやタグの傾向を知ると、好みのGIFアニメが探しやすくなります。

GIFアニメのテイストがイメージと違う場合は、検索ワードをいろいろ変えてみてください。イヌの場合も「犬」や「いぬ」ではなく、英語の「dog」も検索してみてください。

スマホでGIFアニメが使えるLINEアプリ「ジフマガ」

GIFMAGAZINE for Chrome をインストールしておけば、簡単にGIFアニメーションが使えるようになります。ブログのちょっとしたアクセントや、LINEのスタンプみたいな感じで使うと面白いかもしれませんね。

GIFMAGAZINE for ChromeはPC用ですが、スマホでもGIFアニメが使えます。

実際にGIFMAGAZINEから、LINEのトークからGIFスタンプを送信できる新機能「ジフマガ」がリリースされ、スマホでGIFアニメが使えるようになっています。

ジフマガの使い方ですが、LINEのトークルーム左側にある「+」マークから、「ジフマガ」をタップして、カテゴリや検索から好みのGIFアニメを選んで送信します。

LINEでGIFアニメ送信

サービス開始時点で1500点以上のGIFスタンプが使えて、常時追加されるとのこと。PCだけでなく、LINEでも簡単にGIFアニメが使えるようになると楽しいですね。

LINE ジフマガでGIFアニメ送信

スポンサーリンク

GIFMAGAZINEのサイト

chrome拡張機能「GIFMAGAZINE for Chrome」をリリースしたGIFMAGAZINEさんのサイトはこちら。GIFアニメもたくさんあるので、検索してみてください。

https://gifmagazine.net/

GIFMAGAZINEのブログ「Daily GIF89a」には、GIFアニメーションの作り方やおもしろGIFの紹介、GIF画像に関する記事を始め、アーティストへのインタビュー記事も掲載されています。

GIFアニメーションに興味がある方は一度覗いてみてください。

http://gif89a.net/
',b.captions&&s){var u=J("figcaption");u.id="baguetteBox-figcaption-"+t,u.innerHTML=s,l.appendChild(u)}e.appendChild(l);var c=J("img");c.onload=function(){var e=document.querySelector("#baguette-img-"+t+" .baguetteBox-spinner");l.removeChild(e),!b.async&&n&&n()},c.setAttribute("src",r),c.alt=a&&a.alt||"",b.titleTag&&s&&(c.title=s),l.appendChild(c),b.async&&n&&n()}}function X(){return M(o+1)}function D(){return M(o-1)}function M(e,t){return!n&&0<=e&&e=k.length?(b.animation&&O("right"),!1):(q(o=e,function(){z(o),V(o)}),R(),b.onChange&&b.onChange(o,k.length),!0)}function O(e){l.className="bounce-from-"+e,setTimeout(function(){l.className=""},400)}function R(){var e=100*-o+"%";"fadeIn"===b.animation?(l.style.opacity=0,setTimeout(function(){m.transforms?l.style.transform=l.style.webkitTransform="translate3d("+e+",0,0)":l.style.left=e,l.style.opacity=1},400)):m.transforms?l.style.transform=l.style.webkitTransform="translate3d("+e+",0,0)":l.style.left=e}function z(e){e-o>=b.preload||q(e+1,function(){z(e+1)})}function V(e){o-e>=b.preload||q(e-1,function(){V(e-1)})}function U(e,t,n,o){e.addEventListener?e.addEventListener(t,n,o):e.attachEvent("on"+t,function(e){(e=e||window.event).target=e.target||e.srcElement,n(e)})}function W(e,t,n,o){e.removeEventListener?e.removeEventListener(t,n,o):e.detachEvent("on"+t,n)}function G(e){return document.getElementById(e)}function J(e){return document.createElement(e)}return[].forEach||(Array.prototype.forEach=function(e,t){for(var n=0;n","http://www.w3.org/2000/svg"===(e.firstChild&&e.firstChild.namespaceURI)}(),m.passiveEvents=function i(){var e=!1;try{var t=Object.defineProperty({},"passive",{get:function(){e=!0}});window.addEventListener("test",null,t)}catch(n){}return e}(),function a(){if(r=G("baguetteBox-overlay"))return l=G("baguetteBox-slider"),u=G("previous-button"),c=G("next-button"),void(d=G("close-button"));(r=J("div")).setAttribute("role","dialog"),r.id="baguetteBox-overlay",document.getElementsByTagName("body")[0].appendChild(r),(l=J("div")).id="baguetteBox-slider",r.appendChild(l),(u=J("button")).setAttribute("type","button"),u.id="previous-button",u.setAttribute("aria-label","Previous"),u.innerHTML=m.svg?f:"<",r.appendChild(u),(c=J("button")).setAttribute("type","button"),c.id="next-button",c.setAttribute("aria-label","Next"),c.innerHTML=m.svg?g:">",r.appendChild(c),(d=J("button")).setAttribute("type","button"),d.id="close-button",d.setAttribute("aria-label","Close"),d.innerHTML=m.svg?p:"×",r.appendChild(d),u.className=c.className=d.className="baguetteBox-button",function n(){var e=m.passiveEvents?{passive:!1}:null,t=m.passiveEvents?{passive:!0}:null;U(r,"click",x),U(u,"click",E),U(c,"click",C),U(d,"click",B),U(l,"contextmenu",A),U(r,"touchstart",T,t),U(r,"touchmove",N,e),U(r,"touchend",L),U(document,"focus",P,!0)}()}(),S(e),function s(e,a){var t=document.querySelectorAll(e),n={galleries:[],nodeList:t};return w[e]=n,[].forEach.call(t,function(e){a&&a.filter&&(y=a.filter);var t=[];if(t="A"===e.tagName?[e]:e.getElementsByTagName("a"),0!==(t=[].filter.call(t,function(e){if(-1===e.className.indexOf(a&&a.ignoreClass))return y.test(e.href)})).length){var i=[];[].forEach.call(t,function(e,t){var n=function(e){e.preventDefault?e.preventDefault():e.returnValue=!1,H(i,a),I(t)},o={eventHandler:n,imageElement:e};U(e,"click",n),i.push(o)}),n.galleries.push(i)}}),n.galleries}(e,t)},show:M,showNext:X,showPrevious:D,hide:j,destroy:function e(){!function n(){var e=m.passiveEvents?{passive:!1}:null,t=m.passiveEvents?{passive:!0}:null;W(r,"click",x),W(u,"click",E),W(c,"click",C),W(d,"click",B),W(l,"contextmenu",A),W(r,"touchstart",T,t),W(r,"touchmove",N,e),W(r,"touchend",L),W(document,"focus",P,!0)}(),function t(){for(var e in w)w.hasOwnProperty(e)&&S(e)}(),W(document,"keydown",F),document.getElementsByTagName("body")[0].removeChild(document.getElementById("baguetteBox-overlay")),w={},h=[],o=0}}})
タイトルとURLをコピーしました