Webの仕組み Web とはインターネット上で標準的に用いられている、文書の公開・閲覧システムのこと。文字や画像、動画などを一体化した文書をネット上で公開・配布したり、また、それを入手・閲覧することができる。 “Web”とは「クモの巣」という意味であり…

SSHとは SSHは、離れた場所にあるサーバの中で作業を行いたい場合に利用する。暗号や認証の技術を利用して、安全にリモートサーバと通信することができる。 離れた場所にあるサーバのことを「リモートサーバ」や「リモート環境」、省略して「リモート」と呼…

Linux Linuxは、サーバー向けによく利用されている「OS」の一種。 Linuxとは Linux (リナックス)は、コンピュータ用の OS(オペレーティングシステム)の一種。OS とは、operating systemの略で、コンピュータ全体を管理している基本的なプログラムのこと。 OS…

サーバーとは サーバーとは、サービスを提供するコンピュータのことやそのコンピュータにある様々な機能(処理)の事を指す。もっと簡単に言うと、ある特化した機能を使うためだけのパソコン、または何かに特化した機能自体の事だと認識できる。 サーバーが必…

チャット画面が自動で更新されるようにする。 左のユーザーが投稿すると、右側のユーザーのブラウザで操作することなくメッセージの追加が行われている。 なぜ自動更新機能が必要か ここまで作ってきたChatSpaceで 、自分が投稿したメッセージは非同期に投稿…

グループ新規作成・編集画面において、ユーザーをインクリメンタルサーチできるように実装する。 インクリメンタルサーチは、以下の画像のように文字が入力されるごとに検索をかけ、結果を表示できる仕組みのこと。 インクリメンタルサーチ実装のステップ ・…

現状でもメッセージの送信機能を実装してあるが、メッセージを送信するたびに送信画面にリダイレクトしているため、ビューが毎回再描画されてしまう。非同期通信を使って、メッセージの送信を非同期で行えるようにする。 APIを作成 これまでchatspaceで使っ…

投稿の検索をインクリメンタルサーチで検索できるようにする。 インクリメンタルサーチを実装して以下の画像のように文字が入力されるごとに、検索をかけ結果を表示するように実装する。 事前準備 Pictweetの投稿検索をインクリメンタルサーチで行えるように…

作成する機能を把握する 今回作成する機能は以下の画像のような機能。いままでのpictweetのコメント送信機能と異なるのはajaxを使って非同期通信で行っている点である。 作業ディレクトリを以前に完成させたpictweetに移動 ターミナル 1 2 3 $ cd #ホームデ…

非同期通信を学ぶために、簡単なToDoアプリを作成する。 まずはそのアプリケーションの準備をする。 作成するアプリケーションを把握 今回作成するアプリケーションは以下の画像のようなTodoアプリ。これまで作成してきたRuby on Railsのアプリケーションと…

Webアプリケーションの統合テスト モデルの単体での機能のテストであったり、コントローラの特定のアクションのテストを書く方法までで記述してきたのはあくまで単体テストである。 特定の機能・バリデーションなど、単独では予測した仕様になっていることは…

モデルのテストのステップ モデルのテストを完成させるためのステップは以下の通り。 RSpecの導入 その他テストで使うgemの導入 RSpecでテストを行う 1. テストで使うgemの導入 まずは、テストで使用するGemをアプリケーションに導入する。 問題1：テストで…

コントローラーのテストとは、コントローラー内のメソッドであるアクションが呼ばれた際の挙動をチェックするものになる。1つのアクションにつき、以下の2点を確かめる。 1.アクション内で定義されているインスタンス変数の値が期待したものになるか 2.アク…

factory_bot 簡単にダミーのインスタンスを作成することができるGem。他のファイルで予め各クラスのインスタンスに定めるプロパティを設定しておき、specファイルからメソッドを利用してその通りのインスタンスを作成する。factory_botを利用すれば、user_sp…

RSpecの準備をする Pictweetのテストコードを書いていく。まずは「rspec-rails」というGemをインストールし、RSpecを利用できるようにする。続いて、RSpecの設定を行う。その後、実際にRSpecのコードを書きながらRSpecの基礎文法を学ぶ。 Gemをインストール …

テストとは プログラミングにおけるテストとは、「プログラムが意図した通りに動くことを確かめる」ことを言う。このテストもまたプログラムによって行っているが、便宜的に、本番の環境で実際に作動するプログラムを「プロダクションコード」、テストを行う…

メッセージ送信機能実装のステップ モデルを作成する ルーティングを設定する 該当するアクションをコントローラに定義する メッセージ送信機能を実装する グループにメッセージを表示する サイドバーに最新のメッセージを表示する ヘッダーを修正する グル…

実装する機能 グループの新規登録・編集機能を実装する。 「グループの新規登録」画面で、「グループ名」と「所属メンバー」を入力して登録できる機能を実装。所属メンバーは、アカウントを作成している全メンバーが表示されるようにする。 そのために、「グ…

ユーザー管理実装のステップ ユーザー管理機能を以下のステップで実装する。 deviseのインストール Userモデルを作成する deviseのビューファイルの追加 サインアップ機能の追加 ユーザー情報編集機能の追加 ログアウト機能の追加 フラッシュメッセージの表…

（検証ツールの使い方） 検証ツールを使えば、クラスの構造を確認し、どんなCSSがあたっているか確認できる。自分で作ったサイトのフロントがしっかり作られているか検証ツールを使いながら確認する。 フロント実装がわからなくなった時の対処方法 検証ツー…

ルーティングの設定を行う 仮のルーティングを設定する。ルートパスへのアクセスがあったら、messages_controllerのindexアクションが呼び出されるようにする。 ルーティングを以下のように設定。 config/routes.rb 1 2 3 Rails.application.routes.draw do …

以下のように3つのSNSサービスにリンクするアプリケーションを実装していく。 各リンクは以下のページへリンクしている。 1 2 3 https://www.facebook.com/ https://twitter.com/ https://www.instagram.com/ 実装は以下のステップで進めていく。 railsの新…

Hamlを導入 まずは、HTMLをより効率的に書けるようになるビューのテンプレートエンジンを導入する Hamlとは Hamlとは、HTMLよりも簡単に書くためのビューテンプレートエンジン。公式サイトによると「マークアップは美しくあるべき」という原則に基づいて開発…

BEM BEMとは、多くの開発者が取り入れているCSS設計。BEMは、厳格なクラスの命名規則が特徴。BEMはBlock、Element、Modifierの頭文字を取ったもので、ページを構成する要素をBlock、Element、Modifierのどれかに当てはめてクラスを命名する。 CSS設計 CSS設…

Sassとは SassとはCSSの機能を拡張した言語。Sassを利用することで、CSSを効率的に書けるようになる。SassはCSSに非常に似ているが異なる言語である。CSSを簡潔に書けるだけではなく、CSSの中で変数を使ったり、計算を行うことなどができる。 Sassファイル S…

ChatSpaceの機能を洗い出す ChatSpaceを使ってみて、どのような機能があるか洗い出す。先に必要な機能を把握してからデータベース設計をする。 例）Pictweetの場合 ユーザー管理機能 ツイート機能 コメント機能 必要なテーブルを考える 機能ごとに必要なテー…

正規化はなぜ必要なのか 以下のような生徒とその生徒が受ける授業を管理するためのテーブルがあったとする。 id student homeroom class1 class2 class3 0 田中太郎 2-4 国語 英語 数学 1 鈴木次郎 3-5 英語 物理 数学 テーブルの問題点 このテーブルには問…

テーブルとエンティティ エンティティとは現実世界の概念をデータベースで扱うデータとした場合の呼び名。エンティティをデータベースのオブジェクトに変換するとテーブルになる。つまり、「エンティティ = テーブル」と考えてほとんど差し支えない。 成績管…

データベース設計とは データベースの設計とは、作成するサービスやシステムに必要な情報をどのようにデータベースで管理するかを決める作業である。データベース設計をしっかりと行うことで、サービスが複雑になった場合でもより効率的かつ簡易的にデータの…

データの結合 例えば、ユーザーのフルネームの一覧を取得したいとする。フルネームは"family_name"と"first_name"から成るので、以下のようなSQLを書くことが出来る。 1 2 SELECT family_name, first_name FROM users すると実行結果は以下のように表示され…