前章でHTMLについて学び、ウェブサイト上に文字を表示できるようになりました。しかし、このままではリンク以外は黒色の文字が並んでいるだけです。これを装飾する役目を持っているのがCSSです。 本章では、CSSに必要なファイルを作成し、コードを書きながら…
ショートカットキーとは、コンピューターに特定の動作をさせるために押すキーのことを指します。マウス（トラックパッド）で行っている操作を、ショートカットキーで置き換えることができます。 ショートカットキーは、修飾キーと文字キーの組み合わせから成…
私達は日頃、様々なWebページを閲覧しています。それらのページの情報は、HTMLとCSSという2つの言語によって構成されています。 HTML（HyperText Markup Language）エイチティーエムエル（ハイパー テキスト マークアップ ランゲージ）ウェブサイトに表示さ…
用意された機能Rubyには、最初からさまざまな機能が用意されています。 プログラムを書くということは、この機能を適宜呼び出して使用することと言い換えてもよいでしょう。 文字列を記述する、数値を計算する、配列で複数の要素を管理するなど、これらはす…
既存のクラスの引き継ぎ Rubyではデータの元となる設計図を作り、その設計図を元に実体となるデータを作るという手順を踏むのでした。 この設計図をクラス、実体となるデータをインスタンスと呼びます。 実はこのクラスは親子関係を作ることができます。親子…
まずは、ブロックを使った簡単なコードを以下に示します。 【例】 ages = [20, 56, 32] ages.each do |age|puts ageend # ターミナル出力結果# 20# 56# 32 上記はeachメソッドで配列の要素を1つずつ取り出してターミナルに出力しています。 見慣れたコードか…
case文 case文とは、条件分岐を表現するための文法です。複数の条件を指定する時に、if文のelsifを重ねるよりもシンプルにコードを書くことができます。 並列する条件が多数ある場合は、if文よりもcase文を使った方がコードとして読みやすくなります。 case…
レスポンシブwebデザインを学ぼう レスポンシブ対応する方法 Webサイトをレスポンシブ化するためには以下の工程が必要です。 表示領域の設定をする画面サイズによってCSSを切り替えるための設定をする画面サイズごとに適用するCSSを記述する 表示領域を設定…
画面に今回はPC表示時のレイアウトを実装します。 それに先立ち、レスポンシブWebデザインとは、端末の画面幅に応じて表示が変わるWebデザイン設計のことをおさえておきます。 PCの完成イメージは以下です。 次に以下のフォルダ・ファイルを作成します。 い…
投稿検索機能を実装しよう 検索フォームを作成しよう 検索の入力欄とボタンには、フォームを使う ここではルーティングを書いていないのでエラーがでる これから詳細を設定していく ルーティングを設定してあげる tweet.rbでwhereメソッドとlike句を使用して…
ツイートにコメントを投稿しよう編 まずターミナルでコメントのモデルを作成する 生成されたマイグレーションで下記を追加する t.integer :user_id t.integer :tweet_id t.text :text そしてマイグレーションを実行する アソシエーションを定義する belongs_…
複数ページで利用する表示の一部をまとめよう 部分テンプレートとは、ビューファイルで繰り返し使用するコードを切り出し、再利用する仕組みのこと app/views/tweetsに_tweet.html.erbを作成する そしてindex.html.erbの3〜26行目を⌘+xで切り取る そして⌘+v…
投稿者本人か確認して表示を変えよう 編集ボタンと削除ボタンの表示部分をif文で囲う ツイート詳細ページ同様に、if文で表示を切り替える current_user.id == tweet.user_idという条件を含むif文でプルダウンメニューごとに囲むことによって、「未ログイン時…
ユーザーのマイページ機能を実装します ツイートにユーザー情報を追加する カラムの追加の手順はnicknameカラムを追加するのと同様、ファイル名の命名規則にしたがって、自動でコードが記述されたマイグレーションを生成する そしてapp/controllers/tweets_c…
ユーザ登録機能を実装する ユーザ関連の機能はGemを使用する Twitterなどのウェブサイトにはログイン機能がある これはユーザに対してアカウントを発行して、そのアカウントでユーザの情報を管理することができる 今回はヘッダーにログインと新規登録のボタ…
showで詳細表示をする 手順 1ツイート詳細画面よルーティングを記述 詳細画面のパスは編集や削除と同じくツイートごとに管理する idが1の詳細画面は/tweets/1のようなパスになる resourcesの最後に:showを追加 コードがスッキリするのでonlyオプションの記述…
ツイートの編集機能を実装します。editとupdateが該当します。 編集の考え方は「editアクションで編集ページを表示」→「updateアクションでデータの更新」といった流れで実装する。 resourcesでeditを追加することで、編集画面への遷移ができる。 次に編集ボ…
削除昨日はdestroyが該当する。 実装の流れは以下の通り 1ツイートを削除するためのルーティングを設定 2削除ボタンをビューに追加 3destroyアクションをコントローラーに定義 4削除後のビューの追加 ルーティングの設定 resourcesに:desrtoyを追加して、des…
投稿機能を実装する際、ツイートの新規投稿機能を追加する。newで生成、createで保存する。 投稿画面へ遷移するためにNewアクションへのルーティングを設定する resources = tweets, only: [:index, :new] 次にnewアクションを定義する def new @tweet = Twe…
モデルの作成は次の手順です。 モデルの作成→テーブルの作成→ルーティングの作成(コントローラーを動かすため)→コントローラーの作成→ビューの作成(見た目を作る) モデルはデータベースとのやりとりを担う この時テーブルはモデルのファイルと一緒に作成され…
