ノンカフェインであなたにやさしい

Rails,HTML,JavaScript,jQuery,PHP,CakePHPなど

CSSで高さを可変にして縦横比(アスペクト比)を維持する

CSSで高さを可変にして縦横比(アスペクト比)を維持する方法です。 縦横比(アスペクト比)1:1のサイズで幅に合わせて高さを可変にしたい時などに使えます。 paddingの特性を使って実現しています。さっそく使い方から。 CSSで高さを可変にして縦横比(アスペク…

Your Gemfile has no gem server sources. If you need gems that are not already on your machine, add a line like this to your Gemfile:

Your Gemfile has no gem server sources. If you need gems that are not already on your machine, add a line like this to your Gemfile: source 'https://rubygems.org' と怒られた時の対処法 英文読めば分かるですが自分が読まずに調べてしまったので……

Rubyのeach_with_indexでeach中のindexを取得する

each_with_index Rubyの each でインデックスを取得したい場合 each_with_index を使う。 %w(a b c).each_with_index do |n, index| puts "#{index} #{n}" end # 0 a # 1 b # 2 c インデックスを任意の数字から始める with_index indexを1から始めたい場合な…

株式会社サックルに行ってきました

鬼丸さんにご招待していただき株式会社サックルにおじゃましてきました! 打ち合わせスペースなどめちゃくちゃオシャレ!! Pepper君がいる!!Pepperめっちゃ話に割り込んでくる!! (残念ながら写真撮ってないのでWantedlyでご確認くださいまし…) お伺い…

RailsのTimeクラスChangeメソッドについて

TimeクラスChangeメソッドの挙動について まずは年月日を変更してみる。 Time.new(2016, 3, 15, 10, 10, 10).change(year: 2015) # => 2015-03-15 10:10:10 +0000 Time.new(2016, 3, 15, 10, 10, 10).change(month: 1) # => 2016-01-15 10:10:10 +0000 Time.…

Railsで現在のURLを取得、現在のpathを取得

Railsで現在のURLを取得 # http://hoge.com/aa/bb?c=d にアクセスした場合 request.url # 'http://hoge.com/aa/bb?c=d' Railsで現在の pathを取得 # http://hoge.com/aa/bb?c=d にアクセスした場合 request.fullpath # '/aa/bb?c=d' request.path_info # ク…

utm_contentをアナリティクスで確認する

utm_contentをアナリティクスで確認する方法 セカンダリーディメンションで、「広告のコンテンツ」を選択することで確認することが出来ます。

JavaScriptのオブジェクト(hash:ハッシュ)の空判定

javascriptの配列は以下のように要素数調べればいいのですが var a = [1, 2]; console.log(a.lenght > 0); // true オブジェクトにはlengthなど無いと… var h = { a: 1, b: 2 }; console.log(h.lenght > 0); // undefined 解決方法 var h = { a: 1, b: 2 }; …

【ツクリンク】ピクスタさんと提携を発表させていただきました

ピクスタさんと提携を発表させていただきました。 以前リリースしたホームページ制作機能の中で約920万点の写真・イラスト素材を無料で使うことが出来ます。 これにより建設業者さんが今まで以上に簡単に、品質の良いホームページを持てるようになります! …

Railsのリファクタリングに使える情報、気をつけたいことまとめ

Railsで開発する際に気をつけたいことや、リファクタリングに使える記事です。 覚えておきたい、リファクタリングの際に都度つど読み直したい記事がいくつかあったのでまとめます。 qiita.com qiita.com qiita.com qiita.com

jQueryで特定のclassを持たない要素を取得する

.hogeが使えるのかと思ったんですがちょっと違う書き方でした。 not_hoges = $('[class!="hoge"]'); 参考 Selectors - jQuery 日本語リファレンス

CompassでCSSスプライトを簡単につくる[Rails, Compass, CSS Sprite]

Compassを使ってCSSスプライトを作る手順です。 以下の記事を参考にさせていただきました。 CSS3 - Rails + Compass でCSSの開発を高速化! - Qiita まず、CSS Spriteでまとめたい画像をimagesの中に保存します。 あとはSCSSを下記のように。 @import "icons…

Railsでcompass 1.0.1を使う(sass 3.4.9)

Railsでcompass 1.0.1を使おうとした時に依存関係でコケたのでメモです。 その時のエラー文 ActionView::Template::Error (wrong number of arguments (2 for 1) バージョン指定なしでインストールした場合 gem 'sass-rails' gem 'compass-rails' Gemfile.lo…

collection_selectにclassやidなどのhtmlオプションを指定する[Rails]

Railsのcollection_selectにclassやidなどのhtmlオプションを指定する方法 // メソッドの定義 collection_select(object, method, collection, value_method, text_method, options = {}, html_options = {}) // 実際の使い方 collection_select(:user, :tit…

SCSSで.sass-cacheを作らないようにする方法

SCSSをコマンドラインからコンパイルしていると.sass-cacheが作られて邪魔だったので作らない方法です。 使うのはオプションの--no-cache scss --no-cache style.css.scss > style.css sassの使い方はこちらにまとまっています。 Sassコマンドの使い方を覚え…

javascriptでspliceを使って配列の要素を削除する方法

javascriptでspliceを使って配列の要素を削除する方法です。 // splice(削除する要素のインデックス, 削除する要素の数) arr = {'zero', 'one', 'two', 'three'}; arr.splice(1, 1); // arr => {'zero', 'two', 'three'} spliceは削除だけでなく追加もできる…

JavaScriptの連想配列にキーが存在するか確認する

JavaScriptの連想配列にキーが存在するか確認する方法です。 inはこのような使い方してはいけないとのご指摘を頂き修正しました。 var hash = { a: 1, b: 2 }; // inを使った悪い例 console.log('a' in hash); //true console.log('c' in hash); //false // …

'Resource interpreted as Image but transferred with MIME type text/html'とコンソールに出るときの対応

コンソールで以下の様な表示が Resource interpreted as Image but transferred with MIME type text/html Resource interpreted as Image but transferred with MIME type text/css MIME type text/htmlの場合は対象のhtml MIME type text/cssの場合は対象…

ローディング用のgif画像を生成するサービス

色や早さ大きさを自由に変えられるので便利です。 Loader Generator - Ajax loader

jQueryのプラグインを作るときに必要なこと。書き方。

javascript書いててまとめた方がいいなあと思ったので初めてプラグイン作りました。 その時に見た記事とか使ったことのまとめです。 jQuery pluginの書き方 JavaScript - jQuery pluginの書き方をいまさら - Qiita 親要素の取得方法 make a record of…: jQue…

Railsのwhereで日付を条件に指定する

Model.where(created_at: Time.new(2014, 10, 10).all_day) 生成されるSQL SELECT * FROM `models` WHERE (`models`.`created_at` BETWEEN '2014-10-10 00:00:00' AND '2014-10-10 23:59:59') all_day all_day を使うことで該当する日をまるごと範囲指定でき…

brew updateとupgradeの違い[Homebrew]

brew updateはHomebrewと内部で管理しているformulaを最新にする brew upgradeは更新があるパッケージを再ビルドする ことのようです。 またupgradeは特定のformula名を指定して個別にビルドすることも可能です。

mixinでclearfixを使う

mixinでclearfixを使う方法です。 @mixin clearfix { zoom: 1; &:before, &:after { content: ""; display: table; } &:after { clear: both; } } header { @include clearfix; } clearfixはmicro clearfixを参考にしています。 A new micro clearfix hack –…

macターミナルのショートカット

macのターミナルで使うショートカットを何度も検索かけちゃうんで忘れないためによく使うものを書き出してみました。 ⌃A 行頭へ移動 ⌃E 行末へ移動 ⌃K カーソル以降の文字を削除する ⌃W カーソル以前の文字を削除する ⌃C 強制終了 ⌃L 画面を消去する(clear) …

ransackでのOR検索について[Rails gem]

ransackで以下の様なOR検索をしたくなったので調べてみました。 # (a AND b) OR c SELECT `tables`.* FROM `tables` WHERE (((`tables`.`hoge1` = 1 AND `tables`.`hoge2` IS NOT NULL) OR `tables`.`hoge1` = 2)) OR検索の記事で見つけたのが以下 ransack …

Railsのconfig/routes.rbでリダイレクトさせる(ステータスコードを指定する)

Railsのroutes.rbの中のルーティング設定でリダイレクトさせる方法です。 普通にリダイレクトさせる。 get '/hoge', to: redirect('/hogehoge') httpステータスコードを指定してリダイレクトさせる。 get '/hoge', to: redirect('/hogehoge', status: 301) U…

jQueryでinput[type=file]のファイル名を取得する

jQueryでinput[type=file]のファイル名を取得する $('#file').prop('files')[0].name;

JavaScriptで改行コードを<br>に置換する

JavaScriptで改行コードを<br>に置換する方法についてです。 textareaに入力されたテキストをHTMLに表示したい時があったのでその方法を JavaScriptで改行コードを<br>に置換する str.replace(/\r?\n/g, '<br>'); 正規表現で/\r?\n/gとすることで改行コードを取り出して<br>…

link_toにspanタグなどのDOM(HTML)を入れる[Rails]

link_toにspanを入れる方法 以下のようにブロック構文を使うことでlink_toにspanを含めることができます。 <%= link_to '/path' do %> <span>text</span> <% end %> これを書いた経緯と解決まで link_toにspanタグなどのDOMを入れたいことがありました。 link_toにspanを…

Rails4.1.1でdate_selectがエラーを吐いた話[undefined method `map' for "translation missing: ja.date.order":String]

date_selectを使おうとしたらエラーを吐いた話です。 バージョン ruby 2.1.2p95 Rails 4.1.1 エラー文 undefined method `map' for "translation missing: ja.date.order":String i18Nのja.date.orderが無えぞと こちらを参考にi18Nの設定 undefined method …