概要
@betahikaru作っている「動物はあなたのごはんじゃない」ジェネレータの中身をメモします。
「動物はあなたのごはんじゃない」ジェネレータ
http://betahikaru.com/notfood/index.html参考（Togetter）
http://togetter.com/li/623016
機能
- 「動物はあなたのごはんじゃない」とか「Animals are not …」とかの文字列を変えた画像を作れる。
- ベースの色を変更できる。
- URLで差し込む画像を指定できる。
- 差し込む画像の位置を調整できる。
画像を保存できる。（右クリックorスマホなら長押し）
作成例
動作環境
- Mac
- Chrome 32.0.*
- Safari 7.0.*
- iOS7
- Chrome for Mobile (2014/2/5時点)
- Moblie Safari
- Windows
- 動作環境なくて未確認。Windows Server 2008 R2 の IE11 で、画像がCavnasに描画されていないことは分かっているが…。
処理内容
- ユーザが入力した文字列を、canvasに描画する。
- 指定URLの画像を単色化（適当）し、canvasに描画する。
- canvasの内容をimgタグに書き込み、右クリックで保存可能にする。
- おまけ：canvasの内容からDataUrlを生成し、DataUrlからファイルを生成する。
苦労した点
言語
いままで仕事以外でWebアプリ的なのを作ってこなかったので、色々素人に近い状態で大変だった。
RORの環境構築はつらいし、CakePHPとかも勉強してないので、素のPHPで実装したが、すごく面倒だった。
使い勝手
非常に悪いです。どうすれば使いやすいだろうか。
セキュリティ？
Canvasに外部サイトの画像を取り込もうとしたら、cross-originなんちゃらのセキュリティエクセプションが発生した。
仕方ないので、PHPで一旦サーバ上にファイルをダウンロードする形式にした。
現在、ファイルを削除する手段がＳＳＨしかないので、攻撃しないでね☆
宣伝
あと、Twitterで自分のつぶやきにハッシュタグをつけても、ハッシュタグの検索結果一覧に出てこない。
なぜだろう。
野望
現在は画面上に表示したimgタグを右クリックなりで保存させる形にしているが、
AWSのS3に画像を保存するようにしたい。
※APサーバを冗長化できるように。
※鋭意作成中。