フロントエンドの開発でファイルプロトコル(file://…)ではなくHttpプロトコル(http://)を使う


※ローカルにApacheを立ててバーチャルホストを作って云々という話ではありません。


背景

フロントエンドの開発において、htmlファイルをサクッとブラウザで開けば(file://…)、Javascript, css が動くというのはとてもメリットだと思うのですが、実際にサーバにアップロードしてアクセスするときにはほぼ100% Httpプロトコル(http://)でアクセスすると思います。そういった環境をローカル開発でも使うといいと思います。

file://hoge/fuga/index.html」などをブラウザ確認するとファイル内で imgタグ, scriptタグ, linkタグ などは以下のように 相対パス で書くことになると思うのですが、それをサーバにアップする時に 絶対パス に直すということをしている人は多いと思います。

<img src="img/hoge.png">
<link rel="stylesheet" href="css/hoge.css" />
<script src="js/hoge.js"></script>

その際、いちいち変換するのは面倒くさいので、pythonやrubyで動かせる簡易Webサーバを立ち上げてHttpプロトコル(http://…)で開発をしましょうという話です!

前提条件

  • Python or Rubyがインストールされているマシンを用意する(Macなら大丈夫。windowsはpythonとか入っていても起動できるかは謎)

  • ファイル構成

/tmp/workspace/
├── index.html
└── js/
    └── app.js
<html>
<head></head>
<body>
<h1>テストページ</h1>
<script src="/js/app.js"></script>     <!-- 絶対パスapp.jsを指定している -->
</body>
</html>

Pythonを使った例

ドキュメントルートとなるディレクトリへ移動する
$ cd /tmp/workspace

Webサーバを立ち上げる(3000はポート番号なので開いているPortなら何番でもOK)
$ python -m SimpleHTTPServer 3000

ブラウザを立ち上げて http://localhost:3000 へアクセスすると index.html が表示されます!

Rubyを使った例

ドキュメントルートとなるディレクトリへ移動する
$ cd /tmp/workspace

Webサーバを立ち上げる(3000はポート番号なので開いているPortなら何番でもOK)
$ ruby -run -e httpd . -p 3000

ブラウザを立ち上げて http://localhost:3000 へアクセスすると index.html が表示されます!

PHPを使った例

ドキュメントルートとなるディレクトリへ移動する
$ cd /tmp/workspace

Webサーバを立ち上げる(3000はポート番号なので開いているPortなら何番でもOK)
$ php -S localhost:3000

ブラウザを立ち上げて http://localhost:3000 へアクセスすると index.html が表示されます!

さらなるTips

Python、Rubyの場合は デフォルトの index.html がない状態でフォルダ指定してアクセスすると、DirectoryIndexが表示されファイルリストを見ることができます。
今回の場合は以下のように js フォルダにアクセスすると

http://localhost:3000/js

以下の様な画面が出力されます。(Rubyを使った場合)

Ruby-webrick-directoryindex

参考サイト

ワンライナーWebサーバを集めてみた -Qiita

[rails]Rakeタスクでのtask定義の「:environment」引数について


Railsのジェネレータで生成したタスクのrbファイルを見ているとRakeタスクを定義するところで少し疑問に思ったことがあった。

railsのジェネレーターで以下のとおりにタスクを作成する。

% rails generate TASK_FILE_NAME TASK_NAME

例)
% rails generate hoge test

例)のように実行すると lib/tasks/hoge.rb ができて testというタスクが定義される

namespace :hoge do
  desc "TODO"
  task test: :environment do
  end
end

タスク定義のところで「:environment」 という引数が渡されているが、どういうこのことなのかを調べてみた。

「RailsでオリジナルRakeタスク作成からRSpecテストまで」 の記事の中に以下の一文があったので実際に試してみる。

:environment は モデルにアクセスするのに必須

引用:RailsでオリジナルRakeタスク作成からRSpecテストまで


lib/tasks/hoge.rb を以下のように変更する。

(Userモデルのデータは別途用意していることが前提)

  1. testタスク :environmentの引数を渡さない
  2. test_twoタスク :environmentの引数を渡す
namespace :hoge do
  desc "does not huve environment args"
  task :test do
    puts User.first
  end

  desc "has environment args"
  task test_two: :environment do
    puts User.first
  end
end

それぞれを実行する

  • 1.testタスク :environmentの引数を渡さない
% rake hoge:test
rake aborted!
uninitialized constant User
…省略

=> なんか「uninitialized constant User」という例外でエラーになる。


  • 2.test_twoタスク :environmentの引数を渡す
% rake hoge:test_two
# <User:0x007fadd5f68a80>

=> ちゃんとユーザを取得できている

まとめ

RailsでRakeタスクを使ってActiveRecordのモデルなどを扱うときは 「:environment」引数を渡して上げると良い!

さらに、実行時にもenvironmentを呼ぶことが出来るようだ

rakeタスク実行時に environment をよんでから hoge:test を呼ぶ

% rake environment hoge:test

コードは読んでなく検証しただけなので、もっと詳しくは調べないとなー

Rails向けプリローダ spring1.0 で Rubygemsのバージョンアップが必要な件


rbenvでインストールしたrubyでRails向けプリローダのspringが1.0にメジャーアップしていたので、
使ってみたら、RubyGemsのバージョンが低いというWarningが出る。。。

Warning: You're using Rubygems 2.0.14 with Spring. Upgrade to at least Rubygems 2.1.0 and run `gem pristine --all` for better startup performance.
Version: 1.0.0

そこで、RubyGemsのアップデート方法を以下に書きます。(ずっとBundlerを使っていたので、急にRubyGems本体のアップデートとかやろうと思っても分からなかったので、、、)

アップデート手順

参考:
新しいgemのアップデート方法(rubygems-update)
本当有難うございます。まんまの手順でした。。

1.rubygems-updateをインストールする

% gem install rubygems-update

2.アップデート前確認

アップデート前にRubygemsのバージョンを確認しておく

% gem environment
RubyGems Environment:
  - RUBYGEMS VERSION: 2.0.14
  - RUBY VERSION: 2.0.0 (2013-11-22 patchlevel 353) [x86_64-darwin12.5.0]
省略

3.アップデート実行

% update_rubygems

4.アップデート後確認

% gem environment
RubyGems Environment:
  - RUBYGEMS VERSION: 2.1.11
  - RUBY VERSION: 2.0.0 (2013-11-22 patchlevel 353) [x86_64-darwin12.5.0]
省略

空のディレクトリをgit管理下に入れるワンライナー(empty directories)


背景

chefを利用する機会が増えてきて汎用的な社内クックブックを作る状況が増えてきた昨今、

knife コマンドでクックブックをジェネレートするコマンドを実行すると

$ knife cookbook create COOKBOOK_NAME -o site-cook-books

バババっと以下のように基本的なディレクトリ構成で出力されるが、幾つか のディレクトリがある。

COOKBOOK_NAME
├── CHANGELOG.md
├── README.md
├── attributes
├── definitions
├── files
│   └── default
├── libraries
├── metadata.rb
├── providers
├── recipes
│   └── default.rb
├── resources
└── templates
    └── default
        └── sudoers.erb
attributes/, definitions/, files/default/, libraries/, proiders/, resources/ がそれぞれ空のディレクトリになっている

gitは空のディレクトリを管理下に置けないので、Railsに習って .keep という空ファイルを置くことにした。
(全てのリポジトリでディレクトリ構成の見た目を変えたくなかったので空のディレクトリもgit管理下に置くことにした。)


空のディレクトリに.keepを作るシェルのワンライナー

参考:
find/xargsを使った検索に便利なコマンド一覧

findで空のディレクトリを検索して、空のディレクトリに対して.keepという空ファイルをtouchで作成する。
Redhat系とUNIX(BSD)系では使えるオプションが違うようなので以下の用プラットフォームに合わせて実行する。

  • Redhat系
    -i オプションを指定することで ‘{}’で xargsに渡される値を取得できる
$ find . -type d -empty -print0 |xargs -0 -i touch '{}'/.keep
  • Unix系(MacOS)
    -Iオプションで % という文字列を xargsに渡される値として参照できるようにする
$ find . -type d -empty -print0 |xargs -0 -I % touch %/.keep

シェルのreadlineについて改めて調べてみた


ターミナルで作業していると、よくカーソルを行頭・行末へ一気に移動したいとか
入力した文字列をコピーしておきたいとか。。。などなど、色々やりたくなります。

そこで、、、readline だ!!!ということで色々とショートカットを調べてみました。

よく利用するショートカット達

C-a  行頭へ
C-e  行末へ
C-j  改行

C-b  一文字戻る
C-f  一文字進む

C-h  Backspace
C-d  delete

C-k  現在のカーソルから行末までをyank
C-u  現在のカーソルから行頭までをyank
C-w  単語単位でバックスペースでyankする
C-y  ペースト

C-l  画面をクリア

C-p  コマンドヒストリを戻る
C-n  コマンドヒストリを進める

C-r  コマンドヒストリをインクリメントサーチ(向きバック)
C-s  コマンドヒストリをインクリメントサーチ(向きフォワード)

注意)

  • man readline でその他のコマンドが調べられます。
  • 自分はzshの環境を使って実際に動かして試したので、各々の環境で少し違う点が出てくるかもしれません。