「突然の死ジェネレーター」を作ってみました

2014/07/04 作ってみた

ツイッターでたまに見る

＿人人人人人人＿
＞　突然の死　＜
￣Y^Y^Y^Y^Y￣

を簡単に作ることができる「突然の死ジェネレーター」を作ってみました。

のちのちになんでこんなの作ったんだろうとかなんでこんな風にしてあるんだろうとか思うともやもやするので、備忘録としてここに残します。

なんで作ったのか

ツイッターでもろもろ告知をする機会があって、なんかインパクトないな～と思ってたわけです。
そったら、あの、なんていうか、ドカーンみたいなのやっている人が居たので真似してやってみたけど、手で打ち込むのメンドクサイ。
ならば~~仕事がひまだし~~ちょっと作ってみるかってことで作ってみました。

以前に作った「Google Analytics用URL生成ツール」とやることはおよそ同じような感じ。

使ったもの？とか

jQuery
文章の変換もろもろは全てjQuery様です。
Bootstrap3
ボタンとかの見た目が今風になってステキな感じに。
jquery.zclip
コピーボタンの実装に。Flashを使用してるのでiPhoneでは使用不可。Androidは動くのかな？
jquery.autosize
入力エリアで改行して入力していった時に、入力エリアの縦サイズを調整してくれるプラグイン。
けど、変換結果エリア(下のテキストエリア)が連動しないので、そっちは自分で縦サイズ変更するのを入れた。あんまいらなかったのかも。

工夫点

コピーボタンをつけてみた

PCならばワンタッチで、iPhoneならば2タッチでコピーできます。

マルチライン対応してみた

2行以上の入力に対応しています。
ので、

＿人人人＿
＞　セ　＜
＞　グ　＜
＞　ロ　＜
＞　セ　＜
＞　キ　＜
＞　レ　＜
＞　イ　＜
￣Y^Y^Y￣

といったような使い方もできます。
左右の空白は自動調整・・・してくれないので手動でお願いします！
隠微な文をこさえていれることもできますが、長さ調整がめんどくさいです。

スマホ対応してみた

あんま対応できてない感ありますが、そこはかとなく対応しました。
コピーボタンを押せば、ちゃんと選択状態になってコピーもワンタッチででいるはず(iPhoneのみ)
Androidは持ってないので未確認です。

苦労したところ(すごいどうでもいい)

複数行への対応で行数取得がなんかうまくいかなくって、ずーっと詰まってましたけど、PHPの正規表現の書き方をしていたせいでした(号泣

PHPでは「”/\r\n|\r|\n/”」で、JavaScriptでは「/\r\n|\r|\n/」と、ダブルクオーテーションがいらないんですね。いらないんですね！

改善点

半角文字を入れると盛大にズレズレマックス

文字数のカウントを全角半角関係なく1文字カウントしているからだけど、ちょっと調整は難しい気がする。

全角7文字以上入力すると下のとこがズレズレマックス

7文字以上で少しずつ調整したほうがいいのかも。
でも、表示フォントに左右されるしどうでしょう。

iPhoneだと変換結果エリアの更新がされない場合がある

iPhoneだと入力文字変換後やペースト後には変換結果エリアが更新されない。
jQueryのkeyupをフックにしているけど、それでは呼び出されない模様。
他のアレでアレするか、コピーボタンタップ時とかに更新させるかしたほうがよさそう。

利用機種によっては下部ツイートボタンへ文字渡しがうまくいかないみたい

Androidで「！」が「、」になってしまう
Windows IE10で改行がツイートボタンに反映されない

URLエンコードの仕様が違うから？なのかな？よくわかんないわ・・・
ここに来てPHPでやったほうが楽だったかもと思いました (´；ω；｀)

縦書に変換するボタンつけるといいかも

いちいち改行入れるのがめんどくさい。

参考にさせて頂いたサイト(ありがとうございます)

というわけで

作業時間はおよそ12時間くらい・・・(汗
「突然の死ジェネレーター」を作ってみた備忘録でした。

⇒ 突然の死ジェネレーター