開発Tips&ログ

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

意外と便利なSlackリマインド機能

小ネタ

Slackずっと利用しているのですが、

誰か宛に

@someone 明日これやっておいてねー

とすると大抵やり忘れているのですよね。

リマインド機能

ただ下記のようなコマンドを打つだけ。

/remind [@someone or #channel] [what] [when]

例えば

/remind @someone hoge tomorrow 10AM

とすると

SlackBotが明日10時にDMしてくれます。

f:id:k0uh0tt:20171213005103p:plain

以上、小ネタでした。

※やりすぎると怒られる多分

iPhoneXからSafeAreaの取得方法

iOS iOS 開発 アプリ

はじめに

ノッチ対応等でiPhoneXからSafeAreaの高さを取得方法についてです

実装

swift

if #available(iOS 11.0, *) {
  let safeAreaInsets = UIApplication.shared.keyWindow?.safeAreaInsets
  let top = safeAreaInsets?.top
  let bottom = safeAreaInsets?.bottom
}

Objective-c

if (@available(iOS 11.0, *)) {
  UIEdgeInsets safeAreaInsets = UIApplication.sharedApplication.keyWindow.safeAreaInsets;
  CGFloat top = safeAreaInsets.top;
  CGFloat bottom = safeAreaInsets.bottom;
}

safeAreaInsets のAPIはiOS11以降でしか使えません。iPhoneX以外だと safeAreaInsets はtop, bottom, right, leftの全てが0になります。

FirebaseのHostingを使ってみる

Firebase 開発 Web Google

はじめに

FirebaseのHostingを使って公開するところまでについてです。

Firebaseプロジェクトを作る

まずはGoogleアカウントでログインしFirebaseコンソールでプロジェクト作成します。

f:id:hiring-y:20180724231419p:plain

https://console.firebase.google.com を開くと↑の画面が開くと思うので赤枠からプロジェクトを追加します。

f:id:hiring-y:20180724231559p:plain

こんな感じですね。

Firebase CLI をインストールする

プロジェクトが作れたので次はローカル環境を整えていきます。

まずはFirebase CLI（コマンドライン インターフェース）をインストールします。インストールにはNode.js とnpmが必要なのですがここでは割愛とします。

こちらのコマンドでインストールできます。

sudo npm install -g firebase-tools

ちなみにFirebase CLIはHostingに関わらずFirebase プロジェクトの管理、表示、デプロイを行うためのさまざまなツールを提供しています。

ローカルでログインする

次にローカルのPCでログインしておきます。

firebase login

Firebase CLIをインストールするとfirebaseコマンドが使えるようになりますので↑を実行します。するとブラウザが起動してGoogleのログイン画面が表示されます。その中から先ほどプロジェクトを作成したアカウントで認証を完了させるとコンソールに Success! Logged in as xxxx とログインしたメールアドレスが表示されていると思います。

ログインしているかどうかを確認するために firebase list コマンドを実行するとアカウントに紐づくプロジェクトの一覧を見ることができるので、その中に先ほど作成したプロジェクトがあれば成功してます。

f:id:hiring-y:20180724233745p:plain

ローカルにプロジェクトを作る

次にローカルにプロジェクトを作っていきます。

適当なディレクトリに移動し、以下のコマンドを実行します。

firebase init

実行すると↓が表示されてFirebase CLIのどの機能を使うか聞かれます。なのでHostingまで移動してセレクトキーで選択しエンターで決定します。

f:id:hiring-y:20180725005227p:plain

次はどのプロジェクトを使うか聞かれるので先ほどFirebaseコンソールで作ったプロジェクトを選択します。ここは矢印を合わせてエンター押すだけです。

f:id:hiring-y:20180724234522p:plain

次はどのフォルダを公開用にしますか、と聞かれるので任意の名前にできますが、そのままエンターを押すと public というフォルダが作成されます。 その下でシングルページアプリケーションにしますか、と聞かれていますが、今回はindex.htmlを表示させるだけなのでNoとしてます。

f:id:hiring-y:20180725001951p:plain

そうすると firebase.json という設定ファイルとpublicフォルダに index.html と 404.html が生成されるはずです。

f:id:hiring-y:20180725002412p:plain

最終的なフォルダ構成はこんな感じになりました。

.
|____.firebaserc
|____public
| |____index.html
| |____404.html
|____firebase.json

ここまできたら後はデブロイです。 firebase deploy を実行すると↓の画面が表示されます。

f:id:hiring-y:20180725003512p:plain

ここに表示されている Hosting URL にアクセスするとindex.htmlが表示されるはずです。

感想

公開までの手順が簡単すぎてびっくりしました。ロールバックとかもコンソールから簡単にできるので静的ページ作る際にはお世話になりそうです。

[iOS][Android] ReactNativeにアプリアイコンを設定する

アプリ ReactNative iOS Android 開発

はじめに

ReactNativeのアプリ開発においてアプリアイコンを設定する方法についてです。

基本ネイティブで行うのと同じです。

アイコンの準備

個人で全てやっている場合は、アイコンを生成するサービスもあるので利用すると楽ですね。

MakeAppIcon - Generate iOS and Android app icons of all sizes with a click!

iOS

下記のアイコンを準備する。

20×20@2x
20×20@3x

29×29@2x
29×29@3x

40×40@2x
40×40@3x

60×60@2x
60×60@3x

1024×1024@3x

Android

Androidの場合は下記のサイズ。

72*72 ic_launcher.png  /mipmap-hdpi.

48*48 ic_launcher.png /mipmap-mdpi.

96*96 ic_launcher.png /mipmap-xhdpi.

144*144 ic_launcher.png /mipmap-xxhdpi.

192*192 ic_launcher.png /mipmap-xxxhdpi.

iOSの設定

Xcodeを開き、Images.xcassetsのAppIconに先ほど準備したアイコンを設定する。

これだけです。

f:id:k0uh0tt:20180717111805p:plain

Androidの設定

android/app/src/main/res の中にデフォルトのアイコンが設定されているので、

各サイズのic_launcher.pngを先ほど準備したアイコンに変更し完了。

ReactNativeのgradleを3系にあげる

Android ReactNative アプリ 開発

はじめに

ReactNativeのgradleを3系にあげる方法についてです。

現状だとデフォルトが2系なのであげたい人多いですよね。

バージョン

ReactNative 0.55.4

android/build.gradle の変更

google() を追加。

buildscript {
    repositories {
        jcenter()
        // add google() here
        google()

3.1.0 に変更

buildscript {
    repositories {
        jcenter()
        google()
    }
    dependencies {
      // classpath 'com.android.tools.build:gradle:2.2.3'
      // update from 2.2.3 to 3.1.0 
      classpath 'com.android.tools.build:gradle:3.1.0'

全体はこんな感じに。

buildscript {
    repositories {
        jcenter()
        google()
    }
    dependencies {
      classpath 'com.android.tools.build:gradle:3.1.0'
    }
    allprojects {
      repositories {
        mavenLocal()
        jcenter()
        // add googgle() here
        google()

android/gradle.properties の変更

android.enableAapt2=false を追加

android.enableAapt2=false // 追加

android/gradle/wrapper/gradle-wrapper.properties の変更

distributionUrl を下記に変更

distributionUrl=https\://services.gradle.org/distributions/gradle-4.4-all.zip

ビルド

react-native run-android

YaY!

Pythonで簡単にSlackに通知しよう

Python Slack

はじめに

Pythonで簡単にWebhook urlを使ってSlackに通知する方法です。

バージョン

Python 3.6

Webhook url取得

こちらにアクセスし、取得。

https://slack.com/services/new/incoming-webhook

実装

下記のようなメソッドを実装し、呼び出す。

import requests, json

WEBHOOK_URL = "取得したURL"

def notifier_to_slack():
    requests.post(WEBHOOK_URL, data = json.dumps({
        "channel": "#your_channel" # 任意のチャンネル,
        'text': u"Slack Notification",
        }))

他のパラメータに関しては、下記を参考にしてください。

api.slack.com

任意のバージョンのCocoapodsをインストール

iOS 開発

複数人で開発していると度々必要になることがあるのでちょいとまとめておきたい

現行バージョンチェック

$ pod --version

アンインストール

$ gem uninstall cocoapods --version '=現行バージョン'

再インストール

gem install -v 1.3.0 cocoapods