#14 フッターの作成

第14回ではフッターを作成します。Bootstrap公式サイト内のサンプルの中から以下のテーマを参考にして作成しました。 Jumbotron フッターを最下部に固定するテーマ「Sticky footer」と悩みましたが、プロトタイプでは極力CSSに手を加えたくなかったので、今…

#13 ドロップダウンメニューの作成

ドロップダウンメニューを作成します。ヘッダーエリアの中に要素が増えてきたので一部をドロップダウンメニューにまとめたいと思います。Bootstrapの公式サイトにそのまま使えるドロップダウンメニューのサンプルが置いてあったので、こちらを利用しました。…

#12 deviseでカラムを追加

ユーザー名を表示するためのカラムを追加します。 $ rails g migration AddNameToUser name:string 内容を確認して実行します。 $ rake db:migrate ユーザー名を編集するためにstrong parametersを設定します。 application_controller.rb before_filter :co…

#11 ransackで検索機能を作成

第11回では、検索機能をつくります。今回はransackを使います。 Gemfileに追加 gem 'ransack' $ bundle install 以下のリンクを参考にしながら作業を進めていきます。 activerecord-hackery/ransack 当初の実装 application_controller.rb before_filter :se…

#10 質問投稿ページのスタイリング

質問投稿ページのデザインを整えます。まずはヘッダーのボタンに質問投稿ページへのリンクを設定します。 application.html.slim = link_to 'Ask', new_question_path ユーザー情報ページで使用したスニペットを利用して、質問投稿ページに適用します。 質問…

#9 Bitbucketでプロジェクト管理

第9回では、ソースコードをGitで管理します。三日坊主で終わるかもしれないと思っていたこの開発も地道に継続できているので、Bitbucketにリポジトリを作成して管理していきます。 Bitbucketで新規リポジトリの作成 「ローカルディレクトリを設定する」のガ…

#8 サインアップページのスタイリング

第8回では、前回と同じ要領でサインアップ画面・ユーザー情報画面のデザインを整えていきます。Bootsnipp でスニペットを検索して、修正を加えながら適用していきます。 サインアップ Before After ユーザー情報 Before After

#7 ログインページのスタイリング

第7回ではログイン画面のデザインを整えます。今回はBootstrapのスニペットを集めたbootsnippを使います。サイト内からログイン画面に利用できそうなコードを検索して、erb2slim.comでHTMLからslimに変換して使用しました。bootsnippではキーワード検索だけ…

#6 RailsでBootstrapを導入

前回、Pingendoで作成した画面を適用していきます。事前にbootstrap-sassを追加してTwitter Bootstrapを使えるようにします。このタイミングでFont Awesomeを使うためにfont-awesome-railsも追加します。インストール方法・使い方はそれぞれ以下のリンクを参…

#5 Pingendoでレイアウトの作成

モックレベルの動作を目指して、要素の配置を確認するためにレイアウトを作成します。今回は、知人の紹介で気になっていたPingendoを使ってみたいと思います。 以下の2画面をつくります。 トップページ 質問閲覧ページ 早速Pingendoのサイトからダウンロード…

#4 回答機能の作成

第4回では、質問に回答する機能をつくります。 質問への回答機能 scaffoldを使用してテンプレートを作成します。 $ rails g scaffold answer user:references question:references content:text 生成されたマイグレーションファイルのquestion項目にnull: fa…

#3 仕様の作成

第3回に入る前に、改めて仕様を整理しました。実はこの時まで何をつくるか悩んでいたのですが、色々と考えた末にQ&Aサイトをつくることにしました。仕様の整理については「パーフェクト Ruby On Rails」を参考にしました。 パーフェクト Ruby on Rails作者: …

#2 deviseでログイン機能の作成

第2回では、メールアドレスを利用したユーザー登録・ログイン機能をつくります。 deviseの導入 参考サイトを見ながらdeviseを導入します。 [Rails] deviseの使い方 plataformatec/devise deviseとは ユーザー登録して、送られてきたメールのリンクをクリック…

#1 Railsの環境構築

ここ数ヶ月仕事の負荷が高かったため、仕事以外の開発から意識的に離れて過ごしていたのですが、落ち着く目処がついて、徐々に何かやりたい欲が湧いてきたので久しぶりに個人サービスを開発しようと思います。1日1~2時間程度の作業量を目安に、2~3ヶ月後のリ…

TensorFlowでHello world

Googleが提供する機械学習ライブラリTensorFlowでHello worldを出力するまでのメモ 環境構築 pipをインストール $ sudo easy_install pip TensorFlowをインストール $ sudo easy_install --upgrade six $ sudo pip install --upgrade https://storage.google…

Railsでいいねボタンを表示

Turbokinksでajaxな画面遷移をした際にいいねボタンが表示されない時の対応メモ turbolinks対応でボタンのjsを読み込む <body> <div id="fb-root"></div> <div class="fb-like" data-send="true" data-layout="button_count" data-width="450" data-show-faces="true"></div> $ -> loadFacebookSDK() bindFacebookEvents() unless window.fbEvent…</body>

Railsのhttps通信で無限ループになった時の対応

Railsのhttps通信で無限ループが発生した時の対応メモ config.force_sslをtrueに設定後、無限ループが発生 ./config/enviroments/production.rb config.force_ssl = true X-FORWARDED_PROTO 「proxy_set_header X-FORWARDED_PROTO https;」を設定しないと、R…

NoMethodError: undefined method `name' for nil:NilClass

has_manyで紐付けしているモデル間の挙動でエラーが発生した際の対応メモ 環境 Ruby 2.2 Rails 4.1 エラー内容 NoMethodError: undefined method `name' for nil:NilClass 原因 Ruby2.2とRails4.1の環境ではActiveRecordにバグがある(らしい) I think ther…

Railsで環境変数を設定する

Railsで環境変数を設定する時のメモ 最初はコマンドで設定したのですが、ログアウトすると設定した環境変数がリセットされていることにハマった気づいたので.bash_profileで設定しました。 .bash_profile $ vi ~/.bash_profile export RAILS_ENV=development…

Railsで現在の環境を確認する

Railsで現在の環境を確認する時のメモ 現在の環境を確認する $ rails console 環境を指定する $ rails console staging エイリアスを使用した場合 $ rails c staging 参考 Railsで現在の環境を確認する Rails のコマンドラインツール

omniauthでログイン後に元のページに戻る

omniauthでログイン後に元のページに戻る処理のメモ redirect_to request.env['omniauth.origin'] request.env['omniauth.origin']から元のページのURLを取得する。 参考 omniauthで、OAuth処理を始めたURLへコールバックしたい場合(リンクのみ) Deviseとo…

ajax通信時に実行順序を保証する

複数のフォームをajax通信で送信するという処理をつくった際に、非同期通信がほぼ同時に行われて処理の順序が動作ごとに異なったため、1つ目のフォームの処理が完了したら2つ目の処理がはじまるという形式に書き直した時のメモです。 $(function(){ $("#subm…

CakePHPで検索条件の引き継ぎ

検索条件の引き継ぎでハマったのでメモ。 1. Searchプラグインの導入 public $components = array('Search.Prg'); 2. 検索処理の作成 public function search() { $this->Prg->commonProcess(); $this->Paginator->settings['conditions'] = $this->Post->pa…

nginxでBasic認証

nginxでBasic認証をかける時のメモ 1. Basic認証用のユーザー・パスワードを設定 # yum install httpd-tools # cd /etc/nginx/ # htpasswd -c .htpasswd username New password: Re-type new password: 2. Basic認証を有効化 /etc/nginx/conf.d/app.conf ser…

さくらVPSにRubyをインストール

さくらVPSにRubyをインストールする時のメモ 1. rbenv + ruby-buildをインストール $ git clone https://github.com/rbenv/rbenv.git ~/.rbenv $ cd ~/.rbenv && src/configure && make -C src $ echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bash_pr…

さくらVPSにnginxをインストール

さくらVPSにnginxをインストールする時のメモ 1. リポジトリの登録(CentOS6系) /etc/yum.repos.d/nginx.repo [nginx] name=nginx repo baseurl=http://nginx.org/packages/centos/6/$basearch/ gpgcheck=0 enabled=1 2. インストール # yum install nginx …

フリーランスの2015年の振り返り

フリーランスとして働いて1年半たちました。2015年を振り返りたいと思います。 仕事 小さな失敗の経験を多く積めたことが良かったと思っています。特に、お金がない時の苦しさや心が貧しくなる様、そういった状況時の仕事の流れなどを早いうちに経験できたこ…

ImagickでWebP形式の画像を生成

ImagickでWebP形式の画像を生成する WebPの予備知識 ImageMagickの最新版をインストール 変換処理の作成 1. WebPの予備知識 Cookpadのmirakuiさんの神スライドで学習 How We Gain "Mobile First" Using WebP with ImageMagick WebP – Webを速くするためにGoo…

Vagrantでオレオレ証明書

Vagrant環境でSSLを使用して開発中のCakePHPのサイトに接続したい状況が発生したので以下の方法で対応しました。 CentOS 6.6 CakePHP 2.4.5 1. mod_sslのインストール $ yum install mod_ssl opensslがインストールされていない場合は、こちらも必要。 2. オ…

マレーシアのクアラルンプールに行ってきました

観光でマレーシアのクアラルンプールに行ってきました。 今回の旅の目的 東南アジアの中でも成長著しいクアラルンプールを実際に見て回る マレーシアの文化、地理、貨幣価値の感覚を知る 華僑のコミュニティを学ぶ 英語学習のモチベーションを上げる 海外旅…