August 02, 2018

GIFアニメを動画のようにシーク! jsgif ブックマークレットのFork版

event_noteAugust 02, 2018
InternetExplorerでは上手く動作しませんでした...他のブラウザでも動かない場合があるかも

使い方1 (ローカル画像をドラッグ&ドロップ)

Ⅰ. 上のクリップマークのある枠内にローカルにあるアニメGIFファイルをドラッグ&ドロップ もしくは 枠内をクリックしてファイル選択ダイアログからGIFファイルを読み込みます。

Ⅱ. "jsgiff" ボタンを押してから、先ほど読み込んだGIFをクリックすると、GIFをフレーム毎に読み込んで動画のように好きな位置から再生できます。

使い方2 (ブックマークレットとしてお好きなページで実行)

上の "jsgiff" ボタンのリンクをブックマークに登録し、気になるGIF画像があるページを見つけたときに、ブックマークからこのjsgiffのリンクを実行することで、使い方1と同じくGIFを動画のように再生することが可能になります。
ただし、クロスドメインの問題で読み込みに失敗するページが多いようなので、もしも読み込みに失敗した場合には、表示される星マークをクリックするなどしてそのGIFファイルを単独で表示させてから、再び、ブックマークに登録したjsgiffのコードを実行してください。

ブックマークへの登録の仕方ですが、Chromeの場合は以下のように、ブックマークバーを設定から表示させて、ドラッグ&ドロップするのが手軽です。Firefoxの場合はボタンを右クリックして、"このリンクをブックマーク" から登録するのが早いです。

Chromeでのブックマークへの登録

このツールについて

オリジナルは GitHub にてMITライセンスで公開されているブックマークレットで、当ページで使用しているコードはそれを一部改変したものです。

jsgif - JavaScript GIF parser and player

また、GIF画像のローカルからの読み込みについては、https://codepen.io/mattsince87/pen/yadZXv にて公開されているコードを参照させてもらいました。

A pure Javascript file upload with drop zone (drag & drop) and image preview. - **No Jquery or Plugins required.**