LANG SELRCT

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

2020年10月25日日曜日

Pixel 5でSuicaが使えないときはGoogle PayでSuicaを有効にしてみる


Pixel 5への機種変でSuicaが使えない人向けに書きました。



MISSION
Pixel 5でSuicaを使えるようにする


SOLUTION
  1. 旧端末で機種変更の設定を行う
  2. NFCをオンにする
  3. Google PayでSuicaを有効にする



PROBLEMS

以前、Pixel 3aに機種変更したときのやり方だけでは使えなかった。
これだけではだめらしい↓
モバイルSuicaを新機種に移行したい
Pixel 3aでモバイルSuicaが反応しなくてNFCをONにした


「Pixel5 Suica」でネット検索してみると再起動で解決することがあるらしい。

けれど、手元の端末では再起動しても解決しなかった。

それ以上の情報がすぐに見つからなかったので
端末の設定を探って解決方法を見つけました。



HOW TO

STEP1
歯車アイコンを押して設定を開きます。


STEP2
接続済みのデバイスを押します。


STEP3
接続の設定を押します。


STEP4
NFCを押します。


STEP5
NFCの右側が青丸になっていることを確認します。
(押すと切り替えられる→青丸ならONでグレーならOFF)


STEP6
非接触型決済を押します。


STEP7
お支払いのデフォルトアプリを押します。


STEP8
Google PayとWeChatしか選択肢がない。
(ここは各自の環境によるのかもしれない)
ここでSuicaがないので決済できないと解釈しました。
なのでGoogle PayとSuicaをつなげたら解決するかも。


STEP9
ホーム画面で下から上に指を動かして
アプリの一覧を開き
Play ストアを押します。


STEP10
Google Payで検索して「開く」を押します。
(インストールされていなければインストールしてから)


STEP11
Suicaを選択して
同意するを押します。


STEP12
「使ってみる」を押します。


STEP13
おサイフケータイ アプリにアクセスを許可します。
下にスクロールして許可ボタンを押します。


STEP14
利用規約に同意して「Googleでログイン」を押します。


手元のPixel 5ではこれにてSuicaが使えるようになりました。



参考

モバイルSuicaトップ > Android端末をご利用のお客さま > Google Pay
https://www.jreast.co.jp/mobilesuica/googlepay/

モバイルSuicaを利用した決済ができない
https://support.google.com/pixelphone/thread/77218876?hl=ja

Pixel5でモバイルSuicaの不具合対応
https://note.com/fumilicious/n/n5c5e4bc0561b

2020年10月22日木曜日

スプレッドシートのサイドバーにHTMLの要素を配置してみる


MISSION
スプレッドシートのサイドバーにHTMLの要素を配置する




HOW TO


STEP1
ツール > スクリプトエディタ を開きます。


STEP2
コード.gsにコードを書きます。
コードは本ページ下部のCODE内のコード.gsに書いておきました。


STEP3
ファイル > New > HTMLファイル を開きます。



STEP4
index > OK


STEP5
作成したindex.htmlファイルにHTMLを書きます。
HTMLは本ページ下部のindex.htmlに書いておきました。


STEP6
シートを読み込み直すと、上部メニューに「サイドバーを開く」が表示されます。
表示されるまで10秒くらいかかることがあります。

サイドバー > 開く
初回実行には許可を求められます。


右側にサイドバーが表示されます。




CODE


コード.gs
/************************************
メニューに追加する
************************************/
function onOpen() {
  SpreadsheetApp.getUi()
      .createMenu("サイドバーを開く")
      .addItem("開く", "openSidebar")
      .addToUi();
}

/************************************
サイドバーの表示
************************************/
function openSidebar() {
    const html = HtmlService.createHtmlOutputFromFile('index')
                            .setTitle("サイドバー");
    SpreadsheetApp.getUi().showSidebar(html);
}



サイドバーに表示するHTML

index.html
<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        padding: 5px;
      }
    </style>
    <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
  </head>
  <body>
    <div>
      サイドバーにHTMLを表示できる
      <br><br>
      操作の説明や手順などを表示すると良さそう
      <br><br>
      HTMLの要素の例
      <ol>
        <li><a target="blank" href="">リンク</a></li>
        <li><textarea>テキストエリア</textarea></li>
        <li><button class="action">ボタン</button></li>
        <li><input type="text" value="テキストボックス"></li>
        <li><input type="checkbox">チェックボックス</li>
        <li><input type="radio">ラジオボタン</li>
        <li><select><option>セレクトオプション1</option><option>セレクトオプション2</option></select></li>
      </ol>
    </div>
  </body>
</html>



APPENDIX 

スタイルはアドオンのCSSパッケージを使うとUIの統一感が出ます。
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">

サイドバーのサイズ変更には対応していないらしい。
 it is not possible to resize sidebars.

CSS package for editor add-ons

CSS package for editor add-ons > sidebars

Resizing dialogs in Google Workspace applications

google spreadsheet sidebar setWidth not working

2020年10月21日水曜日

showModalDialogでスプレッドシート上にUIを表示する


MISSION 
showModalDialogでスプレッドシート上にUIを表示する



以下のコード.gsのmyFunction()をスクリプトエディタで実行すると
このようなUIを表示できます。


UIを表示すると背後のシートは操作できません。



コード.gs 
function myFunction() {
  const htmlOutput = HtmlService
      .createHtmlOutput('<p>ここに表示したい内容をhtmlで書ける。</p><br><a href="https://www.google.com/">リンクもはれる</a>')
      .setWidth(360)
      .setHeight(120);
  SpreadsheetApp.getUi().showModalDialog(htmlOutput, "MyGUI");
}


showModelessDialogでスプレッドシート上にUIを表示する


MISSION
showModelessDialogでスプレッドシート上にUIを表示する



以下のコード.gsのmyFunction()をスクリプトエディタで実行すると
このようなUIを表示できます。

モーダルとは異なり、UIを表示したときにも背後のシートを操作できます。



コード.gs
function myFunction() {
  const htmlOutput = HtmlService
      .createHtmlOutput('<p>ここに表示したい内容をhtmlで書ける。</p><br><a href="https://www.google.com/">リンクもはれる</a>')
      .setWidth(360)
      .setHeight(120);
  SpreadsheetApp.getUi().showModelessDialog(htmlOutput, "MyGUI");
}

2020年10月17日土曜日

二次元配列をfilterして新しい配列を作りたい


MISSION
二次元配列をfilterして新しい配列を作る


BEFORE 
こういう二次元配列から
[[1, 0], [0, 1], [1, 1], [0, 0]];


AFTER 
先頭が1だけの新しい配列を作る
[[1, 0], [1, 1]];




コード.gs
function myFunction() {
  const arrays = [
                   [1, 0],
                   [0, 1],
                   [1, 1],
                   [0, 0]
                 ];
  const filtered = arrays.filter(judge);
  Logger.log(filtered);
}


function judge(array) {
  return array[0] === 1;
}



別の書き方も試してみる

コード2.gs 
function myFunction() {
  const arrays = [
                   [1, 0],
                   [0, 1],
                   [1, 1],
                   [0, 0]
                 ];
  const filtered = arrays.filter(array => array[0] === 1);
  Logger.log(filtered);
}



もう一つ別の書き方で書いてみる

コード3.gs 
function myFunction() {
  var arrays = [
                   [1, 0],
                   [0, 1],
                   [1, 1],
                   [0, 0]
                 ];
  var filtered = arrays.filter(function(array) { return array[0] === 1});
  Logger.log(filtered);
}




REFERENCE

Array.prototype.filter()

2020年10月11日日曜日

Google Pixel Budsを交換したくてサポートページを調べたときの備忘録


左のイヤホンを水没させてしまい、交換方法を調べたときの備忘録です。



MISSION
Pixel Budsを交換する方法を知る



SOLUTION
ここでチャット対応してもらえそうです。


SOLUTIONのページに辿り着くまでの道のり

STEP1
pixel buds交換で検索します。

STEP2
Google Pixel Buds の交換 をクリックして開きます。


STEP3
Pixel Buds に関するサポートを受ける をクリックして開きます。


STEP4
電話かチャットでサポートを受けられそう。


チャットは日本語も対応してそうです。



APPENDIX

問い合わせる前にヘルプやトラブルシューティングに解決策があるかもしれません。

Google Pixel Buds ヘルプ

ペア設定に関する問題のトラブルシューティング



REFERENCE

Pixel Buds に関するサポートを受ける

2020年10月10日土曜日

GitHubのGraphQL API を試してみる(Explorerと同じqueryをコードでやる)


MISSION 
GitHubのGraphQL APIでExplorerのデフォルトqueryをApps Scriptでやる


Explorer
https://docs.github.com/en/free-pro-team@latest/graphql/overview/explorer

この

query { 
  viewer { 
    login
  }
}

をGoogle Apps Scriptでやってみたくて書きました。



PROCESS 
personal access tokenを発行する
スクリプトのプロパティに保存する
コードを書いて保存する
コードを実行する
ログを確認する


STEPS 

STEP1:personal access tokenを発行する

の手順でアクセストークンを取得します。



STEP2:スクリプトのプロパティに保存する

スクリプトエディタ > ファイル > プロジェクトのプロパティ を開いて


「行を追加」をクリックして
プロパティをaccess_tokenとして
値にはSTEP1で取得したパーソナルアクセストークンを入れて保存します。




STEP3:コードを書いて保存する

以下のコード.gsをそのままコピペすれば実行できるはず。


コード.gs 
const endpoint = "https://api.github.com/graphql";

/************************************
APIをたたいてログに出す
************************************/
function runGraphql() {
  const response = getResponse();
  Logger.log(response);
}

/************************************
APIを実行して結果を返す
************************************/
function getResponse() {
  return UrlFetchApp.fetch(endpoint, getOptions());
}

/************************************
getOptions
************************************/
function getOptions() {
  return {
    "method": "post",
    "contentType": "application/json",
    "headers": {
      "Authorization": "bearer " + getProp("access_token"),
    },
    "payload": JSON.stringify({ "query": getQuery() })
  };
}

/************************************
クエリ
************************************/
function getQuery() {
  return `{ 
    viewer { 
      login
    }
  }`
}

/************************************
スクリプトのプロパティにアクセスする
************************************/
function getProp(key) {
  return PropertiesService.getScriptProperties().getProperty(key);
}


コメント入れると48行ありますが、実質30行くらいです。
getQueryの中身を変えると指定したデータにアクセスできます。
ここではデフォルトの
  viewer { 
    login
  }
にしています。



STEP4:コードを実行する

実行 > runGraphql で実行します。


初回実行時は以下のような許可を求められます。

許可を確認


アカウントを選択


詳細


〜(安全ではないページ)に移動


許可



STEP5:ログを確認する

表示 > ログ


ログに結果が表示されます。


これでExplorer実行時、右に表示される結果と同じ結果をコードで取得できました。



JIRAでプロジェクトのゴミ箱がどこにあるのか知りたい


ちょっと見つけにくかったので備忘録として。

サポートページに書かれている歯車アイコンがどこにあるのかわからなかった。



右上にあった。



MISSION
JIRAでプロジェクトのゴミ箱を見つける


PROCESS
右上の歯車アイコン > プロジェクト > ゴミ箱



ここにゴミ箱がある。



参考

プロジェクトの削除

GitHubのパーソナルアクセストークンを取得したい


MISSION
GitHubのパーソナルアクセストークンを取得する



PROCESS

の手順でアクセストークンを取得します。

  1. Profile > Settings
  2. Developer settings
  3. Personal access tokens > Generate new token
  4. Note > Select scopes > Generate token



STEPS

STEP1
Profile > Settings


STEP2
Developer settings


STEP3
Personal access tokens > Generate new token


STEP4
Note > Select scopes > Generate token


アクセストークンが表示されます。



REFERENCE

個人アクセストークンを使用する

最新の投稿

Pixel 5でSuicaが使えないときはGoogle PayでSuicaを有効にしてみる

Pixel 5への機種変でSuicaが使えない人向けに書きました。 MISSION Pixel 5でSuicaを使えるようにする SOLUTION 旧端末で機種変更の設定を行う NFCをオンにする Google PayでSuicaを有効にする PROBLEMS 以前...