LANG SELRCT

Google Apps Scriptのコードを書く場所  (新規作成: スプレッドシート | スクリプトエディタ

2020年5月30日土曜日

JIRA APIをブラウザでたたきたい


ブラウザでJIRA APIのJQL結果を取得したい場合

JIRAにログインしている状態で以下のようにアクセスすると取得できました。


https://SITENAME.atlassian.net/rest/api/3/search?jql=project=KT&startAt=0&maxResults=100


SITENAMEとjql=のqueryの部分を変えてアクセスすると、その結果が返ってきました。


参考

Search for issues using JQL (GET)

2020年5月29日金曜日

データリストで選択した値と同じラジオボタンを選択したい


このブログ内でデモを作ろうとしたけれど、うまく動かなかったので画像で。

動きがないとわかりにくいけれどこういう感じです。



コード.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する




index.html
<!DOCTYPE html>
<html>
<body>

  <input type="text" list="colors" id="color">
  <datalist id="colors">
    <option value="blue">
    <option value="green">
  </datalist>

  <form id="radios">
    <label><input type="radio" name="radio1" id="blue">blue</label><br>
    <label><input type="radio" name="radio1" id="green">green</label>
  </form>

<script>
document.getElementById("color").onchange = selectRadio;

function selectRadio() {
  var color = document.getElementById("color").value;
  var radios = document.getElementById("radios");
  var labels = radios.getElementsByTagName("label");
  
  for(var i = 0; i < labels.length; i++) {
    if(labels[i].textContent === color) {
      labels[i].click();
    }
  }
}
</script>

</body>
</html>
意訳
 



テキストボックス
テキストボックスにサジェストするリスト
blue
green


formを配置する
blueのラジオボタン
greenのラジオボタン


ここからJavaScript
idが"color"の値が変わったらselectRadioを実行する

この機能がやること
idが"color"の値を取得する
idが"radios"の要素を取得して
その中のlabel要素を取得する

label要素の数だけ繰り返す
label要素のテキストがcolorと同じなら
label要素をクリックする










配列内の複数オブジェクトで特定の値が存在するか知りたい


タイトルで表現するのが難しいのですが

以下のような複数のオブジェクトを含む配列があって

enがLeoのものがあるか true / false で判定したい

var objs = [
  {"en": "Aries", "ja": "おひつじ座"},
  {"en": "Taurus", "ja": "おうし座"},
  {"en": "Gemini", "ja": "ふたご座"},
  {"en": "Cancer", "ja": "かに座"},
  {"en": "Leo", "ja": "しし座"},
  {"en": "Virgo", "ja": "おとめ座"},
  {"en": "Libra", "ja": "てんびん座"},
  {"en": "Scorpius", "ja": "さそり座"},
  {"en": "Sagittarius", "ja": "いて座"},
  {"en": "Capriconus", "ja": "やぎ座"},
  {"en": "Aquarius", "ja": "みずがめ座"},
  {"en": "Pisces", "ja": "うお座"}
]



コード.gs 
var objs = [
  {"en": "Aries", "ja": "おひつじ座"},
  {"en": "Taurus", "ja": "おうし座"},
  {"en": "Gemini", "ja": "ふたご座"},
  {"en": "Cancer", "ja": "かに座"},
  {"en": "Leo", "ja": "しし座"},
  {"en": "Virgo", "ja": "おとめ座"},
  {"en": "Libra", "ja": "てんびん座"},
  {"en": "Scorpius", "ja": "さそり座"},
  {"en": "Sagittarius", "ja": "いて座"},
  {"en": "Capriconus", "ja": "やぎ座"},
  {"en": "Aquarius", "ja": "みずがめ座"},
  {"en": "Pisces", "ja": "うお座"}
]

function myFunction() {
  var value = "Leo";
  var result = hasValue(value);
  Logger.log(result);
}

function hasValue(value) {
  for(var i = 0; i < objs.length; i++) {
    var obj = objs[i];
    if(obj["en"] === value) {
      return true;
    }
  }
  return false;
}

意訳
オブジェクトたちを入れた配列を用意する














この機能がやること
探す値を決めて
hasValueに渡して
結果をログに出す


この機能がやること
objsの要素の数だけ繰り返す
objsの要素をひとつずつ取り出して
valueと同じなら
true返す


途中でtrueを返さなければfalseを返す




実行結果

var value = "Leo" で myFunction()を実行した結果→true


var value = "Cat" にして myFunction()を実行した結果→false


最初に思いついた書き方

hasValueの処理が冗長に感じて、上記コード.gsに書き換えました

コード2.gs
var objs = [
  {"en": "Aries", "ja": "おひつじ座"},
  {"en": "Taurus", "ja": "おうし座"},
  {"en": "Gemini", "ja": "ふたご座"},
  {"en": "Cancer", "ja": "かに座"},
  {"en": "Leo", "ja": "しし座"},
  {"en": "Virgo", "ja": "おとめ座"},
  {"en": "Libra", "ja": "てんびん座"},
  {"en": "Scorpius", "ja": "さそり座"},
  {"en": "Sagittarius", "ja": "いて座"},
  {"en": "Capriconus", "ja": "やぎ座"},
  {"en": "Aquarius", "ja": "みずがめ座"},
  {"en": "Pisces", "ja": "うお座"}
]

function myFunction() {
  var value = "Leo";
  var result = hasValue(value);
  Logger.log(result);
}

function hasValue(value) {
  var result;
  for(var i = 0; i < objs.length; i++) {
    var obj = objs[i];
    if(obj["en"] === value) {
      result = true
      return result;
    } else {
      result = false
    }
  }
  return result
}




2020年5月28日木曜日

Arrayformulaで値が入っている最終行までを対象にしたい



以下のような計算をするシートを作りたくて

今回最終的に作った関数はこのような形です。

=ARRAYFORMULA(countif(B:B,D2:INDIRECT("D"&COUNTA(D2:D))))


STEP1〜8に分解して書いていきます。



STEP1
以下のようにA列に日付の入ったデータがあって



STEP2
B2に7文字目までの年/月を取得するLEFT関数を入れて
=LEFT(A2,7)



STEP3
ARRAYFORMULA関数で以降の行にも反映させる
=ARRAYFORMULA(LEFT(A2:A,7))



ここまでならこれでOK。



問題はここからで


STEP4
D1に年/月の分類をするためにUNIQUE関数を入れて
=unique(B:B)


STEP5
E2に年/月の件数を計算するCOUNTIF関数を入れて
=countif(B:B,D2)


STEP6
ARRAYFORMULA関数で展開すると
E4以降に不要な値が入ってしまう…

=ARRAYFORMULA(countif(B:B,D2:D))


STEP7
これを避けるために
「D列で値が入っている行まで」を範囲指定したい
=ARRAYFORMULA(countif(B:B,D2:D3))


A, B, D列のデータ、行数が変わらなければこれでOK

STEP8
A, B, D列のデータ、行数が変わる場合は
その都度範囲指定をしなくて良いように
INDIRECT関数とCOUNTA関数を入れる
=ARRAYFORMULA(countif(B:B,D2:INDIRECT("D"&COUNTA(D2:D))))

これで今回作りたかった関数は完成しました。


参考

LEFT

ARRAYFORMULA

UNIQUE

COUNTIF

INDIRECT

COUNTA

2020年5月22日金曜日

datalistに一致しない場合にアラートを出したい



input要素とdatalistで入力候補を用意して


リストにない値のときはアラートを出したい


ということを実現するコードを書きました。



コード.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する




index.html
<!DOCTYPE html>
<html>

<body>
  <div id="main">
    <input type="text" id="input_text" list="data_list">
    <datalist id="data_list">
      <option>あめ</option>
      <option>ちょこ</option>
      <option>がむ</option>
    </datalist>
  </div>

<script>
document.getElementById('input_text').onchange = checkDataList;

function checkDataList() {
  var dataList = document.getElementById('data_list');
  var inputValue = document.getElementById('input_text').value;
  var array = [];
  for(var i = 0; i < dataList.options.length; i++) {
    var value = dataList.options[i].value;
    array.push(value);
  }

  if(array.indexOf(inputValue) === -1) {
    alert("リストの中から選択してください");
    document.getElementById('input_text').focus();
  }
}
</script>
</body>
</html>


index.htmlのscript内でやっていること

input_textの値が変わった時にcheckDataListを実行する
  • document.getElementById('input_text').onchange = checkDataList;

checkDataListでやることは
  1. datalistのoptionのvalueを配列に入れて
  2. その配列と入力された値をindexOfで判定して
  3. 見つからない場合は-1が返って来るのでアラートを投げる



参考

<datalist>

2020年5月15日金曜日

長いテキストを折り返さず「…」で表示したい


以下のような表現をしたいときのスタイルをlabel1に書きました。




コード.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する




index.html
<!DOCTYPE html>
<html>
<head>
  <style>
    .label1 {
      border: solid 1px lightgray;
      white-space: nowrap;
      padding: 10px;
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 50vw;
    }
  </style>
</head>
<body>
  <label class="label1">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん</label>
</body>
</html>


参考

display

overflow

white-space

text-overflow


2020年5月9日土曜日

console.logを%cで区切るとスタイルを適用できる


console.logで出力するメッセージを装飾したい場合


この例ではmessageを青色にしています。

ポイント

  • %cで区切った後のテキストに対して、その次の引数でスタイルを設定できる


console.log("Console %cmessage", "color: blue;");



コード.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する




index.html
<!DOCTYPE html>
<html>
<body>
<script>

console.log("Console %cmessage", "color: blue;");

</script>
</body>
</html>



補足


書き方のパターンをいくつか試してみました。


index2.html
<!DOCTYPE html>
<html>
<body>
<script>

consoleStyled();
function consoleStyled() {

  // 一行で書く場合
  console.log("Console %cmessage", "color: white; background-color: blue;");
  
  // 代入する場合
  var color = "color: blue;";
  console.log("Console %cmessage", color);
  
  // 複数を配列で用意してjoinして代入する場合
  var props = [
    "color: white",
    "background-color: blue",
    "padding: 2px",
    "font-size: 15px"
  ];
  var style = props.join("; ");
  console.log("Console %cmessage", style);
 
  // 異なるスタイルを適用する場合はさらに%cで区切って、引数にスタイルを追加する
  console.log("Console %cmessage %cgreen", "color: blue;", "color: green");
}

</script>
</body>
</html>



2020年5月8日金曜日

データポータルで閲覧者がフィルタした結果を共有したい


レポートの閲覧者の操作でフィルタした結果を、リンクで共有することができます。


STEP1
ファイル > レポート設定 を開く


STEP2
「閲覧者のフィルタをレポートのリンクで有効にする」にチェックを入れる


参考

レポートの設定を含むカスタム ブックマーク リンクを作成する
https://support.google.com/datastudio/answer/7664330?hl=ja

データポータルでレポートを作成する最初の一歩


既存のテンプレートを使わず、空のレポートを作成する手順です。

(data source: Google Analytics)


データソースを指定してレポートに追加するところまでをやります。


データポータルのホーム画面
https://datastudio.google.com/u/0/navigation/reporting


STEP1
ホーム画面で空のレポートをクリックします。



STEP2
データソースとして追加したいサービスを選択します。
この例ではGoogleアナリティクスを選択します。


STEP3
アカウント→プロパティ→表示の順で選択して「追加」をクリックします。
Googleアナリティクスを利用していない場合は、Googleスプレッドシートを選択して、テーブル構造のシートを読み込んでみましょう。


STEP4
「レポートに追加」をクリックします。




これでレポートが作成されて表がひとつ配置されました。



このあとは基本的に以下のようなことを決めていきます。
  1. レポートにグラフなどのパーツを追加する
  2. データの何を視覚化するか決める(ディメンション・指標)
  3. どのように視覚化するかグラフや表などを決める
  4. スタイルを決める
  5. 好きなように配置する
  6. 複数ページのレポートを作る
  7. 共有設定を決める

公式ヘルプには4分程の導入動画もあるので見ておきましょう。

データポータルの基本操作
https://support.google.com/datastudio/answer/6283323?hl=ja


Appendix


追加できるグラフなどのパーツは挿入メニューにまとまっています。


視覚化するデータの設定はこのような項目があります。
  • ディメンションでデータの項目のどれを対象にするか決める
  • 数値化する指標を決める
  • 並べ替えやフィルタなどでデータの見せ方を決める


グラフや表はここで変更できます。


グラフや表によって項目は異なりますが、スタイルはこのような項目があります。
  • 背景色や線の色を決める
  • フォントサイズ
  • 中央・左右寄せなどの設定


参考

データポータルへようこそ
https://support.google.com/datastudio/answer/6283323?hl=ja

2020年5月1日金曜日

speechSynthesis.getVoices()で取得した中から特定のvoiceのindexを取得したい


セレクトボックス内の値をクリックした時にそのindexをアラート表示する。

デモ




コード.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する




index.html
<!DOCTYPE html>
<html>
<body>
<select id="voiceSelect"></select>

<script>
document.getElementById("voiceSelect").onclick = getVoiceIndex

speechSynthesis.onvoiceschanged = getVoices;

var voices;
function getVoices() {
  voices = speechSynthesis.getVoices();
  var select = document.getElementById("voiceSelect");
  var values = "";
  for(var i = 0; i < voices.length ; i++) {
    var option = document.createElement('option');
    var lang = voices[i].lang;
    var value = voices[i].name
    option.textContent = value;
    option.setAttribute('data-lang', voices[i].lang);
    option.setAttribute('data-name', voices[i].name);
    select.appendChild(option);
  }
  select.setAttribute('size', 12);
}

function getVoiceIndex() {
  var name = document.getElementById("voiceSelect").value;
  var voiceIndex;
  for(var i = 0; i < voices.length; i++) {
    if(voices[i]["name"] === name) {
      voiceIndex = i;
      break;
    }
  }
  alert(voiceIndex);
}

</script>
</body>
</html>



最新の投稿

Googleドライブ内のフォルダ名とidを取得したい

MISSION Googleドライブ内のフォルダ名とidを取得する 以下のコード.gsでfolderIdを指定してgetFilesInFolder()を実行すると 指定したフォルダ内のファイル名とidがログに出力されます。 コード.gs function getF...