「Rails」の記事 - Crieit

「引用」をいい感じに展開してくれるサービス「inyoo.jp」をリリースしました

2022-01-17T18:28:45+09:00

inyoo.jp は「引用」をいい感じに展開してくれる短縮 URL サービスです。

ウェブの記事などを読んでいて、文章の一部を SNS に「引用」をしたくなったとき、該当箇所を選択して右クリックから「選択箇所へのリンクをコピー」して、

このリンクの URL を inyoo.jp のトップページのフォームに貼り付けて「引用を作成」を押します。

作成された「引用」を Twitter や Facebook などにシェアすると、こんな感じで引用部分のテキストが画像でいい感じに展開されます！

ちなみにこのリンクは開くとページが自動的にスクロールされて、引用の該当箇所がハイライトされるようになっています。説明を読んだだけだと何がなんだか分からないかなと思いますので、ぜひ試しに使ってみてくださいね！

また、Google Chrome 以外のブラウザや、スマートフォンからの利用方法など、詳しい使い方はトップページの「使い方」に詳しく書いてありますので、そちらをご参照ください。

ここまで読んでくれた方へ

ぜひ試しに inyoo.jp を使ってみてください！！

ご意見や不具合の報告、フィードバックや改善の要望など、何かありましたら Twitter で @inyoo_jp までメンションか DM をお願いします！また、いいねやコメント、SNS での共有などをしていただけると今後の励みになります。

よろしくお願いします！！！

📝 Rails で config/database.yml よりも ENV['DATABASE_URL'] の設定が優先される話

2021-05-30T20:49:14+09:00

MySQL を利用する Rails プロジェクトを起動しようとしたところ、下記のエラーが発生しました。

bin/rails s
# データベースアダプターには mysql2 を選択している状態なのに postgresql で接続しようとしている
Error loading the 'postgresql' Active Record adapter. Missing a gem it depends on? pg is not part of the bundle. Add it to your Gemfile. (LoadError)

# config/database.yml ファイルの中身一部抜粋

# mysql2 をデータベースアダプターとして利用しているため、
# PostgreSQL 接続のための pg ライブラリの追加を求めるエラーが発生しているのは何かおかしい。。
default: &default
  adapter: mysql2
#...

何でや、、と思い Rails のドキュメントを読んでいた所、公式サイトに Connection Preference に関する記述を見つけました。

Since pool is not in the ENV['DATABASE_URL'] provided connection information its information is merged in. Since adapter is duplicate, the ENV['DATABASE_URL'] connection information wins.

どうやら config/database.yml と ENV['DATABASE_URL'] の両方が設定されている場合、設定値に重複がある項目については ENV['DATABASE_URL'] の値が優先されるようでした。

今回は DATABASE_URL に下記の PostgreSQL URL が設定されてしまっていたため、config/database.yml では MySQL を利用していたのにも関わらず、データベースアダプターに PostgreSQL が使われてしまっていたようです。

env | grep DATABASE_URL
# 環境変数 DATABASE_URL に PostgreSQL の URL が設定されている
DATABASE_URL=postgresql://user:password@localhost:5432/something_development

そのため、DATABASE_URL の中身を空にすることで、本来の意図通りに config/database.yml の設定を反映させることができました。

# 筆者は fish を利用しているので set -e で環境変数を空にした
set -e DATABASE_URL

# 何も出力されないことを確認し DATABASE_URL が空であることを確認する
env | grep DATABASE_URL

# Rails サーバーが正常に起動するか再度確認する
bin/rails s

#...
# 無事アプリケーションサーバーが起動すること確認できれば OK
=> Booting Puma
=> Rails 6.0.3.6 application starting in development
=> Run `rails server --help` for more startup options
Puma starting in single mode...
* Version 4.3.7 (ruby 2.6.1-p33), codename: Mysterious Traveller
* Min threads: 5, max threads: 5
* Environment: development
* Listening on tcp://127.0.0.1:3000
* Listening on tcp://[::1]:3000
Use Ctrl-C to stop

今回はたまたま別プロジェクトでゴニョゴニョ作業をしていた名残で環境変数 DATABASE_URL が設定されてしまっていて、かつそのままの流れで Rails プロジェクトで作業していたため遭遇してしまいました。。

ローカル環境で変数を設定する際は direnv や dotenv 等を利用して極力手動では環境変数をいじらないようにしようと思いました (所感)

参考リンク

Configuring Rails Applications — Ruby on Rails Guides

遅延ロードさせてWebアプリを高速化する

2021-05-10T22:06:08+09:00

遅延ロードとは

基本的にwebアプリは表示するデータを読み込んでからページを表示します。
しかしそれだと重いデータを取得・表示する場合、ページの表示速度が落ちて重たい動作になります。
なので先に軽い部分だけを読み込みそのページに移動してから重いデータを読み込むことで
すべてを表示するまでの時間は変わらない（むしろ少し落ちる）がページの移動速度を大幅に上げることができます。
体感上はかなりサクサクした動作になります。

↓ツイッターの遅延ロード

実装

gem 'render_async'

を書きbundle

次にrenderを書き直します。

変更前：

```erb:index.html
<%= render "data", posts:@posts %>


これを

```erb:index.html
<%= render_async data_path %>
or
<%= render_async data_user_path(@user) %>

このようにする。

次にルーティング

get "data", to: "posts#data", as: "data"
#↓パラメーターが必要な場合
get "data_user/:id", to: "posts#data_user", as: "data"

  def index
    #@posts = Post.all
  end

  def data
   @posts = Post.all
   render partial: "data", locals: {posts:@posts}
  end

  def data_user
    @user = User.find_by(name: params[:id])
    @posts = @user.posts.all

    render partial: "data_user", locals: {posts:@posts}
  end

最後はレイアウトに

```erb:application.html.erb
<%= content_for :render_async %>


を追加。
これだけで遅延ロードが完成します。
![スクリーンショット 2021-05-10 192747.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480294/e7e53d4b-7114-b09c-cf2e-a54ec754d08c.png)


# turbolinksを使用している場合
このままだと時々表示されない場合があります。

<%= render_async data_path, html_options: { 'data-turbolinks-track': 'reload' } %>

html_options: { 'data-turbolinks-track': 'reload' }を追加して
config/initializersにrender_async.rbを作りましょう

```render_async.rb
RenderAsync.configure do |config|
  config.turbolinks = true # Enable this option if you are using Turbolinks 5+
end

jqueyを使う

kaminariやjscrollで無限スクロールなどを実装している場合、これをしないと動きません。

config/initializers/render_async.rb RenderAsync.configure do |config| config.jquery = true end

まとめ

遅延ロードって大きなサービスだと結構使われているのに日本語の情報が少なくて困ったので書きました。
体感上の動作速度がかなり変わるのでぜひやってみてください。

宣伝

https://ammot.net/

AmmotというSNSを作りました。
文字数制限が6000字まで、画像・動画・PDF・音声は同時に10個まで投稿可能な自由なSNSです。
マークダウンにも対応しているので皆さん大好きなソースコードもきれいに載せれます。
ぜひ使ってみてください。

僕のツイッターアカ
https://twitter.com/yamada1531

制限の少ない自由なSNS　～Ammot～

2021-04-14T20:37:19+09:00

初めに

この度Ammotというwebアプリを開発しました。
「制限の少ない自由な投稿を」がコンセプトで文字数が6000字まで、画像・動画・PDF・音声は同時に10個まで投稿可能です。
「ツイッターは文字数制限がきつい、ただfacebookは実名制だしデザインがごちゃごちゃでいや」
という声を聴いたので作ってみました。

https://ammot.net/

qiitaのほうでも宣伝したのでよかったら見てください（ちょい違う内容です。）
https://qiita.com/UTOG/items/d5e6194aaa31b54e97c9

どんなサービスか

↑これがログイン後のトップです。フォローしたユーザーの投稿がHOMEに流れて、
サイドバーにはおすすめの投稿と現在人気のタグを表示しています。

文字数制限が6000字まで、画像・動画・PDF・音声は同時に10個まで投稿可能です。

先ほどサイドバーにおすすめを表示していると書きましたが
実はサイドバーはおすすめ機能などなくランダムで表示してるだけです。。。
おすすめ機能（レコメンド）を実装できなかったというのもありますが、僕自身レコメンド機能が結構嫌いなんですよね。同じ、似たようなものばかり出てきて飽きてきますしたまには普段と全く違うものを見たい時もあるでしょう。
だからタイムライン（home)には好きな投稿が流れるようになっていてサイドバーは完全ランダムにしました。

ツイッターのいやなとこ

文字数制限
編集ができない（個人的にめちゃ嫌）

facebookのいやなとこ

制限はないがデザインがぐちゃぐちゃ
実名制はなんかいやだ

この二つSNSの問題を解決するのがAmmotです。

工夫した点

無料プランにこだわった

こういうものはバズらない限り、すぐには成功しません。使用者が全くいなくても１年は公開しようと思います。
でも使用者がいないのに月数百円も取られるの馬鹿馬鹿しいじゃないですか。だからドメイン以外はすべて無料です。
ただherokuの無料プランだとドメインを設定できないのでCloudflareを使い設定しました。

参考記事：
https://qiita.com/serinuntius/items/f7f08b2221f5ad068f5d

しかし、やはりSNSは速度が非常に重要なので少しだけ批判を受けました。自分はもう少しユーザーと投稿が増えてきたら有料のサーバーにしようと思います。

デザインとUIにこだわった（つもり）

フィットスクロール？だったり投稿画面のポップアップだったり
今まで使ってこなかった手法を使ってみました。
自己満になってるかもしれない

ちなみにデザインを参考にしたサイトはtumblrです。
比べればまぁまぁ似てると思います。

機能性

最初にも書きましたが画像・動画・PDF・音声の投稿とプレビュー機能を実装しました。
これにはいろんな記事がありましたが

まともに動きかつ一番簡単でコードもシンプルなこの記事を参考にするのをお勧めします。
https://qiita.com/0thefool/items/5af0f17f0075e7e0e013

マークダウン

他SNSとの差別化も含めマークダウンに対応しました。
文字の大きさやフォント？も自由に変えれます。

使用した技術

rails6
ruby2.7
postgresql
heroku free
aws s3

gem 'ridgepole'
gem 'slim-rails'
gem 'html2slim'
gem 'pry-rails'
gem 'devise'
gem 'kaminari'
gem 'activeadmin'
gem 'rack-attack'
gem 'rails-i18n'
gem 'devise-i18n'
gem 'devise-i18n-views'
gem 'carrierwave'
gem 'rmagick'
gem 'rinku'
gem 'fog-aws' 
gem 'dotenv-rails'
gem 'omniauth-google-oauth2'
gem 'omniauth-rails_csrf_protection'
gem 'redcarpet'
gem "rouge"
gem 'redis-rails'
#一部抜いてます

まとめ

今回の開発は今までやらなかったことにめちゃ挑戦できたので楽しかったです
苦手なjquery・javascriptもプレビュー機能のおかげでちょっとわかった気がしてます。

文字数制限や実名制で不便を感じたことのある人はぜひAmmot使ってください！お願いします。

↓URL
https://ammot.net/

↓僕のAmmotのアカウント
https://ammot.net/user/yamada

↓僕のツイッターのアカウント
https://twitter.com/yamada1531

プログラムコードを販売できるサービスまとめ

2020-10-18T18:32:30+09:00

今回はプログラムコードを販売できるサービスをまとめました。

code-sell

code-sell

宣伝です...。僕が1週間くらい前に作ったサービスです。なるべく簡単に販売・購入できるようにしました。
いま僕が今まで作ったwebアプリのコードをすべて無料で公開しています。

piecex

piecex

おそらく一番メジャーで人気のあるサービスです。
AIを搭載していて最適な価格がわかるそうです。

osadasoft

osadasoft
コード一つ一つが高額です

補足

sourcegene
は登録ができませんでした。最新のコードも2018年なのでおそらくサービス終了しているんだと思います。

まとめ

今回はプログラムコードを販売できるサービスをまとめてみました。とりあえずいえるのは
code-sell使ってください。

zsh上で、Rails serverの外部からのIPv6接続を許可したい場合の、オプションの書き方

2020-05-20T02:16:14+09:00

　zsh上で、Rails serverの外部からのIPv6接続を許可したい場合は、

bin/rails server -b \[::]

と書く必要があります。なぜかと言うと、[が組み込みコマンドと解釈されてしまうためで、エスケープが必要だからのようです。
　なお、bashでは普通に、

bin/rails s -b [::]

で大丈夫でした。
　また、IPv6の接続許可を行えば、自動的にIPv4でも接続できるようになりました。この辺は要調査ではありますが。

Railsでモーダルの出し分けを管理する

2020-05-01T22:32:30+09:00

Railsでモーダルの表示処理をまとめて衝突しないように管理する方法を紹介します。

背景

ツクリンクを運営する中でモーダルが少しづつ増え、衝突することがあったためモーダルの優先順位を付け、衝突しないよう実装をしました。

実装

前提

以下の３つのモーダルがあるとします。

A: 初回ログインで出すモーダル（全ページ）
B: 特定のユーザーにだけお知らせを出すモーダル（全ページ）
C: 特定のページで出すモーダル（Posts#show）

コードサンプル

全ページに出すモーダルはApplicationControllerで該当ユーザーか判断しモーダルに必要な情報をセットします。

# controllers/application_controller.rb
class ApplicationController < ActionController::Base
  before_action :set_modal_A
  before_action :set_modal_B

  def set_modal_A
    return if cookies['modal_A'].present? # 表示済みなら何もしない
    if is_first_signed_in? # 初回ログインか？
      @modal_A = { title: '表示に必要な情報など' }
    end
  end

  def set_modal_B
    return if cookies['modal_B'].present? # 表示済みなら何もしない
    if show_notice? # お知らせを出すユーザーか？
      @modal_B = true
    end
  end
end

Viewごとに出るモーダルは provide でモーダルをセット

# views/posts/show.html.erb
<% provide :modal, render('modal/C') %>

レイアウトのView（もしくはそれに準ずるパーシャル）でモーダルの出し分けを行います。
ifの上位にあるものが優先され、モーダルが複数renderされるのを防いでいます。

# views/layouts/application.html.erb
<% if yield(:modal).present? %>
  <%= yield(:modal) %>

<% elsif @modal_B.present? %>
  <%= render 'modal/B' %>
<% elsif @modal_A.present? %>
  <%= render 'modal/A' %>
<% end %>

各モーダルのViewでは表示を管理するCookieを保存するなどの処理をしています。

# views/modal/A.html.erb
<% cookies.permanent['modal_A'] = { value: true, expires: 1.day } %>
お知らせだよ！

作業日誌アプリ「Workdiary」説明書

2019-12-31T22:28:48+09:00

Workdiary

初めて制作してきたWEBアプリです。
日記とその日にやったワークの登録を行う作業日誌アプリで、農作業を想定していますがどんなジャンルの作業でも（おそらく）使えるような内容になっています。

GitHubリポジトリはこちら

初アプリとはいえ未完の部分が多く、クオリティ的には課題が山積み。
お時間のある時になんとなくいじってみてもらえたら嬉しいです。

アプリの使用イメージ

自身の農作業の記録を目的として制作してみました。
勉強の記録などに使ってもいいかもしれません。

(1)やった作業を入力する
農作業をやっていて、一段落ついた休憩時とかその日家に帰ってお酒飲みながらでも、スマホをポチポチやってその日にやった作業内容を登録。この時にメモしておきたい数量や機械のセッティング内容などを簡単に入れておきます。

(2)必要なときに調べる
その後「このセッティングって前回どうしていたっけ？」という時に、スマホをポチポチやって以前に入力した内容を確認します。

特徴としては「テンプレート機能」というものをつけてみました。
作業内容の定型文（テンプレート）をユーザーが事前に作っておくことで、やった作業の記録を簡単に記録できるようにしています。

アプリの使い方

（１）サインアップ・ログイン

サンプルアカウントでログインしてみてください。
初期値でフォームにサンプルアカウントが入っているのでそのまま「ログイン」をクリックすると入れます。
任意のメールアドレスとパスワードでユーザー登録（サインアップ）することもできます。
メールアドレスは架空のものでOKです。現状の設定では実際にメールは届きません。

（２）ナビゲーションバー

ログインしたら画面上部にナビゲーションバーが登場し、アイコンをクリックすると画面遷移します。左から、

ダイアリー一覧：ダイアリーとワークを一覧表示します。
ワーク一覧：ワークをカテゴリごとに一覧表示します。（未実装）
検索：日記・ワークを文字列検索できます。（未実装）
編集：カテゴリとテンプレートを編集できます。
アカウント：ログイン状況の確認とログアウトができます。

（３）メインページ（「日記一覧」画面）

ログインしたら最初にこの画面が表示されます。
ここでは既に登録された「日記」と「ワーク」が一覧で表示され、それらの作成もできるこのアプリのメインページになります。

日記の作成
- 「ダイアリーを書く」から今日の日記を投稿します（画像では「日記を書く」）。
- 投稿できる日付は今日に限らず過去でも未来でもプルダウンで選択できます。
- ダイアリーは日付あたり１つのみ作成できます。

ワークの作成
- ダイアリーを作ったら、そのダイアリーに紐づいたワークが作成できるようになります。日付の横にある「ワークの追加から作成します。
- カテゴリ、作業名、作業内容を入力して登録します（写真はフォームのみで未実装）。

その他
・ダイアリー一覧の日付をクリックすると日記の詳細画面に映ります
・登録したダイアリー・ワークの編集と削除もできます
・「メモする」をクリックすると、ワークに対してメモを１つ追加することができます。後から気づいた点を追記したい場合などに活用できます。

（４）「カテゴリ」について

ワークに対してカテゴリを登録しておくことで、後からカテゴリごとにワークを一覧表示できるようにするものです。

ワーク入力時に「カテゴリ」をプルダウンで選択します。
事前に「＋カテゴリ追加」から自分でカテゴリを作っておく必要があります（画面遷移します）。
ナビゲーションバーの「編集」ページでカテゴリを編集・削除することができます。
カテゴリを削除したら、該当するワークからはカテゴリが外れてしまいます。

（５）「テンプレート」について

ワーク入力時にテンプレートを選択することで作業内容に定型文を入力できます。例えば「決まった一連のワークがあって、その作業内容の定型文を作っておいて数値のみ変えて登録する」といった活用なんかを想定しています。

ワーク入力時に「テンプレート」をプルダウンで選択するとその下の作業内容フォームにテンプレートの内容が自動で入力されるので、それを書き換えるなどして投稿することができます。
事前に「＋テンプレート追加」から自分でテンプレートを作っておく必要があります（画面遷移します）。
ナビゲーションバーの「編集」ページでテンプレートを編集・削除することができます。

↓テンプレートをプルダウンリストで選択すると……

↓このように作業内容のフォームに反映されます

（６）ログアウト

ナビゲーションバーの「アカウント」ページよりログアウトできます。

......以上、最低限のアプリの説明書でした。

開発に使用したスキル

言語とフレームワーク
- HTML, CSS
- Ruby, Ruby on Rails
- 一部、Javascript, JqueryでAjax化

開発環境等
- AWS cloud9
- Heroku

またRailsで使った主なgemとしては
- Bootstrap4（デザイン）
- Font Awesome （アイコン使用）
- Devise（ログイン機能）

デザイン周りはほぼBootstrapを活用しています。
一部機能にjQueryを使用してAjax化していますが、ちゃんと理解して使えていないというのが正直なところ。
ログイン機能のメール認証に関しては実際の認証は外した状態です。

今後の実装予定と課題

制作期間が間延びしてしまいモチベーション的にも厳しくなってきたので、これで一区切りして次に移ろうと考えてますが、やはり未消化でモヤモヤする部分もあります。

ワーク一覧表示画面、検索画面の作成
（完了！）パンくずリストをつける
（完了！）アラートメッセージの表示方法と日本語化
ワーク登録時に写真を追加できるようにする
ワーク登録時のカテゴリ・テンプレート新規作成をモーダルウィンドウで入力しやすくする
日付をカレンダーから選べるようにする

この辺りは時間を見つけてもうちょっと取り組んでいきます。
また公開したことによって細かい部分で自分で気付けなかった問題やバグが出てくると思うので、そういったデバッグ作業から今後の学びにしていきたいと思います。

例えば現状でも、ダイアリーやワークの登録に文字数制限をかけておいたりすべきかなーとか、UI的にダイアリーやワークの作り方がわかりづらいなーとか手間がかかるなーとか、色々見えてきますね。

今回一度公開することで、友人に見せてみることができたのが良かったです。何人かに見てもらったのですが、皆さんまずは「どう使えばいいかわからない」と口を揃えて言っていただけます。。。
これを実感するだけでも公開した意味があったなーと感じます。

このアプリは僕の処女作としてしばらく公開を続けてみて、いろんな方にサンドバッグにしていただきたい所存です。
とはいえぜひお手柔らかにお願いします！（よわい）

Rails6 ビューファイルにRubyのコード書く時の<% %>と<%= %>の違い

2019-12-18T23:02:34+09:00

<% %>と<%= %>の違い

: この中に書いたコードは表示されない。変数定義やif文などの記載に使う。
: この中に書いたコードは表示される。ビューファイル上に変数の値を表示したい時などに使用する

【Rails】Bootstrapを導入したらAjaxが機能しなくなっていたお話

2019-12-14T11:44:05+09:00

参考にしたサイト

参考１
【Rails】 jQueryが動作しない時の対処法 (読み込む順番に気をつけないといけない) - Qiita
参考２
【2019年版】jQuery最新の読み込みスクリプト「コピペOK＋裏技」 | マコブログ
今回の自作Railsアプリはこちら。
Workdiary
GitHub - Massasquash/workdiary

はじめに

１．起こったこと

Railsアプリで、Ajax（jQuery）を使用した機能を作っていてしばらく上手く動いていたのですが、Bootstrapを導入してjavascript周りをいじってから機能しなくなっていました。

２．解決策

とても簡単なことで、HTMLファイルのheadタグ内に記述すべきjQuery CDN（scriptタグ）の位置が間違っていたのが原因でした。
さらにこのjQuery CDN（scriptタグ）とjavascript_include_tagの順番がこの通りになっていることが大事なようです。（参考リンク１）

app/views/layouts/application.html.erb


    ・
    ・
    ・
  
  
  
  
  

  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

３．解説・補足

bootstrapを導入する際に、bodyタグの一番下にjQuery CDN（scriptタグ）を移動してしまっていたのが原因のようです。
記述する位置には気をつけましょう！

修正のためやってみたこと

Javascriptファイルが読み込まれているか確かめる

このAjaxを使用している部分は「フォーム入力時にプルダウンでテンプレートを選択 → 選択されたテンプレートの中身がフォームに自動入力される」という機能なのですが、
まずはjavascriptが正常に読み込まれていないのかと思い、
試しに「プルダウンを選択した時に選択されたテンプレートがアラートで表示される」ように、呼び出されるjavascriptにalert(template_id)を記述してみたところ、しっかりとアラートが出てきました。
javascriptは機能しているようです。

Ajax（jQuery）が機能しているか確かめる

次に、Ajaxで渡されるはずのtemplatesコントローラーのget_bodyアクションが処理されているかを調べました。適当な行にraise params.inspectと入れることで、その箇所でエラーが発生するはずです。
ところがプルダウンリストを選択してもエラーは発生せず、フォームにも何も反映されません。
Ajaxが機能せず、目的のコントローラーのアクションに渡っていないことがわかりました。
javascriptは読み込まれていても、Ajaxが動作しない。
つまりjQueryの読み込みが上手くいってなさそうで、調べてみると（参考リンク１）にたどり着いた経緯です。

用語

jQuery CDN

という単語が出てきましたが、（参考リンク２）によると、
jQueryを使うには、jQuery本体をダウンロードして読み込む方法と、CDNを経由して使う方法の２種類があるようです。後者の方が、jQueryをダウンロードする必要がなく、今回のようにHTMLファイルのheadタグ内に以下のようなsqriptタグを貼り付けるだけでjQueryが動作するようになります。

これが概念としてまだイマイチ理解できませんでした。
宿題とします。

MEMO

参考までに該当部分のコードを晒しておきます。
（色々余計なコードもそのままにしていると思うので、初心者の方は参考にしないでください…）

app/views/layouts/application.html.erb


  
  
  

  
  

  Workdiary
  <%= csrf_meta_tags %>
  <%= csp_meta_tag %>


  
  
  
  
  

  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

app/assets/javascripts/application/js

function changeTemplate(val){
  var template_id = val;

  // alert(template_id)

  $.ajax({
    url: "/templates/get_body",
    type: "GET",
    data: {
      template_id: template_id
    }
  })
}

app/controllers/concerns/templates_controller.rb

  def get_body
    template = Template.find(params[:template_id])
    @template_body = template.body
    respond_to do |format|
      format.js
    end
  end

React PWA + Rails GraphQLで作ったポモドーロRPGに使った技術やその選定理由を書いてみた

2019-09-26T22:08:54+09:00

先日、『g4』というポモドーロ+RPGなサービスをリリースしました。

そのサービスで使った技術について聞かれることがあったので残しておきます。

どんなサービス?

ポモドーロ・タイマーを使い25分間集中すると経験値をもらえ、その経験値でレベルが上がる。
って言う感じのやつです。

https://www.g-g-g-g.games

こんな特徴があります。

ポモドーロ・タイマーやRPG的なUIはリッチで動きがある
現在のステータスをOGP画像にしてシェアできる
上昇する能力値や覚えるスキルは登録した文章を解析して決まる

構成はこんな感じ

フロントエンドの選定理由

フロントエンドはSSRしたReactアプリをfly.ioにおいています

[React]

自分は過去に仕事でNuxt.jsや生Vue.jsを使ったことがあり、個人ではExpoやNext.jsでReactにも触っていました。

今回Reactを選択した理由は以下です。

型が欲しかった。Typescriptを使いたかった
Reactのほうが書いていて楽しい（個人の感想です）
- React Hooksめっちゃいい
Apolloを使うならVueよりReactのほうが色々揃っている

[fly.io]

SSRするためにNode.jsをホスティングするやつが欲しかったので選定。
mizchiさんのブログで知り、面白そうだなと思ったのがきっかけ。
べつにfirebase hostingでもよかったですが、以下が決め手

firebase hosting同様初期導入費用がほぼ0
CDN
キャッシュコントロール
svgを使ったOGP画像の生成ができる

特に、

svgを使ったOGP画像の生成ができる

に有用性を感じて選定したんですが、現時点ではカスタムフォントと日本語への対応が十分でなく、別途Cloud Runを使うことになってしまっています（後述）
（サポートに聞いたらリポジトリ教えてもらったので（OSS）対応できるようなら自分で対応してなげたいなぁ）

キャッシュコントロールもよい

キャッシュの操作も面白くて、
g4の公開用ページではAPIからもらった結果をキャッシュして、キャッシュがあればそれをそのまま返すということをしています。

これによってAPIサーバーへの負荷はかなり低くなってると思います。
APIサーバー側からは、データ更新時にfly.ioのキャッシュを削除する操作をしていて、データが更新されるまではfly.ioはキャッシュを使い続けてます。

この辺のAPIが普通に使いやすくて簡単にかけるのでめっちゃ良きです。

fly.io良いよ

fly.io自体ははデプロイも早いし、導入コストも安いのでnowとかと並べて、手軽にNode.jsをホスティングするための選択肢にしてもいいんじゃないかなって思います。

Next.jsを選ばなかった理由

SSRする予定ではありましたが、OGPだけ生成できればいいなというレベルだったので、通常のReactアプリで作りました。
なるべく継続開発するため、アップデートの手間と依存を減らしたかったのも少しある

[PWA]を選定した理由

最初は、Expoで作ろうかと思っていました。

もともとSPAでアプリっぽいUIを作る仕事を受けたときに、Nuxt.js + Firebaseで作り、マルチブラウザ対応が辛いと思った経験がありました。

RNならその辺いい感じに作れるかもと思ってみんなの成長というアプリでExpoを試しみて、使い勝手が良い事までは確認してました。

ただ今回はモバイルより、デスクトップアプリのほうが欲しいということに気づき、
Electronで作りやすかったり、PWAならそのままインストールもできちゃうのでWebでいいかなって思いPWAにしました。

なのでマルチブラウザ辛いは解決してないです。
ここは個人開発なので修行と割り切って本業に生かしていきます。
Safari対応が結構めんどいけど、ユーザー多くて無視できない...

マルチブラウザと言っても、現状Chrome、Safari以外はほぼ無視してまっす。

[Apollo Client (react-apollo)]

これもSPAでアプリっぽいUIを作る仕事で、Nuxt.js + Firebaseで作ったときに、Firebaseのデータベース（このときはrealtime database使ってた)をフロントに反映するのが辛くて、同じようにREST APIも辛いだろうなと思って、GraphQLに手をだしたのがきっかけでした。

GraphQLだけでもすごく良いのですが、Apollo Clientがいいのはキャッシュコントールで、
クエリ毎にキャッシュを優先するかサーバーを優先するかを選択できます。

また、キャッシュがあれば再取得しないなどを簡単に書けたり、とにかくこれはSPAのベストプラクティスだなって感じの実装をシンプルに書けます。

Mutationするとキャッシュが書き換わったりするのもめっちゃ良き

正直この辺のこと考えながらSPA実装するのってかなり大変じゃない?ってか大変だった
アプリライクなUIのSPAならApollo Client使おうぜ！

こいつのおかげでこれまたAPIサーバーの負荷はまあまあ抑えられてそうです。

[Firebase Auth, Storage]について

バックエンドはRailsですが、APIサーバー作るのに正直Deviseとか使いたくないです（完）

Twitter連携やら諸々簡単なので選ばない理由がない。
Auth0は選択肢に入るけど今回GCPなのでGoogleでまとめられるし、そこまで込み入った認証必要ないしでこれにしました。

Storageは別に何でもよかったですが、Firebase Authの認証ユーザー単位での権限指定が楽なので使い勝手は良いです。

デザインについて

g4のデザインはレスポンシブのヘルパーとしてbootstrap-gridだけ使わせてもらってます。
めっちゃ便利なのでおすすめ。

それ以外はcss全部自分で書いてます。

コンポーネントファーストで作成しており、Atomic Designの粒度で、Storybook作ってコンポーネントを作ってる感じです。
Storybookは割とぶっ壊れやすかったり、他のビルド設定と競合とか重複したり、辛みもありますが、storyshotsによるスナップショットの差分確認ができるのと、テストの安心感があるので、無いと無いで不安ではあります。

バックエンドの選定理由

[graphql-ruby & Ruby on Rails]

Apollo Clientの項で書きましたが、GraphQLを使うことは決まっていました。
GraphQLをマネージドでホスティングしてくれるやつを探したりしたんですが、普段Railsエンジニアなので慣れてるからテストとかも書きやすいしRailsでいっかで、graphql-rubyにしました。

Railsにするとランニングコストは割とかかるんですが、今回は個人開発のメインに据えて長く継続開発したいを目的にしてたので、
稼働してないものにお金払うみたいなことにならない想定（自分が使い続ける）で、コストかける覚悟はしました。

graphql-rubyは仕事でも使ってるので、今後も押していきたい存在。

[GCP/App Engine]

App Engineについてはこちらの記事で書きました。

要約するとHerokuでも良かったけど、使ってみたかったのでGCPにした。です。

[GCP/Natural Language API]

便利。Azureとかにもありますが、今回はGoogle統一で行きました。くらいの選定理由

[GCP/Cloud Run]について

Cloud Runは今回使う予定は全くありませんでした。

今利用している理由としては、

fly.ioでOGPを生成できるとふんでいたができなかった。
とりあえず手っ取り早くカスタムしたDockerimageでfry.ioをあまりお金をかけずに使えるとこはないか。

からの、Cloud Run。

中身は日本語とフォントをインストールした普通のNodeイメージに
fly.ioのサーバーを単純に乗っけて起動しているだけです。（プレビルドして実行したいがやり方が分からずdevサーバー起動しているのでなんとかしたい。誰かやり方知りませんか。）

なので、いずれはfly.ioだけでできるようして、Cloud Runをやめたいです。

Cloud Run超便利

そんな理由で使い始めましたが、驚くくらい簡単かつ手軽にカスタムDockerイメージが使えるので、Cloud Runめっちゃ便利です。
今後活用していきたい。

おわりに

割と構成的にはガチよりになりました。
自分の技術力総動員してる感じなのでテンション上がってめっちゃ楽しい！

g4の運用を支える技術についても今後書いていきたいです。

みんなでレベル上げしましょう！

https://www.g-g-g-g.games

月末だけ失敗するspecテストと対策(テストを時刻に依存させるな運動)

2019-07-31T22:46:21+09:00

この記事で言う現在時刻というのは、例えばTime.zone.nowとか、Date.current, Date.todayのような、今日とか現在時刻、をとってくるメソッドのことです。
railsではtimezoneの扱いを大事にするため、Time.nowじゃなくてTime.zone.nowを使う、みたいなノウハウがありますが、今回の話はそれとは関係がありません。
specテストにおいて、そういう「現在時刻に関するメソッド」を安易に使うと、「特定の日だけ落ちるテスト」「特定の時間だけ落ちるテスト」になりやすいのでやめよう、という話。

例えばこんなケース

渡されたdateに対して、その月の残りの日付を配列で返す関数 remaining_days_of_month を作ります。例えば 1/28が渡されたら、[29,30,31] を返します。31日だと、残りの日付はないので [] です

コーディングテストに良さそうな題材ですね。これをどうにかして実装したとして、この関数に対するspecテストを考えましょう。

「これ、引数に渡したその日は含まれないのよね」

it 'not contains the day' do
  expect(remaining_days_of_month(Time.zone.today)).not_to include Time.zone.today.day
end

「で、その次の日から始まる、と」

it 'contains next day' do
  expect(remaining_days_of_month(Time.zone.today)).to include Date.tomorrow.day
end

いろいろつっこみどころはあるかと思いますが、話の都合で、これがコードレビューを通ったことにしましょう。テストはなにか書いてあればOKという職場、あるでしょ？

月末の悲劇

月末の夜、リリースに向けてコードを書く職場で悲鳴が上がります。
「なんかテスト落ちてるぞ！」
「Aくん、rspec落ちてるから確認して」

AくんはCircleCIで落ちた箇所を確認します。おかしいな。こんなところ触ってないのに、これ一体何なんだろう...触ったこともないところだから全然わからん...これぼく関係ないんじゃないの？だからテストって嫌いなんだ...

問題

簡単な例なので大半の方は気づいていると思いますが、問題のコードはこれです。

it 'contains next day' do
  expect(remaining_days_of_month(Time.zone.today)).to include Date.tomorrow.day
end

このコード、通常はテストが通りますが、月末最終日に限り、Time.zone.todayはその月、Date.tomorrowは翌月を指すようになるのでテストが失敗します。

この一行なら誰だってわかるけど、これ１０行くらい書いた中に埋め込まれると結構わからなくなるのです....

対策

よく言われる対策は「TimeCop / TimeHelpersを使って時間を固定する」です。

ですが、正直この程度のことにそんな大道具持ち出すのもどうなのよ、そういうことしていると、今度は開放し忘れて別の箇所で悲劇を引き起こすんじゃないの？

ぼくがすすめている対策は、「rspecで現在時刻は使わない」です。

例えば今回のテストはどう書くのが正解だったのか。

describe 'remaining_days_of_month' do
  it 'contains remaining days' do
    let(:date) { Date.new(2019, 1, 28) }
    expect(remaining_days_of_month(date)).to match_array [29, 30, 31]
  end
end

テスト日付を固定します。そうすると答えもおのずから決まるから、includeじゃなくてmatch_arrayで確認することができる。

そもそも、テストを実施する日によってテスト内容が変わる時点でおかしいですよね。specテストに書いたコードにバグがあっても、specテストをspecテストすることはできないのだから、テストは可能な限りシンプルなロジックであるべきで、Time.zone.nowみたいに値が変わるものを使うのは良くないことです。

よくある反論

よくある反論は、「現在時刻使っておけばいろんな日付が試せるから潜在バグを洗い出せるよ」です。

甘えるんじゃねえ！

その潜在バグとやらが自分の手元で見つかるのならともかく、わけのわからんタイミングで爆発して始末させられる方の身にもなってください。

境界値が不安なのであれば、自分でテストを書きましょう

  it 'contains remaining days' do
    let(:date) { Date.new(2019, 1, 28) }
    expect(remaining_days_of_month(date)).to match_array [29, 30, 31]
  end
  it 'return empty at the end of the month' do
    let(:date) { Date.new(2019, 1, 31) }
    expect(remaining_days_of_month(date)).to match_array []
  end

使っても良いケース

メソッド内に現在時刻が使われている場合、テスト側も現在時刻を使わざるを得ないケースがあります。
例えば、「今日以降の日付を配列で返す関数」のような場合です。

ただこの場合でも、こういう実装にしてあれば、現在時刻を使わなくてもテストすることができます。

# 指定された日以降の日付を配列で返す. 省略すると当日が使われる
def remaining_days_of_month(date = Time.zone.today)
:

この辺の実装の工夫について、下記が詳しいです。

「現在時刻」を外部入力とする設計と、その実装のこと

で、いろいろな事情によりそこまでやれない場合に、TimeHelpersで時間を固定した上で、Time.zone.now/Time.zone.todayを使うのは仕方ないかなあ、という感じですね。
specテストにおいて、固定しないTime.zone.now/Time.zone.todayを使ってよい場面は存在しません。

まとめ

現在時刻を使うことによって、月末だけ失敗するrspecバグを埋め込むパターンを説明しました。

いくつかのrailsプロジェクトを渡り歩いていて、このルールはあたりまえのように守られているところもあれば、どんなに説明してもご理解いただけないところもあったりして苦労しています。
この記事を示すことで誰でもわかってもらえるようになるといいなあ。

僕が今までやったRuby on Railsの勉強

2019-06-25T23:08:27+09:00

僕がプログラミングを初めて１年と９ヶ月ほど経ちました。

ほぼ独学でこれまで勉強してきましたが、途中で挫折する人も多いかと思います。

少しでも挫折する人を減らせるよう、参考になるか分かりませんが自分が今までやってきたプログラミングの勉強方法を紹介させて頂きます。

とは言っても、実は結構昔にプログラミングスクールに２週間ほど通ったことがあります。

でもそのとき「あっ、これ無理だ。」と思いすぐ挫折しました。

※決してプログラミングスクールが良くないわけではありません。質問した時は丁寧に教えてくれました。僕の理解力の問題です(笑)

そこからだいぶ期間が空いて、その２週間で学んだことの98%は忘れてしまっていましたが、どうしても作りたいサービスがあったため、プログラミングの勉強を開始しました。

まずはドットインストールでHTMLとCSSの勉強を始めました。

ドットインストール

HTMLはなんとなーくわかった気がしましたが、CSSはよくわからないまま動画を観ていました。

とりあえずHTMLとCSSの動画をそれぞれ２周した後、次はドットインストールで「Ruby入門」の動画を観てみました。

Rubyを選んだ理由は特になく、その当時たまたま出会ったプログラマーの方に「web系のサービス作りたいんだったらRubyが良いよ」と言われたのでそのまま鵜呑みにしてRubyの勉強を始めました。

ドットインストール Ruby入門

HTMLやCSSの動画もそうですが、１つの動画が全て3分以内に収められているため、全部で26個の動画がありますがサクッと一気に観れました。

ただ、後半はさっぱり分けもわからず「とりあえず観る」といった感じで進めていたのを覚えています。Ruby入門の動画も分からないなりになんとか２周しました。

ドットインストールでHTML、CSS、Rubyをそれぞれ学んだ後はProgateでHTML、CSS、Rubyをそれぞれ１周しました。

Progate(プロゲート)

Progateは前に自分が書いたコードも使いながら次に進んでいくため、ローププレイングゲームをやっているみたいで面白かったです。

ただ、どのコースも後半につれて訳分かんなくなってました(笑)

次にRuby on Railsというフレームワークを使うとwebサービスが作れるとネットにいっぱい書いてあったので、Railsの勉強を始めました。

まずはプログラミング初心者御用達のドットインストールで「Ruby on Rails5入門」の動画を2周しました。

Railsに関しては始めから何が何だかちんぷんかんぷんでした。

ドットインストール Ruby on Rails5入門

最近になってようやく慣れましたが、ドットインストールの動画って３分に収めているからかめっちゃ早くないですか？

最初の頃はその早さについていけず、何度も動画を戻して繰り返し観てました。

その後にまたまたプログラミング初心者御用達のProgateにてRuby on Rails5コースに取り掛かりましたが、後半は難しすぎてやめました(笑)

その頃に初めてプログラミングに関する本である「Ruby on Rails4 アプリケーションプログラミング」を買いました。

Ruby on Rails4アプリケーションプログラミング
※今は最新版の「Ruby on Rails5 アプリケーションプログラミング」も発売されています。

後にこの本は僕にとってかなり神的な本になったのですが、その頃の僕にとっては訳が分からず、すぐ読むのをやめてしまいました。

その後、Railsを学ぶなら「Railsチュートリアル」が良いとネットに書いてあったので、Railsチュートリアルを始めました。

Ruby on Rails チュートリアル：実例を使って Rails を学ぼう

ただ、本での勉強は理解しにくいと感じていたので（今は本での勉強めっちゃ大事だと感じてます！）、Railsチュートリアルの動画が販売されていたので、その動画を購入して勉強しました。

解説動画お試しプラン - Railsチュートリアル

動画の価格が29,800円(税別)なので、決して安くはなかったですが、結果的にこの動画は僕にとって神動画になりました！

この動画を観てやっとRubyとRailsの違いをようやく少しだけですが理解できました。(それまでRubyとRailsがそれぞれ何なのかすらよくわかってなかった...)

ただ、ProgateのRailsコースを途中で挫折する僕です。

神的な解説のおかげで前半部分はなんとなく理解できましたが、当然後半は訳わからず、「コードをコピペして分からんけど動いた」みたいなことをしてました。テストはもちろん書いてません！(笑)

Railsチュートリアルを訳分からないなりになんとか２周した後に、当時UdemyにRailsを使ってAirbnbみたいなサービスを作ってみる動画があり、評判がよかったためそれを見て勉強しました。

結果的にその動画は今までRailsを勉強してきた中で一番役に立った神動画でした！

Progateやドットインストールで勉強した後、「一からどのようにサービスを作ったら良いか分からない問題」に必ずプログラミング初心者にはぶち当たると思うのですが、

その動画はrails newから実際の現場でどのようにサービスを作っていくか丁寧に説明してくれていました。

現在ではUdemyから削除されているのですが、今になってもまたもう一回観てみたいと思う動画です。

ただ、神動画でも僕の理解力の低さには勝てません(笑)

動画の後半はかなり難しい内容になってきて、最後の方はお得意の「コピペしてなんか分からんけど動いた」みたいなことばかりやってました。

それで何とかその動画も全て見終わった後、出版のサービス(サービス名はnospriといいます)を作ってみたいと考えていたので、そのサービスの制作に取り掛かりました。

無料で紙の本を出版できるサービス

途中100回くらい挫折しそうになりましたが、どうしてもサービスを作りたかったので気合いで何とか分からないなりに４ヶ月くらいかけて作りました。

この出版サービスを作っている時に、Javascriptも勉強しないとまずいと思い、サービスを制作しながらとりあえずjQueryの勉強もしてました。

ちなみに、サービスの中でHerokuのH12 Error( 30 second timeout )を回避する為に、Ajaxを使って大容量データファイルをAmazon S3に直接送信する機能があるのですが、そこが僕にとって特に難しく泣きそうになったのは良い思い出です。。。

出版サービスを完成させた後、改めて前に購入していた「Ruby on Rails4 アプリケーションプログラミング」を読んでみたのですが、知識の点と点が繋がるとはまさにその時のことで、Railsについての理解度が今まで2%くらいだったのがやっと5%くらいまで上がったと思います(笑)。

そこから本での勉強も大事だと言うことに気づき、RubyとRails、jQueryに関する様々な本を書いました。

それぞれ僕にとって一番よかった本は以下の通りです。

RubyはRuby界隈で有名な伊藤淳一さんが書いた「プロを目指す人のためのRuby入門言語仕様からテスト駆動開発・デバッグ技法まで」

プロを目指す人のためのRuby入門言語仕様からテスト駆動開発・デバッグ技法まで (Software Design plusシリーズ)

Railsはすでに紹介済みの「Ruby on Rails4 アプリケーションプログラミング」の最新版にあたる「Ruby on Rails5 アプリケーションプログラミング」

Ruby on Rails5 アプリケーションプログラミング

jQueryは「Web制作の現場で使うjQueryデザイン入門[改訂新版] 」

Web制作の現場で使うjQueryデザイン入門[改訂新版]

今ではjQueryは古く、ReactやVue.js等のモダンなフレームワークを使うケースが多いため、今から必ずしもjQueryを学ぶ必要はないんじゃないかと思います。(じゃあ、RubyよりもPythonやGo勉強した方が良いんじゃないの？とかは言わないで...)

RubyやRails、jQuery等の本を10冊くらい読んで勉強した後に、webのメディアサイトを作ってみたくなり、僕は京都が大好きなので、京都の鴨川に関する記事を誰でも投稿することができるwebメディアサイト（サービス名は「鴨川へ行こう」）を１ヶ月くらいで作りました。

鴨川へ行こう | 京都鴨川のあらゆる情報を発信するサイト

２つ目のサービスを作ってやっとここでRuby on Railsへの理解度が7%くらいまで上がりました！

ここから絵本を投稿できるサービスを作ったり、感謝の気持ちをポイントに変えて自由に送り合うことができるサービスを作ったり、小さいのも合わせると全部で５個くらいサービスを作りましたが、公開までに至りませんでした。

原因は１つです。

デザインセンスがないからです。服はほぼユニクロで買う僕にデザインのセンスなんてあるわけありません。ってかCSS書くのがめんどいです。。。

ただ、今となっては最低限CSS書いて、いくつかのサービスは「公開しとけばよかった」と思っています。なので今後ちょこちょこデザイン整えて、公開できるまでもっていきたいです。

一方、サービスの公開まではいきませんでしたが、そこでポイント機能やフォロー・フォロワー機能、stripeを使った決済機能など、いろんなサービスで応用できそうなスキルを何となく学ぶことはできたのでまあ良い面もありました。。。

今年に入ってから僕が今までで一番時間をかけて初心者向けのクラウドソーシングサービスを作りました。(サービス名はnovice、日本語で「初心者」という意味です。)

novice | 失敗しても大丈夫! 初心者・未経験者のためのクラウドソーシングサービス

何とかリリースまでもっていきましたが、今まで発信等を全然していなかった為、全然ユーザーが増えません。よかったらTwitterフォローしてください(笑)

@leavescomic1

発信力が弱小な人にとってやっぱりto C向けのサービスは難しいですね。。。

今後は情報を発信しつつ、UXの面でも超絶使いにくいところが山ほどあるので、そこらへんを徐々に直していこうと思います。

あと、プログラミングを勉強してサービスを作るのもいいけど、作ったサービスを広めることにも注力した方が良いと今はひしひしと思います。僕はサービスを作っただけで満足していたから今かなり痛い目にあってる。（前から痛い目に遭ってばっかりだけど。）

まあ、今までめちゃくちゃ小規模でくだらないサービスも含めて全部で８個くらいサービスを作ってきましたが、ようやくRailsのことを9%くらい理解できるようになりました。

何とか今年中に10%くらい理解できるよう頑張りたいです(笑)

また、Swiftを勉強してiOSアプリリリースして、友達に自慢したいです。プログラミングやってない人から見たら、クソみたいなアプリでも自分のアプリがAppleストアに載ってるだけですごいと思ってくれるじゃないですか！？

色々書きましたがとにかくまとめると、プログラミングの勉強で一番大事なのは「情熱」だと思います。（なんじゃそりゃ。。。）

もっとがんばります。はい。。。

JobLvマネージャーをリリースした話

2019-04-21T22:51:18+09:00

作ったサイトの紹介

今回作ったサイトは、こちら。
　「JobLvマネージャー」です。

自分のJob（職業）を管理、LvUpをしながら、
Twitterと連携（現時点では、名前変更）することが出来ます。

作ろうと思ったキッカケ

Twitterで繋がったユーザーさんが、名前の後ろに「〇〇Lv1」みたいなのをつけているのを見て思いつきました。
いつの間にか、こっそりLvアップしていたり、新しいものに変わっていたり。
そういう遊び心に興味が湧いて、この仕組みをもっと簡単に、管理や変更ができるようにしたサービスを作ってみたいと思ったのが始まりです。

ストックすることの大切さと、一歩踏み出す大切さ

これをタイトルした理由は、本システム、３日（時間だと８時間）で作りました。
内容からして、これが早いのかわかりませんが、これだけの時間でサービスリリースまでいけたのは、

Railsのおかげ
素材サイト様のおかげ
API(Twitter)のおかげ
今まで色々プロダクトを作ったおかげ（機能のより集め（コピペ））

Railsを使うと、簡単のWebシステムが作れます。
いろんなGemが用意されています。
規約にそえば、簡単に作れます。

素材サイト様、画像にアイコンにフォントまで、いろんなものが無料で使えます。
いつもありがとうございます！

API使えば、別のシステムの機能を自分のもののように使えます。どんどん使いましょう！

新しいもの、面白そうなものがあったら、とりあえず触ってみましょう！
形にならなくても問題ありません。いつか使える時が来ます。ストックしておきましょう。
最新の技術だからと追いかけて、サービスリリースする必要も無いと思います。
触ってみてストックする事が大事。

誰でも新卒年収800万宣言できる、Twitter就活サービス「Negomo（ネゴモ）」をリリースした。【個人開発】

2019-04-09T22:21:31+09:00

「Twitter就活の促進」をテーマにしたサービス「Negomo（ネゴモ）」をリリースしました！

自分が欲しい報酬額をツイートしてTwitter就活できるサービス「Negomo(ネゴモ)」を作ってみました！下のような画像がツイートできます。Twitterアカウントで利用できるのでぜひ使ってみてください！https://t.co/JRXFe8lHov #Negomo #RT拡散お願いします
— TaKO8Ki (@takoyaki3160) April 7, 2019

Twitterアカウントで利用できるので、もしよかったら使ってみてください！

リリースしたサービス

Negomo（ネゴモ） - もっとTwitter就活しよう！

サービスの概要

「Negomo（リンク）」は、自分が欲しい報酬額をツイートしてTwitter就活できるサービスです。

何か技術を身につけている人が、Twitterで欲しい報酬額（時給・年収）を積極的にアピールすることで、適切な報酬をもらえることを理想としています！
もちろん、エンジニア以外の方も大歓迎です！

こんな感じのツイートができます。

京都でWEB系のインターン探してます！！ https://t.co/JRXFe8lHov #Negomo #Twitter就活
— TaKO8Ki (@takoyaki3160) April 7, 2019

参考：Negomo（ネゴモ）とは

追記

単位で「兆」を選ぶことができるようになりました！
時給・月収・年収によって画像の色を変えたほうが見やすいというアドバイスをいただいたので、そのように仕様を変更しました！
既に画像を作成されている場合は、金額を変えて編集していただくと色が変わります。

デザイン

デザインはSpeakerDeckを参考にしました！

トップページ

画像作成ページ

アピールポイントのフォームの高さは可変的になっていて、コンパクトになるように心がけました。また、ポートフォリオなどのURLが入力された場合は、自動的にリンクに変換されるようになっています。

画像表示ページ

作成した画像をクリックすることでツイートできるようになっています。
アピールポイントの欄では、どれがリンクでどれが普通の文字列なのか分かりやすくするようにしました。

使用した技術

Ruby・Ruby on Rails
- IMGKit（HTMLから画像をレンダリングできるgem）
- google-analytics-rails（google analyticsが簡単に導入できるgem）
- activestorage-cloudinary-service（Active StorageとCloudinaryを繋げるgem）
JavaScript・jQuery
Cloudinary
画像を保存するストレージです。Herokuのアドオンとして利用できるので非常やりやすかったです。Active Storageと連携させて利用しています。
Git・GitHub
Postgresql
Heroku
今の所Hobbyプランを利用しています。
build pack
画像を作る部分の実装で利用しました。
アイコン
アイコンは、相変わらずフリー画像にお世話になってます。

苦労した点

今回苦労したのは、画像生成の部分です。
コードとしては下のような感じで、 HTMLから画像をレンダリングするwkhtmltoimageをRailsで利用できるようになるgem、IMGKitを利用しています。
ローカルでは比較的簡単に動かすことができましたが、Heroku上で動かすのに少し時間がかかりました。
最終的に、build packを使うのが一番良さそうだと分かったので、元からあったbuild packのレポジトリをforkして少し自分用にカスタマイズして使いました。

wkhtmltoimageをHerokuで使うためのbuild packカスタマイズ版

画像作成部分のコード

```ruby def create_image Tempfile.create(["#{@profile.id}", '.png'], :encoding => 'ascii-8bit') do | file | file.write(IMGKit.new(get_html, quality: 20, width: 800).to_png) file.rewind @profile.image.attach(io: file, filename: "q_#{@profile.id}.png", content_type: "image/png") end end def get_html <<~HTML

#{@profile.adjust_money_style}
#{@profile.title}

#{}

#{assets_image_tag('negomo.png').html_safe}

HTML end ```

リリースする上で心がけたこと

アイデアを形にするスピード

少しずつWEBサービスを作ることにも慣れてきたので、自分が思いついたアイデアを形にするスピードを意識するようにしました。それでも、このサービスを作るのに１週間ほど費やしてしまったので、まだまだだなと感じます。

ユーザーにとって分かりやすいサービスかどうか

今までも「ユーザーにとって分かりやすいサービス作り」を意識するようにはしてきましたが、イマイチ分かりやすさを追求できていないように感じていました。特に、非エンジニアの人に使ってもらうとなると非常に難しいと感じます。
そのため、今回は、大まかに言えば「画像をツイートできるだけのサービス」というシンプルな設計にしました。

最後に

タイトルに「誰でも新卒年収800万宣言できる」と書きましたが、最近、コミさんという技術的に強い方が新卒年収800万円芸なるものを行なって、話題になっているのを1フォロワーとして眺めていました。エンジニアだけでなく、他の分野にもコミさんのように優れた人材はたくさん居られると思うので、その方達がTwitterなどを利用して、しっかりといい待遇を受けられるようになればいいなと思います。
僕もその方達に加われるように頑張っていきます!
また、このサービスをきっかけに、もっとTwitter就活が当たり前になれば嬉しいです。

ここまで読んでいただきありがとうございました！

もしよろしければ、いいねボタンを押していただけたら嬉しいです！

Negomo、ぜひ使ってみてください！！

Negomo（ネゴモ） - もっとTwitter就活しよう！

参考

SP☆12参考表(地力表)支援サイトを支える技術

2018-12-03T23:42:44+09:00

SP☆12参考表(地力表)支援サイトを支える技術

この記事はcrieitでの個人開発サービスに用いられている技術 Advent Calendar 2018 の9日目の記事です。
昨日はckoshienさんの野球リーグスコア管理システムに用いている技術についてという記事でした。
明日はiotas𓆡創作支援アプリ運営中𓅬さんの記事です！

SP☆12参考表(地力表)支援サイトとは

ゲームセンター等でプレイできるbeatmania IIDXというゲームの成長支援サイトです。
2014年11月に開発を開始し、運用を始めて4年ほど経過しました。
現時点で登録者数は9200人ほどで、GAのマンスリーアクティブユーザは11k人ほどです。

beatmania IIDXは音ゲーと呼ばれるジャンルのゲームで、楽曲に難易度が設定されています。
楽曲の難易度はおおまかに言うと☆1から☆12までに分類されます。

この分類はシングルプレイ(SP)、ダブルプレイ(DP)といったモードごとに存在しているのですが、本サイトではその中でもSPの☆12についてだけ取り扱ってます。

なお、このサイトはGitHub上でpublic repositoryとして公開しています。
参考になったらスターをいただけるとモチベーションになります。

なぜSP☆12だけなのか

ここではゲーム性の説明を行います。
技術的な話を知りたい方はスキップしてもらって構いません。

SP☆12は現時点で(未解禁のものも含めると)300曲を超えています。
そして他の難易度帯と比較すると☆12は易しい曲と難しい曲の難易度差が最も激しくなっています。
☆12に挑戦し始めの人は噂程度に「この曲は☆12の中でも難しいと言われている気がする…」という選曲判断が必要になってきます。
公式にも指標に近いものがあるのですが、割とあてにならないという背景もあります。
※ 人によって得意不得意分野があるため参考表も万人に当てになるわけではないです

また、☆12の攻略には長い時間が必要になります。
自身の例ですと、1つのゴールであろう皆伝という最上位段位の取得に☆12触り始めから1年以上の時間が必要でした。
皆伝という段位は☆12の中でも上位の難しさに位置している楽曲で構成されるコースのため、簡単な☆12からスタートし、段階を踏んで難しい☆12もクリアできるようになる必要があります。

私の元々の開発モチベーションとしては、このステップをモチベを維持しつつ「続けていける」ようにすることでした。
そのため自分がプレイしているSPであり、皆伝を取得するのに避けられない☆12を対象としたサイトを作り始めました。

スタート地点としてはPHPで簡易的な☆12参考表サイトを作成していました。
このサイトは知人等にインターナルに利用してもらっていたのですが、需要がありそうということで公開を前提に作り直し始めたのが2014年11月です。

採用している技術たち

ざっくりと書くと、

サーバ
- [email protected]
- Sidekiq
- [email protected]
フロント
- [email protected]
- React/Redux
- ImmutableJS
インフラ
- さくらVPS(2コア、4GB、SSD 50GB)
- (ローカル環境のみ)k8s対応
- nginx
- god
- mackerel
- BigQuery(アクセスログ解析)

といった形になっています。
AWS/GCP等も検討したことはあるのですが、VPSと比較すると月額コストが跳ね上がるため見送っています。

技術的な解説

はじめてRailsを使って作成したアプリだったことによるイマイチコードがいたるところに点在しています。
合間を見て少しずつ改善はしているものの既にユーザが利用していると変更しにくい部分があり、手がつけにくいところもあります。
特にRailsのroutes.rbの記法の修正は既にブックマークをしているユーザへの影響を考えると変更しにくいです。

一度ルーティングの変更をリダイレクトサポートをしながら変更したことがあったのですが、1年半ほどそのページを開くとリダイレクトしつつnoticeでブックマークの変更を促していたにも関わらず、いざサポートを切るとdead linkを参照してしまう方は想像より多かったのを記憶しています。

技術的な要素でいうと、「いたって普通なRailsアプリ」をメインポリシーとして作成しています。
特殊なことをいろいろと行うと、その分メンテナンスコストも上がるため極力Rails Wayに乗っておこうという精神です。
メインで開発し続けているサービスなら多少の獣道も選択としてはありですが、社会人が片手間に行う分には大衆に乗っかるほうが楽でした。

最近まではフロントエンドとの連携に自作のgem使ったりしながら特殊なことをしていたのですが、
そのあたりはwebpackerに乗り換え、スタンダードRailsへの変身しました。
(この変身コストはとても大きかったです。。)

webpacker 4.0.0.pre.3

webpackerのstable releaseとしては3系ですが、このプロジェクトでは4系を利用しています。
理由としては最新のts-loaderを使いたかったためです。

ts-loaderの最新を利用するためにはwebpack4系である必要があるのですが、stable releaseのwebpackerではwebpack3系までしか対応していなかったためです。

webpackerを採用した理由としては「現在はRailsの中でそれが主流」という理由以上のことはありません。
疎なwebpackインテグレーションを自作しても良かったのですが、メンテナンスを続けるモチベが持てなさそうなので敬遠しました。
実際使ってみると細かいところで不満はあるものの、トータル的には体感は悪くないという印象を受けました。

webpackerでは下記のように少しだけ設定を変えています。

process.env.NODE_ENV = process.env.NODE_ENV || 'production'

const environment = require('./environment')

module.exports = environment.toWebpackConfig()
module.exports.devtool = 'source-map'

といった設定にしてproductionでは devtoolの nosources-nource-map を source-map に置き換えていることです。
source-map自体を切る修正を入れる人が多そうな印象ですが、自分の環境ではあえて設定しています。
理由はsentryでのエラートラッキングが快適になるためです。

このような形でエラー部分の元ソースコードを表示することができます。
また raven-for-redux というnpmを利用することでそのときのactionやstateの状態までわかります。

そのエラーになるまでのactionの履歴

そのエラーが出たときのクライアント側のstate

OSSなので特にこのサービスに関しては隠蔽する必要はないのですが、mapファイルはsentryサーバ以外からアクセスできないようにしています。
自前でsentryを立てているので特定IPからのアクセスは弾くようになっています。

location ^~ /packs/ {
  gzip_static on;

  set $response_file 1;
  if ($request_uri ~ 'map$') {
    set $response_file 0;
  }
  if ($remote_addr = 'xxx.xx.xxx.xxx') {
    set $response_file 1;
  }
  if ($response_file = '0') {
    return 403;
  }
}

typescriptに置き換えてからまだ一度もエラーが出ていなかったため、この画面は意図的にエラーを仕込んで発生させました…ｗ

今のところ、webpacker4系に対する不具合は踏んでおらず問題なく運用できています。

react-rails

Reactとのつなぎ込みにはreact-railsというgemを利用しています。
react_on_railsというgemのほうが多機能なのですが、相容れないところがありreact-railsを採用することにしました。

react_on_railsのほうが優れている点としてはrailsContextというオブジェクトが付与されており、
この中にtimezone/localeなどを始めとした開発者がほしいであろうメタ情報が入っています。
またRailsにxhrリクエストをする際にcsrf-tokenをheaderにセットするAPIも用意されています。

ただcomponentをrenderするためのhookに turbolinks:render を利用しており、このhookではページがチャタるケースがあったため、採用しませんでした。

react-railsはreact_on_railsと比べると非常にシンプルで、コンポーネントをrenderする以上のサポートはあまりないようです。
ただそれを行ってくれるだけで自分の要件的には十分だったため、採用しています。
react-railsではcomponentをrenderするhookに turbolinks:load を採用しています。

チャタるとは何かをもう少しわかりやすく言うと、一瞬古いページが表示された後に新しいページが表示される現象のことを指しています。

コンテンツが一瞬表示される->白くなる->再度表示されるというループになっていることがわかると思います。
一瞬表示された後と再度表示された後でAPIリクエストが2回走ってしまうという問題やUXの観点から許容できない、という判断になりました。

上記はturbolinks的には「仕様」の挙動です。
GitHub - turbolinks/turbolinks: Turbolinks makes navigating your web application faster から抜粋すると以下のように書かれています。

turbolinks:renderfires after Turbolinks renders the page. This event fires twice during an application visit to a cached location: once after rendering the cached version, and again after rendering the fresh version.

react_on_railsのgem自体にはissueを投げてみたのですが、少し私の想像を超えた範疇の問題があるらしく、今回はreact-railsを採用することにしました。

ts-routes

Railsとフロントの繋ぎ込みには GitHub - bitjourney/ts_routes-rails: Exports Rails URL helpers to TypeScript, inspired by js-routes というgemを利用させていただきました。
似たようなgemにjs-routesと呼ばれるものがあり、そちらを採用していたのですがts化にあたって載せ替えを行っています。
パラメタ不足などの不正なルーティングに関して検知しやすくなるため、tsとrailsを組み合わせるならお薦めです。

Sidekiq

兄弟サイトのIST(Iidx Score Table)からのデータ取り込みを始めとした外部サービスの連携や定期処理(sidekiq-cron)などに利用しています。

先述した通り☆12の譜面はかなり数が多く、1年を通して「解禁」され数が増え続けていきます。
これらを全て人手によって捕捉し続けるのはコストが高い、と感じ1日に1回IST側のデータを利用して新規の☆12が解禁されたら自動追加するようにしています。
ただ☆12の中での難易度自体は議論によって決められるもののため、難易度が決定した後の反映処理は人手で行っています。

当サイトはVPS1台で運用しているので、バックアップ等の日次処理も必要になってきます。
これらの処理もSidekiq側に任せています。
abilitysheet/service_dumper.rb at master · 8398a7/abilitysheet · GitHub というlibを作り、

DBのdump(pg_dump)
carrierwaveで保存された画像等の収集

を行った後にtar.gzに固めてS3に送る処理です。
これらの処理をjobにして朝の5時過ぎに行うようにしています。
また、手元でproduction環境の再現を行いたいときにもS3からデータを取ってきています。

運用しているいくつかのサービスは全てこのような形でバックアップを取っており、いつVPSが死んでしまってもすぐにサービスを復旧できるようにしています。

CI

CircleCIを使ってテストを行っています。
テストフレームワークはrspecでjs部分のテストはjest等では書いていません。
代わりにsystem specとしてchromedriverを利用したE2Eで担保しています。
昔に書いたコードなので、コントローラ系のspecも多いですがこのあたりも粛清したいところです…ｗ

system specではjsを使うところ使わないところで以下のように条件分岐を書いています。
systemであっても js: true でないところは rack_test で行うようにしているところと、NO_HEADLESS という環境変数を定義して実行するとchromeが実際に立ち上がるようにしています。

  config.before(:each, type: :system) do |example|
    if example.metadata[:js]
      if example.metadata[:iphone6]
        display_size = [375, 667]
        args = %w[--headless --disable-gpu --user-agent=iPhone]
      else
        display_size = [1920, 1080]
        args = %w[--headless --disable-gpu]
      end
      args.shift if ENV['NO_HEADLESS']
      caps = Selenium::WebDriver::Remote::Capabilities.chrome(chromeOptions: { args: args })
      driven_by :selenium, screen_size: display_size, options: { desired_capabilities: caps }
    else
      driven_by :rack_test
    end
  end

実行する際には NO_HEADLESS=true bundle exec rspec spec/systems といったコマンドで実行します。
spec内に binding.pry を仕込むことでElementも触れるのでspecがうまくいかないときの不具合調査などに利用しています。

運用サポート

死活監視にはmackerelとgodを利用しています。
Mackerel（マカレル）: 新世代のサーバ管理・監視サービスはSaaS型のサービスでプロセスが死んでいるか生きているかの監視もできます。

死活監視の肝としては God - A Process Monitoring Framework in Ruby を採用しています。
sidekiq/puma/redis/postgresql/nginxなどのサービス継続に必要なプロセスは全てgodに監視させています。
再起動時などにもgodに任せて起動させているため、再起動するとサービスが落ちたままになっているということもないです。

特にsidekiqは知らない間にメモリの使いすぎでプロセスが落ちていることもあったため、godに監視させて死んでいたら起こすようにするのは精神的安定感が増し増しでした。
デプロイには capistrano を採用していますが、こいつはsidekiqのgod監視とやや相性が悪いです。
pumaと違ってgraceful restart時にプロセスがいない瞬間ができてしまうため、
capistranoがsidekiqを起こすのとgodがsidekiqを起こすのが衝突してしまい、二重でsidekiqが起動してしまうケースが有るためです。
capistranoと併用する場合は素直にcapではsidekiq:stopだけして起こすのはgodに任せたほうが良いという感覚を持っています。
abilitysheet/deploy.rb at master · 8398a7/abilitysheet · GitHub

k8s

k8sもローカル環境での動作自体はサポートしています。
VPSを2台所持しているため、2台でなんとか運用できないか検討していたのですが、結局2台では割と厳しいということと、
capistranoに代わるデプロイツールを自作し、メンテし続けるコストを払える自信がなかったため見送りました。

一通りproductionとしてローカル環境で動作させるところまでは確認しているのでrailsでのk8sに参考にしたい方はどうぞ。
abilitysheet/kubernetes at master · 8398a7/abilitysheet · GitHub
ただ運用もしていないコードなので穴はたくさんあると思います…

BigQuery

nginxのアクセスログをfluentd経由でBigQueryに投げるようにしています。
SSDで容量が厳しく、割と細かめにログを削除しているため後でまとめて見るためにBigQueryを利用しています。

元々はS3に置いてAthenaで集計していたのですが、BigQueryのほうがいろいろと捗りそうなので移管しました。
GitHub - kaizenplatform/fluent-plugin-bigquery というプラグインを利用させていただき、bqにログを送っています。

主にARのconnection poolがタイムアウトになっていたり、急激な負荷によるアラートの調査などに使っていたりします。
railsユーザであればnginxのltsvログに 'request_id:$sent_http_x_request_id\t' を追加しておくことで、調査が捗ることがあるためおすすめします。
nginxのログから問題のrequest_idがわかればproduction.logをrequest_idでgrepすることで該当行のログに辿り着きやすくなります。

おまけ IE対応

最近webpackerベースのreactにリプレースを行っていたのですが、その際に困った問題と解決した手法についても記載しておきます。

tsconfig.json ではtargetをes5としていましたが、babel-polyfillを仕込み忘れていたことが1点目です。
記法自体はes5まで落としてくれるのですが、polyfillがないと Promise などがIEにはないため正常に動作しません。
polyfillの入れ方に関しては、headerに https://cdn.polyfill.io/v2/polyfill.min.js を追加するのがおすすめです。
ブラウザのUAを見て必要なpolyfillを行ってくれます。
試しにIEで見ると結構な量をpolyfillしてくれますが、最新版のchromeではほぼ空であることが確認できると思います。
自分でbundleすると配布するjsファイルが巨大化するため、cdn経由で入れることにしました。

2点目はes5にトランスパイルされていないライブラリを利用してしまっていることでした。
query-stringというライブラリでquery-string/index.js at master · sindresorhus/query-string · GitHubの行でアローファンクションを使っているのですが、これがIEだと解釈できないという問題です。
webpackerのbabel-loaderはexcludeで node_modules が指定されているため、使っているライブラリまではes5にトランスパイルされません。
よくよくドキュメントを見るとレガシーブラウザは5系を使え(最新は6系)ということが記載されていたので、5系を利用することで解決しました。

当初は上記2点の問題がわからぬまま、IEでは見れないといった声が上がっていたため、最初の対応としてはelectronでサイトをラップしたexeを配布していました。
それにはGitHub - jiahaog/nativefier: Make any web page a desktop applicationというライブラリを利用したのですが、幅広くの場面で役に立つので困ったら利用してみてください。

まとめ

今回はSP☆12参考表(地力表)支援サイトを支える技術をご紹介しました。
他にもいくつかサービスがありご紹介したい技術もあったのですが、割と長くなってしまったので今回はこのような形で締めたいと思います。

サービスを運用している方の参考になれば幸いです。

GitHub - 8398a7/abilitysheet: This app is ability sheet for beatmania iidx music of level 12.

P.S. 作者は2018年5月に念願の冥ハードを成し遂げ、ゆるふわ離脱モードに突入しました。

「日本最大のIT系フリーランス案件/求人検索サービス」として「OKWorks」をリリース

2018-10-24T18:26:18+09:00

さて、早速ですが、一週間ほど前に「日本最大のIT系フリーランス案件/求人検索サービス」として
「OKWorks」をリリースしました。今回は、そちらのお知らせと、技術情報として、ソースコードを公開しておりますので、ご笑覧いただけるとうれしいです。

リリースしたサービス

日本最大のIT系フリーランス案件/求人検索サービス「OKWorks」
https://www.okworks.me/

なにができるのか

IT系のフリーランス案件をサイト横断的に探すことができます。独自に案件を獲得するのではなく、インターネットから情報を収集し、集約しデータを提供することで、日本最大級の情報量を誇るフリーランス案件サービスです。

なぜ作ったのか？

開発者は、フリーランスのエンジニアとして働いています。企業様から直接ご相談をうけたり、つながりのある受託企業からの案件をプロジェクト的に受けております。一部、WEBメディアも運営し、そちらからの収益もあります。

そんな中で、エンジニアとしてのフリーランス案件が流れてくるメールマガジンをいくつか購読しています。そこから、案件をうけるということはないのですが、自分のスキルの相場観を把握する手段として活用しています。こんな好条件の案件が出てくるなら、まだ大丈夫だな・・・ということです。

さて、日々の楽しみである、案件チェックですが、フリーランス案件を提供する会社が続々と登場しているなとは、肌感で感じていました。Prosheetさん、Midworksさん、ITプロパートナーズさんなど・・・大小含めれば、いまでは数十社はこの事業をやっているのではないでしょうか。

さて、そうなってくると、アグリゲーションの出番です。各社のサイトを集約し、より便利で大規模なフリーランス案件の検索サービスを作りたいと思いました。

どうやって作ったのか

フリーランスエンジニア2人のチームで、約3週間で開発をしました。なるべく早くリリースすることを目標に、下記の構成で開発しています。今回は、技術的な新規性を全く考慮していません。それよりも、「フリーランス案件が市場で伸びている、それを集約することは面白くない？」というアイデアを実現することを優先しました。

言語　Ruby
フレームワーク　Rails
デザインフレームワーク　Bootstrap
サーバー　Heroku
DB　MySQL

うーん、仕事で使っているのもありますが、RailsとHerokuの組み合わせで開発するのは、本当に早いな・・・と改めて感じました。プッシュしたらデプロイされるというのは、まるで魔法ですね・・・ｗ

苦労したこと

仕事でやっているから、ということもあり、あんまりなかったですね。イッシューを淡々と潰し、リリースまでこぎつけました。

作ってみての感想

サイトが広く一般的に使われるには、まだまだなのですが、作った本人がドックフーディング的に毎日チェックしてしまうサービスになっており、その点で作ってよかったなと思っています。

こんな良い案件あんのｗ　こんな糞案件誰がやるのｗｗｗ

みたいな発見があります。とても楽しいです。

今後については

まず長期的に、IT系のフリーランスの仕事の流動性向上に貢献したいという思いがあります。ラップトップがあれば働ける反面、案件を獲得するためには、営業や調整、交渉などめんどうなことがたくさんあります。一方、企業では人材不足が加速しています。このギャップを埋めることができれば、IT系人材はもっと働ける、もっと稼げる、もっと社会に貢献できると思いますし、企業では新しいプロジェクトをもっともっと推進していくことができるでしょう。

OKWorksのソースコード公開について

下記内容で、ソースコードを公開させていただきます。

【公開内容】
Rails 5.2.1を用いて書かれたアプリケーション。DBはMySQLを利用。

【公開URL】
https://github.com/okworks-dev/okworks_public

【利用方法】
GitHub上で読んでいただくか、forkなどをして触っていただけれればと思います。該当ディレクトリに移動した後に、下記コマンドを叩いていただければ初期設定が完了いたします。

bundle install && rake db:create && rake db:migrate && rake db:seed

【注意事項】
・著作権を放棄したり、OSSとして開発を行っていくというわけではありません。あくまでも、学習用コンテンツとしてご利用ください。
・本ソースコードの全部または一部を利用して、同種のサービスを公開することは禁止させていただきます。
・公開に当たりAPI KEYなど、秘匿情報は削除しております。
・また、秘匿情報の漏れなどを防ぐために、アップデートを行うつもりはありません。10/22時点のソースコードとなります。

いろいろややこしく恐縮ですが、ぜひお楽しみいただければと思います。

質問などについては、公式ツイッターアカウントにて受け付けています！できる限り返信させていただきます。

読みどころ

試行錯誤しながら作っているので、ぐちゃぐちゃなところもありますが、下記の点は「へー」といっていただけるかと思います。

・クローラー
app/controllers/concerns　以下に求人サイトから情報を取得するクローラーをおいてあります。

crawler.rb　- 各サイトごとのクローラーを管理するクラス
site_crawlers以下 - 各サイト別のクローラー

各サイトごとに、スクレイピング方法が異なるので、そこに対応するのが一番時間がかかりました。

・コントローラー

コントローラーが肥大化しないように、できる限りモデルにロジックを隠蔽する、helperにメソッドを切り出しています。比較的、コントローラーがスッキリ書けているのでは？と思っています。

・hamlの利用とpartialの多用

hamlを使うことでコード量を劇的に減らすことができますし、構造が見やすくなります。slimを使わない理由は、slimは、簡素化しすぎていて、個人的には逆に読みづらいからです。

また、複数人で開発していることもあるので、コンポーネントをできる限りpartialに切り出すことで、再利用しやすく、デバッグも容易になりました。

といったところは、読んでいただいて面白いかと思います。また、開発環境で、動かして触っていただくのも面白いかと思います！

みなさんぜひ使ってみてください、シェアしてください！

OKWorks（オーケーワークス）をよろしくおねがいします😋
https://www.okworks.me/

「Rails」の記事 - Crieit

「引用」をいい感じに展開してくれるサービス「inyoo.jp」をリリースしました

📝 Rails で config/database.yml よりも ENV['DATABASE_URL'] の設定が優先される話

遅延ロードさせてWebアプリを高速化する

制限の少ない自由なSNS ～Ammot～

プログラムコードを販売できるサービスまとめ

zsh上で、Rails serverの外部からのIPv6接続を許可したい場合の、オプションの書き方

Railsでモーダルの出し分けを管理する

作業日誌アプリ「Workdiary」説明書

Rails6 ビューファイルにRubyのコード書く時の<% %>と<%= %>の違い

【Rails】Bootstrapを導入したらAjaxが機能しなくなっていたお話

React PWA + Rails GraphQLで作ったポモドーロRPGに使った技術やその選定理由を書いてみた

[fly.io]

[Apollo Client (react-apollo)]

[graphql-ruby & Ruby on Rails]

月末だけ失敗するspecテストと対策(テストを時刻に依存させるな運動)

僕が今までやったRuby on Railsの勉強

JobLvマネージャーをリリースした話

誰でも新卒年収800万宣言できる、Twitter就活サービス「Negomo（ネゴモ）」をリリースした。【個人開発】

SP☆12参考表(地力表)支援サイト を支える技術

「日本最大のIT系フリーランス案件/求人検索サービス」として「OKWorks」をリリース

制限の少ない自由なSNS　～Ammot～

SP☆12参考表(地力表)支援サイトを支える技術