はじめに
Domo buddiesの勉強会の資料を読み漁っていると、Blank Brickという面白いものがあったので、初心者にみなさんが、使ってみる為のとっかかりになる記事を書いてみた。
対象者
Blank Brickを使ってみたい人。
DOMOのダッシュボードに、「ようこそ●●さん」とおもてなしの心で、出迎えたい人
Googleっぽい文字入力だけの検索を付けたい人
ちょっとかっこいいメニューを付けたい人
Blank Brickってなあに？
なにやら、HTMLやJavascriptを使って、複雑なカードを作れるもの見たいです。
①名前を表示するカード
Domo buddiesのインスタンスに入ってみると、「お疲れ様です。●●さん。」と画面に表示されています。
これどうするんだろう？！って思ったので、編集して、のぞいてみた。チラッ|ू•ω•)
そういうことね！
では、作り方を書いてみよう！
最初はわからなくてもやってみればいいんだ！
Blank Brickを配置する。
1.まずはBlank Brickを配置するダッシュボードを編集しましょう。
2.右のメニューから、「APP」をドラッグ＆％ドロップで配置します！
3.「Appを選択する」画面が出るので、「Blank Brick」を入力して、
結果をクリック！そして右下の【取得】を押すんだ！
4.白いものが張り付くので、「カードを編集する」をしましょう。
5.こんな画面が出ます！
右側に、JAVASCRIPT、HTML、CSSを入力するところがあります。
実行って押すと、入力したプログラムを動き、左の白いところに表示されます。
ちなみに、それぞれはこんなことをします。
・JAVASCRIPT：動くプログラムを書くところ
・HTML：画面の骨格を書くところ
・CSS：画面の色とか、ごぎれいにするところ
HTMLやJavascriptを貼り付ける。
あとは、はりつけるのみ！わかるやつは変更するべし！
※元あるやつは、よくわからんので、消すのみ！
function myName(){
document.getElementById("l1").innerHTML = "ようこそ、" + domo.env.userName.replace('+',' ') + "さん！";
}
myName();
<div class = "domo"><div id="l1"></div></div>
.domo {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
完成！
こんな感じで名前を表示することができます。
②オリジナルのメニューを出してみる。
これも、Domo buddiesのインスタンスにあったので、パクってみた！
※Blank Brickを配置するのは、上をみてね。
HTMLやJavascriptを貼り付ける。
とにかく貼り付けてみるんだ！
JAVASCRIPTはなし！
<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>
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色です！
③オリジナルの検索フィルター
フィルタを作っていて、検索はあるんだけど、この文字を含むような検索がぱっと作れなかった。
※本当はあるかもしれないですが。。。。
なので、作ってみた！
Blank Brickを配置するのは、そのままで
HTMLやJavascriptを貼り付ける。
ここでは、貼り付けるだけではなく、一つだけ注意事項がある。
【検索したい項目名】だけ、自分のDataSet内にある項目に変更してほしいです。
【検索したい項目名】として置くので、置き換えてね！
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 = '';
}
<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>
.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);
}
完成！
こんな感じで、入力した文字をどこかに含むデータを、絞り込めます。
クリアボタンもつけてみました。
最後に
最初にも言ったけど、一回やってみたらいいんだ！貼り付けたら動くから！
あとで、「なんでこんな動いているんだろう」とか「ここ変更したら、良い感じで動いた！」とか、いろいろ試してみて、オリジナルを作っていきましょうね。