20200926のNode.jsに関する記事は9件です。

投稿日：2020-09-26T19:30:21+09:00

簡単電子レシート receiptline で Web フォントを使ってみた

前回は、変換ライブラリに手を加えて、紙レシートの行間隔を調整しました。
今回は、紙ではなく電子レシートのフォントを変更してみようと思います。

標準のフォント

ReceiptLineをCLIでSVG変換のコマンドラインツールを使って SVG に変換します。
$ ./rltosvg 32 cp932 receipt.txt receipt.svg
入力データ
receipt.txt
{image:iVBORw0KGgoAAAANSUhEUgAAAIAAAAAwAQMAAADjOuD9AAAABlBMVEUAAAD///+l2Z/dAAAAZklEQVQoz2P4jwYYRrrABwYGOwYG5gMMDBUMDPxAgQcMDDJAgQYGhgJcAv//yMj//9/8//+HerAZRAsAzUASAJoGMhRF4AC6ANCIAhQz8AkAXQoUOIDidBQBkG8hAj8gAqPJAa8AAGjulhOsX97yAAAAAElFTkSuQmCC}
            市ヶ谷駅前店
    東京都千代田区九段1-Y-X

2019年 2月19日(火) 19:00
{border:line}
^領　収　証
{border:space}
{width:*,2,10}
ビール                 | 2|    ¥1,300
千鳥コース             | 2|   ¥17,280
-------------------------------------
{width:*,20}
^合計             |          ^¥18,580
現　　金          |           ¥20,000
お 釣 り          |            ¥1,420
出力データ

出力データのフォント指定部分です。
receipt.svg
<g font-family="'MS Gothic', 'San Francisco', 'Osaka-Mono', 'Courier New', 'Courier', monospace" fill="#000" font-size="24" dominant-baseline="text-after-edge">
Windows では「ＭＳゴシック」、Mac では「San Francisco」、他の環境ではデフォルトの等幅フォントで表示されると思います。

異なる環境で表示を合わせるには、ビットマップ画像に変換するか、フォントを手作業でインストールしなければなりません。

Web フォントに変更

フォントのインストール作業を回避する方法があります。
そう、Web フォントです。ここでは Google Fonts を使います。
https://fonts.google.com/

変換ライブラリ lib/receiptline.js を変更します。

<style> を追加

font-family を変更

font-size を調整

以下は変更部分の抜粋です。フォントは「Kosugi Maru」を指定しています。
lib/receiptline.js
//
// SVG
//
const _svg = {
    ...
    // start printing:
    open: function (printer) {
        ...
        this.fontFamily = "'Kosugi Maru', monospace";
        return '';
    },
    // finish printing:
    close: function () {
        const style = '<style>@import url("https://fonts.googleapis.com/css2?family=Kosugi+Maru&amp;display=swap");</style>';
        const fontSize = 24;
        return `<svg width="${this.svgWidth}px" height="${this.svgHeight}px" viewBox="0 0 ${this.svgWidth} ${this.svgHeight}" preserveAspectRatio="xMinYMin meet" ` +
            `xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">` +
            `<defs>${style}<filter id="receiptlineinvert" x="0" y="0" width="100%" height="100%"><feFlood flood-color="#000"/><feComposite in="SourceGraphic" operator="xor"/></filter></defs>` +
            `<g font-family="${this.fontFamily}" fill="#000" font-size="${fontSize}" dominant-baseline="text-after-edge">${this.svgContent}</g></svg>\n`;
    },
    ...
};
フォントをいろいろ変えて、コマンドラインツールで変換してみます。

Kosugi Maru

style

<style>@import url("https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap");</style>

font-family

'Kosugi Maru', monospace

font-size

24

Kosugi

style

<style>@import url("https://fonts.googleapis.com/css2?family=Kosugi&display=swap");</style>

font-family

'Kosugi', monospace

font-size

24

Sawarabi Mincho

style

<style>@import url("https://fonts.googleapis.com/css2?family=Sawarabi+Mincho&display=swap");</style>

font-family

'Sawarabi Mincho', monospace

font-size

20

Ubuntu Mono & Kosugi Maru

style

<style>@import url("https://fonts.googleapis.com/css2?family=Ubuntu+Mono&family=Kosugi+Maru&display=swap");</style>

font-family

'Ubuntu Mono', 'Kosugi Maru', monospace

font-size

24

Cutive Mono & Noto Serif JP (Extra-light 200)

style

<style>@import url("https://fonts.googleapis.com/css2?family=Cutive+Mono&family=Noto+Serif+JP:wght@200&display=swap");</style>

font-family

'Cutive Mono', 'Noto Serif JP', monospace

font-size

22

Amatic SC (Bold 700) & Noto Sans JP (Thin 100)

style

<style>@import url("https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700&family=Noto+Sans+JP:wght@100&display=swap");</style>

font-family

'Amatic SC', 'Noto Sans JP', monospace

font-size

22

まとめ

最適なフォントは、日本語は「Kosugi Maru」「kosugi」、英語は「Ubuntu Mono」でした。
monospace であっても縦横比 2 : 1 のフォントは少ないです。

等幅フォント・全角・半角・倍角は、今や絶滅危惧種。
レシートプリンターは、初期のワープロの生きた化石です。

　 Tweet
Qiitaで続きを読む

投稿日：2020-09-26T17:46:01+09:00

Node.jsのインストール

インストール方法

変なところでつまづいたので、記録のために記載します。

ディレクトリの作成
$ mkdir -p ~/.nodebrew/src
Nodebrewのインストール
$ brew install nodebrew
Node.jsのインストール

nodebrew ls-remoteでダウンロードできるバージョンを確認できます。
今回はstable = 安定版を選択
バージョンを指定する場合は　{version}
$ nodebrew install-binary stable
Node.jsの有効化　※忘れがち

インストールしただけでは有効化していません。
$ nodebrew use vインストールしたバージョンのいずれかを指定
環境パス

nodeが使えるように環境パスを通します。
$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zprofile
無事使用できるかの確認

実行後、バージョンが表示されればOK
$ node -v

　 Tweet
Qiitaで続きを読む

投稿日：2020-09-26T17:27:25+09:00

Node.jsでExcel⇒JSON、JSON⇒Excel変換するサンプル

やること

1．ExcelファイルをJSONで取得。
2．JSONの編集後、新しいExcelファイルに出力する。

環境

Node.js

・インストール
　 https://nodejs.org/ja/
　推奨版(執筆時点：12.18.4)

・package.jsonの作成
　作業用ディレクトリで以下を実行する。
　node init -y（-y：全てYesでデフォルト設定）

xlsx(npm package)

・インストール
　npm install xlsx

・公式
　 https://www.npmjs.com/package/xlsx

実装

前提

・本の貸出履歴から、各ユーザの未返却履歴のみを抽出する状況を想定。
・履歴データはユーザIDと書籍コードで管理されているため、抽出データは氏名と書籍名を追加する。
・データは以下とする。（BookLendingHistory.xlsx）

＜貸出履歴＞

＜ユーザマスタ＞

＜書籍マスタ＞

Excelファイルの読込
index.js
let XLSX = require('xlsx')
let workbook = XLSX.readFile('BookLendingHistory.xlsx', {cellDates:true})
// cellDates（日付セルの保持形式を指定）
// false：数値（シリアル値）[default]
// true ：日付フォーマット
データ取得(JSON)

シート毎にJSONで取得します。
index.js
let history, users, books
workbook.SheetNames.forEach(sheet =&gt; {
    if("history" == sheet) history = XLSX.utils.sheet_to_json(workbook.Sheets[sheet])
    if("users" == sheet) users = XLSX.utils.sheet_to_json(workbook.Sheets[sheet])
    if("books" == sheet) books = XLSX.utils.sheet_to_json(workbook.Sheets[sheet])
})
history（貸出履歴）
※データが無いセルのJSONプロパティは取得されません。（返却日時）

users（ユーザマスタ）

books（書籍マスタ）

抽出

返却日時が無い履歴を抽出します。
index.js
let notReturned = history.filter(function(item) {
    return !("返却日時" in item) 
})
抽出結果

加工

ユーザ名と書籍名を加えたJSONを作成します。
index.js
let notReturnedReport = []
notReturned.forEach(item =&gt; {
    item.ユーザ名 = getUserName(item)
    item.書籍名 = getBookName(item)
    notReturnedReport.push(item)
})

/**
 * JSON内のユーザIDに一致するユーザ名を返す
 * @param {*} item 
 */
function getUserName(item){
    let userName = ""
    users.some(function(user) {
        if(user.ユーザID == item.ユーザID) userName = user.ユーザ名
    })
    return userName
}

/**
 * JSON内の貸出書籍コードに一致する書籍名を返す
 * @param {*} item 
 */
function getBookName(item){
    let bookName = ""
    books.some(function(book) {
        if(book.書籍コード == item.貸出書籍コード) bookName = book.書籍名
    })
    return bookName
}
加工結果

出力(Excel)

新しいExcelファイルに書き出します。
index.js
let exportBook = XLSX.utils.book_new()
let sexportSheet = XLSX.utils.json_to_sheet(notReturnedReport)
XLSX.utils.book_append_sheet(exportBook, sexportSheet, "sheetName")
XLSX.writeFile(exportBook, "NotReturnedReport.xlsx")
出力されたExcelファイル

Github

Sample of Excel to JSON or JSON to Excel

　 Tweet
Qiitaで続きを読む

投稿日：2020-09-26T16:31:49+09:00

[Node.js]Express Validatorが使えない？？

こちらの書籍を使ってNode.jsの学習をしてました。(ちなみに今回私が使用しているのは初版です)

Node.js超入門第3版

Express Validatorが使えない？？

そこで学習を進めていると、以下のエラーが吐かれました。
TypeError: validator is not a function
    at Object.<anonymous> (作業フォルダ/app.js:38:9)
validatorが関数ではありませんと言われてしまいました。

そこで該当するソースコードをチェックしてみます。
app.js
var validator = require('express-validator');

（省略）

app.use(validator()); //エラーの該当部分
validatorを利用する前には、requireでモジュールをロードして、変数validatorで定義しています。
スペルミスもないです。

なぜエラーが？？？

とそこで、この書籍はメルカリで購入した初版だったこともあり、誤字や古い情報がちょこちょこあるのを思い出しました。
それで以下から
正誤表
を確認すると

やっぱりあった！！

本書で使用している Express Validator は、現在 ver.6 となり、仕様が変更されているため、本書の記述の通りでは正常
に動作しなくなっています。
Express Validator をインストールする際、以下のようにして ver. 5 をインストールしてご利用下さい。
・既に最新版をインストールしている場合、アンインストール
npm uninstall express-validator
・ver.5 をインストール
npm install --save express-validator@5.3.1
引用：Node.js 超入門［第 2 版］【正誤表】 - 秀和システム

そもそもアプリにインストールしていた、Express Validatorに原因がありました。

正誤表の通りに再度、Express Validatorをインストールして無事エラーは解決しました。

なるべく新しい書籍を選ぶようにしたいけど、新品は高くて...~~(もっと給料上げて~)~~

　 Tweet
Qiitaで続きを読む

投稿日：2020-09-26T15:25:50+09:00

slack appつくってみた

slack appを業務改善で使ってみたいと思い、つくってみた備忘録残したいと思います。
今回の環境はCodeSandboxで作ってみました。

用意するもの

・slackアカウント
・GitHubアカウント

やること

■slackアプリの設定1

・slackアプリの作成
・botスコープの構成
・アプリをslackにインストール

■CodeSandboxのセットアップ

・ログイン（ここでGitHubアカウントを持っているとスムーズです）
・sandbox作成
・認証情報の設定
・リクエストURLの設定

■slackアプリの設定2

・インタラクティブコンポーネントの設定
・スラッシュコマンド or ショートカットキーの設定
アプリをslackに再インストール

参考URL：https://github.com/seratch/bolt-starter

slackアプリの設定1

アプリを作りたいslackワークスペースにログインしている状態から
https://api.slack.com/apps にアクセスし、slackアプリを作ります。
「Create new App」でアプリを作れます。

アプリを作成後、左メニューバーのAccess Features > OAuth & Permissionsからbotスコープの設定をします。
( https://api.slack.com/apps/{APP_ID}/oauth ）
app_mentioned:read
chat:write
commands

最後にアプリをワークスペースにインストールをします。
Access Settings > Install App からアプリをインストールし、botトークンを取得します。（xoxb-*****）
(https://api.slack.com/apps/{APP_ID}/install-on-team)

（※ここで許可するが選択できない場合はこっちの記事を参考にしていただきたいです）

CodeSandboxのセットアップ

GitHubアカウントでサインインします
https://codesandbox.io/

新しいサンドbotを作成。
Create Sandboxから作成
Import Projectタブに移動
テキストボックスにhttps://github.com/seratch/bolt-starterを入力し、import and Forkをクリック

サンドボックスを作成後、テンプレートプロジェクトをフォークするために、デプロイをします。

次に、独自のサンドボックスプロジェクトにシークレットを設定します。
ここで、先程作成したslackアプリの管理画面から、SLACK_BOT_TOKENとSLACK_SIGNING_SECRETを使用します。
（Name：Value）
SLACK_SIGNING_SECRET ： Basic Information > App Credentials > Signing Secret
SLACK_BOT_TOKEN ： Settings > Install App（例：xoxb-*****）

（シークレットを設定後、サンドボックスに反映されない場合は、Restart Sandboxボタンをクリックすると、リスタートされます。）

サンドボックスの右側にURLが表示されていると思います。
そのURLをコピーしておいてください。★

slackアプリの設定2

slack管理画面に戻り、Feature > interactivity & Shortcuts からinteractivityの設定をONにします。
RequestURLには先程sandboxの★でコピーしたURLを貼り付け、最後にslack/eventsを付け足します。
（今回はslash commandsで試しますが、このショートカットで設定するとショートカットからslack appを動かすことも可能です。）

次に、コマンドの設定をします。
Feature > Slash Commands からコマンドを新しく作成します。
commandには実際にslackで入力するコマンド（ここでは/open-modalにしています）
Request URLには先程sandboxの★でコピーしたURLを貼り付け、最後にslack/eventsを付け足します。
Short Descriptionにはcommandと同じものを一旦入力しておきます。

コマンド設定が終わったら、再度アプリを再インストールする必要があるので、
Settings > Install App から再インストールをしてください。

これで完成です！
slackで先程設定したコマンドを入力すると、モーダルがでてくるようになると思います！

　 Tweet
Qiitaで続きを読む

投稿日：2020-09-26T14:59:13+09:00

IFTTT改悪対策

IFTTTの改悪、もとい有料化に伴って
３つまでしか登録できなくなってしまった。
我が家のIOT環境では大打撃です。

うちは今下の感じになっている。
Google Home → IFTTT →　Slack → Hubot → rm mini3の
（参照）：Smart Home - Google Homeの喋らせ方　様
https://scrapbox.io/smart-home/Google_Homeの喋らせ方

自宅IOT環境を
IFTTTのフリーの３つまでの登録でどうにかしてみる。

そしてこれは　その備忘録。

構想としては下。

IFTTTのトリガーのGoogleAssistantの設定は
すべて頭に「[お願い]◯◯して」とする
もしくはgooglehomeのショートカット機能を利用して「電気消して」を「お願い電気消して」に変換する

アクションは
webhookで
raspberry pi上で実行しているnode.jsに渡す
google homeからということがわかるように
頭に[%GH%]とかつける。
http://xxxx/google-home-notifier?text=%GH%xxxxxxx
みたいな感じ

node.js上で
[%GH%]以降の文字列を判別してアクションを起こす。

アクションの選択は
RedisかGoogle SpreadSheetを使って変換テーブルみたいな感じにする。
あとで編集が楽だからGSSかな？スピード重視でRedisにするかも・・

アクション自体は
Raspberry上にアクション用のShellファイルを作成しておく。
Slackに送信、Lineに送信、RmMini3に送信などを作成しておいて、引数つけて実行する。
また、連続実行できるように、複数実行機能もつける

最後に実行完了を声でお知らせ
お知らせもVoiceTextを使って良い声を使う。

これができたらIFTTTで３つのみでもOKになる・・・はず。

まだできてないもの：
1.Node.jsでGSSをアクセス
　googlehomeからの文字列から、アクション種別、引数1、引数2、引数3、終了メッセージを返す
2.GSSのデータを正規表現で取得（REGEXEXTRACT関数利用）
3.ShellでRmMini3を実行
4.複数実行機能の実装
5.ShellでLine送信（優先度低）

これらを記事にする。

なお、すでにできているもの：
・Raspberry Piの設定
・Node.jsの設定
・Googlehomenotifierの設定
・VoiceTextの設定
・hubotの設定
・ShellでSlack送信
・ifttt側の設定
・Shellでmotion実行・停止
・Ngnixとかの設定

これらは後で忘れないようにそのうち記事にする。

　 Tweet
Qiitaで続きを読む

投稿日：2020-09-26T13:27:56+09:00

[Mac]node環境構築メモ

目的

「りあクト!TypeScript で始めるつらくない React 開発第3版」を購入したところ、
本の環境構築にはnodenvを使ってたので、せっかくなのですでにあるnvmをアンインストールしてnodenvをインストールする。

1. node.jsをアンインストールする

1.1 nodebrewをアンインストール
% brew uninstall nodebrew
そしてvimで~/.zshrc ファイルのnodebrewのパスを消す。(ファイルはシェルの種類に合わせる .bash etc）
/
※なぜかアンインストールしても、nodebrewのディレクトリは残ったままなんですが、これは消していいものか、、、（誰か教えてください）

2. nodenvをインストールする

2.1 any.envをインストール
% brew install anyenv
% echo 'eval "$(anyenv init -) >> ~/.zshrc //パス関連のコードが展開されるよう
% exec $SHELL -l // シェルスクリプトを実行
% anyenv install nodenv
% exec $SHELL -l
3. nodenv関連のプラグインをインストール
% mkdir -p $(anyenv root)/plugins //anyenvプラグイン用のディレクトリを作成
% git clone https://github.com/znz/anyenv-update.git $(anyenv root)/plugins/anyenv-update // git cloneしてきたプラグインを上のディレクトリ直下に保存
% mkdir -p "$(nodenv root)"/plugins //なんでこっちは""を使っているのか不明？？
% git clone https://github.com/nodenv/nodenv-default-packages.git "$(nodenv root)/plugins/nodenv-default-packages"
% touch $(nodenv root)/default-packages
default-packagesの中身は以下にする。

yarn
typescript
ts-node
typesync

anyenv-update: .env関連のアップデート同時にでくるパッケージ。

4. node.jsをインストール
% nodenv install -l
% nodenv install 14.12.0  //リストからversion選ぶ
% nodenv global 14.12.0
% node  //起動確認
捕捉

他の.env関連のツールを入れている場合はanyenvにまとめるか削除した方が良さそう。

.envファイルを.anyenvへ統合
% ls -d ~/.*env //他の.envの存在を確認
% mv ~/.rbenv ~/.anyenv/envs/rbenv //rbenvの場合　
さらに.zshrcなどに書かれたrbenvのパス関連のコードを消す。

　 Tweet
Qiitaで続きを読む

投稿日：2020-09-26T12:28:42+09:00

gulp超入門

はじめに

「この記事を見ればgulpの環境構築の手順が分かる！」という記事です。

この記事を執筆した理由は「フロントエンドエンジニア目指しています！」という方と話をする中で、gulpやwebpackを知らない方が思ったより多かったからです。

初めてgulpを触るという方に向けてイチから解説しており、
環境構築の手順から、実際にSassをCSSにコンパイルするところまで行ないます。

現場ではgulpやwebpackといったツールを使うことが当たり前なので、この記事でgulpのことを知り、理解を深めるきっかけになれば幸いです。
参考になったらぜひLGTMをお願いします！！

gulpとは

gulpとはNode.jsで動かすタスクツールです。
一例としては以下のようなひと手間かかる作業を自動化することができます。

Sassのコンパイル

CSSにベンダープレフィックスを自動で付与

CSSやJavaScript、画像の圧縮

ブラウザの自動リロード

ソースマップの作成

gulpを導入するメリット

gulpを導入するメリットは色々とありますが、下記の3点はチーム開発においてとても重要なことです。

煩雑な処理を自動で行うことができるため、作業を効率的に進められる。

自動化により、人的ミスが減ることで作業時間を短縮できる。

複数人での作業環境を統一することができ、一定の品質を保った開発が可能になる。

例えばSassのコンパイルは様々な方法があります。

VSCodeでコンパイル

ターミナルでコンパイル

Dreamweaverでコンパイル

複数人で開発する場合、コンパイル方法が人によってバラバラだとコードに差分が生まれ、品質を一定に保つことができません。
gulpやwebpackを使うことでチーム内でコンパイル方法を統一することができ、品質を一定に保つことが可能になります。

インストールの流れ

下記の手順で、イチから説明していきます。

Node.jsをインストール

npmをインストール

gulpのインストール

gulpfile.jsのインストール

プラグインのインストール

タスクの登録

コンパイルの実行

事前準備

この記事で解説しているディレクトリ構成図です。
ディレクトリ構成図
gulp_lesson
 ├ dist
 ├ node_modules
 ├ src 
 │  └ sass
 │     └ app.scss
 ├ package.json
 └ gulpfile.js
この記事執筆時点で使用した各パッケージのバージョンです。

パッケージバージョン

Node.js 12.14.1

npm 6.13.4

gulp 4.0.2

gulp-sass 4.1.0

Node.jsをインストール

まずはNode.jsがインストールがインストールされているか確認します。
ターミナル
$ node -v
ターミナルでこちらのコマンドを叩いてNode.jsのバージョンが表示されていればインストールされています。
インストールされていない場合はNode.jsの公式サイトからインストールします。

Node.js公式サイト

LTS版と最新版がありますが、LTS版をインストールすることをおすすめします。

インストール後に先ほどのコマンドを叩いてバージョンが表示されればインストールは完了です！

npmをインストール

npmとは「node package manager」の略で、Node.jsのパッケージを管理するためのシステムのことです。
gulpで使うプラグインと考えていただいたら良いでしょう。

npm公式サイト

まずはnpmをインストールします。
ターミナル
$ npm init
以下の内容を入力する必要がありますので適宜変更してください。
（特に指定がなければEnterで進んでください）

package name

version

description

entry point

test command

git repository

keywords

author

license

入力が終わり、package.jsonが作成されていればnpmのインストールは一旦完了です。

gulpのインストール

次にgulpをインストールします。
今回はグローバルでインストールを行います。
ターミナル
$ npm install gulp -g
グローバルとローカルの違いは下記の通りです。

グローバルインストールはそのPC上のどこからでも利用可能

ローカルインストールはそのプロジェクトのフォルダ内でのみ適用

gulpfile.jsの作成

次にgulpfile.jsを作成します。

先ほど作成したpackage.jsonと同じディレクトリにgulpfile.jsというファイルを作成し、
gulpfile.jsを開き、下記のコードを追加します。
gulpfile.js
var gulp = require("gulp");
gulpでSassをコンパイル

コンパイルとは、プログラムのソースコードをコンピューターが実行可能な機械語に翻訳することです。
gulpでSassをコンパイルしてCSSに変換し、機械が解読できるようにしてみましょう。
今回はScss記法で行います。

まずsassフォルダを作成し、app.scssを作成しましょう。

Sassファイルの中身はこんな感じで。
app.scss
.hoge {
    font-size: 24px;

    &__hoge {
        color: #3399cc;
    }
}
プラグインのインストール

Sassをコンパイルするために必要なgulp-sassというプラグインをインストールします。

npm公式サイト / gulp-sass
ターミナル
$ npm i gulp-sass --save-dev
こちらを実行するとpackage.jsonにgulp-sassがインストールされていることが確認できます。
package.json
"devDependencies": {
    "gulp-sass": "^4.1.0"
  }
タスクの登録

プラグインのインストールが終わったら、gulpfile.jsにタスクの登録をします。
gulpfile.js
var sass = require("gulp-sass");

gulp.task("sass", function () {
    return gulp
        .src("./src/sass/**/*.scss")
        .pipe(sass().on("error", sass.logError))
        .pipe(gulp.dest("./dist/css"));
});
タスクの書き方は先ほど紹介したnpm公式サイトに記載されています。

npm公式サイト / gulp-sass

タスクの書き方について少し解説しておきます。

require('プラグイン名') → 使用するプラグインを読み込みます

gulp.task('タスク名', 実行される処理) → タスク名と、実際に行う処理を記述します。

gulp.src('取得するファイル') → タスクの対象となるファイルを取得します。

pipe() → 1つ1つの処理をつなげます。前述のコードでは、src()で取得したSassファイルをコンパイルし、それをgulp.dest()で書き出しています。pipe()メソッドは繋げることができるので、連続した複数の処理を行うことができます。

gulp.dest('保存先フォルダー') → 処理を行ったファイルを指定の場所に保存します

コンパイルの実行

いよいよコンパイルを行います。
先ほど登録したタスクの"sass"という箇所がタスクの名前です。
ターミナルにコマンドを叩いて実行します。
ターミナル
$ gulp sass
先ほどのSassファイルがコンパイルされてCSSファイルになっているはずです。
app.css
.hoge {
  font-size: 24px; }
  .hoge__hoge {
    color: #3399cc; }
インデントがズレていたりしますが、オプションを追加すれば変更することもできます。
何度も紹介しているnpm公式サイトに「Options」という箇所があるのでお好みでどうぞ。

npm公式サイト / gulp-sass

gulp4では関数宣言とexportsが推奨に

本記事執筆時点では、task()メソッドによるタスク定義は公式が非推奨とされています。
（一応使えるのですが...）

[参考] task( ) / gulp.js

推奨されているのがタスクごとに関数をつくる方法です。
前述のコードを書き換えたものがこちら。
gulpfile.js
function SassCompile() {
    return gulp
        .src("./src/sass/**/*.scss")
        .pipe(sass().on("error", sass.logError))
        .pipe(gulp.dest("./dist/css"));
}
exports.default = SassCompile;
タスクを実行します。
ターミナル
$ npx gulp
書き出されたCSSのコード自体は一緒です。

便利なプラグイン（余談）

gulpを始めたばかりの方向けに便利なプラグインを紹介します。
（こちらの記事では詳細は解説しません。ご容赦ください）

gulp-sass

gulp-autoprefixer

gulp-groupcss-mediaqueries

gulp-rename

gulp-sourcemaps

browser-sync

gulp-imagemin

imagemin-mozjpeg

imagemin-pngquant

最後に

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

gulpはwebpackに比べると学習コストが低く、導入しやすいと思いますのでぜひ導入してみてください。

　 Tweet
Qiitaで続きを読む

投稿日：2020-09-26T10:56:40+09:00

【Firebase】FireStoreに一括でcsvまたはjson形式のデータをアップロードする

概要

FireStoreは、モバイル開発においてとても便利なDatabaseの一つですが、データの一括importが少々手間取ったので方法を記載しておきます。

Step1: Jsonデータの用意

私の場合はMacのNumbersを使用して、CSVを作成し、CSV→Json変換サイトを用いてjsonデータに変換しています。

Step2: Service Key をFirebaseコンソールよりダウンロード

Service Key をFirebaseコンソールよりダウンロードします。

Step3: node.js プロジェクトの設定

上記のコマンド実行後、実行したディレクトリにPackage.jsonが生成されます。
Step1で生成したjsonファイル(data.json)Step2で生成したServiceKeyのファイル(serviceAccountKey.json)も同ディレクトリ内に格納します。

Step4: index.jsの作成

terminalで以下を実行。
npm install firebase-admin

すると、node_moduleというディレクトリが生成されます。

Firestoreにimport用のプログラムを作成します。
index.js
const admin = require('./node_modules/firebase-admin');
const serviceAccount = require("./serviceAccountKey.json");

const data = require("./data.json");
const collectionKey = "words"; //Change!! name of the collection

admin.initializeApp({
  credential: admin.credential.cert(serviceAccount),
  databaseURL: "https://your-database.firebaseio.com" //Change!! your database URL
});

const firestore = admin.firestore();
const settings = {timestampsInSnapshots: true};
firestore.settings(settings);

if (data && (typeof data === "object")) {
    Object.keys(data).forEach(docKey => {
        firestore
        .collection(collectionKey)
        .doc(docKey)
        .set(data[docKey])
        .then((res) => {
            console.log("Document " + docKey + " successfully written!");
        }).catch((error) => {
            console.error("Error writing document: ", error);
        });
    });
}
Step4: 実行
node <Your_Project_Folder_Name>
すると
以下のように一括でインポートされました。

その他

nodeのバージョンが低いとスプレッド構文が対応していなかったり等あるので、バージョンが最新かどうか確認してください。

参考文献

How to upload data to Firebase Firestore Cloud Database

　 Tweet
Qiitaで続きを読む