WDI-Slides-14.pptx

Size: px

Start display at page:

Download "WDI-Slides-14.pptx"

よりおこけい
4 years ago
Views:

1 WEB+DB システム ( 入門編 ) 第 14 回 My Twitter サイトの制作

2 今日のテーマ p 前回制作した My Twitter をさらに拡充させて形にしてみます p 新しい構造の実装として自己参照結合による多対多の構造を実装してみます

3 コミュニケーション ( 再掲 ) フォロー情報の登録を考えてみます後期に一連の技術的な発展系も考えてみて本格的なつぶやきコミュニケーション構造を作ってみたいと思います各ユーザに顔写真を登録するユーザが自由に自分のホームをデザインできるフォローしているつぶやきとリンクを取るなるべくシステムの設計能力を高めるための題材として各学生自身のオリジナリティのあるシステム設計をどう学ぶかシラバスを重視しつつアレンジを試みてみます ( 予告編になってしまいました ) ただ実現できるかは

4 ツイートする自分のつぶやきを書き込むのは Chirp テーブルのデータを New( 新規登録 ) する形で実装できます前回は ID の設定がなかったため前回のままで New するとリレーションが貼れないままでした

5 User に情報を追加 User にニックネーム (Handle 名 ) を追加する顔写真の画像はリレーションで photos テーブルからリレーションを設定して実装する Add 項目名 To モデル名という名称の Migration を生成させる rails generate migration AddNickNameToUsers nick_name:string rake db:migrate

6 User.rb app/models/user.rb で Attr_accessible に :nick_name を追加する

7 User 新規登録の修正 app/views/devise/registrations/new.html.erb を修正し新規登録の際に nick_name を登録するようにする

8 User 編集の登録 app/views/devise/registrations/edit.html.erb を修正し nick_name を編集できるようにする

9 ユーザ情報編集へのリンク app/views/welcome/index.html.erb にユーザ情報編集へのリンクを追加する <p><%= link_to ' ユーザ情報編集 ', [ :edit, :user_registration ] %>

10 テストランここまでの修正でユーザ編集でニックネームが登録できるか確認する

11 テストラン (2) 新規登録でニックネームが登録できるか確認

12 つぶやきのクリアつぶやきにログインユーザ情報を追加します前回までの修正でつぶやいたデータは user へのリレーション情報が保存されていないため一旦全部削除して下さい

13 chirps_controller.rb app/controllers/chiprs_controller.rb を修正し create メソッドに user_id の設定を 1 = current_user.id これによって新規登録されるつぶやきにログインしたユーザが結びつけられる

14 Views から user_id を削除 app/views/chirps/_form.html.erb app/views/chirps/show.html.erb から user_id を扱っている部分を削除する

15 index.html.erb app/views/chirps/index.html.erb の user_id の表示を user.nick_name に書き換える

16 chirps_controller.rb 一覧ではまず自分がつぶやいた情報だけを表示するようにする app/controllers/chiprs_controller.rb を修正し index = Chirp.all = Chirp.find_by_sql("select * from chirps where user_id = #{current_user.id}") に書き換える find_by_user_id( current_user.id ) の場合該当レコードが一つだけだと Array 型ではなく Chirp クラスが戻るためエラーになる

17 テストラン無事つぶやきがニックネームと共に表示され別のユーザ ID で登録したつぶやきが表示されなければ OK

18 顔画像の登録画像ファイルの登録の技術的な説明は第 12 回の資料を参照して下さい画像用ファイルのクラス名は Face とする User テーブルと 1 対 1 のリレーションとする

19 Face Class Face Class のフィールド : user_id, integer (User へのリレーション Index) name, string, ( ファイル名 ) size, integer ( 画像ファイルサイズ [ バイト ]) content_type, string (MIME タイプ名 ) content, blob (content of image file) 今回は devise の controller が編集できないため scaffold で生成することにします

20 Face クラスの生成以下のコマンドを 1 行で入力します rails generate scaffold Face user_id:integer name:string size:integer content_type:string content:binary 次にデータベースを生成します rake db:migrate

21 リレーションの設定 face から見ると所属する User は一つだけ必ず存在する faces.rb に belongs_to :user を追加 user.rb から Face へのリレーションは has_one の関係になる user.rb に has_one :face を追加する attribute_accessible に :face を追加して下さい

22 _form.html.erb の修正 app/views/faces/_form.html.erb を修正する :multipart => true の追加 name, size, content_type, content などの入力フィールドを削除する user_id の表示を削り <%= f.label current_user.nick_name %><br /> <div class="field"> <%= f.label " 顔画像 " %><br /> <%= file_field :file, :upload %> </div> に置き換える

23 faces_controller.rb app/controllers/faces_controller.rb の def new メソッドを修正する新規登録だけではなくユーザ画像があったら = = Face.new if!@face

24 faces_controller.rb app/controllers/faces_controller.rb の create メソッドを修正する全面的に書き換える ( 修正途中のまま時間切れしました ) 動作の切り分けが済んでいません顔画像の登録はから行って下さい暫定的に update メソッドも create と完全に同じとすると動作します本来なら Helper に module を登録すべき

25 faces#create # POST /faces # POST /faces.json def create if = params[:file][:upload] = Face.find_by_user_id( current_user.id ) face_params = { :user_id => current_user.id, :name :size => stat.size, :content_type :content } then respond_to do format face_params ) format.html { :notice => 'Face was successfully updated.' } format.json { head :no_content } else format.html { render :action => "edit" } format.json { render :json :status => :unprocessable_entity } end end = Face.new( face_params ) respond_to do format format.html { :notice => 'Face was successfully created.' } format.json { render :json :status => :created, :location } else format.html { render :action => "new" } format.json { render :json :status => :unprocessable_entity } end end end end end end

26 faces#create

Show.html.erb 表示をリダイレクトした faces/show.html.erb の中身を以下のように書き換える <p id="notice"><%= notice %></p> <p> <b>user:</b> <%= @face.

27 Show.html.erb 表示をリダイレクトした faces/show.html.erb の中身を以下のように書き換える <p id="notice"><%= notice %></p> <p> <b>user:</b> %> </p> <%= link_to 'Edit', %> <%= link_to 'Back', faces_path %>

28 faces_helper.html.erb module FacesHelper def format_column_value(ar, colname) if User === ar format_user_column_value ar, colname elsif Face === ar format_face_column_value ar, colname end end def format_user_column_value( user, colname ) if colname == 'created_at' user.created_at.strftime '%Y-%m-%d %H:%M' if user.created_at else colname end end def format_face_column_value( face, colname ) if colname == 'content' image_tag face.content, face.size, face.name else face.send( colname ) end end end

29 faces_controller.rb app/controllers/faces_controller.rb に file メソッドを追加する def file face = Face.find params[:id] filename = (params[:fileext])? "#{params[:filename]}.#{params[:fileext]}" : params[:filename] if filename!= face.name render :file => File.join( RAILS_ROOT, 'public', '404.html'), :status => 404, :layout => true else send_data face.content, :filename => face.name, :type=>face.content_type end end

30 faces#file

31 Routing の登録 config/routes.rb に file のパスを登録する get 'faces/file' => 'faces#file

32 Chirt#index app/views/chirps/index.html.erb を修正しつぶやきに画像を追加します

33 テストランつぶやきに顔写真が添えられました

34 ここまでで終わりとします自己参照結合によってフォロワーの人たちのぶつやきが出てくるようにする修正は見送りました ( 設計上論理的にこれだとまだ問題があります複数の人をフォローしていると A さんが B さんのフォロワーとして B さんに対して書き込んだ内容が C さんのつぶやきにも表示されてしまう但し今回は主役は自分一人ということにします ) また構造的にもとても模範になれないところで終わってしまって申し訳ありません続きは各自が挑戦してみて下さい

35 前期を終えて n 駆け足で Rails の機能をあれこれと試してみましたまたデータベースなどの勉強もしてみました n 私のサンプルは必ずしも正解とは限りませんとにかく動かしたという程度ですのであ先生のは間違ってると思ったらご連絡をいただけるとありがたいです n とにかく色々と作って試してみるのがプログラミングを覚える最短距離です n 後期はもっと実践的な WEB+ データベースをたくさん作ってみたいと思います

WDI-Slides-11.pptx

WDI-Slides-11.pptx WEB+DB システム ( 入門編 ) 第 11 回 (2016 年 6 月 23 日 ) My Twitter サイトの制作今日のテーマ p 一気に My Twitter サイトを作ってみる p プロジェクトの生成からの作業を総復習する p その際にログイン認証を行いユーザの登録を組み合わせる p ログイン認証には devise を用いるプロジェクト名を決める名前なので何でも構いませんが