【今は無理？】TwitterのヘッダーとアイコンをPCとiPhoneの両方で合わせる方法

うろこ @_shortbread_

先日こちらのサイトを見てTwitterのヘッダーとアイコンの絵を合わせるというのをやってみた。 http://t.co/rZZhQ5WCPe でもiPhone等で見ると、こちらでも言及されてるけど、ヘッダーとアイコンがずれるんですよね。

うろこ @_shortbread_

PCで見てもiPhoneで見てもヘッダーとアイコンの絵柄を合わせる方法が何かないかなーと考えてたときに、アイコンをGIFアニメにする方法を思い付きました。試してみるとうまくいったので、メモ書きしておこうと思います。

うろこ @_shortbread_

ここで言うiPhoneとは公式アプリとします。iPhoneのSafari等から見るモバイルWEBではやっぱりアイコンとヘッダーはずれます（理由は後述）。 もろもろの説明は2013年4月現在のものです。iPhone公式アプリのバージョンは5.5です。

うろこ @_shortbread_

使ったソフトはPhotoShop Elements9です。 テンプレのようなものを作ってみました。ピンクのところがPCで、緑がiPhoneでアイコン表示される部分です。 http://t.co/YCaPn0pGB2

拡大

うろこ @_shortbread_

PC用のアイコンサイズと位置を修正しました。 修正版のテンプレはこちら→ http://t.co/XaF8mDCc9U オレンジ部分（176×176）がPC用のアイコンとして表示される部分になります。

うろこ @_shortbread_

【1.ヘッダーを用意】 ヘッダーにしたい元画像にテンプレを重ねる。アイコンがいい感じになるように調整しつつ、公式の推奨サイズに合わせて1252×626の画像を作って保存する。 http://t.co/eunptgV4UR

拡大

うろこ @_shortbread_

【2.アイコン切り出し】 ピンクの部分（180×180）を切り抜いてPC用のアイコン画像を作る。 iPhone用のアイコン画像は緑の部分(234×234)の画像を切り抜き、PC用アイコンのサイズに合わせて180×180に解像度を下げたものを用意。

うろこ @_shortbread_

【3.アイコンをGIFアニメ化】 1フレーム目にiPhone用、2フレーム目にPC用のアイコン画像をセット。フレームの表示時間をごく短く（私の場合0.1秒）する。ループ（繰り返し再生）を忘れずにオフにする。アニメーションGIFファイル形式で保存。

うろこ @_shortbread_

【4.ヘッダーとアイコンをアップロード】 GIFアニメファイルはTwitter本家からはアップ不可なようなので、私はPC版のついっぷるからアップしました。ヘッダーは普通にPC版の公式Webからアップ。

うろこ @_shortbread_

【5.表示を確認】 うまくアップできていれば、PCで見た場合一瞬だけiPhone用のアイコンが表示された後でPC用のアイコンになる…はず。 http://t.co/e4385A9GLv

拡大

うろこ @_shortbread_

iPhone公式アプリで見た場合は普通にiPhone用アイコンを表示します。 http://t.co/m7dTLulG7c

拡大

うろこ @_shortbread_

【注意点】 ・アイコンはGIFファイルなので256色しか使えません。カラフルな画像は粗が目立つかも。 ・ついっぷるからアップしてもGIFアニメファイルをアップできない（強制的に静止画のGIFにされる）場合がある気がする…できるアカウントとそうでないアカウントがある？？

うろこ @_shortbread_

【そもそもどういう理屈か？】 GIFアニメはPCのブラウザではきちんと再生されます。一方iPhone公式アプリではアニメ表示にはならず、1フレーム目が普通の静止画として表示されます。

うろこ @_shortbread_

また、GIFアニメはずーっとちらちら動いているものというイメージがあるかもですが、アニメの再生を一回きりに設定することもできます。その場合、アニメ表示が最終フレームまで来ると1フレーム目に戻らずそのままで静止します。 これらのことを利用しています。

うろこ @_shortbread_

GIFアニメアイコンはPCで見た場合、アニメ再生されてiPhone用アイコンからPC用アイコンへ表示が切り替わって止まります。再読み込み等をしない限りそのままです。iPhoneの公式アプリで見た場合はアニメにならず1フレーム目のiPhone用アイコンを表示したまま動きません。

うろこ @_shortbread_

モバイルWEBはGIFアニメをアニメーション再生するためPC用のアイコンが表示されます。その結果アイコンはヘッダーとずれます。 なお、今回はうまくいったこの方法も、Twitterの仕様変更等でいつ使えなくなるか分かりません(^_^;)

うろこ @_shortbread_

先日、ついっぷるからもGIFアニメのアイコンをアップできなくなった！？と焦ったのですが、いろいろ試したところ、ファイルサイズがだいたい10KB以下ならアップできるみたいです。

うろこ @_shortbread_

具体的に言うと、9.51KBのはOKで9.62KBのはアップできませんでした。境目どこー？？(^O^;)

うろこ @_shortbread_

このまとめの方法でアイコン作ったら、10KB以下のアニメGIFファイルになんてまずならないと思うので、無理矢理サイズを小さく作る方法をメモっておきます。 私の場合、以下の方法でなんとかついっぷるからアップ可能なアニメGIFアイコンができました。 …画質は気にしない方向で。

うろこ @_shortbread_

【1】アイコンの縦横サイズを半分にする。 そのためには、ヘッダー画像からアイコン用の画像を切り出す際に PC用：オレンジの部分（176×176）を切り抜き、解像度を88×88にする。 iPhone用：緑の部分（234×234）を切り抜き、PC用と同様に解像度を88×88に下げる。