Storyblokのdocs翻訳チャレンジその3！！！

# 第三段！！！！

Creating a Storyblok field type pluginの翻訳にチャレンジ！

# Storyblokのフィールドタイププラグインを作る

私たちは顧客自身がエディタを、カラーピッカーやGoogleマップロケーションセレクタなどのカスタムフィールドを使って拡張出来るように、Storyblokの堅牢でフレキシブルなプラグインシステムを作りました。これは、基本的にはVue.js 2.5.2コンポーネントで、`window.Storyblok.plugin`変数の幾つかのヘルパーによって拡張されています。

### これが一般的なフィールドタイププラグインです:

![bildschirmfoto.jpg](https://qiita-image-store.s3.amazonaws.com/0/157765/c072d35d-42ec-7c25-8c76-dc681c0b1747.jpeg)


## フィールドタイププラグインの開発方法

Storyblok内部に、ES6 javascript製のフィールドタイププラグインを作ることが出来ます。上部左端の角にあるサブメニューにオフィシャル/パーソナルな`Plugins`という項目があるはずです。

![plugin.png](https://qiita-image-store.s3.amazonaws.com/0/157765/6b1f9948-e89a-5b43-a073-53bd47d54624.png)


### 存在するVue.jsプロパティ

フィールドタイプに渡されるプロパティは:

* `option`: スキーマのオプション配列からオプションをパースします。
* `schema`: スキーマのオプションのオブジェクト
* `uid`: 親コンポーネントのユニークID
* `spaceId`: 現在のspaceのID
* `storyId`: 現在のstoryのID
* `model`: フィールドタイプの現在の値
* `api`: デリバリAPIを呼ぶAPI関数
* `token`: 現在のスペースのDraftトークン

### メソッド

* `initWith`: プラグインの初期データの定義に使われるべき。
* `pluginCreated`: プラグインの初期化する場合に使われるべき。例えば、Storyblokや外部ソースのデータをロードする場合や、WYSIWYGエディタを初期化してロードする場合など。

### ヘルパー

通常使われるヘルパ関数は`$sb`変数内部に格納されています。

### $sb.getScript(scriptName, loadedCallback)

このメソッドで外部スクリプトが読み込まれます。

```javascript
this.$sb.getScript('https://use.fontawesome.com/releases/v5.0.9/js/all.js', () => {})
```

### プロキシコンポーネント

プロキシコンポーネントはマネジメントAPIにアクセスするための要件をユーザーが入力するカスタムフィールドタイプに使えるVue.jsコンポーネントです。

**アセットセレクタ**

プロキシコンポーネントというのは、ユーザーがイメージを選択してイメージURLをカスタムフィールドタイプのアトリビュートにセットするというものです。

フィールドアトリビュートには、モデルアトリビュートのキーである必要があります。以下に例を示します:

```html
<sb-asset-selector :uid="uid" field="your_model_attribute">
</sb-asset-selector>
```

**これ以外のプロキシコンポーネント**

プロキシコンポーネントについて自分のアイデアがありますか？もしそうなのであれば、私たちとライブチャットで話しましょう。


### Storyblok APIの呼び方

フィールドタイプでは、StoryblokのデリバリAPIへアクセスするため`this.api`という書き方が使えます。例えば、Storyのセレクトボックスを作るのに以下のような書き方ができます。

```javascript
this.api.get(`cdn/stories`)
.then((res) => {
  this.stories = res.data.stories
})
```

### オプションの渡し方

設定可能なオプションをスキーマ定義にて渡すには、`input`ボックスのオプションキーを定義します。この値は、`this.options`オブジェクトに格納されます。

### フィールドタイププラグインの使い方

プラグインを作成したら、あなたのコンポーネントのスキーマの設定画面でその型を定義することが出来るようになります。型として`Custom Plugins`を選択し、作ったプラグインを探してください。

### ローカル開発

もしあなたがもう少し複雑なプラグインを作りたければ、プラグイン開発のためのローカルの開発環境とあなたの好きなエディタで開発するという選択肢もあります。これを使えば、コードを複数のファイルで管理し、他のプラグインを読み込むといったことができます。

Markus Oberlehner氏のブログに、プラグインの開発に関する素晴らしいチュートリアルがあります。

[https://markus.oberlehner.net/blog/building-a-custom-storyblok-field-type-plugin-with-vue/](https://markus.oberlehner.net/blog/building-a-custom-storyblok-field-type-plugin-with-vue/)

#### ローカルでの開発のやりかた

1. フィールドタイプのリポジトリをコピーし、開発用サーバを建てます。

```bash
git clone https://github.com/storyblok/storyblok-fieldtype
cd storyblok-fieldtype
npm install
npm run dev
```  
`http://localhost:8080`に建ちます。
2. 次に、Storyblok appのURLを、あなたのローカル環境が`http`で動いているのに合わせて、`https://app.storyblok.com`から`http://app.storyblok.com`に変更する必要があります。
3. `Plugin.vue`を開き`initWith`メソッドにある`plugin name`を作りたいプラグインの名前に変更して下さい。
4. これで`Enable local dev mode`チェックボックスがクリック出来るようになるはずです。これはローカル環境にフィールドタイププレビューをロードし、プラグイン開発をスタートするためのものです。
5. プラグインの開発が終了したら、`npm run build`を実行し`src/vendor/export.js`ファイルにかるコンテンツをStoryblok appのエディタのテキストフィールドにコピーし`publish`ボタンをクリックしてください。

https://www.storyblok.com/docs/Guides/Creating-a-field-type-plugin