こんばんは、桐生あんずです。
7月辺りからRuby on Railsで作成を進めていたWebアプリケーション「布教箱」ですが、ある程度人に触ってもらえる程度の完成度にはなったと感じたので、公開させていただきました。
こんな感じのアプリです。
先週の金曜にアップロードしてから、早くも4日ほど経っていますがTwiiterのフォロワーさんや高校の友人に利用していただきWebサービスっぽい感じの動きをしていてすごく嬉しいです。
そんな嬉しさもあり、色々と思うことがあるので、今回は作っていた際に感じたこと、アップロードしてから感じたこと、これから実装してみたいことを書いていきたいと思います。
布教箱を作っていて大事にしたかったこと・大変だったこと
今回、布教箱で大事にしたかったのは「布教する際は絶対に匿名にしよう」です。
私は、はてな匿名ダイアリーやask.fmといった、「匿名ゆえのキモさ」が介在するWebサービスが大好きです。匿名で発言ができるということは、時には不謹慎さや不快な発言が生まれることがあります。
それでも、「匿名だからこそ、普段本人が口に出さないような突き抜けた面白いことやぶっ飛んだことをいうことができる」といった現象が見てて本当に好きなんです。見てて面白いし、使っているユーザーの人たちは、普段しなければいけない気遣いをやめてドキドキしながら発言してるんじゃないかなあと思うとすごくワクワクするんです。
だから、プログラミングを始めた時に、私も「匿名ゆえのキモさ」が生まれるWebアプリケーションを作ってみたいと思いました。
あと、私は映画とかアニメとか漫画とか、オタク的な趣味は大体好きなのですが、「こういうジャンル（例えば、ダウナーな空気で進む恋愛映画とか、人生論を教えてくれる女児アニメとか）でいいの布教してくれないかなー」と思うことがかなりあります。
Twitterで言えばいいだけの話、なのかもしれませんがフォロワーさんの中には「布教したいけど自分の距離感で進めていいのかわからない」「布教したいけど自分が言うのはなんか恥ずかしい」と思っているんじゃないかとふと考えました。
「じゃあ、匿名で布教してもらえれば万事解決なのでは？」
となりアイデアとして生まれたのが布教箱です。
webサービス作るやつ、逆ask.fmから何かもう一味付け足したいと思って考えてたけれど、お題箱（絵師に匿名でリク送るやり方）を見て、
— 桐生あんず (@anzu_mmm) 2017年2月28日
匿名でオススメの作品のタイトルを投稿する「布教箱」ってどうだろうと思った
(サーチしたところアイデア自体は2月に誕生してました。）
匿名にする方法は、「布教一覧」はユーザー名を隠して表示すればOKだったのですが、プロフィールページの布教一覧も本人しか見られないようにしたいなあ、と思い<% if user_signed_in? && current_user.id == @user.id %>とif文を書いてユーザーにしか見れないようにしました。
布教詳細ページ(コメント一覧)も、布教者はユーザー名を隠してコメントしてもらいたいなあと思い、こちらも<% if comment.user == @fukyo.user %>と書いて、こちらの場合はユーザー名が「布教主」となり、ユーザーアイコンはデフォルトになるようにしました。
こんな感じで、アイコンがデフォルト布教ちゃん（布教箱のイメージキャラクターです）になり、ユーザーネームが布教主になります。
初学者なため、知識がまだまだこれからな状況ですが、「ユーザーが楽しく気軽に匿名で布教できる」ということは一番大事にしたかったので実装してみました。（if文を書くぐらいなのでそんなに難しいことではないのですが…)
あとお題データが消える時には布教データも消えるように:dependent => :delete_allをかけたり、Nomethoderrorが起きないよう気をつけながら実装していたのが記憶に残っています。こういうのはテストコード書きながら実装できるようになりたいなあと思いました。
とりあえずWebアプリケーションとして基本的な機能は実装したいと思い、railsチュートリアルを参考にしながら作成を行いました。（railsチュートリアル、難しいですが細かいこともたくさん書いてありRailsの基礎を知ることができてすごく勉強になったのでおすすめです。）
プログラミングのことを初めて教えてくださり、ずっと尊敬しているid:hidesysさんにこのように褒めていただけたのは本当に嬉しかったです。（ふぁぼしてくれた人たちもWeb方面で尊敬している人たちばっかりでひえ〜〜〜ってなりました）
布教箱、ログイン～動作～プロフィール設定までちゃんと動いていて、すごいですねこれ（validationもちゃんと動いているし、paginateもやってる）https://t.co/p7V3G3VMOB
— キリシタンガム (@hidesys) 2017年10月21日
あと、地味に大変だったのはCSSをどうするかという作業で、最終的にbootstrapに頼りっきりになってしまいました。でもbootstrapを実装したことで、ある程度綺麗な画面に変えることができたので嬉しかったです。あと、見た目が劇的に変わるとすごく嬉しいし楽しい。
今後修正・実装していきたいこと
・アイコン画像のデータベース保存
paperclipで画像のアップロードをしても、ログアウト後に消滅するという感じになっていてウッとなりました。原因はherokuにAWS S3やCloudinaryといったデータベースを用意しなきゃいけなかったみたいです。一応機能はできたのですが、他のちょっとしたエラーが治ってからpushさせたいのでまだ未実装です、ごめんなさい…。もうすぐ実装できるはずなのでお待ちください。
・いいね機能
一応実装はできていますが、実は、エンジニアの方が苦い顔をするようなちょっとよろしくないコードで実装されています。(当時よくわからないなりにググり一番上に出てきたQiitaの記事を参考にして実装しました)
トップにいいねボタンを持っていきたいのですがエラーが起きちゃってるので、まだできていません。でも、Railsチュートリアルやアプリ作りをしたことでなんとなくコードの書き方はちょっとイメージつくようになったのでゆっくりしっかり書いてみたいなあと思います。あと、ナイスお題！も作りたい。
ちなみに、要望があったプロフィールでいいね一覧が見れる機能は作成できたので次のアップデートの時までに実装できるのでお楽しみに（？）
・ページネーション機能とタブ機能
これ、すでに「めんどくさいなあ」と思っている方が多数いると思うのですが、布教一覧を見ている時に前のページか次のページに飛ぶと、お題一覧に戻されちゃうんですよね。そこから布教一覧を再びクリックすれば見たいページを見れるんですけど、なんかめんどくさいのでスムーズに見れる方法を探したいです。
その他やりたいこと
・世界観（デザイン）の統一
・タグ付け（日常・サブカルチャー・なんでもみたいにタグごとでお題・布教を見られる機能）
・検索機能
・フラッシュがヘッダーで見えない問題（これはすぐに直せそうなので次までに直します）
・人気のお題・布教がついてないお題がすぐに見つかる機能（ランキングを実装できるgemがあったからそれでなんかうまくできるかなあ）
作ってみての感想
成果物を発表する経験は、「布教ちゃんメーカーFukyochanMaker」で一回体験したのですが、今回はWebサービスということで、フォロワーや高校の友人、親にも使ってもらいました。みなさん各々、好きな感じに布教活動をしていて、開発者側からすると投稿一つ一つ見ていくのが本当に楽しかったです。
自分が作ったアプリケーションを色んな人たちが遊んでもらうという経験は、正直本当に快感で、こんなに楽しいものだったのかとなりました。エンジニアの人たちはこの快感をずっと味わっているんでしょうか。（それとも…？)
あと、アップロードして一番意外だった点があります。お題としてあげられる投稿は、てっきり映画や漫画といったサブカルチャーメインになるのかな、と思ったのですが日常生活で気になっていること(例：『京都市内でワンコインで収まる食事処』、『眠れない夜にすること』)をお題として投稿する人が多いのです。
しかも、そのお題につく布教も割と為になって面白いのが多い。
自分が想定した以上に自由度の高いWebアプリケーションとして使われていたのが今回作った中で一番大きな発見でした。
これはゲームでも思うことなのですが、一本道で用意されているものよりも自由度が高くユーザーが楽しく利用できるものってすごく良いと思うので、そんなアプリを作ることができたのが本当に嬉しいです。
今後、社会人になってエンジニアとしてお仕事することが今の一番の目標ですが、その時はユーザーが面白いものを発信&発見できるサービスを作れるエンジニアになりたいとすごく感じました。
ここまで来るのには、京大で行われた「1ヶ月でWebサービスを作る会」、「RailsGirls」等のプログラマー勉強会で出会った方々にたくさん助けられて、応援していただけたからこそ頑張れたのではないかと強く思います。
スキルは本当にまだまだですが、Webサービスを1個作れたこと(これからも実装すべきところはたくさんあるけど！）はちょっと自信に持ってこれからも頑張っていきたいなと思います。
インターネットで知り合った方々には、まだまだ頼りきりになることばかりだと思いますが、これからもよろしくお願いいたします。
最後に布教箱のリンクをもう一度添えて。
レッツ布教！Fukyobako
