[JavaScript]外部URLから画像を読み込んで表示する（+クロスドメインを突破する）

アイコン登録機能があるWebサービスをつくっていた。
基本的な操作方法は、以下のとおり。

1. アイコン画像を用意する
2. 画像を選択する（<input type="file">を使う）
3. 画像を読み込み、エンコードして表示する
4. base64エンコードした文字列をDBに保存する

これでも必要十分な機能はあるのだが面倒くさい。
できれば画像のURLを指定したら、それを読み込んでほしい。

ということで、「URLから画像を登録」機能を実現するためにいろいろ考えてみた。

TypeScript + express-openapiでOpenAPI（Swagger）準拠のRESTful APIをつくる

仕事でOpen API（旧Swagger）について調べる機会があった。せっかくなのでNode.jsでOpen APIに準拠したRESTful APIをつくろうと思う。

今回はexpress-openapiというフレームワークを使う。Express.jsを拡張し、スキーマのバリデーションをしてくれたり、コードを管理しやすくしてくれたりする。また、標準でTypeScriptをサポートしているので、チーム開発にも向いている。

使う環境やフレームワークは以下のとおり。

• Node.js: 6.10.2
• TypeScript: 2.2.2
• express: 4.15.2
• express-openapi: 0.35.0

ORMをTypeScriptでサクッと実装するならtypeormがオススメ

久しぶりにTypeScriptを書いて型のある喜びを感じていた。そして以前使っていたSequelizeをTypeScriptで使ってみようと思ったのだが、深淵を覗いてしまったようだ。

Sequelizeは高機能で便利なのだが、これをTypeScriptで書こうとするとかなりツライそうだ。実際の使い方は以下の記事を参照ください。


TypeScriptで素直に書けるORMはないかな？と探したところ、typeormを見つけた。

typeormは、MySQLをはじめ、PostgreSQL、MariaDB、SQLite3、MS SQL Server、Oracle、WebSQL databaseと主要なデータベースをカバーしている。
また、ライブラリ自体がTypeScriptで書かれているため、デコレータなどを使ってサクッと実装することができる。

今回は、手っ取り早く試したいのでSQLite3で使ってみる。

SlackのEmojiアイコンでスロットを作ってCSSスプライトを学ぶ

Googleのトップアイコンや、Twitterのいいねボタンのアイコン、SlackのEmojiなどで、CSSスプライトがつかわれている。複数のアイコンを1枚の画像にすることで、読み込み回数を減らしパフォーマンス向上を図る手法だ。

ということで、CSSスプライトの勉強も兼ねて、SlackのEmoji画像を利用してスロットをつくろうと思う。

[CSS]背景画像を固定させてスクロールで切り替えるパララックス

背景画像は固定されていて、他の要素（文章とか）だけがスクロールされる。さらにスクロールしていくと、いつの間にか背景画像が変わっている。パララックス（視差効果）を用いたシングルページサイトをよく見かける。

そんなウェブサイトをCSSだけで実現する。