How to Configure FCL

[Previous << Authentication](https://qiita.com/flowcadence/items/07695f36283735c00a71)
[Next >> Wallet Discovery](https://qiita.com/flowcadence/items/01a1580cb15a359a59ce)

https://qiita.com/flowcadence/items/3073d69c6e9895e68b5a#reference-2020832ebee1810a325a


<h1>Configuration</h1>

FCLには、FCLのさまざまな側面の設定ができる仕組みがあります。(FCLの観点から考えると)ここで主な考え方は、Flow Blockchainのインスタンスを違う場所（ローカルエミュレータからテストネット、メインネット）へ移動させた時に、あなたが変更しないといけない唯一のことは（FCLの観点から再度考え）設定のみであるということです。

<h1>Setting Configuration Values</h1>

値は一度セットすればいいだけでです。 私たちはこれをできるだけ早い段階で行うことをお勧めします。 コンフィグレーションに値をセットするには、`config` インスタンス上で`put`メソッドを呼び出す必要があります。`put`メソッドは`config`インスタンスを返しますので、チェイニングすることができます。
```ruby
import * as fcl from '@onflow/fcl';

fcl
  /* returns the config instance */
  .config()
  /* configures "foo" to be "bar" */
  .put('foo', 'bar')
  /* configures "baz" to be "buz" */
  .put('baz', 'buz');
```

<h1>Getting Configuration Values</h1>

`config`インスタンスは非同期の`get`メソッドを持っています。また、コンフィグレーションが希望する内容を含んでなかった状態に備えてフォールバック値を渡すことができます。

```ruby
import * as fcl from '@onflow/fcl';

fcl.config().put('foo', 'bar').put('woot', 5).put('rawr', 7);

const FALLBACK = 1;

async function addStuff() {
  var woot = await fcl.config().get('woot', FALLBACK); /* will be 5 -- set in the config before */
  var rawr = await fcl.config().get('rawr', FALLBACK); /* will be 7 -- set in the config before */
  var hmmm = await fcl.config().get('hmmm', FALLBACK); /* will be 1 -- uses fallback because this isnt in the config */

  return woot + rawr + hmmm;
}

addStuff().then((d) => console.log(d)); // 13 (5 + 7 + 1)
```

<h1>Common Configuration Keys</h1>

* `accessNode.api` -- 通信したいFlow BlockchainのAccess NodeのAPI URL
* `app.detail.title` - アプリケーションのタイトル。ウォレットやその他のサービスから要求されることがあります。WalletConnectプラグインとWallet Discoveryサービスで使用されています。(INTRODUCED @onflow/fcl@0.0.68) 
* `app.detail.icon` - アプリケーションアイコンのURL。ウォレットやその他のサービスから要求されることがあります。WalletConnectプラグインとWallet Discoveryサービスで使用されています。(INTRODUCED @onflow/fcl@0.0.68) 
* `app.detail.description` - アプリケーションの説明。ウォレットやその他のサービスから要求されることがあります。WalletConnectプラグインとWallet Discoveryサービスで使用されています。(INTRODUCED @onflow/fcl@1.11.0) 
* `app.detail.url` - アプリケーションのURL。ウォレットやその他のサービスから要求されることがあります。WalletConnectプラグインとWallet Discoveryサービスで使用されています。(INTRODUCED @onflow/fcl@1.11.0) 
* `challenge.handshake` -- FCLにウォレットまたはWallet Discoveryメカニズムを指定します (**DEPRECATED** @onflow/fcl@0.0.68)
* `discovery.wallet` -- FCLにウォレットまたはWallet Discoveryメカニズムを指定します(INTRODUCED @onflow/fcl@0.0.68) 
* `discovery.wallet.method` -- どの戦略(タブ、ポップアップ、iFrame)でウォレットを見せるかを指定します : `IFRAME/RPC`, `POP/RPC`, `TAB/RPC`, `HTTP/POST`, `EXT/RPC`
* `env` --  保存されたやり取りと合わせて使用します。 指定可能な値：`local`, `testnet`, `mainnet` (**DEPRECATED** @onflow/fcl@1.0.0)
* `fcl.limit` -- トランザクションで指定されていない場合のfallbackとしてcompute limitを指定します。整数で指定します。
* `flow.network` (recommended) -- 接続するネットワーク及び、testnetおよびmainnetのFCLCryptoContractのアドレス提供に使用します。指定可能な値：`local`、`testnet`、`mainnet` (INTRODUCED @onflow/fcl@1.0.0)
* `service.OpenID.scopes` - WalletやOpenID serviceに使われるOpen ID (INTRODUCED @onflow/fcl@0.0.68)
* `walletconnect.projectId` -- あなたのアプリである WalletConnect のプロジェクトID。 アプリケーションのプロジェクトIDを取得するには、[WalletConnect Cloud](https://cloud.walletconnect.com/sign-in)を参照してください。 (INTRODUCED @onflow/fcl@1.11.0) 


<h1>Using Contracts in Scripts and Transactions</h1>

<h3>Address Replacement</h3>

コンフィグレーションの`0x`で始まるキーはFCLのスクリプトおよびトランザクション内で置き換えられます。これにより、アプリケーションをFlow Blockchainの異なるインスタンスに向けた場合でも、１箇所変更するのみで、スクリプトまたはトランザクションのCadenceコードを変更する必要がなくなります。
```ruby
import * as fcl from '@onflow/fcl';

fcl.config().put('0xFungibleToken', '0xf233dcee88fe0abe');

async function myScript() {
  return fcl
    .send([
      fcl.script`
      import FungibleToken from 0xFungibleToken // will be replaced with 0xf233dcee88fe0abe because of the configuration

      access(all) fun main() { /* Rest of the script goes here */ }
    `,
    ])
    .then(fcl.decode);
}

async function myTransaction() {
  return fcl
    .send([
      fcl.transaction`
      import FungibleToken from 0xFungibleToken // will be replaced with 0xf233dcee88fe0abe because of the configuration

      transaction { /* Rest of the transaction goes here */ }
    `,
    ])
    .then(fcl.decode);
}
```
**Example**
```ruby
import * as fcl from '@onflow/fcl';

fcl
  .config()
  .put('flow.network', 'testnet')
  .put('accessNode.api', 'https://rest-testnet.onflow.org')
  .put('discovery.wallet', 'https://fcl-discovery.onflow.org/testnet/authn')
  .put('walletconnect.projectId', 'YOUR_PROJECT_ID')
  .put('app.detail.title', 'Test Harness')
  .put('app.detail.icon', 'https://i.imgur.com/r23Zhvu.png')
  .put('app.detail.description', 'A test harness for FCL')
  .put('app.detail.url', 'https://myapp.com')
  .put('0xFlowToken', '0x7e60df042a9c0868');
```

<h3>Using Flow.json</h3>

よりシンプルに、より柔軟にスマートコントラクトのインポートをスクリプトやトランザクションの中で行う方法は、FCLの`config.load`メソッドを使用する方法です。これは、コントラクトの設定を`flow.json`ファイルから読み込み、あなたのimportシンタックスをクリーンかつ、FCLが、違うネットワークでも正しいコントラクトのアドレスを使う事ができるようにします。`config.load` を使用するには、まず`flow.json` ファイルをインポートし、それをパラメータとして `config.load` に渡す必要があります。
```ruby
import { config } from '@onflow/fcl';
import flowJSON from '../flow.json';

config({
  'flow.network': 'testnet',
  'accessNode.api': 'https://rest-testnet.onflow.org',
  'discovery.wallet': `https://fcl-discovery.onflow.org/testnet/authn`,
}).load({ flowJSON });
```
あなたの`flow.json`がこういうのだったとしましょう:
```ruby
{
  "contracts": {
		"HelloWorld": "cadence/contracts/HelloWorld.cdc"
	}
}
```
で、スクリプトとトランザクションであなたがすべきことはこちらです :
```ruby
import "HelloWorld"
```
FCLはコントラクト名を自動で、使用しているネットワークのコントラクトアドレスに置き換えます。

> 注意：決して秘密鍵を`flow.json`に置かないでください。代わりに、[key/location syntax](https://developers.flow.com/tools/flow-cli/flow.json/security)を使用して、キーを別の git が無視するファイルに分けるべきです。


*Last updated on **Nov 20, 2024** by **Chase Fleming***

翻訳元

https://developers.flow.com/tools/clients/fcl-js/configure-fcl

***
<b>[Previous << Authentication](https://qiita.com/flowcadence/items/07695f36283735c00a71)
</b>

[Flow blockchain / Cadence version1.0ドキュメント](https://qiita.com/flowcadence/items/3073d69c6e9895e68b5a) (How to Configure FCL)

<b>[Next >> Wallet Discovery](https://qiita.com/flowcadence/items/01a1580cb15a359a59ce)</b>