use stackblitz

docs/README.md

@@ -5,7 +5,7 @@
 これからこのハンズオンで作成するのは次のようなWebアプリです。
 
 <iframe
-  src="https://codesandbox.io/embed/github/kou029w/hasura-rest-hands-on/tree/main/frontend?codemirror=1&hidenavigation=1&view=preview&module=/src/App.vue"
+  src="https://stackblitz.com/github/kou029w/hasura-rest-hands-on/tree/main/frontend?embed=1&view=preview&terminal=dev&file=src/App.vue"
   style="
     width: 100%;
     height: 500px;
@@ -14,14 +14,13 @@
     overflow: hidden;
   "
   title="vue3-hasura-rest"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
 ></iframe>
 
 構成としては下記の通りです。
 
 - [Hasura Cloud](https://cloud.hasura.io/) - すぐに利用可能なHasuraの環境
 - [Heroku Postgres](https://jp.heroku.com/postgres) - すぐに利用可能なデータベース
-- [CodeSandbox](https://codesandbox.io/) (あるいは、[StackBlitz](https://stackblitz.com/)) - フロントエンドのオンライン開発環境
+- [StackBlitz](https://stackblitz.com/) (あるいは、[CodeSandbox](https://codesandbox.io/)) - フロントエンドのオンライン開発環境
 - [Vue 3](https://vuejs.org/) - プログレッシブWebフレームワーク
 - [Quill](https://quilljs.com/) - リッチテキストエディター
 

docs/create-vue-app.md

@@ -1,7 +1,7 @@
 # Vueアプリケーションの作成
 
+[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/fork/github/kou029w/hasura-rest-hands-on/tree/main/frontend?terminal=dev&file=src/App.vue)
 [![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/kou029w/hasura-rest-hands-on/tree/main/frontend?file=/src/App.vue)
-[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/kou029w/hasura-rest-hands-on/tree/main/frontend?terminal=dev&file=src/App.vue)
 
 いずれかのリンクにアクセスし、Vueアプリケーションを作成します。
 
@@ -10,7 +10,7 @@
 {{#include ../frontend/src/App.vue}}
 ```
 
-ローカル環境で作成する場合は、CodeSandboxにアクセスし、左の[Files]パネルから[↓ (Export to Zip)]ボタンを押すと、ソースコード一式をダウンロードできます。ダウンロードしたZIPファイルを展開後、`npm install` コマンドなどで必要なパッケージを導入することで同様にVueアプリケーションを作成できます。
+ローカル環境で作成する場合は、StackBlitzにアクセスし、左の[Project]パネルから[↓ (Download Project)]ボタンを押すと、ソースコード一式をダウンロードできます。ダウンロードしたZIPファイルを展開後、`npm install` コマンドなどで必要なパッケージを導入することで同様にVueアプリケーションを作成できます。
 
 ソースコードの中には、HasuraのREST APIのエンドポイントURLが含まれます。そのURLに含まれるドメイン名の部分の `memo-demo` は、Hasura Cloudプロジェクト名です。プロジェクトによって異なるので、自分の作成したプロジェクトに合わせて書き換えましょう。