amplify initでAccessDeniedで1日飛んだ話

問題

amplifyで知り合いが開発しているものをcloneしてセットアップしていたところamplify initでこける

⠹ Initializing your environment: dev(node:80382) UnhandledPromiseRejectionWarning: AccessDenied: Access Denied

https://xp-cloud.jp/blog/2020/03/24/6922/

いろいろ参考になりそうな記事がるけれども、動かない。

amplify configureでいくつかIAM作り直したり、aws configureでaws cliのログインをしなおしてもダメ。

結論

credentialのdefaultをいじった

https://xp-cloud.jp/blog/2020/03/24/6922/

こちらの記事にある通り、amplify configで作ったプロファイルはdefaultとは別に指定した名前で~/.aws/credentialsに格納されてます。

で、どうやらamplify configでIAM作ってもamplify initする時はdefaultの方を参照してしまうらしく、それでAccess Deniedされていたみたいです。

なのであまり根本的に無解決になってない気がしますがdefaultを新たに作ったconfig情報で上書きしました。

もっといい解決法があればコメントいただけると嬉しいです。

cover Photo by Kai Oberhäuser on Unsplash

Posted By :
Comment :0

2つの配列で共通している物を削除したい-javascript

a = [1,2,3,4]
b = [3,4]

//なんとかして

c = [1,2]

//を得たい

filterとindexOfを組み合わせてできます。

let c = a.filter(n => b.indexOf(n) === -1);

追記

友人のプロにこっちの方がと指摘を受けました。

const a = [1, 2, 3, 4]
const b = [2, 3]

a.filter(elem => !b.includes(elem))
Posted By :
Comment :0

hubspotAPIのCreate a new contact をGASから叩いてみる

Google Spreadsheetの顧客リストからhubspotのcontactを作ろうとしていて、hubspotAPIを使ってみている。

hubspotは本当にありとあらゆるものがAPIとして用意されている。Contactを作るものはこれ

https://developers.hubspot.com/docs/methods/contacts/create_contact

node.jsだと

var request = require("request");

var options = { method: 'POST',
  url: 'https://api.hubapi.com/contacts/v1/contact/',
  qs: { hapikey: 'demo' },
  headers: 
   { 
     'Content-Type': 'application/json' },
  body: 
   { properties: 
      [ { property: 'email', value: 'testingapis@hubspot.com' },
        { property: 'firstname', value: 'test' },
        { property: 'lastname', value: 'testerson' },
        { property: 'website', value: 'http://hubspot.com' },
        { property: 'company', value: 'HubSpot' },
        { property: 'phone', value: '555-122-2323' },
        { property: 'address', value: '25 First Street' },
        { property: 'city', value: 'Cambridge' },
        { property: 'state', value: 'MA' },
        { property: 'zip', value: '02139' } ] },
  json: true };

request(options, function (error, response, body) {
  if (error) throw new Error(error);

  console.log(body);
});

となる。GASの方のサンプルはこれ

https://developers.google.com/apps-script/reference/url-fetch/url-fetch-app

// Make a POST request with a JSON payload.
var data = {
  'name': 'Bob Smith',
  'age': 35,
  'pets': ['fido', 'fluffy']
};
var options = {
  'method' : 'post',
  'contentType': 'application/json',
  // Convert the JavaScript object to a JSON string.
  'payload' : JSON.stringify(data)
};
UrlFetchApp.fetch('https://httpbin.org/post', options);

node.jsの方はAPIキーをqsのオプションで足しているのでそれをとりあえずURLにベタうち

function postHubspot(text){
  
  
  
  // Make a POST request with a JSON payload.
var data = {
  'properties': 
      [ { property: 'email', value: 'testingapis@hubspot.com' },
        { property: 'firstname', value: 'test' },
        { property: 'lastname', value: 'testerson' },
        { property: 'website', value: 'http://hubspot.com' },
        { property: 'company', value: 'HubSpot' },
        { property: 'phone', value: '555-122-2323' },
        { property: 'address', value: '25 First Street' },
        { property: 'city', value: 'Cambridge' },
        { property: 'state', value: 'MA' },
        { property: 'zip', value: '02139' } ], 

  'json': true  
};


var options = {
  'method' : 'post',
  'contentType': 'application/json',
  // Convert the JavaScript object to a JSON string.
  'payload' : JSON.stringify(data)
};

UrlFetchApp.fetch('https://api.hubapi.com/contacts/v1/contact/?hapikey="hubspotのAPIキー"', options);
  

};

これでとりあえず作成はできました。

Posted By :
Comment :0

react-navigationでScreen内容を別ファイルにする

React-nativeでNavigationを使って画面遷移をする時

https://reactnavigation.org/docs/hello-react-navigation/

サンプルプログラムでは1つのファイルに遷移先含めて入れている。

import * as React from 'react';
import { Button, View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

function DetailsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
      <Button
        title="Go to Details... again"
        onPress={() => navigation.push('Details')}
      />
      <Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
      <Button title="Go back" onPress={() => navigation.goBack()} />
      <Button
        title="Go back to first screen in stack"
        onPress={() => navigation.popToTop()}
      />
    </View>
  );
}

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

ページ数が増えてきたり複雑になってきたりすることを想定して別スクリーンの内容は別ファイルにしたい。

フォルダを作る

適当にページを入れるフォルダを作ります

import文を書く

import HomeScreen from "./pages/Home"
import DetailScreen from "./pages/Details"

Stack.ScreenのあるApp.jsでそれぞれのcomponentを先ほど置いたpagesの中身から取るようにimport文を書きます。

pagesの中にimportに対応するjsファイルを作ります。

それぞれにページの内容を記述します

import * as React from 'react';
import { View, Text, Button } from 'react-native';


export default ({route, navigation}) => {

    return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Text>Home Screen</Text>
            <Button
                title="Go to Details... again"
                onPress={() => navigation.push('Detail')}
            />
        </View>
    );


}

値を渡す場合も一つのコードの中で書いてた時と同じように

<Button onPress={ ()=> navigation.navigate("Individual",{
    content: elem.jobDetail,
    id: elem.id,
    done: elem.done
 })} title={""}/>

と言う形で渡せば

route.id

のような形で受け取れます。

Posted By :
Comment :0

初めてFirebaseをexpo使いながら触ろうとした時databaseのrulesが見つからなかった

Firebase一度触ってみたいと言うことで

https://docs.expo.io/guides/using-firebase/

ここをやり始めたところいきなり

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

データベースのルールをみようと言うことでコンソールに行ってみると

なんか全然形式が違う気がする。。。

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if false;
    }
  }
}

いろいろ調べててもよくわからずいろいろいじっていると

なんか2種類ある。作る時選択するところがあったのかもしれませんが、全然気がつきませんでした。

https://firebase.google.com/docs/database/rtdb-vs-firestore?hl=ja

Cloud Firestore は、Firebase のモバイルアプリ開発用の最新データベースです。直感的な新しいデータモデルで Realtime Database をさらに強化しています。Cloud Firestore は、Realtime Database よりも多彩で高速なクエリと高性能なスケーリングが特長です。

Realtime Database は従来からある Firebase のデータベースです。リアルタイムのクライアント間同期が必要なモバイルアプリのための、効率的でレイテンシが低いソリューションです。

新しいのができたみたいで、ドキュメントが古かったってことみたいです。

気がつかなかった。。。

Posted By :
Comment :0

react-native-chart-kitのbakgroundcolorが設定できない件

chartConfig={{
     backgroundColor: '#1cc910',
     backgroundGradientFrom: '#eff3ff',
     backgroundGradientTo: '#efefef',
     decimalPlaces: 2,
     color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
     style: {
          borderRadius: 16,
            },
}}

このうちbackgroundに関する部分が動かない。辛い。

解決方法

react-native-svgのバージョンを下げる

    "react-native-svg": "^10.0.0"

どうやら、react-native-svgのurlが使えないというバグのようです。
どのバージョンから動くかちょっと定かではないですが、とりあえず10.0.0にしたら動きました。

https://github.com/indiespirit/react-native-chart-kit/issues/315

ただそれでもGradationは動きませんでした。とりあえずこのまま使います

Posted By :
Comment :0