先日、江津市のゲストハウスで開催されたハッカソンに参加してきた。
今昔写真というアプリのローカライズを行うハッカソンで、今昔写真自体はカヤックというところが開発しているソフトウェアになる。
で、ハッカソンではAndroid向けのローカライズをやることに。
でも、トラブルが発生してAndroid版のローカライズができなくなってちゃった。
ペアを組んでいたエンジニアさんと「どうしましょうか？」と話してて、
「じゃあ、Railsで写真をアップロードする機能つくる？」となり、Railsで今昔写真の管理アプリを作ることになった。
この記事は、今昔写真の管理アプリをRailsで作ったときの備忘録。
で、本番環境にはHerokuを使った。
まずは、rails g scaffoldでひな型を作成。
scaffoldのいいところは基本的な処理を自動で作成してくれるので、抜けがなく作ることができるところ。
もちろん、作るにあたって不要そうなものとかも自動生成されるけどね。
今回のハッカソンにおいては時間との勝負だったので、scaffoldを使ってひな型をパパっと作った。
今回作成した管理アプリは高校生の皆さんが使用されるとのことだったので、スマホでの使用も視野に入れてPWA(プログレッシブウェブアプリ)にしてみた。
簡単に言うとWebアプリケーションをスマートフォンのネイティブアプリみたいにして使えるようにするもの
ハッカソンに参加する前にFoodsCheckerのPWA化をしてたので、僕の書いた記事の通りにやってパパっと実装したね
今昔写真では位置情報を使うので、画像データから位置情報などを取得する必要があった。
で、なんぞ良いのないかなぁと探していたらexifrというものを見つけた
exifrという写真に格納されている位置情報などををRubyから叩けるというgem。
これを使って写真をアップロードする前にメタデータを取得して、位置情報や撮影日時などをサーバへと送信した。
少しフォーマットの成型に手間取ったけど、exifrのおかげで無事に位置情報などを送信することができた。
位置情報などを送信できても、どこの写真なのかがわからないと考えたので管理アプリ上にGoogleMapで場所を表示できるようにした。
gemとして配布されているgmaps4railsを使って、GoogleMapでの表示を実装した。
実装にあたっては下記の記事を参考にさせていただきました。
最初は、gemのBootstrapを使って素直に実装したんだけど、いかんせんjqueryなどの依存関係がうまくいかなかった。
で、UmiというBootStrapのテンプレートとかも使ってみたんだけどやはりうまくいかず……
で、何かいい方法はないかなぁと考えていたところUmiがnpmに対応したことを知ったんだよね
これはいけるかもしれないと思ったね
Railsではyarnを使うことでJavaScript関係のパッケージを簡単に追加することができる。
で、試したらBootstrapもyarn経由でインストールできた。
ついでにJqueryとかもyarn経由でインストールしておいた
詳しくはこちらの記事を見てほしい
とりあえず、これでBootstrapがちゃんと機能するようになった（あと、本番環境にデプロイする前にassets:precompileしたものをコミットしてデプロイする必要があったね）
Railsではおなじみのログイン機能周りのgemであるDeviseを使った。
この辺は下記の記事が参考になるのでそこを参照されたし
Rubyコミッター/Railsコミッターな松田さんが作られているページネーションgem
個人的に使いやすい＆よく使っているのでこれを使わせていただいた。
実装にあたっては下記の記事を参考にした
で、一個だけ問題があった。
通常のkaminariを使ってのページネーションの場合、特に意識する必要はないんだけども
今回の場合、サーバからデータをAPIを通じて受け取ってる。
そのため実際に受け取ったデータが、kaminariで通常処理する型とは異なっててエラーになった。
で、型を確認するとArrayだったのでKaminari.paginate_arrayを使って get kotonaki(事なきを得た)
で、最後に管理アプリ自体のダッシュボードを作る必要があった。
使ったgemはActiveAdmin。
導入に関しては下記の記事を参考にさせていただいた
で、簡単なダッシュボードの作成はかなり楽に終わったんだけども、一つ問題があった。
ActiveAdminでは基本的にRails側でModelとして処理しているデータを取り扱う。
今回のような外部のサーバにデータがある場合、ActiveAdminからそのまま編集・削除を行うことができない。
で、いったんユーザーのModelにadminというカラムをbooleanで作成してgot kotonakiとなった。
単純に、adminにtrueがわたっている管理ユーザーのみ削除などができるようにしたわけだ。
とはいえ、これでは管理のしにくさが残る。
というわけで、ActiveAdminにカスタマイズを加えることにした。
下記の記事を参考に実装した
で、既に作成済みのindexページをそのままコピペして実装。
通常のcontroller見たくインスタンス変数を渡せないそうなので、view内にサーバへのリクエスト処理を直書きした。
この辺は後々見直す必要があると思う
今回の開発で初めて触るライブラリがあったのでかなりいい刺激を得た。
特にActiveAdminやexifr、gmaps4railsはほとんど触ったことがなくて戸惑うことも多かったけど、お陰で色々と新しいことが知れたのでラッキーだった。
今後は実稼働させながらフィードバックをもらって修正していきたいと思う。
ゲームリンクスのWebサイトはRuby on Rails + Herokuで運用しています。
デザイン面などはUmiという日本語をきれいに表示できるBootstrapテンプレートを使っていました。
で、そのUmiがnpmに対応したとのことなのでyarnを使って適用してみた。
まず、app/assets/javascriptsとapp/assets/stylesheetsの中にあるBootstrap.jsとBootstrap.cssを削除
次に、yarnでUmiをインストール
yarn add bootstrap-umi
app/assets/javascripts/application.js に下記を追加
//= require bootstrap-umi/dist/js/bootstrap
app/assets/stylesheets/application.cssに下記を追加
やったことといえばこれだけ。
まあ、元々Vue.jsを使うためにyarnをインストールしたり、webpackerを使えるようにしたりしてたので難しいことはなかった
いつものようにMastodonのmaster追従しようとしたら、Node.jsのバージョンが古くてアップデートした。
これはその時の備忘録
最新のソースコードによれば、Mastodonで使用するNode.jsはv8未満をサポート対象外としたみたい
で、以下のコマンドでバージョンを確認したら
nodejs -v
としたら 6.1.2と出たのでアップデートしなきゃいけないことが分かった。
で、まずしたことがnodenvを導入してアップデートする方法。
以下の記事を参考にnodenvをインストールしてアップデートしてみた。
すんなりとアップデートできた。
で、その後に
sudo yum remove nodejs
を実行して、古いバージョンを取り除いた。
これで一応master追従できたんだけど、実際のインスタンスの動きを見るとタイムラインの表示がおかしかった。
「・・・」という表示が出て、タイムラインの取得がうまくいっていないようだった。
なので古いNode.jsを再度インストールして、nodenvを一旦アンインストールした(インスタンスのタイムラインを止めないため)
その後、以下の記事を参考にroot側でNode.js v8.9.4をインストールした。
これで、タイムラインで発生していた問題は解決できた。
Mastodonの次期バージョンでは恐らくいくつかのインスタンスでNode.jsの必要があると思う。
これがその人たちに役立てばと思うねー
C++版LINKSでのゲームメニューがかなり冗長だった(メニュー項目分だけ異なる関数を呼び出す形になってたから)ので、短くできないかなーと思い色々調べてたのが事のきっかけ
で、色々調べてたらstd::arrayに関数オブジェクトとして格納できるらしい……？ということを知ったので試してみた。
std::fuctionを使ってラムダ式を関数オブジェクトとして受け取る。
std::function<void(void)> func1 = []{ std::cout << "func1" << std::endl; return 0;};
で、それをstd::arrayに代入してるだけ
std::array<std::function<void(void)>, 3> Func = {func1, func2, func3};
あとは、std::arrayなどで使えるrange-based-forを使って各ラムダ式を実行するだけ
for(auto func : Func)
func();
こんなかんじで、ラムダ式をstd::arrayに渡してrange-based-forで回して実行できる
あと、既存の関数とか実行する時はこんなかんじでいけるみたい
これで、ゲームメニュー周りのコードなんかも短くできるんじゃないかと思う
はじめて触ってみたけど、std::function便利だなぁ
先日の松江Ruby会議09でのセッション時に話してた「にゃーんボタン」をさっそく作ってみた
ちなみに、その時のスライドはこれ
AmazonDashボタンはプライム会員であれば簡単に購入できます。ちなみに、こちらから購入可能
購入後は下記の記事にあるようにスマホからセットアップを行う。
肝は、LinuxマシンとAmazonDashボタンの接続するWifiは同一のものを選ぶことと、商品選択は無視して設定を終了すること
用意出来たら、Python3とpipをインストール。
ちなみに僕が使ったのはLubuntu18.04だったので、Python3は既にインストール済みだったので、以下のコマンドを使ってpipだけをインストール
curl -O https://bootstrap.pypa.io/get-pip.py
python3 get-pip.py
pipをインストールした後は、amazon-dashをインストールする
pip install amazon-dash
次に、AmazonDashボタンのMACアドレスを調べる。
sudo amazon-dash discovery
このコマンドを実行後、AmazonDashボタンを押すとMACアドレスが表示される。
そして、amazon-dash.ymlを作成し、以下のように記述していく
settings:
delay: 0
devices:
AA:AA:AA:AA:AA:AA:
name: meow
user: SH
cmd ruby /home/SH/Desktop/nyaaan/meow.rb
で、実際にMastodonへ呟くmeow.rbを作成
require 'mastodon'
client = Mastodon::REST::Client.new(base_url:"呟きたいMastodonのURL", bearer_token: "アクセストークン")
response = client.create_status("にゃーん！")
最後に、rootで叩けるように変更
touch amazon-dash.yml
sudo chown root:root amazon-dash.yml
あとは、以下のコマンドを実行してAmazonDashボタンを連打するだけ
sudo amazon-dash run
o
とりあえず、これでAmazonDashボタンを使ってのMastodonへ「にゃーん！」って呟けるようになった！
皆さんも、ストレスがたまった時に押してみてはどうでしょうか？
