Blank Brick で面白いもの作ってみた

# はじめに
Domo buddiesの勉強会の資料を読み漁っていると、Blank Brickという面白いものがあったので、初心者にみなさんが、使ってみる為のとっかかりになる記事を書いてみた。

# 対象者
Blank Brickを使ってみたい人。
DOMOのダッシュボードに、「ようこそ●●さん」とおもてなしの心で、出迎えたい人
Googleっぽい文字入力だけの検索を付けたい人
ちょっとかっこいいメニューを付けたい人

# Blank Brickってなあに？
なにやら、HTMLやJavascriptを使って、複雑なカードを作れるもの見たいです。

https://www.domo.com/jp/business-apps/domo-bricks


# ①名前を表示するカード
Domo buddiesのインスタンスに入ってみると、「お疲れ様です。●●さん。」と画面に表示されています。

これどうするんだろう？！って思ったので、編集して、のぞいてみた。チラッ|ू•ω•)

そういうことね！

では、作り方を書いてみよう！
最初はわからなくてもやってみればいいんだ！

## Blank Brickを配置する。
1.まずはBlank Brickを配置するダッシュボードを編集しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3798145/60415927-0954-aade-f205-ff812e5297bf.png)

2.右のメニューから、「APP」をドラッグ＆％ドロップで配置します！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3798145/995deed3-c55d-feba-6d66-c5224902bbd8.png)

3.「Appを選択する」画面が出るので、「Blank Brick」を入力して、
結果をクリック！そして右下の【取得】を押すんだ！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3798145/9573e4f9-601b-3485-4506-2a935d44765a.png)

4.白いものが張り付くので、「カードを編集する」をしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3798145/8c915864-7420-a0a2-5a79-552f24aee825.png)

5.こんな画面が出ます！
右側に、JAVASCRIPT、HTML、CSSを入力するところがあります。
実行って押すと、入力したプログラムを動き、左の白いところに表示されます。

ちなみに、それぞれはこんなことをします。
・JAVASCRIPT：動くプログラムを書くところ
・HTML：画面の骨格を書くところ
・CSS：画面の色とか、ごぎれいにするところ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3798145/02d5ea83-633a-f57d-8837-e0c2dcbd8388.png)

## HTMLやJavascriptを貼り付ける。
あとは、はりつけるのみ！わかるやつは変更するべし！
※元あるやつは、よくわからんので、消すのみ！

```JAVASCRIPT:JAVASCRIPT
function myName(){
  document.getElementById("l1").innerHTML = "ようこそ、" + domo.env.userName.replace('+',' ') + "さん！";
}
myName();
```

```HTML:HTML
<div class = "domo"><div id="l1"></div></div>

```

```CSS:CSS
.domo {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
```

## 完成！
こんな感じで名前を表示することができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3798145/db8a4e8c-e9b1-af31-9188-4e06fe047ed5.png)


# ②オリジナルのメニューを出してみる。
これも、Domo buddiesのインスタンスにあったので、パクってみた！
※Blank Brickを配置するのは、上をみてね。

## HTMLやJavascriptを貼り付ける。
とにかく貼り付けてみるんだ！
JAVASCRIPTはなし！

```HTML:HTML
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="navbar">
  <a href="javascript:domo.navigate('https://www.yahoo.co.jp/', false)">Yahoo</a>
  <div class="dropdown">
    <button class="dropbtn">検索
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="javascript:domo.navigate('https://www.google.co.jp/', true)">Google</a>
      <a href="javascript:domo.navigate('https://www.bing.com/' , true)">Bing</a>
    </div>
  </div> 

  <div class="dropdown">
    <button class="dropbtn">ショッピング
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="javascript:domo.navigate('https://www.amazon.co.jp/', true)">amazon</a>
      <a href="javascript:domo.navigate('https://www.rakuten.co.jp/', true)">楽天</a>
    </div>
  </div> 

</div>
```

```CSS:CSS
h1, p {
  margin:20px;
}

body {
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  background-color:#D9EBFD;
 
}

.navbar {
  overflow: hidden;
  background-color: #99ccee;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover,
.dropdown:hover .dropbtn {
  background-color: #31689B;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #FFF8ED;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

```

## 完成！
メニューができます！
※色がDomo色です！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3798145/52329450-1a1f-4efe-a676-dbd6d0f05949.png)


# ③オリジナルの検索フィルター
フィルタを作っていて、検索はあるんだけど、この文字を含むような検索がぱっと作れなかった。
※本当はあるかもしれないですが。。。。
なので、作ってみた！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3798145/6c9ff270-f044-ff37-0bb1-ef4482830b6e.png)

Blank Brickを配置するのは、そのままで

## HTMLやJavascriptを貼り付ける。
ここでは、貼り付けるだけではなく、一つだけ注意事項がある。

【検索したい項目名】だけ、自分のDataSet内にある項目に変更してほしいです。
【検索したい項目名】として置くので、置き換えてね！

```JAVASCRIPT:JAVASCRIPT
function buttonClick(){
  let stext = document.getElementById('search');
  domo.filterContainer([{
    column: '【検索したい項目名】',
    operator: 'LIKE',
    values: ['%' + stext.value + '%'],
    dataType: 'STRING'
  }]);
}

function buttonClick2(){
  domo.filterContainer([]);
  let stext = document.getElementById('search');
  stext.value = '';
}
```

```HTML:HTML
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>

<label><p>フィルタ</p></label>

<p><input type="text" id="search" class="radius">
<input type="button" value="検索" id="sbutton" onclick="buttonClick()">
<input type="button" value="クリア" id="sbutton2" onclick="buttonClick2()"></p>

```

```CSS:CSS
.radius {
    font-size: 130%;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
    border: 1px solid rgba(0, 0, 0, 0.15);
}
```

## 完成！
こんな感じで、入力した文字をどこかに含むデータを、絞り込めます。
クリアボタンもつけてみました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3798145/e1a0c9ba-4a0f-ff46-7fb3-d56290f4d346.png)


# 最後に
最初にも言ったけど、一回やってみたらいいんだ！貼り付けたら動くから！

あとで、「なんでこんな動いているんだろう」とか「ここ変更したら、良い感じで動いた！」とか、いろいろ試してみて、オリジナルを作っていきましょうね。