はじめに

[Node.js] 無料で簡単にウェブアプリを公開できるサービス「Glitch」を使ってみた!
上記の記事読んで、思いついたからやりました。
Node.jsを触ったことがありませんでしたが、簡単に作れました。

作ったの

Glitch_Image.png
https://glitch-img.glitch.me

使い方

  1. 画像を選択してください。
  2. アップロードボタンを押します。
  3. 素敵に最適化されたGlitch画像がダウンロードされます。

IMG_20161126_125121.jpg
ただの風景写真が

glitch_IMG_20161126_125121.jpg
欠けた器に美しさを感じるような、侘び寂び感ある写真に変わりますね。

処理の流れ

  1. アップロードされたファイルをtmpに保存します。
  2. imagemagickを通してクリーニングを行います。
  3. glitch-canvas通してフィルターをかけます。
  4. imagemagickを通して壊れた表示の壊れてないファイルに変換を行います。
  5. jpegoptimかoptipngで画像の最適化を行います
  6. ユーザーにダウンロードさせます。

なんで作ったの?

タイトルを思いついてしまったので。
node.jsで遊んでみたかったのです。
レンタルサーバーで動いているシステムの画像を最適化を行いたいのですが、
最適化は該当サーバではできそうにもないので、
外部で最適化を行い上書きするテスト。

はまったところというか作成時の覚書

間違ったnpmをinstallしてしまった。

package.jsonを直接書き換えれば自動でuninstallを依存関係含めて行なってくれます。

Glitchからディスク容量オーバーエラーが出てくる。

Glitchではディスク容量が125MBまででした。
tmpフォルダや使用しない画像は処理後に削除する処理を加えました。

アップロード失敗したり、通信切られたらファイル残るぞ

本来であればcronでガベージコレクション回したいのですが、Glitchでは難しそうです。
ダウンロード完了フラグで削除処理を別口かアクセスがあるたびに加えても良いかもしれません。

ディスク容量オーバーエラーどうやって解決するんだよ。

Advanced Optionsにconsoleがあったのでrm -rf

jsなのにPromise動かないのかよ

requireで呼び出さないと動きません。

jpegoptimがファイルが壊れているとか言ってるけど

画像ファイルを自ら壊しているのがglitch処理なので、imagemagick通して壊れた表示の壊れてないファイルにする必要がありました。
それでもエラー出ることありますが、握りつぶしました。

jpgアップロードしてもpngになるんだけど

glitch-canvasのデフォルトというか、
Canvasがpng返すようなので、これもimagemagick通して元の拡張子に戻しました。
引数やプロパティでjpg返すこともできそうですが、手が止まりそうだったのでimagemagickで行なっています。

mineってなんだよ

mimeのタイポです。

余談

どのくらい時間かかった?

nodeの本を読みながら3時間くらいです。

console動くならPHPとかも動くの?

/usr/bin/php -r "echo time();"
とかできたので色々できそうではあります。

このデザインで使っているのは?

CSS フレームワークのBulmaです。
https://bulma.io

グリッチ処理ってなんなの?

意図的に画像ファイルを壊れた表示にする処理です。
下記サイトが参考になるかもしれません。
http://www.osadagenki.com/gvgas/ja/about-glitch-art/

ソースコードみたい

下記URLからどうぞ
こうやって簡単に公開できるのがglitch強みですね。
https://glitch.com/edit/#!/glitch-img

まとめ

  • Glitchは簡単にサクッと作りたいものに集中できて良かった。
  • npmすごい、他のプログラムにも欲しい。
  • 基本的な処理が非同期で行われることの素晴らしみがある。
  • 思いつきでも手を動かすと楽しい。