tag:blogger.com,1999:blog-17215603609176921472024-03-13T10:05:49.327+09:00BansystemsBlogおおくぼようすけhttp://www.blogger.com/profile/05046714916828051537noreply@blogger.comBlogger9125tag:blogger.com,1999:blog-1721560360917692147.post-75622685292929970082017-05-12T14:51:00.000+09:002017-05-12T14:51:10.630+09:00Rails5.1でdockerの開発環境を整える<h3>
環境</h3>
<div>
<ul>
<li>ruby 2.4.1</li>
<li>Rails 5.1.0(+Puma)</li>
<li>MySQL 5.7</li>
<li>Wercker CI</li>
<li>RSpec + FactoryGirl + Faker</li>
<li>Rubocop</li>
<li>Brakeman</li>
</ul>
<h4>
Dockerfile</h4>
</div>
<div>
<pre style="background: #f0f0f0; border: 1px dashed #cccccc; color: black; font-family: "arial"; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;">
FROM ruby:2.4.1
ENV APP_ROOT /usr/src/app
ENV ENTRYKIT_VERSION 0.4.0
WORKDIR $APP_ROOT
EXPOSE 3000
## SSLのレポジトリをインストールできるようにします
RUN apt-get update && apt-get install -y apt-transport-https
## yarnのレポジトリをインストールします
RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add -
RUN echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list
## Nodejsのレポジトリをインストールします
RUN curl -sL https://deb.nodesource.com/setup_6.x | bash -
# 依存ライブラリをインストールします
RUN apt-get update && apt-get install -y \
nodejs \
mysql-client \
postgresql-client \
sqlite3 \
yarn \
--no-install-recommends && rm -rf /var/lib/apt/lists/*
# EntryKitのインストール
RUN apt-get install openssl \
&& rm -rf /var/cache/apk/* \
&& wget https://github.com/progrium/entrykit/releases/download/v${ENTRYKIT_VERSION}/entrykit_${ENTRYKIT_VERSION}_Linux_x86_64.tgz \
&& tar -xvzf entrykit_${ENTRYKIT_VERSION}_Linux_x86_64.tgz \
&& rm entrykit_${ENTRYKIT_VERSION}_Linux_x86_64.tgz \
&& mv entrykit /bin/entrykit \
&& chmod +x /bin/entrykit \
&& entrykit --symlink
# Rubyのライブラリをインストール
COPY Gemfile $APP_ROOT
COPY Gemfile.lock $APP_ROOT
RUN bundle install --jobs=4
# レポジトリの内容をコピーしておきます
COPY . $APP_ROOT
# サーバー起動前の処理を定義します
ENTRYPOINT [ \
# 起動前準備スクリプトです。実行権限をつけます。
"prehook", "chmod +x boot.sh", "--", \
# 起動前準備スクリプトを実行します。
"prehook", "bash ./boot.sh", "--"]
</code></pre>
<br />
<h4>
解説</h4>
アプリのルートディレクトリは/usr/src/appにしていますがこれは特に理由はありません。好みでOKです。<br />
<br />
yarnのレポジトリがSSLになっているのですが、使っているイメージruby-2.4.1では下記のエラーが出てインストールできませんでした。<br />
<pre style="background-color: #f7f7f7; border-radius: 3px; border: 0px; box-sizing: inherit; color: #333333; font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 0.8em; line-height: 1.2; overflow-x: auto; padding: 0.6em 1.2em; word-break: break-all; word-wrap: normal;">E: The method driver /usr/lib/apt/methods/https could not be found.</pre>
apt-transport-httpsを入れて解決してあります。<br />
<pre style="background: rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 646.469px;"><code style="word-wrap: normal;">## SSLのレポジトリをインストールできるようにします
RUN apt-get update && apt-get install -y apt-transport-https</code></pre>
<div>
<code style="word-wrap: normal;"><br /></code></div>
更に<a href="http://qiita.com/spesnova/items/bae6406bf69d2dc6f88b">EntryKit</a>を使って、サーバー起動前の処理(boot.sh)に繋いでいます。<br />
<br />
<h4>
boot.sh</h4>
<pre style="background: rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 646.469px;"><code style="word-wrap: normal;">
# Rubyのバージョンを表示します。
ruby -v
# Rubyのライブラリをインストールします。
bundle install -j4
# フロントのライブラリをインストールします。
yarn install --no-optional
# 特定のサーバー・ポートが起動するまで待つスクリプトです。実行権限をつけます。
chmod +x wait-for-it.sh
# MySQL起動を待ちます
./wait-for-it.sh mysql:3306
# DBを更新します。
rake db:create
rake db:migrate
# railsサーバーが起動済だったら殺します
kill -s 9 `pgrep -f 'rails s' `
# pidファイルを消します
rm -f app/tmp/pids/server.pid
</code></pre>
boot.shでは以下を行っています。<br />
<ul>
<li>依存ライブラリの解決</li>
<li>MySQLの起動待ち</li>
<li>DBの更新</li>
<li>rails sの二重起動防止(killspidファイルも消し、)</li>
</ul>
<br />
MySQLの起動待ちには<a href="https://github.com/vishnubob/wait-for-it">wait-for-it</a>を使っています。(rootに配置)<br />
<h4>
docker-compose.yml</h4>
<pre style="background: rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 646.469px;"><code style="word-wrap: normal;">
version: '3'
services:
# Railsサーバー
app:
build: . # Dockerfileを元にビルドします
environment:
RAILS_ENV: development
DATABASE_URL: mysql2://root:pass@mysql:3306
PORT: 3000
ports:
- 3000:3000
volumes:
- .:/usr/src/app
- bundle:/usr/local/bundle
depends_on:
- mysql
command: ["rails", "s", "-b", "0.0.0.0"]
# MySQL
mysql:
image: mysql:5.7.10
environment:
MYSQL_ROOT_PASSWORD: 'pass'
ports:
- 7207:3306
volumes:
- mysql-data:/var/lib/mysql
# グローバルにvolumesを書くとホストボリュームになり、ファイルを永続化できます。
volumes:
mysql-data:
driver: local
bundle:
driver: local
</code></pre>
docker-composeのバージョン3からホストvolume(グローバルにvolumesを書く)を使ってファイルを永続化しています。<br />
これによりbundle installにやり直しが発生しません。MySQLのデータも永続化している為、開発環境のデータが毎回クリアされることもありません。<br />
また、rails5.1からPORT:3000と指定しないとデフォルトの9292ポートでpumaが起動してしまいます。(バグかは追っていません)</div>
<div>
<h4>
config/application.rb</h4>
<pre style="background: rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 646.469px;"><code style="word-wrap: normal;">
require_relative 'boot'
require 'rails/all'
# Require the gems listed in Gemfile, including any gems
# you've limited to :test, :development, or :production.
Bundler.require(*Rails.groups)
module App
class Application < Rails::Application
# Initialize configuration defaults for originally generated Rails version.
config.load_defaults 5.1
# Settings in config/environments/* take precedence over those specified here.
# Application configuration should go into files in config/initializers
# -- all .rb files in that directory are automatically loaded.
config.generators do |g|
g.stylesheets false
g.javascripts false
g.helper false
g.test_framework :rspec, view_specs: false, helper_specs: false, fixture: true
g.template_engine = :slim
end
end
end
</code></pre>
<br />
rails g(enerate) のコマンドの設定を書いています。<br />
<ul>
<li>スタイルシート・JS・ヘルパーの生成を無効に(必要なファイルだけ後で生成します)</li>
<li>テストフレームワークはrspecに</li>
<li>テンプレートエンジンはslimに</li>
</ul>
※RSpecでテストを実行する前に、忘れずに<span style="background-color: #f7f7f7; color: #333333; font-family: "consolas" , "liberation mono" , "menlo" , "courier" , monospace; font-size: 0.8em;">rails generate rspec:install</span>を実行してください。<br />
<h3>
Gemfile</h3>
<pre style="background: rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 646.469px;"><code style="word-wrap: normal;">
source 'https://rubygems.org'
git_source(:github) do |repo_name|
repo_name = "#{repo_name}/#{repo_name}" unless repo_name.include?("/")
"https://github.com/#{repo_name}.git"
end
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.1.0'
# Use mysql2 as the database for Active Record
gem 'mysql2'
# Use Puma as the app server
gem 'puma', '~> 3.7'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# See https://github.com/rails/execjs#readme for more supported runtimes
gem 'therubyracer', platforms: :ruby
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.2'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.5'
# Use Redis adapter to run Action Cable in production
gem 'redis', '~> 3.0'
# Use ActiveModel has_secure_password
gem 'bcrypt', '~> 3.1.7'
# テンプレートエンジンにslimを使います
gem 'slim-rails'
# Use Capistrano for deployment
gem 'capistrano-rails', group: :development
group :development, :test do
# セキュリティチェックのBrakemanを導入
gem 'brakeman', :require => false
# Call 'byebug' anywhere in the code to stop execution and get a debugger console
gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
# Fixtureの代替となるFactoryGirlを導入
gem 'factory_girl_rails'
# テストデータ生成のFakerを導入
gem 'faker'
# Adds Support for RSpec unit testing
gem 'rspec-rails', '~> 3.5'
# Adds support for Capybara system testing and selenium driver
gem 'capybara', '~> 2.13.0'
gem 'selenium-webdriver'
# CSチェック
gem 'rubocop', require: false
end
group :development do
# HTML/ERBからslimに変換します
gem 'html2slim'
gem 'listen', '>= 3.0.5', '< 3.2'
# Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
gem 'spring'
gem 'spring-watcher-listen', '~> 2.0.0'
# Access an IRB console on exception pages or by using <%= console %> anywhere in the code.
gem 'web-console', '>= 3.3.0'
end
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
</code></pre>
<br />
Gemfileは日本語注釈がついたものを追加したのと、redis, bcryptあたりは後々使いそうだったのでコメントを外しています。<br />
<h4>
開発運用</h4>
docker-compose up -d(初回のみ)<br />
docker-compose logs(うまく動かない時のログを見る)</div>
<div>
docker-compose restart(gem等がうまくrailsサーバーに伝わらない時実行)</div>
<div>
docker-compose down(コンテナを落とす)</div>
<div>
docker-compose rm(イメージを消す)</div>
<div>
docker-compose exec app bash (擬似的にシェルログインできます。アプリサーバーでコマンド実行 ※これで普通にrailsコマンドが実行できるようになります)</div>
<h4>
wercker.yml</h4>
<div>
<pre style="background: rgb(240, 240, 240); border: 1px dashed rgb(204, 204, 204); font-family: arial; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 646.469px;"><code style="word-wrap: normal;">
# 下記を参考に作成しています
# http://qiita.com/masashi-sutou/items/d0fcec3a14c1c89ae702
# This references the default Ruby container from
# the Docker Hub.
# https://registry.hub.docker.com/_/ruby/
# If you want to use a specific version you would use a tag:
# ruby:2.2.2
box: ruby:2.4.1
# You can also use services such as databases. Read more on our dev center:
# http://devcenter.wercker.com/docs/services/index.html
# services:
# - postgres
# http://devcenter.wercker.com/docs/services/postgresql.html
# - mongo
# http://devcenter.wercker.com/docs/services/mongodb.html
services:
- id: mysql
env:
MYSQL_ROOT_PASSWORD: root_password
MYSQL_USER: test_user
MYSQL_PASSWORD: test_password
MYSQL_DATABASE: test_database
# This is the build pipeline. Pipelines are the core of wercker
# Read more about pipelines on our dev center
# http://devcenter.wercker.com/docs/pipelines/index.html
build:
# Steps make up the actions in your pipeline
# Read more about steps on our dev center:
# http://devcenter.wercker.com/docs/steps/index.html
steps:
- install-packages:
name: Install mysql client
packages: mysql-client
- rails-database-yml:
service: mysql-docker
- bundle-install:
jobs: 4
- script:
name: Run RSpec
code: bundle exec rspec
- script:
name: Run Brakeman
code: bundle exec brakeman -qz
</code></pre>
<br />
mysql clientをインストールする前にbundle installすると、bundle install時にリンクに失敗しているのか、libmysqlclientが見つからないエラーが出ます。<br />
bundle installの結果は永続化されている為、2回目以降のビルドが高速です。<br />
<br />
開発が進んだ後で、アプリのビルドイメージを作ってレポジトリに上げたものを使うようにwerckerの設定を修正する予定です。<br />
<h4>
参考記事・サイト</h4>
</div>
<div>
<ul>
<li>Dockerで起動したMySQLのデータを永続化する - ログってなんぼ <a href="http://okisanjp.hatenablog.jp/entry/docker_data_volume_container">http://okisanjp.hatenablog.jp/entry/docker_data_volume_container</a></li>
<li>開発しやすいRails on Docker環境の作り方 - Qiita <a href="http://qiita.com/joker1007/items/9f54e763ae640f757cfb">http://qiita.com/joker1007/items/9f54e763ae640f757cfb</a></li>
<li>Debian に Docker をインストールしたときのメモ - Qiita <a href="http://qiita.com/deep_tkkn/items/38c90cc7ae8ae749a6ae">http://qiita.com/deep_tkkn/items/38c90cc7ae8ae749a6ae</a></li>
<li>Entrykit のすすめ - Qiita <a href="http://qiita.com/spesnova/items/bae6406bf69d2dc6f88b">http://qiita.com/spesnova/items/bae6406bf69d2dc6f88b</a></li>
<li>アプリのサーバーサイドをRailsで構築する - Qiita <a href="http://qiita.com/masashi-sutou/items/d0fcec3a14c1c89ae702">http://qiita.com/masashi-sutou/items/d0fcec3a14c1c89ae702</a></li>
<li>rspecを実行した時にcannot load such file -- spec_helper (LoadError)と言われる解決方法 - Qiita <a href="http://qiita.com/pugiemonn/items/55dd0a07c262c2010e2c">http://qiita.com/pugiemonn/items/55dd0a07c262c2010e2c</a></li>
</ul>
</div>
Anonymoushttp://www.blogger.com/profile/12275149563969967731noreply@blogger.com0tag:blogger.com,1999:blog-1721560360917692147.post-9495425319389546542016-08-27T19:31:00.001+09:002016-08-27T19:31:10.363+09:00Vagrant+ChefでNodejsをバージョン指定していれるNodejsの案件対応が発生した為、NodejsをVagrant+Chef環境で動かそうとしました。<br />
誰かがまとめてくれているだろうと調べましたが、意外にも情報がほとんどありませんでした。<br />
調べた結果をご紹介します。<br />
<br />
<h3>
前提</h3>
<ul>
<li>CentOS7</li>
<ul>
<li>ubuntuだとバイナリのインストールがうまくいきませんでした</li>
<li>6でも問題ないとは思いますが検証していません</li>
</ul>
<li>cookbook</li>
<ul>
<li><a href="https://github.com/redguide/nodejs">https://github.com/redguide/nodejs</a></li>
</ul>
</ul>
<h3>
Gemfile</h3>
<div>
<pre style="background: #f0f0f0; border: 1px dashed #cccccc; color: black; font-family: "arial"; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> source 'https://rubygems.org'
gem 'berkshelf'
gem 'knife-solo' </code></pre>
</div>
<h3>
Berksfile</h3>
<pre style="background: #f0f0f0; border: 1px dashed #cccccc; color: black; font-family: "arial"; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> source "https://supermarket.chef.io"
cookbook "nodejs"
</code></pre>
<h3>
<br /></h3>
bundlerをインストール(gem install bunbler)をし、<br />
下記コマンドでcookbookをインストールします<br />
<br />
<blockquote class="tr_bq">
<i>$ bundle exec berks vendor ./cookbooks<br />$ bundle exec knife cookbook create base -o site-cookbooks</i></blockquote>
これでcookboks以下に外部のcookbook、site-cookbooksに実行するcookbookの用意ができました。<br />
<br />
レシピは `site-cookbooks/base/recipes/default.rb` に作成します.<br />
<br />
<pre style="background: #f0f0f0; border: 1px dashed #cccccc; color: black; font-family: "arial"; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> include_recipe "nodejs"
</code></pre>
<br />
上記でnodejsのレシピを読み込んで使っています<br />
<br />
バージョン指定等の属性は以下のファイルに書きます<br />
`site-cookbooks/base/attributes/default.rb`<br />
<br />
<pre style="background: #f0f0f0; border: 1px dashed #cccccc; color: black; font-family: "arial"; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> node.default['nodejs']['install_method'] = 'binary'
node.default['nodejs']['version'] = '5.9.0'
node.default['nodejs']['binary']['checksum'] = '99c4136cf61761fac5ac57f80544140a3793b63e00a65d4a0e528c9db328bf40'
</code></pre>
<br />
checksumやバージョンは以下でリストを見れます<br />
https://nodejs.org/dist/<br />
今回はCentOS 64bit、4.4.7をインストールしたいので次のバイナリが該当<br />
<a href="https://nodejs.org/dist/v4.4.7/node-v4.4.7-linux-x64.tar.gz">https://nodejs.org/dist/v4.4.7/node-v4.4.7-linux-x64.tar.gz</a><br />
チェックサムは同じディレクトリの<a href="https://nodejs.org/dist/v4.4.7/SHASUMS256.txt">SHASUMS256.txt</a>を確認する<br />
<a href="https://nodejs.org/dist/v4.4.7/">https://nodejs.org/dist/v4.4.7/</a><br />
<br />
おまけ<br />
<h3>
Vagrantfile</h3>
<div>
<br /></div>
<pre style="background: #f0f0f0; border: 1px dashed #cccccc; color: black; font-family: "arial"; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> # -*- mode: ruby -*-
# vi: set ft=ruby :
# All Vagrant configuration is done below. The "2" in Vagrant.configure
# configures the configuration version (we support older styles for
# backwards compatibility). Please don't change it unless you know what
# you're doing.
Vagrant.configure("2") do |config|
# The most common configuration options are documented and commented below.
# For a complete reference, please see the online documentation at
# https://docs.vagrantup.com.
# Every Vagrant development environment requires a box. You can search for
# boxes at https://atlas.hashicorp.com/search.
config.vm.box = "centos/7"
# Disable automatic box update checking. If you disable this, then
# boxes will only be checked for updates when the user runs
# `vagrant box outdated`. This is not recommended.
# config.vm.box_check_update = false
# Create a forwarded port mapping which allows access to a specific port
# within the machine from a port on the host machine. In the example below,
# accessing "localhost:8080" will access port 80 on the guest machine.
# config.vm.network "forwarded_port", guest: 80, host: 8080
# Create a private network, which allows host-only access to the machine
# using a specific IP.
# config.vm.network "private_network", ip: "192.168.33.10"
config.vm.network :private_network, ip: "192.168.240.100"
# config.nfs.map_uid = 500
config.vm.synced_folder ".", "/host_mount",
id: "vagrant-root", :nfs => true
config.bindfs.bind_folder "/host_mount","/srv", :owner => "vagrant", :group => "vagrant", :'create-as-user' => true, :perms => "u=rwx:g=rwx:o=rwx", :'create-with-perms' => "u=rwx:g=rwx:o=rwx", :'chown-ignore' => true, :'chgrp-ignore' => true, :'chmod-ignore' => true
## provision等の前に共有ディレクトリを解除してキャッシュが使われることを防ぐ
config.trigger.before [:reload, :up], stdout: true do
run "rm -f .vagrant/machines/default/virtualbox/synced_folders"
end
config.vm.provision :chef_solo do |chef|
chef.cookbooks_path = ["./cookbooks", "./site-cookbooks"]
chef.json = {
}
chef.run_list = %w[
recipe[base]
]
end
end
</code></pre>
<br />
<br />Anonymoushttp://www.blogger.com/profile/12275149563969967731noreply@blogger.com0tag:blogger.com,1999:blog-1721560360917692147.post-43080923669885623062016-04-30T15:16:00.001+09:002016-04-30T15:16:10.770+09:00[iOS] NCMBとFacebookSDKの競合の解決ニフティクラウド mobile backend(NCMB)を使ってiOSアプリを開発しています。<br />
NCMBのライブラリとFacebookSDKの一部のライブラリが、CocoaPodsのuse_frameworks!を使っている場合うまく動作しなかったので、その解決をしました。<br />
経緯と解決方法、ライブラリとサンプルアプリ等をまとめてqiitaに投稿しました。<br />
<br />
NCMBでPodのuse_frameworks!有効時にFacebookSDKが入れられないことを解決した<br />
<a href="http://qiita.com/hiromi2424@github/items/01bd4530c176fbe2db2e">http://qiita.com/hiromi2424@github/items/01bd4530c176fbe2db2e</a><br />
<br />
NCMBを使ってiOSアプリ開発をする場合は是非参考にしてみてください。Anonymoushttp://www.blogger.com/profile/12275149563969967731noreply@blogger.com0tag:blogger.com,1999:blog-1721560360917692147.post-1200588558213255402015-09-15T08:53:00.001+09:002015-09-15T13:34:51.528+09:00執筆しました。僭越ながら執筆させて頂きました。
これからWEBアプリについて勉強する方や始めて間もない方へ特におすすめです。
<br />
<iframe frameborder="0" marginheight="0" marginwidth="0" scrolling="no" src="http://rcm-fe.amazon-adsystem.com/e/cm?t=bansystemscom-22&o=9&p=8&l=as1&asins=4798140880&ref=qf_sp_asin_til&fc1=000000&IS2=1&lt1=_blank&m=amazon&lc1=0000FF&bc1=000000&bg1=FFFFFF&f=ifr" style="height: 240px; width: 120px;"></iframe>
おおくぼようすけhttp://www.blogger.com/profile/05046714916828051537noreply@blogger.com0tag:blogger.com,1999:blog-1721560360917692147.post-54623914039038458932013-04-25T06:42:00.000+09:002013-06-04T06:43:04.148+09:002013/04/25 CakePHP講師情報<br />
2013/04/25(木)に株式会社インテリジェンス様主催でCakePHP勉強会がマルチメディアスクールWAVE様にて行われました。<br />
<br />
その際に講師をやらさせて頂きましたのでご報告させて頂きます。<br />
<br />
<a href="http://atnd.org/event/inte4">http://atnd.org/event/inte4</a><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmZwOIlIGKMaLfm9wNuQJUFhrL-FgmTo3XY0N7Vvlsv1wVirdPWapW-2QC1nm5L-g3mSvnUY2SDM-N0dipqTJf0kIekUQBLjTcRAtTCbfxTgpmInB2xEdP74WBTe0yhIhg5ORQyHKEeN6t/s1600/image-20130604-061546.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmZwOIlIGKMaLfm9wNuQJUFhrL-FgmTo3XY0N7Vvlsv1wVirdPWapW-2QC1nm5L-g3mSvnUY2SDM-N0dipqTJf0kIekUQBLjTcRAtTCbfxTgpmInB2xEdP74WBTe0yhIhg5ORQyHKEeN6t/s640/image-20130604-061546.png" width="490" /></a></div>
<br />
おおくぼようすけhttp://www.blogger.com/profile/05046714916828051537noreply@blogger.com0tag:blogger.com,1999:blog-1721560360917692147.post-3840445673927800252013-03-29T23:30:00.000+09:002013-06-04T06:39:54.750+09:002013/03/29 CakePHP講師情報<br />
2013/03/29(金)にマルチメディアスクールWAVE様にてCakePHPハンズオンが行われました。<br />
<br />
その際に講師をやらさせて頂きましたのでご報告させて頂きます。<br />
<br />
<a href="http://atnd.org/events/37963">http://atnd.org/events/37963</a><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZCoJLwy5v4yQrD26ccckQ-DtRvWZ-ToBdzn2UssPk1CfS_axMh6tZUNifsGNZZUrkft_JsImJtmy4xooSvBQj_WsAKsS_bieGlJjZXDOo2-cr8GTi4UAFTpVfATS2XgWqDab1eJwJRPT_/s1600/image-20130604-063455.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZCoJLwy5v4yQrD26ccckQ-DtRvWZ-ToBdzn2UssPk1CfS_axMh6tZUNifsGNZZUrkft_JsImJtmy4xooSvBQj_WsAKsS_bieGlJjZXDOo2-cr8GTi4UAFTpVfATS2XgWqDab1eJwJRPT_/s640/image-20130604-063455.png" width="607" /></a></div>
<br />
おおくぼようすけhttp://www.blogger.com/profile/05046714916828051537noreply@blogger.com0tag:blogger.com,1999:blog-1721560360917692147.post-67279741049609887732013-03-27T23:30:00.000+09:002013-06-04T06:34:37.860+09:002013/03/27 TwitterBootstrapで覚えるHTML5とjQuery<br />
2013/03/27(水)に株式会社インテリジェンス様主催で勉強会を行いました。<br />
<br />
その際に講師をやらさせて頂きましたのでご報告させて頂きます。<br />
<br />
<a href="http://atnd.org/event/inte3">http://atnd.org/event/inte3</a><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNDWPFPgs4lLG_PH2-CdQTXVM0x7-bfNfqhWIGEKSDZZZzMvVytUVaXE30V1-49IlNjmQCQDTxhdAKK4-kWB9oJnUk_TKy9qX5gZCV6_p_NDa7gzdOVfzGcTokU3QzhIREihDTtCH0b18q/s1600/image-20130604-061526.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNDWPFPgs4lLG_PH2-CdQTXVM0x7-bfNfqhWIGEKSDZZZzMvVytUVaXE30V1-49IlNjmQCQDTxhdAKK4-kWB9oJnUk_TKy9qX5gZCV6_p_NDa7gzdOVfzGcTokU3QzhIREihDTtCH0b18q/s640/image-20130604-061526.png" width="430" /></a></div>
<br />
おおくぼようすけhttp://www.blogger.com/profile/05046714916828051537noreply@blogger.com0tag:blogger.com,1999:blog-1721560360917692147.post-87293206881641539642013-02-18T23:30:00.000+09:002013-06-04T06:29:16.540+09:002013/02/18 CakePHP講師情報2013/02/18(月)に株式会社インテリジェンス様主催でCakePHP勉強会がマルチメディアスクールWAVE様にて行われました。<br />
<br />
その際に講師をやらさせて頂きましたのでご報告させて頂きます。<br />
<br />
<a href="http://atnd.org/event/inte">http://atnd.org/event/inte</a><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU49lhCb0_4kEfULDiazUwlIJxZPa1UFBNhO2AQz4A5rK7VFKlS4A78QaI4eQBpZPBkEBur1Inbxe_19BH30dx3zgI9h3WUiBlvZHIsuLoXLVDs6L-T58n94mm4H5XzdJOg325TSx8-VSQ/s1600/image-20130604-061449.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU49lhCb0_4kEfULDiazUwlIJxZPa1UFBNhO2AQz4A5rK7VFKlS4A78QaI4eQBpZPBkEBur1Inbxe_19BH30dx3zgI9h3WUiBlvZHIsuLoXLVDs6L-T58n94mm4H5XzdJOg325TSx8-VSQ/s640/image-20130604-061449.png" width="430" /></a></div>
<br />おおくぼようすけhttp://www.blogger.com/profile/05046714916828051537noreply@blogger.com0tag:blogger.com,1999:blog-1721560360917692147.post-56969802313442506992012-12-19T23:18:00.001+09:002013-05-23T15:48:10.616+09:00「Chosen + Search + Collectionable」の3つのプラグインの組み合わせ<span style="font-family: Arial, Helvetica, sans-serif;"><a href="http://www.adventar.org/calendars/40"><span style="color: blue;">CakePHP Advent Calendar 2012</span></a> </span><span style="font-family: Arial, Helvetica, sans-serif;">の19日目のを担当します。</span><a href="https://twitter.com/konsan" style="font-family: Arial, Helvetica, sans-serif;" target="_blank"><span style="color: blue;">@konsan</span></a><span style="font-family: Arial, Helvetica, sans-serif;">です。 前日の18日目は</span><a href="http://www.adventar.org/users/410" style="font-family: Arial, Helvetica, sans-serif;">Kaz Watanabe</a><span style="font-family: Arial, Helvetica, sans-serif;">(</span><a href="https://twitter.com/kaz_29" style="font-family: Arial, Helvetica, sans-serif;"><span style="color: blue;">@kaz_29</span></a><span style="font-family: Arial, Helvetica, sans-serif;">)さんの「</span><a href="http://kaz29.hatenablog.com/entry/2012/12/18/202449" style="font-family: Arial, Helvetica, sans-serif;" target="_blank"><span style="color: blue;">ACL PluginでACL再入門</span></a><span style="font-family: Arial, Helvetica, sans-serif;">」でした。</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">私もACLを使っているサイトがあります。非常に興味をもって読まさせて頂きました。後でいろいろと使わせて頂きたいと思います。</span><br />
<div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span><span style="font-family: Arial, Helvetica, sans-serif;">さて今回は、「<a href="https://github.com/paulredmond/chosen-cakephp"><span style="color: blue;">Chosen</span></a> + <a href="https://github.com/CakeDC/search" target="_blank"><span style="color: blue;">Search</span></a> + <a href="https://github.com/hiromi2424/Collectionable" target="_blank"><span style="color: blue;">Collectionable</span></a>」の3つのプラグインの組み合わせで使ってみましたので説明したいと思います。</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;">Selectboxを使いやすくするjQuery Plugin Chosenの</span><span style="font-family: Arial, Helvetica, sans-serif;">CakePHPプラグインがありましたので使ってみました。</span><br />
<div>
<br />
<span style="font-family: Arial, Helvetica, sans-serif;">それでは早速、それぞれのプラグインをcloneしましょう。</span><br />
<span style="font-size: large;"><b></b></span><br />
<div>
<b style="font-size: x-large;"><span style="font-family: Arial, Helvetica, sans-serif;">Chosen Plugin 設定</span></b></div>
<span style="font-family: inherit;">README通りに設定します。</span><br />
<div style="border: 0px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline;">
<div style="font-size: 15px; line-height: 24px;">
</div>
<pre style="background-color: #f8f8f8; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(204, 204, 204); line-height: 19px; margin-bottom: 15px; margin-top: 15px; overflow: auto; padding: 6px 10px;"><span style="font-family: inherit;"><span class="go" style="border: 0px; margin: 0px; padding: 0px;">cd path/to/app/Plugin or /plugins</span>
<span class="go" style="border: 0px; margin: 0px; padding: 0px;">git clone git://github.com/paulredmond/chosen-cakephp.git Chosen</span>
<span class="go" style="border: 0px; margin: 0px; padding: 0px;">cd Chosen</span></span></pre>
<pre style="background-color: #f8f8f8; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(204, 204, 204); line-height: 19px; margin-bottom: 15px; margin-top: 15px; overflow: auto; padding: 6px 10px;"><span class="go" style="border: 0px; font-family: inherit; margin: 0px; padding: 0px;"><span style="line-height: normal; white-space: normal;">curl -s http://getcomposer.org/installer | php</span></span></pre>
<pre style="background-color: #f8f8f8; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(204, 204, 204); line-height: 19px; margin-bottom: 15px; margin-top: 15px; overflow: auto; padding: 6px 10px;"><span class="go" style="border: 0px; font-family: inherit; margin: 0px; padding: 0px;">php composer.phar install</span></pre>
<div style="color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px;">
</div>
</div>
<div style="border: 0px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline;">
<span style="font-family: inherit;">/app/Controller/AppController.phpにヘルパーの設定を行います。</span><br />
<div class="highlight" style="border: 0px; margin: 0px; padding: 0px;">
<pre style="background-color: #f8f8f8; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(204, 204, 204); color: #333333; font-family: Consolas, 'Liberation Mono', Courier, monospace; font-size: 13px; line-height: 19px; margin-bottom: 15px; margin-top: 15px; overflow: auto; padding: 6px 10px;"><span class="o" style="border: 0px; font-weight: bold; margin: 0px; padding: 0px;"><span class="nx" style="border: 0px; margin: 0px; padding: 0px;"><?php</span>
<span class="k" style="border: 0px; font-weight: bold; margin: 0px; padding: 0px;">public</span> <span class="nv" style="border: 0px; color: teal; margin: 0px; padding: 0px;">$helpers</span> <span class="o" style="border: 0px; font-weight: bold; margin: 0px; padding: 0px;">=</span> <span class="k" style="border: 0px; font-weight: bold; margin: 0px; padding: 0px;">array</span><span class="p" style="border: 0px; margin: 0px; padding: 0px;">(</span>
<span class="s1" style="border: 0px; color: #dd1144; margin: 0px; padding: 0px;">'Chosen.Chosen'</span><span class="p" style="border: 0px; margin: 0px; padding: 0px;">,</span>
<span class="p" style="border: 0px; margin: 0px; padding: 0px;">);</span>
</span></pre>
<div style="background-color: white; color: #333333; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 14px; line-height: 22px;">
<span class="p" style="border: 0px; margin: 0px; padding: 0px;"><br /></span></div>
<div style="background-color: white; color: #333333; line-height: 22px;">
<span class="p" style="border: 0px; margin: 0px; padding: 0px;"><span style="font-family: inherit; font-size: large;"><b>Search Pluginの設定</b></span></span></div>
<div>
<div style="background-color: white;">
<pre style="background-color: #f8f8f8; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(204, 204, 204); line-height: 19px; margin-bottom: 15px; margin-top: 15px; overflow: auto; padding: 6px 10px;"><span style="font-family: inherit;"><code style="background-color: transparent; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: none; margin: 0px; padding: 0px;">git clone </code><span style="color: #333333; line-height: 22px;">git://github.com/CakeDC/search.gitapp/Plugin/Search</span></span></pre>
app/Model/AppModel.php<br />
<br />
<script src="https://gist.github.com/4335187.js"></script>
<br />
app/Model/User.php<br />
<br />
<script src="https://gist.github.com/4334976.js"></script>app/Controller/UsersController.php</div>
<script src="https://gist.github.com/4334879.js"></script>
</div>
</div>
</div>
<br />
※Seach Pluginについては、オガーンさんのブログに詳しく楽しく掲載されていますのでそちらを参考にしてください。<br />
<a href="http://torhamzedd.halteria.com/2012/01/cakephp20search-plugin22.html" target="_blank">「CakePHP2.0にSearch Pluginをいれてラクラク検索しよう」</a><br />
<div style="background-color: white; color: #333333; font-family: Helvetica, arial, freesans, clean, sans-serif; line-height: 22px;">
<span class="p" style="border: 0px; margin: 0px; padding: 0px;"><b><br /></b></span></div>
<div style="background-color: white; color: #333333; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 14px; line-height: 22px;">
<br /></div>
<div style="background-color: white; color: #333333; font-family: Helvetica, arial, freesans, clean, sans-serif; line-height: 22px;">
<span class="p" style="border: 0px; margin: 0px; padding: 0px;"><b><span style="font-size: large;">Collectionableの設定</span></b></span><br />
<span class="p" style="border: 0px; margin: 0px; padding: 0px;"><b><span style="font-size: large;"><br /></span></b></span></div>
<div style="background-color: white; color: #333333; font-family: Helvetica, arial, freesans, clean, sans-serif; line-height: 22px;">
<span class="p" style="border: 0px; margin: 0px; padding: 0px;">findのoption値やvirtual fieldをまとめられるのでSearch Pluginと組み合わせると最強</span></div>
<div style="background-color: white;">
<pre style="background-color: #f8f8f8; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(204, 204, 204); color: #333333; line-height: 19px; margin-bottom: 15px; margin-top: 15px; overflow: auto; padding: 6px 10px;"><code style="background-color: transparent; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: none; font-family: inherit; margin: 0px; padding: 0px;">git clone </code><span style="line-height: 22px;"><span style="font-family: inherit;">git://github.com/hiromi2424/Collectionable.git app/Plugin/Collectionable</span>
</span><span style="font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 14px; line-height: 22px;">cd app/Plugin/Collectionable/</span></pre>
<div style="background-color: white;">
<span style="font-family: inherit;">Collectionableはdefaultが2.xではないため下記のようにブランチを変更します。</span></div>
<pre style="background-color: #f8f8f8; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(204, 204, 204); color: #333333; line-height: 19px; margin-bottom: 15px; margin-top: 15px; overflow: auto; padding: 6px 10px;"><span style="font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 14px; line-height: 22px;">git checkout -b cake2 origin/cake2</span></pre>
<br />
app/Model/AppModel<br />
<script src="https://gist.github.com/4334952.js"></script>
<br />
<div>
<div style="font-family: 'Hiragino Kaku Gothic Pro'; font-size: medium;">
<span style="color: #333333; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 14px; line-height: 22px;"><b><br /></b></span></div>
<span style="color: #333333; font-family: Helvetica, arial, freesans, clean, sans-serif;"><span style="line-height: 22px;">app/Model/User.php</span></span><br />
<script src="https://gist.github.com/4335171.js"></script>
<span style="color: #333333; font-family: Helvetica, arial, freesans, clean, sans-serif;"><span style="font-size: 14px; line-height: 22px;"><b><br /></b></span></span>
<br />
<span style="font-family: inherit;">プラグインを有効にします。</span><br />
<span style="font-family: inherit;">app/Config/bootstrap.php </span></div>
<div style="background-color: white; color: #333333; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 14px; line-height: 22px;">
<span class="p" style="border: 0px; margin: 0px; padding: 0px;">
</span>
<br />
<div style="color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px;">
</div>
<span class="p" style="border: 0px; margin: 0px; padding: 0px;">
</span>
<br />
<div class="highlight" style="border: 0px; margin: 0px; padding: 0px;">
<pre style="background-color: #f8f8f8; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(204, 204, 204); font-family: Consolas, 'Liberation Mono', Courier, monospace; font-size: 13px; line-height: 19px; margin-bottom: 15px; margin-top: 15px; overflow: auto; padding: 6px 10px;"><span class="p" style="border: 0px; margin: 0px; padding: 0px;"><span class="o" style="border: 0px; font-weight: bold; margin: 0px; padding: 0px;"><span class="nx" style="border: 0px; margin: 0px; padding: 0px;">php</span>
<span class="nx" style="border: 0px; margin: 0px; padding: 0px;">CakePlugin</span><span class="o" style="border: 0px; font-weight: bold; margin: 0px; padding: 0px;">::</span><span class="na" style="border: 0px; color: teal; margin: 0px; padding: 0px;">loadAll</span><span class="p" style="border: 0px; margin: 0px; padding: 0px;">(</span><span class="p" style="border: 0px; margin: 0px; padding: 0px;">);</span>
<span class="cp" style="border: 0px; color: #999999; font-weight: bold; margin: 0px; padding: 0px;">?></span><span class="x" style="border: 0px; margin: 0px; padding: 0px;"></span>
</span></span></pre>
<div>
<span class="p" style="border: 0px; margin: 0px; padding: 0px;"><br /></span></div>
</div>
<span class="p" style="border: 0px; margin: 0px; padding: 0px;">
</span></div>
<div style="color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px;">
ちなみに余談ですが、Collectionableのcake2ブランチのREADMEをコピペすると動きませんでした。なので@hiromi2424にプルリクエスト送っておきました。</div>
<div style="color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px;">
<br /></div>
<div style="color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px;">
<strike>1点誤りが・・</strike><br />
2点誤りが・・・</div>
<div style="color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px;">
<br /></div>
<div style="color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMkYooTSLni92f2AuWWa3SPlKa5o6kPHQ-GAu1F-kvFej5MGkP1vsmtf9eHK0b9Go-0aIkGHadjVxfRu35PZFvPVWxT0XQX-E9LnZaT8sLvOXGrHB4pKBXMUwDfgOMRGeS0aO_84uCTXGL/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2012-12-18+14.28.27.jpg" imageanchor="1" style="display: inline !important; margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMkYooTSLni92f2AuWWa3SPlKa5o6kPHQ-GAu1F-kvFej5MGkP1vsmtf9eHK0b9Go-0aIkGHadjVxfRu35PZFvPVWxT0XQX-E9LnZaT8sLvOXGrHB4pKBXMUwDfgOMRGeS0aO_84uCTXGL/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2012-12-18+14.28.27.jpg" /></a><br />
<br /></div>
<div style="color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px;">
</div>
<div style="border: 0px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline;">
<div style="color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px;">
正しい例</div>
<div style="color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px;">
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimsRZ0xG28RFZ7zqgT9eH9fK6Bt4pN7uRJq3cIOqsOleYseskvwBNUEYoMRhsNsmnIEzmPK8_QFaO7oXHNXOEWH0vNM8KjDhcbfndhdRRqalYkX1R7WRoJtww2-UVsNf_cvNeCLVDrGJs0/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2012-12-20+13.00.09.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimsRZ0xG28RFZ7zqgT9eH9fK6Bt4pN7uRJq3cIOqsOleYseskvwBNUEYoMRhsNsmnIEzmPK8_QFaO7oXHNXOEWH0vNM8KjDhcbfndhdRRqalYkX1R7WRoJtww2-UVsNf_cvNeCLVDrGJs0/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2012-12-20+13.00.09.jpg" /></a></div>
<br /></div>
<div style="color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px;">
Pull Requestしておきました。</div>
<div style="color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px;">
(すみません、たいしたプルリクエストじゃなくて)</div>
<span style="color: blue;">https://github.com/hiromi2424/Collectionable/compare/c4c142ba84...61f9e6fe92</span><br />
<div style="color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px;">
<br /></div>
<div>
<div style="color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px;">
最後にビューの設定です。</div>
</div>
<div style="color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px;">
<br />
app/View/Users/index.ctp<br />
<script src="https://gist.github.com/4335090.js"></script>
<br />
<br />
<div style="font-size: 15px;">
<br /></div>
<div style="font-size: 15px;">
設定出来ましたので動作させてみます。</div>
<div style="font-size: 15px;">
Selectboxのところが普段とは違うことがわかりますね。</div>
</div>
<div style="color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcmiSqRpxKdT0-5Wy5_ErEumuCdhrZ6PWifimUOFUVoB0ZOpxh-8xzNSBVPKz0QXZXiKfajIDmk59UHrdz4d3LlspeYhA5AxZhCYge72v4p16yMM-2PKEjyqU86HxYi01rcr1sH-7sYNJf/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2012-12-19+16.45.45.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="549" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcmiSqRpxKdT0-5Wy5_ErEumuCdhrZ6PWifimUOFUVoB0ZOpxh-8xzNSBVPKz0QXZXiKfajIDmk59UHrdz4d3LlspeYhA5AxZhCYge72v4p16yMM-2PKEjyqU86HxYi01rcr1sH-7sYNJf/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2012-12-19+16.45.45.jpg" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
試しに大分県と三重県を選択してみます。</div>
<div style="color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px;">
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRpivWVzw7rYoarYmyoNvU3qHOao5lZpMn5Q1zBXXE7ZauRRa8p8Xyg_qYuV2o7P7VU_KsKvdp0SJtwtUNP_KvzyOyFQCIPn6757XF_-b0OR6phXaMQVWFx7bG2l5k9kfS66yDbxBenyxe/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2012-12-19+16.47.47.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRpivWVzw7rYoarYmyoNvU3qHOao5lZpMn5Q1zBXXE7ZauRRa8p8Xyg_qYuV2o7P7VU_KsKvdp0SJtwtUNP_KvzyOyFQCIPn6757XF_-b0OR6phXaMQVWFx7bG2l5k9kfS66yDbxBenyxe/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2012-12-19+16.47.47.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
すると、ボックスの中に選択した項目が収まるというわけです。</div>
<div class="separator" style="clear: both; text-align: left;">
見た目もいいですね。</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
</div>
<div style="color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px;">
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaQZUX67UgoEVJ3B4OdRzJjidr_RcoVC9PHxvBNwoTw9Cxp7UT8t5MdedfRsRRR5VJ99XgD5i79REm22gsZHLFziQsfs1ZPbaQyWD7Hb8AqQ54bVxpnQRee6BZZmoR5kQPLtQwj8k3Q3gv/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2012-12-19+16.48.50.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaQZUX67UgoEVJ3B4OdRzJjidr_RcoVC9PHxvBNwoTw9Cxp7UT8t5MdedfRsRRR5VJ99XgD5i79REm22gsZHLFziQsfs1ZPbaQyWD7Hb8AqQ54bVxpnQRee6BZZmoR5kQPLtQwj8k3Q3gv/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2012-12-19+16.48.50.jpg" /></a></div>
<br />
これで検索ボタンをクリックすると大分県と三重県で絞り込まれます。<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrbxyFe4bbl50YzK_uaQNZLyUQNRb7d3TjLD7dZL4U-w4LBS1BsJVeE2hOZgLQLFnab2qKpcx7TLVjDRbxF5Tm4OXhch8qcF-pplxFAimfW2ONPMBYtTjgtNzpyIakYE7-0tPjKFuS9HYP/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2012-12-19+16.51.58.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="346" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrbxyFe4bbl50YzK_uaQNZLyUQNRb7d3TjLD7dZL4U-w4LBS1BsJVeE2hOZgLQLFnab2qKpcx7TLVjDRbxF5Tm4OXhch8qcF-pplxFAimfW2ONPMBYtTjgtNzpyIakYE7-0tPjKFuS9HYP/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2012-12-19+16.51.58.jpg" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Chosen Pluginだけ使っても検索ロジックが長くなるのでSearch Pluginを使い、プラスアルファでCollectionable Pluginを使えば更にコードがすっきりします。</div>
是非、この組み合わせで使ってみてください。<br />
(注:当然ながら使っているデータはテストデータです)<br />
<br /></div>
<div>
<div style="color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px;">
<strike>明日は今のところ決まってないみたいですが、どなたか書いていてくれる人お願いしますー。</strike></div>
<div style="color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px;">
<br /></div>
<span style="color: #373737; font-family: Helvetica Neue, Helvetica, Arial, sans-serif;"><span style="font-size: 15px; line-height: 24px;">決まりましたね!では20日目はKenichirou Oyama(</span></span><span style="color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px;"><a href="https://twitter.com/k1low" target="_blank">@k1low</a></span><span style="color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px;">)さんの</span><br />
<span style="color: #373737; font-family: Helvetica Neue, Helvetica, Arial, sans-serif;"><span style="font-size: 15px; line-height: 24px;">「俺のGitHubリポジトリが火を噴くぜ(3回目)」</span></span><br />
<span style="color: #373737; font-family: Helvetica Neue, Helvetica, Arial, sans-serif;"><span style="font-size: 15px; line-height: 24px;">お楽しみに!</span></span></div>
<div style="color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px;">
<br /></div>
<div style="color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px;">
<br /></div>
<div style="color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px;">
<br /></div>
</div>
</div>
</div>
</div>
おおくぼようすけhttp://www.blogger.com/profile/05046714916828051537noreply@blogger.com3日本, 東京都中央区新川1丁目335.678678194876667 139.7821064293384635.678577194876667 139.78194892933845 35.678779194876668 139.78226392933846