1.はじめに

営業視点だと、見積書の日付をちょこっと修正したいことがある。
週明けに提出する時とか、翌日に原紙を持参して打ち合わせしたい時とか。
でも見積書をシステム化してると、承認日は変更できないし、HTML上で日付のみ変えるにしても無制限だと困る。
だから、条件付きで日付を変更できるようにした。

2.概要

できるようにしたこと

• カレンダー<input type="date">でHTML見積書の日付を変更。
• 選択できる日付は、承認日〜承認日の最大3日後。

前提条件

• 見積書作成をSalesforceでシステム化している。
• 見積書レコードは、承認後はロックされる。
• 見積書はHTMLとして出力する。

3.ソースコード

HTML(Visualforce)

<input type="date"
       id="cal"
       onchange="changedate()"
       value="{!Quote__c.appdDateForCal__c}"
       min  ="{!Quote__c.appdDateForCal__c}"
       max  ="{!Quote__c.sbmtDateForCal__c}"
>
</input>

<span id="date">{!Quote__c.appdDateForPrint__c}</span>

<!-- appdDateForCal__c:承認日（YYYY-MM-DD） -->
<!-- sbmtDateForCal__c:提出可能日（YYYY-MM-DD） -->
<!-- appdDateForPrint__c:承認日（YYYY年M月D日） -->

javascript

function changedate(){
    let appdDate = "{!Quote__c.appdDate__c}";
    let DateElmts = $("#cal").val().split("-"); //YYYY-MM-DDを[YYYY, MM, DD]に変換
    if(appdDate != ""){
        $("#date").text(DateElmts[0] + "年" + Number(DateElmts[1]) + "月" + Number(DateElmts[2]) + "日");
    } //この条件分岐がないとmax/minが未設定扱いとなり日付を自在に変更できてしまう
}

Salesforce数式項目

//1.sbmtDate__c（承認日またはその最大3日後）
    IF(
        TODAY() <= appdDate__c + 3,
        appdDate__c,
        appdDate__c + 3
    )

//2.sbmtDateForCal__c（上記をYYYY-MM-DDに変換）
    TEXT(YEAR(appdDate__c)) & "-" &
    RIGHT("0" & TEXT(MONTH(sbmtDate__c)), 2) & "-" &
    RIGHT("0" & TEXT(DAY(sbmtDate__c)), 2)

/*
    ・appdDate__cは承認プロセスで自動入力させる日付型データ
    ・appdForCal__cも同様
    ・コメントアウトは便宜的なもの
*/

4.雑記

• カレンダー<input type="date">を<apex:outputPanel>で囲い、表示条件を!ISBLANK(appdDate__c)にしてもいいかも。

<apex:outputPanel rendered="{!IF(!ISBLANK(Quote__c.appdDate__c), true, false)}">
    ...
</apex:outputPanel>

チームで開発するのって難しい。。。

Webサービス開発を業務でやっていて大変に思うことが色々あります。
特にチーム開発で進めるときには細心の注意を払います。
（上手くいかないとお互いにストレス溜まりますよね）

今後のためになんとなく現段階で気をつけようと思う点をメモしておきます。

言い方って大事
　⇨　何かお願いすることの連続
　⇨　教えてもらったり教えたり
　⇨　自分の知っている部分は他の人は知らなかったり知っていたり
　　　↪︎誰が上で誰が下かがあまりないかもしれない
　⇨　開発している人は詳しいが、他の人はそのファイル回りをあまり見てないので詳しくない
　⇨　指示が不明確だとかなり困る
　⇨　横柄な態度はよくない
　⇨　指示なのかお願いなのか

何を話したか曖昧になる
　⇨　言った言ってないの問題になる
　　　↪︎メモとるの大事
　⇨　同じイメージをちゃんと共有できているか

人によって開発スピードや順序が違う
　⇨　統一するべき？
　⇨　ペースを合わせるのが大事だし大変

どこまでテキトーにやるか、どこまで厳密にやるか
　⇨　クオリティかスピードか
　⇨　質か量か
　⇨　難しい、日頃からすり合わせするべきかもしれない
　⇨　性格が出る、亀裂を生む可能性も

今日の名言

お前のためにチームがあるんじゃねぇチームの為にお前がいるんだ!!

-安西先生（湘北高校バスケットボール部顧問）

for-ofとfor-in

どっちがどっちかわからなくなるときがあるのでメモ

for-of

配列の要素の繰り返しに特化している

namesの値を一つずつnameに代入する。

main.js

const names = ['田中', '山田', '佐藤', '井上'];

for (const name of names) {
  console.log(name);
}

// 田中
// 山田
// 佐藤
// 井上

---

また、for-ofでは分割代入と同じ記述が使用でき、複雑な構造を持つ配列から
必要な要素だけを取り出すことができる。

main.js

const personInfo = [
  { name: '田中', age: 22 },
  { name: '山田', age: 21 },
  { name: '佐藤', age: 24 },
  { name: '井上', age: 20 },
];

for (const { age } of personInfo) {
  console.log(age);
}

// 22
// 21
// 24
// 20

for-if

オブジェクトの各プロパティの値に対する繰り返しに特化している。

personInfoのプロパティ名を一つずつinfoに代入している

main.js

const personInfo = {
  name: '田中',
  age: 22,
  height: 170,
}

for (const info in personInfo) {
  console.log(`${info} : ${personInfo[info]}`);
}

// name : 田中
// age : 22
// height : 170

---

配列に対してはindexを代入する。
namesのindexを一つずつnameに代入している

main.js

const names = ['田中', '山田', '佐藤', '井上'];

for (const name in names) {
  console.log(name);
}


// 0
// 1
// 2
// 3

※当方駆け出しエンジニアのため、間違っていることも多々あると思いますので、ご了承ください。また、間違いに気付いた方はご一報いただけると幸いです。

オブジェクトの複製方法

下記のようなobj1というオブジェクトがあるとする。
このオブジェクトをコピーしてobj2を作る。

const obj = { 
    prop1: "a",
    prop2: "b"
    };

最も簡単な方法は、オブジェクトリテラルを丸ごとコピーして、定義する方法。

const obj2 = { 
    prop1: "a",
    prop2: "b"
    };

こうすることで、objと同じ構造のobj2が生成される。
今回の場合、シンプルな構造なのでコピペで簡単にできるが、複雑なオブジェクトになった時に冗長的になる。
また、objがリテラル構造で表記されていない場合、コピペでは対応できない。

例えば、

obj2 = Object.copyObject(obj);

みたいな一発でコピーできる関数が用意されていたらいいのだが、残念ながらjavascriptには用意されていない。

javascriptは 「オブジェクトを複製する」　というという関数を持ち合わせていない。

ちなみに、

obj2 = obj;

としても、参照情報が複製されるだけで、オブジェクトが複製されることはない。

詳しくは、↓

JavaScriptにおける変数の参照について

ではどうするか。

Object.asignメソッドを利用する。

Object.assignとはObjectオブジェクトが持つassignメソッドのことであり、
第一引数のオブジェクトに対し、第二引数以降のオブジェクトを結合（マージ）するメソッドである。

例えば

const data = { 
    prop1: "a",
    };

と

const data2 = { 
    prop2: "b"
    };

のオブジェクトをマージするには

mergeObj = Object.assign(data1, data2);

console.log(mergeObj);

//{prop1:"a", prop2:"b"}

とする。

これを応用して、複製する。

第一引数に空のオブジェクトを用意して、そこに複製したいオブジェクトをマージすれば結果複製される。

obj2 = Object.assign( { }, obj1);

ネスト構造のオブジェクトの場合

先ほどと同じように実装してみる。

const obj = { 
    level: 1,
    nest: {
        level: 2
    },
};
const cloneObj = Object.assign({}, obj);

cloneObjを見てみる。

console.log(cloneObj);

//{ level: 1, nest: { level: 2 } }

行けてるぽい。

では複製後にobjのnest.levelプロパティの値を変えてみる。

obj.nest.level = 3;

そして、再度cloneObjを確認すると

console.log(cloneObj);

//{ level: 1, nest: { level: 3 } }

nest.levelの値が連動して変化してしまっている。
つまり、純粋に複製されているわけでなないということです。

これはなぜかと言うと　javascriptはプリミティブ型の場合はコピーし、オブジェクトの場合は、参照情報をコピーするという挙動からきます。

詳しくはまたまたこちら。
JavaScriptにおける変数の参照について

Object.assginメソッドも同様に、複製するプロパティーの中身がプリミティブ型（今回の場合levelの値の1)は、そのまま1が複製されて、複製するプロパティーの値が、オブジェクト型(今回の場合nestの値{level:2})については、その参照情報が複製されるということです。
よって、objのnestの値と、cloneObjのnestの値は同じオブジェクトを参照しており、obj.nestの変化が、coneObj.nestに影響を受けることになります。

では、どうすれば良いのか。
再起的にObject.assginをかけます。
どういうことかといいますと、Object.assginメソッドでプロパティを先頭から複製していく時、そのプロパティーの値がオブジェクト型だった場合は、再度その値に対して、Object.assignメソッドをかけてやるのです。こうすることにより、プリミティブ型が出現するまで、潜っていき再起的に複製するという訳です。

こんな感じですね。

//Object.assignメソッドを定義。
const Clone = (obj) => {
    return Object.assign({}, obj);
};

function deepClone(obj) {
    // 一層を複製する。
    const newObj = Clone(obj);
    Object.keys(newObj)//keysメソッドでプロパティーだけの配列を作る。
        .filter(k => typeof newObj[k] === "object")//プロパティの値がオブジェクトだけのものを抜き出す。
        .forEach(k => newObj[k] = deepClone(newObj[k]));//プロパティ：オブジェクトが出現する限り再帰的にdeepCloneメソッドを呼び出す。
    return newObj;
}
const obj = { 
    level: 1,
    nest: {
        level: 2
    }
};
const cloneObj = deepClone(obj);

以上となります。お読みいただきありがとうございました。
間違ってたらすみません。。。

今回は Rust（wasm）からJavaScriptのコード（関数）を呼び出す方法について書きます。
コードは以前書いたものを流用します。
下記のgithabのページを参照してください。
https://github.com/NagaJun1/wasm_sample

以前、Rustでwasmをビルドする方法について書いた記事があります。
下記にURLを貼り付けておきますので、ご参考にどうぞ。
https://qiita.com/NagaJun/items/f43a645ff630aeb858fd

下記にwasm-bindgenの公式ページのURLを貼り付けておきます。
今回説明する内容は、基本的には下記リンクのページで説明されていると同じ内容です。
https://rustwasm.github.io/docs/wasm-bindgen/reference/js-snippets.html

コーディング

今回作成したコードについて説明していきます。
まず、Rustで呼び出すためのjavaScriptのコードは下記の通りです。
処理は単純で、html内のid="id_1"のテキストを関数の引数の値で書き換えるというものです。
注意点としては、exportを関数の頭に付けることぐらいですかね。

/js-file/js-code-file.js

export function write_p_text(a)
{
    document.getElementById("id_1").textContent = a;
}

次に、Rustのコードです。
JavaScriptで設定したwrite_p_text()関数は、Rustでは#[wasm_bindgen(module="ファイルパス")]を頭に付け、extern "C"で囲うことで呼び出すことができます。
module="ファイルパス"の"ファイルパス"は、「Cargo.toml」からしたパスを設定する必要があります。
今回はついでに、RustからJavaScriptのalert()も呼び出します。
JavaScriptのライブラリは頭に#[wasm_bindgen]をつけるだけで呼び出せます。

lib.rs

#[wasm_bindgen]
pub fn read_js_fnction(){
    //jsのアラート
    alert("call JavaScript function".to_string());
    //js関数での処理
    write_p_text("Rust call function".to_string());
}

#[wasm_bindgen(module="/js-file/js-code-file.js")]
extern "C"{
    fn write_p_text(a:String);
}

#[wasm_bindgen]
extern "C"{
    fn alert(text:String);
}

最後に、wasmを呼び出す.htmlは下記の通りです。
wasmを呼び出すための方法は前回同様ですが、今回はJavaScript内のコードで DOM操作を加えたので、<p>タグを追加しておきます。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
  </head>
  <body>
    <h1>wasm_sample</h1>
    <!--下記<p>のテキストを書き換えます-->
    <p id ="id_1">htmlで設定したテキスト</p>
    <script type="module">
      import init, * as wasm from './pkg/sample_wasm_rust.js';
      async function run() {
        await init();
        wasm.read_js_fnction();
      }
      run();
    </script>
  </body>
</html>

ソースコードの配置に関しては、この記事の頭にgitのURLを貼り付けてあるので、そちらからご確認ください。

実行

各条件を揃えたら実行します。（実行方法は前回の記事を見てください）
実行結果としては、まずRustで設定したアラートが出て（このタイミングではまだ<p id ="id_1">はデフォルトのままです）

アラートを消すと DOMが書き換わって、ページ内のテキストが書き換わります。

以上で、RustからJavaScriptのコードが呼び出せたことが確認できました。

まとめ

今回はRustからJavaScriptを呼び出す方法について書いていきました。
RustからJavaScriptを呼び出せることで、Rustでは書くことができない処理をJavaScriptで実装するという、柔軟性を持たせたプログラムが作成できる様になるかと思います。
ただ、今回 RustからDOMを操作したのですが、DOM操作自体はJavaScriptのコードを呼び出さずともRustで web-sysをクレートで追加すれば処理できるので、処理速度を速くしたいという場合はこちらを使用するべきかと思います。
https://rustwasm.github.io/docs/wasm-bindgen/examples/dom.html#web-sys-dom-hello-world
また、JavaScriptのオブジェクトはRust内でJsValueを使用すれば処理できるため、多くの場合は.jsファイルを読み込まない形で実装できるかと思います。
どういう形で実装するかは人によるかとは思いますが。
今回は以上になります。
最後まで読んでいただき、ありがとうございました。

Promiseとは

ES6から使える、非同期処理の最終的な完了もしくは失敗を表すオブジェクト。
従来の非同期処理より可読性が高くなった

(IEはゴミなので使えないのでトランスパイルが必要。)

構文

new Promise(function(resolve, reject){

}).then(

).catch(

).finaliy(

);

resolveが呼ばれると、thenメソッドに行き、rejectが呼ばれるとcatchにいく
finaliyは最後に呼ばれる。

下記の例だと、OKを押すとresolveを実行するので、thenに処理が移る。
１つ目のthenが終わると、２つ目に行く。
そして、最後にfinallyが呼ばれて終わる。

new Promise((resolve, reject) => {
  const yn = confirm("Yes Or No");
  yn ? resolve() : reject();
})
  .then(() => alert("then なう"))
  .then(() => alert("then2 なう"))
  .catch(() => alert("catch なう"))
  .finally(() => alert("おしまい"));

プロミスチェーン

非同期処理を順に実行していくこと

例えば、 下記はチェーンになっているわけではなく、順々に実行していっているだけ

new Promise(function(resolve, reject) {
    resolve(1);
}).then(val => {
  return val * 2;
}).then(val =>{
  return val + 3;
})

プロミスチェーンとは簡単に言うと、thenの中でPromiseを返すこと
そうすると、非同期処理が順に呼ばれていく

function hoge(val = 0) {
  return new Promise(function (resolve, reject) {
    setTimeout(() => {
      alert(val++);
      resolve(val);
    }, 1000);
  });
}

hoge()
  .then((val) => {
    return hoge(val);
  })
  .then((val) => {
    return hoge(val);
  });

並列処理

Promise.allを使う

すべてのプロミスが解決されるか、拒否されるかするまで待ちます。

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values); // 全部のプロミスが終わったあと実行される
});

async await

ES8から導入された、Promiseを書きやすくしたもの

書く必要ないくらい良い記事があった...
https://ja.javascript.info/async-await

はじめに

これはクソアプリ2 Advent Calendar 2020の7日目の記事となります。
英語の歌を上手に歌いたいって思ったので、そのための準備をする簡易なアプリケーションです。
クソアプリということで、自分的に作り込んでない簡単なアプリケーションという意味合いとしています。

今回はアプリよりもこんな方法もあるよって情報が広まれば、この記事としては成功です。

英語の歌

英語の勉強をしていて、そろそろシャドーイングってのをやらないとなと思って、とりあえずドラえもんの英語音声版を読んでいます。
漫画の「ドラゴン桜」と３巻でも、英語の勉強に「ビートルズを流し運動をしながら歌詞を口ずさむ」なんてやってるわけですよ。
ビートルズで英語を学ぶのは最高の学習法【ドラゴン桜勉強法考察】

試したんですが、英語の歌ってネイティブっぽく歌うって難しいです。
あと、英語で歌えば上手くなるみたい。喉発声法ってのポイント

• 英語で歌えば上手くなる！　ボーカリスト養成プログラム
• 【絶対やめろ】無能な人の発音学習法TOP3 - Youtube
• 英語喉で発声練習　ボイス・ストレッチ！ - Youtube

調査

るびが付いていれば、なんとか歌えるんじゃないかと思って調べると下記サイトを見つけました。
洋楽ふりがなドットコム

このサイトでは歌詞のカタカナ読みではなく、原曲と同じように英語っぽく歌える洋楽ふりがなになっています。

右クリック無効にされているとコピペが出来ないので、右クリック無効を解除するChrome拡張を入れました。
Pumpkin's Right Click Enable

Smile

自分は、ナットキングコール "Smile”というゆったりとした曲が好きだったんで、先ずはこれを検索しました。
http://yogakufurigana.com/271

英語の歌詞
https://www.komazawa-u.ac.jp/~kazov/Nis/smile.html

【ナットキングコール】”Smile”- Nat King Cole 【lyrics 和訳】【名曲】【ジャズ】【洋楽1950年代】
https://www.youtube.com/watch?v=y5B2aX_28Mo

カーペンターズのTop of the Worldもお勧め。
洋楽で英語をマスター｜カーペンターズのTop of the World - Youtube

使い方

今回のデモサイト PCのChromeでしか確認してません。
http://yaju.sakura.ne.jp/demo/LyricsRuby.html

入力するのは、曲名とURLと歌詞とるびになります。
るびとして洋楽ふりがな、URLにはYoutubeの動画のURLを指定します。

デモボタンをクリックすると、Smileの歌詞が３行だけセットされます。

出力ボタンをクリックすると、新しいタブに下記が出力されます。

このタブの内容を保存したい場合、Chromeの右クリックメニューの「名前を付けて保存」をクリックします。
※保存名には最初に曲名が指定されています。

名前を付けて保存した場合の変更点

名前を付けて保存した場合、「動画を再生できません」のエラーとなるため下記の変更が必要となります。
曲名 Smileを例とします。

1. 一緒にできる「Smile_files」フォルダを削除します。
2. Smile.htmlのiframeのsrc属性の部分を変更します。「y5B2aX_28Mo」の部分は対象動画のものに変更してください。
3. ローカル等のWebサーバー(IISやApacheなど)に保存します。
4. Webサーバー経由でSmile.htmlにアクセスします。

<iframe width="336" height="189" src="./Smile_files/y5B2aX_28Mo.html"
                                            ↓
<iframe width="336" height="189" src="https://www.youtube.com/embed/y5B2aX_28Mo" 

ソースコード

LyricsRuby.html

<!DOCTYPE html>
<html lang = "ja">
<head>
<meta charset = "utf-8">
<title>JavaScript</title>
<style>
  input[type="text"] {
    width: 500px;
  }
  textarea {
    width: 500px;
    height:500px;
  }
  .demo {
    margin-left: 50px;
  }
</style>
</head>
<body>
<script>
function output() {
  const title = document.getElementById("title").value;
  const url = document.getElementById("url").value;
  const lyrics = document.getElementById("lyrics").value;
  const ruby = document.getElementById("ruby").value;

  if(!title) {
    alert("曲名を入力してください");
    return;
  };
  if(!lyrics) {
    alert("歌詞を入力してください");
    return;
  };
  if(!ruby) {
    alert("るびを入力してください");
    return;
  };

  var date = new Date();
  var time = ('0' + date.getHours()).slice(-2) + ('0' + date.getMinutes()).slice(-2) + ('0' + date.getSeconds()).slice(-2);
  newtab = window.open("", "NewTab_" + time);
  header(newtab, title);
  movie(newtab, url);
  song(newtab,lyrics, ruby);
  footer(newtab);
};

function demo() {
  document.getElementById("title").value = "Smile";
  document.getElementById("url").value = "https://www.youtube.com/watch?v=y5B2aX_28Mo";
  document.getElementById("lyrics").value = "Smile though your heart is aching\nSmile even though it's breaking\nWhen there are clouds in the sky, you'll get by";
  document.getElementById("ruby").value = "すまーぃぅ　ぞうよぁはーでぃずえいきん\nすまーぃぅ　いーぶんどーぅ　いっつぶれいきん\nうぇんでぁらーくらーぅ(ず)　いんだすかーぃ ゆーぅげっばーぃ";
}

function header(newtab, title) {
  newtab.document.open();
  newtab.document.location = "#";
  newtab.document.write("<!DOCTYPE html>");
  newtab.document.write("<html>");
  newtab.document.writeln("<head>");
  newtab.document.writeln("<title>" + title + "</title>");
  newtab.document.writeln("<style>");
  newtab.document.writeln("p { font-size: 120%; }");
  newtab.document.writeln("</style>");
  newtab.document.writeln("</head>");
  newtab.document.writeln("<body>");
  newtab.document.writeln("<h1>" + title + "</h1>");
}

function movie(newtab, url) {
  if(!url) return;

  url = url.replace("watch?v=", "embed/");
  newtab.document.write("<iframe width='336' height='189' ");
  newtab.document.write("src='" + url + "' frameborder='0' ");
  newtab.document.write("allow='autoplay; encrypted-media' allowfullscreen=''>");
  newtab.document.write("</iframe>");
  newtab.document.writeln("");
}

function song(newtab, lyrics, ruby) {
  const lyricsList = lyrics.split('\n');
  const rubyList = ruby.split('\n');

  for(i=0; i<lyricsList.length; i++) {
    var str1 = "<ruby>" + lyricsList[i];
    var str2 = "<rt>" + rubyList[i] + "</rt></ruby>";
    newtab.document.writeln("<P>" + str1 + str2 + "</P>");
  }
}

function footer(newtab) {
  newtab.document.writeln("</body>");
  newtab.document.write("</html>");
  newtab.document.close();
}
</script>
<input type="text" id="title" placeholder="曲名を入力してください"></input>
<br>
<input type="text" id="url" placeholder="YouTubeのURLを入力してください"></input>
<br>
<br>
<textarea id="lyrics" placeholder="歌詞を入力を入力してください"></textarea>
<textarea id="ruby" placeholder="るびを入力を入力してください"></textarea>
<br>
<input type="button" value="出 力" onclick="output()" />
<input type="button" value="デ モ" onclick="demo()" class="demo" />
</body>
</html>

技術的に調べたこと

名前を付けて保存が無効

Chromeで新しいタブを作成した際に、右クリックメニューの「名前を付けて保存」が無効状態で選択できませんでしたが、下記の追記することで解決しました。

newtab.document.location = "#";

youtubeの接続が拒否されました。

埋め込み用にURLを変更する必要がありました。
YouTube動画埋め込み時に「www.youtube.com で接続が拒否されました。」が表示された際に確認すること

url = url.replace("watch?v=", "embed/");

最後に

これを作る上で調べ直したら、下記の2サイトが動画として英語っぽく歌えるるびが付いていました。

• ネイティブ英語発音ツールNipponglish - Youtube
• orangemikan100 - Youtube

カラオケで英語の発音をきたえる英語発音表記システム「Nipponglish（ニッポングリッシュ）」が2017年10月に登場とのことで、カラオケって滅多にいかないし英語の歌を歌うこともなかったのでこんなのあるのは知りませんでした。
カラオケで87%が英語発音アップ！ビッグエコー運営の第一興商が発表

これらのサイトにない英語歌詞があれば、このツールが役立つかも知れません。

英語の勉強

平日の会社帰りに30分〜1時間くらいシェアスペースで英語の勉強をしているのですがTOEICとか如何にも勉強系だと続かないので、自分はゲーム感覚で楽しめるものを選択しています。

• 瞬間英作文で調べたこと
• 英語の勉強の習慣化

iPhoneアプリ

• どんどん話すための瞬間英作文トレーニング
• 英語組み立てTOWN
• 英語組み立てTOWN 日常編

ドラえもんの英語音声版の本

• オーディオ版 Draemon 1
• オーディオ版 Draemon 2

// 全角記号・半角記号を除外するために、グローバル変数を定義
// ↓ハイフン不可記号
kigouCheck = /[!-/:-@[-`{-~！-／：-＠￥｝［-｀．｛-～、-〜”’・]/; 

window.addEventListener('DOMContentLoaded', () => {
    // 「送信」ボタンの要素を取得
    const submit = document.querySelector('#contact-submit');

    // エラーメッセージと赤枠の削除
    function reset(input_infomation, error_message){
        const input_info = document.querySelector(input_infomation);
        const err_message = document.querySelector(error_message);
        err_message.textContent ='';
        input_info.classList.remove('input-invalid');
    };

    // 「お名前」入力欄の空欄チェック関数
    function invalitName(input_target, error_target, error_message){

        const name = document.querySelector(input_target);
        const errMsgName = document.querySelector(error_target);

        if(!name.value){
            errMsgName.classList.add('form-invalid');
            errMsgName.textContent = error_message;
            name.focus();
            name.classList.add('input-invalid');          
            // 動作を止める
            return false;
        };
        // 動作を進める
        return true;
    };

    // 「ふりがな」入力欄の空欄チェック関数
    function invalitHurigana(input_target, error_target, error_message){

        const hurigana = document.querySelector(input_target);
        const errMsgHurigana = document.querySelector(error_target);

        if(!hurigana.value){
            errMsgHurigana.classList.add('form-invalid');
            errMsgHurigana.textContent = error_message;
            hurigana.focus();
            hurigana.classList.add('input-invalid');          
            // 動作を止める
            return false;
        };
        // 動作を進める
        return true;

    };

    // 「郵便番号」入力欄の空欄チェック関数
    function invalitPostal(input_target, error_target, error_message){

        const postal = document.querySelector(input_target);
        const errMsgPostal = document.querySelector(error_target);

        if(!postal.value){
            errMsgPostal.classList.add('form-invalid');
            errMsgPostal.textContent = error_message;
            postal.focus();
            postal.classList.add('input-invalid');          
            // 動作を止める
            return false;
        };
        // 動作を進める
        return true;

    };

    // 「住所」入力欄の空欄チェック関数
    function invalitAddress(input_target, error_target, error_message){

        const address = document.querySelector(input_target);
        const errMsgAddress = document.querySelector(error_target);

        if(!address.value){
            errMsgAddress.classList.add('form-invalid');
            errMsgAddress.textContent = error_message;
            address.focus();
            address.classList.add('input-invalid');          
            // 動作を止める
            return false;
        };
        // 動作を進める
        return true;
    };

    // 「電話番号」入力欄の空欄チェック関数
    function invalitTel(input_target, error_target, error_message){

        const tel = document.querySelector(input_target);
        const errMsgTel = document.querySelector(error_target);

        if(!tel.value){
            errMsgTel.classList.add('form-invalid');
            errMsgTel.textContent = error_message;
            tel.focus();
            tel.classList.add('input-invalid');          
            // 動作を止める
            return false;
        };
        // 動作を進める
        return true;
    };

    // 「メールアドレス」入力欄の空欄チェック関数    
    function invalitEmail(input_target, error_target, error_message){

        const email = document.querySelector(input_target);
        const errMsgEmail = document.querySelector(error_target);

        if(!email.value){
            errMsgEmail.classList.add('form-invalid');
            errMsgEmail.textContent = error_message;
            email.focus();
            email.classList.add('input-invalid');          
            // 動作を止める
            return false;
        };
        // 動作を進める
        return true;
    };

    // 「会社名」入力欄の空欄チェック関数
    function invalitCompany(input_target, error_target, error_message){

        const company = document.querySelector(input_target);
        const errMsgCompany = document.querySelector(error_target);

        if(!company.value){
            errMsgCompany.classList.add('form-invalid');
            errMsgCompany.textContent = error_message;
            company.focus();
            company.classList.add('input-invalid');          
            // 動作を止める
            return false;
        };
        // 動作を進める
        return true;
    };

    // 「お問い合わせ内容」入力欄の空欄チェック関数
    function invalitContent(input_target, error_target, error_message){

        const content = document.querySelector(input_target);
        const errMsgContent = document.querySelector(error_target);

        if(!content.value){
            errMsgContent.classList.add('form-invalid');
            errMsgContent.textContent = error_message;
            content.focus();
            content.classList.add('input-invalid');          
            // 動作を止める
            return false;
        };
        // 動作を進める
        return true;
    };

    // 「送信」ボタンの要素にクリックイベントを設定する
    submit.addEventListener('click', (e) => {
        // デフォルトアクションをキャンセル
        e.preventDefault();

        reset('#name-js', '#err-msg-name');
        reset('#hurigana-js', '#err-msg-hurigana');
        reset('#postal-js', '#err-msg-postal');
        reset('#address-js', '#err-msg-address');
        reset('#tel-js', '#err-msg-tel');
        reset('#email-js', '#err-msg-email');
        reset('#company-js', '#err-msg-company');
        reset('#department-js', '#err-msg-department');
        reset('#content-js', '#err-msg-content');

        const focus = () => document.querySelector('#name-js').focus();

        // 「お名前」入力欄の空欄チェック
        if(invalitName('#name-js', '#err-msg-name', 'お名前が入力されていません')===false){
            return;
        };
        // 「お名前」入力欄の記号チェック
        const name = document.querySelector("#name-js");
        const errMsgName = document.querySelector("#err-msg-name");
        if(name.value.match(kigouCheck)){
            errMsgName.classList.add('form-invalid');
            errMsgName.textContent = '記号は使用できません';
            name.focus();
            name.classList.add('input-invalid');
            return;
        }else{
            errMsgName.textContent ='';
            name.classList.remove('input-invalid');
            name.blur();
        };
        // 「ふりがな」入力欄の空欄チェック
        if(invalitHurigana('#hurigana-js', '#err-msg-hurigana', '入力必須です')===false){
            return;
        };

        // ひらがなチェック
        // 正規表現huriganaCheckにマッチしするなら、エラー表示する
        const hurigana = document.querySelector("#hurigana-js");
        const errMsgHurigana = document.querySelector("#err-msg-hurigana");
        const huriganaCheck = /[^ぁ-んー 　]/u; 

        if(hurigana.value.match(huriganaCheck)){
            errMsgHurigana.classList.add('form-invalid');
            errMsgHurigana.textContent = 'ひらがなで入力してください';
            hurigana.focus();
            hurigana.classList.add('input-invalid');
            return;
        }else if(hurigana.value.match(kigouCheck)){
            errMsgHurigana.classList.add('form-invalid');
            errMsgHurigana.textContent = '記号は使用できません';
            hurigana.focus();
            hurigana.classList.add('input-invalid');
            return;
        }else{
            errMsgHurigana.textContent ='';
            hurigana.classList.remove('input-invalid');
            hurigana.blur();
        };

        // 「郵便番号」入力欄の空欄チェック
        if(invalitPostal('#postal-js', '#err-msg-postal', '入力必須です')===false){
            return;
        };

        // 郵便番号形式チェック
        const postal = document.querySelector("#postal-js");
        const errMsgPostal = document.querySelector("#err-msg-postal");
        const postalCheck = /^\d{7}$/; 
        if(postal.value.match(postalCheck)){
            errMsgPostal.textContent ='';
            postal.classList.remove('input-invalid');
            postal.blur();
        }else if(postal.value.match(kigouCheck)){
            errMsgPostal.classList.add('form-invalid');
            errMsgPostal.textContent = '記号は使用できません';
            postal.focus();
            postal.classList.add('input-invalid');
            return;
        }else{
            errMsgPostal.classList.add('form-invalid');
            errMsgPostal.textContent = '郵便番号は数字７桁で入力してください';
            postal.focus();
            postal.classList.add('input-invalid');
            return;
        };

        // 「住所」入力欄の空欄チェック
        if(invalitAddress('#address-js', '#err-msg-address', '入力必須です')===false){
            return;
        };
        // 「住所」入力欄の記号チェック
        const address = document.querySelector("#address-js");
        const errMsgAddress = document.querySelector("#err-msg-address");
        const kigouAdCheck = /[!-,.-@[-`{-~！-，．-＠￥｝［-｀｛-～、-〜”’・]/; 
            if(address.value.match(kigouAdCheck)){
            errMsgAddress.classList.add('form-invalid');
            errMsgAddress.textContent = '記号は使用できません';
            address.focus();
            address.classList.add('input-invalid');
            return;
        }else{
            errMsgAddress.textContent ='';
            address.classList.remove('input-invalid');
            address.blur();
        };        
        // 「電話番号」入力欄の空欄チェック
        if(invalitTel('#tel-js', '#err-msg-tel', '入力必須です')===false){
            return;
        };

        //電話番号形式チェック
        const tel = document.querySelector("#tel-js");
        const errMsgTel = document.querySelector("#err-msg-tel");
        const telCheck = /0\d{1,4}\d{1,4}\d{4}/; 
        if(tel.value.match(kigouCheck)){
            errMsgTel.classList.add('form-invalid');
            errMsgTel.textContent = '記号は使用できません';
            tel.focus();
            tel.classList.add('input-invalid');
            return;
        }else if(tel.value.match(telCheck)){
            errMsgTel.textContent ='';
            tel.classList.remove('input-invalid');
            tel.blur();
        }else{
            errMsgTel.classList.add('form-invaid');
            errMsgTel.textContent = '電話番号の形式で入力してください';
            tel.focus();
            tel.classList.add('input-invalid');
            return;
        };

        // 「メールアドレス」入力欄の空欄チェック
        if(invalitEmail('#email-js', '#err-msg-email', '入力必須です')===false){
            return;
        };

        const email = document.querySelector("#email-js");
        const errMsgEmail = document.querySelector("#err-msg-email");
        // "@"があるかのチェック
        if(email.value.match(/@/)){
            errMsgEmail.textContent ='';
            email.classList.remove('input-invalid');
            email.blur();
        } else {
            errMsgEmail.classList.add('form-invalid');
            errMsgEmail.textContent = 'Emailの形式で入力してください';
            email.focus();
            email.classList.add('input-invalid');
            return;
        }

        // Email形式チェック
        const emailSplit = email.value.split(/(@)/);
        const emailUser = emailSplit[0];
        const emailatto = emailSplit[1];
        const emailDomain = emailSplit[2];
        // console.log(emailSplit);
        const emailUserCheck = /^[-a-z0-9~#&'*/?`\|!$%^&*_=+}{\'?]+(\.[-a-z0-9~#&'*/?`\|!$%^&*_=+}{\'?]+)*$/;
        const emailDomainCheck = /([a-z0-9_][-a-z0-9_]*(\.[-a-z0-9_]+)|(docomo\ezweb\softbank)*\.(aero|arpa|biz|com|coop|edu|gov|info|int|mil|museum|name|net|org|pro|travel|mobi|[a-z][a-z])|([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}))(:[0-9]{1,5})?$/i;
        if(emailUser.match(emailUserCheck)){
            errMsgEmail.textContent ='';
            email.classList.remove('input-invalid');
            email.blur();
        }else{
            errMsgEmail.classList.add('form-invalid');
            errMsgEmail.textContent = 'Emailの形式で入力してください';
            email.focus();
            email.classList.add('input-invalid');
            return;
        }
        if(emailDomain.match(emailDomainCheck)){
            errMsgEmail.textContent ='';
            email.classList.remove('input-invalid');
            email.blur();
        }else{
            errMsgEmail.classList.add('form-invalid');
            errMsgEmail.textContent = 'Emailの形式で入力してください';
            email.focus();
            email.classList.add('input-invalid');
            return;
        }

        // Email文字数チェック
        const allLength = email.value.length;
        const userNameLength = emailUser.length;
        const domainNameLength = emailDomain.length;
        console.log("全て:"+allLength);
        console.log("@の前:"+userNameLength);
        console.log("@の後ろ:"+domainNameLength);
        if(allLength>=1 && allLength<=256 && userNameLength>=1 && userNameLength<=64 && domainNameLength>=1 && domainNameLength<=256){
            errMsgEmail.textContent ='';
            email.classList.remove('input-invalid');
            email.blur();
        } else {
            errMsgEmail.classList.add('form-invalid');
            errMsgEmail.textContent = 'Emailの形式で入力してください(文字数が間違っています)';
            email.focus();
            email.classList.add('input-invalid');
            return;
        }

        // 「会社名」入力欄の空欄チェック
        if(invalitCompany('#company-js', '#err-msg-company', '入力必須です')===false){
            return;
        };
        // 「会社名」入力欄の記号チェック
        const company = document.querySelector("#company-js");
        const errMsgCompany = document.querySelector("#err-msg-company");
        if(company.value.match(kigouCheck)){
            errMsgCompany.classList.add('form-invalid');
            errMsgCompany.textContent = '記号は使用できません';
            company.focus();
            company.classList.add('input-invalid');
            return;
        }else{
            errMsgCompany.textContent ='';
            company.classList.remove('input-invalid');
            company.blur();
        }; 

        // 「部署名」入力欄の記号チェック
        const department = document.querySelector("#department-js");
        const errMsgDepartment = document.querySelector("#err-msg-department");
        if(department.value.match(kigouCheck)){
            errMsgDepartment.classList.add('form-invalid');
            errMsgDepartment.textContent = '記号は使用できません';
            department.focus();
            department.classList.add('input-invalid');
            return;
        }else{
            errMsgDepartment.textContent ='';
            department.classList.remove('input-invalid');
            department.blur();
        };        

        // 「お問い合わせ内容」入力欄の空欄チェック
        if(invalitContent('#content-js', '#err-msg-content', '入力必須です')===false){
            return;
        };
        // 「お問い合わせ内容」入力欄の記号チェック
        const content = document.querySelector("#content-js");
        const errMsgContent = document.querySelector("#err-msg-content");
        if(content.value.match(kigouCheck)){
            errMsgContent.classList.add('form-invalid');
            errMsgContent.textContent = '記号は使用できません';
            content.focus();
            content.classList.add('input-invalid');
            return;
        }else{
            errMsgContent.textContent ='';
            content.classList.remove('input-invalid');
            content.blur();
        };        


        document.customerinfo.submit();

    }, false);  
}, false);

はじめに

Vue.jsで使用する基本的なディレクティブをまとめました。
Vue.js v3.0の公式ドキュメントを参考としています。

V-onやV-bindは様々な使用法があるため、詳細は今後の記事で書きます。

V-text

<span v-text="message"></span>
<!-- 両者同様 -->
<span>{{　message　}}</span> Hello Vue!

以下のように文章の一部をプロパティで表示したい場合は”Mustache” 構文(二重中括弧)を利用することが推奨されています。

<span>Message: {{ message }}</span>

const app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
  },
});

V-html

DOM 要素の内側を innerHTML として書き換えます。
v-html には XSS の危険性があるため信頼できるコンテンツだけに利用します。

<div v-html="html"></div>

var app = new Vue({
  el: '#app',
  data: {
    html: 'Hello <strong style="color: red">Vue!</strong>',
  },
});

V-show

参照する値が true として評価され場合は表示し、false として評価される場合は display:none 等のスタイルが付いて非表示になります。

<h1 v-show="hello">Hello!</h1>

const greeting = new Vue({
  el: '#app',
  data: {
    hello: 1,
  },
});
greeting.hello = 1; // Hello!

V-if

バインドした値が true 評価であれば DOM 要素が生成され、false であれば破棄されます。

<h1 v-show="hello">Hello!</h1>

const greeting = new Vue({
  el: '#app',
  data: {
    hello: 1,
  },
});
greeting.hello = 1;

v-ifとv-showの違い

v-if は初期表示においてfalseの場合、何もしません。条件付きブロックは、条件が最初にtrueになるまで描画されません。

一方、v-showではは要素は初期条件に関わらず常に描画され、シンプルなCSSベースの切り替えとして常に要素が DOM に保存されます。

一般的に、v-ifはより高い切り替えコストを持っているのに対して、 v-showはより高い初期描画コストを持っています。 そのため、切り替えの頻度が低ければv-if切り替えの頻度が高ければv-showという使い分けをします。

V-else

v-ifの後続分岐処理としてv-elseを使用できます。

<div v-if="Math.random() > 0.5">Hello!</div>
<div v-else>Morning!</div>

V-else-if

<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else-if="type === 'C'">C</div>
<div v-else>Not A/B/C</div>

V-for

このように v-for を用いて numbers の各要素を仮変数（エイリアス）num として取り出して、num を li 要素の内部に入れて表示させることができます。

<div id="app">
  <ul>
    <li v-for="num in numbers">{{ num }}</li>
  </ul>
</div>

new Vue({
  el: "#app",
  data: {
    numbers: [
      1, 2, 3, 4, 5
    ]
  });

V-on

DOM要素にイベントリスナーを登録できます。

<div id="app" v-on="click: alert">ClickHere!</div>

new Vue({
  el: "#app",
  methods: {
    alert: function(){
         alert('clicked!');}
  });

V-bind

aタグのhref属性やimgタグのsrc属性などを動的に変更することができます。

<img v-bind:src="imageSrc" />
<!-- 省略記法 -->
<img :src="imageSrc" />

new Vue({
  el: "#app",
  data: {
    imageSrc: "http://example/example"

V-model

HTMLのinput要素やselect要素などのユーザーが入力した値を受け取りたい場合、v-bindディレクティブを用いることで実現しますが、v-modelを使うことでより簡潔に書くことができます。

v-bindとv-onを使った場合

<div id="app">
   名前をここに入力する
    <input  v-bind:value="name"  v-on:change="name = $event.target.value" />
</div>

v-modelを使った場合

<div id="app">
   名前をここに入力する
    <input v-model:value="name"/>
</div>

new Vue({
   el: "#app",
   data: {
       name: ''
   }
})

参考

Vue.js Directives

本記事は、株式会社ピー・アール・オーアドベントカレンダーの8日目です。

前回の続き

前回では、Garmin Connectから日々の活動を指定年月日以降でダウンロードする部分を作成しました。
今回は、アクティビティの一覧を取得し、そこを足掛かりとして各アクティビティのデータをダウンロードする処理を作りたいと思います。

アクティビティ？

Garmin Connectにおけるアクティビティとは、特定の種類の運動データを指し、ランニングや自転車、水泳などといった基本的な運動から、変わったところだと釣りとかもあったりします。これはGarminの機器の方にプリセットされたアクティビティを明示的に選ぶことで記録されるデータになります。（なので、どのアクティビティを記録可能か？は機種依存になる）

基本的な方針

1. アクティビティ一覧から過去すべてのアクティビティのIDを取得する。
2. 取得したアクティビティIDに対しダウンロードURLをたたき、片っ端から取得する。
3. どこまで取得したか？はローカルストレージに取っておく

こんな感じでやっていきます。

やっていきます

アクティビティ一覧の取得方法

まずは、ブラウザで通信を見てみましょう。

ほうほう。これですね。

https://connect.garmin.com/modern/proxy/activitylist-service/activities/search/activities?limit=20&start=0&_=1607133727539

上記で、limitやstartはわかりますね。
_ってやつは何でしょうね？値的にはUNIXタイムスタンプのような気がしたので、その前提でやっていきます。

上記URLを（Garmin Connect認証済みで）たたくと以下のようなレスポンスが返ってきました。

[
    {
        "activityId": 5909700814,
        "activityName": "横浜市 ウォーク",
        "description": null,
        "startTimeLocal": "2020-12-04 08:52:33",
        "startTimeGMT": "2020-12-03 23:52:33",
        "activityType": {
            "typeId": 9,
            "typeKey": "walking",
            "parentTypeId": 17,
            "sortOrder": 27,
            "isHidden": false
        },
        "eventType": {
            "typeId": 9,
            "typeKey": "uncategorized",
            "sortOrder": 10
        },
        "comments": null,
        "parentId": null,
        "distance": 1158.3299560546875,
        "duration": 698.3469848632812,
        "elapsedDuration": 698346.9848632812,
        "movingDuration": 698.3469848632812,
        "elevationGain": 10,
        "elevationLoss": 18,
        "averageSpeed": 1.659000039100647,
        "maxSpeed": 1.8849999904632568,
        "startLatitude": 35.396981528028846,
        "startLongitude": 139.5148977264762,
        "hasPolyline": true,
        "ownerId": 6080883,
                ・
                ・
                ・

すごい情報量が返ってくるんですが、いったんここで必要なのはactivityIdだけです。
さて、このAPIから取得するとしてもページングがあるし、前回読み込んだアクティビティ以前を読み込みしたくはないので、ここでは以下の方針で考えてみました。

1. ローカルストレージから前回取り込んだアクティビティIDを取得
2. アクティビティ一覧を取得し、1.のアクティビティIDを探す。なければ次のページ読み込む。1.のアクティビティID見つかるまで読み込む
3. アクティビティIDが見つかったら、その次のアクティビティからアクティビティIDを取得し、ダウンロード開始。ダウロード済みのアクティビティIDをローカルストレージに入れておく
4. 2.で読み込んだリストの末端まで行ったら処理終了

うーん。やってることが地味ですね。今回の記事もLGTMもらえなさそうです。
（社内でもおそらくこれを必要としている人はいないので、まったく共感を得られない記事になってきました）

fetchで取得

こんな感じで書いて、取得できるか確認してみました。

function getActivityList(start, limit) {
    var url = "https://connect.garmin.com/modern/proxy/activitylist-service/activities/search/activities?" +
            "limit=" + limit +
            "&start=" + start +
            "&_=" + moment().valueOf(); // unix timestamp (ms)
    var activityIds = [];

    return new Promise((resolve, reject) => {
      fetch(url, {
        credentials: 'include',
        mode: 'cors',
      })
        .then(response => response.text())
        .then(text => console.log(text))
        .then(function(){
          resolve(activityIds);
        })
        .catch(ex => reject(ex))
    });
}

あれ、失敗ですね。

Cookie飛んでない疑惑です。

もしかして、backgroundからのfetchはセッション共有されてなくてCookie飛ばないの？Cookie自前で取得して一つ一つつけないとダメ？とか一瞬遠い目になりましたが、何のことはないmanifestへのドメイン追加が必要なだけでした。

manifest.json

    "permissions": [
      "activeTab",
      "declarativeContent", 
      "storage", 
      "downloads", 
      "alarms", 
      "*://connect.garmin.com/"],

リスト取得は以下のような感じになりました。ちょっと長い。

background.js

/**
 * Set alarm for regular download in the background.
 */
chrome.alarms.onAlarm.addListener(async function (alarm) {
  let _isStart = await getLocalStorageVal('isStart');

  if (_isStart.isStart && alarm.name == "get_activity_list") {
    var _activityId = await getLocalStorageVal("last_read_activity_id");
    var _unreadIds = await getLocalStorageVal("unread_activity_ids");
    if("unread_activity_ids" in _unreadIds && _unreadIds.unread_activity_ids != '[]') {
      // If there is an undownloaded activity list in the local storage, 
      // do not load the DL target ID additionally
      console.log('There is a list of unloaded activities');
      return;
    }

    var nextPage = true;
    var start = 0;
    var limit = 20;
    while(nextPage) {
      var _ids = await getLocalStorageVal("unread_activity_ids");

      var ids = [];
      if("unread_activity_ids" in _ids) {
        ids = JSON.parse(_ids.unread_activity_ids);
      }

      var olderIds = await getActivityList(start, limit);

      if(olderIds.length == 0) {
        // If can't get the activity list, exit
        nextPage = false;
        break;
      }

      if(!_activityId.last_read_activity_id) {
        // No activity loaded in the past (first time)
        start = start + limit;
        ids = ids.concat(olderIds);
      } else {
        if(olderIds.indexOf(_activityId.last_read_activity_id) >= 0) {
          // The activity ID loaded last time is included in the acquired list
          nextPage = false;
          ids = ids.concat(olderIds.slice(0, olderIds.indexOf(_activityId.last_read_activity_id)));
        } else {
          // No ID previously imported into the acquired list (inspection on the next page)
          start = start + limit;
          ids = ids.concat(olderIds);
        }
      }

      chrome.storage.sync.set({unread_activity_ids: JSON.stringify(ids)}, function() {
        // Save next date to local storage
      });

    }
  }
});

初回のリスト取得では一番過去の一覧まで取得して、その時点での全アクティビティIDをローカルストレージに保存してます。ちょっと乱暴（すごいたくさんのアクティビティを持つ人がこれ動かすと危険かも）なやり方なので上限値は設定した方がいいかなとは思ってますので、githubあたりに上げるときにはそれ入れます。
あと、リスト取得は毎分とかで動かれると大変うざいので、別にalarmをセットしています。最終的には1日に一回動かすのでも十分でしょう。

background.js

/**
 * Set alarm when installing extension
 */
chrome.runtime.onInstalled.addListener(function (details) {
  console.log(details.reason);
  chrome.alarms.create("dl_fire", { "periodInMinutes": 1 });
  chrome.alarms.create("get_activity_list", { "periodInMinutes": 5 });
});

アクティビティのダウンロード処理

2日目に書いたコードの焼き直しです。やや冗長な気はしてるので自分の心の中の要リファクタ一覧の末尾に追加しておきました。

background.js

/**
 * Set alarm for activity download in the background.
 */
chrome.alarms.onAlarm.addListener(async function (alarm) {

  let _isStart = await getLocalStorageVal('isStart');

  if (_isStart.isStart && alarm.name == "dl_fire") {

    var _unreadIds = await getLocalStorageVal("unread_activity_ids");
    if(!"unread_activity_ids" in _unreadIds || 
      ("unread_activity_ids" in _unreadIds && _unreadIds.unread_activity_ids == "[]")) {
      return true;
    }

    ids = JSON.parse(_unreadIds.unread_activity_ids);

    id = ids.pop();

    if(id) {
      var url = "https://connect.garmin.com/modern/proxy/download-service/files/activity/" + id;
      var _dir = await getLocalStorageVal('directory');
      chrome.downloads.download({
        url: url, 
        filename: _dir.directory + id + '.zip'
      });
      chrome.storage.sync.set({unread_activity_ids: JSON.stringify(ids)}, function() {
        // Save updated id_list to local storage
      });
    }

    chrome.storage.sync.set({last_read_activity_id: id}, function() {
      // Save updated id_list to local storage
    });
  }
});

動かしてみる

動き的にも前回とあまり違いはないです。ただひたすら一定間隔でファイルがダウンロードされるという・・・。
こんな地味な拡張機能ですが、たぶん世の中的には必要としている人はいそうな気がするので公開してみようかなと思ってます。

初めに

JavaScriptでほぼエクセルな画面が作成可能
表形式で入出力させたい場合に良いかも

フォルダ構成

├─ index.html
└─ assets
    ├─ css
    │   ├─ jexcel.css
    │   └─ jsuites.css
    └─ js
        ├─ jexcel.js
        └─ jsuites.js

※ファイルは
　・jExcel：https://github.com/jspreadsheet/jexcel
　・jSuites：https://github.com/jsuites/jsuites
　からダウンロード

HTML（使い方）

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>売上管理サンプル</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./assets/css/jexcel.css" type="text/css" />
    <script src="./assets/js/jexcel.js"></script>
    <link rel="stylesheet" href="./assets/css/jsuites.css" type="text/css" />
    <script src="./assets/js/jsuites.js"></script>
    <style>
        /* 表全体 */
        #spreadsheet{
            font-size:12px;
        }

        /* 最終行以外（jsとかでちゃんと定義して処理したほうが良いかも） */
        #spreadsheet tbody.draggable td[data-X="5"],
        #spreadsheet tbody.draggable td[data-X="6"],
        #spreadsheet tbody.draggable td[data-X="8"],
        #spreadsheet tbody.draggable td[data-X="9"],
        #spreadsheet tbody.draggable td[data-X="10"]  {
            color:#000;
            background-color: #ff9;
        }
    </style>

    <script>
        // jExcelオブジェクト変数
        var jExcelsheetObj = null;

        // 取引先データ
        var customerList=[
            {"id": "10000001", "name": "取引先１"},
            {"id": "10000002", "name": "取引先２"},
            {"id": "10000003", "name": "取引先３"},
            {"id": "10000004", "name": "取引先４"},
            {"id": "10000005", "name": "取引先５"},
            {"id": "10000006", "name": "取引先６"}
        ];

        // 商品データ
        var productList=[
            {"id": "00000001", "name": "商品Ａ"},
            {"id": "00000002", "name": "商品Ｂ"},
            {"id": "00000003", "name": "商品Ｃ"},
            {"id": "00000004", "name": "商品Ｄ"},
            {"id": "00000005", "name": "商品Ｅ"},
            {"id": "00000006", "name": "商品Ｆ"}
        ];

        // 表示データ
        var sheetData = [
          { 
            "selesDate": "2020-12-08"
            , "customer": "10000001"
            , "product": "00000001"
            , "amount": "4"
            , "salesUnitPrice": "2000"
            , "salesSumPrice": "0"
            , "tax": "0"
            , "purchaseUnitPrice": "1600"
            , "purchaseSumPrice": "0"
            , "profit":"0"
            , "profitRate":"0"
            , "remarks": ""
          } //１行目
          ,{ 
            "selesDate": "2020-12-19"
            , "customer": "10000003"
            , "product": "00000003"
            , "amount": "1"
            , "salesUnitPrice": "3000"
            , "salesSumPrice": "0"
            , "tax": "0"
            , "purchaseUnitPrice": "2000"
            , "purchaseSumPrice": "0"
            , "profit":"0"
            , "profitRate":"0"
            , "remarks": ""
          } //２行目
        ];

        // ページ読み込み時
        window.addEventListener("load", function(){

            /** 
            * セルの値が変更された場合
            * @param instance:編集されたタグのインスタンス(使用していない)
            * @param cell:編集されたタグの情報(使用していない)
            * @param x:列のインデックス
            * @param y:行のインデックス 
            * @param value:編集されたタグの内容(使用していない)
            */
            const cellChanged = function(instance, cell, x, y, value) {

                // 合計処理を実行するカラムインデックス
                const executeCalcSumDataColomIdx = ["-1", "3","4","7"];

                // 合計処理を実行するカラム番号の場合
                if(executeCalcSumDataColomIdx.indexOf(x) >= 0){

                    // 計算データ取得
                    let calcData = calcSumData(y, x);

                    if(calcData){
                        // 変更ロジック無効
                        jExcelsheetObj.options.onchange = null;
                        // 計算データ設定
                        jExcelsheetObj.setRowData(y, calcData);
                        // 変更ロジック有効
                        jExcelsheetObj.options.onchange = cellChanged;
                    }

                }        
            }

            /** 
            * 合計計算ロジック(指定行の合計した数値を計算する)
            * @param rowIdx:行のインデックス 
            * @param colomIdx:列のインデックス(デフォルト-1のときは、処理実行)
            */
            const calcSumData = function(rowIdx){

                // 余りの行は、処理しない
                if(rowIdx >= jExcelsheetObj.rows.length - jExcelsheetObj.options.minSpareRows) return null;

                // 行のデータを取得
                rowData = jExcelsheetObj.getRowData(rowIdx);

                try{

                    /** 設定している値で計算(インデックスはリテラルじゃなくて、ちゃんと定義したほうが良い) */
                    // 売上金額 = 数量 × 売上単価
                    rowData[5] = chgStrToInt(rowData[3]) * chgStrToInt(rowData[4]);
                    // 消費税 = 売上金額 × 税率（定義してね）
                    rowData[6] = rowData[5] * 0.1;
                    // 仕入金額 = 数量 × 仕入単価
                    rowData[8] = chgStrToInt(rowData[3]) * chgStrToInt(rowData[7]);
                    // 利益 = 売上金額 ー 仕入金額
                    rowData[9] = rowData[5] - rowData[8];
                    // 利益率 = 利益 ÷ 売上金額
                    rowData[10] = Math.round(rowData[9] / rowData[5] * 100) + "%";

                }catch(e){
                    console.log(e);
                    // エラーが出る前のものまで返す
                    return rowData;
                }
                return rowData;
            }

            // 変換メソッド（コピペ(^^;）
            const chgStrToInt = function(strNum){
                return parseInt(strNum.replace(/,/, ''));
            }

            // シートの領域取得
            var spArea = document.getElementById('spreadsheet');

            // jExcelオブジェクト生成
            jExcelsheetObj = jexcel(spArea, {
                data: sheetData, //設定データ
                minSpareRows: 1, //余り行
                columns: [
                    { type: "calendar", title:"年月日", width:80, options: { format:"YYYY-MM-DD" }},
                    { type: "dropdown", title:"取引先", width:200, source:customerList },
                    { type: "autocomplete", title:"商品名", width:160 , align: "left", source: productList, multiple:false },
                    { type: "numeric", title:"数量", width:80, align: "right" ,mask:"#,##" },
                    { type: "numeric", title:"売上単価", width:80, align: "right" ,mask:"#,##" },
                    { type: "numeric", title:"売上金額", width:80, align: "right" ,mask:"#,##"},
                    { type: "numeric", title:"消費税", width:80, align: "right" ,mask:"#,##"},
                    { type: "numeric", title:"仕入単価", width:80, align: "right" ,mask:"#,##" },
                    { type: "numeric", title:"仕入金額", width:80, align: "right" ,mask:"#,##"},
                    { type: "numeric", title:"利益", width:80 , align: "right" ,mask:"#,##"},
                    { type: "numeric", title:"利益率", width:80, align: "right" },
                    { type: "text", title:"備考", width:120, align: "left" },
                ], //列定義
                tableOverflow:true,    // trueの場合は、領域以上になるとスクロールを表示
                tableHeight:'200px',   // 高さ
                tableWidth:'98vw',     // 幅
                onchange: cellChanged, // 変更時のロジック
            });

            /** 初回データの計算ロジック */
            // 変更時のメソッドを無効にする
            jExcelsheetObj.options.onchange = null;
            // データ(行)数取得
            let allDataRows = jExcelsheetObj.rows.length;
            // データ(行)数ループ
            for(let idx=0; idx<allDataRows;idx++){
                // 計算データ取得
                let calcData = calcSumData(idx);

                if(calcData){
                    // 計算データ設定
                    jExcelsheetObj.setRowData(idx, calcData);
                }

            }
            // 変更メソッドを有効にする
            jExcelsheetObj.options.onchange = cellChanged;

            // ヘッダーの中央寄せ
            var spHeaders = document.querySelectorAll("#spreadsheet thead.resizable td");
            for(let idx = 0; idx<spHeaders.length;idx++){
                spHeaders[idx].style.textAlign="center";
            }

            // 登録ボタン
            document.getElementById("regist").addEventListener("click", function(){
                // 全データ取得
                var allData = jExcelsheetObj.getData();

                // 取得したデータでajaxで指定URLにpostとかする
                // commonAjax(url, allData);
            });

        });
    </script>
</head>
<body>
<h1>売上管理</h1>
<div><input type="button" value="登録" id="regist"></div>
<div id="spreadsheet"></div>
</body>
</html>

あとがき

合計行も入れたかったけど、折れました＞＜；
色々カラム情報を定義すれば、もうちょい良いものができるはず！
にしても、英語のドキュメントのわかりにくいことわかりにくいこと、、、（涙）
onloadにnull突っ込むやり方については、もう少し良いやり方あるかも、、、

参考

https://qiita.com/t-iguchi/items/689b85ff163e0a321f1d
https://www.template-sozai.com/keyword/%E5%A3%B2%E4%B8%8A%E7%AE%A1%E7%90%86 ※参考エクセル

近頃Reactでいいサイトを作ろうとしているのですが、画像を表示させるのに3日かかってしまったのでたどり着いたコードを書いていきます。

表示のさせ方

test.react

import ReactDOM from 'react-dom';
import Icon from './logo.png';
const IconComponent = () =>{
  return <img src={Icon}  alt="アイコン" />
}
const rootElement = document.getElementById("root");
ReactDOM.render(
  <IconComponent />,rootElement
);

こんな感じになりました。
import Icon from ''でパスを指定するとそのものがIconに
入るみたいです。
const rootElement = document.getElementById("root");
をしてからReactDOM.renderで、
,rootElement
としないとTarget container is not a DOM element
と出ます。ここら辺の理解はまだまだなのでこれから調べます。

終わり

はじめに

PythonのフレームワークのDjangoでWebアプリを制作中、
文字列をtextareaで表示させたのですが、
修正後の文字列を保存するには？
そして、保存したファイルをダウンロードするには？となり、
調査し実装してみようと思いました。

参考文献

この記事は以下の情報を参考にして執筆しました。

• [フロントエンド] Webページで編集した内容をJavascriptから動的にダウンロードする
• 【JavaScript】textareaで入力した文字列をファイルで保存する
• Blob
• BlobをJavaScriptで使う方法を現役エンジニアが解説【初心者向け】
• ネイティブ JavaScript の remove メソッド

当初はFormを用いて、サーバー側で保存等の処理をするのか？と思っていたのですが、
編集後、サーバーには保存させなくても今回は解決策としてOKなので、
JavaScriptでダウンロード可能なクリックリンクを作成することで解決できそうです。
実際に試してみようと思います。

目次

1. テキストエリアの値(文字列)を取得
2. 取得した文字列でBlobを作成し、BlobをURLに変換
3. ダウンロード可能なa要素を作成する
4. 作成したa要素をクリックし、削除
5. まとめ

テキストエリアの値(文字列)を取得

今回は要素のidを指定することで、値を取得しました。

index.html

<!-- 読み込みたいtextarea -->
<textarea id="textarea">sample!!</textarea>

<!-- クッリクした際に、テキストエリア内の文字列をダウンロードさせたい -->
<a href='javascript:download()' id="edit-btn">ダウンロード</a>

<script>
    function download() {
    // テキストエリア内の文字列を取得する
    const text = document.getElementById('textarea').value;

    // 下記に続く.....

}
</script>

取得した文字列でBlobを作成し、BlobをURLに変換

Blobはバイナリデータであるため、テキストファイルだけではなく画像やPDFなどいろいろな形式のファイルを扱うことができます。
また、JavaScriptのデータをBlobにすることで、ファイルにすることが可能です。

参照: BlobをJavaScriptで使う方法を現役エンジニアが解説【初心者向け】

追記部分のみ
上記のコードの「下記に続く」に追加していく

index.html

<script>
    // 取得した文字列をBlob形式に変換
    let blobedText = new Blob([text], {type: 'text/plain'});

    // BlobをURLに変換
    let url = URL.createObjectURL(blobedText);
</script>

ダウンロード可能なa要素を作成する

追記部分のみ

index.html

<script>
    // ダウンロード可能なa要素を作成する
    let link = document.createElement('a');
    link.href = url;
    link.download = 'ダウンロード時のファイル名(例えば、sample.txt)';
    // 要素の追加
    document.body.appendChild(link);
</script>

作成したa要素をクリックし、削除

追記部分のみ

index.html

<script>
    // linkをclickすることでダウンロードが完了
    link.click();

    // 「link」は不要な要素になるので、link要素を削除
    link.parentNode.removeChild(link)
</script>

全体のコード

index.html

<!-- 読み込みたいtextarea -->
<textarea id="textarea">sample!!</textarea>

<!-- クッリクした際に、テキストエリア内の文字列をダウンロードさせたい -->
<a href='javascript:download()' id="edit-btn">ダウンロード</a>

<script>
    function download() {
        // テキストエリア内の文字列を取得する
        const text = document.getElementById('textarea').value;

        // 取得した文字列をBlob形式に変換
        let blobedText = new Blob([text], {type: 'text/plain' });

        // BlobをURLに変換
        let url = URL.createObjectURL(blobedText);

        // ダウンロード可能なa要素を作成する
        let link = document.createElement('a');
        link.href = url;
        link.download = 'ダウンロード時のファイル名(例えば、sample.txt)';
        // 要素の追加
        document.body.appendChild(link);

        // linkをclickすることでダウンロードが完了
        link.click();

        // 「link」は不要な要素になるので、link要素を削除
        link.parentNode.removeChild(link)
    }
</script>

まとめ

ポイントは

• Blob形式に変換することで、JavaScriptのデータをファイルにすることができる
• ダウンロードリンクを作ること

最後までお読みいただきありがとうございます。

コールバック関数について学んだので、初心者なりにまとめてみます。

コールバック関数

コールバック関数とは、ある関数を呼び出す際の引数として渡される引数のことである。

main.js

function hello(name){
  console.log('hello ' + name);
}

hello('hoge');

コンソール出力結果

hello hoge

---

上記例では関数helloを呼び出す際、引数に'hoge'という文字列を渡しているが、この引数に関数を渡すことができ、これをコールバック関数という。
コールバック関数を引数に渡す場合は、

①変数として定義した関数を渡す
②( )内に無名関数をそのまま記述する

の２通りがある。
どうゆうことかというと、

main.js

function hello(callback){
  console.log('hello ' + callback());
}

//関数宣言
const myName = function(){
  return 'hoge';
}
hello(myName);


//無名関数
hello(function(){
  return 'fuga';
});

コンソール出力結果

1. hello hoge
2. hello fuga

---

ちなみに、関数を呼び出す際は関数名に( )をつけることで関数の実行を意味するため、変数宣言した関数をコールバック関数として渡す場合( )は不要となる。

次にコールバック関数自身に引数を渡す場合を考える。

main.js

function calc(a, b, callback){
  console.log(callback(a, b));
};

// 1.渡した数値を足し合わせる関数
const plus = function(a, b){
  return a + b;
}

// 2.渡した数値を引く関数
const minus = function(a, b){
  return a - b;
}

calc(3, 3, plus);
calc(3, 3, minus);

コンソール出力結果

1. 6
2. 0

---

上記のようにcalc関数の引数にコールバック関数(それぞれplusとminus)と値を渡し、引数が渡った先のcalc関数内でこの値をコールバック関数の引数に与える。
コールバック関数の引数に与えた値はコールバック関数の宣言時の関数処理に渡り、戻り値として結果が出力される。
少々ややこしいので理解するまで時間がかかりましたが、コールバック関数を渡す際の値と、コールバック関数名を確認すれば何をしようとしているのか想像がつきます。

JavaScriptのメカニズムは理解が難しく、まだ10％も理解できていませんが、コツコツ積み上げて理解を深めていきたいと思います。
不備や修正点などございましたらご指摘していただけると幸いです。

みんなが使ってるmoment.js
便利ですが、ちょっと日付を変換したいだけなのに
いちいちnpm installしたり、require()したりで少々めんどくさくもあります。

今日はもしかしたら皆さんは日常的に使われているかもしれませんが、Javascriptの標準組み込みオブジェクトである、
Dateオブジェクトを使っていきたいと思います。

日付の変換方法

const date = new Date("2020-11-18T13:05:08.357Z") //Dateオブジェクトのインスタンスを作成　詳しくはDateコンストラクタにて
const date_formatted = date.toLocaleDateString("ja-JP") //日本で使われるフォーマットを指定
console.log(date_formatted);//=>2020/11/18

出力結果

2020/11/18

このように簡単に日付の変換を行えます。

Dateコンストラクタ

以下の形でDateインスタンスを作成できるようです。

1.引数なし
2.時刻値またはタイムスタンプ値
3.タイムスタンプ文字列
4.独立した日付と時刻の成分の値

詳細は以下で=>https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/Date

日付の変換

Dateインスタンスのメソッドの一つであるtoLocaleDateStringを使います。

構文

dateObj.toLocaleDateString([locales[, options]])

localesには地域名、言語名などを指定できます。
なので、ここを"ar-EG"なんかにすると、

~
const date_formatted = date.toLocaleDateString("ar-EG") 
console.log(date_formatted);

出力結果

الأربعاء، ١٨ نوفمبر ٢٠٢٠ 

このようにアラビア語にしたりもできます。

次にoptionsには出力時のオプションなどを指定できます。

const format_options = {
        weekday: "long",
        year: "numeric",
        month: "long",
        day: "numeric",
      };
const date = new Date("2020-11-18T13:05:08.357Z",format_options) 
const date_formatted = date.toLocaleDateString("ja-JP") 
console.log(date_formatted);

出力結果

2020年11月18日水曜日

オプション等の詳細はここを参照=>https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString

おわりに

所詮中学生の浅知恵の可能性もあるので、鵜呑みにはしないでください。
今日は個人的な発見を書いてだけの記事を読んでくださりありがとうございました。