そんな今日この頃でして、、、

コード書いたり映画みたり。努力は苦手だから「楽しいこと」を探していきたい。

ひたすらグラドルの自画撮りを眺めるサービスを作ってみた

偉大なる先人にならいエロ駆動開発というやつをやってみた。

f:id:blue1st:20140223000538p:plain

地鶏専科 #グラドル自画撮り部

概要

ひたすらTwitterの「#グラドル自画撮り部」タグのツイートを取得して表示する。

画像をクリックするとフルスクリーン化。

画面下までスクロールすると自動でロード。


手持ちのWindows機がすこぶる調子が悪いため、OS XChromeiPadSafari/Chromeでしか試してないが、一応はオートスクロール働きそう。

一方でiPadだと全画面表示が働かない(実利的にいらないっちゃいらないが)

技術的な話

HerokuにPerlの軽量フレームワークMojoliciousLiteでもって作成。

Perlモジュール

前の記事からの追加はNet::Twitter::Lite::WithAPIv1_1(とEncode)のみ。

HerokuでMojolicious::Lite動かしてみたメモ - そんな今日この頃でして、、、

ひろってきたツイートを使いやすく整形してJSON化する。

HTML/Javascript/CSS

デザイン的な部分は苦手なので、ベースにはおなじみTwitter Bootstrapを使用。(いかにもさが嫌いという人もいるけど、僕は安心感あって割と好き)

Bootstrap


ajaxでの取得からのhtml生成はLo-Dash.jsを使ってみた。

Lo-Dash

個人的にはUnderscore.Jsとの速度差をあまり感じたことはないけど一応ということで。


フルスクリーン化はscreenfull.js。

sindresorhus/screenfull.js · GitHub

あまり業務では使わないジャンルの機能なのだが、とにかくシンプルで使いやすいのが良かった。

フルスクリーン後に操作するとかメニュー表示するとか、そういうのはもっと別のを探した方が良いかもしれない。


課題とかやりたいこととか

  • ツイート表示部分が流石に雑なので綺麗にしたい
  • 2択表示させてランキング化とかやってみたい
  • いたずら的なやつを自動で弾く仕組みを作れないものか
  • 毎回api叩くの勿体無い
  • 認証付けてお気に入り機能とか付けたい


まとめ

  • ほぼほぼjavascriptいじりだったし、勉強もかねてSinatraで作ればよかった
  • 追加要素はclickイベントで取れないのついつい忘れる
  • グラドルって多いんだなぁ
  • 作っといてなんだが、お固い場でのアピールには使いにくい・・・ もっちょいアピールしやすい題材のものも何か作りたい

Webサービスのつくり方 ~「新しい」を生み出すための33のエッセイ (Software Design plus)

Webサービスのつくり方 ~「新しい」を生み出すための33のエッセイ (Software Design plus)

追記:ちょっとだけ機能追加

  • アカウント名をクリックするとアカウントでの絞り込み。
  • ヘッダーのボタンで1〜3列表示の切り替え対応。(高さあわなくて綺麗に見えないのが難)