風柳メモ

ソフトウェア・プログラミング関連の覚書が中心。

コピィ・ライター(CopieWriter) - はてなコピィもどきのバナーを作成可能なサービスを作ってみた

はてなコピィのように、テキストを配置してバナーを作成でき、途中で保存/再開も可能なサービスを作ってみました。

http://furyu.nazo.cc/CopieWriter/

CopieWriter: コピィ・ライター

GitHub のリポジトリはこちら
サービスと言いつつ、ZIPをダウンロード・解凍したフォルダの index.html を開けば、ローカルでも動作します。

画面サンプル

http://furyu.nazo.cc/CopieWriter/?setting=samples/%E3%81%AF%E3%81%A6%E3%81%AA%E3%82%B3%E3%83%94%E3%82%A3%E3%82%82%E3%81%A9%E3%81%8D.json

特徴

長所
  • JavaScript だけで動作している(クライアントサイドだけの処理で、サーバーとの通信は行わない)ため、比較的さくさく動作する。
  • フレーズ数の上限は設けていない(ただし、多すぎると重くなる)。
  • 途中保存して中断(設定をダウンロード)や再開(設定の読み込み)が可能。
  • 設定ファイル(JSON形式)内の値を編集すれば、バナーの大きさやフォントも変更可能。
短所
  • サーバーサイドの処理は一切ないため、はてなコピィのような一覧ページやリンクページといったものは自動では作れない。
  • はてなコピィとのデータ上の互換性はない。
  • 同じく、操作性も異なるので、慣れるまで若干とまどうかも。
  • ブラウザによって出力結果が異なったり、うまく動作しない可能性あり。
    基本、PC版のブラウザのみ対応。IE11・Chrome・Firefox・Operaの最新版であれば多分動作する。ただしSafariでは多分うまく動作しない。

経緯

はてなコピィはテキストを自由に配置してバナーを作れるということで、お気に入りのサービスです。
最近はごぶさたしているものの、これまでも結構な数のコピィを作成しています


ですが、作成途中の保存は出来なかったりフレーズ数の制限によって、しばしば涙を飲みました。*1


以前から、いつの日かこれらを解消できたらなぁ……と思っていましたが、昨日ふと
「『テキストを配置してバナーをつくり保存する』くらいの機能なら、モダンブラウザ*2なら canvas なりを使えば、クライアントサイドのみで実現できるのではないか?」
と思い立ち、そのまま勢いで作ってみたものです。

*1:「いや、そもそもアドバンスモードでお絵かきするのは、本来の使い方じゃないんんじゃ?」という意見は聞きません

*2:そろそろ死語?