継続的ブログ

主にweb系の技術について書いています

最強のチートシート cheat.sh がすごい!

github.com

自分も Hacker News で知ったばかりなのですが、これとても便利です!

簡単に言ってしまうと、チートシートのまとめサイト的なもので、自分がほしいチートシートを簡単に取得できます

そして、

  • 速い!(100ms以内に回答を返す)

  • 圧倒的情報量!(55のプログラミング言語、いくつかのDBMS、1000以上のLinuxコマンドをカバー)

  • 信頼できる情報源!(チートシートのソースは各コミュニティのリポジトリとStackOverflow)

という特徴があります。

使い方

https://cheat.sh/

ここからブラウザでもcurlでも簡単にチートシートが取得できます。

例えば、 ls コマンドの使い方が知りたいとした場合。

  • ブラウザ f:id:akiza:20180712092120g:plain

  • curl f:id:akiza:20180712092940g:plain

簡単に取得できます。

CLIクライアントも用意されてるので、こちらを使うと更に便利です。(以降はCLIクライアントを使っていきます)
設定すればタブ補完効くのもいいです。

https://github.com/chubin/cheat.sh#command-line-client-chtsh


※タブ補完ですが、 zsh はまだ対応してないようです。残念。。


プログラミング言語もカバーしているので、例えば goif の書き方知りたいなと思った場合、 go の後にクエリで if と入力すれば取得することができます。

f:id:akiza:20180712222502g:plain

また、 :learn というクエリを使えばプログラミング言語の Getting Started 的なものも取得できるも良いです。

f:id:akiza:20180712221019g:plain


簡単に紹介してしまったので、まだまだ紹介できていないこともありますが、いかがでしょうか?
日常でLinuxコマンドのオプションとか忘れてググることあるので、個人的には結構使えるなと思いました。

それにしてもスター数の推移がすごいw

f:id:akiza:20180712222213p:plain

Android Studioを入れずに、GenymotionでReact Native開発

create-react-native-app でもオススメされてますね。

github.com

Genymotionのインストール

www.genymotion.com

まず、アカウント登録してください。
その後、Genymotionをインストールするのですが、Presonal Use(無料)版は、ちょっとわかりづらいところにあるので注意です。(Resources → Fun Zone)

www.genymotion.com

PATHを通す

インストールが完了したら、次にPATHを通します。

Macなら /Applications/Genymotion.app/Contents/MacOS/tools

export PATH="$PATH:/Applications/Genymotion.app/Contents/MacOS/tools/"

PATHを通したら、adbコマンドが使えることを確認。

Genymotionでデバイス作成

Genymotionを起動し、Sign In し、適当に新規デバイスを追加します。

f:id:akiza:20171210163439p:plain

追加できたら、起動させます。

f:id:akiza:20171210163701p:plain

一応起動確認。

f:id:akiza:20171210163947p:plain

アプリの確認

npm run androidで、アプリが起動することを確認。

f:id:akiza:20171210164817p:plain


以上で完了です。
androidエミュレータが遅いなあと感じてる人は試してみるといいかも。

『Learning React』読んだ

英語学習熱が再燃したので、洋書の技術書を読んでみようと思い、たまたま見つけた ↓ を読んでみました。

Learning React: Functional Web Development with React and Redux

Learning React: Functional Web Development with React and Redux

感想としてはとても良かったです。
今まで『入門 React』と『Reactビギナーズガイド』は読んだことあるのですが、その2つより実践的というイメージでした。

入門 React ―コンポーネントベースのWebフロントエンド開発

入門 React ―コンポーネントベースのWebフロントエンド開発

  • 作者: Frankie Bagnardi,Jonathan Beebe,Richard Feldman,Tom Hallett,Simon HØjberg,Karl Mikkelsen,宮崎空
  • 出版社/メーカー: オライリージャパン
  • 発売日: 2015/04/03
  • メディア: 大型本
  • この商品を含むブログ (2件) を見る

Reactビギナーズガイド ―コンポーネントベースのフロントエンド開発入門

Reactビギナーズガイド ―コンポーネントベースのフロントエンド開発入門

ReactやES6の説明など基本的なことの説明はかなりしっかりしていますし、Reactで開発する上で今や必須と言える redux や react-router、テストについてもかなりしっかり書かれていて、初級者から中級者まで幅広く学べることがあると思いました。

また、比較的最近発売されたということもあって、情報も新しく、サンプルは基本的にSFC(Stateless functional conponents)で書かれています、オマケ程度でですが yarn や GraphQL などについても書かれていました。

ちょうど久しぶりにReactを使う機会があったので、React周りの知識のアップデートできて良かったです。
でも、完全に理解できてはないと思うので、日本版が出ても買いたいと思います。(流れが早いので情報が古くなる前に出てほしいなあ)

目次等はこちらを参考にしてください。

shop.oreilly.com

オマケ

実は洋書の技術書を読むのは初めてでした。。
仕事柄海外のサイトは毎日のように見ますが、英語は得意ではないです。
そんな私が洋書を読んでみて良かった点・悪かった点をまとめてみました。

良かった点

  • 読み始めてから、より英語学習のモチベーションが上がった
  • 英語があまり得意でなくても電子書籍で買えば意外といける
    • わからない単語があったらすぐに調べることができるし、翻訳もかけることができる

悪かった点

  • 和書と比べて読むスピードが遅いので、なかなか進まない
  • 内容を完全には理解できてない気がする

悪かった点は完全に自分の英語力のせいなので、良かったことの方が遥かに大きいです。
これからも積極的に洋書を読んでいきたいと思いました。

あと、sound-redux はReactで開発する上でよく参考にさせてもらってます。

github.com

タリーズwifiで認証画面が出なかった場合にやったこと(Mac)

タリーズの公衆無線LAN(Tully’s wi-fi)に接続したが、ブラウザで認証画面が出ない場合の対応方法。

結論

https://ではなく、http://でどこかにアクセスしてみてください。
認証画面がでるはずです。

今はほとんどhttpsになっているのでなかなか気づきませんでした。。
もちろん公衆無線LANなので、基本的にはhttpsでアクセスしましょう。

あまり公衆無線LANを使うことはないのだが、この前タリーズで作業しようと思って繋いだ際にちょっと手間取ったので、誰かのお役に立てれば。
認証画面が出る他の公衆無線LANでも同じかもしれません。

  • ちなみにTully’s wi-fiについてはこちらから ↓

www.tullys.co.jp

vimでプロジェクトファイル内テキスト検索(fzf)

f:id:akiza:20170806173906g:plain

こんな感じのやつです。

fzf.vimのREADMEに書いてあるやり方(↓)だと、開いたファイルと同階層のものしか見てくれなかったのでいろいろ試してみました。

github.com

自分の.vimrcに書いてあるfzfの設定はこんな感じです。

" fzf
set rtp+=/usr/local/opt/fzf

function! s:find_git_root()
  return system('git rev-parse --show-toplevel 2> /dev/null')[:-2]
endfunction

command! ProjectFiles execute 'Files' s:find_git_root()

command! -bang -nargs=* Pt
  \ call fzf#vim#grep(
  \   'pt --column --ignore=.git --global-gitignore '.shellescape(<q-args>), 1,
  \   <bang>0 ? fzf#vim#with_preview('up:60%')
  \           : fzf#vim#with_preview({ 'dir': s:find_git_root() }),
  \   <bang>0)

最後のPtというところがそうです。
ほぼREADMEに書いてあるのと一緒ですが、ポイントは { 'dir': s:find_git_root() } をオプションに渡していることです。
あと、自分は検索ツールにthe_platinum_searcherを使っているので、そこは変えています。

github.com

とりあえずご参考まで。。

fzfもっと使いこなしたい!

実践Vim 思考のスピードで編集しよう! (アスキー書籍)

実践Vim 思考のスピードで編集しよう! (アスキー書籍)

CircleCI2.0に移行しました(Rails)

早くなるという噂を聞いたので試しにやってみたら、少しだけ早くなりました。(8min→6min)

.circleci/config.yml

version: 2
jobs:
  build:
    docker:
      - image: ruby
        environment:
          - TZ: "/usr/share/zoneinfo/Asia/Tokyo"
          - LANG: ja_JP.UTF-8
          - LC_ALL: C.UTF-8
          - LANGUAGE: ja_JP.UTF-8
      - image: circleci/mysql
        environment:
          - MYSQL_ROOT_PASSWORD:

    # parallelism: 2
    working_directory: ~/repo
    steps:
      - checkout

      # Restore cache
      - type: cache-restore
        key: phantomjs-2.1.1
      - type: cache-restore
        key: repo-{{ checksum "Gemfile.lock" }}

      - run: apt-get update

      # Install phantomjs
      - run: apt-get install -y fonts-migmix
      - run: |
          which phantomjs && exit
          curl --location --silent https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-linux-x86_64.tar.bz2 | tar xj -C /tmp --strip-components=1
          mv /tmp/bin/phantomjs /usr/local/bin/phantomjs

      # Bundle install dependencies
      - run: bundle install -j 4 --path vendor/bundle

      # Store cache
      - type: cache-save
        key: phantomjs-2.1.1
        paths:
          - /usr/local/bin/phantomjs
      - type: cache-save
        key: repo-{{ checksum "Gemfile.lock" }}
        paths:
          - vendor/bundle

      # DB setup
      - run: bundle exec rake db:create
      - run: bundle exec ridgepole -E test -c config/database.yml --apply -f db/Schemafile --enable-migration-comments

      # Run rspec in parallel
      - type: shell
        command: |
          bundle exec rspec --profile 10 \
                            --format RspecJunitFormatter \
                            --out /tmp/test-results/rspec.xml \
                            --format progress \
                            $(circleci tests glob "spec/**/*_spec.rb" | circleci tests split --split-by=timings)

      - run: bundle exec rubocop -D -R -c .rubocop.yml

      - type: store_artifacts
        path: tmp/capybara/
        destination: capybara

      # Save artifacts
      - type: store_test_results
        path: /tmp/test-results

基本的には公式のものを参考に作りましたが、気をつけた点を少し紹介させていただきます。

Language Guide: Ruby - CircleCIcircleci.com

rubyはcircleci/rubyを使わず、docker公式のものを採用

https://hub.docker.com/r/circleci/ruby/

CircleCIが用意してくれているDockerイメージがあって、gitsshやDockerツールが最初からインストールされていてと便利なのですが、phantomjsインストールして使用する際に少し面倒だったので、公式のものを使うようにしました。

mysqlの方はcircleci/mysqlを使っています。

https://hub.docker.com/r/circleci/mysql/

phantomjsのインストール

個人 Rails アプリを CircleCI 2.0 で動くようにした - アジャイルSEの憂鬱sinsoku.hatenablog.com

こちらのブログを参考にさせていただきました。
ありがとうございました。

ArgumentError: invalid byte sequence in US-ASCIIが出る対策

ArgumentError: invalid byte sequence in US-ASCII on v2.2.0 in Docker · Issue #277 · ffaker/ffaker · GitHubgithub.com

上記URLを参考に下記設定をしています。

environment:
  - LANG: ja_JP.UTF-8
  - LC_ALL: C.UTF-8
  - LANGUAGE: ja_JP.UTF-8

featureスペックエラー時に保存しているスクリーンショットを見れるように

- type: store_artifacts
  path: tmp/capybara/
  destination: capybara

tmp/capybaraに保存したスクリーンショットをCircleCIのArtifactsから見れるようにしています。

f:id:akiza:20170702115849p:plain

まとめ

CIが少しでも早くなることは嬉しいですね。
まだβ版ですが使って見る価値はあるのではないでしょうか。

クローラー(スクレイピング)をRspecでテスト

今回初めて、個人用にクローラーを開発してみました。
JavaScript多めのサイトのため、「Capybara + Poltergeist」を使用しました。

順調に開発は進んだのですが、テストってどう書けばいいんだろうと思い、知り合いに相談したところ、下記方針に決まりました。

  • feature_specとして書く
  • 毎回アクセスするのはよろしくないので、用意したHTMLファイルを解析する

やり方

CapybaraのHTTPリクエストをstub化する

毎回アクセスしないように、CapybaraのHTTPリクエストをstub化し、用意したローカルのHTMLファイルを返却するようにします。

HTTPリクエストをスタブ化するGemとして「webmock」は有名だと思います。

github.com

しかし、これはCapybaraでは使えません。
代わりに「puffing-billy」を使います。

github.com

Gemをインストールして、設定を追加します。
README通りだと、jsのエラーが無視されずRspecが失敗してしまうため、私は以下のように設定しました。

Capybara.register_driver :pg_billy do |app|
  options = {
    js_errors: false,
    phantomjs_options: [
      '--ignore-ssl-errors=yes',
      "--proxy=#{Billy.proxy.host}:#{Billy.proxy.port}"
    ]
  }
  Capybara::Poltergeist::Driver.new(app, options)
end
Capybara.configure do |config|
  config.default_driver = :pg_billy
  config.javascript_driver = :pg_billy
end

テストを書いてみる

テストコードはこんな感じです。

require 'rails_helper'

feature 'Login' do
  background do
    Billy.config.record_stub_requests = true
  end

  given(:url) { "http://www.example.com" }
  
  scenario 'login' do
    proxy.stub(url).and_return(body: File.read("spec/features/htmls/login.html"))
    visit url

    within("#form") do
      fill_in 'id', with: 'id'
      fill_in 'password', with: 'password'
    end

    stub = proxy.stub(url, method: 'post').and_return(
      headers: { 'Access-Control-Allow-Origin' => '*' },
      code: 200,
      text: "Success"
    )
    click_button('ログイン')

    request_params = stub.requests.shift[:body].split("&")
    expect(page).to have_content("Success")
    expect(request_params).to include("id=id", "password=password")
  end
end

ポイント1

Billy.config.record_stub_requests = true

フィールドに値が入って、ちゃんとPostされているかチェックするため、リクエスト情報を記録するようにしています。

ポイント2

proxy.stub(url).and_return(body: File.read("spec/features/htmls/login.html"))

指定のURLにアクセスした際に、用意したHTMLをbodyに入れて返すようにしています。

ポイント3

stub = proxy.stub(url, method: 'post').and_return(
      headers: { 'Access-Control-Allow-Origin' => '*' },
      code: 200,
      text: "Success"
    )

ログイン処理をstub化しています。

最後に、フィールドに値がちゃんと入っていること、ログインボタンが押されたことをチェックして、テストは完了です。

なかなか情報もなく、いろいろ悩んだ末、今回このようにテストしてみました。
「うちはこうやってるよ」とかアドバイスいただけるとありがたいです!

参考

Rubyでやるならこの本はオススメです!

Rubyによるクローラー開発技法 巡回・解析機能の実装と21の運用例

Rubyによるクローラー開発技法 巡回・解析機能の実装と21の運用例