2017-09-10

electronでWeb Componentsを使うサンプル

Electron Node.js JavaScript

electron v1.5以降のバージョンでは、WebComponentsが普通に使えるようになりました。 (v1.5系はpre-release版だけでstableのリリースがなかったため、実質的にはv1.6系以降のバージョンですね。)

ということで、以前↓で書いた記事の内容をelectronで動かすサンプルを作りました。

2017-09-10

electronでCSS Grid Layoutを使うサンプル

Electron Node.js JavaScript

Electron v1.7系では、内部で使用しているChromiumが58系に更新されたため、CSS Grid Layout Module Level1が使えます。
https://caniuse.com/#feat=css-grid

ということで、以前↓で書いたサンプルを、最新のElectron v1.7.5環境用に書き換えました。

コードは以下のリポジトリにあげています。
https://github.com/sourcechord/electron-gridlayout-sample

electron v1.7系以降の環境では、↓のような拡張フラグの指定をしなくても普通にCSS Grid Layoutが使えます。

App.commandLine.appendSwitch("--enable-experimental-web-platform-features");

CSS Grid Layoutに対応したブラウザも増えてきましたし、各種入門記事もWeb上にだいぶ増えてきました。
これからは、CSS Grid Layoutを使う機会も徐々に増えそうですね!!

f:id:minami_SC:20170910140911p:plain

2017-09-09

monaco-editor + electronのサンプルコードを更新しました

Electron TypeScript Node.js VSCode

以前、monaco-editorなどをelectron環境とかで使ってサンプルコードを書きました。

sourcechord.hatenablog.com sourcechord.hatenablog.com

だいぶ時間がたって、使っているライブラリ類のバージョンが古くなっていたので、このサンプルのライブラリ類を更新しました。

それぞれ、以下のバージョンを使うように更新しています。

monaco-editor v0.10.0
electron v1.7.5
typescript v2.5.2

2017-09-08

Electron 1.7.5 + TypeScript 2.5.2のサンプル

Electron Node.js TypeScript

最近あまりElectronいじってなかったのですが、
気が付いたらElectron 1.7系のstable版となるv1.7.5がリリースされてました。

てことで、以前書いたElectron+TypeScriptのサンプルコードを最新バージョンに対応させておきました。

Electron/TypeScriptそれぞれを以下のバージョンに更新してます。

Electron 1.7.5
TypeScript 2.5.2

2017-08-02

FontAwesome.WPFを使ってみた

WPF UWP C#

Web系の開発でアイコン表示などによく使われているFontAwesomeというものがあります。
サイト上でよく使われるような様々なアイコンを、Webフォントとして利用できるようにしたものです。
Font Awesome, the iconic font and CSS toolkit

これをWPFやUWPなどから使えるようにした、FontAwesome.WPFというライブラリを使ってみました。 github.com

2017-06-02

Node.js 8.0をインストールしてみた

Node.js

Node.js 8.0がリリースされていたので、インストールしてみました。

https://nodejs.org/ja/

最近、Node.js自体の更新はあまり追いかけてなかったのですが、今回の更新は結構魅力的ですね!!

バンドルされるnpmがv5に更新されたり、utilモジュールにpromisify関数が追加されたりと、色々便利な更新が含まれています。

ということで、気になる変更点をφ(..)メモメモ

バンドルされるnpmのバージョンがv5系になった

大きな変更点は以下のような点です。

package-lock.json
- npm install時に、依存ライブラリを固定するためのファイルが自動で生成されます
- yarnっぽい感じ
npm installすると、デフォルトで–saveオプション動作
- –saveを付けなくても、dependenciesに書き込まれるようになりました。
- dependenciesに入れたくない場合は、--no-saveオプションを指定します
npm installが速くなった

lockファイルの導入/–saveオプション不要など、依存パッケージを厳密に管理する方向への変化といった感じでしょうか。

これはいいですね!!

Npm v5については、↓の記事がとても分かりやすかったです。
http://yosuke-furukawa.hatenablog.com/entry/2017/05/30/090602

async/await対応

一応、v7.6からは--harmony-async-awaitオプションなしでasync/await使えるようになっていました。
ですが、このバージョンがデフォルトでasync/awaitが使える最初のLTS版です。

こんな感じのコードが、そのまま実行できます。

function wait(delay) {
    return new Promise(resolve => setTimeout(resolve, delay));
}

async function main() {
    console.log("start");
    for (var i=0; i<10; i++) {
        await wait(1000);
        console.log("next");
    }
}

main();

TypeScriptやBabelなどを使わなくても、ここまで書けるようになりました。
今後、素のJavaScriptを書く場合でも、async/awaitを使える機会が増えそうですね。

util.promisify

utilモジュールにpromisifyという関数が追加されました。

Node.jsでよく用いられるコールバック関数形式での非同期処理を、Promise形式の関数に変換できるものです。

最後の引数でコールバック関数を受け付ける
↑のコールバック関数は、第一引数でエラー、第二引数で関数の実行結果を返す

util.promisifyについては↓が参考になります。
http://yosuke-furukawa.hatenablog.com/entry/2017/05/10/101752

// 普通のコールバックを使った書き方
fs.readFile("./test.txt", "utf-8", (err, data) => {
    console.log(data);
});

// promisifyを使ってPromise形式に変換すれば、async/awaitで呼び出せる
async function main() {
    const readFile = util.promisify(fs.readFile);

    var data = await readFile("./test.txt", "utf-8");
    console.log(data);
}
main();