frontendmemo

このサイトは、「html、css、js、ruby,ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

AWSでrailsのプロジェクト新規立ち上げ手順

AWSでrailsのプロジェクトを新規立ち上げる手順を備忘録としてまとめました。 1.newする mkdir myapp cd myapp bundle init gem 'rails', '5.0.3' bundle install rails new . 2.Gem追加インストール Gemfile gem 'mysql2', '0.3.18' # Use SCSS for stylesh…

RailsのomniauthでTwitter認証の手順

railsでログイン時にTwitter認証を実装できるのですが、意外とエラーが多発して難しかったです。 記事によってもやり方は違かったのですが、自分が実現できた方法を書いていきます。Twitter認証のみの新規アプリとして作ります。※devise install済みの想定 1…

Untracked filesが出てコミットできない

Untracked files:が出てコミットできなくなりました。この場合不要ファイルを消す必要があります。git cleanで消すこともできますが、誤って必要なファイルを消さないように 手動で消しました。node-modulesなど大量のファイルをコミットしようとしてないか…

paperclipをheroku上でも可能にする

paperclipで画像を投稿した際、herokuでは一時的に保存されるだけで、数時間経つと読み込みできなくなっていました。こちらは、awsでiam userのアクセスIDとkeyの取得、heroku上の環境変数の設定、paperclip.rbの作成の必要があります。 i am userのアクセス…

LoadError (cannot load such file -- aws-sdk-s3 (You may need to install the aws-sdk-s3 gem)):のエラー解決

タイトルのようにLoadError (cannot load such file -- aws-sdk-s3 (You may need to install the aws-sdk-s3 gem))というエラーが出たのですが、 gem 'aws-sdk', '~> 2.3' を既にインストールしていたためgem 'aws-sdk-s3'を入れようとすると、 Bundler cou…

CodepenでできるVueの基礎を学ぶVol.5 コンポーネントでUI部品を作る

Vue

こちらの記事は基礎から学ぶVue.jsの内容を学習した記録です。基礎から学ぶ Vue.js作者: mio出版社/メーカー: シーアンドアール研究所発売日: 2018/05/29メディア: 単行本(ソフトカバー)この商品を含むブログを見るこちらの記事で気になることは本の中に全…

CodepenでできるVueの基礎を学ぶVol.4 データの監視と加工

Vue

こちらの記事は基礎から学ぶVue.jsの内容を学習した記録です。基礎から学ぶ Vue.js作者: mio出版社/メーカー: シーアンドアール研究所発売日: 2018/05/29メディア: 単行本(ソフトカバー)この商品を含むブログを見る こちらの記事で気になることは本の中に…

CodepenでできるVueの基礎を学ぶVol.3 データの登録と更新

Vue

こちらの記事は基礎から学ぶVue.jsの内容を学習した記録です。基礎から学ぶ Vue.js作者: mio出版社/メーカー: シーアンドアール研究所発売日: 2018/05/29メディア: 単行本(ソフトカバー)この商品を含むブログを見る こちらの記事で気になることは本の中に…

rubyにおける環境変数の作り方

環境変数に入れておくことで、大事なパスワードをプロジェクトのディレクトリ内に置かずに管理できます。そうすることで、gitignoreをせずにコミット対象から除外(そもそもプロジェクトのディレクトリ内ではないため)できます。1. .bash_profileを生成しま…

CodepenでできるVueの基礎を学ぶVol.2 データの登録と更新

Vue

基礎から学ぶ Vue.js作者: mio出版社/メーカー: シーアンドアール研究所発売日: 2018/05/29メディア: 単行本(ソフトカバー)この商品を含むブログを見るこちらの本を参考にサンプルコードを記述しています。 データの登録と更新 テキストと属性のデータバイ…

パフォーマンス向上のためのデザイン設計まとめてみた(画像編)

パフォーマンス向上のためのデザイン設計作者: Lara Callender Hogan,西脇靖紘,星野靖子出版社/メーカー: オライリージャパン発売日: 2016/06/25メディア: 単行本(ソフトカバー)この商品を含むブログ (1件) を見るこの記事は「パフォーマンス向上のための…

herokuで10ずつidが加算されていく現象

こちらに記載されている通り、cleardbというデータベースの仕様らしい。 なのでそのままにしたほうがいいとのこと。ClearDB FAQs – ClearDB ClearDBは循環レプリケーションを使用してマスターマスターのMySQLサポートを提供します。そのため、あるマスターが…

herokuがupできなかった現象Precompiling assets failed.

herokuがアップ出来ずに1、2ヶ月ほど悩んでいましたが、やっと解決ができました。エラー文言はこちら Precompiling assets failed.直訳するとコンパイル前のassetファイルの失敗ですかね。assetファイルを見るとcss、JS共に原因がありました。 assetファイル…

CodepenでできるVueの基礎を学ぶVol.1

Vue

こちらの記事は基礎から学ぶVue.jsの内容を学習した記録です。基礎から学ぶ Vue.js作者: mio出版社/メーカー: シーアンドアール研究所発売日: 2018/05/29メディア: 単行本(ソフトカバー)この商品を含むブログを見る こちらの記事で気になることは本の中に…

head内のmetaタグの中身を書き換えることは可能?

可能でした。document.head.childrenでheadの子要素にアクセスし、name属性で分岐処理をします。 下記の場合はdescriptionを取得する例です。codepen.ioheadタグ内のmeta情報を取得・書き換えを行う。Javascript・jQuery! | | ルディの脳内ブログ SEO的にど…

数字のmaxlengthが効かない?oninputでの対処法

テキストボックスの文字数制限の仕方は下記の通り。 <input type="text" maxlength="5"> 数字のみに制限したい場合は以下のようにします。 <input type="number" pattern="[0-9]*" maxlength="5"> しかしtype="number"はmaxlengthがききません。 入力を数字と文字数制限両方適応させたい場合の対処法を紹介します。 oninput oninputはjavascriptの i…

jqueryでスクロール位置の取得・設定【デモあり】

スクロール位置の取得 jqueryでスクロール位置の取得するには要素scrollメソッドを使用します。codepen.io scrollメソッドに限らずメソッドはonを使うことを推奨します。 スクロール位置の設定 jqueryでスクロール位置の設定するには要素scrollメソッドを使…

chrome以外でgooglemapで現在地が表示されない

chrome以外でgooglemapで現在地が表示されないバグが起きたと思ったのですが、違いました。正確にはPCはGPS現在地を正しく取得できないのです。それはchromeもそうです。 現在私は新宿でGPSを取得しましたが、chrome以外は千代田区を指していました。 chrome…

【初心者向け】Ruby on Railsでブログ作成手順をわかりやすくまとめてみた

まず基本的な作り方ですがルーター、コントローラー、ビューの順番で作成していきます。 自分のような初心者は何から触っていいかわからなくなると思います。 そんな時は心の中でルーター、コントローラー、ビュー。ルーター、コントローラー、ビューと唱え…

Ruby初心者が躓きがちな基本まとめ

TECH::CAMPでrubyを学んでいて、学習していくうちに基本を忘れてるがために先に進めなくなることはよくあります。そんな基本をまとめてみました。 ルーティング パスに対応してどのコントローラのアクションを動かすかを設定するもの get 'tweets' => 'tweet…

railsが起動しなかった3つのエラーの対処(cannot load such file -- sqlite3/sqlite3_native (LoadError))

たった1日で基本が身に付く! Ruby on Rails 超入門作者: WINGSプロジェクト竹馬力,山田祥寛出版社/メーカー: 技術評論社発売日: 2018/03/09メディア: 大型本この商品を含むブログを見る「たった1日で基本が身につく!ruby onrails超入門」を読んで、 rubyの…

モバイルフレンドリー対策とは?

近年モバイルファーストが叫ばれていますが、googleではモバイルファーストではない(スマートフォン対応していない)サイトには検索結果で「ページがモバイル フレンドリーではありません。」という文言が表示されるようになってしまいました。SEO順位も影…

SSL化してもセキュリティレベルの高い企業ではサイトが閲覧できないという話

SSL化してもセキュリティレベルの高い企業ではサイトが閲覧できない、それはSSLのレベルに原因がありました。 SSLとは インターネット上でのデータのやりとりを暗号化し、第三者に情報をのぞかれたり盗まれたりしないようにするのがSSL(Secure Sockets Laye…

ケンカしないれこーず

#calendar:after { clear: both; display: block; content: ""; } #calendar table { border-collapse: collapse; text-align: left; line-height: 1.5; float: left; margin: 10px 10px 0 0; } #calendar thead { border-right: 1px solid #ccc; border-lef…

トグルのarea-*は何を指定するか。

area-*属性はJSで変更された要素の役割と状態をブラウザに伝える働きをします。 トグルでの使用例 トグルでは主に下記を使用します。 aria-controls・・・ボタンと開閉要素の関連付け aria-expanded・・・開閉の状態 主に下記のようにします。 <div class="toggle-01 js-toggle is-open"> <button type="button" class="toggle-hook js-toggle-hook" aria-controls="toggle-content-01"><span>閉じる</span></button> </div>

全てのフォーカス要素を無効にしたい

JSなどで対象エリア内のフォーカスを全て無効にしたい時があると思います。 全てのフォーカス要素は? フォーカス要素一覧は下記です。 a[href] area[href] [onclick] [tabindex] input button select option textarea output summary video audio object em…

nodeをアップデートしたらgulpが動かない時の対処法

nodeをアップデートしたらgulpが強制終了するようになりました。 意外と忘れそうなので備忘録用にメモします。node-sassを使用しているのですが、node-sassはバージョンごとにインストールが必要なのでコマンドプロンプトにて下記を実行しました。 npm insta…

css3でコイントスのように水平に回転するアニメーション

css

読み込み時にコイントスのように水平に回転するアニメーションのcss3です。マウスオーバー時も回転します。 <div class="coin-wrap"> <div class="coin"> <div class="front"><h2>コイン:表</h2></div> <div class="back"><h2>コイン:裏</h2></div> </div> </div> .coin-wrap .coin { position: relative; width: 200px; height: 200px; transform-style: preserve-3d; transition: a…

flexで簡単!画像を中央揃えにして横並びにする方法(キャプションあり)

css

画像を中央揃えにして横並びにする方法 <ul class="img-col2"> <li class="image"> <figure><img src="https://dummyimage.com/300x300/000/fff" alt=""> <figcaption>キャプションが入ります</figcaption></figure> </li> <li class="image"> <figure><img src="https://dummyimage.com/300x300/000/fff" alt=""> <figcaption>キャプションが入ります</figcaption><…</figure></li></ul>

プライベート関数をグローバル領域から呼び出し

プライベート関数をグローバル領域から呼び出すためには、関数内でメソッドを作りオブジェクトを返せば関数を呼び出すことができます。See the Pen OjrjVE by funclur (@funclur) on CodePen. var func = (function(){ function private(){ alert() } return…