Twitter教科書
- 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だよ!!!!
- 11. ⑦の続き
CCoommmmaanndd ++ PPでコマンドパレットを出す!!!! ((復習))
ファイル名を入力するとファイルをすぐ開くことができる!!!!
他にも「##」「::」「@@」などをつけると様々な検索が可能となるよ!!!!
- 16. …%% rraaiillss ggeenneerraattee ccoonnttrroolllleerr SSttaattiiccPPaaggeess hhoommee
① CCoonnttrroolllleerrを生成((ggeenneerraattee))しよう!!!!
次のコマンドを実行しよう!!!!
自動的に次のファイルが生成されている!!!! ((aappppフォルダ内))
赤色 :: CCoonnttrroolllleerrの名前
!
緑色 :: AAccttiioonnの名前
- 21. ⑤ ページを追加してみよう!!!!
33sstteeppでできる!!!!新しいページの作り方!!!! ((今回は例としてhheellppページを作ってみよう!!!!))
11,, ルーティングを行う!!!!
ccoonnffiigg//rroouutteess..rrbbの中の次のコードを追加しよう!!!!
22,, ccoonnttrroolllleerrの中にaaccttiioonnを追加する!!!!
aapppp//ccoonnttrroolllleerrss//ssttaattiicc__ppaaggeess__ccoonnttrroolllleerr..rrbbを次のコードに変更する!!!!
を追加しよう!!!!
- 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((マイグレーション))を行う!!!!
左の画面が出てくれば成功!!!!
- 38. ⑤ hhoommeeからssiiggnn__iinn,, ssiiggnn__uuppにアクセスできるようにしよう!!!!
aapppp//vviieewwss//llaayyoouuttss//__hheeaaddeerr..hhttmmll..eerrbbの次のコードを変更しよう!!!!
%% … %%
hhttmmllの中にコードを埋め込む
!
!
%%== … %%
hhttmmllの中にコードを埋め込んで,,
それを出力する
ユーザーがサインインしているか
どうか判別する
- 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を生成しよう!!!!
- 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の名前}};;」で再利用することができる