custom blocks translation for ja (#737)

* pick up from #664

* translate #664

* improve title

from review comment: vuejs/vue-loader#737 (comment)

Author: kazupon

docs/ja/configurations/custom-blocks.md

@@ -4,9 +4,9 @@
 
 `*.vue` ファイル内にカスタム言語ブロックを定義することが出来ます。カスタムブロックの内容は `vue-loader` のオブジェクトで指定された loader によって処理され、次にコンポーネントモジュールによって要求されます。この設定は `lang` 属性の代わりにタグ名を使用する点をのぞいて[高度な loader の設定](../configurations/advanced.md)に記載されたものと似ています。
 
-もしカスタムブロックにマッチする loader を見つけたら、それは処理されます。でなければそのカスタムブロックは単に無視されます。
+もしカスタムブロックにマッチする loader を見つけたら、それは処理されます。でなければそのカスタムブロックは単に無視されます。加えて、見つかった loader が関数を返す場合は、その関数は `*.vue` ファイルのコンポーネントをパラメータとして呼び出します。
 
-## 例
+## 単一ドキュメントファイルの例
 
 全ての `<docs>` カスタムブロックを一つのドキュメントファイルに展開する例を示します：
 
@@ -65,3 +65,69 @@ module.exports = {
   ]
 }
 ```
+
+## 実行時に利用可能なドキュメント
+
+`<docs>`カスタムブロックをコンポーネントに注入して実行時に利用できるようにする例です。
+
+#### docs-loader.js 
+
+カスタムブロックコンテンツを注入するためには、カスタム loader が必要です:
+
+``` js
+module.exports = function (source, map) {
+  this.callback(null, 'module.exports = function(Component) {Component.options.__docs = ' +
+    JSON.stringify(source) +
+    '}', map)
+}
+```
+
+#### webpack.config.js
+
+次に、`<docs>` カスタムブロック用のカスタム loader を使用するように webpack を設定します。
+
+``` js
+const docsLoader = require.resolve('./custom-loaders/docs-loader.js')
+
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue',
+        options: {
+          loaders: {
+            'docs': docsLoader
+          }
+        }
+      }
+    ]
+  }
+}
+```
+
+#### component.vue
+
+実行時にインポートされたコンポーネントの `<docs>` ブロックの内容にアクセスできるようになりました。
+
+``` html
+<template>
+  <div>
+    <component-b />
+    <p>{{ docs }}</p>
+  </div>
+</template>
+
+<script>
+import componentB from 'componentB';
+
+export default = {
+  data () {
+    return {
+      docs: componentB.__docs
+    }
+  },
+  components: {componentB}
+}
+</script>
+```

docs/ja/start/spec.md

@@ -94,6 +94,13 @@ export default {
 <style src="todomvc-app-css/index.css">
 ```
 
+`src` によるインポートはカスタムブロックでも動作します、例:
+
+``` html
+<unit-test src="./unit-test.js">
+</unit-test>
+```
+
 ### シンタックスハイライト
 
 現在それらはシンタクスハイライトをサポートしているのは、[Sublime Text](https://github.com/vuejs/vue-syntax-highlight), [Atom](https://atom.io/packages/language-vue), [Vim](https://github.com/posva/vim-vue), [Visual Studio Code](https://marketplace.visualstudio.com/items/liuji-jim.vue), [Brackets](https://github.com/pandao/brackets-vue), [JetBrains products](https://plugins.jetbrains.com/plugin/8057) (WebStorm, PhpStorm, etc). 他のエディタ/IDEへのコントリビュートは高く評価されます！もし Vue コンポーネント内でプリプロセッサを使用していない場合は、エディタで `*.vue` ファイルを HTML として扱うことが出来ます。