Recomendados
Mais conteúdo relacionado
Destaque
Twitter教科書
- 1. RRuubbyy oonn RRaaiillssコース TTwwiitttteerrアプリを作ろう!!!!
- 2. TTwwiitttteerr !!!!?? ! ! つぶやき((ttwweeeett))を投稿するだけでなく、みんなのつぶやきを見れるSSNNSS SSNNSSサービスの火付け役とも言われる超有名サービス!!!!
- 4. ターミナル SSuubblliimmee TTeexxtt 22 GGooooggllee CChhrroommee 開発に必要な素材ファイルをチェックしよう!!!! 「rraaiillss素材」というフォルダがあ�るか確認!!!! ! ((ない人はメンターさんにファイルをもらってください!!!!)) 開発に必要なアプリケーションをチェックしよう!!!!
- 5. ② デスクトップへ移動＆rraaiillss pprroojjeeccttを作成しょう!!!! …%% ccdd DDeesskkttoopp …%% rraaiillss nneeww {{アプリ名}} …%% ccdd {{アプリ名}} ③ ggiittの準備をしておこう!!!! …%% ggiitt iinniitt …%% llss --aa … … … ..ggiitt … … … … … … … … … ※..ggiittファイルがあ�ることを確認する ① ターミナルを起動しよう!!!!
- 6. ④ サーバーを立ち上げて動作確認!!!! …%% rraaiillss sseerrvveerr こんな画面がでてきたらOOKK!!!! 重要:: サーバーを止めるときは CCttrrll++CC で止める!!!! hhttttpp::////llooccaallhhoosstt::33000000//
- 7. ⑤ wweebbの仕組みを理解しよう!!!! HHTTTTPP == データを通信するときのルール クライアント サーバー ① リクエスト((ページが見たい!!!!)) ② レスポンス((見せてあ�げる!!!!)) ①リクエストのルール ! GGEETT ! PPOOSSTT :: 送ったデータが一時的にしか利用されないときに使う!!!! ! :: 送ったデータを元に新しいページやデータが作られるときに使う!!!!
- 8. ⑤の続き クライアント サーバー ① 次のページを見せて!!!! ② 見せてあ�げる!!!! クライアント サーバー ① サインインしたい!!!! ② サインイン成功!!!! GGEETTの例)) 次のページ PPOOSSTTの例)) サインイン ①で送るデータは次のページ番号 ! 一時的にしか利用しない!!!! ①で送るデータは メールアドレスとパスワード ! ユーザーページが作られる!!!!
- 9. ⑥ RRaaiillssの仕組みを学ぼう!!!! RRuubbyy oonn RRaaiillssはMMooddeell--VViieeww--CCoonnttrroolllleerr ((MMVVCC)) という仕組みから出来ている!!!! クライアント サーバー リクエスト データベース VViieeww vviieeww11 vviieeww22 … CCoonnttrroolllleerr AAccttiioonn11 AAccttiioonn22 … ①ページ11を見せて!!!! ② ・このデータが必要だよ!!!! ・ページを表示して!!!! MMooddeell UUsseerr TTwweeeett … ③データを見せて!!!! ⑤データだよ!!!! ④データのやりとり ⑥ページ11だよ!!!!
- 10. ⑦ 自分のフォルダをSSuubblliimmee TTeexxtt 22から開く FFiillee -- OOppeenn から自分のフォルダを選択するとフォルダ毎開くことができる!!!!
- 11. ⑦の続き CCoommmmaanndd ++ PPでコマンドパレットを出す!!!! ((復習)) ファイル名を入力するとファイルをすぐ開くことができる!!!! 他にも「##」「::」「@@」などをつけると様々な検索が可能となるよ!!!!
- 13. ⑧の続き 次のコマンドを実行しよう!!!! …%% bbuunnddllee uuppddaattee …%% bbuunnddllee iinnssttaallll 次のメッセージが表示されていれば成功!!!! これで準備は完了!!!! ! 次からTTwwiitttteerrアプリの本格的なプログラミングが始まる!!!! ※注意…サーバーを止めた状態で実行する
- 16. …%% rraaiillss ggeenneerraattee ccoonnttrroolllleerr SSttaattiiccPPaaggeess hhoommee ① CCoonnttrroolllleerrを生成((ggeenneerraattee))しよう!!!! 次のコマンドを実行しよう!!!! 自動的に次のファイルが生成されている!!!! ((aappppフォルダ内)) 赤色 :: CCoonnttrroolllleerrの名前 ! 緑色 :: AAccttiioonnの名前
- 17. ② rroouutteess..rrbbを見てUURRLLを確認しよう!!!! ccoonnffiigg//rroouutteess..rrbbを開く ggeett “ssttaattiicc__ppaaggeess//hhoommee” vviieewwss//hhoommee..hhttmmll..eerrbbを表示するUURRLL ③ ページを表示してみよう!!!! …%% rraaiillss sseerrvveerr hhttttpp::////llooccaallhhoosstt::33000000//ssttaattiicc__ppaaggeess//hhoommee サーバーを起動して,, 下に書いてあ�るUURRLLにアクセスする
- 19. ④ アクセスするUURRLLを変更しよう!!!! ccoonnffiigg//rroouutteess..rrbbの中の次のコードを変更しよう!!!! 重要!!!! ルーティングの方法!!!! get {URL} , to: {controller名#action名} root to: {controller名#action名} hhttttpp::////llooccaallhhoosstt::33000000//{{UURRLL}}にアクセス hhttttpp::////llooccaallhhoosstt::33000000//にアクセス ルーティング … どのUURRLLをどのccoonnttrroolllleerr##aaccttiioonnに対応させるかを決めること
- 21. ⑤ ページを追加してみよう!!!! 33sstteeppでできる!!!!新しいページの作り方!!!! ((今回は例としてhheellppページを作ってみよう!!!!)) 11,, ルーティングを行う!!!! ccoonnffiigg//rroouutteess..rrbbの中の次のコードを追加しよう!!!! 22,, ccoonnttrroolllleerrの中にaaccttiioonnを追加する!!!! aapppp//ccoonnttrroolllleerrss//ssttaattiicc__ppaaggeess__ccoonnttrroolllleerr..rrbbを次のコードに変更する!!!! を追加しよう!!!!
- 22. ⑤の続き 33,, aapppp//vviieewwss//{{ccoonnttrroolllleerr名}}の中にvviieewwのファイルを追加する!!!! ccoommmmaanndd++NNで新しいファイルを作成して,, 「hheellpp..hhttmmll..eerrbb」という名前で保存する!!!! ※注意 … ファイルの場所は自分のフォルダのaapppp//vviieewwss//ssttaattiicc__ppaaggeess//の中!!!! …%% rraaiillss sseerrvveerr hhttttpp::////llooccaallhhoosstt::33000000//hheellpp サーバーを起動して,, 下に書いてあ�るUURRLLにアクセスする
- 24. ⑥ 必要なファイルに置き換えよう!!!! デスクトップに「rraaiillss素材」というフォルダがあ�るか確認!!!! ((自分のPPCCを持ってきた人はメンターさんにファイルをもらってください!!!!)) 中にあ�るaappppをrraaiillss nneewwで作成した自分のフォルダの中にコピーする 警告が出るので、すべてに適用を チェックして置き換える!!!! サーバーを起動して,, 下に書いてあ�るUURRLLにアクセスする hhttttpp::////llooccaallhhoosstt::33000000//
- 25. ⑥の続き 次のようなページが表示できれば完成!!!! ※注意 … 表示できない人は自分のフォルダの中のttmmppフォルダを削除してみてね!!!!
- 29. ① ddeevviisseeを使うための準備をしよう!!!! 次のコマンドでddeevviisseeをインストールしよう!!!! …%% rraaiillss ggeenneerraattee ddeevviissee::iinnssttaallll 左の画面が出てくれば成功!!!!
- 30. ② ddeevviisseeを使ってUUsseerr mmooddeellを生成しよう!!!! 次のコマンドを実行する …%% rraaiillss ggeenneerraattee ddeevviissee UUsseerr ③ ddeevviisseeで作ったUUsseerr mmooddeellに名前を保存できるようにしよう!!!! 次のコマンドを実行する …%% rraaiillss ggeenneerraattee mmiiggrraattiioonn aadddd__nnaammee__ttoo__uusseerrss nnaammee::ssttrriinngg ddbb//mmiiggrraatteeに「{{作成時間}}__aadddd__nnaammee__ttoo__uusseerrss..rrbb」が生成される
- 31. …%% bbuunnddllee eexxeecc rraakkee ddbb::mmiiggrraattee ③の続き ddbb//mmiiggrraattee//{{作成時間}}__aadddd__nnaammee__ttoo__uusseerrss..rrbbを次のように編集する 次のコマンドを実行して,, mmiiggrraattiioonn((マイグレーション))を行う!!!! 左の画面が出てくれば成功!!!!
- 32. ③の続き aapppp//ccoonnttrroolllleerrss//aapppplliiccaattiioonn__ccoonnttrroolllleerr..rrbbに次のコードに追加する ※注意 … 最初に書いてあ�るeennddより上 ④ ユーザー登録画面を作成しよう!!!! 次のコマンドを実行する …%% rraaiillss ggeenneerraattee ddeevviissee::vviieewwss
- 33. ④の続き 次のコマンドを実行して,, ddeevviisseeで生成されたvviieewwのルーティングを確認する …%% bbuunnddllee eexxeecc rraakkee rroouutteess UURRLL__PPaatttteerrnnのUURRLLにアクセス ! ↓ ! CCoonnttrroolllleerr##AAccttiioonnに書いてあ�るAAccttiioonnが実行される
- 37. ⑤ ユーザー登録ができるかを確認しよう!!!! nnaammee eemmaaiill ppaasssswwoorrdd ppaasssswwoorrdd__ccoonnffiirrmmaattiioonn :: {{自分の名前}} :: wweebbmmaasstteerr@@lliiffeeiisstteecchh..ccoo..jjpp :: lliiffeeiisstteecchh :: lliiffeeiisstteecchh ssiiggnn__uuppページに以下の情報を入力して,, ユーザー登録を行おう!!!! 左の画面が出てくれば成功!!!!
- 38. ⑤ hhoommeeからssiiggnn__iinn,, ssiiggnn__uuppにアクセスできるようにしよう!!!! aapppp//vviieewwss//llaayyoouuttss//__hheeaaddeerr..hhttmmll..eerrbbの次のコードを変更しよう!!!! %% … %% hhttmmllの中にコードを埋め込む ! ! %%== … %% hhttmmllの中にコードを埋め込んで,, それを出力する ユーザーがサインインしているか どうか判別する
- 39. ⑤の続き aapppp//vviieewwss//ssttaattiicc__ppaaggeess//hhoommee..hhttmmll..eerrbbを次のコードに変更しよう!!!! さっき登録したユーザー情報でssiiggnn iinnしてみよう!!!! eemmaaiill ppaasssswwoorrdd :: wweebbmmaasstteerr@@lliiffeeiisstteecchh..ccoo..jjpp :: lliiffeeiisstteecchh
- 43. ① UUsseerrCCoonnttrroolllleerrを生成しよう!!!! 次のコマンドを実行しよう!!!! …%% rraaiillss ggeenneerraattee ccoonnttrroolllleerr UUsseerrss iinnddeexx sshhooww ② ルーティングを行おう!!!! ccoonnffiigg//rroouutteess..rrbbの次のコードを変更しよう!!!! は よりも下に書く!!!!※
- 55. ① TTwweeeettのMMooddeellを作ろう!!!! …%% rraaiillss ggeenneerraattee mmooddeell ttwweeeett ccoonntteenntt::ssttrriinngg uusseerr__iidd::iinntteeggeerr データベースにttwweeeettモデルをmmiiggrraattiioonnしよう!!!! …%% bbuunnddllee eexxeecc rraakkee ddbb::mmiiggrraattee ccoonntteenntt,, uusseerr__iidd ! ssttrriinngg,, iinntteeggeerr :: データベースに保存するデータの名前 ! :: データベースに保存するデータの型((ssttrriinngg,, iinntteeggeerr,, bboooolleeaann,, 等)) TTwweeeett MMooddeellを作成する
- 56. ② ttwweeeettモデルの設定を行おう!!!! 上から,, そのデータの特徴,, 依存先,, 並べる順番を意味している!!!! aapppp//mmooddeell//uusseerr..rrbbに次のコードを追加する!!!! uusseerrモデルがttwweeeettを複数持てるように設定している!!!! aapppp//mmooddeell//ttwweeeett..rrbbに次のコードを追加する!!!!
- 57. ③ ユーザーページにttwweeeettを表示できるようにする!!!! …%% rraaiillss ggeenneerraattee ccoonnttrroolllleerr TTwweeeettss ccoonnffiigg//rroouutteess..rrbbに次のコードを追加する!!!! 次のコマンドを実行する!!!! TTwweeeettCCoonnttrroolllleerrを生成しよう!!!!
- 58. ③の続き aapppp//vviieewwss//ttwweeeettss//__ttwweeeett..hhttmmll..eerrbbに次のコードを書き込む ttiimmee__aaggoo__iinn__wwoorrddss(( )) … 「〜〜時間前」のような表示方法 aapppp//ccoonnttrroolllleerrss//uusseerrss__ccoonnttrroolllleerr..rrbbのsshhooww aaccttiioonn内に次のコードを追加する aapppp//vviieewwss//ttwweeeettss//__ttwweeeett..hhttmmll..eerrbbを作成する
- 59. ③の続き @@uusseerr..ttwweeeett..ccoouunnttはそのユーザのttwweeeettの数 wwiillll__ppaaggiinnaattee … ! 「次のページへ」などのボタンなどが自動的に配置される!!!! aapppp//vviieewwss//uusseerrss//sshhooww..hhttmmll..eerrbbを次のコードに書き換えよう!!!!
- 61. ④ CCoonnttrroolllleerrのaaccttiioonnを作っていこう!!!! aapppp//ccoonnttrroolllleerrss//ttwweeeettss__ccoonnttrroolllleerr..rrbbのccrreeaatteeを作成し,, 次のコードを書く!!!! ※注意 … 上で「pprriivvaattee」よりも上に追加しよう!!!! aapppp//ccoonnttrroolllleerrss//ttwweeeettss__ccoonnttrroolllleerr..rrbbの最後((eennddより上))に次のコードを追加する!!!!
- 65. ⑦ TTwweeeettしてみよう!!!! hhttttpp::////llooccaallhhoosstt::33000000// サインインしてhhoommeeにアクセスしてみよう!!!! TTwweeeettしたい内容を入れて TTwweeeettボタンを押してみよう!!!!
- 68. 11.. 他のページを追加してみる???? ! ! 22.. デザインを変更する???? ! ! 33.. ttwweeeettするときにツイート以外の情報を入力する???? ! ! 44.. uusseerr登録するときに他の情報を入力する???? ! ! 55.. AAPPIIを作る???? ! ! 66.. 本家ttwwiitttteerrに近づける???? 可能性は無限大!!!!
- 70. おまけ11:: データベース ! 基本的な名前を覚えよう!!!! ! ! ! ! ! ! ! ! ! ! ! データ型には次のようなものがあ�る ::ssttrriinngg ((文字列)) ::iinntteeggeerr ((整数)) ::bboooolleeaann ((真偽値)) id name email 1 2 3 テーブル カラム
- 71. おまけ22:: mmiiggrraattiioonn((マイグレーション)) ! 実はデータベースを操作しようと思うと本当は別の言語を使わないといけない((SSQQLL)) 例えば、UUsseerrテーブル((カラムにnnaammee,, eemmaaiill))を作ろうと思うと… CCRREEAATTEE DDAATTAABBAASSEE DDEEVVEELLOOPP;; CCRREEAATTEE TTAABBLLEE UUSSEERR {{ nnaammee ssttrriinngg((2200)),, eemmaaiill ssttrriinngg((110000)) }};; mmiiggrraattiioonnを使うと… RRuubbyyで書ける!!!! ! すごい簡単!!!! でいいことばっかり!!!!
- 72. おまけ33:: bboooottssttrraapp ! 正式名称は「TTwwiitttteerr BBoooottssttrraapp」 そう!!!!実はTTwwiitttteerr社が作っている!!!! ! CCSSSS FFrraammeewwoorrkkは、かっこいいデザインを開発者が簡単に使える便利なツール!!!! 公式サイトに使い方・どんなデザインが使えるかが書いてあ�るのでそちらを見てね!!!! ! ((注意:: bboooottssttrraappには現在vveerrssiioonn 33がリリースされているが今回はvveerrssiioonn 22..33..22を使います)) hhttttpp::////ggeettbboooottssttrraapp..ccoomm//22..33..22//iinnddeexx..hhttmmll
- 73. おまけ44:: SSaassss ! ..ccssss..ssccssssファイルを変換してCCSSSSを出力するCCSSSSの新しい書き方のこと ccssssと同様の文法を使うことができ、次のような機能が追加されている ! 11.. 入れ子 bbooddyy hh11 {{ … }}をbbooddyy {{ hh11 {{ … }} }}のように書くことができる ! ! 22.. 変数 「$$oorriiggiinnaall__rreedd:: ##ff77aa;; ｣のように$$で変数を宣言できる ! ! 33.. mmiixxiinn 「@@mmiixxiinn {{mmiixxiinnの名前}} {{ … }}」と書くことで…の内容を利用するとき,, 「@@iimmppoorrtt {{mmiixxiinnの名前}};;」で再利用することができる