開発Tips&ログ

iOS/Androidアプリ、WEB開発、インフラなどソフトウェア開発についての技術ブログ。

Android systraceを表示させるまで

経緯

遷移するまでにやたらと時間がかかる画面があったのでパフォーマンスを調査する必要がありました。なので色々調べているとsystrace なるものがあったので触ってみました。

表示をさせるまで

  • 設定アプリを開いて「開発者オプション」 > 「トレースを有効化」 を選択する。
  • 端末をPCに繋ぐ
  • android-sdkのディレクトリ/platform-tools/systrace/ に移動
  • systrace.py というpythonファイルがあるので実行する
~/Library/Android/sdk/platform-tools/systrace
# python systrace.py
These categories are unavailable: disk binder_driver
Starting tracing (stop with enter) #pythonファイルを実行するとここで止まる。一通り動かしたらenterを押す
Tracing completed. Collecting output...
Outputting Systrace results...
Tracing complete, writing results

Wrote trace HTML file: file:///xxx/Library/Android/sdk/platform-tools/systrace/trace.html

生成されたHTMLファイルを開くとこんな感じ↓のものが表示されます。

https://developer.android.com/images/systrace/frame-unselected.png

リファレンスにも記載されていますが、UIフレームをレンダリングしている各プロセスがリスト化されています。60fps以上だと緑の円が表示され60fps以下だと黄・赤になるようです。

Android Button余白のデフォルト値を変更する

はじめに

Androidのボタンはデフォルトで余白が入っているので、それらを削除して任意の値に変更する方法。

余白を無くす

android:minHeight="0dp"
android:minWidth="0dp"
android:padding="0dp"

これで余白がなくなりました。

あとは任意の値を当てるだけ。

ReactNaitveでEnum的に定義する

はじめに

ReactNativeでEnum的に定義したい時ありますね。特にNative言語を書いていると、普通に使うので使いたくなります。

そんな時の方法についてです。

※ TypeScriptを使うといい感じに書けますが今回は使いません。

Enum(じゃないけど)

例として、新規登録の際のボタンが3つ並んでいる想定です。

引数でボタンのタイプを渡して識別します。

ButtonType.js

const type = {
  EMAIL: Symbol('create account'),
  INSTAGRAM: Symbol('instagram'),
  FACEBOOK: Symbol('facebook'),
};

export default type;

Symbolに関しては、こちらとか詳しいかもない。

僕らは JavaScript を知らない - シンボル Symbol - TOEIC940点の文系プログラマー

利用

this.onButtonPress(buttonType.FACEBOOK)

あとは、onButtonPressメソッドでそれぞれのロジックを書いてあげれば良いです。

16進数でUIColorを生成するExtension

はじめに

iOS開発において、16進数でUIColorを生成したい場合があります。(他のアプリの色をそのまま取り入れたい時とかが個人的に多い)

その場合の実装方法について書きます。

Extension

早速実装方法です。

UIColor+Extensions.swiftのようなファイルを作成し、下記のように実装できます。

extension UIColor {
    
    static let darkGray = UIColor(hex: 0xEDEAEA)
    static let darkRed = UIColor(hex: 0xD70020)
    
    // Create a UIColor from a hex value (E.g 0x000000)
    convenience init(hex: Int, a: CGFloat = 1.0) {
        self.init(
            red: (hex >> 16) & 0xFF,
            green: (hex >> 8) & 0xFF,
            blue: hex & 0xFF,
            a: a
        )
    }
}

呼び出す

アプリケーションからは下記のように呼び出します。

hogeView.backgroundColor = .darkGray
fugaView.backgroundColor = .darkRed

Snackbarの使い方

はじめに

AndroidのDesign Support LibraryにあるSnackbarの使い方について

環境

  • kotlin version: 1.2.30
  • support lib version: 27.1.1

リファレンス等

Add an action to a message  |  Android Developers

Snackbar  |  Android Developers

使い方

表示

Snackbarのコンストラクタはprivateになっているため make() を使い、 show() で表示する。 make() の1つ目の引数はSnackbarを表示させるviewであり、対象となったviewのbottomに表示される。2つ目はメッセージで3つ目は表示時間。

Snackbar.make(view, "message", Snackbar.LENGTH_SHORT).show()

表示時間

Snackbarのdurationを使用すると以下表の時間表示される。以下の表以外でもミリ秒で時間を指定すればその時間表示される。

Duration 表示時間
Snackbar.LENGTH_SHORT 1.5秒
Snackbar.LENGTH_LONG 2.75秒
Snackbar.LENGTH_INDEFINITE 無限

アクション

Snackbarには1つだけボタンをつけることができる。

Snackbar
  .make(view, "message", Snackbar.LENGTH_SHORT)
  .setAction("action", {
    // actionボタンを押した時に呼ばれる
  })
  .show()

アクションボタンのテキストカラー

アクションボタンのテキストカラーを変更することができる。

Snackbar
  .make(view, "message", Snackbar.LENGTH_SHORT)
  .setAction("action", {  })
  // アクションボタンのテキストがここで指定した色になる
  .setActionTextColor(ContextCompat.getColor(this, R.color.colorPrimary))
  .show()

動き

実際に動かすとこんな感じになります。 f:id:hiring-y:20180603234916g:plain

ソースコード

記事を書くに当たって作成したソースコードを載せておきます。

class SnackbarActivity : AppCompatActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    val binding = DataBindingUtil.setContentView<ActivitySnackbarBinding>(this, R.layout.activity_snackbar)
    val root = binding.root

    binding.shortLength.setOnClickListener {
      Snackbar
          .make(root, "Short length", Snackbar.LENGTH_SHORT)
          .show()
    }

    binding.longLength.setOnClickListener {
      Snackbar
          .make(root, "Long length", Snackbar.LENGTH_LONG)
          .show()
    }

    binding.indefiniteLength.setOnClickListener {
      Snackbar
          .make(root, "Indefinite length", Snackbar.LENGTH_INDEFINITE)
          .show()
    }

    binding.action.setOnClickListener {
      Snackbar
          .make(root, "Action", Snackbar.LENGTH_INDEFINITE)
          .setAction("action", {
            Toast.makeText(this, "on click action", Toast.LENGTH_SHORT).show()
          })
          .show()
    }

    binding.actionTextColor.setOnClickListener {
      Snackbar
          .make(root, "Action text color", Snackbar.LENGTH_INDEFINITE)
          .setAction("action", {
            Toast.makeText(this, "on click action", Toast.LENGTH_SHORT).show()
          })
          .setActionTextColor(ContextCompat.getColor(this, R.color.colorPrimary))
          .show()
    }
  }
}

所感

使い方がとても簡単ですし、簡単な情報をユーザーに伝える手段としてはとても良いと思いました。Toastもすでにありますが、アクションをボタンがあることがさらに便利にさせているし、何よりToastに比べてカッコイイ。

Railsで書いたWebAPIをサクッとHerokuに載せる

はじめに

最近は2、3人で個人サービスを開発することをしていて、先にAPIインターフェイスだけ簡単に書いて

アプリケーション側と調整していい感じにしていくのが良いのかなと思ってきました。

本番はAWS使うけどまずは叩いて確認だけでもできるようにしたい時に、Herokuに載せています。

今回は、サクッとRailsアプリをHerokuに載せる方法について書きます。

※ Herokuのアカウントはすでに取得している前提

Herokuアプリを作成

まずはアプリを作成

$ heroku create アプリケーション名

これでアプリはできます。

アプリケーション側の設定

PostgressDBをHerokuで使うので、本番用にGemに追加します。

rails_12factorも追加し、ログをいい感じに見れるようにしておきます。

group :production do
  gem 'pg'
  gem 'rails_12factor'
end

続いて、database.ymlを下記のように変更します。

production:
  <<: *default
  adapter: postgresql

以上で、アプリケーション側の設定は終わりです。

Herokuに載せる

$ git push heroku master

master以外のローカルブランチを対象としたい場合は、

$ git push heroku develop:master (developは例)

最後に、migrationを走らせます。

$ heroku run rake db:migrate

これで完了です。

ちなみにログを見たいときは、

$ heroku log -t

でリアルタイムに見れるので、挙動がおかしなときはログを見ながら原因を見つけましょう。

終わりに

こんな感じでサクッと、Herokuに載せると楽です。

AndroidStudio3.1.2でタイプごとにindexされて補完されない時

はじめに

AndroidStudio3.1.2を使ってAndroid開発しているとき急に一文字ごとにindexされて

予測が出てこない(補完されない)現象が起こった時の対処法。

対処法

File -> Invalidate Caches / Restart を実行すると直る。

f:id:k0uh0tt:20180529131514p:plain

THANKS

stackoverflow.com