アニメーションgif on akky@サイボウズラボ・ブログ

88x31 コレクション - 太古のウェブで多用されたサイズの懐かしバナーを収集

Wed, 16 Jun 2021 00:00:00 +0000

The 88x31 GIF Collection は、名前の通り、横88ピクセル x 縦31ピクセルのウェブバナーを収集して公開しているサイトです。

http://localhost:8099/wp-content/uploads/2021/06/The-88x31-GIF-Collection-_-Part-1-Google-Chrome-2021-06-16-14-47-37.mp4

88x31 サイズのバナーが広まったのは、1994年にスタートし当初のインターネット・ウェブ空間の一大勢力となった無料ホームページ公開サービスジオシティ(Geocities)。1996年のジオシティのトップページには、サイドバーに7つの 88x31 バナーが掲載されています。

ジオシティは各ユーザーに対し、ジオシティへのバナーリンクを設置することを推奨したということで、ジオシティで個人サイトを作ったユーザーらがまずジオシティの88x31バナーを置き、次いでお互いの個人サイトをリンクする時にも同じ88x31 バナーを作っては配布した、というのが普及の原動力ではないかということです。

ジオシティがなぜ88x31 サイズのボタンを採用したか、については、さらに遡って1995年のwebブラウザ Netscapt Navigator のバージョン2.0 のバナーをまねたのではないかということ。このバナーも88x31 ピクセルです。

Netscape Navigator のプロモーションの一環で、Netscape Now というキャンペーンがあり、Netscape がこの 88x31 サイズのバナーを配り、サイト制作者に設置することを求めていました。(via 88x31)

このボタンが、今のところ最も古い 88x31 バナーのようです。コレクションの3ページ目には、この最古のバナーを含めた Netscape 社の多数のバナーのバリエーションが保存されています。

なぜNetscape のデザイナーがこの 88x31 サイズのバナーを作ったかについては、文献が見つかりませんでした。日本のYahoo!知恵袋で一つ推論が披露されているのですが、ちょっと無理がある(黄金比をカットした「余白の」サイズが88x31に近いと言っている)ように思います。

このバナーがあまりに広く普及したため、88x31サイズは後追いでウェブ広告の業界団体Interactive Advertising Bureau(IAB)の標準バナーの一つに"micro banner"サイズとして指定されています。

via Hacker News

Msgif - テキストをアニメーションgif化してくれるサービス

Fri, 07 Feb 2020 00:00:00 +0000

Msgif は、文字列を打つと、打ってる様子をアニメーションgifにしてくれるというサービス

Product Hunt の新着で見かけて、「こういうの日本語は動かないことが多いんだよねえ」と試してみたら、まったく問題なく動くしIMEで入力中の状態まで再現されました。

フッタの作者名を見たら日本名で、カナダ在住の日本人の方のようです。なるほど。

作成画面から、twitterなどSNSでの共有で使う用途で考えられているようですね。動きのあるメッセージを簡単に作って共有できるのはいいんじゃないかなと思いました。

via Product Hunt

buttsss - 尻イラストサイトの決定版

Wed, 31 Jul 2019 00:00:00 +0000

(credit: buttsss.com CC-BY-4.0)

buttsss は、フリー尻イラスト素材サイトです。わかりやすく言うと「お尻のいらすとや」と言った感じでしょうか。

現在サイトで公開されている丸尻イラストの数は46個。メガネ尻、スーツ尻、サンバ尻、天才尻、マジック尻、非同期尻、宇宙尻、など様々なバリエーションが用意されています。

サイト作者パブロ・スタンリーさん自身によるブログ記事では、どのような経緯で Buttsss を制作したか、そもそもの発想からゴール設定、制約と苦闘、プロジェクト管理、単独創業者チーム内のコミュニケーション問題、UXデザインとユーザビリティテスト、スケッチとワイヤフレーム、プロトタイピング、レスポンシブデザインとパフォーマンス、振り返りまで、ウェブサービスのより正しい制作に必要なあらゆる要素を解説してくれています。

(credit Pablo Stanley CC-BY-4.0)

サイトリリースを記念した動画も公開されています。多才な人ですね。

すべてのイラスト/アニメーションは商用非商用を問わず、クリエイティブコモンズ(CC-BY-4.0)で再利用することができます。お尻のアニメーション画像を必要としているすべての人への素晴らしい贈り物ですね。

マジック・ザ・GIFニング - 面白動画を載せたMtGのカードを生成するプログラム

Fri, 13 Oct 2017 00:00:00 +0000

カードゲーム「マジック・ザ・ギャザリング(MtG)」のデータを使ったネタプログラミングが Hacker News で話題となっていました。

Pythonで書かれ、GitHubで公開されているこのツールは、MtGのカードのタイトルに合った内容のアニメーションGIFを埋め込んで、MtGのパロディカードを生成するというプログラム。

生成したカードを定期的にツイッターにつぶやく bot 機能も持っていて、作者自身によるデモアカウント@MTGIFening では、6時間おきに一枚、新作カードが自動投稿されています。

ハウル・フロム・ビヨンド(彼方からの雄叫び)というカード名から生成されたのが、こちらのカード

pic.twitter.com/sxqKUYHmfv
— Magic: The GIFening (@MTGIFening) September 30, 2017

なるほど、雄たけんでるように見えなくもない。

仕組み

Readme/ソースによれば、このツールの仕組みはこんな感じ。

カードデータの入手

MTG JSONで提供されている、全カードのJSONデータを取得する。そんなデータが有志によって管理されているんですね。これもGitHub上で管理更新されているようです。日本語データファイルもありました

ここからJSONファイルをダウンロードし、それを前処理のスクリプトで必要なレコードのみのcsvを作り、それを使って動いています。

ネタになるアニメーションGIFの入手

アニメーションGIF版 YouTube、みたいなサイトGIPHYにAPIが提供されていて、その中にキーワード検索APIもあるので、ランダムに選んだMtGのカードのタイトルを食わせています。タイトルによってはGIFが見つからない場合もあるみたいですが、その時は見つかるまで繰り返しています。

“MtG"で検索して最初にでてきたのがこれ。

オリジナルのカード画像に、GIFをはめ込む

MtG公式からカード画像を取得し、MoviePyライブラリで、動画の各フレームを書き換えているようです。カードの世代によって画像の位置やサイズが違うので、世代にあわせて埋め込み座標を変えたりもしています。

ツイートする

PythonでTwitterを読み書きするTwythonを使い、生成されたGIFをツイッターに投稿させています。

これらをパッケージする Docker ファイルも置いてあり、自分の環境で簡単に再現できます。ツイッターに投稿するところは動かしませんでしたが、ローカルで動かしてみてできた画像がこちら。

https://labs-staging.31tools.com/blog/akky/wp-content/uploads/2017/10/mtg_gif.mp4

コードも完結で短く、データやAPIを組み合わせてうまく作ってるなと思いました。

via Hacker News

あなたに代わって意思決定してくれるwebサービス Yes Or No?

Wed, 07 Oct 2015 00:00:00 +0000

Yes Or No?は、重要な決断をあなたに代わって行い、アニメーションGIFで伝えてくれるという単機能に特化したウェブサービスです。作者は@neuling2kさんと@crtvhdさんの二人。

リロードするたびに、“Yes” または “No” の結果を得ることができます。

APIも提供されていて、Yes/No の結果と、それに合わせたGIF画像のパスを得ることができます。

すでに、APIを使ったツイッターアカウント@ynwtfが登場しています。@ynwtf に対して質問すると、Yes/No の決断を返してくれます。以下のように。

@akky no pic.twitter.com/OJ7vUSywxf
— Yes No Maybe (@ynwtf) October 7, 2015

どうにも自分で決められない決断がある時に使ってみてはどうでしょうか。と無責任に言ってみる。

via Product Hunt

全編アニメーションGIFの「小説]

Mon, 19 Jan 2015 00:00:00 +0000

ザックのお化け屋敷(Zac’s Haunted House)は、アニメーションGIFだけで構成された自称「小説」です。

ダウンロードまたはオンラインで閲覧が可能ですが、多量のアニメーションgifの読み込みを必要とするため、ダウンロードで見るほうを勧めるということです。

読み方は、右上のメニューから各章を表示させていきます。

自分で作ったGIFというよりも(自分で作ったものもあるのかもしれませんが)、ネットで見つけた/探したGIFを組み合わせてストーリーにしているようです。

ストーリーとは言いましたが、本当に並んだアニメーションGIFにストーリーがあるのかどうか、見ていてもちょっとわかりません。これだけ多くのアニメーションGIFを順番に見ていると、頭がクラクラしますね。君の悪い画像が多く、悪酔いできるコンテンツとは言えるでしょう。

文字がまったく無いのに小説(novel)と言えるかはわかりませんが、新しい(novel)といえば新しいかも。

via This novel made of GIFs is kind of terrifying | The Verge

公共交通機関の威力

Wed, 20 Nov 2013 00:00:00 +0000

よくできたアニメーションgifですね。自家用車とトラムの効率の違いが一枚で実感できます。

とは言っても、車の便利さもなかなか捨てがたいのですが。

via hamock myson via Tumblr

iPhone のメッセージで相手をイライラさせる方法

Fri, 11 Oct 2013 00:00:00 +0000

Drive your friends crazy(友達を悩ませよう) というページが提案している、iPhoneユーザー相手にできる、ちょっとしたイタズラ。

それは、下のアニメーションgifをメッセージで送るだけ。

受け取った相手からはこう見えます。

送信者「君に伝えなきゃいけないことがあるんだ」シボーン「何! 何よ!」

via This Prank Will Drive Your Friends Crazy