はじめに
先日、江津市のゲストハウスで開催されたハッカソンに参加してきた。
今昔写真というアプリのローカライズを行うハッカソンで、今昔写真自体はカヤックというところが開発しているソフトウェアになる。
で、ハッカソンではAndroid向けのローカライズをやることに。
でも、トラブルが発生してAndroid版のローカライズができなくなってちゃった。
ペアを組んでいたエンジニアさんと「どうしましょうか？」と話してて、
「じゃあ、Railsで写真をアップロードする機能つくる？」となり、Railsで今昔写真の管理アプリを作ることになった。
この記事は、今昔写真の管理アプリをRailsで作ったときの備忘録。
開発環境
で、本番環境にはHerokuを使った。
やったこと
とりあえず、rails g scaffold
まずは、rails g scaffoldでひな型を作成。
scaffoldのいいところは基本的な処理を自動で作成してくれるので、抜けがなく作ることができるところ。
もちろん、作るにあたって不要そうなものとかも自動生成されるけどね。
今回のハッカソンにおいては時間との勝負だったので、scaffoldを使ってひな型をパパっと作った。
serviceworkerでのPWA化
今回作成した管理アプリは高校生の皆さんが使用されるとのことだったので、スマホでの使用も視野に入れてPWA(プログレッシブウェブアプリ)にしてみた。
簡単に言うとWebアプリケーションをスマートフォンのネイティブアプリみたいにして使えるようにするもの
ハッカソンに参加する前にFoodsCheckerのPWA化をしてたので、僕の書いた記事の通りにやってパパっと実装したね
exifrでの写真の諸情報取得
今昔写真では位置情報を使うので、画像データから位置情報などを取得する必要があった。
で、なんぞ良いのないかなぁと探していたらexifrというものを見つけた
exifrという写真に格納されている位置情報などををRubyから叩けるというgem。
これを使って写真をアップロードする前にメタデータを取得して、位置情報や撮影日時などをサーバへと送信した。
少しフォーマットの成型に手間取ったけど、exifrのおかげで無事に位置情報などを送信することができた。
gmaps4railsでのGoogleMap表示
位置情報などを送信できても、どこの写真なのかがわからないと考えたので管理アプリ上にGoogleMapで場所を表示できるようにした。
gemとして配布されているgmaps4railsを使って、GoogleMapでの表示を実装した。
実装にあたっては下記の記事を参考にさせていただきました。
Bootstrapの適用
最初は、gemのBootstrapを使って素直に実装したんだけど、いかんせんjqueryなどの依存関係がうまくいかなかった。
で、UmiというBootStrapのテンプレートとかも使ってみたんだけどやはりうまくいかず……
で、何かいい方法はないかなぁと考えていたところUmiがnpmに対応したことを知ったんだよね
これはいけるかもしれないと思ったね
Railsではyarnを使うことでJavaScript関係のパッケージを簡単に追加することができる。
で、試したらBootstrapもyarn経由でインストールできた。
ついでにJqueryとかもyarn経由でインストールしておいた
詳しくはこちらの記事を見てほしい
とりあえず、これでBootstrapがちゃんと機能するようになった（あと、本番環境にデプロイする前にassets:precompileしたものをコミットしてデプロイする必要があったね）
Deviseでのログイン機能
Railsではおなじみのログイン機能周りのgemであるDeviseを使った。
この辺は下記の記事が参考になるのでそこを参照されたし
kaminariによるページネーション
Rubyコミッター/Railsコミッターな松田さんが作られているページネーションgem
個人的に使いやすい＆よく使っているのでこれを使わせていただいた。
実装にあたっては下記の記事を参考にした
で、一個だけ問題があった。
通常のkaminariを使ってのページネーションの場合、特に意識する必要はないんだけども
今回の場合、サーバからデータをAPIを通じて受け取ってる。
そのため実際に受け取ったデータが、kaminariで通常処理する型とは異なっててエラーになった。
で、型を確認するとArrayだったのでKaminari.paginate_arrayを使って get kotonaki(事なきを得た)
ActiveAdminでの管理画面作成
で、最後に管理アプリ自体のダッシュボードを作る必要があった。
使ったgemはActiveAdmin。
導入に関しては下記の記事を参考にさせていただいた
で、簡単なダッシュボードの作成はかなり楽に終わったんだけども、一つ問題があった。
ActiveAdminでは基本的にRails側でModelとして処理しているデータを取り扱う。
今回のような外部のサーバにデータがある場合、ActiveAdminからそのまま編集・削除を行うことができない。
で、いったんユーザーのModelにadminというカラムをbooleanで作成してgot kotonakiとなった。
単純に、adminにtrueがわたっている管理ユーザーのみ削除などができるようにしたわけだ。
とはいえ、これでは管理のしにくさが残る。
というわけで、ActiveAdminにカスタマイズを加えることにした。
下記の記事を参考に実装した
で、既に作成済みのindexページをそのままコピペして実装。
通常のcontroller見たくインスタンス変数を渡せないそうなので、view内にサーバへのリクエスト処理を直書きした。
この辺は後々見直す必要があると思う
おわりに
今回の開発で初めて触るライブラリがあったのでかなりいい刺激を得た。
特にActiveAdminやexifr、gmaps4railsはほとんど触ったことがなくて戸惑うことも多かったけど、お陰で色々と新しいことが知れたのでラッキーだった。
今後は実稼働させながらフィードバックをもらって修正していきたいと思う。
参考資料など
