draw.ioの初期設定手順

社内プロジェクトで設計書のテンプレートを作ることになり、画面レイアウトのモックアップを手軽に作成できるサービスを探していたところ、draw.ioを見つけました。
GitHubとの相性もよさそうなので、布教用に使用手順を残します。

# draw.ioとは
[draw.io](https://about.draw.io/)はブラウザ上で手軽にＥＲ図や画面レイアウトを作成・シェアできるWebサービスです。

### 特徴
- **無料**<br>
全ての機能が完全無料で使用可能です。
- **ユーザー登録不要**<br>
作成ファイルの保存先をGoogleDrive、OneDrive、ローカル環境のいずれかから選択するだけですぐに使用できます。
- **日本語に対応**<br>
全ての項目ではありませんが、日本語表示に対応しています。
- **直感的な操作**<br>
様々な図やテンプレートが用意され、ドラッグ＆ドロップで配置・調整できます。
- **パーツ単位でHtmlの直接編集が可能**<br>
例えばテーブルレイアウトを変更する際は、画面上からだけでなく編集したhtml（この場合は`<table>`タグとその中身）を直接貼り付けることでも思い通りの列・行数、styleの適用が可能です。
- **GitHubに直接コミットできる**<br>
編集した画像をGitHubにコミットできる為、レイアウトのメンテナンスの手間が減ります。もちろんGoogleDriveやローカルへのエクスポートも可能です。

# 利用方法
### 1. 以下のサイトにアクセスします。
[draw.io](https://about.draw.io/)

このような画面が表示されます。
<img width="944" alt="キャプチャ.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403060/dff2936b-f598-3682-52b3-9411472236d8.png">

### 2. 「Start using draw.io」をクリック
少し下へスクロールするとリンクボタンが出てくるので、それをクリック。
<img width="890" alt="キャプチャ2.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403060/b2dc1c5c-ddba-d22e-beff-6eedf4f3c27f.png">

### 3. ファイルの保存先を選択
GoogleDrive、OneDrive、デバイス（ローカル環境）のいずれかに保存先を設定します。
ここではGoogleDriveを選択しました。<br>
また、保存先によってはGoogleアカウントへの認証を求められるので、適宜入力してください。

<img width="275" alt="キャプチャ3.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403060/79f94540-f33f-e9f2-7725-8ec17502e55b.png">

### 4. 新規ファイルの作成
「新規ファイルを作成する」を選択します。

<img width="307" alt="キャプチャ4.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403060/5cec5d50-7243-114b-cbde-0fcbca57a740.png">

### 5. テンプレートの選択
様々なテンプレートが用意されています。

<img width="518" alt="キャプチャ6.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403060/97293e17-a3a3-6a8e-c6e8-5b7546775042.png">
<img width="516" alt="キャプチャ7.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403060/89b72833-fe40-61f7-37ca-dcf92aee8bc9.png">
<img width="517" alt="キャプチャ8.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403060/1165fa14-cedd-f134-1ae7-04041991b38c.png">
<img width="516" alt="キャプチャ10.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403060/6fb77722-dfa9-aaf1-3cd9-49defffbf015.png">


</br></br>
ここでは以下の空白のテンプレートを選択しました。
ダイアグラム名（hoge.drawio）を入力し、「作成する」を選択します。

<img width="516" alt="キャプチャ9.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403060/1533ef04-eb36-4e6a-b7a1-bab1f77ea069.png">

### 6. 保存先フォルダの選択
デフォルトはルートフォルダが設定されています。
ここでは保存先を変更したいので、「No, pick folder...」を選択します。

<img width="306" alt="キャプチャ11.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403060/deeb85e9-f76d-93c3-caf5-a09da3526d3a.png">

GoogleDriveのフォルダ選択画面が表示されるので、保存先のフォルダを選択し、画面左下の「選択」ボタンを押下します。
<img width="600" alt="キャプチャ12.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403060/edd14fdd-f10e-775e-59d1-1ead8b84ab87.png">

### 7. 編集画面の表示
空白のテンプレートが表示されます。<br>

<img width="960" alt="キャプチャ13.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403060/070c91c5-99eb-2908-7508-db09d30369a0.png">

グリッド表示されている部分が編集画面です。
Ctrl + マウスホイール等で拡大・縮小可能なので、作業時には適宜調整してください。

### 8. ファイルのエクスポート
作成したファイルを様々な形式で任意の場所へエクスポートできます。

1. ツールバーの「ファイル」＞「形式を指定してエクスポート」を選択。
<img width="500" alt="キャプチャ15.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403060/80b15a50-3262-a293-4777-5a1157f2776d.png">

2. 保存先を選択（ここではデバイスを選択しました）
<img width="352" alt="キャプチャ17.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403060/1c39f78e-41d9-334d-5ae4-bf90ad52b6b6.png">
<br>
以下のようにローカルにエクスポートできました。
<img width="336" alt="キャプチャ18.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403060/be73e735-d231-9fb4-4aa6-c60f4020b30e.png">

### 9. 初期設定
最後に、編集前の初期設定だけ済ませてしまいます。

以下の画像の右上と右下を参照してください。

<img width="960" alt="キャプチャ14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403060/cb289d45-a81a-ae56-17a7-182d8dc29c0f.png">

■**言語設定**<br>
現在の画面表示はおそらく英語になっていると思います。
右上の地球マークをクリックし、「日本語」を選択することで画面表示を日本語化することができます。

■**画面サイズ設定**<br>
右下の用紙サイズから編集画面のサイズ、横向き・縦向きを変更できます。
もし画面上で設置したテキストボックス等がグリッド表示部分を超えた場合、自動的にページ単位で編集画面が拡張されていきます。

以上になります。お疲れ様でした。