サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
デスク環境を整える
qiita.com/masamitsu-konya
自分用メモ。 会社のPCやら、家のPCやら、違う環境で作業している場合に、 新しいプロジェクトを立ち上げた時とかGitHubからローカルにcloneしたい時のやり方。 環境はMacっす。 リポジトリのページからclone URLをコピー GitHubでcloneしたいリポジトリのページに行き、 画面右下のコピーボタン(下図)を押す。 terminalでgit cloneする terminalでcloneしたいディレクトリに移動し、 git cloneのあとに、先ほどコピーしたものをペーストする。
29日に人生初の胃カメラをしてきます、デザイナーの紺谷です。 さて、うちの会社は基本Ruby on Railsを使っていて、 フロント側だとコーディング作業効率化のために 最近ではBootstrapを使うようにしています。 もう有名すぎて何を今更って感じでしょうが、 Bootstrapが使えるGemに、 bootstrap-sassっていうのがあって、 これをカスタマイズして使う方法について 今回は紹介したいと思います。 ※今回はRuby on Railsでの使い方に限って解説します インストール 以下の2行を Gemfile に記述してください。
結構適当ですが、自分用にまとめたものです。 SASS、SCSSとは? SASS = CSSを拡張したメタ言語 SCSS = SASSの別文法(Sassy CSS)CSS風にかける文法。 どんなことができる? 変数 ($var) セレクタのネスト ミックスイン(@mixin) セレクタの継承 (@extend) 簡単なサンプルコード /***** 基本 *****/ /* 変数 */ $black: #333; $gray: #888; /* mixin */ @mixin logofont { font: { family: "lucida grande", "lucida sans", sans-serif; size: 300%; weight: bold; } } /* ネスト */ body { margin: 0 auto; width: 800px; header { h1 {
html.erbファイルでjs直書きでその中にrubyのコードを埋め込んでいる状態のものをslimに置き換えるときの書き方RubyHTMLRailserbslim
AWSのEC2インスタンスをローンチしてから、Apache + passenger + Ruby2.1.2 + Rails4.1.4の環境を構築し世の中に公開するまでのコマンドまとめRubyRailsApacheEC2passenger ひたすら、コマンドだけまとめてます。 本職デザイナーなので間違ってるとこあるかもしれませんが、その場合はご指摘ください。 立ち上げたインスタンスにSSHで接続してください。 以下のコマンド内では ドメイン名: domain_name railsアプリ名: rails_app_name → 環境変数で使用する場合は RAILS_APP_NAME として記載してますので、それぞれ書き換えて使用してください。 あと、途中で 長い文字列1 長い文字列2 を生成して使っている箇所もあるので、 そこも書き換えて使用してください。 sudo yum update -y
自分用メモとして。 とりあえずRails使ってアプリケーション開発したいので、 環境構築の手順をザクっとまとめました。 Railsに必要な環境をインストールして、 Railsプロジェクトを作成して、 githubにあげるまでをまとめました。 以下のページを参考にさせていただきました 以下のページのコマンドのところだけのほぼほぼコピペです。(すいません。。。) やっている内容を深く知りたいなら、以下のサイトを見ていただいたほうが しっかりと説明も書かれていますので、良いかと思います。 Rails開発環境の構築(rbenvでRuby導入からBundler、Rails導入まで) MacにHomebrewをインストールする githubの使い方: Railsアプリの作成からgithubへのはじめてのpushまで Homebrewのインストール
# Require any additional compass plugins here. # Set this to the root of your project when deployed: http_path = "/" #HTTPパス css_dir = "stylesheets" #cssが書き出されるディレクトリ名 sass_dir = "sass" #sass(scss)ファイルがあるディレクトリ名 images_dir = "images" #画像を置くディレクトリ名 javascripts_dir = "javascripts" #javascriptを置くディレクトリ名 # You can select your preferred output style here (can be overridden via the command line): # outp
WebStorage APIってなに? ユーザのローカル(ブラウザ?)にデータを保存するための仕組み。 ローカルで扱えるデータベースを思っていただければ良いかなと。 データの保存・上書き・削除・全クリアなどの操作は、JavaScriptで行う。 クッキーとの違いは? 有効期限なく永続的に利用できる 5MBまで利用できる(クッキーは4KBまで) 必要時に利用できる(クッキーはサーバーアクセス時に自動送信) 基礎知識 基本は key value のペアで保存 ドメイン&ブラウザごとに格納される モバイルでも使える 値は必ず 文字列 で保存される サンプル用のファイルを作ってみた まあ使って見る前に簡単にサンプル用のソース書いたので、コピペして使ってください。 <!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <titl
LocalStorageもデータベースみたいに使えないかな? ということでやってみます。 入力用のフォームサンプルを作ってみた 以下にLocalStorageに入力する用のフォームを作ったのでコピペして使ってください。 <!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>WebStrage API</title> <script type="text/javascript"> function init() { //ここにコードを書いていきます } </script> </head> <body onload="init()"> <form id="form"> <label for="name"> 名前 <input type="text" name="name" id="name"> </label
サイトが大きくなればなるほど未使用セレクタとか増えちゃってCSSで余計な容量食っちゃったりしませんか? そんな時に、ページごとに使っていないセレクタを見つけて削除したい。 いろいろ未使用セレクタを見つけるツールがあるみたいですが今回はChromeの開発ツールを使いました。 未使用CSSセレクタの見つけ方 Choromeの開発ツールのAuditsをクリックし、 Runボタンをクリック。 Remove unused CSS rulesを開くと そのページで使われていないCSSセレクタが一覧で表示されます。 未使用CSSセレクタの削除 あとは以下の手順で削除する。 他のページのviewやjavascriptでそのセレクタが使われていないか調査 使われていない場合は削除する 自分の環境だとRails使っているので grepかけて他で使ってないかチェックしてから削除します。 grep -r 'fb_
このページを最初にブックマークしてみませんか?
『@masamitsu-konyaのマイページ - Qiita』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く