frontendmemo

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

Vue.jsコンポーネントフレームワーク5選

Vue.jsのコンポーネントを公開してるサービスは複数ありますので5つまとめたいと思います。 Vuetify vuetifyjs.com 特徴 フォームのバリデーション機能、モーダルウィンドウ、パララックスがある。 解説記事 Vueでもっと幸せになりたいあなたへ。VueのUIコン…

【Visual Studio Code】vue拡張子を補完させる方法

Visual Studio Codeではある程度拡張子に対応しているため自動でカラーテーマに対応するようになっていますが、.vue拡張子などは初期設定では未設定になっているため、白文字一色になるかと思います。そのため、.vueも補完させるよう設定していきましょう。…

【CSSのみ】liに丸付き数字の連番を最も簡単につける方法(色付きも)

css

デザイナーが丸付き数字のデザインを挙げてくることはあるかと思います。 環境依存文字の①、②を打っても表示はされますが、手間なのでcssで自動で表示されるようにしましょう。 ちなみにcircled-decimalはchrome対象外なので、実質現実的な方法ではありませ…

Vue.jsで超簡単でシンプルなTODOリストをレシピのようにわかりやすく解説

下記のようなTODOリストを作りましたのでわかりやすく解説します。※元となるソース See the Pen BMJrdz by funclur (@funclur) on CodePen. <div id="app"> <input type="text" v-model="inputText"> <button type="submit" v-on:click="save">保存</button> <ul> </ul></div>

【ES6】import/exportがchromeで動作しない原因

ローカルファイルでES6の機能import / exportをテストしたところ下記エラーが出ました。Access to script at '該当のパス' from origin 'null' has been blocked by CORS policy: The response is invalid. CORSエラーとは CORSとはCross-Origin Resource Sh…

【JSなし】CSSのみで中の要素を高さ揃えする方法

css

外側ボックスを高さ揃えする方法 See the Pen exeGgv by funclur (@funclur) on CodePen. ※codepenのlogoをクリックして別タブでご確認ください。 <div class="box-wrap"> <div class="box"> <div class="content1"> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテ</p></div></div></div>…

Vue.js初心者がいち早く習得するためのロードマップ

公式ガイドライン jp.vuejs.orgVueのガイドラインです。 基礎から学ぶVue.js cr-vue.mio3io.com Vue.js入門 qiita.com JS初心者がVue.jsでSPAを作ろうと思ってやったこと qiita.com Vueを学び、SPA対応のポートフォリオサイトを自作するまでの道のり qiita.c…

【Vue.js】数字の計算をバインディングで表示させる

Vue.jsを使用して数字の計算をバインディングで表示させます。やりたいことは以下です。1.価格の初期値受け取り 2.セレクトボックスで個数変更 3.価格の変更 <div id="app"> <p>{{ a }}</p> <select v-model="b"> <option disabled="disabled">選択してください</option> <option value="1">1個</option> <option value="2">2個</option> <option value="3">3個</option> </select> <p>小計:{{ sum }}</p> </div>

【中級者向け】痒い所に手が届くSourceTreeの使い方~こういう時どうする?~

Git

過去に戻って新規ブランチを作成、作業をやり直したい 過去のコミットを打ち消したい(リバート) 履歴を一直線にしたい(リベース) コミットを一つにまとめたい(スカッシュ) リモートリポジトリから最新の状態を取得したい(フェッチ) リモート追跡ブラ…

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

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

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

CodepenでできるVueの基礎を学ぶVol.3 イベントとフォーム入力の受け取り

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

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

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

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

基礎から学ぶ 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.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の…