サイト更新停滞ちうっ

■[Electron][javascript][node.js] 画像をElectron側にキャッシュしておく話 00:04

Electronを業務で使っている会社とかあるらしい。

で、自分も活用してみよう。Electronでどんなアプリを作るかって考えたら、

サーバーのデータを参照するElectronアプリも作れるけれど、
でも、それだったら、Webページでも良いわけで、
Electronを使うなら、やっぱりスタンドアローンなアプリにしたいじゃないですか。

しかし、業務で扱うデータって、残念ながら、だいたいサーバー上に置いてある。
そのデータに触れずに業務に役立つアプリを作ることは難しい。

それじゃ、こういう、ローカルとサーバ上、両方にデータがあるElectronアプリにするのが良いのかな、と。

そこで画像キャッシュだ

なぜ、画像かはわからないが、今回は画像だ。
毎回データをサーバーに取りに行かずに、(作るのが重い画像とかだ)
Electronのアプリ内部でキャッシュしておこう、という話。

実装

• まず最初にimage-cacheを入れておいて、

npm install --save image-cache

• cacheに画像を渡す処理。cacheから画像を取り出す処理を入れる。

# renderer.js
var imageCache = require('image-cache');

...(中略)...

// tweet.user_image は 画像URL
//
// not found image cache
if (! imageCache.isCachedSync(tweet.user_image)) {
  imageCache.setCache(tweet.user_image, function(error) {
    log.error(error);
  });
  tweet.user_image_link = tweet.user_image;

// found image cache
} else {
  const img = imageCache.getCacheSync(tweet.user_image);
  tweet.user_image_link = img.data;
}

• angular.jsだけど
• image-cacheから取り出したcacheは、BASE64な文字になっている。そのままそれを表示して良い。

# renderer.html
<li ng-repeat="item in streams track by item.idx">
  <img ng-src="{{item.user_image_link}}" width="32" height="32">
</li>

まとめ

Electronあまり関係ない話になってしまった。