TwitterからエゴサーチしてSlackやChatworkに投げる

検索したツイートを定期的にSlackに投稿はIFFFTで出来るけど、Chatworkに投稿はZapierという類似サービスくらいしかなかった

一月の制限が割りときつくて途中で止まっちゃので

Goの勉強がてら自分で作った

github.com

まだ作法も全然わからないし

まだテスト書いてないし

READMEも適当

(まだChatworkしか対応してない)

これから改善していく

ReactNativeでActionSheetを実装する - その②

この前書いたActionSheetの記事書いたけど、特定の状況下だと使えないじゃん!ってなることに気づいた

rskull.hateblo.jp

駄目だった理由

iOSはネイティブの機能を使ってるのでどこで呼び出しても起動するけど

Androidはネイティブの機能ではなく、モーダルっぽいのをRN側で実装されてるので

ヘッダーのアイコンを押したときに起動する、みたいなことをすると

モーダルの位置が正しく計算されず、変なところに表示されたりする。

@expo/react-native-action-sheet

<ActionSheetProvider>
  <ActionSheet />
</ActionSheetProvider>

このコンポーネント自身がActionSheetを起動するためのボタンを持っているのと

Androidではポップアップを持っているので、置き場所によって正常な表示ができないことがある

駄目じゃん…

起動するためのボタンと、ポップアップのコンポーネントは場所を分けたい

近いことをしてたのがコレ

https://github.com/beefe/react-native-actionsheet

<ActionSheet
  ref={o => this.ActionSheet = o}     
/>
showActionSheet() {
  this.ActionSheet.show()
}

自身の ref を渡して起動する

コレだとトリガーを好きなところにおけるけど、Android側のUIが完全にiOSで好みじゃない

結局いいかんじだったやつ

github.com

Androidはネイティブに組み込む必要あってちょっとめんどくさいけど

RNの最新バージョンでも動作してたし大丈夫そう

何がいいってネイティブ実装だし、完全に ActionSheetIOSAPIと一緒なところが良い

どこでも呼び出せて、UIもAndroidに合ったものになってる

インストー

READMEの通り

$ npm install @yfuks/react-native-action-sheet@latest --save
$ react-native link @yfuks/react-native-action-sheet

あとはビルドして終わり

使い方は ActionSheetIOS と同じ

import ActionSheet from '@yfuks/react-native-action-sheet';

...

onOpenActionSheet() {
  const options = ['Delete', 'Save', 'Cancel'];
  const destructiveButtonIndex = 0;
  const cancelButtonIndex = 2;
  ActionSheet.showActionSheetWithOptions({
    options,
    destructiveButtonIndex,
    cancelButtonIndex
  },
  buttonIndex => {
    console.log(buttonIndex)
  })
}

デモ

iOS

f:id:rskull:20170704015625g:plain

Android

f:id:rskull:20170704015649g:plain

満足

ReactNativeにActionSheetを実装してみた

ActionSheetとは?

この下から出てきてるやつ

f:id:rskull:20170628001833p:plain

RN本体でサポートしてくれてはいるが、iOSの標準機能なので iOS用のコンポーネントになってる。

ActionSheetIOS

うーん…同じコードで両方対応したいですね…

react-native-action-sheet

そんなときはコレ

github.com

いい感じにiOSAndroid両方対応してた

Androidは(多分)見慣れたポップアップみたいな感じで表示される

expoでサンプルコードが公開されてるので、実機とアプリがあれば簡単に確認できて便利

※ expoについては省略

今回はexpoじゃなくて、通常通り react-native init app の流れからの組み込みを想定してる

組み込む

まずはプロジェクトのルートでパッケージをインストールする

$ npm install @expo/react-native-action-sheet

サンプルコードをほぼそのまま使って動くかやってみると

import React, { Component } from 'react';

import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import {
  ActionSheetProvider,
  connectActionSheet,
} from '@expo/react-native-action-sheet';

class app extends React.Component {
  render() {
    return (
      <View style={{ flex: 1 }}>
        <ActionSheetProvider>
          <ActionSheet />
        </ActionSheetProvider>
      </View>
    );
  }
}

@connectActionSheet class ActionSheet extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={{ marginBottom: 30 }}>
          <Text style={{ textAlign: 'center' }}>
            Hello! This is a simple example app to demonstrate
            @exponent/react-native-action-sheet.
          </Text>
        </View>

        <TouchableOpacity
          style={{ backgroundColor: "#000" }}
          onPress={this._onOpenActionSheet}
        >
          <Text style={{ fontSize: 15, color: '#fff' }}>Open action sheet</Text>
        </TouchableOpacity>
      </View>
    );
  }

  _onOpenActionSheet = () => {
    // Same interface as https://facebook.github.io/react-native/docs/actionsheetios.html
    let options = ['Delete', 'Save', 'Cancel'];
    let destructiveButtonIndex = 0;
    let cancelButtonIndex = 2;
    this.props.showActionSheetWithOptions(
      {
        options,
        cancelButtonIndex,
        destructiveButtonIndex,
      },
      buttonIndex => {
        // Do something here depending on the button index selected
      }
    );
  };
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

デフォルトだと、ES2016のDecoratorがBabelで有効になってないのでエラーがでます

> 23 | @connectActionSheet class App extends React.Component {
     | ^
  24 |   render() {
  25 |     return (
  26 |       <View style={styles.container}>

こんな感じのエラー

Decoratorを使えるようにする

プラグインを入れて

$ npm install --save babel-plugin-transform-decorators-legacy

.babelrc に設定を付け加える

{
  "presets": ["react-native"],
  "plugins": [
    "transform-decorators-legacy"
  ]
}

参考:Using ES2016 Decorators in React Native - Modus Create

npmインストールとかしたらプロンプトで動いてるやつ再起動してください Ctrl+Cで止めてプロジェクトルートで $ react-native start すれば動き出します

動かしてみる

iOS

f:id:rskull:20170627235432g:plain

Android

f:id:rskull:20170628000432g:plain

なんかDeprecated警告出てたけど、そのうち修正してくれるだろう…

Flwotypeに対応

Flowtype使ってるひとはチェック引っかかるので .flwoconfig に以下の内容を設定すれば大丈夫です

[options]
esproposal.decorators=ignore

参考:ES7 decorator support or a way to ignore the error · Issue #606 · facebook/flow · GitHub

感想

いい感じ ٩( ‘ω’ )و

※ 追記

特定の状況下だと使えないことがあった

rskull.hateblo.jp

新しいMBPにXcodeの開発環境を移行したとき証明書周りでハマった

タイトルの通り。

開発ビルドとリリースビルドの証明書がうまいこと設定できない問題はよくあるみたい。

いくつかハマった点をメモする

中間証明書がなかった

【注意】Apple Worldwide Developer Relations中間証明書の期限切れ - Qiita

まずはAppleから中間証明書というものを落として登録する必要がある。

そういえば昔そんな作業したなーって感じだった。

旧開発機から証明書をインポート

このあたりを参考にした

トラブルシューティング

Mobile Dev. (iPhone + Objcetive C) » 2台目以降のMacで実機テストをする方法

旧開発機のKeychain AccessからExportして.p12ファイルを作って それを共有するだけでOKだった。

プッシュ通知のための証明書を作成する過程でも色々ファイルを作成するので

どれが必要でどれがなんの役割なのかごっちゃになってたけど、今回の作業でスッキリした。

旧開発機からのインポートが無理な場合(ざっと)

手元の本番証明書が、MBP移行のタイミングでちょうど期限切れしてて、問題に気づくのが遅れた…

けっきょく証明書を作り直す必要がりそう。

  • 証明書の要求ファイル(CSR)を作成
  • DeveloperコンソールのCertificationsで追加ボタンを押す
  • 必要な種類を選んで先程作ったCSRをアップして証明書を発行
  • ダウンロードした証明書をクリックして追加
  • プロビジョニングプロファイルを編集して新しく追加されたCertificationsを選択して生成
  • ダウンロードして取り込む
  • これでXcodeみたら有効になってた

最初に証明書を作る時と同じような手順です。

ついでに期限が切れそうだった本番証明書も更新した。

もしかして普通一緒に更新するもの?

とりあえず問題なく更新して環境も移行できました。

iOSプッシュ通知用証明書の更新方法 - Qiita

細かい部分は探せばだいたい情報はあるから省く

MBP買ったから初期設定メモする

アプリ

ターミナル

環境構築

$ curl -sS rskull.com/rc/install | sh

デフォルトのシェルを変更

$ chsh -s /bin/zsh

rbenv & ruby

$ git clone https://github.com/sstephenson/rbenv.git ~/.rbenv
$ git clone https://github.com/sstephenson/ruby-build.git ~/.rbenv/plugins/ruby-build
export PATH="$HOME/.rbenv/bin:$PATH"
eval "$(rbenv init -)"

rubyをインストー

rbenv install 2.4.1

バージョンを指定

rbenv global 2.4.1

Homebrew

$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

cocoapods

$ gem install cocoapods

tmux

$ brew install tmux

tmux-powerline で使うフォント https://github.com/fncll/vimstuff/raw/master/powerline-fonts/SourceCodePro-Regular-Powerline.otf

php

$ brew install php71
$ brew install php71-igbinary
$ brew install php71-intl
$ brew install php71-mcrypt
$ brew install php71-opcache
$ brew install php71-redis
export PATH="$(brew --prefix homebrew/php/php70)/bin:$PATH"

Composer

$ curl -sS https://getcomposer.org/installer | php
$ mv composer.phar /usr/local/bin/composer

nodebrew & node

$ curl -L git.io/nodebrew | perl - setup
export PATH=$HOME/.nodebrew/current/bin:$PATH

nodeをインストー

$ nodebrew install v6.11.0
$ nodebew use v6.11.0

yarn

$ brew install yarn

ReactNative関連

コマンド

$ npm install -g react-native-cli

依存するコマンド

$ brew install watchman
$ brew install flow

Reat Native Debegger (デバッグツール)

https://github.com/jhen0409/react-native-debugger

$ brew update && brew cask install react-native-debugger

Androidの開発環境

http://facebook.github.io/react-native/docs/getting-started.html

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$ANDROID_HOME/platform-tools:$PATH
export PATH=$ANDROID_HOME/tools:$PATH
export PATH=$ANDROID_HOME/tools/bin:$PATH

Golang

https://golang.org/dl/

export GOPATH=$HOME/work/go
export GOROOT=/usr/local/go
export PATH=$GOPATH/bin:$GOROOT/bin:$PATH

LayoutAnimation 使うと楽しい

ReactNativeで LayoutAnimation を使うと、要素が消えたり表示したりする時に

勝手にいい感じのアニメーションを付けてくれるから便利

import {
  LayoutAnimation,
} from 'react-native';

ボタンを押すとメニューが出てくる仕様があったとして、それにアニメーションを付けたい場合、 トリガーになる onPress() なんかの一番最初に LayoutAnimation.spring() を書くだけで勝手にアニメーションしてくれます。

spring() はバネみたいなアニメーションで、他にはeaseInEaseOut ()linear () がデフォルトで用意されています。

サクッと確認したい場合は、ここを見るとウェブ上で実行できるサンプルがあるので、それを編集すれば良さそうです。

http://facebook.github.io/react-native/releases/0.45/docs/animations.html#layoutanimation-api

自分で動きをカスタマイズも出来ます。

こんな感じ

componentWillUpdate()LayoutAnimation を実行すれば、とにかく画面が変更される度にアニメーションがかかるようになります。

LayoutAnimation は難しい設定なしで、かってにアニメーションをいい感じにしてくれる良い子です。

ぜひ使ってみて下さい。

ドキュメント http://facebook.github.io/react-native/releases/0.45/docs/layoutanimation.html#layoutanimation

久しぶりに書く

この先も生き残れるエンジニアになるにはアウトプットを…

みたいな記事に毎回脅迫されるから何かしら書いていこうと思い立った。

緑のサイトは見るけど書くのは気が乗らないからブログにする。

学生の頃のほうがアウトプットしてたんだけど

新卒で入った会社に忙殺されて久しく忘れていた。

やっていきですね