日々是好日

プログラミングについてのあれこれ、ムダ知識など

Sushi Buffet を支える技術 ver2.0.0

VS Code でいつでも回転寿司を眺められる拡張機能を作りました。 sushi-buffetを支える技術 - 日々是好日 のメジャーアップデートです。

マーケットプレイスはこちら。 marketplace.visualstudio.com

ぎとはぶ github.com

  • どうやって回転させているの?
    • 追加する構文
  • transform.rotate は使えないの?
  • workbench.html に div タグ仕込めばいいのでは?
  • 結局なんなのこの機能
続きを読む

sushi-buffetを支える技術

VSCode の背景にたくさんのお寿司を流す拡張機能を作りました。

twitter.com

言うまでもありませんが、完全なネタ拡張機能です。寿司だけに。

マーケットプレイスはこちら。

marketplace.visualstudio.com

  • Sushi Buffet とは
  • お寿司を流すのに必要な技術
  • どうやってお寿司を流しているのか
    • workbench.main.css とは
    • 何をしたのか
    • シェルコマンドはどう記述したか
  • 大変だったところ
  • 感想
  • 参考にさせてもらったサイトなど
続きを読む

Node.js でシェルコマンド

VSCode拡張機能でシェルコマンドを書いたので( ..)φメモメモ

VSCode の画面を構成するworkbench.main.cssが超長かったので、 文字列をプログラム中で取得せずに編集できないか検討してみた。

やること

特定のファイルに書き込まれた文字列をシェルコマンドで編集する。

超長い文字列が含まれるファイルの操作に使えるかもしれない。

環境と使うパッケージ

  • 環境
    • Node.js
    • TypeScript
  • 使うパッケージ
    • child-process

child-process パッケージの exec メソッドで、シェルコマンドの実行が可能。

実装

/*ext-hoge-start*//*ext-hoge-end*/で囲まれた部分を置換する。

ポイントとしては、

  • cat ${path}で文字列を取得し、sedにパイプする。
  • -iオプションにより、sed ... > ${path}としなくても上書き保存ができる。
import * as cp from 'child-process';
...

//対象のテキストファイル
const path = './hoge.txt';

const hoge = 'hoge';

//検知する文字列
//「*」はバックスラッシュ2つでエスケープ
const target = `/\\*ext-${hoge}-start\\*/.*/\\*ext-${hoge}-end\\*/`;

//exec でシェルコマンドを実行
//target でマッチした部分を fuga に置換する
cp.exec(`cat ${path} | sed -i -e "s|${target}|fuga|" ${path}`, (err, stdout, stderr) => {
  if (err) {
    console.log(err);
  } else {
    console.log(stdout);
  }
});

実行するとこんな感じになる。

# コマンド実行前
$ cat ./hoge.txt
foo
bar
/*ext-hoge-start*/hoge/*ext-hoge-end*/

# コマンド実行後
$ cat ./hoge.txt
foo
bar
fuga

参考

developer.mozilla.org

nodejs.org

it-ojisan.tokyo

open-groove.net

qiita.com

技術書典6の振り返りとかデザインとか

去る 4月26日 の技術書典 6 にて、

Visual Studio Code Extension Start Book」

という本を頒布しました。そのときの振り返りと新刊デザイン周りの記事です。

twitter.com

  • 当日の様子
  • 振り返りメモ
  • デザインの話
    • デザイン環境
    • 配色の決定
    • デザインの決定
      • 右寄せ・左寄せ(整列・近接)
      • フォント(反復)
      • 色(コントラスト)
  • おすすめの文献
    • ノンデザイナーズ・デザインブック
    • 伝わるデザインの基本
    • 配色アイデア手帖
  • これから何する?
  • まとめなど
続きを読む

VSCode 拡張機能開発で OAuth 認証 - 4

VSCode 拡張機能開発で OAuth 認証 - 3 <終> - 日々是好日

この記事の続き。型エイリアスと async/await で、OAuth 認証フローをもっと簡単に記述してみた。 認証には oauth モジュールを使用。

全ソースはこちら↓

github.com

続きを読む

技術書典6 - VSCode Extension Start Book の紹介

f:id:kcpoipoi:20190331150919j:plain

4月14日(日)に開催される技術書典6にて、 「Visual Studio Code Extension Start Book」 という本を頒布します。配置は「き36」です。

techbookfest.org

本エントリにて、どのような本か、どのレベルの読者を想定して執筆したかを紹介していきます。 サンプルはこちらの記事に上げてありますのでよしなに。

時間がない方は「想定読者」をお読みいただければ、 なんとなくのレベル感がお分かりいただけるかと思います。

  • 想定読者
    • 本書のレベル感
  • 本の内容
  • 執筆の動機、経緯など
  • 執筆状況や最新情報
続きを読む

Re:VIEW 3.1 + techbooster-doujin 対応

Re:VIEW 3.1 がリリースされたので対応。

techbooster-doujin.sty も前より簡単でかつかなり安定的に対応できたので(/・ω・)/バンジャーイ

2018-03-04 更新

  • review-jsbook.cls を触らず、 config.yml を修正
  • 旧バージョンと区別するため techbooster-doujin-base.sty に修正

最新の ReVIEW-Template を使用すれば無問題なヤーツ←

  • 3.1 にアップデート
  • review update
  • techbooster-doujin.sty の移植
  • reviewmacro.sty の修正
  • review-jsbook.cls の修正
続きを読む