【脱Winterboard】.artworkファイルを分解してみた！～Winterboaedを使わない透明化～

Piroです。

iPhone4ではWinterboardを使用せずに、Lockscreenや、ホーム画面の見栄えを「ちょっとだけ」変えてたんですが、iPhone5にしてからは、めんどくさいのもあってずっと「Winterboard」を使ってました。

でもね、「やっぱりなんかスマートじゃない！（特に深い意味なし）」って思い出したので、脱Winterboardに踏み切りました。

※本記事の内容は「ビギナーズラック」様HPの情報を基に作業を行ったものを、Piroなりに整理したものです。iOSの内部ファイル構成等、非常に詳しく紹介されているすばらしいサイトですので、ぜひ一度訪問してみてください。

　　

※脱winterboard後の画像です

 PiroのLockscreen、ホーム画面において、Winterboardを使用しているのは

Lockscreen
・ステータスバー透明化
・透明化後に残る2本の線”UINavigationBarShadow@2x.png”の透明化

ホーム画面
・ステータスバーの透明化
・Dock背景の透明化
・Cydiaアイコンのシルバー化
・LiveClockのDarkテーマ

です。その他の部分も透明化していますが、コレは直接画像を置き換えることで対応しています。

で、今回重要になってくるのが、上記の太文字赤色の部分
・ステータスバー透明化
・透明化後に残る2本の線”UINavigationBarShadow@2x.png”の透明化

この2つに関しては、Shared@2x.artworkというファイルにまとめておいてあり、通常のi-Funboxなどを使用した方法では画像を置き換えることができません。

というわけで、今回はこの"Shared@2x.artwork"ファイルを分解して、中身の画像を入れ替えてみました。

詳しい説明は、いろいろなサイトで紹介されていますので、ココでは手順だけを説明します。

（基本的にWindowsでの手順となります）

準備するものは・・

・プログラム言語”Python”

・”Python”用ライブラリ

・artworkファイル展開・再構築用プログラム”devepack/iOS-artwork”

・処理用のフォルダ

以上です。

それでは手順を紹介します。

プログラム言語”Python”のダウンロード

・こちらから”Python”の最新バージョン（2013/6/5現在、Windows用はv2.7.4）をダウンロードします。

ダウンロードしたら、インストールしておきましょう。

・”Python”用ライブラリのダウンロード

・こちらから”Python”用のライブラリをダウンロードします。

先ほど、v2.7.4をダウンロードしていますので、2.7シリーズ用のライブラリをダウンロードします。

（2013/6/5時点　最新はPIL 1.1.7のPython Imaging Library 1.1.7 for Python 2.7）

※中国からの場合、VPNを介さないとダウンロードに失敗するようです。

ダウンロードしたらこれもインストールしておきましょう。

・”devepack/iOS-artwork”のダウンロード

・こちらから”devepack/iOS-artwork”をダウンロードします。

ダウンロードリンクは判りにくいですが、上のほうの[クラウドマーク＋ZIP]と書いてあるボタンです。

これは、ダウンロードしたら解凍しておきます。

※あとでコマンドラインからこのフォルダを指定しますので、わかりやすいフォルダ名にリネームしてください。今回は”iOS-artwork”としました。

・処理用フォルダの構築

・artworkファイルの展開、再構築用のフォルダ階層を作成します。イメージはこんな感じ。

artwork　　　　　※作業用のフォルダ
 L ios-artwork ※先ほどリネームしたフォルダごと投入
 L original　　　 ※オリジナルのartworkファイルを収納するフォルダ
 L extract　　　 ※artwork展開後の画像を入れるフォルダ
 L images    　 ※編集後の画像を入れるフォルダ

こんな感じでフォルダを作成し、Cドライブ直下においてください（コマンドラインで作業しやすくする為）


・artworkファイルの吸出し
あとは自分のiPhoneからartworkファイルを抜き出します。i-Funboxなどを利用して・・

system>Library>Frameworks>UIKit.framework以下にある”Shared@2x.artwork”を抜き出し、先ほど作成したartwork>originalフォルダの中へコピーしてください。

ここまでで一通り、準備が完了しました。


次はartworkファイルの展開です。


・artworkファイルの展開
・コマンドプロンプト（xpの場合　スタート>プログラム>アクセサリ>コマンドプロンプト）を起動します。
・「cd c:\artwork」と入力し、artworkフォルダに移動します。

※表示環境によってパス指定の部分が逆スラッシュになる場合がありますが、windowsでは半角の「￥」マークに置き換えてください。


いよいよ展開です。

・「iOS-artwork\iOS-artwork.py export -a original\Shared@2x.artwork -d extract\」
と入力実行すると、artwork>extractフォルダ内に画像が次々と展開されるはずです。
※エラーを吐かれる場合はどこかコマンドが間違っていますので、フォルダ名、コマンド表記を確認してください

・展開が完了したら、extractフォルダ内の全画像をimagesフォルダ内にコピーします。

ステータスバーアイコンなど、興味深い画像山盛りです

・画像の編集
・imagesフォルダ内の画像を編集します。
　※編集時は、ファイル名、ファイル形式、画像サイズは変えないこと！変えてしまうとartworkフォルダの再構築ができなくなります。

今回Piroの場合、ココで、
　”Translucent_Base@2x.png”（ステータスバー背景）と”UINavigationBarShadow@2x.png”（Lockscreenの謎の2本の線、実際はナビゲーションバーの影)を透明化した画像と入れ替えました。
　※ちなみに画像編集にはGIMPを使用

・画像編集が完了したら、今度はartworkファイルの再構築です。


・artworkファイルの再構築
・再びコマンドプロンプトを立ち上げ・・
　「iOS-artwork\iOS-artwork.py create -a original\Shared@2x.artwork -d images\ -c Shared@2x.artwork」
と入力実行することで、artwork>フォルダ直下に、画像編集後の”Shared@2x.artwork”ファイルが生成されているはずです。


・artworkファイルの書き戻し
・最後に先ほど作成した新しい”Shared@2x.artwork”ファイルをi-Funboxなどを利用してiPhone内system>Library>Frameworks>UIKit.framework>Shared@2x.artworkに上書きします。

・デバイスを再起動すれば、先ほどの編集した画像が反映されるはずです。

これができればWinterboardを使わずに全ての画像カスタマイズが可能になります。



iPhone5では脱Winterboardによる、メモリ確保や操作性の改善などの恩恵はあまり感じられませんが、なんとなくいい気分になれますよね！


以上。