2015-01-01から1ヶ月間の記事一覧
外部スタイルシートを指定するリンクタグを生成 stylesheet_link_tag(スタイルシートへのパス [, HTMLオプション]) ＜＜ options ＞＞ :media 関連ファイルの出力メディアのリンクタイプ screen,tty,tv,projection,handheld,print,braille,aural,allが指定可…
やりたいこと ドラッグ＆ドロップで、要素を並べ替えられるようにしたい ＜＜ 追加要件 ＞＞ 並び替えドラッグ時に表示するカーソルを指定したい 移動中の項目を半透明にしたい 移動先のスペースをハイライト表示したい 並び順をクッキーに保存したい ソース…
やりたいこと 郵便番号を入力して住所を検索したい 使用したAPI on( events [, selector] [, data], handler(eventObject)) マッチした要素に任意のイベントをバインドします。 match 文字列中で一致するものを検索する String のメソッド。 結果情報の配列…
Ajaxとは 「Asynchronous SavaScript + XML」の略称で、 JavaScriptから、非同期に通信を行って、 XMLデータを取得し、その内容を取り扱うものです。 jQueryを使う利点 Ajaxはブラウザによって、 「XMLHttpRequestオブジェクト」の実装方法が異なります。 jQ…
やりたいこと 金額などのカンマをフォーカスが失われた時に入れたい フォーカスを受けたときはカンマを無くしたい 今回使ったAPI focus(fn) フォーカスを受け取ったタイミングで発生する。 blur(fn) フォーカスを失ったタイミングで発生する。 val() 全ての…
今回やりたいこと プレースホルダを表示する プレースホルダの色を変える フォーカスを受けたら、プレースホルダを消す フォーカスを失ったときに、テキスト欄が空なら、プレースホルダを表示する 今回使用したAPI focus(fn) フォーカスを受け取ったタイミン…
#id 指定されたidを持つ要素を選択する。 ex)ボタン押下で「1番目」のみを赤くする。 .html <p id="first">1番目</p> <p id="second">2番目</p> <p id="third">3番目</p> <input type="button" id="bt" value="クリック"> .js $(function() { $("#bt").click(function() { $("#first").css("color", "red") }); }); .class 指定されたクラスを持つ要素を選択する。 e…
jQueryは下記サイトから入手可能です。 http://jquery.com/jQuery ダウンロードしたファイルを読み込むには、 外部のJavaScriptを読み込むのと同じように、 下記のように指定してやります。 <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script> jQueryの基本文法 $(function(){ $("セレクタ").メソッド(パラメ…
基本書式 セレクタ, ... { プロパティ:値; ... } コメント /* コメント */ セレクタの種類 クラスセレクタ 「.」に続く任意の名前をセレクタとするものを クラスセレクタといいます。 HTML文章内の複数の要素に、同じclass名を指定できます。 また、「要素.…
<script type="text/javascript"> //行を追加する function addRow() { var i, j; var rowNumber = rowNumber++; var tmplRowNode = document.getElementById("row0"); var rowNode = tmplRowNode.cloneNode(true); rowNode.id = "row" + rowNumber; //コピーしたtrの直下にあるすべてのノー…
基本知識 DOMとは ページが読み込まれた後に HTMLやXMLの文章に対して要素の置換・追加・削除を操作する 標準のインターフェイスである。 DOMではHTMLやXMLの文章をツリー状の構造にして管理します。 ツリー構造はノードツリーと呼び、全てのノードには ツリ…
サブウィンドウを表示する <script type="text/javascript"> function winOpen() { window.open("./subpage.html","sub", "width=400, height=300"); } </script> <form> <input type="button" value="サブウィンドウ" onclick="winOpen()"> </form> ウィンドウの位置 ウィンドウの位置を直接指定できます。 <script type="text/javascript"> function winOpen() { window…
フォームの要素にアクセスする document.フォーム名 document["フォーム名"] document.forms["フォーム名"] フォーム内の入力要素(コントロール)にアクセスする document.フォーム名.コントロール名 document["フォーム名"]["コントロール名"] document.form…
JavaScriptは、何らかの出来事が起こった時に、 実行することが多く、このような「出来事」のことを イベントと呼びます。 ボタンが押されたとき <input type="button" value="クリック!" onclick="alert('ボタンがクリックされました。')"> マウスを合わせたとき onmouseover="this.value='マウスオーバー'" マウスを外したとき onmouseout="this.val…
Tomcatの設定 今回は、Tomcatプラグインが入っていることを前提に、 話を進めます。 入っていれば、Tomcatアイコンが出ているはずです。 バージョンとTomcatホームを設定 下記の設定は、各自の環境にあった設定をします。 Tomcatのバージョン Tomcatのホーム…
パブリックリポジトリ (public repository) として公開する場合、 Railsでセッション変数の暗号化に使用するための、 いわゆる秘密トークン (secret token) を 必ず更新することが重要です。 config/initializers/secret_token.rb # Be sure to restart your…
アラート アラートダイアログの出力を行います。 <script type="text/javascript"> alert("Hello World"); </script> 確認ウィンドウ OK,キャンセルのダイアログの出力を行います。 <script type="text/javascript"> var flg = confirm("確認ダイアログ"); if(flg == true){ document.write("Hello"); }else{ document.write("see you</script>…
基本構文 <html lang="ja"> <head> <meta charset="utf-8"> <title>JavaScript</title> </head> <body> <script type="text/javascript"> //ここにJavaScriptを定義する。 </script> </body> </html> コメント 1行 //コメント 複数行 /* コメント コメント */ テキストを表示する 文字の出力を行う。 <script type="text/javascript"> document.write("Hello Wo…
１対多 テーブル情報 下記のようなテーブルがあった場合の設定を確認します。 users id name 1 First Name 2 Second Name microposts id content user_id 1 First post 1 2 Second post 1 3 Three post 2 関連付けの設定 1人のユーザーに複数のマイクロポス…
文字列の長さをチェック validates :検証するフィールド名, length: { 検証パラメータ } ex) validates :content, length: { maximum: 140 } オプション オプション 説明 :minimun 最小の文字列長 :maximun 最大の文字列長 :in 文字列長の範囲(range型) :tok…
学んだことを覚書していきます。 随時更新予定。 rbenvによるRubyのインストール Git GitHab Gemfile デプロイ railsコマンド・rakeコマンド ルーティング モデル マイグレーション 値の受け渡し バリデーション 異なるデータモデル同士の関連付け 秘密トー…
コントローラーからビュー @記号で始まる変数はRubyではインスタンス変数です。 ビューでは自動的にこれらのインスタンス変数をつかえます。 app/models/user.rb class UsersController < ApplicationController def index @users = User.all end end ⇓ app/…
すべてのレコードを取得 モデル.all
RESTfulなURLを自動生成 resources :リソース名 [, オプション] 生成されるルート Helper HTTPメソッド URL アクション 説明 XXXs_path GET /XXXs(.:format) index 一覧画面を生成 XXX_path GET /XXXs/:id(.:format) show 詳細画面を生成 new_XXX_path GET /…
test::unitを組み込まないでアプリケーションの作成を行う $ rails new 名前 -T Test::Unitの代わりにRSpecを使うように、Railsの設定を変更する $ rails g rspec:install RSpecのテストを自動的に生成しないようにする $ rails g controller 名前s [アクシ…
Herokuのセットアップ Herokuにユーザ登録する https://signup.heroku.com/identity 必要なHerokuソフトウェアをインストール Heroku Toolbeltを使用する。 Ubuntuの場合下記コマンドのみでインストールできた。 wget -qO- https://toolbelt.heroku.com/inst…
Gemfileの設定 Rubyのバージョンを指定 ruby '2.0.0' SQLiteを開発(debelopment)環境のみで使用する設定 Herokuで使用するPostgreSQLとの衝突を避けるため group :development do gem 'splite3', '1.3.8' end RailsがPostgreSQLと通信できるようにする group…
GitHubでリポジトリを作成しアプリケーションをプッシュする 現在のメイン(master)ブランチ用の"origin"としてGitHubに追加 $ git remote add origin https://github.com/<user name>/<repository name>.git GitHubにプッシュする -u オプションを付けることによって、プッシュ先がデフォ</repository></user>…
最初のシステムセットアップ PC１台につき１回必要な必須の設定。 $ git config --global user.name "名前" $ git config --global user.email "メールアドレス" 便利なシステムセットアップ 色分け $ git config --global color.true エイリアス $ git conf…
rbenvのインストール rbenvとは複数のRubyを管理することができる。しかし、rbenvには、Rubyのインストール自体をサポートしてない様なので、ruby-buildというプラグインも合わせてインストールする。 GitHubからrbenvとruby-buildをクローン $ git clone ht…
