とある方から、LINEに画像付きで文字を右から左にロールさせて表示するメッセージを出せないかという依頼がありました。
調べたのですが、パワーポイントでアニメーションさせて、mp4(動画)で保存するしか無いようです。
提案したところ、動画だと押さないと再生しないとのこと。
できれば押さないで再生したいと。
(パワーポイント初心者の方ですので、パワーポイントでアニメーション作れっていうのも酷な話ですけど。)
そこで、GIFアニメーションならなんとかなるのではと考えました。
けど、文字を少しずつずらして画像を作ると多分100コマ以上必要になると思いました。
それをパワーポイントで作ってもかなり大変ですし、
それをGIFアニメーション作成サイトにアップロードするとなると凄い作業量になっちゃいます。
というか、そんな大量のアップロードができるサイト無いです。
でも、これって凄いアイデアなんじゃないかと思いました。
友人のほぼネット廃人wwwに聞いてもそんなの見た事無いと。
それならと言う事で、Windows用のGIFアニメーション作成プログラムを作っちゃいましたwww
で、そのモジュールを利用してWeb版も作ってみました。
サーバー能力の関係で200ピクセルまでしか作れませんが、LINEやfacebookのメッセージ用には十分だと思います。
てか、これって、LINEやfacebookのスタンプの代用として十分使えると思います。
WeGifAni(Web版)スマホ対応
http://www.goods-cube.jp/wegifani/wegifani.aspx
LINEスタンプとか、「○○ちゃん」みたいな個人向けのメッセージって作れないですよね。
「田中さん向け」「佐藤さん向け」みたいなスタンプがあったりしますけど。
WeGifAniなら自由な画像と自由なメッセージでスタンプもどきが作れます。
まずは、サンプルから。
このアニメーション用の画像はパワーポイントで作っています。
パワーポイントでGIFアニメーション用画像を作る
手順
1.まず、ハートをスライドに配置し、コピーし、コピーしたものを白で塗りつぶして、枠を灰色にします。
ハートはなるべく大きくしてください。(最終的に作る画像が200ピクセルを超えるようにします。)
2.元のハートを更にコピーして、灰色で塗りつぶし、枠を無しにします。
3.灰色のハートを分割します。
(1)枠無し四角形を置きハートを覆います。(判りやすいように四角形は透明化しています。)
(2)ハート→四角形の順に選択し、「描画ツール書式ー図形の結合ー重なり抽出」と選択します。
(3)半分になったハートを選択し、「図形の書式ーサイズとプロパティーサイズ」と選択し、回転を355にします。
(4)できたものをコピーし、「描画ツール書式ー回転ー左右反転」を選びます。
(5)両方を選択し、「描画ツール書式ー図の結合ー接合」を選びます。
見かけは変わりませんが、1つの図形になります。
角度が付いてしまうため、これを0度に補正します。
(6)四角形を置き、枠無しにして、色をハートと同じ色で塗りつぶします。
(塗りつぶしの時にスポイトを使うと良いでしょう。)
両方の図形が枠無しで同じ色なので単純な灰色四角形に見えます。右側は図形に枠を付けて状態を判りやすくしています。)
(7)四角形→ハートの順に選択し、「描画ツール書式ー図形の結合ー重なり抽出」と選択します。
これで割れたハートが完成しました。
これでGIFアニメーション用の材料がそろいました。
GIFアニメーション用画像の作成
1コマ目の図形作成
(1).作業をしやすいようにスライドの色を灰色にします。
図形の何も図形が無いところをクリックし、背景の書式設定で「塗りつぶし(単色)」を選び、色で灰色を選択します。
(2).四角形を置き、白で塗りつぶします。
(3).四角形の上にハートを置きます。四角形とハートの中心を合わせます。
この時、適宜、四角形とハートの位置バランスを調整して下さい。
(4).四角形とハートを選択し、右クリックして、「図として保存」を選び、PNGで保存します。
最終コマの図形作成
(1)先の白い四角形をコピーします。(これが重要です。綺麗にハートが割れたように見せるには1コマ目と最終コマの図形の大きさが一致している必要があります。)
(2)両方の四角形の上位置が一致するように配置します。
(3)割れたハートを四角形の上に配置します。
ハートの下と載せている四角形の横方向の中心が一致するようにします。
(4).四角形とハートを選択し、右クリックして、「図として保存」を選び、PNGで保存します。
これでアニメーションに必要な画像(最初と最後の2枚)が揃いました。
GIFアニメーションの作成
1.Webブラウザーで以下のURLを表示します。
WeGifAni(Web版)スマホ対応
http://www.goods-cube.jp/wegifani/wegifani.aspx
2.以下のようにパラメーターを入れ、[作成]ボタンを押します。
一番上に作成したGIFアニメーションが表示されます。
[ダウンロード]ボタンを押すとGIFアニメーション画像がダウンロードされます。
ダウンロードするとサーバー側のGIFアニメーション画像が削除されます。
※表示されている画像を直接ブラウザーの機能でダウンロードするとブラウザーによってはアニメーション無しのGIF画像がダウンロードされてしまいます。
これをLINEで表示すると以下のようになります。
四角形やGIF,ダウンロードなどが入るのがスタンプとの違いです。
ずいぶん違うという声が聞こえてきそうですけど(^^;
親切機能ではあるのですが、この辺はLINEスタンプとの違いを付けるためのLINE戦略なのかも。
Androidスマホで試しましたが、送信するとそのままアニメーションします。
そのままアニメーションするかは、機種かLINEのバージョンによって、違いがあるようです。(2018/09/02訂正)
もちろん、タップすればアニメーションします。
「あいしてる」のほうは宿題です(笑)
自分で作ってみて下さいね。
WeGifAniはログイン無し・無料でお使いいただけます。
が、開発版のため、不定期にプログラムを置き換える可能性があります。
置き換えとぶつかると落ちる可能性があります。
ご了承ください。
長くなりましたので、今日はここまでです。
次回、WeGifAniのパラメーターとLINEスタンプもどきとして作る場合の注意事項を解説します。