画面サイズに応じてOACワークブックのレイアウトを変更する

# はじめに
OAC（**Oracle Analytics Cloud**）のワークブックへアクセスするデバイスとして、何を使用されるケースが多いでしょうか？
大抵の場合、16:9の横長の画面を前提にワークブック（キャンバス）をデザインされることが多いと思います。
ほとんどのケースでは、それで問題ないと思いますが、モバイルデバイスからのアクセスが想定されるワークブックの場合だと横長では使い勝手が悪いこともあります。
ただ、同じ内容のキャンバスをPC用とスマホ用で2種類作るのもメンテナンスが面倒そうです。

そこで、キャンバスを表示する画面サイズに応じて、レイアウトの設定を変更する方法を紹介します。

# レスポンシブ・キャンバス・エディタ
まずは、元となるワークブック（キャンバス）を準備します。
今回はこれを使います。
※編集モードにしています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342206/e9cd6123-e21d-5df8-f56d-27f338492dd9.png)

画面の右下に注目してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342206/c8c3b876-9056-1a25-bc09-f9b151848fdc.png)

アイコンが並んでいますが、画面レイアウトの設定をしやすくするために、文法パネルとデータパネルは閉じておきます。

ここをクリックして文法パネルを閉じます。
※もう一度クリックすると、開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342206/4f4c275f-240c-f29c-1f4f-faccd7d76fa3.png)

ちなみに文法パネルとは、この部分のことです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342206/4d80e791-e096-4067-5444-00ee9d248b63.png)

データパネルも閉じます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342206/8e0386bc-6fda-8037-dc93-c358499ccf11.png)

こんな風にプレビューモードで開いたときのように、画面を広く使えるようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342206/2ae4503d-cfe0-6686-63c0-18e285c14d3a.png)

では、いよいよレスポンシブ・キャンバス・エディタを開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342206/887065e4-9a07-95b1-f238-4f67f5c16bb6.png)

アイコンが並んでいる最上部とキャンバスの間にスライダー・バーが表示されますが、これがレスポンシブ・キャンバス・エディタです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342206/fa100131-893b-ce33-3b0d-c354115fd10c.png)

# 画面サイズに応じた設定
スライダをずらして、画面サイズをシミュレートできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342206/5af17f4a-a8db-6722-b84f-db0fa4e38866.png)

利用頻度の高い解像度は、簡単に設定できるようになっています。
モバイルサイズでブレークポイントを追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342206/9140dff0-f2f3-dbc3-ac3d-ae250d2ed10d.png)

こうなりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342206/e2ddd0cd-2830-1887-d193-bcb52db58033.png)

各ビジュアライゼーションが縦に並ぶようにします。
表ビジュアライゼーションは表示しません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342206/fee34021-88ae-7e07-cb03-1086f0cbd982.png)

折れ線は、マップの下に移動しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342206/5b4fd8f2-0608-31c6-74b5-4322f1616682.png)

タブレットサイズのブレークポイントも追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342206/70a9e4c1-e760-1ba6-e23e-e75bf0f6baf0.png)

さっきとは違う配置にします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342206/09af20d6-e491-263e-3dfb-d793b46f5111.png)

ブレークポイントの追加をクリックして、直接ブレークポイントの位置を指定できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342206/e67be521-fda6-e5c9-dbdb-bbbebc9b9778.png)

1800を指定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342206/22a201ed-aacd-a0f1-c269-575c3de20ef6.png)

これまでとは全然違う配置にしてみました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342206/05a9c217-efb0-384c-9f66-7d5b234476cf.png)

ワークブックを上書き保存します。

# 試してみる
ブラウザのウィンドウの幅を変化させて、キャンバスのレイアウトがどのように変わるかを試してみてください。
なお、横幅が1800ピクセルを超えるとデフォルトの配置になります。

![responsive.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342206/26aa7c70-e418-1cc2-b130-0e017c69a7cd.gif)