2日前に流行した短冊メーカーを作ったった（今更感）

昨日は七夕でしたね。世間では短冊作成アプリのパクリ騒動で盛り上がってたようですが、そんな事より気になったのはこの記事。

ASP.NET MVC 4でjQueryを使って動的に部分ビューを更新させる - 酢ろぐ！

酢酸先生が短冊メーカーを作ってるじゃないですか。

短冊メーカー

「よーし、お父さんも見よう見まねで短冊メーカー作っちゃうぞー」と7月7日の22:30頃に思い立ってゴニョゴニョしてましたが、予想通りやってみるとなかなか簡単にはいきませんね（明らかに経験不足）

2日遅れましたけど超適当なのができましたので晒しておきます。

適当な短冊メーカー

以下、後から自分が「あの頃はこんなのもわからんかったんかー」と微笑ましく振り返れたらいいなという思いを込めたメモです。

適当な短冊メーカーを作るのに用意したもの

家では好きなものしか使わないことに決めました*1ので、こんな感じ。どれも「ちょっと触ってみた」レベルですけどね。

Visual Studio 2013 Update2
Microsoft Azure Webサイト
Bootstrap 3*2
ASP.NET MVC 4

画面の構成

酢酸先生は部分ビューを使われていたので、自分はWebAPIを使ってみました。

画面の構成は「_Layout.cshtml」と「Index.cshtml」だけの単純な構成です。

「Index.cshtml」はこんな感じ。

<div class="row">
    <div class="col-md-4 col-md-offset-4">
        ここに願い事を書いて下さい
        @Html.TextBox("text", null, new { @class = "col-md-12", id = "text" })
        <button id="generate" class="btn" onclick="onGenerateClick()">短冊を作成する</button><br />
        @Html.TextArea("tanzaku", new { cols = 20, rows = 15, id = "tanzaku" })<br />
        <button id="tweet" class="btn" onclick="onTweet()">ツイートする</button>
    </div>
</div>

WepAPIとのやりとりや画面に表示するのにJavaScript使ってますが、面倒なので「Index.cshtml」にえいっと突っ込んでます。

特に適当な所

ツイートする際の処理ですが、Twitterの「ツイート」ボタンを参考にしようとしましたが何をやっているのかさっぱりわからなかったので、直接URL組み立てて別ウインドウ表示させました。

function onTweet() {
    var tanzaku = $("#tanzaku").val();
    var base = "https://twitter.com/intent/tweet?original_referer=" + encodeURIComponent(location.href)
        + "&text=" + encodeURIComponent(tanzaku) + "&tw_p=tweetbutton&url=" + encodeURIComponent(location.href);
    window.open(base, '_blank', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=550, height=420');
}

その他、縦書きに合わせて文字の変更も全く行ってません(入力された文字をそのまま縦に並べてるだけ)ので、完成度はかなり低いです。