[iOS] タップで解除!WinterBoardを使わず「Tap to Unlock」を実装してみた [5.1.1対応]

(113)

iOSはロック画面の解除にスライドを実行してロック解除します。
誤操作を防ぐという意味ありもあって、それはそれは画期的な方法ですね。

が、世の中にはタップで解除という物が存在します。『Tap to Unlock』ってヤツですね。
タップするだけでロックを解除出来るので操作性としてはなかなか便利。
ということで、今回はこのTap to Unlockを実装してみようと思います。
更にWinterBoardを使うと簡単にできちゃうので、今回は私の様な「WinterBoardには頼らないんだ!」という方向けに『WinterBoardを使わずに「Tap to Unlock」を実装してみよう』という感じで行きます。

スポンサーリンク

タップで解除「Tap to Unlock」

ロック画面ですね。
通常ロックを解除するにはスライド操作を行う必要があります。
ですが「もう、左から右へスライドしてばかりのロック画面なんて・・・嫌!」と思ってしまうわけです。人間ってそんなものなのね。
ということで、タップするだけでロックを解除出来る『Tap to Unlock』なんてどう!?
ぽんっ!とワンタップするだけでロックを解除することが可能!

howto-taptounlock-02howto-taptounlock-03

ちなみに、今回の手法ではロック解除スライダー部分を透明にしちゃいます。(好きな画像にすることも出来るよ!)
透明にしているので、こんな風に壁紙をより前面に押し出したロック画面を作ることが可能。
更におまけとして時計部分の背景を透明にする方法も書きますので、これを透明にするともっともっと壁紙大好き!なロック画面になります。

howto-taptounlock-04howto-taptounlock-05

また、NoCameraGrabberなどを使用してロック画面右下に表示されていたカメラアイコンを消すことでこんな感じにすることも!
特にシンプルな壁紙を使用していたりすると気になることがあると思うので、そのときはやってみると良いかも!?

howto-taptounlock-06howto-taptounlock-07

大まかな流れ・必要な物

今回目指すのはこの画面!
ロック解除スライダー部分を透明化し、タップで解除出来る様にします。

howto-taptounlock-19

やることは大きくこの2つです。
1つ目!「ロック解除」と書かれた部分の文字を消します。
2つ目ロック解除スライダーそのものを透明化して、タップで解除を実装します。

howto-taptounlock-08howto-taptounlock-09

必要な物

必要な物をご紹介します。

注意

システムファイル部分を直接弄ります。
失敗した場合は最悪起動不能になる等の症状がでる場合もあり得ますので、必ずバックアップを行い、十分注意してください。
また、いかなる事が起きた場合も自己の責任で、自身のみで解決出来る方のみ読み進めてください。

その1:文字を消す

まずは透明化した際に邪魔になる『ロック解除』という文字を消します。

howto-taptounlock-08

ファイルから該当する文字列を削除するのですが、母艦に転送して行うよりもデバイス単体で行った方が何かと楽なので、今回は「iFile」を使用して行っていきます。
また、ファイルを弄る前には必ずバックアップを取ってから行ってください。バックアップを取らずに失敗すると復元しないと駄目になる場合もあります注意しましょう。

編集方法は簡単です。
iFile」にて後述するファイルを開きます。
例えば「/System/Library/CoreServices/SpringBoard.app/Japanese.lproj/」フォルダ内にある『SpringBoard.strings』を開きます。
開く時はテキストビューアー、プロパティリストビューアーのどちらもで使いやすい方で大丈夫です。

howto-taptounlock-10

そして、後述の項目に書かれている通り「”AWAY_LOCK_LABEL” = “ロック解除“;」の『ロック解除』部分を削除します。
同じように「”AWAY_LOCK_LABEL_FORMAT” = “%@“;」も『%@』部を削除します。
「”REMOTE_NOTIFICATIONS_LOCK_LABEL” = “表示“;」部も同じです。『表示』部を削除します。
このように、書かれている通りのファイル、項目を編集してください。編集完了後は画面右上にある『完了』ボタンをタップしてファイルを保存してください。

howto-taptounlock-11howto-taptounlock-12

編集する部分

/System/Library/CoreServices/SpringBoard.app/Japanese.lproj/SpringBoard.strings

“AWAY_LOCK_LABEL” = “ロック解除“;
     ↓
“AWAY_LOCK_LABEL” = “”;

“AWAY_LOCK_LABEL_FORMAT” = “%@“;
     ↓
“AWAY_LOCK_LABEL_FORMAT” = “”;

“REMOTE_NOTIFICATIONS_LOCK_LABEL” = “表示“;
     ↓
“REMOTE_NOTIFICATIONS_LOCK_LABEL” = “”;

/System/Library/BulletinBoardPlugins/CalendarProvider.bundle/ja.lproj/Localizable.strings

“SLIDE_TO_VIEW” = “表示“;
     ↓
“SLIDE_TO_VIEW” = “”;

/System/Library/BulletinBoardPlugins/MailDataProvider.bundle/Japanese.lproj/MailBulletin.strings

“SLIDE_TO_READ” = “読む“;
     ↓
“SLIDE_TO_READ” = “”;

/System/Library/BulletinBoardPlugins/SMSBBPlugin.bundle/ja.lproj/SMSBBPlugin.strings

“FULL_REPLY” = “返信“;
     ↓
“FULL_REPLY” = “”;

ファイル編集後に『リスプリング』を行い編集箇所を適用すると、この様に「ロック解除」などの文字が消えて無くなります!

howto-taptounlock-13

その2:タップで解除&透明化を実装する

続いて、タップで解除「Tap to Unlock」を実装し、要らなくなったその他の画像を透明化します。画像を上書き保存しますので、事前に対象となる画像ファイルのバックアップを必ず行ってください

howto-taptounlock-09

ダウンロードして頂いた「Tap to Unlockキット」の中に入っている画像ファイル3つを指定のフォルダに転送し、リスプリングするだけで全て完了となります。指定フォルダは下記になります。

/System/Library/PrivateFrameworks/TelephonyUI.framework/
・Retina(iPhone 4・4S等)
BarBottomLock@2x~iphone.png
bottombarknobgray@2x~iphone.png
WellLock@2x~iphone.png

・非Retina(iPhone 3GS等)
BarBottomLock~iphone.png
bottombarknobgray~iphone.png
WellLock~iphone.png

・iPad 3
BarBottomLock@2x~ipad.png
bottombarknobgray@2x~ipad.png
WellLock@2x~ipad.png

・iPad 1、iPad 2
BarBottomLock~ipad.png
bottombarknobgray~ipad.png
WellLock~ipad.png

以下ファイルそれぞれを詳しく解説します。

タップで解除「Tap to Unlock」を実装

まずはスライダーボタン(ノブ)部分を変更します。
タップで解除「Tap to Unlock」を実装する上でここが一番重要!といいますか、ここが全てです。
「Tap to Unlock」を実装するためには差し替える画像の横サイズがピタリと合う物を使用する必要があります。縦サイズは適当で大丈夫です。
今回は透明化を行っていますが、横サイズさえ合っていれば大丈夫ですので、お好きな絵柄等を加えることも可能です。
また、ロック画面から直接カメラを起動出来る右下のカメラアイコンを非表示にしている場合は専用の横幅が大きな画像を使用してください。
この画像を差し替え&リスプリングした段階でタップで解除「Tap to Unlock」は使える様になっています。

/System/Library/PrivateFrameworks/TelephonyUI.framework
・Retina(iPhone 4・4S等)
bottombarknobgray@2x~iphone.png
画像横サイズ:452 px(カメラアイコン非表示時は「548 px」)

・非Retina(iPhone 3GS等)
bottombarknobgray~iphone.png
画像横サイズ:226 px(カメラアイコン非表示時は「274 px」)

・iPad 3
bottombarknobgray@2x~ipad.png
画像横サイズ:502 px

・iPad 1、iPad 2
bottombarknobgray~ipad.png
画像横サイズ:251 px

howto-taptounlock-14howto-taptounlock-15

スライダー部分を透明化

続いて、要らなくなったその他2カ所を透明化しましょう。

まずはスライダーが動いた部分にある、中の黒い陰部分を透明化します。

/System/Library/PrivateFrameworks/TelephonyUI.framework
・Retina(iPhone 4・4S等)
WellLock@2x~iphone.png
画像サイズ:54 x 104 px

・非Retina(iPhone 3GS等)
WellLock~iphone.png
画像サイズ:27 x 52 px

・iPad 3
WellLock@2x~ipad.png
画像サイズ:50 x 104 px

・iPad 1、iPad 2
WellLock~ipad.png

画像サイズ:25 x 52 px

howto-taptounlock-16howto-taptounlock-17

最後に残った背景部分を透明化します。

/System/Library/PrivateFrameworks/TelephonyUI.framework
・Retina(iPhone 4・4S等)
BarBottomLock@2x~iphone.png
画像サイズ:2 x 192 px

・非Retina(iPhone 3GS等)
BarBottomLock~iphone.png
画像サイズ:1 x 96 px

・iPad 3
BarBottomLock@2x~ipad.png
画像サイズ:2 x 256 px

・iPad 1、iPad 2
BarBottomLock~ipad.png
画像サイズ:1 x 128 px

はい、リスプリングして、完成です!

howto-taptounlock-18howto-taptounlock-19

おまけ:時計の背景を透明化する

せっかくここまでやったので、もう少しロック画面をスッキリさせてみましょう。

おまけとして『時計の背景部分を透明化』してみます。

howto-taptounlock-20

これも方法としては画像差し替えなので簡単です。画像を上書き保存しますので、事前に対象となる画像ファイルのバックアップを必ず行ってください
Tap to Unlockキット」の中に入っている『おまけ:時計背景透明化』フォルダ内の画像ファイル1つが目的の物です。
これを先ほどと同じフォルダ内に転送して、差し替えを行います。
差し替え後は『リスプリング』を行ってファイルを適用させると完了です。

/System/Library/PrivateFrameworks/TelephonyUI.framework
・Retina(iPhone 4・4S等)
BarLCD@2x~iphone.png
画像サイズ:2 x 192 px

・非Retina(iPhone 3GS等)
BarLCD~iphone.png
画像サイズ:1 x 96 px

・iPad 3
BarLCD@2x~ipad.png
画像サイズ:2 x 216 px

・iPad 1、iPad 2
BarLCD~ipad.png
画像サイズ:1 x 108 px

howto-taptounlock-21

コメント

  1. ttp://www.ifans.com/forums/threads/annoying-little-grey-line-on-my-lockscreen-help.390322/

    ここに答えが書いてあるっぽいけど、
    UINavigationBarShadow@2x.png
    がどこにあるのかわからない。。。

    • Shared@2x.artworkの中に入っています。
      これを展開 -> 画像の差し替え -> 再構築といった作業が必要になります。
      ただ、準備がちょっと面倒なだけで作業自体はそれほど大変でもないので挑戦してみると楽しいかもしれません!

  2. iFunboxより確認してみましたが
    どこに問題があるのかわかりません…

    着信時の応答、拒否ボタン
    壁紙変更時の設定、キャンセルボタン
    それぞれどこを見てみればいいのでしょうか。

  3. iphone5 さん
    記載されたURLのページ2の「Half-Life」という方の紹介しているページにあります。

  4. いつも参考にさせていただいております。Winterboardを使わずに(現時点ではJBAppもあまりないようですが)iOS6にてスライドバーの背景を消すべく、iOS5と同様にTelephonyUI.framework内の画像を差し替えようとしたのですが、従来のとは違う様で差し替える対象の画像が見当たりませんでした。このあたり、ブログで取り上げていただけるとありがたいです。

    • BarBottomLock@2x~iphone.png
      これに差し替えたら出来たよ!(iOs6 iPhone5)

  5. どうやって写真を差し替えるんですか?

    • iFunBox等を使って差し替えることが出来ます。ただし、差し替える前にオリジナルファイルのバックアップを取るようにしてください。

  6. やはり線が残るのね…
    ロック画面でのプレイヤーが変更されたからそれかと思った

  7. 初めまして。
    ロック画面のカメラマークと時計を消したいと思い
    こちらのサイトを参考にさせて頂きました。
    何度か試したのですが、どうしても時計とカメラマークが消えてくれませんでした。

    iPhone4でiso6です。
    iso6なので対応できなかったのでしょうか。
    スライド部分は透明になりました。

    もし対応策がございましたらお教え頂けると嬉しいです。
    宜しくお願い致します。

  8. iPhone5でやろうとしたのですが、Tap to Unlockがいくつもあって・・・
    よろしければどれか教えていただけませんか?

    • iPhone 4、4S用のRetina版を使用してください。ただし、この記事の手法ではiOS 6ですと一部うまく消えない部分がありますのでご注意ください。

      • ありがとうございます!

  9. いつも拝読させていただいております。
    この記事の通りにしたところ、ロック画面のスライダー等をなくすことができました。
    すっきりしたデザインが好きなのでとても助かっています。
    ところでお聞きしたいのですが、ロック解除の際のパスコードを入力するところの白い枠のようなものはどうやったら消せるのでしょうか?
    ご教授いただけるとありがたいです。

  10. 電源オフの時、タップで電源オフできたら是非追加してください!

    それと、ミュージックを流している時のロック画面の時計の背景画像も消せたらお願いします!

  11. SANTA@管理人様

    記事の内容を参考にさせていただき、すっきりしたロック画面を作ることが出来ました。
    記事の趣旨とは真逆なのですが、WinterBoardを使って
    「Localizable.strings」、「MailBulletin.strings」、「SMSBBPlugin.strings」を
    操作するテーマを自作するヒントにもなり、大変助かりました。
    コメントで失礼ですが、御礼申し上げます。
    ありがとうございました。

  12. いつも参考させていただいています。直接には関係の無い質問なのですが、WinterBoardを使わずロック画面の透過方法の記事でしたので、管理人さんでしたらご存知かな?と…
    当方 4s 5.1.1環境のロック画面でlockinfo(掲載されていないアプリですみません)を使用しているのですが、プラグイン機能で Ncsettingsを表示させています。
    設定でロック画面の透過は出来るのですが、何故かNcsettingsの背景(帯の様な…)が残ったまま表示されており、この部分を透過したいのですが…iFileで探してもそれらしい部分が探せないです。この部分は何処に起因しているでしょうか?

  13. いつもお世話になっております。
    かなり前にロック画面をいじり、どうやって戻すか分からなくなってしまいました。
    内容は、スライダーより下部分を黒くする(画像を消す?)というものです。言葉では説明し辛いのですが…
    ここをいじったのでは?など教えてくださるとありがたいです。
    よろしくお願いします。

    • どの部分の事なのかが正確に把握できていないのですが、
      /System/Library/PrivateFrameworks/TelephonyUI.framework/
      ・BarBottomLock@2x~iphone.png
      ・WellLock@2x~iphone.png
      あたりの事ではないでしょうか?

  14. こんにちは 写真アプリ内の写真を呼び出した際、数秒ほど表示されている黒い背景(上下にあります)はどうしたら消せるのでしょうか?
    当方 4s 5.1.1 JB環境です。ステータスバーはWinterBoardを使って透過させているのですが…その画像Pngがわかればリネーム等で透過したいのです。