ラブライブ!サンシャイン!!の画像を検索するアプリ『LSCP-Search』を公開しました

どうも、ふーと(@Aizawa_hutoP)です。
 

今月頭頃からRuby on RailsでWebアプリを開発していました。
↓途中経過の記事

Rails初心者がWebアプリを開発中
どうも、ふーと(@Aizawa_hutoP)です。   突然ですが、Webアプリ的なやつを開発してます。 まだ開発中ですが、必要最低限の機...

そのアプリが充分実用的なところまで持ってこれたかな?と思いますので、ここで改めて紹介・及び正式公開という形にしようかなと。
 

アプリ名は『LSCP-Search』です。
ほぼ仮タイトルと一緒ですが(笑)
 

スポンサーリンク
レクタングル(大)

LSCP-Searchとは

ラブライブ!サンシャイン!!画像検索 | LSCP-Search

ラブライブ!サンシャイン!!に登場するメインキャラクター9人に関する画像をTwitter内で検索するサイト。
キャラクター単体で検索するだけでなく、既存ユニットやカップリング名での検索にも対応しています。
 

使い方

右上の虫眼鏡アイコンのボタンをクリックすると検索フォームが出てきます。
検索したいキャラクターのアイコンを選択し、[Search]ボタンを押すことで画像を検索します。

♥アイコンの横にあるボックスで数値を入力することで、その数値以上「いいね」されている画像つきツイートのみ表示します。
 

検索ワードについては前回公開した時と変わりません。

・キャラ単体選択で、そのキャラの名前を検索
(千歌、梨子など。ダイヤ、花丸は関係ない画像が引っ掛かりやすいですが…)

・キャラを2人選択するとカップリング名で検索
(よしりこ、黒澤姉妹など)

・キャラ3人選択で、既存ユニットならユニット名検索
(AZAELAなど)

・9人選択で「Aqours」検索
 

1回の検索で取得するツイート数は25。
[さらに表示]を押すとさらに25ツイート分取得します。
 

前回公開時からの変更点

Ajaxに対応

検索関係を全てAjaxで行うようにし、トップページのURLだけで解決するようになってます。

Rails5.1ではjqueryが標準搭載されてないということに気付くまでに時間がかかってしまいましたが、実装自体はとても簡単なのが良いですね。
 

デザインを大幅変更

前回はほんと機能だけだったので、いい感じのデザインに。

標準のチェックボックスを廃止、選択したキャラクターはアイコンの背景には色がつくようにしています。

またアイコンの並び方もレスポンシブに対応している(はず)。
スマホでは3×3、タブレット(横画面)では5と4の2列、大型タブレット以上では1列になっているはず。

自分の手持ちがiOS端末ばかりなので、画面サイズが多種多様なAndroidでどうなるかは気になるところですね。
 

あとはキャラクター選択部分の折り畳みとヘッダーの固定。
特にスマホで画像検索する際、いちいち一番上までスクロールしないと再検索できない状態だったので改善しました。

恐らく上手くいってるはず。
 

「いいね」数フィルターの実装

指定した「いいね」数以上の画像のみ検索できるようになりました。

1以上にしておくだけでも全然結果が違いますし、絵師さんのイラストとかは大体10いいねくらいはあるので、そういったのを探すのにも便利ですね。

検索オプションとして色々追加しようかと考えていましたが、このいいね数指定だけで大体なんとかなりそうな気がしないでもないです。
 

今後について

不具合等は発見次第修正していきますが、機能として何か追加する予定は特にありません。

強いて言うならμ’sの検索を追加するくらいでしょうか。
簡単にできそうですがちょっと面倒そうな気もするので気が向いた時にやりたいです。
 

次回Webアプリ作成について

初めてRailsでWebアプリを作成して一段落した、といった現状。
ですが制作モチベが残っているので何かしら作りたいと思っています。

とは言えアイデアがあまりない、というか全然固まってないので実際に制作するのはもう少し先かと思いますが。

12月頭頃に初めて年内に一個できればいいなぁという気持ちで頑張ろうと思います。
 

スポンサーリンク
レクタングル(大)
レクタングル(大)

シェアする

  • このエントリーをはてなブックマークに追加

フォローする