勉強ログ ~14/55~
ここからが本番、と思ったところで環境作成でミスが発生しました。
railsコマンドというものをインストールする際のコマンドで、バージョンを指定するコマンドが抜けていました。
最初は気づかなかったんですけど、続きを進めていく毎に徐々にバージョン差異が表出してきて、なんだろうと思って戻って確認してみると、やらかしていました...。
gem install rails --version="~>4.0"
^^^^^^^^^^^^^^^^^
コメントだと思ってすっぽり抜け落ちていました。この後は作成した環境での動作確認系が多いカリキュラムなので、これは大幅なロスにつながりそうです。一応読み進めてはいますが、やはり手を動かさないと身に付かないので。
現在、Slackでメンターさんに対応方法を確認中です。
大事にはならないでくれー (T o T)
時間:12:30~13:00、21:30~23:00
メモ:
・Ruby On Rails の設定哲学
・DRY(Do not Repeat Yourself)・・・繰り返しを避ける。
・設定より規約・・・守らなければならない共通ルール。
DBのテーブル名が「Messages」の場合、モデルのクラス名は「Message」となる等。
・MVCパターン
アプリケーションの処理を役割毎に分担する。
Model・・・データを扱う
View・・・画面への表示を扱う
Contorl・・・リクエストを処理して結果を返す。(ModelとViewに指示を出す。)
・Railsの処理の流れ
1.クライアントからリクエストを送信(POST)
2.リクエストのURLを解析し、担当するコントローラへ処理を渡す。(ルーティング)
3.処理内容に基づいて、モデルを介してデータを取得、更新する。
4.処理結果のデータをモデルから取得し、ビューに渡す。(ビューの描画)
5.処理完了後、クライアントにレスポンスとして情報を返す。
・Restfulなアプリケーション
捜査対象をURLで表し、それに対してHTTPメソッド(GET,POST、PUT、Delete)で操作する。
GET・・・リソースの取得と表示
POST・・・リソースの作成
PATCH/PUT・・・リソースの更新
DELETE・・・リソースの作上
勉強ログ ~13/55~
本日のメンタリングも恙なく終了。
TechAcademyで勉強を始めてもう2週間になりますが、やはり週2回メンタリングで進捗の報告があるおかげで、毎日少しでも「やらなくちゃ」という気分になります。
それでもカリキュラムがRubyの文法部分に入ったことで、これまでよりも内容が難しくなり、いよいよスケジュールに余裕がなくなってきました。
メンタリングでもアドバイス頂きましたが、現時点では文法を完全に理解することを目指さず、とりあえず見たことがある程度で次に進むようにしなければダメなようです。
期間は8週間なので比較的余裕があると構えていると、後半の課題で苦しむことになりそうなので、ここらで再度気合を入れなおして勉強する必要がありそうです。
(とかいってるそばから、ワンピースを見ながら勉強している私...)
時間:14:40~16:00、17:30~18:00、19:00~19:30、21:00~23:00
メモ:
・インスタンスの初期化
class Shop
def initialize(name)
@name = name
end
end
「@name」はインスタンス変数。インスタンス毎に値の異なる変数。
・インスタンス変数の参照(getter)
インスタンス変数はインスタンスの外(クラスetc)から直接参照することはできない。
オブジェクト内部にアクセスするためには、「インスタンスメソッド」を定義する
必要がある。
(インスタンス変数が「@name」の場合)
def name
@name
end
呼び出し
shop = Shop.new("Test")
shop.name
→インスタンス変数の値が参照できる。
・インスタンス変数の外部からの変更(setter)
def name=(value)
@name = value
end
→メソッド名を「インスタンス変数名=」にする。
・インスタンス変数を参照、変更するメソッド(attr_accessor)
attr_accessor :name ←シンボル記法でインスタンス変数を指定。
→C#のgetter、setterの役をするプロパティ的なもの
インスタンス変数を列挙することも可能。(:name,:description,...)
・クラス変数
@@variable
→クラス内のメソッドで使用するときも@@はついたまま。
・クラスメソッド
def self.クラス名
@@variable
end
クラス単位で定義、実行するメソッドのことをクラスメソッドという。
・インスタンスメソッドの制限
インスタンス内のメソッドを外部から使用できないよう制限したメソッドを
「プライベートメソッド」という。
プライベートメソッドに設定したいメソッド定義の1行前に「private」と記載する。
private
def print_count
puts"count:"sample#{@@count}"
end
→インスタンスからの呼び出しはできないが、インスタンスの初期化時には
実行される。
類似として、同一クラス内であれば使用可能な「protected」という宣言もある。
※privateやprotectedの効果は、宣言以降のすべてのスクリプトに影響する。
・self
@name = name は直接インスタンス変数にローカル変数の値を代入するが、
self.nameではメソッドを介して値を代入している。
使い分け
・インスタンス変数にローカル変数を代入するだけの場合・・・@name = name
・メソッドの何らかの処理で利用する場合・・・self.name = name
・クラスの継承
継承によって、既存クラスの機能に追加機能を実装したクラスを作成することが
可能になる。継承元をスーパークラス、継承して実装したクラスをサブクラスという。
class サブクラス名 < スーパークラス名
処理
end
サブクラスでスーパークラスに存在していたメソッドを上書することを
「オーバーライド」という。
サブクラスのメソッドにおいて、「super」を記載することで、スーパークラスの
メソッドを実行することができる。
・配列データの出力(結合)
配列.join("接続文字")
→配列内のデータを指定した接続文字で区切って1行の文字列として返す。
・モジュール
メソッド等の処理部分のみをまとめたもの。
→インスタンスを作成することはできない。
→継承付加
module モジュール名
処理内容
end
・モジュールの役割
1.名前空間(メソッドや定数、クラス等の管理単位)としての役割
2.Mix-in ・・・ 他のクラスにモジュールを取り込むことができる。
→継承しなくてもモジュールの機能を他のクラスで使用できる。
→クラスを横断して共通の機能を取り込むことができる。
class クラス名
include モジュール名
end
勉強ログ ~12/55~
昨日は寝落ちしてしまい、ブログを書けませんでした...。
開始1週間ちょっとでこのザマはひどいですね。年齢を感じます。
昨日提出した課題のポートフォリオは一発合格でした!!
提出時のコメントはメンターさん宛のつもりで書いてしまったので、
メンターさんに頼りきりである事実がレビューアの方にモロばれでした...(笑)
次回からは自力でやりきるよう気を付けます。
さて、昨日からRubyの文法の勉強に入っています。
基本的にはC#と類似する構文が多いですが、ループ処理の部分については結構相違点が多いですね。
正直、each構文の「|variable|」の部分は未だに違和感がありますが、まあ、慣れ次第のように感じます。
明日はまたメンタリング日なので、時間までにLesson5までは終わらせておくようにしたいと思います。
時間:19:30~21:30
メモ:
7/14 22:00~24:00
・rubyファイルの実行
ruby ファイル名(xxxx.rb)
・ターミナル上でのコマンド実行環境
→irb
・オブジェクトのサイズを取得する
→オブジェクト名.length、または オブジェクト名.size
・数値の四捨五入
→小数点数.round
・rubyの変数名の命名規則
・変数名は半角英小文字で構成し、単語間はアンダースコアで連結する。
・置換文字列(プレースホルダ)
→置換位置に「#{置換変数}」を記載する。
プレースホルダを使用する場合、文字列オブジェクトはダブルコーテーションで囲う必要がある。(シングル不可)
・配列
(例) colors = ["red", "blue", "green"]
→配列の値の取得はインデックスを指定する。
(例)colors[2] = "green"
インデックスを指定して代入することで値の上書が可能。
・配列の最初、最後の値を取得する
最初:配列名.first 最後:配列名.last
・配列のサイズを取得する際は、length、sizeを使用する。
(例)配列オブジェクト.length = オブジェクトの長さ
・ハッシュ(ディクショナリ)
定義方法
1.test = {"A" => "あ”, ”I” =>"い"}
→値取得 … test["A"]
2.test = {:a => "あ", :I => "い"}
3.test = {a: "あ", i: "い"}
→値取得 … 2,3ともにtest[:a]
(2,3はシンボル記法)
・配列、ハッシュには自由な型のオブジェクトの格納が可能。
・nil
→オブジェクトが存在しないことを指す。Null?
配列の存在しないインデックスを指定した場合もnilが返る。
○ループ処理
配列または範囲オブジェクト.each do|格納用変数|
puts(格納用変数)
end
※範囲オブジェクト … (5..10).each do |格納用変数|~
7/15 19:30~21:30
・決まった回数のループ処理
数字.times do
処理
end
・インクリメントループ
開始数値.upto(回数) do |格納用変数|
処理
end
・条件分岐
if(条件)
処理
end
・否定条件分岐("!="と同じ意味)
unless ()
処理
end
→条件判定がfalseならば、処理が実行される。
・複数条件
if(条件)
処理
elsif(条件)
処理
else
処理
end
→条件の適用は上から順に
・クラス
オブジェクトの種類。データの型は組み込みクラス(あらかじめ用意されたクラス)であり、
String、Numeric(数値)、Array(配列)、Hash(ハッシュ)等がある。
クラスとインスタンスの違いは、クラスは「共通の性質」インスタンスは「クラスに属するオブジェクト」
を指すこと。(クラス→インスタンス作成)
・継承
定義済みのクラスを拡張して新しいクラスを作成することを継承と呼ぶ
→継承で作成されたクラスをサブクラス、継承元となったクラスをスーパークラスという。
Rubyのすべてのクラスは「BasicObject」クラスを継承して作成されている。
・メソッドの定義
def メソッド名(引数)
処理
end
配列をメソッドの引数に渡す場合(taxはメソッド)
args1 = [1980,0]
tax(*args1)
→配列の要素数はメソッドの引数の数と一致していなければならない。
(メソッド定義時に引数が2つなら、引数に渡す配列の要素数は「2」でなければならない。)
?→メソッドの引数に配列を渡す場合は、メソッド呼び出し時の引数の頭に「*」をつける必要がある。
ハッシュを引数として渡す場合
(例)
・ハッシュ:
arg = {price: 19800, percent: 8}
・メソッド:
def tax(arg)
arg[:price] * arg[:percent] / 100.0
end
・使用例
1.tax(arg) →ハッシュ変数を定義して渡す
2.tax({price:19800,percent:8}) →ハッシュ変数を定義せずに直接渡す
3.tax(price:19800,percent:8) →ハッシュの{}を省略する場合(メソッドの引数の場合のみ)
4.tax price:19800,percent:8 →ハッシュの{}、メソッドの()を省略する場合
?→メソッド側でシンボル記法を使用している場合、引数に渡すハッシュを定義する際にも
ハッシュ記法を使用していないといけない。
・クラス定義
class クラス名
定義
end
→クラス名は必ず大文字で始める。
・irbでrbファイルを読み込む
load "rbファイル名"
→rbファイルを更新する毎にloadで再読み込みする必要がある。
勉強ログ ~10/55~
暑すぎてやる気に陰りが...。
とりあえずLesson4の課題であるポートフォリオを完成させ、提出まで済ませました。
全然こだわりとかなく、ものすごくシンプルな内容になってしまいましたが、とりあえずエラーがなければ十分かと思います。
(ここでこだわりすぎると先に進めないので。)
余裕だと思っていたら、スケジュールがいつのまにかオンスケになってしまいました。
むしろ、遅れつつあるような...。
とりあえず、明日からRubyの学習に入る予定です。
暑さに負けず頑張るぞ...........!!↷
時間:19:00~20:30、22:30~00:30
メモ:
19:00~
・「float:left;」でdivを並列にしたら、最後に「div style="clear:both"」で並列化を解除する必要がある。しないと次のブロック要素が来るまでfloatが適用されたままになる。
・リストを横並びにする
displray:inline-block;
・ページ内リンク
<a href="#id">
・リストの「・」を除く
list-style:none;
・imgファイルのサイズを変更する。
タグにスタイルを直接書く場合は、widthとheightを指定すればよい。
ただし、CSSで指定する場合は「max-width」または「max-height」を設定する必要がある。
・gitコマンドの復習
1.git add .
2.git commit - m "コミットメッセージ"
→-mを忘れるとnanoエディタでの入力になるので面倒。
nanoで入力する場合、メッセージ入力後、ctrl + x で入力決定、Enterで反映
3.git push origin master
勉強ログ ~9/55~
本日は2回目のメンタリングでした。
Lesson4では、これまでのレッスン内容のまとめとしてポートフォリオを作成、提出が課題となっており、この作り方について教えていただきました。
HTMLはその名のとおりマークアップ言語なので、文章の意味を考えながらタグをつけていくことが重要ですが、各タグの使いどころを覚えるのはなかなか大変そうです。
メンタリングでもsectionタグとdivタグの違いを説明いただきましたが、一瞬「どっちでもいいじゃん」と思ってしまったというのはここだけの話。
(ちゃんと必要性は理解していますよ。)
とりあえず、ポートフォリオにはあまりこだわり過ぎずに、簡単なもので終わらせて次のレッスンに進みたいと思います。
時間:21:00~21:30、22:30~24:00
メモ:
・imgタグのalt属性は表示不可時の代替としてだけでなく、読み上げ機能やSEOでも使用される重要なもの。
・sectionタグの中には、一つの記事として記載したいものをまとめて入れる。
・メインの記事として扱わない情報はdivで設定する。(articleタグ等の類似タグはとりあえず無視。)
・tableタグでレイアウトを調整しない。
・「shift + tab」で選択範囲を一括で前に移動させられる。(tabの逆機能)
勉強ログ ~8/55~
8日目はGitHubの使用方法についてです。
おそらく、正しくはないのでしょうが、何となく自分の中で腑に落ちるよう絵にすると下記のようなイメージになりました。
1.「git init」でローカルディレクトリをリポジトリ化する。
2.編集したファイルは「git add」でローカルリポジトリ内のIndexとして保存。
3.「git commit」でローカルリポジトリのワークツリーに反映
4.「git remote add 登録名 リポジトリURI」でローカルリポジトリにバージョンのプッシュ先リモートリポジトリを登録。
この際、URIは長いので登録名を使用。(名前解決的なイメージ)
5.「git push 登録名 ブランチ名」でリモートリポジトリにアップロード
6.「git pull 登録名 ブランチ名」でリモートリポジトリの最新バージョンをローカルにダウンロード。
以降、「2.」から繰り返し
まだうまく理解できていませんが、引き続き提出課題を作成しながら覚えていくことにします。
ポートフォリオって何を作ればいいんだ...
時間:19:30~20:30 22:00~23:00
メモ:
Github
・ローカルリポジトリへの登録、アップロード手順
1.リポジトリ登録
git remote add origin https//~ユーザ名.github.io.git
^^^^^^
後続URLの登録名
→ローカルリポジトリに、「origin」という登録名でリモートリポジトリへの接続経路を登録するイメージ
2.ローカルの内容をアップ
git push origin master
→ローカルリポジトリのmasterブランチの内容を、originリポジトリにプッシュ(アップロード)する
3.githubユーザー名、パスワードを入力
勉強ログ ~7/55~
TechAcademyのスクーリングが始まって1週間が経ちました。
本日は前倒しでLesson 3の「Git」までを終わらせました。
実際に使ったわけではありませんが、GitはSVNより便利そうですね。
ただ、自前のサーバーに構築できるわけではないようなので、うちの会社では使用不可でしょうが。(そもそも自分は開発部署ではない...)
進捗としては可もなく不可もなくといったところでしょうか。
実際に手を動かすというよりは座学な部分が大半でしたので、苦しいのはここからのような気がします。(既にBootstrapとGitコマンドであっぷあっぷですが。)
次は初の課題であるポートフォリオ作成となっています。
ネガティブすぎて自己表現が絶望的な私にとって鬼門のような気がしますが、
何とか頑張ります。
※アニメ「New Game」を見て、新人時代のやる気が1ミクロン程度思い出せました。
まあ、あんなに歓迎されなかったですけど。(おっさんしかいなかったし(今も))
同期の中でも、なぜか私だけOJT中なのに放置プレイ&火事場投入の地獄だった
思い出も想起されてつらい...
時間:15:00~16:20、21:00~23:00
メモ:
15:00~16:20
21:00~23:00
ターミナルコマンド
・ls(List Segment)
カレントディレクトリ内の一覧
・mkdir(Make Directory)
新規folderを作成
・cd(Change Directory)
カレントディレクトリの変更
..で一つ上のディレクトリに移動
cd単体でHomeディレクトリに移動
・touch
新規ファイルを作成
・nano ファイル名
Cloud9上のターミナル標準エディタでファイルを開く
→保存して閉じる場合:ctrl + x
・less ファイル名
Cloud9の標準ビューア。参照のみの場合はこちらを使用する。
lessビューアの終了:「q」 上:↑ or k 下:↓ or j
・ターミナル処理の中断:ctrl + c
・sleep 時間(秒):ターミナルの待機指定
・履歴からコマンドを検索:ctrl + r
Git
・リポジトリ
→ローカル:ローカル上に作成されるバージョン管理
→リモート:チームでのリポジト共有やバックアップを目的としたネットワーク先のリポジトリ
・コミット
コミットに含まれる情報
・リビジョン
・コミットした人、日時
・ファイルの内容
・コミットメッセージ
・1つ前のリビジョン
・プッシュ
ローカルリポジトリの変更履歴をリモートリポジトリに反映
・Git使用時の流れ
1.リポジトリの作成、または複製
→「git init」「git clone」
2.ファイルの作成、編集
3.変更をGitのインデックスに追加する
→「git add」
4.ローカルリポジトリにコミットする
→「git commit」
5.ローカルリポジトリの変更をリモートリポジトリに反映する
→「git push」
・ワークツリー
→現状ローカルの最新リポジトリ
・インデックス(ステージ)
→更新が発生したファイルの情報。(git addで作成)
・コミット
→git add で作成したインデックスファイルをリポジトリに反映する。
・ブランチ
→リポジトリの内容の分岐。複数チームで分担して開発を行う場合に、
別々のブランチとして複製したリポジトリで開発を行う。
(後でマージして本流に反映する。)
・マージ
→各ブランチの変更内容を統合する。
→コンフリクト:変更が複数ブランチで重複すること。要手動修正。
・masterブランチ
→リポジトリの本流となるブランチ。すべてのブランチは最終的にmasterブランチに統合(merge)される。
・ブランチ開発の流れ
1.ブランチ作成(git branch 新ブランチ名)
2.作成したブランチに移動(git checkout 新ブランチ名)
3.移動先のブランチで開発
4.分岐元(masterブランチ)に戻る(git checkout master)
5.masterブランチに各ブランチの変更を統合する(git merge 新ブランチ)
Gitコマンド
・git init:リポジトリを作成する。バージョン管理したいプロジェクトフォルダのトップで一度だけ実行する。
→リポジトリの実体である「.git」がフォルダ内に作成される。
・git add:更新されたファイルを指定してインデックスに追加し、次のコミットのために準備する。
→単体:git add ファイル名
→その他:「git add *.txt」「git add .」
・git commit:インデックスに追加された内容をリポジトリに反映する。コミットメッセージの登録は必須。
→-m の付加でエディタを立ち上げずにコミットメッセージを追加してコミットすることも可能。
・git status:変更されたファイル一覧を表示する。
・git log:コミットログを参照する。
・git commit --amend:直前のコミットメッセージを修正する。
・git reset 過去のコミット:コミットを取り消し、過去のコミットの状態にまで戻す。
オプション(指定なしの場合は--mixedと同意)
→git reset --soft 過去:ファイルの変更は戻らず、コミットのみ取り消される。(ファイルの変更はインデックスへ)
→git reset --mixed 過去:ファイルの変更は過去に戻らず、コミットのみ取り消される。(ファイルの変更はワーキングツリーへ)
→git reset --hard:ファイルの変更も過去に戻り、コミットも取り消される。(指定したコミットまでのコミットがなかったことになる)
・git status:リポジトリの状態を確認する。
・git diff:ファイルの変更差分を確認する。
オプション
・git diff:ワーキングツリーとインデックスの差分
・git diff --cached:インデックスと直前のコミット(HEAD)の差分
・git diff Head^..Head:直前とその前のコミットの差分
・作業フロー
1.git diffでツリーとインデックスを比較
2.問題なければgit add .でインデックスに追加
3.git diff --cachedでインデックスと直前のコミット内容を比較
4.問題なければ、git commit でコミットする。
5.git diff HEAD^..HEADで直前とそのひとつ前のコミット差分を確認する。
・git log:コミットの履歴を表示する。
オプション
・git log --stat:ファイルの増減情報を表示に追加
・git branch ブランチ名:ブランチの作成
・git checkout ブランチ名:指定したブランチに移動
→-b オプションを付与すると作成とともに移動する。
(gitのcheckoutはWindowsのチェックインのイメージ)
・git branch:ブランチの一覧を表示
→-a オプションでリモートリポジトリも含めて一覧を表示
・git branch -d ブランチ名:ブランチの削除
・git merge:ブランチの統合(gitでは、現在のブランチに指定したブランチの変更を反映する形式がとられる)
→1.git checkout master
2.git merge ブランチ名
上記の場合、masterに「ブランチ名」の変更が取り込まれコミット履歴が更新される。「ブランチ名」の方には変化なし。
・コンフリクト
コンフリクトが発生した場合、対象ファイルのコンフリクト個所にタグが記載される。
→<<<<HEAD ・・・取り込み元側
→==== ・・・ 区切り
→>>>>SUB ・・・被取り込み側末尾
上記競合箇所を修正後、add→commitの順で再登録(再マージ)する。
Gitコマンド~リモート
・git clone:リモートリポジトリの複製
→方式は「Https方式」と「SSH方式」の2種
リモートリポジトリの操作
→「git pull」「git push」等コマンドでリモートリポジトリと通信するために必要
・リモートリポジトリの登録
→git remote add 登録名 リモートリポジトリ
・登録名の慣習
→自己管理:origin
→他者管理:upstream
(例)$ git remote add origin https://github.com/ユーザ名/リポジトリ名.git
→-v オプションで登録したリポジトリの詳細を表示
・登録したリモートリポジトリの削除
→$ git remote rm 登録名
→ローカルリポジトリに登録したリポジトリ情報を削除するものであり、リモートリポジトリ自体は削除されない。
・git push 登録名 ブランチ名
→「登録名」リポジトリに「ブランチ名」ブランチのコミット履歴を反映させる。
・git pull 登録名 ブランチ名:リモートリポジトリの更新分をローカルリポジトリのブランチにマージする。
→プルする際は反映先(ローカルリポジトリのブランチ)をカレントディレクトリにしておく必要がある。
(例)
1.$ git checkout master
2.$ git pull origin master
勉強ログ ~6/55~
本日、初のメンタリングを実施しました。
正直、Skype等を利用したことはなかったので、ビデオチャットが問題なくできるか不安だったのですが、問題なく行うことができました。
ちなみに私の端末はSurface Pro 4なので、カメラもマイクも購入しなくて良かった点も地味にうれしかったです。
メンタリングの内容としては、初回ということもあって自己紹介と現在のカリキュラム進捗状況確認が主でした。
(あとは参考書籍のアドバイスとかを少々。)
正直、30分は長く感じました。沈黙する時間が少々あったので、コミュ障としてはメンタルが削られます。ww
今後は課題があったりするので、30分では短く感じたりするようになるんですかね。
メンタリング前に不安で悶絶したり、今日は全然進みませんでした。
明日は頑張ります。
時間:17:30~18:00
メモ:
Gitコマンド
・pwd ・・・ ディレクトリの確認
勉強ログ ~5/55~
1週目のカリキュラム終了!
Bootstrapはかなり便利です。
昔はCSSで一つ一つ指定していたスタイルがすごく簡単に利用できるのは素晴らしいですね。
ただ、プログラミングを勉強していると必ず引っかかる英語リファレンス...。
毎回ここで引っかかるんですよね。分かってはいるけどなかなか英語を読めるようにはなれないのが辛いところです。
英語の勉強もしなきゃ...。
とりあえず、リファレンスは熟読します。(日本語のサイトを参照しながら。)
時間:19:30~21:00
メモ:
・フォームのBootstrap
<form>
<div class="form-group">
<input class="form-control">
→クラスの指定はFormタグにではないことに注意
・labelタグのfor属性
<label for="id属性">
→ほかのタグと同じid属性を指定することで、ラベルと他のタグとを
関連づけることができる。
例:チェックボックスと関連づけることによって、
チェックボックスの文字の部分をクリックしてもチェックが
入るようになる。
・インラインフォーム
フォームをインラインで並べる
<form class="form-inline">
→formタグに指定することに注意
・ラベルとフォームを水平に並べたい場合
<form class="form-horizontal">
<label class="control-label">
→水平に並べる際は、labelタグのクラスに「control-label」を
指定する必要がある。指定しないとフォームと関連づかない。
・Xカラム分右にずらす
→<div class="col-sm-offset-4">
→4カラム分右にずらして表示(ずらした部分は空白)
勉強ログ ~4/55~
1週目にスケジュールしていたカリキュラムも残すはBootStrapのみとなり、それも
あと2単元となりました。
かなり良いペースのように感じますが、カリキュラムにあるのはあくまでも触り部分だけなのです。
Bootstrapの本家サイトを参照すると、まだまだいろんなクラスやスタイルがあります。WEBエンジニアの方は、みなさんすべて記憶していらっしゃるのでしょうか。
自分の数少ない経験の中で作成したアプリケーションはとりあえず正確に動作することを重視していたので、デザイン力のなさに愕然とします。
ちなみにつくったのはこんなの。(C# WPF ほぼデフォルトやん...)
まあ、業務用である以上、動けばよかったのと、私の能力で独学した場合の限界みたいなものが垣間見えます。
残りは明日終わらせて、復習と自習で完全に身につけられるよう頑張ります。
時間:21:30~23:00
メモ:
・<meta http-equiv="X-UA-Compatible" content="IE=edge">
→互換表示停止
・<meta name="viewport" content="width=device-width,initial-scale=1">
→レスポンシブWEBデザイン対応
・記載順
1.BootStrapのCSS:<link>
2.jQueryの読み込み:<script>
3.BootstrapのJS読み込み:<script>
・グリッドシステム
1.class="container" or "container-fluid"
2.class="row"
3.class="col-prefix-colum数
prefixはlg,md,sm,xs(デバイスサイズ)
4.列は合計12列になるようにする。
<div class="container-fluid">
<div class="row">
<div class="col-sm-2">
5.classにhidden-prefix、またはvisible-prefixを追加指定することで条件下で
非表示にすることが可能
・テーブル
1.class="container"
2.table要素のclassにtableを指定
→<div class="container">
<table class="table">
・table内のデータ項目<td>を記載する際、先頭にscope属性を付けると、
ヘッダーの項目に対してデータがどの方向に列挙されているかを
示すことができる。(音声読み上げ等で有効)
→<th scope="row">
row→行方向にデータ項目を列挙
column→列報告にデータ項目を列挙
・テーブルのストライプデザイン
→table-stripedクラスを指定
・テーブルの罫線
→table-borderedクラス
・レスポンシブなTable
→<div class="container>
<div class="table-responsive> ←ポイントとなる構文
<table class="table">
→画面に入りきらなかった場合にtable要素内にスクロールが表示される。
・ボタンデザイン
a要素、button要素のclassに"btn btn-プロパティ"を指定する。
→「btn」も「btn-プロパティ」も指定必須
→「btn」でオブジェクトの形状を設定
「btn-プロパティ」でデザインを設定
・ボタンサイズ
a要素、button要素のクラスに「btn-サイズプロパティ」を追加するとボタンの
サイズを指定できる
→btn-lg、btn-sm、btn-xs
・ブロックレベルボタン
ブロック要素としてボタンを定義する場合は、「btn-block」をクラスに指定する。