ひろぽっぽれす

Rails3 jquery-railsをインストールする

投稿日: 2011年10月5日作成者: hirohi

ようやくちゃんと（？）Railsを勉強し始めました。

Railsはprototype.jsベースになってたりするのですが、最近はもっぱら世の中jQueryなので、Rails3でjQueryを使えるようにします。

gemsでjquery-railsをインストールする。

% sudo gem install jquery-rails --no-RDoc --no-ri
% gem list
jquery-rails (1.0.14)

これでインストール完了。
次に、Rails3アプリに組み込む。
${RAILS_APP_PATH} は、railsアプリのパス。

% cd ${RAILS_APP_PATH}/
% vi Gemfile
#最後尾に下記を追加する。
gem 'jquery-rails'

追記したらbundleして、railsサーバー起動。

% bundle
% rails generate jquery:install
     remove  public/javascripts/prototype.js
     remove  public/javascripts/effects.js
     remove  public/javascripts/dragdrop.js
     remove  public/javascripts/controls.js
     copying  jQuery (1.6.2)
     create  public/javascripts/jquery.js
     create  public/javascripts/jquery.min.js
     copying  jQuery UJS adapter (c00a97)
     remove  public/javascripts/rails.js
     create  public/javascripts/jquery_ujs.js
% rails s

ブラウザからソースを表示して、jQueryとjQueryUIが読み込まれてたら成功。
これでjQueryが使えるようになった。

カテゴリー: jQuery, Ruby, Ruby on Rails | 2件のコメント

MacOSX Lion にImageMagickをインストールする

投稿日: 2011年9月30日作成者: hirohi

Hello ImageMagick !!

画像解析や画像加工をCUIでゴリっとやってみたかったので、ImageMagickをMacOSX Lion にインストールしてみました。

MacPortsで楽々インストールしてみました。
結構時間かかりました。

% sudo port install ImageMagick
% which convert
/opt/local/bin/convert

インストールが終わったらHello World的にImageMagickのロゴを生成してみましょう。

% convert logo: logo.png
% ls
logo.png

これでロゴが生成されました。
displayコマンドでXwindowを立ち上げて、ロゴを確認できます。

display logo.png

これでインストール完了。
画像解析、加工、スタートです！

カテゴリー: ImageMagick, MacOSX | コメントをどうぞ

メディアクエリワンソース・マルチデバイステンプレートをリリースしました

投稿日: 2011年9月16日作成者: hirohi

CSS3のメディアクエリを使ったワンソース・マルチデバイステンプレートをリリースしました。

MediaQueries Multi-Device Template.

PC, iPhone, iPad, Android, 各種タブレットに最適化された形でコンテンツが提供できるように開発しました。多分まだ検証不十分でバグがあるかもですが、ベータ版をリリースします。

ワンソース・マルチデバイスとは？

「ワンソース・マルチデバイス」とは、1つのドキュメント(HTML)を、文書構造・内容に手を加えずに、仕様や画面サイズの異なる複数の端末毎に最適化して表示させる技術です。
CSS3のMediaQueryを使って横幅の変化によってCSSの読み込みを変えることで、さまざまな画面サイズのデバイスに対応することができます。

動作検証端末

Windows Mac: Internet Explorer 7 以上; Firefox3.6 以上; Safari5 以上; Opera11 以上; Google Chrome

iOS4.3 以上: iPhone3GS; iPhone4; iPad; iPad2

Android2.1 以上: Xperia (Android2.1); GalaxyS (Android2.2); NexusS (Android2.3)

とりあえず目標として、スマートフォン、PC、タブレットなど、Web標準ブラウザを搭載するデバイスに最適な形でコンテンツを提供することを目指しました。

マルチデバイス対応案件における、開発、運用のハードルや負荷を下げつつ、運用もラクにできればなと。

極力、ユーザーエージェント判別による振り分けはしません。全部CSS！
JSギミックなければ全然いけるよ、うんきっと。

メリット

CSSのみで対応できちゃう。
JavaScriptができなくても、マークアップのみで対応できちゃう。
MediaQueryはウィンドウの横幅でCSSを切り替えるため、未知のデバイスも考慮できる（はず。）

デメリット

複雑なレイアウト、コンテンツの出し分けは難しい。
MediaQueryでのCSS切り替えによるコーディングの取得が必要。

最後に・・・

このブログはマルチデバイス対応まだです！これからこのテンプレートを使ってみようと思います。

カテゴリー: Android, HTML5, iPad, iPhone, JavaScript, jQuery, マルチデバイス | コメントをどうぞ

MacにGoogle App Engine開発環境を構築してHello worldする。

投稿日: 2011年9月16日作成者: hirohi

職場でGAE(Google App Engine) が流行ってきているようなので流行りにのってHello Worldしてみることにした。

まずは先日アンインストールしたMacPortsをインストールする。
ソースファイルからインストールすると面倒なので、バイナリからインストールする。

MacPortsの最新版はここでチェック

SnowLoepardなので、MacPorts-2.0.3-10.6-SnowLeopard.dmgをダウンロードしてインストーラを起動してインストールする。

MacPortsは、MacPorts自身を含めたファイルをすべて/opt/local以下にインストールする。なので、各種パスを/opt/localに通しておく必要がある。そこで、自分のシェルの環境変数を以下のように設定しておく。

zshは.zsh_profile、bashは.bash_profile に下記を追記する。
環境によっては.zshrc、.bashrcだったりする。

% vi .zsh_profile
export PATH=/opt/local/bin:/opt/local/sbin/:$PATH
export MANPATH=/opt/local/man:$MANPATH

% source .zsh_profile

MacPortsをアップデートする。

基本的にMacPortsは /opt/local 以下にインストールされるので、sudoを使って実行する。

% sudo port -d selfupdate
% sudo port -d sync

Pythonをインストールする。

GAEはPython2.5を使用するため、2.5をまるっとMacPortsでインストールする。

% sudo port install python25
% sudo port install py25-hashlib
% sudo port install py25-socket-ssl
% sudo port install py25-pil

pythonのパスを確認する。

% which python
/usr/bin/python

% python
Python 2.6

Python2.6やPython2.7ではGAEは動かないので、MacPortsでインストールしたPython2.5にシンボリックリンクを張る。

% sudo mv /usr/bin/python /usr/bin/python_bk
% sudo ln -s /opt/local/bin/python2.5 /usr/bin/python

再度Pythonのパスを確認する。

% ls -l /usr/bin/python
lrwxr-xr-x  1 root  wheel  24  9 16 10:44 /usr/bin/python -> /opt/local/bin/python2.5

% python
Python 2.5.6

Google App Engine をインストールする。
GAEのアカウント登録をすませてから下記からMac用のSDKをダウンロードする。
GoogleAppEngineLauncher-1.5.4.dmg

インストーラを起動しインストールを実行。
インストールが完了したらGoogle App Engine Launcherを起動して新規アプリケーションを作成。

Runして無事に動けばOK！あとは開発するのみ！

カテゴリー: Google App Engine, Python | コメントをどうぞ

MacPortsをアンインストールし、Homebrewをインストールする

投稿日: 2011年9月3日作成者: hirohi

MacPortsよりHomebrewの方がおすすめということで、MacPortsをアンインストールし、Homebrewをインストールする。

下記サイトを参考にします。
http://tukaikta.blog135.fc2.com/blog-entry-183.html

MacPortsのアンインストール

MacPortsと不要なアカウントを削除する。

% sudo port -f uninstall installed
% sudo dscl . -delete /Users/macports
% sudo dscl . -delete /Groups/macports

Homebrewをインストールする

% ruby -e "$(curl -fsSL https://gist.github.com/raw/323731/install_homebrew.rb)"

Homebrewをアンインストールする順序も書いておく

$ cd `brew --prefix`
$ rm -rf Cellar
$ brew prune
$ rm `git ls-files`
$ rmdir Library/Homebrew Library/Aliases Library/Formula Library/Contributions
$ rm -rf .git
$ rm -rf ~/Library/Caches/Homebrew

基本的なコマンドは下記の通り

コマンド	説明
$ brew update	Homebrew本体をアップグレードします。
$ brew install パッケージ名	指定したパッケージが入っていなければインストールを。最新版でないものに対してはアップグレードを実施します。
$ brew uninstall パッケージ名 $ brew remove パッケージ名 $ brew rm パッケージ名	指定したパッケージをアンインストールします。
$ brew outdated	導入済みのパッケージで、最新版ではないものを表示します。
$ brew upgrade	最新版ではないパッケージをまとめてアップグレードします。
$ brew search パッケージ名 $ brew -S パッケージ名	インストール可能なパッケージを検索します。
$ brew options パッケージ名	インストール時に指定できるオプションを表示します。
$ brew –help $ brew -h	ヘルプを表示します。
$ brew cleanup	古いバージョンのパッケージを削除します。
$ brew cleanup パッケージ名	指定したパッケージのみ古いバージョンを削除します。
$ brew -v	Homebrewのバージョンを表示します。

カテゴリー: MacOSX | コメントをどうぞ

iMac SnowLeopard にwgetをインストールする

投稿日: 2011年9月3日作成者: hirohi

MacOSX SnowLeopardちゃん、Curlちゃんは入ってるんだけど、wgetちゃんが入ってない事実…。

ということでwgetをインストールします。

GNUからwgetの最新版をダウンロードします。
wget最新版はこちらからチェック

$ sudo su -
# curl -O ftp://ftp.gnu.org/pub/gnu/wget/wget-1.9.1.tar.gz
# tar xvfz wget-1.9.1.tar.gz
# cd wget-1.9.1
# ./configure
# make
# make install

これでwgetちゃんが使えるようになりました！

カテゴリー: Linux | コメントをどうぞ

Titanium Studio でデスクトップアプリ開発に入門してみた

投稿日: 2011年9月2日作成者: hirohi

こんぬつわ。ブログを放置してから早半年弱…。完全に放置してしまいました。
技術的にはいろんなことできるようになったのですが全然メモってませんでした…。
反省してます…。

ということできちんとブログを買いていこうかなと思い、最近ちょっとやってみようと思ったのが、Titanium Studio によるデスクトップアプリケーション開発！
なんと、みんなが大好きなHTML5+CSS3+JavaScript+Ruby+Python+PHP と、最近流行のweb系言語がだいたい使えちゃいます。Adobe AIRよりもこっちの方が良いんじゃないかって思ってみたり。

Titanium Studio は、Aptanaを買収し、AptanaとTitaniumががっちゃんこしたもの（？）みたいです。
Titanium はiPhone, Android でクロスデバイス開発をするための開発ツールで、iPhoneアプリやAndroidアプリを開発したことある人は知っているであろうと思うのでここでは割愛します。

それでは早速Titanium Studio でHello Worldしてみます。

まずはTitanium Studioをユーザー登録してダウンロードします。
http://www.appcelerator.com/

Titanium Studio を起動し、プロジェクトを新規でつくる

Titanium Desctop Project をつくる

Project Name を設定し、使用言語にRuby, Python, PHP をチェック

アプリケーション情報を設定する

ソースコードを書くために /Resources/index.html を開く

ソースコードを書く

<!Doctype html>
<html lang="ja">
	<head>
		<meta charset="utf-8">
		<title>test</title>
		<style type="text/css">
			body {
				background: #fff;
			}
		</style>
	</head>
	<body>
		<h1>test</h1>
		<script type="text/python">
			def pyFunc(str):
				document.write(str)
			pyFunc("python")
		</script>
		<script type="text/ruby">
			def rbFunc(str)
				pyFunc(str)
			end
			rbFunc("ruby")
		</script>
	</body>
</html>

アプリを実行してみる

デスクトップアプリができちゃった！

Pythonの中にRubyを書いたりJS書いたり何だか何でもアリのカオス状態ですが、面白いことできそうな予感がぷんぷんします。こういうの嫌いじゃない。

カテゴリー: (X)HTML+CSS, Ajax, Aptana, JavaScript, PHP, Python, Ruby, Titanium | コメントをどうぞ

配列を拡張してみた。Array.shuffle() Array.clone() – JavaScript

投稿日: 2011年4月26日作成者: hirohi

こんにちは。最近あまり投稿していませんでした。

JavaScriptを拡張するのはあまり気が進まないのですが、ネイティブ実装がイケてない部分が多いので、もうがっつり拡張しまくったライブラリつくっても良いんじゃないかくらいに思っている今日この頃でございます。

今回は超絶によく使うArrayオブジェクト(配列)の拡張を書いておきます。

まずは配列のシャッフル。

Array.shuffle()

見たまんまです。このまま使います。ネイティブ実装にはないのでprototypeを使って拡張します。
アルゴリズムはシャッフル最速(？)と言われているFisher–Yatesアルゴリズムを使います。

Fisher–Yatesアルゴリズムについて

JavaScriptの実装は下記の通り

Array.prototype.shuffle = function() {
	var i = this.length;
	while(i){
		var j = Math.floor(Math.random()*i);
		var t = this[--i];
		this[i] = this[j];
		this[j] = t;
	}
	return this;
}

これで簡単に配列の中身をシャッフルできます。

次に配列のコピー(クローン)をつくるためのメソッド。

Array.clone()

JavaScriptの配列は別変数に代入した場合、それはコピーになるのではなく単純に元の配列オブジェクトを参照するだけになるので、コピーをつくりたい場合はいちいちループ文の中でpushしたりしなきゃならんのでめんどくさいのです。
それを一発で解決する方法が、Array.clone() をつくっちゃえば簡単だよねってことなのです。

実装はこちら

Array.prototype.clone = function(){
	return Array.apply(null,this);
}

これだけです。とてもシンプル。

Array.shuffle() と Array.clone() を両方の使い方はこちら。

//配列hogeを生成
var hoge = Array(1,2,3,4,5);
//hogeのクローンfooを生成
var foo = hoge.clone();
//fooをシャッフルする
foo.shuffle();

console.log( hoge )     // [1,2,3,4,5]
console.log( foo )       // [2,4,1,3,5]

この2つとても便利ちゃんなのです。
JavaScriptはどんどん拡張しちゃえば良いと思います。

カテゴリー: JavaScript | 1件のコメント

Powershell でのシェルスクリプティング

投稿日: 2011年3月8日作成者: hirohi

連投です。
普段はLinux上でシェルスクリプティングをすることはありますが、あまりWindows上でやることがないのでちょっとやってみました。

MS-DOS使ってバッチファイル書いたりすることはありますが、コマンドも少なくいまいち使いにくい感が否めません。Linuxに慣れてる身としては、Powershellを使ってパワフルなシェルスクリプティングをやっちゃおうかと思います。

まずはPowershellがインストールされているかどうか確認しなくてはいけませんが、ここは割愛します。

1）MS-DOSプロンプトを開いて、Powershell を起動します。

C:\Documents and Settings\ooiwa> powershell
Windows Powershell

2) Set-ExecutionPolicyコマンドを実行してps1ファイルをまま実行できるようにします。

PS C:\Documents and Settings\ooiwa> Set-ExecutionPolicy RemoteSigned
PS C:\Documents and Settings\ooiwa> Get-ExecutionPolicy
RemoteSigned
PS C:\Documents and Settings\ooiwa>

3)テキストエディタでシェルスクリプトを書く。例としてtest.ps1 として保存して、シェルスクリプトを実行

PS C:\Documents and Settings\ooiwa> notepad
PS C:\Documents and Settings\ooiwa> .\test.ps1
test
PS C:\Documents and Settings\ooiwa>

割と簡単にPowershellスクリプトが書けるので、GUIでのめんどくさい作業はどんどんシェルスクリプト書いて実行してしまえば良いと思う。

カテゴリー: Powershell | コメントをどうぞ

コマンドプロンプトで.svnディレクトリを再帰的に削除