ひょんなことからjQueryの視覚系プラグインを2つ書きました。
ソースというかデモサイトまるごとgithubにあります。
jquery.limp.js
要素をfixed配置に変えて縦スクロールに対して少し遅れてついてくるというものです。
いわゆるパララックス効果的に使えるんじゃないかと思います。
limpという名前はlimpbizkitからとりました。僕の青春です。
こちらもデモサイトまるごとgithubにあります。
jquery.airy.js
要素をabsoluteで配置しておくとフワフワとその場を浮遊するというものです。
こちらは使い道が難しいですね。
両者ともcoffeescriptで書いてsinatraでサーブしてるのですが、素のjavascript書くのしんどいですね最近……
まずはFormulaを検索
$ brew search apc josegonzalez/php/php53-apc josegonzalez/php/php54-apc
２つありました。 phpはv5.3.10なのでphp53-apcをインストールします。
リポジトリを追加
$ brew tap josegonzalez/php Cloning into '/usr/local/Library/Taps/josegonzalez-php'... remote: Counting objects: 1011, done. remote: Compressing objects: 100% (491/491), done. remote: Total 1011 (delta 480), reused 929 (delta 416) Receiving objects: 100% (1011/1011), 140.43 KiB | 109 KiB/s, done. Resolving deltas: 100% (480/480), done. Tapped 48 formula
インストール実行
$ brew install php53-apc
......
To finish installing php53-apc:
* Add the following lines to /usr/local/etc/php.ini:
[apc]
extension="/usr/local/Cellar/php53-apc/3.1.10/apc.so"
apc.enabled=1
apc.shm_segments=1
apc.shm_size=64M
apc.ttl=7200
apc.user_ttl=7200
apc.num_files_hint=1024
apc.mmap_file_mask=/tmp/apc.XXXXXX
apc.enable_cli=1
* Restart your webserver.
* Write a PHP page that calls "phpinfo();"
* Load it in a browser and look for the info on the apc module.
* If you see it, you have been successful!
* You can copy "/usr/local/Cellar/php53-apc/3.1.10/apc.php" to any site to see APC's usage.
......
指示通りphp.iniに設定を追加して、php-fpmを再起動 （これがいまいちまだよくわかってない…）
$ ps ax | grep php 493 ?? Ss 0:00.17 /usr/local/Cellar/php/5.3.10/sbin/php-fpm 494 ?? S 0:01.15 /usr/local/Cellar/php/5.3.10/sbin/php-fpm 495 ?? S 0:01.37 /usr/local/Cellar/php/5.3.10/sbin/php-fpm $ kill -TERM 493 $ php-fpm
↑とりあえずkillしてから実行してみてる phpinfo()で確認OK！
このギャラリーの作品はどれもレベル高くてすごい
Chrome Experiments - WebGL Experiments
見てたらWebGLをかじってみたくなったのでThree.jsというのを試してみた。
リポジトリを落としてきてsinatraに乗っけてherokuにアップしときました。
Three.js Learning
トップページはexamplesの一覧です。
とりあえず本家のGet Starttingで試してみたけど、動かないとつまらないのでマウスの動きに反応するようにした。
うーん道のり長そうだなぁ
iPhoneだと動かないのかな？
railsのform_forヘルパーは以下のように使いますよね
= form_for(@post) do |f| = f.label :title = f.text_field :title
こう書いておけば出力されるhtmlは
大体こんな感じになるかと。
でrailsの便利なところはform_forに渡してるモデルオブジェクトが、空なのかDBのレコードから生成されたのかを判別して、actionの属性値をよしなに変更してくれるところですよね。
つまりroutesに
resouces :posts do end
と書いてあれば 新規作成時は action="/posts" だし編集画面では action="/posts/1" になると。
でもこれが namespace 付きのroutesだとうまく行かなくて困りました。
管理画面を作る場合とかだと /admin/posts にしたくて
namespace :admin do resources :posts do end end
と定義しておいて、form_for で生成したフォームを上記のままにしておくと、undefined method `posts_path' と怒られてしまう。 一瞬下記のやり方？とか思ったんですがrailsに限ってそんなことないよね…
= form_for params[:action] == 'new' ? admin_posts_path : edit_admin_post_path(@post) do |f| = f.label :title = f.text_field :title
ぐぐったら出てきた。
Rails Routes Namespaces and form_for - Stack Overflow= form_for [:admin, @post] do |f|...
だってさ！
配列で指定するんですか。なるほどこれで admin_posts_path と edit_admin_post_path を切り替えてくれるんですね。
ということは…やってみた。
namespace :hoge do
namespace :fuga do
namespace :foo do
namespace :bar do
resources :hellos do
end
end
end
end
end
= form_for [:hoge, :fuga, :foo, :bar, @hello], do |f| = f.label :name = f.text_field :name
成功＼(^o^)／
rails編は以前書いたのでsinatraでやってみる
用途としてはDBとかいらないスタティックなサイトの構築で、でもhtml、css、jsを生で書くのとか耐えられない。phpはマジ勘弁みたいなときにこうしてますよって感じのことを書きます。
（bundlerの使い方ってゆうかrubyでのweb制作全般って感じですね…）
まず適当な場所にプロジェクトのディレクトリを作ります。
hogeとかもアレなんでポートフォリオにしときます。
$ cd ~/Web $ mkdir portfolio $ cd portfolio
でプロジェクトのルートでGemfileをつくる
$ bundle init Writing new Gemfile to /Users/kozo/Web/portfolio/Gemfile
中身はこんな感じだから...
$ vim Gemfile # A sample Gemfile source "https://rubygems.org" # gem "rails"
以下に書き換えます
source "https://rubygems.org" gem "sinatra" gem "sass" gem "haml" gem "coffee-script" gem "shotgun"
自分はnode.jsを入れてるんでアレですが、環境によってはjavascript実行環境が無いと怒られるかもしれないんで、そんときは以下のgemを足してみてください。
gem 'therubyracer'
でgemをインストールします。
bundle install --path vendor/bundle --without production Fetching gem metadata from https://rubygems.org/..... Installing coffee-script-source (1.3.1) Installing multi_json (1.3.2) Installing execjs (1.3.0) Installing coffee-script (2.2.0) Installing haml (3.1.4) Installing rack (1.4.1) Installing rack-protection (1.2.0) Installing sass (3.1.16) Installing tilt (1.3.3) Installing sinatra (1.3.2) ....
よしこれでgemが揃いました。
さらに作業環境を整えます。
sinatraを動かすアプリが必要なので app.rb と config.ru
sassやhamlを入れておくviewsディレクトリ、
ドキュメントルートになるpublicディレクトリをつくります。
$ touch app.rb $ touch config.ru $ mkdir views $ mkdir public
アプリケーションのコードはこんな感じです
$ vim app.rb
require "sinatra/base"
require "sass"
require "haml"
require "coffee-script"
module Portfolio
class App < Sinatra::Base
get '/' do
'hello'
end
end
end
$ vim config.ru require "./app" run Portfolio::App
でアプリがちゃんと動くかどうか確認してみる
shotgunを入れておいたので
$ bundle exec shotgun == Shotgun/WEBrick on http://127.0.0.1:9393/ [2012-04-26 23:49:20] INFO WEBrick 1.3.1 [2012-04-26 23:49:20] INFO ruby 1.9.2 (2011-07-09) [x86_64-darwin11.2.0] [2012-04-26 23:49:20] INFO WEBrick::HTTPServer#start: pid=457 port=9393
localhost:9393にアクセスして hello が表示されればOKです
そしたらこっからガシガシコード書いていくんですが、shotgun使ってるのでapp.rbを編集してもサーバの再起動が必要ありません。
home、about、galleryの３ページと仮定して以下のように書き換えました
$ vim app.rb
module Portfolio
class App < Sinatra::Base
before do
@site_name = 'My Portfolio'
@nav = ['home', 'about', 'gallery']
end
get '/' do
haml :index
end
get '/about/?' do
haml :about
end
get '/gallery' do
haml :gallery
end
end
end
before do ... end の中で共通の処理を記述できます。
site_nameとnavを用意しておきました。変数に@をつけておくとインスタンス変数と言ってviewに渡せるようになります。
htmlはhamlで書くので以下のようにします。
$ vim views/index.haml
%h1= @site_name
%nav
%ul
- @nav.each do |n|
%li
%a{href:"/#{n}"}= n
%p welcome to my portfolio site
でもこれだとheadとかないので layout を作成します
$ vim views/layout.haml
!!! 5
%html
%head
%meta{charset:'utf-8'}
%title= @site_name
%body
= yield
yieldの部分に各ページの内容が入ります。
次はsassというかscssを使ってみます。
まずはapp.rbを編集して、
$ vim app.rb get '/stylesheets/base.css' do scss :base end
galleryの下に追記しておきました。
ここまで出来たら後はviews内にscssファイルを作って作業していくだけです。
簡単ですね！
ちなみにrubyのシンボル（:で始まる文字列）は " で囲めば / とかも使えるので
views内でファイルが平置きになってるのが嫌な人は views/haml や views/scss を作っておいて
app.rbで
haml :"haml/index"
と指定すればちゃんと呼び出せますよ！
sinatraとかhamlとかscssとかcoffeescriptの詳しい使い方はドキュメントを読もー
やっと芽が出ました！
なんの変化もないプランターを写真撮り続けるのは、マジで精神的にきついなと思ってたんでしばらくお休みしてましたが、やってくれましたよ〜。
植物を育てるってこんなに嬉しいんですね。芽が出た後の育て方も調べよう。
分かりづらいけど、左右二ヶ所に芽がでた…！
