draw.io はブラウザを使用してフローチャート、プロセス図、組織図、UML 図、ER モデル、ネットワーク図などを作成できる優れたツールです。作成した図は xml ファイルとして保存でき、GitHub との連携もシームレスに行われます。3 年ほど愛用しているツールですが、隠された使い方がたくさんあります。すぐに忘れてしまうので取りまとめておきます。

「こんな使い方あるよ！オススメだよ！！」という方はぜひ編集リクエストをいただければ追記していく予定です ?

※ 主に参照している文献は以下、公式ブログは非常に分かりやすいのでオススメです。

• ツイッター公式アカウント
• 公式ブログ

ショートカット

ショートカット集です。机の上に置いて覚えましょう。

Line / 線

まずは最も頻繁に使う Line(線)の使い方からご紹介します。

矢印をまっすぐに揃える

ちまちまと矢印の線をドラッグして微調整していませんか？　右メニューから簡単に直線に揃えることができますよ。

線にラベルを挿入する

線上のどこでもいいのでダブルクリックをするとラベルを挿入できます。テキストボックスを作成してから矢印を繋げるよりもずっと早いですね。

Shape をコピーしつつ、矢印もつける（Alt+Shift+十字キー）

Shape をコピーしてから、矢印を引っ張って繋げていませんか？　 Alt+Shift を押しながら十字キーを押してみましょう。これなら 10 倍は効率がいいですね。

Shape をコピーしつつ、矢印もつける（ctrl+drag）

Ctrl キーを押しながら、Shape から引っ張れる青い線を引いてみましょう。あら不思議、Shape が複製されました。Ctrl キーを押しながら青い線をダブルクリックすると線は引かれずに Shape だけが複製されます。

Shape の接続

Shape 間から伸ばす線が勝手に他の Shape にくっついてしまって困ることはありませんか？　そんな時は Ctrl+Shift を押しながら線を引っ張ってみましょう。ちょっとだけ幸せになれますね。その他、Shift キーだけを押しながら線を引っ張ると接続点を無視することもできます。

曲線

デフォルト設定だと直線ですね。曲線ももちろん使えますよ。

Shape / 図形

この章では Shape に関連した Tips をご紹介します。Shape とは１つの図だと思ってください。リソースやオブジェクトなどと呼ばれたりしますが、公式の呼び方は Shape のようです。

画像の切り抜き

画像を丸や四角い形に切り抜きたい場合があります。画像のワンちゃんのかわいさが際立ちますね ?

要素の置き換え Shift+click

Shape を一度置いてみたものはいいものの、もっと適切な形があるので変えたいという時に便利です。Shift を押しながら左メニューの中から Shape をクリックしてみましょう。簡単に置き換えられます。

その他の図形

もっと他の図形も見てみたい、使いたいという方はこちらから。AWS リソースのアイコンなんかもありますよ。

系統図

Shape 間の関係を維持したまま、系統図を自動整形できます。とりあえず線を繋げまくったけど、関係性がわからなくなってきた、ドラッグで１つずつ移動させるのはしんどいなぁという時に便利です。

プレースホルダ（文字埋め込み）

ほとんど知られていませんが、プレースホルダが使えます。特定の条件にあわせて文字列を動的に組み換えることができます。IP アドレスが振られた構成図や、小さな Shape を寄せ集めた図を書く時に重宝しそうですね。公式ブログ ~How to work with placeholders?~ にて詳しく解説されています。

比率を維持したままリサイズ Cmd(Mac) または Ctrl(Windows)

右メニューから比率を固定することもできますが、Cmd キーを押しながらドラッグするだけでリサイズできるショートカットは便利です。

スクラッチパッドにグループを追加する

左メニューのスクラッチバッドに図を追加できます。

Shape をコミカルにする

図の形を漫画風にできます。

フローチャート

様々なフローチャートの書き方を覚えておくと、適切なフォーマットで情報を伝える力が身につきます。以下のブログを読んでおけばよいでしょう。テンプレートも用意されているので、すぐにそれなりのものが出来上がります。

公式ブログ ~Creating different types of flowcharts with draw.io
~

Settings / その他操作、設定など

意外と知られていない設定や操作が存在します。この章ではそんな隠れた Tips をご紹介します。

ズームイン/アウト（Alt or Option) + Mouse

Alt または Option を押しながらカーソルを動かしてみましょう。拡大縮小ができます。ちなみに Ctrl+プラスまたはマイナスでサイズを変更している方は Ctrl+0 を押してみましょう。きっと幸せになれるはずです。

ダークモード

最近流行りのダークモード、もちろんできます。Extras > Theme から設定しましょう。

その他のフォントを使用する

標準のフォント以外にもシステムフォント、Google フォント、Web フォントが使用できます。

設定の共有

draw.io の設定を Json 形式で保存して共有できます。公式ブログ ~How to configure draw.io?~を参照しましょう。

PlantUML

PlantUML をインポートして描画できます。PlantUML の書き方はこちらの記事によくまとまっていました。

ルーラー

細かい微調整にはルーラーが欠かせません。

リンクを作成

作成した図は公開できます。リンクを作成すると画像ファイルの形式で閲覧できます。

埋め込み HTML の作成

作成した図をブログなどに挿入する場合は埋め込み HTML がオススメです。

https://about.draw.io/publish-link-and-embed-html/

CSV から読み込む

Google のスプレッドシートなどで CSV ファイルを管理しておいて、draw.io に読み込ませることができます。
こちらのツールを使用してスプレッドシートと draw.io を連携しましょう。スプレッドシートを更新すると draw.io の図も更新されます。公式ブログ ~Automatically create draw.io diagrams from CSV files~に詳しい説明があります。

プラグイン / 拡張

draw.io には様々なプラグインが用意されています。この章では、その一部をご紹介します。

現在使用できるプラグインの一覧

※ ちなみにプラグインは JavaScript で書かれていました。

Line をアニメーション化

Flow プラグインを使用することで、Line にアニメーションを付与できます。詳細は公式ブログ ~Connector styles and animations in draw.io~を参照してください。

SQL を読み込んで ERD を作成する

SQL プラグインを使用することで CREATE 文から ERD を生成します。

さいごに

ざっと draw.io さん公式から情報を集めてみました。
他にも良い使い方を知っている方は、ぜひ教えてください ?

bullとは

NodeJSで分散ジョブとメッセージを処理するためのキューパッケージです。redisをベースに動作します。
kueの後継的なライブラリです。

確認環境

• node: v10.17.0
• redis ( for windows ): 3.0.504

express-generator にてプロジェクト作成

ここでは、play_node_bullというプロジェクトで作成します。

npx express-generator play_node_bull
cd play_code_bull
npm install

bullのインストール

npm install bull

app.js の編集

app.jsに以下の行を追記します。

App.js

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
+ var jobsRouter = require('./routes/jobs');  

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/users', usersRouter);
+ app.use('/jobs', jobsRouter); 

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

jobs.js の追加

1ブロック目

routesフォルダに、jobs.jsを追加します。
routerとBullを準備します。

routes/jobs.js

const express = require('express');
const router = express.Router();
const Bull = require("bull")

2ブロック目

重い処理のスタブを準備します。

routes/jobs.js

// 重い処理のスタブ
const heavyJob = async () => {
  return new Promise((resolve)=>{
    setInterval(() => {
      resolve();
     }, 10000);
  })  
}

3ブロック目

bullオブジェクトと処理名を定義します。
処理名は、キューの送信と受信を紐づけるキーとなります。

routes/jobs.js

const queue = new Bull('bulltest', { redis: { port: 6379, host: '127.0.0.1' } });

const processor = 'processor_name'; // 処理名

4ブロック目

エンキューするエンドポイントを定義します。
エンキューするqueue.add()には、データオブジェクトを処理名を指定します。

routes/jobs.js

router.post('/', (req, res, next) => {
  const data = { greetingTime: (new Date()).toString() }     // jobのデータ(object)
  queue.add(processor, data);
  res.send('ok');
});

module.exports = router;

5ブロック目

デキューするハンドラを記述します。
queue.process()に処理名と並行処理数、ハンドラ関数を指定します。

routes/jobs.js

const concurrency = 2;  // 並行処理数

queue.process(processor, concurrency, async (job, done) => {
  try {
    await heavyJob();
    done();
  } catch (e) {
    done(e);
  }
});

実行

アプリケーションを実行します。デフォルトでは3000番ポートで待機します。

npm start

APIの呼び出し

curlコマンドで、作成したjobsAPIを呼び出します。

curl -X POST 'http://127.0.0.1:3000/jobs'

jobのオプション

interface JobOpts {
  priority: number, // オプションの優先度。1（最高の優先度）～MAX_INT（最低の優先度）を指定する。パフォーマンスにわずかな影響を与えるため、必要でない限り使用しない。
  delay: number, // このジョブを処理できるようになるまで待機するミリ秒数。正確に遅延するためには、サーバーとクライアントの時刻を同期する必要がある。
  attempts: number, //　ジョブが完了するまでのリトライ回数
  repeat: RepeatOpts, // cron仕様に従ってジョブを繰り返す。
  backoff: number | BackoffOpts, // ジョブが失敗した場合の自動再試行設定。遅延時間を設定するか、{type: 'fixed' or 'exponential')を指定。
  lifo: boolean, // 後入れ先出しにする (default false)
  timeout: number, // タイムアウトエラーでジョブが失敗するまでのミリ秒数
  jobId: number | string, // ジョブIDを上書きする。既に存在するIDを持つジョブを追加しようとしても、追加されない。
  removeOnComplete: boolean | number, // trueの場合、正常に完了したときにジョブを削除します。falseの場合は`completed`セットに保持される。
  removeOnFail: boolean | number, // trueの場合、処理に失敗したときにジョブを削除します。falseの場合は`faild`セットに保持される。
  stackTraceLimit: number, // スタックトレースに記録されるスタックトレース行の量を制限。
}

Google Slides APIをNode.jsから触ってみてます。

• Node.jsでGoogle Slides APIを触ってみる
• Node.jsでGoogle Slides内のテキストを取得してみる
• Node.jsでGoogle Slidesの新規スライド作成

の記事の続きです。

batchUpdate()で更新

presentations.batchUpdateでどうやら更新ができそうです。

presentations.batchUpdate()の

presentations.batchUpdate()の使い方がいまいち分からなかったけど、stackoverflowの投稿を参考に

presentationId: プレゼンテーションIDを指定, 
resource: {
   requests: {
      //ここにリクエストする内容を入れる
   }
}

みたいな使い方というのが分かりました。

app.js

省略

function listSlides(auth) {
  const slides = google.slides({version: 'v1', auth});

  slides.presentations.batchUpdate({
    presentationId: presentationId,
    resource: {
      requests: {
        replaceAllText: {
          containsText: {
            text: "Node.js" //置き換え前のテキスト
          },
          replaceText: "Hoge" //置き換え後のテキスト
        }
      }
    }
  }, (err, res) => {
      if (err) return console.log('The API returned an error: ' + err);
      console.log(res.data);
  });
}

Node.jsというテキストをHogeに書き換えます。

実行

こんな感じで書き換えができました。

所感

今回はreplaceAllTextというリクエストをしましたが、他のリクエスト方法もあるので試していきたいです。

/v1/presentations/request

Firestoreではコレクションを完全に削除するにはその下に紐づいているドキュメントを一個一個全部削除してからそのあと、コレクションを削除しないと、完全に削除できません。

Firestoreのコレクションは削除できない。
削除できないので、全てのドキュメントを取得して一個一個削除していくしかない。

また、ドキュメントを削除してもそのドキュメントの下のサブコレクションは削除できない。

これはめんどくさい? pic.twitter.com/M3sHypt0w0

— shogo.yamada (@yshogo87) February 9, 2020

公式ドキュメント↓
https://firebase.google.com/docs/firestore/manage-data/delete-data?hl=ja

また、FirestoreのBatchでは一度に５００個までしかできないので、５００以上まとめて削除する場合はそれぞれを５００個ずつ分割して削除する必要があります。

公式ドキュメント↓
https://firebase.google.com/docs/firestore/manage-data/transactions?hl=ja

なので、それを考慮して削除するコードを記載します。

実装

const batchArray: admin.firestore.WriteBatch[] = [];
    batchArray.push(db.batch());
    let operationCounter = 0;
    let batchIndex = 0;

    const roomId = chatQuery.docs[0].id;
    const deleteDoc = await db
      .collection("test")
      .doc(testId)
      .collection("docs")
      .get();
    deleteDoc.forEach(doc => {
      batchArray[batchIndex].delete;
      operationCounter++;

      if (operationCounter === 499) {
        batchArray.push(db.batch());
        batchIndex++;
        operationCounter = 0;
      }
    });

    batchArray.forEach(async batch => await batch.commit());

    await db
      .collection("chat_room")
      .doc(roomId)
      .delete();
  }

設定ファイル、サーバープログラム、クライアントプログラムの３つが必要です。

設定ファイル

redis_delete.proto
こちらと同じ
Python の gRPC で Redis のデータを削除 (Delete)

サーバープログラム

redis_delete_server.js

#! /usr/bin/node
// ---------------------------------------------------------------
//  redis_delete_server.js
//
//                  Feb/08/2020
// ---------------------------------------------------------------
var PROTO_PATH = 'redis_delete.proto'

var grpc = require('grpc')

var protoLoader = require('@grpc/proto-loader')
var packageDefinition = protoLoader.loadSync(
    PROTO_PATH,
    {keepCase: true,
     longs: String,
     enums: String,
     defaults: true,
     oneofs: true
    });
var redis_delete_proto = grpc.loadPackageDefinition(packageDefinition).redis_delete

// ---------------------------------------------------------------
function redis_delete_proc(key_in)
{
    const redis = require ("redis")
    const client = redis.createClient (6379,'localhost')

    client.on("error", function (err)
        {
        console.log("Redis connection error to "
            + client.host + ":" + client.port + " - " + err)
        })

    client.del(key_in)

    client.quit()
}

// ---------------------------------------------------------------
function RedisDelete(call, callback) {
    console.error("*** RedisDelete ***")
    const key_in = call.request.key
    const str_out = 'RedisDelete ' + call.request.key
    console.error(str_out)
    redis_delete_proc(key_in)
    callback(null, {key: call.request.key});
}

// ---------------------------------------------------------------
function main() {
    var server = new grpc.Server()
    server.addService(redis_delete_proto.Greeter.service, {RedisDelete: RedisDelete })
    server.bind('0.0.0.0:50051', grpc.ServerCredentials.createInsecure())
    server.start()
}

// ---------------------------------------------------------------
main()
// ---------------------------------------------------------------

クライアントプログラム

redis_delete_client.js

#! /usr/bin/node
// ---------------------------------------------------------------
//  redis_delete_client.js
//
//                      Feb/08/2020
// ---------------------------------------------------------------
var PROTO_PATH = 'redis_delete.proto'

var grpc = require('grpc');
var protoLoader = require('@grpc/proto-loader');
var packageDefinition = protoLoader.loadSync(
    PROTO_PATH,
    {keepCase: true,
     longs: String,
     enums: String,
     defaults: true,
     oneofs: true
    });
var redis_delete_proto = grpc.loadPackageDefinition(packageDefinition).redis_delete

// ---------------------------------------------------------------
function main() {
  var client = new redis_delete_proto.Greeter('localhost:50051',
                                       grpc.credentials.createInsecure())

  var key_in = process.argv[2]
  client.RedisDelete({key: key_in}, function(err, response) {
    console.log('key:', response.key)
  })

}

// ---------------------------------------------------------------
main()
// ---------------------------------------------------------------

サーバープログラムの起動

export NODE_PATH=/usr/lib/node_modules
./redis_delete_server.js

クライアントプログラムの実行

$ export NODE_PATH=/usr/lib/node_modules
$ ./redis_delete_client.js t1855
key: t1855

設定ファイル、サーバープログラム、クライアントプログラムの３つが必要です。

設定ファイル

redis_update.proto
こちらと同じ
Python の gRPC で Redis のデータを更新 (Update)

サーバープログラム

redis_update_server.js

#! /usr/bin/node
// ---------------------------------------------------------------
//  redis_update_server.js
//
//                  Feb/09/2020
// ---------------------------------------------------------------
var PROTO_PATH = 'redis_update.proto'

var grpc = require('grpc')

var protoLoader = require('@grpc/proto-loader')
var packageDefinition = protoLoader.loadSync(
    PROTO_PATH,
    {keepCase: true,
     longs: String,
     enums: String,
     defaults: true,
     oneofs: true
    });
var redis_update_proto = grpc.loadPackageDefinition(packageDefinition).redis_update

// ---------------------------------------------------------------
function get_current_date_proc()
{
    const today = new Date ()
    var ddx = (1900 + today.getYear ()) + "-" + (today.getMonth () +1)
    ddx += "-" + today.getDate ()

    return ddx
}

// ---------------------------------------------------------------
function redis_update_proc(key_in,population_in)
{
    const redis = require ("redis")
    const client = redis.createClient (6379,'localhost')

    client.on("error", function (err)
        {
        console.log("Redis connection error to "
            + client.host + ":" + client.port + " - " + err)
        })

client.get (key_in, function (err, reply)
    {
    if (err)
        {
        console.log("Get error: " + err)
            }
     else if (reply != null)
        {
        var json_str = reply

        var unit_aa = JSON.parse (json_str)

        unit_aa.population = population_in
        unit_aa.date_mod =  get_current_date_proc ()
        var json_out = JSON.stringify (unit_aa)

        console.log (json_out)

        client.set (key_in,json_out, redis.print)
        client.quit()
        }
    })

}

// ---------------------------------------------------------------
function RedisUpdate(call, callback) {
    console.error("*** RedisUpdate ***")
    const key_in = call.request.key
    const population_in = call.request.population
    const str_out = 'RedisUpdate ' + call.request.key
    console.error(str_out)
    redis_update_proc(key_in,population_in)
    callback(null, {key: call.request.key});
}

// ---------------------------------------------------------------
function main() {
    var server = new grpc.Server()
    server.addService(redis_update_proto.Greeter.service, {RedisUpdate: RedisUpdate })
    server.bind('0.0.0.0:50051', grpc.ServerCredentials.createInsecure())
    server.start()
}

// ---------------------------------------------------------------
main()
// ---------------------------------------------------------------

クライアントプログラム

redis_update_client.js

#! /usr/bin/node
// ---------------------------------------------------------------
//  redis_update_client.js
//
//                      Feb/09/2020
// ---------------------------------------------------------------
var PROTO_PATH = 'redis_update.proto'

var grpc = require('grpc')
var protoLoader = require('@grpc/proto-loader')
var packageDefinition = protoLoader.loadSync(
    PROTO_PATH,
    {keepCase: true,
     longs: String,
     enums: String,
     defaults: true,
     oneofs: true
    })

var redis_update_proto = grpc.loadPackageDefinition(packageDefinition).redis_update

// ---------------------------------------------------------------
function main() {
    var client = new redis_update_proto.Greeter('localhost:50051',
                                       grpc.credentials.createInsecure())

    var key_in = process.argv[2]
    var population_in = process.argv[3]
    client.RedisUpdate({key: key_in,population: population_in},
        function(err, response) {
    console.log('key:', response.key)
    })

}

// ---------------------------------------------------------------
main()
// ---------------------------------------------------------------

サーバープログラムの起動

export NODE_PATH=/usr/lib/node_modules
./redis_update_server.js

クライアントプログラムの実行

$ export NODE_PATH=/usr/lib/node_modules
$ ./redis_update_client.js t1857 8234500
key: t1857

設定ファイル、サーバープログラム、クライアントプログラムの３つが必要です。

設定ファイル

redis_read.proto
こちらと同じ
Python の gRPC で Redis のデータを読む (Read)

サーバープログラム

redis_read_server.js

#! /usr/bin/node
// ---------------------------------------------------------------
//  redis_read_server.js
//
//                  Feb/08/2020
// ---------------------------------------------------------------
var PROTO_PATH = 'redis_read.proto'

var grpc = require('grpc')

var protoLoader = require('@grpc/proto-loader')
var packageDefinition = protoLoader.loadSync(
    PROTO_PATH,
    {keepCase: true,
     longs: String,
     enums: String,
     defaults: true,
     oneofs: true
    });
var redis_read_proto = grpc.loadPackageDefinition(packageDefinition).redis_read

// ---------------------------------------------------------------
function redis_read_proc(key_in,callback)
{
    const redis = require ("redis")
    const client = redis.createClient (6379,'localhost')

client.get (key_in, function (err, reply)
    {
    if (err)
        {
        console.log("Get error: " + err)
            }
     else if (reply != null)
        {
        const str_json = reply
        const data = JSON.parse(str_json)

        var out_str = key_in + "\t"
        out_str  += data.name + "\t"
        out_str += data.population + "\t"
        out_str += data.date_mod
        console.log (out_str)
    callback(null, {str_json: str_json})
        }

    client.quit()
    })
}

// ---------------------------------------------------------------
function RedisRead(call, callback) {
    console.error("*** RedisDelete ***")
    const key_in = call.request.key
    const str_out = 'RedisDelete ' + key_in
    console.error(str_out)
    redis_read_proc(key_in,callback)
//  callback(null, {key: key_in})
}

// ---------------------------------------------------------------
function main() {
    var server = new grpc.Server()
    server.addService(redis_read_proto.Greeter.service, {RedisRead: RedisRead })
    server.bind('0.0.0.0:50051', grpc.ServerCredentials.createInsecure())
    server.start()
}

// ---------------------------------------------------------------
main()
// ---------------------------------------------------------------

クライアントプログラム

redis_read_client.js

#! /usr/bin/node
// ---------------------------------------------------------------
//  redis_read_client.js
//
//                      Feb/08/2020
// ---------------------------------------------------------------
var PROTO_PATH = 'redis_read.proto'

var grpc = require('grpc');
var protoLoader = require('@grpc/proto-loader');
var packageDefinition = protoLoader.loadSync(
    PROTO_PATH,
    {keepCase: true,
     longs: String,
     enums: String,
     defaults: true,
     oneofs: true
    });
var redis_read_proto = grpc.loadPackageDefinition(packageDefinition).redis_read

// ---------------------------------------------------------------
function main() {
  var client = new redis_read_proto.Greeter('localhost:50051',
                                       grpc.credentials.createInsecure())

    var key_in = process.argv[2]
    client.RedisRead({key: key_in}, function(err, response) {
//    console.log('str_json:', response.str_json)

    const data = JSON.parse(response.str_json)
    var out_str = data.name + "\t"
    out_str += data.population + "\t"
    out_str += data.date_mod
    console.log (out_str)
  })

}

// ---------------------------------------------------------------
main()
// ---------------------------------------------------------------

サーバープログラムの起動

export NODE_PATH=/usr/lib/node_modules
./redis_read_server.js

クライアントプログラムの実行

$ export NODE_PATH=/usr/lib/node_modules
$ ./redis_read_client.js t1852
敦賀  41295   2003-5-10

設定ファイル、サーバープログラム、クライアントプログラムの３つが必要です。

設定ファイル

redis_create.proto
こちらと同じ
Python の gRPC で Redis のデータを作成 (Create)

サーバープログラム

redis_create_server.js

#! /usr/bin/node
// ---------------------------------------------------------------
//  redis_create_server.js
//
//                  Feb/09/2020
// ---------------------------------------------------------------
var PROTO_PATH = 'redis_create.proto'

var grpc = require('grpc')

var protoLoader = require('@grpc/proto-loader')
var packageDefinition = protoLoader.loadSync(
    PROTO_PATH,
    {keepCase: true,
     longs: String,
     enums: String,
     defaults: true,
     oneofs: true
    });
var redis_create_proto = grpc.loadPackageDefinition(packageDefinition).redis_create

// ---------------------------------------------------------------
function redis_create_proc(key_in,str_json)
{
    const redis = require ("redis")
    const client = redis.createClient (6379,'localhost')

    client.on("error", function (err)
        {
        console.log("Redis connection error to "
            + client.host + ":" + client.port + " - " + err)
        })

    client.set(key_in, str_json, redis.print)

    client.quit()
}

// ---------------------------------------------------------------
function RedisCreate(call, callback) {
    console.error("*** RedisCreate ***")
    const key_in = call.request.key
    const str_json = call.request.str_json
    const str_out = 'RedisCreate ' + key_in
    console.error(str_json)
    redis_create_proc(key_in,str_json)
    callback(null, {key: call.request.key});
}

// ---------------------------------------------------------------
function main() {
    var server = new grpc.Server()
    server.addService(redis_create_proto.Greeter.service, {RedisCreate: RedisCreate })
    server.bind('0.0.0.0:50051', grpc.ServerCredentials.createInsecure())
    server.start()
}

// ---------------------------------------------------------------
main()
// ---------------------------------------------------------------

クライアントプログラム

redis_create_client.js

#! /usr/bin/node
// ---------------------------------------------------------------
//  redis_create_client.js
//
//                      Feb/09/2020
// ---------------------------------------------------------------
var PROTO_PATH = 'redis_create.proto'

var grpc = require('grpc');
var protoLoader = require('@grpc/proto-loader');
var packageDefinition = protoLoader.loadSync(
    PROTO_PATH,
    {keepCase: true,
     longs: String,
     enums: String,
     defaults: true,
     oneofs: true
    })
var redis_create_proto = grpc.loadPackageDefinition(packageDefinition).redis_create


// ---------------------------------------------------------------
function main() {
    var client = new redis_create_proto.Greeter('localhost:50051',
                                       grpc.credentials.createInsecure())

    var key_in = process.argv[2]
    var unit_aa = {}
    unit_aa.name = process.argv[3]
    unit_aa.population = process.argv[4]
    unit_aa.date_mod = process.argv[5]
    const str_json = JSON.stringify (unit_aa)
    console.error(unit_aa.name)
    client.RedisCreate({key: key_in,str_json: str_json},
        function(err, response) {
    console.log('key:', response.key)
    })

}

// ---------------------------------------------------------------
main()
// ---------------------------------------------------------------

サーバープログラムの起動

export NODE_PATH=/usr/lib/node_modules
./redis_create_server.js

クライアントプログラムの実行

$ export NODE_PATH=/usr/lib/node_modules 
$ ./redis_create_client.js t0931 那須烏山 98735 2005-6-12
那須烏山
key: t0931

% npm i firebase
を実行して、プログラム内に

const firebase = require('firebase');

を記述し、% electron .でアプリを起動した際に

Uncaught Error: Failed to load gRPC binary module because it was not installed for the current system

とgrpcモジュールに関するエラーが表示された。

% npm i grpc

を実行したが、今度はgrpcモジュール内にnode_modules/grpc/src/node/extension_binary/electron-v6.0-darwin-x64-unknown/grpc_node.nodeというファイルが無いぞとエラーで怒られる。

さらにnode-v72-darwin-x64-unknown/grpc_node.nodeってファイルならあったけどね！npm rebuildすると治るかも！と書かれていたので愚直に% npm rebuildを実行するも結果は変わらず。

拡張バイナリの中にnode-v72(以下略がありelectron-v6.0(以下略が無いならリビルド時にターゲットを指定してみようと思い、まずelectronのバージョンを確認した。% electron --version

使っていたのはv6.0.10であったため、ランタイムとバージョンを指定してリビルド。% npm rebuild --runtime=electron --target=6.0.10

再度electronアプリを起動すると、エラーも表示されず無事解決した。

確認

npm -–version
npm -v
npm version
npm help
npm root
npm bin
npm show パッケージ名

パッケージ検索

npm search パッケージ名

リリースされたパッケージのバージョン

npm info パッケージ名 versions

直接インストールしたパッケージ

npm list --depth=0

ローカルインストール済みのパッケージのバージョン

npm list (--depth=0)

グローバルインストール済みのパッケージのバージョン

npm list --depth=0) -g

未更新のパッケージを確認

npm outdated

package.jsonに記載されているパッケージのバージョンに更新

npm update

初期化

npm init

復元

npm install

インストール

グローバル

npm install –g パッケージ名

ローカル

npm install パッケージ名

package.json記述

package.json記述

npm install (-g) -save パッケージ名

package.json'(開発用)記述

npm install (-g) -save-dev パッケージ名

バージョン指定

npm install (-g) (-save) パッケージ名@x.x.x

グローバルインストールしたパッケージをアンインストール

npm uninstall -g パッケージ名

dependenciesから依存関係を削除

npm uninstall --save パッケージ名

ディレクトリ

ローカルインストール

カレントディレクトリの node_modules 配下にインストール

グローバルルインストール

buildを実行

npm run build

svelteを使ってちょっとしたWebアプリを作っているときにハマったのでメモ。

環境

• macOS Catalina
• Node v12.15.0
• npm v6.13.4
• rollup.js v1.20.0
• Svelte v3.0.0

事象

svelteではクイックスタート用のテンプレートが用意されており、その中でモジュールバンドラとしてRollupを利用しています（参考）。
このテンプレートを元に開発を進めていたところ、特定のnpmモジュールをインポートして動かした際に下記のエラーに遭遇しました。

Uncaught ReferenceError: stream is not defined

streamというモジュールは自分が書いたプログラムの中では使っていません。

問題点

インポートしたnpmモジュールが内部でNodeのビルトインモジュールを利用しており、ブラウザ環境ではそんなモジュールないよ!となってエラーとなっていたようです。

解決方法

下記のRollupプラグインモジュールを導入する。

• rollup-plugin-node-builtins
• rollup-plugin-node-globals

インストール

npm install --save-dev rollup-plugin-node-builtins rollup-plugin-node-globals

rollup.config.jsの設定

rollup.config.js

...
+ import builtins from 'rollup-plugin-node-builtins';
+ import globals from 'rollup-plugin-node-globals';

export default {
    ...
    plugins: [
    ...
        resolve({
            browser: true,
            dedupe: ['svelte'],
        }),
        commonjs(),

+       globals(),
+       builtins(),
    ...
    ],
  ...
}

まとめ

プラグインを利用することで、Nodeのビルトインモジュール依存の処理をRollupでビルドすることができます。

この物語は、Vue CLIに興味を持ち、Yarnを使ってインストールしてみたものの、パスを見失ってしまった哀れな開発者の奮闘の記録です。

第1話 WindowsにYarnでVue CLIをインストールする

事件編

まずはWindowsにNode.jsとYarnをインストールします。使うのは、Windows用のパッケージマネージャChocolatey。

choco install nodejs
choco install yarn

で、Vue CLIの記述の通り、YarnでVue CLIをインストール。

yarn global add @vue/cli

ちゃんとインストールできたかか確認すると……

vue --version

……こんな無慈悲なメッセージが。

'vue' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。

Vueはどこへ消えた？

解決編

Yarnでグローバルインストールしたパッケージは、C:\Users\me\AppData\Local\Yarn\bin に隠れています。
なので、このパス（%AppData%\Local\Yarn\binでも可）を手動で環境変数に追加すれば、パスが通ります。
めでたしめでたし。

第2話 ChromebookにYarnでVue CLIをインストールする

事件編

次は、Chromebook（上のLinux）にもVue CLIをインストールしてみます。
Node.js 公式のバイナリディストリビューションを参考にNode.jsと、

curl -sL https://deb.nodesource.com/setup_13.x | sudo -E bash -
sudo apt-get install -y nodejs

Yarn公式サイトを参考にYarnをインストールします。

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt-get update && sudo apt-get install yarn

で、さっきと同じようにYarnでVue CLIをインストールし、確認すると……
……こんな無慈悲なメッセージが。

-bash: vue: command not found

Vueはどこへ消えた？

解決編

Yarnでグローバルインストールしたパッケージは、「Linux ファイル」からアクセスできるホームフォルダ内の.yarn/binに存在します。
同じディレクトリにある.profileファイルをテキストエディタとかで開き、

if [ -d "$HOME/.yarn/bin" ] ; then
    PATH="$HOME/.yarn/bin:$PATH"
fi

と末尾に追記して、ターミナルを再起動すると、無事パスが通ります。
めでたしめでたし。

---

ちなみに、Angular CLIのngコマンドなんかも同じ要領で解決できますよ。