0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Posted at

はじめに

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

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

レスポンシブ・キャンバス・エディタ

まずは、元となるワークブック(キャンバス)を準備します。
今回はこれを使います。
※編集モードにしています。
image.png

画面の右下に注目してください。
image.png

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

ここをクリックして文法パネルを閉じます。
※もう一度クリックすると、開きます。
image.png

ちなみに文法パネルとは、この部分のことです。
image.png

データパネルも閉じます。
image.png

こんな風にプレビューモードで開いたときのように、画面を広く使えるようになります。
image.png

では、いよいよレスポンシブ・キャンバス・エディタを開きます。
image.png

アイコンが並んでいる最上部とキャンバスの間にスライダー・バーが表示されますが、これがレスポンシブ・キャンバス・エディタです。
image.png

画面サイズに応じた設定

スライダをずらして、画面サイズをシミュレートできます。
image.png

利用頻度の高い解像度は、簡単に設定できるようになっています。
モバイルサイズでブレークポイントを追加します。
image.png

こうなりました。
image.png

各ビジュアライゼーションが縦に並ぶようにします。
表ビジュアライゼーションは表示しません。
image.png

折れ線は、マップの下に移動しました。
image.png

タブレットサイズのブレークポイントも追加します。
image.png

さっきとは違う配置にします。
image.png

ブレークポイントの追加をクリックして、直接ブレークポイントの位置を指定できます。
image.png

1800を指定します。
image.png

これまでとは全然違う配置にしてみました。
image.png

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

試してみる

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

responsive.gif

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?