fish shell 導入 (殴り書き)

目的

fish shell を人に勧めても、勘所がないと環境作りが大変そうなイメージがあったので、「ここを見て」と言える記事を作ってみました。(書き殴り)

ゴール

下記のような画面になればOK

前提

本記事では、下記の環境を前提としています。

• macOS
• ターミナルまたはiTerm
• Homebrewインストール済み
• ghqインストール済み

導入

下記コマンドで、fish shell をインストールします。

$ brew install fish # fish をインストール

次に、デフォルトシェルをfishに設定します。

$ which fish

/usr/local/bin/fish
$ sudo vi /etc/shells # which fish の結果を追記
$ chsh -s /usr/local/bin/fish


別ウィンドウでターミナルを起動して、行開始が「 user@pc-name ~> 」のようになっていればOKです。

ドラキュラテーマ

ターミナルの場合

下記のコマンドでターミナル用のDraculaカラーテーマをインポートします。

$ ghq get dracula/dracula-theme
$ cd ~/ghq/github.com/dracula/dracula-theme/
$ open ./terminal-app/Dracula.terminal

下記のようなドラキュラっぽい (薄紫色) ウィンドウが表示されたらインポート完了です。

ターミナルの環境設定から、プロファイルのDraculaをデフォルトに設定してください。
今後、新しいウィンドウを開くときの既定の設定なります。

iTermの場合

下記のコマンドでiTerm用のDraculaカラーテーマをインポートします。

$ ghq get dracula/dracula-theme
$ cd ~/ghq/github.com/dracula/dracula-theme/
$ open ./iterm/Dracula.itermcolors

下記のダイアログが出たらiTermへのインポートは完了です。

iTermsのPreferencesから、Profiles > Colors > Color PresetsをDraculaに変更します。
別ウィンドウでターミナルを起動して、ドラキュラっぽく (薄紫色) なっていればOK

bobthefish

fisherをインストールします。

$ curl https://git.io/fisher --create-dirs -sLo ~/.config/fish/functions/fisher.fish # fisher をインストール

bobthefishテーマを追加します。

$ fisher add oh-my-fish/theme-bobthefish

このままではGitリポジトリのディレクトリだと文字化けしてしまうので、フォントをインストールします。

$ ghq get powerline/fonts
$ cd ~/ghq/github.com/powerline/fonts/
$ ./install.sh

ターミナルの場合

ターミナルの環境設定から、プロファイル > テキスト > フォントをProFont for Powerlineに変更します。

iTermsの場合

iTermsのPreferencesから、Profiles > Text > Font > Change Fontをxxx for powerlineに変更します。(xxxはお好みのフォントを選んでください)

その他

Z

Zコマンドは、一度移動したことのあるディレクトリなら、省略した名前でどこからでも移動できるようになります。

$ fisher add jethrokuan/z

例えば、下記のようにfontsディレクトリに移動したことがあれば、どのディレクトリからでも移動することができるようになります。

$ cd ~/ghq/github.com/powerline/fonts/
$ z font

Visual Studio Code の ターミナル

VSCodeのターミナルでも同様に文字化けするのでフォントを設定する。
Preferences > Settings > Users > Text Editor > Font の Editor: Font Family に「Source Code Pro for Powerline」を追加する。

注意

fish shell に乗り換えた後に、いくつか困ったことがありました。

• fish は`~/.bash_profile`などは読み取らず、`~/.config/fish/config.fish`を見に行きます
• bashとは微妙に記法が異なるので注意が必要です。
  例：bash だと `eval $(xxx)` だったのが、fish だと `eval (xxx)`なる。

他にも注意することがあるかもしれないので、今後気づいたことがあれば追記していきます。


以上

「Permission denied (publickey)」

久しぶりにGitHubからクローンしようとしたら

git clone {GitリポジトリのURL}
git@github.com: Permission denied (publickey).
fatal: Could not read from remote repository.

とエラーが出てしまいました。
少し調べたらわかるのですが、本記事はその解決方法を備忘として残しました。

結論としては、下記のコマンドでsshエージェントに秘密鍵を追加したらクローンできるようになりました。

$ ssh-add -K ~/.ssh/{秘密鍵のファイル名}

おそらくmacOSのアップデートか何かで、sshエージェントから秘密鍵が外れていたのかもしれません。(原因不明)

以上

[覚書] Reactの学習 (1) Ruby on Rails および Reactの導入

概要

• 目的
• ReactおよびRuby on Railsを学習する。
• システム構成
• フロント：React
• サーバサイド：Ruby on Rails
• 開発環境：macOS、Homebrew
• 目標
• リアクティブなWebサイトの開発
• RESTfulなAPIサーバの開発

導入

RubyおよびRuby on Railsのインストール

Rubyのバージョン管理システム(rbenv)のインストール

Homebrewでrbenvをインストールする。
※rvmというバージョン管理システムも存在するが、rbenvの方が後発で評判が良かったので今回はrbenvを使用する。(特に強いこだわりはないです)

$ brew install rbenv
# rbenvとruby-buildがインストールされていることを確認。
$ brew list

$ rbenv init
# Load rbenv automatically by appending
# the following to ~/.bash_profile:
eval "$(rbenv init -)" 

# rbenv init コマンドの指示通り~/.bash_profileに1行追加する。
$ echo 'eval "$(rbenv init -)"' >> ~/.bash_profile

ターミナルを再起動する。

# rbenvが正しくインストールされているか確認する。
$ curl -fsSL https://github.com/rbenv/rbenv-installer/raw/master/bin/rbenv-doctor | bash

Rubyのインストール

# 利用可能なRubyのバージョンを確認する。
$ rbenv install -l

# 任意のバージョンのRubyをインストールする。
$ rbenv install 2.4.1

# インストールできたか確認する。
$ rbenv versions
* system (set by /Users/xxx/.rbenv/version)
  2.4.1

# rbenvの再読み込み ※rehash要調査。$ rbenv rehash

# 使用するバージョンを設定する。(global)
$ rbenv global 2.4.1

# バージョンが切り替わったことを確認する。
$ rbenv versions
  system
* 2.4.1 (set by /Users/xxx/.rbenv/version)
$ ruby -v
ruby 2.4.1p111 (2017-03-22 revision 58053) [x86_64-darwin16]

Ruby on Railsのインストール

bundlerのインストール

bundlerをインストールする。

# bundlerをインストールする。
$ gem install bundler
# bunderがインストールされたか確認する。
$ gem list --local
$ bundle -v
Bundler version 1.15.4

Ruby on Railsのインストール

Ruby on Railsプロジェクトを作成する。

$ mkdir project
$ cd project
$ bundle init
Writing new Gemfile to /path/to/project/Gemfile

# Gemfileを編集する。
$ vi Gemfile
$ cat Gemfile
source "https://rubygems.org"
gem "rails"

# railsをインストールする。
# 注意：プロジェクト内にGemをインストールする場合は、--pathオプションをつける必要がある。
# --pathオプションをつけないとシステムにインストールされる。
$ bundle install --path vendor/bundle
$ bundle exec rails new .
# Gemfileを上書きするか聞かれるので、そのまま上書きする。

Ruby on Railsの起動

# Railsを起動する。
$ bundle exec rails server

ブラウザで、http://localhost:3000にアクセスしてRailsの画面が表示されていることを確認する。

※Railsを停止する場合は、ターミナルでCtrl-Cを実行する。

参考

• rbenv/rbenv: Groom your app’s Ruby environment
• https://github.com/rbenv/rbenv
• Bundler概要 - Qiita
• http://qiita.com/hisonl/items/162f70e612e8e96dba50
• システムのgemにrailsをインストールせずrails newする - Qiita
• http://qiita.com/youcune/items/222777415f00d19cccb4
• railsでbundle installする時にインストールパスを指定 - Qiita
• http://qiita.com/osamtimizer/items/3a241f365c85356394a8

Reactの導入

Railsへreact-railsを導入する。

Webpackerのインストール

$ vim Gemfile
$ cat Gemfile
(snip)
# Use Webpacker
gem 'webpacker', '~> 3.0'
(snip) 

$ bundle install

webpackerでreactをインストールしようとすると、yarnが必要とエラーが出る。

$ bundle exec rails webpacker:install
Webpacker requires Yarn version >= 0.20.1. Please download and install the latest version from https://yarnpkg.com/lang/en/docs/install/

yarnをインストールする。

$ brew install yarn
$ which yarn
/usr/local/bin/yarn
$ yarn --version
0.27.5

※後で確認したら、bin/にyarnが入っていたので、webpackerがbin/yarnを参照できていなかった？→設定漏れかもしれないので要調査

webpackをインストールする。

$ bundle exec rails webpacker:install
# サンプル用のページを作成
$ bundle exec rails g controller sample index
$ bundle exec rails s

ブラウザでhttp://localhost:3000/sample/indexにアクセスして、scriptタグが複数あることを確認する。(/assetsディレクトリ)

※webpackにより、これらがまとめられることを後で確認する。

以下のように編集する。

$ vi app app/views/layouts/application.html.erb 

-    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
+    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

$ bundle exec rails s

ブラウザでhttp://localhost:3000/sample/indexにアクセスして、scriptタグがまとめられていることを確認する。(/packディレクトリ)

ブラウザの開発ツールからコンソールを開き、「Hello World from Webpacker」と表示されていることを確認する。

Reactのインストール

$ bundle exec rails webpacker:install:react

以下を追加する。

$ vi app app/views/layouts/application.html.erb 

+    <%= javascript_pack_tag 'hello_react' %>

$ bundle exec rails s

ブラウザでhttp://localhost:3000/sample/indexにアクセスして、Hello React!が表示されていることを確認する。

以上で、Ruby on RailsにReactを導入する作業の完了。

参考

• reactjs/react-rails: Integrate React.js with Rails views and controllers, the asset pipeline, or webpacker.
• https://github.com/reactjs/react-rails
• Rails5+webpacker+Reactを試してみた - Qiita
• http://qiita.com/mugi_uno/items/8e21ed4472577dc19cea
• Rails5.1から追加されると噂のWebpackerを使ってReact.jsを動かす。 - Qiita
• http://qiita.com/yoshiokaCB/items/564ed0440f0428c0009a

GitHub

• neogym/react-practice ※随時更新(本記事は、コミット51bec08の時点のもの)
• https://github.com/neogym/react-practice

以上

Spring Boot 起動時に出力されるバナーをカスタマイズ

Spring Boot 起動時に表示されるバナーをカスタマイズします。

デフォルト

デフォルトのままだと下記のバナーが表示されます。

  .   ____          _            __ _ _
 /\\ / ___'_ __ _ _(_)_ __  __ _ \ \ \ \
( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \
 \\/  ___)| |_)| | | | | || (_| |  ) ) ) )
  '  |____| .__|_| |_|_| |_\__, | / / / /
 =========|_|==============|___/=/_/_/_/
 :: Spring Boot ::        (v1.2.5.RELEASE)

カスタマイズ

カスタマイズしたい場合は、
`resources`ディレクトリ直下に`banner.txt`を配置してください。

                       _ _           _   _             
     /\               | (_)         | | (_)            
    /  \   _ __  _ __ | |_  ___ __ _| |_ _  ___  _ __  
   / /\ \ | '_ \| '_ \| | |/ __/ _` | __| |/ _ \| '_ \ 
  / ____ \| |_) | |_) | | | (_| (_| | |_| | (_) | | | |
 /_/    \_\ .__/| .__/|_|_|\___\__,_|\__|_|\___/|_| |_|
          | |   | |                                    
          |_|   |_|                                    
 :: Spring Boot ::     ${spring-boot.formatted-version}

下記のように出力されるはずです。

                       _ _           _   _             
     /\               | (_)         | | (_)            
    /  \   _ __  _ __ | |_  ___ __ _| |_ _  ___  _ __  
   / /\ \ | '_ \| '_ \| | |/ __/ _` | __| |/ _ \| '_ \ 
  / ____ \| |_) | |_) | | | (_| (_| | |_| | (_) | | | |
 /_/    \_\ .__/| .__/|_|_|\___\__,_|\__|_|\___/|_| |_|
          | |   | |                                    
          |_|   |_|                                    
 :: Spring Boot ::      (v1.2.5.RELEASE)

`${spring-boot.formatted-version}`を記述すると、
`Spring Boot`のバージョンをフォーマットした形で出力してくれます。

下記のサイトでは、簡単にバナーを作成してくれます。
http://patorjk.com/software/taag/

参考

バナーについての詳細を確認したい場合は、下記サイトを参考にしてください。

http://docs.spring.io/spring-boot/docs/current/reference/html/boot-features-spring-application.html

以上

[覚書][HTML, JavaScript]スマホのブラウザから書籍のバーコードを読み取って、タイトルなどを取得する機能を作った時に利用したOSSやWebAPI

概要

スマホのブラウザから、書籍のバーコード撮影を行い
タイトルなどの情報を取得する機能を作った時に利用したOSSやWebAPI

前提

HTMLおよびJavaScriptだけで実装する。

利用した物

• EddieLa/JOB · GitHub <- バーコードの読み取り
• https://github.com/EddieLa/JOB
• isbnjs - An ISBN JavaScript Library <- ISBNの形式チェック
• https://code.google.com/p/isbnjs/
• Google Books APIs <- 書籍情報の取得
  • https://developers.google.com/books/

EddieLa/JOB
使い方については書かれていなかったので
サンプルページのソースコードを真似してHTML&JavaScriptを実装。

isbnjs
バーコード読み取り処理のあとにISBNのチェック処理を追加。
(ライブラリの使い方については、プロジェクトのトップページに丁寧に書かれていました)

Google Books APIs
ISBNをGoogle Books APIsのパラメータにして
GET(jQuery getJSON)で取得して入力欄に挿入。

WebAPI連携の実装方法について

• [覚書] Webサイトから外部WebAPIへアクセスする方法(jQuery getJSON)
• http://qiita.com/neogym/items/0b89daa73ebb2a1d27d5

以上

[メモ]クラウドサービスのメリット・デメリットについて(偏見あり)

最近、とあるPaaSを利用していた時に、
突然メンテナンスになってしまい利用できなくなってしまいました。

そこで、クラウドサービスを使うことの
メリット・デメリットを整理してみました。

比較対象は、クラウドサービスと同等の機能・性能を持った
インハウスのシステムとしています。

メリット

• 導入コストが低いまたは無料
• 多種多様なサービスがあるので、用途に応じて好きなサービスを選ぶことができる
• (成熟したサービスであれば、おそらく)セキュリティや性能での問題は少ない

デメリット

• ライセンス料が必要な場合、自社システムとして作った方がトータルで安くなる場合がある
• 障害時の保証がない(場合が多い)
• 突然のメンテナンスで使えなくなる(単に報知を見逃している場合が多いが。。)
• 独自のカスタマイズができない、使いたいサービスが見つからない

個人的な偏見があるかもしれませんので
間違いや不足などがあるかもしれません。
コメントなどいただけたら幸いです。

以上

書籍のバーコードについて

とあることがきっかけで、書籍の管理システムを作ろうとしたのですが
書籍情報に関しての知識が乏しかったので調査しました。

本投稿は、その調査結果をまとめた覚書のようなものです。
(大層な言い方をしていますが、ググっただけです)

1. バーコードの意味 

書籍には2つのバーコードがありますが、それぞれがどのような役割を持っているのか調べてみました。

ただし、雑誌のバーコードは1つだけのようです。

書籍バーコードの規格について 

ISBNという規格により、
世界中の本がユニークなID(13桁以上)を持つことができて、
そのIDをバーコードから読み取ることができます。

旧規格は、10桁のIDになっています。

詳しくは、下記サイトに記載されています。
http://www.asahi-net.or.jp/~AX2S-KMTN/bcodes.html#bookjan

日本の独自規格であるJANでは、
ISBNを上段のバーコードに、付加情報を下段のバーコードに持たせています。

1.1. 書籍JANコード(上段) 

上段のバーコードにはISBNの情報を持たせています。

1.1.1. バーコードのコード体系 

1. JAN/ISBN書籍用フラグ
1. EANコードで決められている書籍JANコードであることを表わすフラグ
2. ISBN
3. チェック・デジット

チェック・デジットの計算方法については、下記のサイトをご確認ください。
http://www.dsri.jp/jan/check_digit.htm

1.1.1.2. ISBNのコード体系 

10桁の場合 

1. グループ・コード
1. 国、言語圏、地域などを表す。
2. 日本語圏では4。
2. 出版社コード
3. 書名コード
4. チェック・デジット (1桁)

グループ・コード、出版社コード、書名コードの桁数は、固定ではないようですが
全体の桁数が10桁に収まるようにしなければいけないようです。

13桁の場合

1. 書籍接頭辞 (3桁)
1. EANコード（日本ではJANコード）の書籍を表わす接頭辞「978-」または「979-」
2. グループ・コード
3. 出版社コード
4. 書名コード
5. チェック・デジット (1桁)

書籍接頭辞とチェック・デジットは固定長です。
さらに全体の桁数が13桁を超えてもよい仕様になっているようです。

 1.1. 書籍JANコード(下段)

下段のバーコードでは付加情報を持たせています。

1. 書籍JAN2段フラグ (3桁)
2. 分類コード (4桁)
3. 価格コード (5桁)
4. チェック・デジット(1桁)

内容に間違いなどありましたら
コメントからご指摘をお願いいたします。

以上