読者です 読者をやめる 読者になる 読者になる

Un nouveau monde parfumé

香り立つ備忘録

つらいときに押すボタン

この記事は クソアプリ Advent Calendar 2016 の11日目の記事です。

遅れました。すみません。

qiita.com

作ったクソアプリについて

僕の大学では来週22日から期末試験*1が始まります。元々3学期制を敷いていた名残でやや変則的なスケジュールですが、つまりこれから試験勉強に最終レポートに追われるつらい学生の増える時期です。

そんなときはこのボタンを押しましょう。

f:id:pikatenor:20161211080400p:plain:w600
つらい.ピカチュウ.net

運が良ければ同じタイミングでつらさを感じている人がいるかもしれません。
もし同じつらさを抱えている人がいればそっとわかってあげましょう。

f:id:pikatenor:20161211080607p:plain:w600

アプリの説明は以上です。


このままではポエムで終わってしまい、この Advent Calendar は Qiita に作られたものです。なので少しだけ使ったものの話をします。

というかこれ、実は去年の今頃につくったクソアプリのリニューアルなんですね。
↓2015年版(一応 http://tsurai-tk.herokuapp.com/ で今も動いています) f:id:pikatenor:20161211080626p:plain

大変素朴な見た目をしています。

というのもテスト勉強がつらくなったときにふと思いつきで、諸事情で作ったアプリのコードを再利用(というかほとんどのコードを削除 )して20分ぐらいで作ったアプリで、あまりにも素朴なので作り直したいなあ、と思いながら1年が過ぎ、またこの時期に新たに作り直すことにしたという訳です。

本当はもっと見た目に凝ろうと思っていましたが、時間がなかったのでとりあえずこれにて公開します。

2015年版は Sinatra で書きましたが、今回は勉強も兼ねて Meteor というフレームワークで書いています。

Meteor について

Meteor は JavaScript(node.js) のフルスタックWebアプリケーションフレームワークで、サーバーからクライアントまでまるっとJSで書けます。
2014年には1.0がリリースされ、まあ使ってみても良いんじゃないかと思ったので使ってみました。

Meteor を選んだ理由の一つに、リアルタイム同期が非常に強力というのがあります。

見ての通り つらい.ピカチュウ.net はリアルタイムでカウンターを同期しており、2015年版では WebSocket を直にゴリゴリ使って雑に jQuery でページを書き換えていました。

Meteor ではUIビューのほとんど全ての状態がリアルタイムに同期されます。
試しに同じブラウザ上で2つタブを開いて、片方のタブでログインすると、その状態が即座に他のタブにも反映されます。えげつない。
つらみの新規書き込み、削除も一瞬です。

また、作っていて感じたことですが Meteor ではクライアントのコードとサーバーのコードがかなり共有され、割とビビります。
サーバー側でモデル(MongoDB*2)の操作を行うコードがクライアント側でもそのまま動きます。厳密には minimongo が Mongo ライクなクエリをローカルでインメモリストアに対し実行しつつ、リモートにリクエストを投げています。このため、同期しつつもスムーズな動きを実現しています。

あまりにもサーバーのコードとクライアントのコードが渾然一体としているため、大規模になった際の維持が難しそうだと感じましたが、少なくともこういったしょぼいアプリを書き捨てるにはうってつけです。

Advent Calendar に登録しておきながらすっかり忘れていたためあわててアプリを作り始めましたが、0時頃から実装を始めておよそ2時間で機能の実装が終わりました。実際やってることはチュートリアルの Todo アプリと何ら変わりないですが。

まあその後 CSS を書いたりデプロイしていたらさらに2時間ほどかかりました。VPS に置いた dokku のアップデートに失敗して nginx の設定を崩壊させたまま放置していたのが敗因です。

とりあえず、作るだけならあまりにも簡単に作れてしまう Meteor のご紹介でした。詳しくはググってくれ。インターネットには他にいくらでも良質な紹介記事がある。


以下余談

CSS は本当に最高

デザインスキル というか CSS 力が無さ過ぎてクソアプリ一つ作るのにも時間を掛けてしまってつらい

そういえばこの前、サークルの引退祝いにこんなものをもらった。

CSS IS AWESOME. よくわかる。

Meteor を Heroku/Dokku にデプロイする

よーしできたしデプロイすっかと思ったがすこし手間取ってつらかった

パッとひっかかるこの jordansissel/heroku-buildpack-meteor は最新の Meteor 1.4 に対応していない。こっちの AdmitHub/meteor-buildpack-horse を使おう。

そもそも手間取ったのは先述の通り僕が nginx を破壊したせいだったんだけども。

クソアプリの文脈

以下はクソアプリ作りが間に合わなかった時にしようと思っていた話。

saikoh.tk という内輪でウケるためのアプリを作ったら微妙に内輪を越えてウケてしまい、調子に乗ってこんなイベントを実施したり、学園祭で肉を焼いたりしたとか

つらい.ピカチュウ.net はこの「リアルタイムでカウンターが増えると妙に面白い」という文脈を受けたものであるとか

そもそも saikoh.tk 自体さらに前に作った ganoff.tk というクソアプリの文脈を受けており…

という話をしようと思ったが、話すと長くなるし、身内以外に伝わる気がさっぱりしないので、この話はまた今度にします。

*1:厳密には秋Bモジュール期末試験

*2:ちなみに Meteor ではデータベースに MongoDB 以外を使うための現実的な選択肢があまりありません