2020-06-22

octokit.rb を使ってコミットハッシュに紐付いたプルリクエストを取得する

最近，業務でコミットハッシュ( SHA-1 )に紐付いたプルリクエストを取得する方法が無いかを探していて，意外と苦労していました．

ローカルリポジトリにある git の commit の sha またはブランチ名を利用して，プルリクエストの番号って取得できないかなぁ...
GitHub API のドキュメント見てもそれらしいものが無さそうな感じなんだよなぁ...なんか方法無いだろうか...
— okabeeeat (@okabeeeat) 2020年6月20日

もう駄目かなぁと思ったのですが，何とか方法を見つけたので今回はその方法についてまとめていきます・

やり方

探してみた結果，どうやらGitHub の「List pull requests associated with a commit」という API を使えば良いことがわかりました．

developer.github.com

注意点としてはこの API はプレビュー版のため，APIをリクエストする時に以下の Accept ヘッダーを追加する必要があります．

application/vnd.github.groot-preview+json

こんな感じで curl で叩けば取得できます．

$curl https://api.github.com/repos/ユーザ名/リポジトリ名/commits/コミットハッシュ/pulls -H "Accept: application/vnd.github.groot-preview+json"

[
  {
    "url": "https://api.github.com/repos/ユーザ名/リポジトリ名/pulls/コミットハッシュに紐付くプルリクエストの番号",
〜省略〜

octokit.rb を使う場合

octokit.rbを使って取得することもできます．あくまでサンプルですが既にプルリクエストが作られているプロジェクトに次のようなコードを追加をすれば，取得できます．

※octokit.rb のバージョンは v4.15 以上にする必要があります．

以下， sample プロジェクトにコードを追加した場合としています．

sample/.env

GITHUB_REPOSITORY='ユーザ名/リポジトリ名'
GITHUB_PERSONAL_ACCESS_TOKEN='アクセストークン'

sample/Gemfile

gem "octokit", "~> 4.18"
gem 'dotenv'

sample/sample.rb

require 'dotenv'
require 'octokit'
Dotenv.load

octkit_client = Octokit::Client.new(:access_token => ENV['GITHUB_PERSONAL_ACCESS_TOKEN'])

begin

  puts octkit_client.commit_pulls(ENV['GITHUB_REPOSITORY'], proc { `git rev-parse HEAD`.chomp }.call, accept: ::Octokit::Preview::PREVIEW_TYPES[:commit_pulls]).inspect
rescue Octokit::UnprocessableEntity
  puts 'commitを push していない, またはプルリクエストを作っていなければ error になります'
rescue => e
  puts e
end

Accept ヘッダーはoptionとして accept: ::Octokit::Preview::PREVIEW_TYPES[:commit_pulls] 追加すればできます．

参考: rdoc.info

実行

$sample - [sample-brunch] » bundle install
$sample - [sample-brunch] » ruby sample.rb
〜ここにレスポンス結果が表示される〜

まとめと所感

今回は octokit.rb を使ってコミットハッシュに紐付いたプルリクエストを取得する方法についてまとめみました．この内容についての文献があまりなかったのが少し不思議ではありました(こういうことやりたいのは自分だけってことなのかな😅)

こんなことをやりたかった理由についてなのですが，これについては業務で取り組んでいることが終わったタイミングでまたブログに書こうと思います(あともう少し！！！)．

2020-06-15

create-nuxt-app した Nuxt プロジェクトに Prettier を入れたら VSCode のフォーマット機能と競合した時の対応

Vue.js VSCode Nuxt.js Prettier トラブルシューティング

個人開発で create-nuxt-app で Nuxt プロジェクトを作成したのだが，Prettier と VSCode のフォーマット機能が競合した．

おそらく，最初に通る道なんだろうなと思ったが，意外とと対応方法がわかるのに時間が掛かったのでまとめてみる．

前提

VSCode に「vetur」という拡張機能が入っていること
VSCode の設定でeditor.formatOnsaveがオンになっていること

marketplace.visualstudio.com

何となくデフォルトで作成される.vueファイルを見た後，いつもの癖で保存する． f:id:bake0937:20200614191710p:plain

コミットすると，lint-stagedで引っかかることに気づく．

» git commit -m "fix"                                                                                                                                                2020/06/15 19:17:34 
husky > pre-commit (node v12.18.0)
✔ Preparing...
⚠ Running tasks...
  ❯ Running tasks for *.{js,vue}
    ✖ yarn lint [FAILED]
  ✔ Running tasks for *.{css,vue}
↓ Skipped because of errors from tasks. [SKIPPED]
✔ Reverting to original state because of errors...
✔ Cleaning up... 

✖ yarn lint:
error Command failed with exit code 1.
$ eslint --ext .js,.vue --ignore-path .gitignore . /Users/okabeeeat/projects/nuxt_project/layouts/default.vue /Users/okabeeeat/projects/nuxt_project/layouts/error.vue

/Users/okabeeeat/projects/nuxt_project/layouts/default.vue
  3:25  error  Replace `·v-model="drawer"·:mini-variant="miniVariant"·:clipped="clipped"·fixed·app` with `⏎······v-model="drawer"⏎······:mini-variant="miniVariant"⏎······:clipped="clipped"⏎······fixed⏎······app⏎····`    prettier/prettier
  5:21  error  Replace `·v-for="(item,·i)·in·items"·:key="i"·:to="item.to"·router·exact` with `⏎··········v-for="(item,·i)·in·items"⏎··········:key="i"⏎··········:to="item.to"⏎··········router⏎··········exact⏎········`  prettier/prettier

/Users/okabeeeat/projects/nuxt_project/layouts/default.vue/nuxt.config.js
  86:12  warning  'config' is defined but never used. Allowed unused args must match /^_/u  @typescript-eslint/no-unused-vars
  86:20  warning  'ctx' is defined but never used. Allowed unused args must match /^_/u     @typescript-eslint/no-unused-vars

✖ 4 problems (2 errors, 2 warnings)
  2 errors and 0 warnings potentially fixable with the `--fix` option.

info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
husky > pre-commit hook failed (add --no-verify to bypass)

原因は，改行していないことによる error で VSCode で自動修正する．そして保存したらまた自動修正する前の状態になる...どゆこと？？

f:id:bake0937:20200614191805p:plain

原因

最初は Prettier と ESLint のフォーマット機能の競合だと勘違いして色々調べたが，どうやら VSCode の設定画面のvetur.format.defaultformatter.htmlが「prettyhtml」になっていた．

つまり Prettier のフォーマットに則っていないから error になるが，VSCode で保存をしたら，prettyhtml のフォーマットになってしまうということになる．

そのため，この設定を Prettier に変えれば良い．

f:id:bake0937:20200614191832p:plain

これで.vueファイルを保存をすると prettyhtml ではなく，Prettier のフォーマット機能でフォーマットできる．

f:id:bake0937:20200614191910p:plain

まとめと所感

今回は Prettier と VSCode のフォーマット機能の設定についてまとめてみた． Prettier を使ったプロジェクトはまだ触ったばかりなので，Nuxt.js 同様これからドンドン使っていくぞ！！！

2020-06-08

iTerm2 に「Status Bar」という便利な機能があることを知った

iTerm2 小ネタ

Mac のコマンドラインツールとして「iTerm2」を使っているのですが，チームメンバーに「Status Bar」という機能があることを知り，これが結構便利な機能だとわかったため今回はそれについてまとめてみようと思います．かなり小ネタです．

こんな感じでメモリや CPU，現在いるディレクトリで git のどのブランチをチェックアウトしているかがわかります． f:id:bake0937:20200608215548p:plain

ちなみに iTerm2 はここからダウンロードできます．

www.iterm2.com

「Status Bar」の設定方法

「Preference」→「Profiles」の画面で「Session」のタブを選択すると以下のような画面になるので，「Status Bar enabled」にチェックを入れて「Configura Status Bar」を押します．

f:id:bake0937:20200608220951p:plain

すると，このように Status Bar に表示したい項目を選択できるのでドラッグアンドドロップで設定しましょう．色々な項目を設定できますね．表示する項目が決まったら OK を押します． f:id:bake0937:20200608221516p:plain

するとiTerm2 の「Status Bar」が先程，選択した項目が表示されるようになります．

f:id:bake0937:20200608221755p:plain

まとめと所感

今回は iTerm2 の「Status Bar」についてまとめてみました．最近リモートでペアプロをやることがあり，チームメンバーの画面を共有した時に「あれ？iTerm2 にそんな機能があるんですか？」という具合で知った機能でした．

ペアプロをすると思わぬところで便利な情報も手に入るので良いですね．ペアプロについてももっと効率良くできる方法を探していこうと思います．

2020-06-01

無料でアイコン管理をできる「NucleoApp」を使い始めた

デザイン NucleoApp アイコン管理個人開発

最近，ちょっとした個人開発を始めたのですが，アイコン管理のアプリがあることを知り「IconJar」というアプリがあることを知りました．

geticonjar.com

しかし基本有料のため，まずは無料で使えるアプリが無いかなぁと探してみたら，「NucleoApp」というものを見つけたため，今回はそのアプリについて軽く紹介しようと思います．

使い方

ここの公式サイトからダウンロードします．Electron のロゴと少し似てますね． nucleoapp.com

アプリを起動する

起動すると，Google Material Icons が既に入ってますね．

f:id:bake0937:20200601193508p:plain

Export から SVG 以外の形式で手に入れることができます．

f:id:bake0937:20200601194151p:plain

JSON，JSX．VUE があるのは凄いですね！！！(そもそもアイコン管理のアプリを使うのは，NucleoApp が初なので，これがスタンダードなのかわからない...)

f:id:bake0937:20200601195458p:plain

自分用のオリジナルのアイコンセットは「MY SETS」の「+」から設定できます．

f:id:bake0937:20200601193814p:plain

アプリの右上にある「Login」は有料プランにならないと使えないようです．有料プランはサブスクリプションではなく，買い切りタイプなようです．$99 と少しお高いですが，このまま試しに使ってみて，有料プランの機能が欲しくなったら検討しようと思います．

nucleoapp.com

まとめと所感

今回は NucleoApp について書いてみました．昨日たまたま見つけてインストールしたばかりなのでまだまだですが，これからガシガシ使っていこうと思います．

気づいたことや知見を見つけたら随時ブログに書いていこうと思います．

参考記事

www.soramane.com coliss.com

2020-05-25

GitHub で自分が読みたい言語の OSS を探す時の便利な方法

GitHub 小ネタ

プログラミングの勉強をする時に OSS のツールやプロダクトを読むことがあります．その時によく GitHub で探すのですが今回はその時の便利な小ネタについて書きます．

検索バーで今まではこんな感じで検索してた

例えば，Vue.js と Ruby を使った OSS を探したい場合，GitHub の検索バーでこんな風に「vue ruby」と入れてよく検索していました．これでもまぁヒットはするのですが，もう少し検索の精度を上げられないのかなぁと思っていました．

f:id:bake0937:20200525221726p:plain

公式ドキュメントを読んで見る

GitHub の公式ドキュメントを読んでみると，どうやら「language:」という修飾子を使って検索すると良いことがわかりました．

help.github.com

さっそく「language:vue, ruby」で検索してみるとリポジトリ数が大分絞りこめることができました．

f:id:bake0937:20200525220845p:plain

まとめと所感

今回は GitHub の検索バーについて書いてみました．かなり小ネタでしたが，OSS のコードを検索していることが結構あることに気づいたためまとめてみました．検索バーは修飾子を使わなくても便利ですが，もっと検索の精度を上げたいと思った時にササッと使えるようにして検索の効率を上げていこうと思います．

2020-05-18

「Gitify」がついに Windows と Linux をサポートしたので使ってみた

GitHub Gitify チーム開発やってみた

最近，「Quests」という GitHub と GitLab の通知をするアプリを入れた時に「そういえば Gitify って最近どんな感じなんだろ」と思い，ふと公式ページを見てみたら，なんとWindows と Linux をサポートしていました🎉🎉🎉

f:id:bake0937:20200518222330p:plain

Gitify は今までは macOS のみの対応で Windows を使っているチームメンバーに「GitHub の通知をよく見逃すからオススメのアプリある？」って聞かれる度に「う〜ん😅」という反応をしてきたので，とても朗報です．Windows も持っているため今回は Windows で Gitify を入れてみます．

Mac については過去に書いた記事の内容と同じ手順でアップデートできたので，気になる方はこちらをどうぞ． bake0937.hatenablog.com

事前の確認

GitHub の notifications の設定で以下のように「Web and Mobile」にチェックを入れておいてください．

f:id:bake0937:20200518232318p:plain

インストール方法

公式サイトにアクセスし，ダウンロードしてください．

www.gitify.io

ダウンロード後，exe ファイルを実行し，インストールしていきます．

インストール完了後，「Gitifyを実行」にチェックを入れた状態で完了します． f:id:bake0937:20200518230613p:plain

インストールするとタスクバーにこのように表示されます（隠れている場合はタスクバーに出すようにするとわかりやすくなります）．

f:id:bake0937:20200518230730p:plain

Gitify のアプリアイコンは暗い色のためタスクバーが暗い色の場合は見えにくい場合があります😅．そのため，Windows の設定からタスクバーの色を明るくするとアイコンが見やすくなります．

f:id:bake0937:20200518230911p:plain

アプリアイコンをクリックすると Gitify の画面が表示されるのですが，人によっては表示されない場合があります．その場合は「管理者として実行」を試してみてください．

f:id:bake0937:20200518231245p:plain

アイコンが 2 個表示されてちょっと気持ち悪いですがこれで Gitify が起動されます．「Login to GitHub 」をクリックし，GitHub に接続してみましょう．

f:id:bake0937:20200518231541p:plain

f:id:bake0937:20200518231418p:plain

⚙のマークから通知の設定をカスタマイズします．個人的には以下のような設定にしています．

f:id:bake0937:20200518232601p:plain

これで GitHub の通知が Windows に来るようになります．

まとめと所感

今回は，Windows と Linux をサポートした Gitify し，Windows にインストールしたことについてまとめてみました．いやぁ〜これは嬉しい．早速，明日チームメンバーに共有しようと思います．

普段，私は Mac で Gitify をインストールして，しばらくアップデートしていなかったのですが，v3.0.5 までで GitHub Actions の通知をサポートしたそうなので，こちらも早速アップデートしてみます．

追記 2020/05/19

2個起動されている場合はタスクマネージャーから「タスクの削除」を押すと消えることがわかりました．「タスクの削除」を押した後に，表示上は消えないままですが，タスクマネージャーを再度開いてみると消えていることが確認できました．

f:id:bake0937:20200519095710p:plain

2020-05-11

vue-cli でローカルサーバを起動し，接続に時間が掛かる場合の対応方法

Vue.js vue-cli トラブルシューティング

現在 Vue.js の勉強をしているのだが，以下のように vue-cli でサーバを立ち上げてブラウザでアクセスした所，接続にやたらと時間が掛かったので原因と対応方法についてまとめる．

$yarn serve
yarn run v1.22.4
$ vue-cli-service serve
 INFO  Starting development server...
98% after emitting CopyPlugin

 DONE  Compiled successfully in 1530ms


  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://192.168.1.12:8080/

  Note that the development build is not optimized.
  To create a production build, run yarn build.

原因

はっきりとした原因が判明しなかったが，実施時は他のローカル開発環境も立ち上げていたことから，名前解決が上手くいっていないのではないかということがわかった．

こちらの記事がとても参考になった．

labo.nozomi.bike

対応方法

上記の記事にもある通り，vue-cli のプロジェクト直下にvue.config.jsを作成し，以下のようにポート番号を変更すれば良い．

module.exports = {
  devServer: {
    port: 8888,
    disableHostCheck: true,
  },
};

vue.config.js の詳細はこちらのドキュメントを見た． cli.vuejs.org

もしくは，起動している他のローカル開発環境を停止すれば，vue-cliのポート番号を変えなくても良さそうではある．

まとめと所感

今回は vue-cli のローカルサーバの接続に時間が掛かる場合の対応方法についてまとめてみた．ホットリロードも上手く効かなったため，ここは解決するかしないかで勉強も開発にも関わってくるので，原因が何とかクリアできて良かった．この調子で Vue.js を習得していくぞ！！

Beeeat’s log

プログラミングで出くわした知識やツール、日常生活、働き方その他色々なことをメモしていくブログ

octokit.rb を使ってコミットハッシュに紐付いたプルリクエストを取得する

やり方

octokit.rb を使う場合

実行

まとめと所感

create-nuxt-app した Nuxt プロジェクトに Prettier を入れたら VSCode のフォーマット機能と競合した時の対応

前提

原因

まとめと所感

iTerm2 に「Status Bar」という便利な機能があることを知った

「Status Bar」の設定方法

まとめと所感

無料でアイコン管理をできる「NucleoApp」を使い始めた

使い方

アプリを起動する

まとめと所感

参考記事

GitHub で自分が読みたい言語の OSS を探す時の便利な方法

検索バーで今まではこんな感じで検索してた

公式ドキュメントを読んで見る

まとめと所感

「Gitify」がついに Windows と Linux をサポートしたので使ってみた

事前の確認

インストール方法

まとめと所感

追記 2020/05/19

vue-cli でローカルサーバを起動し，接続に時間が掛かる場合の対応方法

原因

対応方法

まとめと所感