ブログにGIFアニメーションを載せるならスタートボタン( Gifffer )を装備する方が良いでしょう

投稿 2016年11月09日
31
GIFアニメーションの作り方
GiffferGIFアニメスタートボタン再生ボタンクリックしたらGoogle評価
 弊ブログはマイクロソフトIE全バージョンで正しく表示しておりません!
ブラウザは Chrome や Firefox 等への移行をお勧め致します。



弊ブログでは、記事説明でGIFアニメーション( 以降はGIFアニメと略します )を載せることがよくあります。
例えば


[ 画像クリックで GO & STOP ]


[ 画像クリックで GO & STOP ]



こんな具合です。
でもGIFアニメといえば、普通はブログやサイトのページを開いた瞬間からピコピコなんて動いて表示されますよね(笑)
弊ブログでは、ブログ表示負荷を考慮して、最初からGIFアニメの動きを表現する必要がない場合には上図のように「スタートボタン」を押さなければ動かないようにしてあるんです。

記事を読んでる最中に絶えずピコピコって動いてるものが視界にあるとウザく感じるんです (^_^; アハハ…
更に複数のGIFアニメが同時にピコピコなんて動いてたらウザ過ぎるんです(爆)
きっと皆さんもそう思うでしょ(笑)
ですから、弊ブログでは必要な時にだけにスタートボタンを押して見て戴けるようにしてあります。
もう一度クリックしたらストップする仕組みです。

GIFアニメって皆さんもご存知かと思いますが、要はパラパラ漫画的に複数の静止画像を重ね合わせた構造になっていて、それを順番にパラパラとめくるようにして動きを表してるのです。
ですから、必然的にGIFアニメってそのファイル容量が大きくなるものなんです。

ファイル容量が大きくなる = 表示が遅くなる(重たくなる) と言う意味です。

最近のインターネット速度やパソコンやスマホは一昔前に比べたら格段に性能がよくなってますから、ブログやサイトに載せる画像の「ファイル容量」と言う知識にはまったく関心がなく、スマホで撮ったままの3~4MBもの巨大なファイル容量の画像などを平気でペタペタって貼り付けてるブログも散見することがあります (^_^; アハハ…
まあ、そういうのは殆どはブログ初心者さんの場合が多いんですけど、、、。
そういうブログをたまたま見つけると

『 おぃおぃ、冗談でしょ~ (^_^; アハハ… 』

って、他人事ながら私なんか脂汗が出ちゃいます(笑)

記事の主題から脱線しちゃいそうですからこの辺りで止めておきます (^^ゞポリポリ

いいですか? もう一度言います(笑)

ファイル容量が大きくなる = ブログ表示全体まで遅くなる(重たくなる)



弊ブログでは、静止画像であれGIFアニメであれ、極力それらのファイル容量は小さく加工して記事に載せて、ブログ表示に余分な負荷(ストレス)が掛からないように工夫しております。

ですから、今回の記事のタイトルのような話になるんですけどね。

GIFアニメが最初からピコピコと動いてるということは、そのファイル容量全体がブログのそのページ表示に負荷を与えてると言う意味です。
冒頭に載せましたウイルスバスタークラウドがPC内スキャンしているGIFアニメのファイル容量は364 KBですから、これなら負荷を与える程のファイル容量ではないんですけど、それでももし同一ページ内に複数のGIFアニメや画像を載せていたら、それらが合計されて「ブログ表示に負荷を与える」ことになります。

その為に、弊ブログでは基本的にはGIFアニメは「動きをストップさせておいて表示」させるようにしている訳です。

スタートボタンを押す前のこのGIFアニメのトップ画像(アニメーションが動き出す最初の1枚目の静止画像)は


2016-11-05-2-virus-b-anitop.png


これになりますが、このトップ画像のファイル容量はたったの33.1 KBしかありません。

GIFアニメ全体のファイル容量: 364 KB
GIFアニメのトップ画像のファイル容量: 33.1 KB

どうです? この記事のページが開く時に、GIFアニメにスタートボタンを配置してある時と、ない時のその負荷の掛かり方がなんとなくこの数値の差から『 ああ、分かる気がする~♪ 』って思いませんか?(笑)

1記事に画像が1個2個程度ならあまり気にすることもないとは思うんですけど、それでもブログ表示になるべく無用な負荷は掛けない方が良いのは当然ですよね。


さぁ、それではGIFアニメには「スタート・ストップボタン」を付けましょう。


簡単ですから ヽ(^^ ) ヨシヨシ
それにはGitHubサイトの

https://github.com/krasimir/gifffer/blob/master/lib/gifffer.js

のページの「Raw」ボタンをクリックすると新たなテキスト表示になりますから、右クリックしてメニューの「名前を付けて保存」で「gifffer.js」というファイル名でパソコンのデスクトップに保存して下さい。

そしたら、FC2ブログを例にしますと、管理ページの「ファイルアップロード」から「gifffer.js」ファイルをアップロードして、そのURLを


2016-11-09-3-giffferurl.png


メモ帳にコピペしておいて下さい。

そして、下記枠内をクリックしてからまたメモ帳にコピペしてください。

枠内をクリックすると「全選択」されますからそれをコピーすると簡単です

<script src="あなたのURL"></script>
<script>
window.onload = function() {
Gifffer();
}
</script>


コピペした中の「あなたのURL」部分を、事前にコピーしてあった gifffer.js ファイルのURLに書き換えてください。

さて、正しく整った設定部分を、あなたのFC2ブログのいま利用中のテンプレートに組み込みます。
その前に、必ずそのテンプレートを「複製」して、複製した方に組み込みます。
ブログ管理メニューの「テンプレートの設定」→「テンプレート管理 (PC用)」の [ あなたが編集するテンプレート名 ] のHTML編集欄内の一番最下行の

</body>
</html>

と言う文字列の直上に貼り付けます。

■ [ このURL部分はサンプルで実存しないURLですのでコピーしても動作しません ]
<script src="http://blog-imgs-85.fc2.com/a/f/oops0011/gifffer.js"></script>
<script>
window.onload = function() {
Gifffer();
}
</script>
</body>
</html>


このように設定出来ましたら、そのテンプレートのHTML編集欄の下にあります「 更新 」ボタンをクリックします。
これでブログテンプレートへの設定は終わりです。
そして、その設定をしたテンプレートを「適用」設定すれば、Giffferが使えるようになる訳です。

後は、ブログ記事にGIFアニメを貼り付けるだけです。
その方法は

 <img data-gifffer="GIFアニメのURL">


このタグの「GIFアニメのURL」部分に貼り付けたいGIFアニメのURLを入れてから、記事中にコピペしてあげれば終了です。
これであなたの記事のGIFアニメにも「スタート・ストップボタン」が表示されるようになります。

そうそう、「Google評価」 の件なんですけど、、、(笑)
要は、諸条件でブログページの全部の表示がなかなか終わらなくて( 重たくて )

→  loading02_r2_c10.gif  ←

こんな具合にずっと読み込み中のままになったり、読み込みに時間が掛かるブログはGoogle評価が悪くなって検索結果でも上位表示されなくなってしまう要因の1つになるんです。


Google評価 に関心がありましたら検索してみて下さい。

但しこのGiffferは、画像拡大用jQuery(多種ありますが)との相性は非常に悪く、両方同時にブログテンプレートに装備すると、コンクリフト(衝突)を起こしてどちらかが機能しないという現象が起きることがありますので、頭の片隅に記憶しておくことも必要でしょう (^_^; アハハ…
まぁ、それを避ける為の工夫もいろいろとありますが、ケースバイケースなのでここでは割愛します。





あなたのブログはモバイルフレンドリーですか?
Google モバイルフレンドリーテスト

あなたのブログ内分析はGTmetrixが強力です!
GTmetrix


検索からの方はトップページへもどうぞ



[ 関連記事 ]
もっと見る
ぼっちん
ぼっちん

31 COMMENTS

There are no comments yet.

メグ  

う~~~~~

オヒサシブリブリッ♪(/ω\*)

わかりやすく噛み砕いて書いていただきありがとん!

しかしながら~~~
アニメを貼る予定がございません~~~
(▼∀▼)ニヤリッ

メグんとこ、肌色画像ペタペタたくさん貼ってありますが、モチロン全て容量小さくしてあります~~♪

しかし、ブログなどやっておりますとヤル事だらけになってしまいますねぇ。。。

気力体力追いつきません~~。

2016/11/11 (Fri) 23:51

ぼっちん  

メグたんへ

メグたん♪ おはよ~o(⌒0⌒)o~♪

わかりやすく噛み砕いて書いていただきありがとん!
うんうん(^-^) 分かり易く書くのが私の趣味だから (≧ω≦。)プププ

アニメを貼る予定がございません~~~
(▼∀▼)ニヤリッ

え゛~~~?(笑)
メグたんところは、静止画よりもピクピクムニュムニュって動いてるGIFアニメの方がよりインパクトあると思うんだけどねぇ(笑)
動画の原画を送ってくれたら、シーンをチョイスしてGIFアニメに加工してあげまっせ(笑)
もちろん私好みなシーンで、、、ああ、隠すべきところはしっかり隠して イヒッイヒッ♪

メグんとこ、肌色画像ペタペタたくさん貼ってありますが、モチロン全て容量小さくしてあります~~♪
うんうん(^-^) さすがだね~ ヽ(^^ ) ヨシヨシ

しかし、ブログなどやっておりますとヤル事だらけになってしまいますねぇ。。。
気力体力追いつきません~~。

(笑)メグたん♪ 日常的に忙しすぎるからいろいろと時間配分も大変だろうに、よく頑張ってるから感心しちゃうよ ヽ(^^ ) ヨシヨシ

2016/11/12 (Sat) 09:17

ロビンソン  

giffferボタンの色

お世話になります。
ぼっちんさんのGIF関連の記事を参考にGIF動画を作成してみました。
ループ再生の区切りが分かるように、最後のファイルは数枚連続してからGiamで合成しました。
テンプレートにcolorboxを入れていますが、プレビューしたところ衝突などによる不具合はなかったようです。

ただ動画が暗めのモノトーンで、giffferボタンが認識し辛いようです。
こちらの記事のGIF動画ではgiffferボタンの色をカスタマイズされているようですが、よろしければボタン色の変更方法を教えていただけないでしょうか。

厚かましいお願いで申し訳ありませんが、よろしくお願いします。

2018/06/30 (Sat) 18:33
ぼっちん

ぼっちん  

To ロビンソンさん

ロビンソンさん、こんばんは ^^

「giffferボタンの色」のカスタマイズは自己流でやったものですから、あくまでも参考ということでご了承下さいね (^^ゞポリポリ
いま「GitHub」からgifffer.jsをDLしてみましたら、なんと私が5~6年前にDLしたファイルとだいぶ変わってましてびっくりしました(爆)

その中に // creating play button という括りがありまして、ここでボタンの形状や色の設定が行われております。

私のは下記のような設定を行ってあります。
-----------------
// creating play button
var play = d.createElement('DIV');
play[sa]('class','gifffer-play-button');
play[sa]('style', 'width:60px;height:60px;border-radius:30px;background:rgba(255, 0, 0, 0.5);position:absolute;left:' + ((w/2)-30) + 'px;top:' + ((h/2)-30) + 'px;');
var trngl = d.createElement('DIV');
trngl[sa]('style', 'width:0;height: 0;border-top:14px solid transparent;border-bottom:14px solid transparent;border-left:14px solid rgba(255,255,255, 0.9);position:absolute;left:26px;top:16px;')
play.appendChild(trngl);
----------------

2018/06/30 (Sat) 19:30

ロビンソン  

To ぼっちんさん

早速のご回答ありがとうございます。

jsの中身を弄るんですね・・・ちょっと私には高度過ぎるようです(汗)
コピペする時のちょっとしたミス等で取り返しの付かない事になるのが怖いです(笑)

せっかく教えていただいたのに、申し訳ありません。
今後ともよろしくお願いします。

2018/06/30 (Sat) 21:46
ぼっちん

ぼっちん  

To ロビンソンさん

そうなんですよね~ この件は直接jsファイルの中身をカスタマイズしております (^^ゞポリポリ

[ jsファイルURL削除 ]

ここにカスタマイズ後の圧縮ファイルを置いてありますから、コピーして戴いて、ロビンソンさんの領域にアップロードして使って戴いてもけっこうですよ (^_^)ニコニコ 
上記URLのまま組み込んでしまうと、私がまた同jsを弄くってファイル名を変更してしまったりすると使えなくなってしまいますから(笑)

これは旧バージョンのファイルのままなんですけど、これでも問題なく動きますので (^_^)ニコニコ 

2018/06/30 (Sat) 22:04

ロビンソン  

To ぼっちんさん

独自にカスタマイズされたjsを公開して頂き恐縮です。

中身をコピペしてアップロードしたところ、ボタンの色は変更できました。
ただ中央寄せが出来ないようです。
https://blog-imgs-103.fc2.com/f/i/l/filipinadating/gif_sample-05.jpg

GitHubからDLしたmin.jsでは中央寄せできました。
https://blog-imgs-103.fc2.com/f/i/l/filipinadating/gif_sample-06.jpg

ただし両方共ボタンの位置が中央からずれていますが、仕様なんでしょうか?

2018/06/30 (Sat) 22:55
ぼっちん

ぼっちん  

To ロビンソンさん

ロビンソンさん、おはようございます ^^

「鍵付きコメント」の件なんですけど、普通にオープンコメントになっておりますよ~ ^^
弊ブログではコメントは全て「管理者が承認後に表示する」ように設定してありますので、承認前は「承認待ちコメント」と表示されます。

せっかくスクショを見せてくださったんですけど、スクショ(静止画)からでは何も分析できません (^^ゞポリポリ
実際にGiffferを用いて動作しているシーンのHTMLやらJSを拝見させて戴かないと「単なる推論」しか申し上げられませんので、テスト記事でも書いて戴いて、第三者に見られるのが困るようでしたら、パスワード付きの限定記事設定になさってそのURLと閲覧パスワードを鍵コメでけっこうですからお教え下さい。

尚、GiffferにはGIFアニメーション画像を記事中で自動的に左右センタリングする機能は持っておらず、それを望むとしたら、ご自身でCSSでセンタリングさせる必要があります。

また、GIFアニメーション画像の中央にGiffferのスタートボタンが配置されない件は、もしかしてGIFアニメーション画像に見えて居る図柄自体の「右と下側」に余白部分があるのではないでしょうか?
その為にスタートボタンの表示位置が中央からズレて見えるようになっているのではないかと「推察」致します (^^ゞポリポリ
あくまでも推察でしかありませんが (^^;; アセアセ

2018/07/01 (Sun) 07:44

ロビンソン  

To ぼっちんさん

お世話になります。

鍵付きコメントの件は、気持ちに余裕がなくてうっかりしていました。
中央寄せの件は<div style="text-align: center;">で中央寄せにすると、GithubからDLした方は適用されたようです。

ボタンの位置がずれている件は、余白部分は無いと思いますので、もしかしたら今回は縦長(270x480)のGIF動画だったせいかもしれません。

テスト記事に関しては、後ほどコメントさせていただきます。

2018/07/01 (Sun) 10:35
ぼっちん

ぼっちん  

To ロビンソンさん

ボタンの位置がずれている件は、余白部分は無いと思いますので、もしかしたら今回は縦長(270x480)のGIF動画だったせいかもしれません。
私も最初は「縦長GIFアニメーションだから?」と疑ったんですけど、昔を振り返りましたら(笑)
https://oops0011.blog.fc2.com/blog-entry-44.html
こんな具合にやや縦長なGIFアニメーションでも、中央にスタートボタンが表示されているのを思い出したんでした (^^ゞポリポリ
従って「もしかしてロビンソンさんのGIFアニメには余白がある?」と考えてみた次第だったんです。
やはり静止画スクショでは原因追及には材料不足なんです (^_^; アハハ…

テスト記事に関しては、後ほどコメントさせていただきます。
はい、よろしくお願い致します ^^

2018/07/01 (Sun) 10:53

-  

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2018/07/01 (Sun) 12:20
ぼっちん

ぼっちん  

To ロビンソンさん

ロビンソンさん、テストページの作成とお知らせをありがとうございました ^^

GIFアニメそのものは余白もなく正しく作成されていることを確認出来ました。
スタートボタンがGIFアニメの中央に表示されないのは、やはり「縦長画像」に起因するもののようですね~。
ですので「仕方ないけど、これはこのままで良し」とするか、GIFアニメの部分を任意の範囲で「GIFアニメーションのまま切り抜く」ことをやって、自動的にスタートボタンが中央になるように「四角もしくは横長」にGIFアニメーションを加工する方法を取ることも1つの方法かと思います。

GIFアニメーションの動きを維持したままで「一部分を切り抜く」方法は
https://oops0011.blog.fc2.com/blog-entry-117.html
の記事で解説してありますのでご参照下さい。

Giffferを用いてGIFアニメーション画像を記事で左右センタリングさせる方法ですが、、、

■ HTML
<div style="text-align:center;">
<img data-gifffer="ここにGIFアニメーション画像のURL" class="gifffer">
</div>

■ CSS ↓ ロビンソンさんのCSSの最後尾に追記して下さい。
.gifffer {
display: block;
margin: 0 auto;
}

上記記述をお試し下さい。
尚、
class="gifffer"
の部分は任意文字列でけっこうですので、これより変更しましたら、当然CSSの方もそれに合わせて下さい ^^

2018/07/01 (Sun) 13:29

ロビンソン  

To ぼっちんさん

お世話になります。

ご確認とご助言ありがとうございます。

>「仕方ないけど、これはこのままで良し」とする

画像の切り抜きなどはしたくないので、このままで良しとします。

>Giffferを用いてGIFアニメーション画像を記事で左右センタリングさせる

これについてはGithabからDLしたmin.jsの中身を一部修正したところ<div style="text-align: center;">で囲むだけで中央寄せしてボタンの色も変更できました。

実は、当初はぼっちんさんがクラス名を当ててボタンの色をcssで使い分けていると思っていました。
ですから、もし今後またデフォルトの色に戻す可能性もあります。
悪しからず、よろしくお願いします。

それではテスト記事は削除します。
今後ともよろしくお願いします。

2018/07/01 (Sun) 14:30
ぼっちん

ぼっちん  

To ロビンソンさん

画像の切り抜きなどはしたくないので、このままで良しとします。
ハーイ(^O^")/ 納得です~ ^^

これについてはGithabからDLしたmin.jsの中身を一部修正したところ<div style="text-align: center;">で囲むだけで中央寄せしてボタンの色も変更できました。
なるほど、良かったですね~(笑)

実は、当初はぼっちんさんがクラス名を当ててボタンの色をcssで使い分けていると思っていました。
ですから、もし今後またデフォルトの色に戻す可能性もあります。
悪しからず、よろしくお願いします。

なるほどなるほど(笑) 勘違いさせるクラス名を付けちゃってごめんなさいね~ (^_^; アハハ…
こういうの、瞬間的に思いついたネーミングしてしまうものですから、後先のことは考えてないんですよね(爆)

ロビンソンさんのご都合に合わせて、いろいろと応用して戴ければと思います m(_ _)m
お疲れ様でした~ ^^

2018/07/01 (Sun) 14:48

ロビンソン  

To ぼっちんさん

ぼっちんさんのブログにはGIF動画作成までの流れがわかりやすく解説されていて、初めての私でも何とか出来ました。
やはりFC2動画など他のサービス経由でなく直接ブログに表示できるのはいいですね。

ところで先ほどのテスト記事内のGIF動画ですが、滑らかさやサイズ等は問題なかったでしょうか?

2018/07/01 (Sun) 16:26
ぼっちん

ぼっちん  

To ロビンソンさん

ロビンソンさん、こんばんは ^^

ぼっちんさんのブログにはGIF動画作成までの流れがわかりやすく解説されていて、初めての私でも何とか出来ました。
そう言って戴けると嬉しいです、ありがとうございます ^^
弊ブログ記事では「実体験」に基づいて書いておりますから、作業工程で気がついた特記的な表現も出来ているつもりではあります(笑)

やはりFC2動画など他のサービス経由でなく直接ブログに表示できるのはいいですね。
そうなんです、ですから私は昔から一貫してGIFアニメーションで作業動作表現をして来たんですね ^^
一頃「GIFのライセンス問題」が起きて、ネット上でGIFアニメーション表現が激減した時期があったんですけど、数年前にその問題が片付いて、最近のSNSでもGIFアニメーションが扱えるようになってまた脚光を浴びるようになったことは実に喜ばしいことで、ブログでももっともっとGIFアニメーションが活用されることを願ってやまないんです (^^ゞポリポリ

ところで先ほどのテスト記事内のGIF動画ですが、滑らかさやサイズ等は問題なかったでしょうか?
とりあえずデータ収集させて戴いた(笑)んですけど
------------
■ サンプルGIFアニメ

横縦サイズ 270px × 480px
ファイル容量 2.04MB
------------
となっておりましたね。
画角サイズ的には問題はなかったんですけど、ファイル容量は未圧縮だったご様子で「重すぎ」ます (^_^; アハハ…
圧縮軽量化すると After 507.42KB と、なんと元画像より 75% も軽く出来ます ^^
先ほどのサンプルは急いでおられたから未圧縮のままで記事に貼られたかと思います。

実際の記事にGIFアニメーションを貼られる時には、是非に圧縮軽量化してから貼られるようにお勧め致します ^^
軽くすることで、表示時のギクシャク感もある程度は避けられるようになりますから d(-_^)good!!

これからも楽しみながらGIFアニメーション作りを頑張って下さいね~♪

2018/07/01 (Sun) 20:17

ロビンソン  

To ぼっちんさん

お世話になります。

なるほど、画像ファイルの段階でTinyPing等で圧縮・軽量化すれば使える画像も増えて、アニメーションも滑らかになりますね!
ブログ内の画像では全てやっていましたが、今回は気が付きませんでした。

ブログ記事で公開前に教えていただいて、ありがとうございます。
今後ともよろしくお願いします。

2018/07/01 (Sun) 20:56
ぼっちん

ぼっちん  

To ロビンソンさん

なるほど、画像ファイルの段階でTinyPing等で圧縮・軽量化すれば使える画像も増えて、アニメーションも滑らかになりますね!
画像1枚ごとに圧縮軽量化したものをGIFアニメーションに組む方法もありますが、それだととても作業量が多くなって疲れてしまいますよ (^_^; アハハ…
ですから、それは考えずにとにかくGIFアニメーションを完成させて、そのGIFアニメーションの動きを維持したままでファイルを一気に圧縮してしまう素晴らしい無料サービスがあります。
https://oops0011.blog.fc2.com/blog-entry-160.html
この記事の『Compressor.io』を利用すると、1発で Before 2.04MB → After 507.42KB のようにすることが出来ます(笑)
TinyPingだと静止画しか圧縮軽量化出来ません。

お試し下さいね~♪

2018/07/01 (Sun) 21:10

ロビンソン  

To ぼっちんさん

お世話になります。
この記事はまだ読んでいませんでした。
こちらの方が効率的かつ圧縮率も高そうですね!

本当に勉強になります。
もうひとつお尋ねしたいのですが、GIF再生用でおすすめのフリーソフトはありますか?
QuickTiimeを使うと起動が重くてイライラします(苦笑)

2018/07/01 (Sun) 21:48

ロビンソン  

To ぼっちんさん

連投すいません。
GOM Playerでキャプチャした画像ファイルをCubeImage Resizeで一括縮小して、全てのファイルをTinyPingで軽量化してからGiamでGIF作成、そのGIFファイルをcompressor.ioで改めて軽量化しました。

その結果、画像ファイルは何倍も増えているのに800kbで収まりました。
またプレビューしたところ、ボタンも中央に表示されるようになりました。

失敗を重ねた後に出来るようになると、余計に楽しいですね。

2018/07/01 (Sun) 23:53
ぼっちん

ぼっちん  

To ロビンソンさん

ロビンソンさん、おはようございます ^^

GOM Playerでキャプチャした画像ファイルをCubeImage Resizeで一括縮小して、全てのファイルをTinyPingで軽量化してからGiamでGIF作成、そのGIFファイルをcompressor.ioで改めて軽量化しました。
その結果、画像ファイルは何倍も増えているのに800kbで収まりました。
またプレビューしたところ、ボタンも中央に表示されるようになりました。

なるほどですね~(笑)
Giffferのスタートボタンもちゃんと中央に表示出来るようになったそうで「おやぁ? じゃあやっぱりGIFアニメの周りに余分な余白があったのね(笑)」ってことで、レイヤー表示が出来る画像編集ソフトのGIMPの編集画面にロビンソンさんのGIFアニメをドラッグ&ドロップしてみましたら
https://blog-imgs-117.fc2.com/o/o/p/oops0011/2018-07-02-gif-1tm-comp.png
こんな表示になりました(笑)
私が昨日に「余白」と言っておりました部分(透明レイヤー)が存在していることが分かりました  (^^;; アセアセ

従って、GIFアニメーションの実寸サイズは 270×480 ではなくて 364×647 になっており、これが原因でGiffferのスタートボタンが位置ズレしているように見えていた次第なんです。
この透明レイヤーは、きっとGIFアニメ作成の前にコマ画像を縮小したときに「レイヤーが縮小されずそのまま残ってしまった」ことに起因しているんだと思います。
Giamはそのレイヤーを表示出来ませんのでGIFアニメに組んでいる最中には見えてないんですけど、実際には存在したままGIFアニメが組まれてしまったと言うことなんですね(笑)

ですから、今後のGIFアニメ編集作業にはその時に利用した「画像縮小」の方法は使わない方がよいでしょう (^_^; アハハ…

それと「GIFアニメのビュアー」的ソフトのことなんですけど、私はなにも特別なビュアーソフトは使っておらず、GIFアニメファイルをクリックすると、自動的にWindows10内蔵の「フォト」が立ち上がるように関連付けしてありますから、それで閲覧している程度なんです (^^ゞポリポリ
まぁ、検索すればけっこうたくさんのソフトが見つかるようですけど、フォトでとりあえず間に合ってますから見つけようとも思ってないんですよね (^^ゞポリポリ

失敗を重ねた後に出来るようになると、余計に楽しいですね。
そうなんです~(笑)
そうやって繰り返して、やがて自分に合った方法を確立して行くのが楽しいんです (^_^)ニコニコ 

2018/07/02 (Mon) 07:08

ロビンソン  

To ぼっちんさん

>この透明レイヤーは、きっとGIFアニメ作成の前にコマ画像を縮小したときに「レイヤーが縮小されずそのまま残ってしまった」ことに起因しているんだと思います。

これについては思い当たることがあります。
実は、当初はこのブログのGIF関連の記事を全部読まずに作業をしていました。
その時に一括サイズ縮小をCubeImage Resizeではないソフトを使用しました。
これが原因だと思います。

今回長々とやり取りさせて頂き、このブログの他の読者様がコメントしづらい状況を作ってご迷惑をお掛けしました。
また何かで躓いたら、あらためてお尋ねします。
今後ともよろしくお願いします。

2018/07/02 (Mon) 08:51
ぼっちん

ぼっちん  

To ロビンソンさん

その時に一括サイズ縮小をCubeImage Resizeではないソフトを使用しました。
これが原因だと思います。

ハーイ(^O^")/ ロビンソンさんがそのように納得してくださって良かったです (^。^;)ホッ

GIFアニメーションの作り方はものすごく様々な方法がありまして、動画ファイルから1枚ずつのコマ画像切り出して、それをGiamのようなソフトで組み上げて行く方法もありますし、動画ファイルを一気にGIFアニメーションに変換してしまうソフトも多数あります。
ただ、その方法だと動画って1秒間に30コマも撮影してしまう設定が殆どですから、GIFアニメーションに変換した時にはファイル容量が膨大な激重たいものになってしまいます(笑)から「コマを間引く」作業なども必要になりますけど(爆)

まぁ、その様々な方法をご自身で実体験して「この方法が一番良い」というものを確立されるとよいと思います ^^

今回長々とやり取りさせて頂き、このブログの他の読者様がコメントしづらい状況を作ってご迷惑をお掛けしました。
いえいえ、そんなことは気になさらないで、いつでもコメントしてくださってけっこうですよ~(笑)

2018/07/02 (Mon) 09:08

二階堂朱哩  

ぼっちん先生~!

毎度お騒がせしております(;´∀`)
ん?jsの中身?どうやって見るのだ?とエディタで見てみたら・・・ふははは!全く違う(笑)
教わった通りにDLし直したら、出来たようです!
ありがとうございます~!!!!!!!(*´∀`*)
あんな所までチェックなんて自分では出来なかったです・・・(と言いますか、見てもわからないし(笑))
せっかく実装したのでなにかの記事内で使おう!
と思って手元にあった物をいじってたら、圧縮しても1.27MBって・・・重すぎかなぁ(TдT)
ライブフォトから作成したものだから大きかったのでサイズ自体を小さくしてから圧縮したんですが・・・
むむむ。悩むところです。

2018/09/15 (Sat) 22:24
ぼっちん

ぼっちん  

To 朱哩さん

朱哩さん、おはようございます~ ^^
貴女って、ほんっとに「楽しむ」ことに熱心で素敵ですよね~ ヽ(^^ ) ヨシヨシ

ん?jsの中身?どうやって見るのだ?とエディタで見てみたら・・・ふははは!全く違う(笑)
教わった通りにDLし直したら、出来たようです!

(≧ω≦。)プププ そうそう、間違い・勘違いなんて誰にでも普通にあることだから、そんなの気にしない~(笑)

せっかく実装したのでなにかの記事内で使おう!
もう早速マスターしちゃって、記事にまで取り上げて(笑)ほんっとに素晴らしい (^-^)//""パチパチパチ
キチンと「GIFアニメーションの軽量化」もしてあるし (^_^)ニコニコ 
軽量化しないでそのままブログに載せてたら、パソコンではGIFアニメーションして観られるけど、スマホの低速回線(3G)だったらギクシャクしちゃってまともには動かないですよ~ (^_^; アハハ…

と思って手元にあった物をいじってたら、圧縮しても1.27MBって・・・重すぎかなぁ(TдT)
パソコン閲覧でもGIFアニメーションは、1MB以下に抑えなくては実用上問題アリアリです(笑)
スペックの弱いパソコンCPUではやっぱりギクシャクしちゃう(爆)
皆さんが高級パソコン持っているとは限りませんから「最低レベル(スマホも含めて)」のネット環境のことを考えて「ブログ作り」を行うと閲覧者さんに優しくなりますからね~ ^^

そして「画角サイズを小さくする」こととファイル容量を小さくすることは、直接的関わりはないんです、別物なんです (^^ゞポリポリ
その辺りをお暇がある時にちょっと研究なさったら、もっとブログ運営って楽しくなりますよ~ うんうん(^-^)

2018/09/16 (Sun) 08:01

二階堂朱哩  

ぼっちん先生〜♪

えへへ。楽しい事だけ熱心です(笑)
聞きっぱなしで一個は容量大きいままだったけどUPしちゃいました〜(^^;;
あ、サイズ変換と圧縮が別物なのは以前から軽く知ってはいたんですが、細かくは勉強してなかったです。原理とかまでは…
JPEGの時は「リサイズ&圧縮」を一度にやってたんですが、GIFはあまり使った事がなかったのでやり方に悩んで二段階にしたんですが…
あれ?別物だとしてもただのリサイズだけでも少しは容量変わりますよね??
元々のgifは約10MB、リサイズで約2.3MB、圧縮で1.2MBになりました。
元々のをそのまま圧縮だと約5MBでした。
う〜む。やっぱり原理を勉強せねば…

2018/09/16 (Sun) 11:27
ぼっちん

ぼっちん  

To 朱哩さん

朱哩さん、またまたのコメントをありがとです~(笑)

あれ?別物だとしてもただのリサイズだけでも少しは容量変わりますよね??
ハーイ(^O^")/ もちろん、画角リサイズしたら面積が小さくなるから、その分の情報量は減るから容量もそれなりには小さくはなります ^^
ただ、リサイズして仮に面積比が50%になったとしても容量も比例して50%減になるかと言うと「そうはならない」って意味なんですけどね。

う〜む。やっぱり原理を勉強せねば…
いやぁ、私はそんなところまで突き詰めて勉強なんてしてませんけど~ (≧ω≦。)プププ
朱哩さんだったらやる? (^Q^)/ ギャハハハ

とにかく「低レベルのスマホ性能や回線環境」でブログ閲覧をしてくださる閲覧者さんにも、表示ストレスを与えずにブログを観て戴けるように考えたら「記事に載せる画像やGIFアニメ」のようなコンテンツは、出来るだけ「ファイル容量の軽量化」を図る方が閲覧者さんに優しく、まさにモバイルファースト姿勢になると思いますよね~ うんうん(^-^)
今の時代って、スマホ閲覧が50%を超えてる時代なんですから、それを無視して、自己満足に浸っちゃってたらあかんって思いますけどね~ ^^

2018/09/16 (Sun) 13:25

二階堂朱哩  

To ぼっちん先生♪

あ〜!そういう事か!確かに小さくなる比率は違いますよね!圧縮してない人も多いかもしれないですね(^^;;
昔はでっかい画像をそのまま出してる人がいたけど、あれは見にくいのもあるし…
電話回線使ってやってた頃は迷惑だった(笑)
ブログは不特定多数の方が見ますからね!
見る人の事を考えるのは必要ですよね。うんうん。
私もPCも実際低スペックだし(T-T)
気をつけながら楽しみます♪
ありがとうございますヾ(@⌒ー⌒@)ノ

2018/09/16 (Sun) 15:02
ぼっちん

ぼっちん  

To 朱哩さん

朱哩さん、こんばんは ^^

あ〜!そういう事か!確かに小さくなる比率は違いますよね!圧縮してない人も多いかもしれないですね(^^;;
あのですね、私がたまたま覗いたブログに手作りGIFアニメがあると、大抵はその容量をチェックするんですよね(笑)
で、いつも私が利用している「圧縮ツール」で圧縮をしてみるんですが、もう80%近くはまったく未圧縮のまま記事に貼り付けてしまっていることが解るんです (^_^; アハハ…
静止画の場合には、よほどブログ初心者さんでなければそれなりに軽量化はされているんですけど、GIFアニメはそんな結果だったの (^^ゞポリポリ
GIFアニメを作成するツールによっては、完成時の保存の時に「最適化」と言う表現になっている場合が多いんですけど、それが「圧縮軽量化」になっているものもあるんですよね。
でも「更に圧縮軽量化」出来る場合もありますから、画質が劣化しない程度までには再軽量化を試みた方が良いんですけどね(笑)

ブログは不特定多数の方が見ますからね!
見る人の事を考えるのは必要ですよね。うんうん。

そうなんですよ、仮に自分のパソコン性能(笑)を知らないままにハイスペックなパソコンと高速インターネット回線環境下でブログ運営をしていたら「私のブログって重たくなんかないわぁ、いつもサクサク動いてるし」ってなっちゃうってことなんです(笑)
それを勘違いしてたら、低スペックのネット環境下でブログを覗いてくださってるみなさんに「このブログって重たいわぁ、やあねぇ!」って思われちゃうことも起こり得るってことなんです。
そう言う意味でも、ブログに載せるコンテンツはできる限りの「軽量化」を行うべきと言うことなんです ^^

もっとシビアに言えば「ブログの構造=テンプレートも含めて」そのものも高速表示出来るように努力すべしってことなんですけどね(笑)
まぁ、それはけっこうマニアックな部分になってしまうんですけど (^^ゞポリポリ

気をつけながら楽しみます♪
ありがとうございますヾ(@⌒ー⌒@)ノ

ハーイ(^O^")/ ブログ運営、思いっきり楽しんで下さいね~♪

2018/09/16 (Sun) 20:05

yumimana  

以前にも一度

SSL化の件でお世話になったyumimana申します。こんにちわ。

ここのところGIFアニメを覚えたので、面白がって作るのは良いのですが、
先生のおっしゃる通り、あまりあちこちでゾワゾワ動いているとウザいもので、
とりあえずボタンを覚えなきゃと思いまして、
今回はこちらのスタートストップボタンの付け方を伝授していただきました。

無事に取り付けることができましたので、ご報告とお礼まで・・・。
いつもありがとうございます!!m(_ _)m

2018/09/24 (Mon) 14:17
ぼっちん

ぼっちん  

To yumimanaさん

yumimanaさん、こんにちは~ ^^

ハーイ(^O^")/ 先日来より、yumimanaさんがこの記事を何度も読んで下さってたことは分かっておりましたよ~(アクセス解析にて(笑))
ですから、私もちょくちょくyumimanaさんブログのHTMLソースを覗かせて戴いてて(笑)Giffferの記述が確認出来ましたから「おっ 完成したかな?」ってo(^o^)o ワクワクしてました ^^
Giffferの設置についてのご質問を1度もなく完成させたなんて素晴らしいです (^_-)-☆パチッ

わざわざのお礼の言葉を戴けて恐縮です (^^ゞポリポリ

これからも、いろいろなWebテクを取り入れられてブログライフをお楽しみ下さいね~♪

2018/09/24 (Mon) 14:31

LEAVE A REPLY