Madogiwa Blog

主に技術系の学習メモに使っていきます。

【Ruby on Rails】Rails GuidesにPRを出して、Railsのコントリビューターになったよって話

はじめに

みなさん、こんにちは、まどぎわです(・∀・)
この前Railsのコントリビューターになりました!🎉

実際にマージされたのが下記PRです🙋

github.com

内容としては、Rails Guidesを1文字修正しただけなのですが😅

# bofore
If it says something like "Rails 5.1.1", you are ready to continue.
# after
If it says something like "Rails 5.2.1", you are ready to continue.

それでもRails Contributorsに名前が乗るのは、嬉しいですね🙌

contributors.rubyonrails.org

RailsのPRを見てると機能追加だけじゃなくて、docfix typoが、結構Mergeされているみたいなので、PRチャンスは結構ありそうだなと思いました👀

[ci skip] Fix typo by frodsan · Pull Request #34119 · rails/rails · GitHub

fix broken link in Action Cable guides and readme [ci skip] by gregmolnar · Pull Request #34126 · rails/rails · GitHub

Rails GuidesにPRを出すまで

というわけでRails GuidesにPRを出すまでの手順とかまとめておきます📝
手順は下記の通りです。

  1. RailsをFork
  2. Forkした自分のリポジトリguides/source配下を修正
  3. RailsのmasterにPRを出す

詳しいやり方とか注意事項は、Rails Guidesの下記ページに記載されているので、読んでみてください👀

Contributing to Ruby on Rails — Ruby on Rails Guides

https://guides.rubyonrails.org/ruby_on_rails_guides_guidelines.html

おわりに

RailsGuidesを読みながら、気づいたところをPR出すようなことやると英語とRailsの勉強にもなるし良さそうですね✨
今回出したPRの1行の英文を書くのにもだいぶ時間がかかってしまったので、英語も勉強しないといけないなと。。。

今回は、Rails GuidesのしょぼいPRでしたが、いずれは機能追加系のPRも出せるように勉強していきたいですね💪

herokuとrubyでゴミ出しを通知するLINE BOTを作ってみた🔔

みなさんこんにちは、まどぎわです(・∀・)
今回は、いつも忘れてしまっていたので、毎日明日出せるゴミを通知してくれるLINE BOT作ってみました🙌

f:id:madogiwa0124:20180930232656p:plain

やってみたら意外と簡単に出来たので手順等をメモしておきます📝

LineBotの作り方

流れは下記のような感じです👇

  1. LineDevelopersに登録
  2. チャンネル作成
  3. BOTを実装
  4. herokuにアプリを作成

LineDevelopersに登録

下記からLineDevelopersに登録できます👀

LINE Developers

f:id:madogiwa0124:20180930232920p:plain

画面に従って行って貰えれば、特に躓くところは無いと思います。

チャンネル作成

BOTを作成するには、まずはチャンネルを作る必要があります。
チャンネルとは、実際にBOTを運用するにあって必要な情報、Tokenや表示する名前等を登録します。詳しいやり方は、まとめてくださっている方がいらっしゃいますので、下記等を参考にしてみてください👇

qiita.com

BOTを実装

今回は、sinatraと公式のgemline-bot-sdk-rubyを使って作成しました。 軽く動かすだけだったら、公式チュートリアルをコピペするとオウム返しのLineBotが作成出来ます🐦

github.com

私のBotの返信処理は下記の通りです👇
メッセージが来たら、明日がなんのゴミの日かを取得し返信しています。

app.rb

post '/callback' do
  // リクエストボディの取得
  body = request.body.read

  // リクエストのチェック
  signature = request.env['HTTP_X_LINE_SIGNATURE']
  unless client.validate_signature(body, signature)
    error 400 do 'Bad Request' end
  end

  // リクエストボディをパース
  events = client.parse_events_from(body)
  events.each do |event|
    // メッセージを受信したら
    case event
    when Line::Bot::Event::Message
      // 通知メッセージを返信する
      client.reply(event['replyToken'], GomiChecker.notice_message)
    end
  end
end

ちなみに、返信等のcallbackを受けずにBOT側から通知を送信する場合は、下記のような実装になります。※ユーザーIDを指定して通知を行う必要があるので、環境変数で管理するようにしてます。

batch.rb

def push_ids
  ENV['PUSH_TO_ID'].split(',')
end

begin
  // 環境変数に設定されたすべてのユーザーに通知を送信
  push_ids.each { |id| client.push(id, GomiChecker.notice_message) }
rescue => e
  puts "batch exec error ..."
  p e
end

詳しい実装はGithubにコードを上げているので、そちらをご確認ください。

github.com

herokuにアプリを作成してデプロイ

下記のような感じでherokuにデプロイすると実際にLINEBOTが動き出すと思います🙌

$ heroku create
# hoge.gitは自分のアプリに合わせて変える
$ git remote add heroku https://git.heroku.com/hoge.git
$ git push heroku master

これでLINEから自分のBOTを友達登録して、通知を受け取れるはずです!🔔

おわりに

今回は、いつも忘れる明日のゴミの日を通知するBOTを作ってみました、実際に自分の生活を豊かにするアプリは良いですね🏠 LINEBOTを使うのは初めてでしたが結構簡単に作れたので、また何か日常で困ったことがあったら使ってみようかなと思いました🙌

Ionic:Dockerでionic開発環境を作る🐳

こんにちは、まどぎわです(・∀・)
最近またionicを触りはじめて、環境構築する際にローカルではなく、 Dockerを使ってみたのでそのやり方をメモしておきますφ(・

ちなみに私の環境は、下記の通りです。

種類 バージョン
OS MacOS High Sierra 10.13.6
Docker 18.06.1-ce-mac73 (26764)

やり方は結構簡単です🙌

まずはDockerHubでionic用のコンテナを探します🐳

https://hub.docker.com/

いろいろ出てきますが、私は下記を使いました👀

https://hub.docker.com/r/beevelop/ionic/

これを使って下記のようなDockerfileを作りました。

FROM beevelop/ionic:latest
ENV WORK_DIR /work
RUN mkdir ${WORK_DIR}
WORKDIR ${WORK_DIR}

※やってることは作業用のディレクトリを作って、そこをWORKDIRにしているだけです。

このDockerfileを任意のディレクトリに配置して下記を実行します🐳 そうするとコンテナ上の/workに作業用ディレクトリがマウントされて、ionicの開発環境が立ち上がります。

# ionic-workはコンテナ名なので、任意の名前に変える
$ docker build -t ionic-work .
# `/Users/user_name/Documents/repo/ionic/work`は適宜変える
# デフォルトのionicアプリ起動時のポート番号(8100)にアクセスできるように`-p`でホストの8100を割り当て
$ docker run -v /Users/user_name/Documents/repo/ionic/work:/work -p 8100:8100 -d -it --name ionic-work ionic-work
$ docker exec -it ionic-work bash

これでDockerコンテナ上の開発環境に接続することが出来ました🙌

アプリを作成して、下記を実行すれば、、、

$ cd アプリのルートディレクトリ
$ ionic serve

http://localhost:8100/をブラウザで開くとアプリが起動しているはずです👀
結構簡単ですね🙌

Dockerコンテナで開発環境が作れると、作成と破棄が簡単に出来るので良いですね。みなさんもIonic環境を作るときは試してみてくださいm( )m

参考

qiita.com

Vue.js: 異なるVueインスタンスのdataの値を取得する方法

下記のような2つのVueインスタンスあり、別のVueインスタンスのdataの値を参照したいときに少しハマったので、ちょっとバッドプラクティス感ありますが対応方法をメモメモφ(・

結論としては、下記のようにすればできた🙌
参照したいVueインスタンスを変数に入れといて、その変数からdataを参照して返却するメソッドを定義してあげれば良いみたい👀

let hoge = new Vue({
  el: '#hoge',
  data: {
    val1: 'val1',
    val2: 'val2'
  }
})

let fuga = new Vue({
  el: '#fuga',
  data: {
   val3: 'val3'
  },
  methods: {
    hogeVal1: function () {
      // hogeのval1をfugaで参照出来る
      retuern hoge.val1
    }   
  }
})
<div id="fuga">
  <span>{{hogeVal1()}}</span>
</div>

なんかもうちょっと良いやり方ありそうですが、とりあえず出来たので書いてみました(;・∀・)

bashでgitのコマンドのtab補完を有効にする方法

みなさん、こんにちは。まどぎわです(・∀・) 最近bashを使ってfishを使って、またbashに戻ってきました。いろいろ調べてみると結構bashでもいろいろ出来るみたいですね👀

bashだとMacのデフォルトで入ってるし、いろいろ出来るのであれば環境構築が要らないbashを使えると良いですよねということで、 今日はbashでgitコマンドの補完が、すごい簡単に出来るので、そのやり方をメモしておきますφ(・

やりかた

まず、gitコマンドの補完にはgit-completion.bashが必要です、おそらくデフォルトで入っているとおもうので、下記コマンドでファイルのパスを確認しておきます。

$ find / -name "git-completion.bash"
=> /Library/Developer/CommandLineTools/usr/share/git-core/git-completion.bash

その後.bashrcに書きを追記します。

source /Library/Developer/CommandLineTools/usr/share/git-core/git-completion.bash

そうすると、こんな感じでtab補完が使えるようになります。 f:id:madogiwa0124:20180901175057g:plain
※変わらない場合は、source ~/.bashrcを実行してみてください。

以上です、めっちゃ簡単ですね🙌

参考

qiita.com

【Rails】Webpackerを使ってRailsにフロントエンド開発環境を作ってみた

みなさん、こんにちは。まどぎわです(・∀・)
今日は、RailsアプリにWebpackerを使って、フロントエンド環境を整えて少し開発してみたので、そのあたりをブログに整理しておこうと思います🙌

WebPackerとは?

WebPackerとは、RailsでWebpackをいい感じに扱うことができる機能です。
私もまだ全然理解が足りてない部分がありますが、公式ドキュメントや下記にまとまってますので、興味がある方は読んでみてくださいm( )m

github.com

techracho.bpsinc.jp

今回やったこと

今回は私の開発している「Quizアプリ Quiq」に評価機能を作ってみました。

こんな感じ
f:id:madogiwa0124:20180826181920g:plain

下記から実際に触ることができます🙌

quiz-quiq.herokuapp.com

Webpackerの導入手順

Gemfileに書きを追記してbundle installを実施

gem 'webpacker', github: 'rails/webpacker'

その後、webpackervueをinstallします。

bundle exec rails webpacker:install
# 下記は導入したいフレームワークに合わせて修正してください。
bundle exec rails webpacker:install:vue

これで、bin/webpackでwebpackのビルドが走るようになり、railsでvueを扱えるようになります(・∀・)

フロントエンドの実装

今回は下記のような機能をRails上にVue.jsを使って実装しました。 デフォルトのルールでは、下記のようなディレクトリ構成で実装していきます。
(vue.jsの実装の仕方等は、tutorial等が充実してますので、そちらをご確認ください。)

# viewから読み込むEndpoint
app/javascript/packs
# その他
app/javascript

実際に私が書いたコードが下記です(お見苦しいかもしれません。。。)

QuizLike.vue

ここでは、実際のVueコンポーネントを実装してます。rails側へのpost処理等を実装してます。

<template>
  <div style="text-align: right">
    <button class="btn btn-success btn-sm" @click="create(1)"><i class="fas fa-thumbs-up"></i></button>
    <button class="btn btn-danger btn-sm" @click="create(-1)"><i class="fas fa-thumbs-down"></i></button>
    <span class="text-secondary">評価 : {{ like_count }} pt</span>
  </div>
</template>

<script>
import axios from 'axios';
import { csrfToken } from 'rails-ujs'
axios.defaults.headers.common['X-CSRF-Token'] = csrfToken()
export default {
  data: function () {
    return {
      like_count: this.init_like_count
    }
  },
  props: {
    init_like_count: {
      type: Number,
      required: true
    },
    quiz_id: {
      type: Number,
      required: true
    }
  },
  methods: {
    create: function (value) {
      this.like_count += value
      axios.post(`/quizzes/${this.quiz_id}/like`, {
        like: { value: this.like_count }
      });
    }
  }
}
</script>

packs/quizzes.js

ここでは、作成したコンポーネントの読み込み、Vueインスタンスの作成を行うEndpointを定義してます。

import Vue from 'vue/dist/vue.esm'
import QuizLike from '../QuizLike.vue';

new Vue({
  el: '#like_area',
  components: { QuizLike },
})

result.html.haml

ここでは、javascript_pack_tagを使って、Endpointの読み込みをおこなっています。

= javascript_pack_tag 'quizzes'

point

railsにpostする

railsにpostを送るときには、axiosを使用するの結構メジャーみたいです。
初めて使ってみましたが、下記のようにjsonでパラメーターを作成して簡単にpostがおくれました🙌

axios.post(`/quizzes/${this.quiz_id}/like`, {
    like: { value: this.like_count }
});

postする際の注意点

特に何も考えずにpostメソッドを送ろうとすると、RailsCSRF対策に引っかかり、InvalidAuthenticityTokenが発生してしまいます。Vueコンポーネントからrailsにpostする場合は、下記のように明示的にTokenを作成し、headerに付与してあげる必要があります👀

import axios from 'axios';
import { csrfToken } from 'rails-ujs'
axios.defaults.headers.common['X-CSRF-Token'] = csrfToken()

Tips

上でも少し触れましたが、いろいろハマったところをtipsとして、対応方法を軽くですがメモしておきますφ(・

Uglifier::Error: Unexpected token

下記Issueを参考にproduction.rbを修正して対応しました。

config.assets.js_compressor = Uglifier.new(harmony: true)

github.com

Module build failed: ReferenceError: Unknown plugin "@babel/plugin-transform-destructuring"

下記Issueを参考にyarn add https://github.com/rails/webpacker.gitを実行して対応しました。

Module build failed, Unknown plugin "@babel/plugin-syntax-dynamic-import" after webpacker:install:vue · Issue #1565 · rails/webpacker · GitHub

herokuデプロイ時にnode系のmodule fetchで500Errorで落ちる

何回かリトライしたら正常終了しました。

おわりに

今回はWebpacker使って、フロントエンド開発環境を作ってみました。
良いんだか悪いんだかわからないですが、webpack等フロントエンド関連技術をしらない自分でも結構簡単にフロントエンド環境を作ることができました🙌

これからはフロントエンド技術も学んで、よりユーザーに優しいサービスを作っていきたいです👀

参考

top-men.hatenablog.com

qiita.com

tech.medpeer.co.jp

【開発効率UP】Emacsキーバインドでコンソール操作を快適にしよう!

みなさん、こんにちは。まどぎわです(・∀・)
コンソール操作って結構めんどくさいですよね。。。

例えばコマンドを打ち間違えてしまった場合、普通にやると下記のようになるんじゃないかな?と思います。

f:id:madogiwa0124:20180819183742g:plain

しかしEmacsキーバインドを使うと、下記のように修正できます(・∀・)

f:id:madogiwa0124:20180819183715g:plain

上と比べてみても結構快適そうですよね?🙌

実際に開発してるときは、コンソールで操作してるときも多いと思うので、コンソール操作を効率的に行えると開発効率も上がるんじゃないかなと思います。

Emacsキーバインドは、MacのPCであればで特にインストール等を不要で使えますし、コンソールだけじゃなくてブラウザ操作やEditorでも使えるので、ぜひ使ってみてください(・∀・)

Emacsのよく使うコマンド

よく使いそうなコマンドを下記に記載してみました、Emacsにはまだまだいろいろなコマンドがありますが、とりあえずコレだけ覚えておくだけでも大分快適になるんじゃないかな?と思います👀

コマンド 動作
ctrl + f 次の文字へ
ctrl + b 前の文字へ
ctrl + n 次の行へ
ctrl + p 前の行へ
ctrl + a 行頭へ
ctrl + e 行末へ
ctrl + k カーソル以降を削除

fとかbとかnとか一見覚えにくいなぁと思いますが、fはforward、bはback、nはnextと、意味から推測出来る単語の頭文字を取っているので、使っていると自然に覚えやすいと思います🙌

ちなみに、最初の例は下記のような操作を行っています。

  1. 入力ミス
  2. ctrl + aで行頭へ移動
  3. ctrl + fで修正部分まで移動
  4. 訂正し、再実行

f:id:madogiwa0124:20180819183715g:plain

EmacsキーバインドをEditorで使う

Emacsキーバインドを覚えるとEditorでも使いたくなってしまうのですが、メジャーなEditorにはだいたいEmacsキーバインド拡張機能があるようです。みなさんも使ってみては?👀

おわりに

今日は、コンソール操作を効率化する方法としてEmacsキーバインドを紹介しました。

コマンドも意味のある名前の頭文字になっていて、インストール不要で使えるので、そこまで学習コストを掛けずに覚えられるので、開発効率UPになるんじゃないかと思います!(・∀・)

みなさんも、是非使ってみてください🙌

参考

Emacsのキーバインド覚書

qiita.com

qiita.com