昨日は七夕でしたね。世間では短冊作成アプリのパクリ騒動で盛り上がってたようですが、そんな事より気になったのはこの記事。
酢酸先生が短冊メーカーを作ってるじゃないですか。
「よーし、お父さんも見よう見まねで短冊メーカー作っちゃうぞー」と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'); }
その他、縦書きに合わせて文字の変更も全く行ってません(入力された文字をそのまま縦に並べてるだけ)ので、完成度はかなり低いです。
で、何がしたかったのか
こんな適当なもの作って何がしたかったの?と思われるかもしれませんが、「とにかく手を動かしてみたかった。」ということですね。 レベルが低いので、すぐにレベルアップします。楽しいです。
感想
私が尊敬してる人達なら、これくらいならきっと30分くらいで作っちゃうんでしょうね。自分はJavaScriptで悩んだりして2,3時間くらいかけたかも(
自分ももう少し経験値を積めば1時間くらいには短縮できるんじゃないかと思います。 頭だけでできる気になってるのと、日頃から道具の手入れをして訓練をしておくのとではいざという時の生産性が全然違いますね。
そんなわけで、時間はかかりますがもう少し手を動かす比率を多くしていきたいと思います。