contentdraw.ioの初期設定手順Draw.io社内プロジェクトで設計書のテンプレートを作ることになり、画面レイアウトのモックアップを手軽に作成できるサービスを探していたところ、draw.ioを見つけました。GitHubとの相性もよさそうなので、布教用に使用手順を残します。draw.ioとはdraw.ioはブラウザ上で手軽にER図や画面レイアウトを作成・シェアできるWebサービスです。全ての機能が完全無料で使用可能です。作成ファイルの保存先をGoogleDrive、OneDrive、ローカル環境のいずれかから選択するだけですぐに使用できます。全ての項目ではありませんが、日本語表示に対応しています。様々な図やテンプレートが用意され、ドラッグ&ドロップで配置・調整できます。テーブルレイアウトを変更する際は、画面上からだけでなく編集したhtml(この場合は<table>タグとその中身)を直接貼り付けることでも思い通りの列・行数、styleの適用が可能です。GitHubに直接コミットできる編集した画像をGitHubにコミットできる為、レイアウトのメンテナンスの手間が減ります。GoogleDriveやローカルへのエクスポートも可能です。以下のサイトにアクセスします。draw.ioこのような画面が表示されます。draw.io」をクリック少し下へスクロールするとリンクボタンが出てくるので、それをクリック。ファイルの保存先を選択GoogleDrive、OneDrive、デバイス(ローカル環境)のいずれかに保存先を設定します。ここではGoogleDriveを選択しました。保存先によってはGoogleアカウントへの認証を求められるので、適宜入力してください。「新規ファイルを作成する」を選択します。様々なテンプレートが用意されています。ここでは以下の空白のテンプレートを選択しました。ダイアグラム名(hoge.drawio)を入力し、「作成する」を選択します。保存先フォルダの選択デフォルトはルートフォルダが設定されています。folder...」を選択します。GoogleDriveのフォルダ選択画面が表示されるので、保存先のフォルダを選択し、画面左下の「選択」ボタンを押下します。空白のテンプレートが表示されます。グリッド表示されている部分が編集画面です。マウスホイール等で拡大・縮小可能なので、作業時には適宜調整してください。ファイルのエクスポート作成したファイルを様々な形式で任意の場所へエクスポートできます。ツールバーの「ファイル」>「形式を指定してエクスポート」を選択。保存先を選択(ここではデバイスを選択しました)以下のようにローカルにエクスポートできました。最後に、編集前の初期設定だけ済ませてしまいます。画面表示はおそらく英語になっていると思います。右上の地球マークをクリックし、「日本語」を選択することで画面表示を日本語化することができます。右下の用紙サイズから編集画面のサイズ、横向き・縦向きを変更できます。画面上で設置したテキストボックス等がグリッド表示部分を超えた場合、自動的にページ単位で編集画面が拡張されていきます。