Android：端末のフレーム付きのスクリーンキャプチャを作る

Android アプリを開発していると、上のような端末のフレームイメージ内にスクリーンキャプチャをはめ込んだ画像を作りたくなることがあると思います。 Google Play ストアに掲載、プレゼンの資料用に使う、自分のブログに載せてPR、などなど用途は色々ですね。

今回はその画像を作成できるサイトを2つ紹介します。 それから、私が経験したちょっとした困りごととその解決策について書きます。 なお、この記事は2018/7/3現在での内容となっています。

① Device Art Generator

まずは公式（無料）のものから。 developer.android.com

基本はこのサイトで必要十分です。 使い方もシンプルですし、フレームイメージもいくつかの中から選べます。

サイト内に以下のような注意が書いていますが、Google の公式アプリのストア掲載情報でもフレーム付きスクリーンキャプチャを使っているので、説得力がない。。。

注: ここで作成した画像は、Google Play ストアの掲載情報で紹介する画像やスクリーンショットとしては使用しないでください。ストアの掲載情報では、フレームの付いていないスクリーンショットを使用することをおすすめしています。Google Play で使用する画像のガイドラインについてのページをご覧ください。

フレームを付けるとどうしても画面自体のイメージは若干小さくなるので、それが理由なんでしょうね。
細かい描画が多い画面なら、たしかにフレームを付けない方が得策ですね。 そうでなければ見栄えが良い方を選べばいいだけだと思います。

② Placeit

次はオシャレ度が高いサイト（一部無料）です。 placeit.net

こちらは種類が豊富で Android 端末に加え、 iPhone や iPad も様々なシチュエーションのイメージが用意されています。 背景がオシャレなものが多く、実際にアプリを使っている場面を演出できるので、アプリのスクショと良い感じに合わせれば効果は抜群です。

また、このサイトには Device Art Generator にない Nexus 7 のイメージが用意されているので、これが地味に役立ちました。
しかも、背景なしタイプは無料です。ありがとう、Placeit！

placeit.net

ちょっとした困りごととその解決策

私は Device Art Generator で Nexus 5X のイメージをよく使っていたのですが、ある時期に Nexus 5X がサイトから消えたことがありました(´・ω・`)
（今は普通に OLDER DEVICES の中にあるようです）
画像作成中なのに勘弁してくれよ Google 先生～、作成済の画像も他の端末イメージにして全部作り直すしかないのかと半ば諦めかけていました。
が、Device Art Generator の画面の左下にある言語選択を「日本語」から「English」に変えたところ、そのときは何故か Nexus 5X が復活しました。
復活した原因はよく分からないままでしたが、もし欲しいイメージがなくなったりしたら、言語を変えてみると良いかもしれません(｀・ω・´)

感想

今回は小ネタでした。 はてなブログの書き方に少し慣れてきたので良かったです（小並感）。

Android：ゴーストボタンで押した感を表現（Ripple Effectなし、画像なし、アニメーションなし、色も変えずに）

最近Androidアプリを個人開発しているので、その中で得られた知見とかハマったこととかを書いていきたいと思います。
まずはタイトルの件。
これはButtonのbackgroundに設定するdrawableを工夫するだけで簡単にできます。

完成イメージ

GIFだとカクカクして見えますが、実際はサクサクでいい感じです(^^)

ちなみに、このGIFはAndroid Studioのエミュレータを使って、メニュー内の[Record screen]から撮りました。
計算内容はトリビアの泉で昔やっていたネタなだけなので気にしないでください。
私は病んでないですよ。

方法

ポイントはdimens.xmlに設定しているbtn_padding_defaultとbtn_padding_pressedの値がちょっと違うこと。

- my_drawable.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <layer-list>
            <item android:top="@dimen/btn_padding_pressed" android:right="@dimen/btn_padding_pressed" android:bottom="@dimen/btn_padding_pressed" android:left="@dimen/btn_padding_pressed">
                <shape android:shape="rectangle">
                    <stroke android:color="@color/my_color" android:width="@dimen/btn_border" />
                    <corners android:radius="@dimen/btn_radius" />
                </shape>
            </item>
        </layer-list>
    </item>
    <item>
        <layer-list>
            <item android:top="@dimen/btn_padding_default" android:right="@dimen/btn_padding_default" android:bottom="@dimen/btn_padding_default" android:left="@dimen/btn_padding_default">
                <shape android:shape="rectangle">
                    <stroke android:color="@color/my_color" android:width="@dimen/btn_border" />
                    <corners android:radius="@dimen/btn_radius" />
                </shape>
            </item>
        </layer-list>
    </item>
</selector>

- dimens.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <dimen name="btn_padding_default">4dp</dimen>
    <dimen name="btn_padding_pressed">2dp</dimen>
    <dimen name="btn_border">1dp</dimen>
    <dimen name="btn_radius">12dp</dimen>
</resources>

Buttonにセットしてあげれば完成！

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="BUTTON"
    android:background="@drawable/my_drawable"
    style="@style/Widget.AppCompat.Button.Borderless" />

作った経緯

個人開発した電卓アプリCalcLeaf（上のGIFのやつ）にゴーストボタンを取り入れたテーマを追加した際、しっくりくるボタン押下エフェクトがなかなか見つからなかった。
ゴーストなのにRipple Effectが出たり、色が変わったりするのはどうにも微妙。
そんな中で設定値を間違えてしまって偶然できて、使ってみたら意外と良かったのが今回の投稿内容です。
スマホではボタンをタップしたときに自分の指でボタンが一時的に隠れてしまいますが、この「border拡大方式」なら指で覆われた部分から外側にちょっと拡大することで主張できます。
しかも、指を離した後も元の大きさに戻る感じが残像でプルプルして見えるので個人的に気に入りました。

ちなみに、その電卓アプリはこれです。
play.google.com
ちょっとした便利機能のある使いやすいAndroidアプリですので、良かったら触ってみてください！（iOS版は鋭意開発中）

感想

すっごい久しぶりにブログを更新しました。
1日坊主になっていたことを反省して、これからはちょくちょく投稿していきます。
記事に起こしてみると、コードの見直しになっていいですね。
Qiitaにも投稿済だけど、ブログとの書き分けはどうしようかな(´・ω・`)

qiita.com

大阪帝国ホテルを予約したのに帝国ホテル大阪に行ってしまった話

ブログ初投稿ですが、やっちまったお話から。

タイトルの件、こんなアホなことをしてしまうのは私以外にもいるのでしょうか。いたら教えてほしい。

お手頃なビジネスホテルの「大阪帝国ホテル」と高級ホテルの「帝国ホテル大阪」を間違うなんて。

今ではネタ話になるけど、当日は本当に穴があったら入りたかった。。。

概略を書くと、以下のような感じ。。。

楽天トラベルでお安い方の「大阪帝国ホテル」を予約する。

（このときは「帝国ホテル大阪」の存在を知らんかった・・・）

↓

大阪旅行当日、嫁と嫁の家族と意気揚々と大阪駅まで移動し、そこでホテルまでのアクセスを調べる。

↓

スマホで「大阪帝国ホテル」を検索して、検索結果の一番上に出てきた「帝国ホテル大阪」のページをそれと気づかずに開いてしまう。

（アホなので気づかない）

↓

大阪駅からホテルまでシャトルバスあるやん！乗ったろ！

（アホゆえに予約していない方の高級ホテルのシャトルバスに何の疑いもなく乗る）

↓

「帝国ホテル大阪」前に到着し、その立派な外観を目の当たりにするも、「値段の割に立派なホテルだなぁ」くらいにしか思わず、フロントに荷物を預けに行こうとする。

（到着した安堵感を抜きにしてもアホ）

↓

ロビーがもの凄く綺麗で広く、優雅なバイオリンの生演奏まで聞こえるも、「あの値段でここまでやるとは大阪のホテルはすごいなぁ、経営大丈夫なんかな」などとマジで要らない心配をする。

（もはやバカ）

↓

フロント到着、荷物を預ける際に予約の確認をされる。

↓

名前を伝えるも予約がなかなか見つからず、別の方のお名前で予約していないかと確認される。

（あれ？）

↓

そんな覚えはないので、自分の苗字の別の読み方なんかをアホみたいに伝えて確認してもらう。

↓

それでも見つからないので、予約IDがあったはずと思い、私のスマホで予約画面をフロントのスタッフさんに見てもらう。

↓

スタッフさんが予約画面を見て驚く。

↓

 「よくある間違いなのですが、お客様が予約されたのは別のホテルとなっております。名前は似ているのですが・・・」

↓

私も驚愕！どうりでホテルが豪華過ぎるわ！

↓

スタッフさんに親切にも「大阪帝国ホテル」への行き方を案内してもらう。

泊まれなかったけど、帝国ホテル大阪のスタッフさんは本当に丁寧で良い方でした。

↓

ホテルのロビーを散策していた嫁達に説明し、嫁たちも愕然。

このときの嫁の顔は忘れられないし、私の顔も相当やばかったとのこと。

↓

嫁に慰められながら、大阪駅までのシャトルバスに乗り直し、大阪帝国ホテルを目指す。

↓

予約した大阪帝国ホテルへ着いたが、先に豪華なホテルを見てしまったせいでグレード下がった感が強く出てしまい、嫁の家族のことを考えてへこむ。

（大阪帝国ホテルは普通に質の良いビジネスホテルでしたが、どうしてもグレードの落差だけは感じてしまいました）

以上が顛末です。

書きながら、また赤面してしまった（笑）

大阪帝国ホテルで検索してもトップには帝国ホテル大阪が出てきます。

ちゃんと帝国ホテル大阪に大人数で泊まれる大人になりたいなとも思えたので、まあ良い勉強になりました。今ではネタとして笑えますし。

このブログを読んだ方はくれぐれも私と同じ過ちをしませんように（やらないと思いますが）。