5章に入る。 5.1 5.1.1でまずはHTMLにdivタグとclass設定で構造を入れる。この時点ではCSSを当ててないので、しょっぱい。演習はcurlコマンドを使ってみろとかなので省略。 5.1.2でBootstrapを適用する。まずはgemをインストール > vi Gemfile > git diff Ge…

「Rails風味のRuby」とのこと。味わってみよう。 4.1 リスト4.1で例として、app/views/layouts/application.html.erbの以下のコードを取り上げている。 <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> Rubyを…

3.6 3.6.1 minitest reporters 見やすくなるらしい REDになってないとありがたみがないなあ 3.6.2 Guard 初期化する > bundle exec guard init 00:16:27 - INFO - Writing new Guardfile to /Users/tambara/study/rails_study/sample_app/Guardfile 00:16:27…

3.4 理由はわからないけど、レイアウトファイルをリネームしておけと言われるので、する > mv app/views/layouts/application.html.erb layout_file > ls Gemfile README.md app config db lib package.json test vendor Gemfile.lock Rakefile bin config.r…

3章を始める。これから作るサンプルは、長くいじることになるらしい。 3.1 > bundle exec rails _5.1.6_ new sample_app --skip-bundle create create README.md create Rakefile create config.ru create .gitignore create Gemfile run git init from "." …

2.3.4 から読む。 ApplicationRecordとか、ApplicationControllerって昔からあったっけ？ なんか昔はActiveRecord::Baseを直接継承していたような気もするけど、気のせいのような気もする。ここの演習は、特にどうということもないので、パス。 2.3.5 でデプ…

2.3.1からやってみよう。 投稿(Micropost)の方も同じようにgenerateする。 > bundle exec rails generate scaffold Micropost content:text user_id:integer invoke active_record create db/migrate/20181121142643_create_microposts.rb create app/models…

2章はscaffoldを使ってみるらしい。 さて、前回Railsのバージョンでかなりヒドい目に遭って、訳がわからなくなった。 恐らくは、rails newしたタイミングではbundle installが走ってはいけないのだと思う。 こんな記事もある rails new でバージョン指定した…

1.4はGitの話。しかし、rails newしたときにgit initもされているように見える。お節介だなあ。 git add -Aして全部をコミットする。ん？bundle installのパスは要らないかもしれない。ミスった。まあ、いいや。 Bitbucketにコードを上げる説明が書いてある…

1.3節から、チュートリアルに合流する > bundle exec rails _5.1.6_ new hello_app create create README.md create Rakefile create .ruby-version create config.ru create .gitignore create Gemfile run git init from "." Initialized empty Git reposi…

いまや、新人プログラマの最初の難関として知られるようになったRailsチュートリアルをやってみることにする。 Railsが無かった頃からのRubyユーザーで、なんだかんだと日常の道具としてRubyを使って20年だが、 Railsは仕事が暇な時期にちょびっと本を読んで…

ガイドは新しいページに入った。 developer.mozilla.org グリッド線に沿って配置するのが王道なんだけども、そうではないやり方もある。 アスキーアートっぽいやり方が。 いや、ガイドにそう書いてあんだもんよ("we sometimes call this the ascii-art metho…

ここからは developer.mozilla.org を読む。エゲレス語の文書を読んでいて、かつ、私の英語能力がプアなので、英語そのままの用語が出てきたり、 英文をそのまま引用したり、内容を勘違いしていたりするかもしれない。知ったこっちゃないけど。 あと、少しペ…

今度はdisplay: contentsとの関係の話。また知らない子の登場である。 ちょっと調べてみたところ、display: contentsを指定すると起きることは あたかもその内容がタグで囲われていないように扱われるということのようだ。ほっほーう。 DOMツリー上、レベル…

グリッドコンテナやアイテムが絶対位置指定のブロックとどういう関係になるか、見てみる。 出発点は、こんなHTMLとCSS。box3に長い文章が含まれている。 div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3"> このブロックに絶対位置を指定する。 グリッドコンテナがブロックを含</div>…

残念だが、ここから翻訳がなくなっているのでエゲレス語を読むしかない。とほほ。 さて、フレックスボックスとfrとminmax()を使ったグリッドは、一列の幅いっぱいにアイテムが 広がるという意味では似ている。しかし、全体の幅を広げたり狭めたりしたときに …

フレックスボックスでアイテムの配置を制御して、こんな風に並べてみる。 指定しているCSSはこんな感じだ。 wrapper { display: flex; align-items: flex-end; min-height: 200px; } .wrapper > div{ padding: 1em; } .box1 { align-self: stretch; } .box2 …

ここからは、 developer.mozilla.org の内容に入る。 グリッドとフレックスボックスの違いについてが最初のテーマ。 しかし、音に聞くBootstrapとはなんぞと遅まきながら調べてみたら、 最近はCSSのグリッドもいいらしいぜという経緯で勉強をはじめているた…

スタートはこの状態から。 グリッドアイテムは同じセルを占有することができる。つまり、重なってもいい。重ねてみる。 今、わざと各コンテンツの背景色の透過度opacityを0.5にしてあるので、重なっているのがよくわかる。 しかし、これだとどちらが上にある…

Firefoxの開発者ツールのGrid Inspectorのオプションには"Display line numbers"という項目があって、 これにチェックを入れるとグリッド線の番号がわかる。縦横それぞれに1から始まる番号がついている。 コンテンツの配置位置をこのグリッド線を使って指定…

暗黙的なグリッドと明示的なグリッドについて説明されている。 例えば、この状況。 2行3列のグリッドが出来ているけど、CSSで指定しているのはgrid-template-columnsだけ。 だから、列は「明示的」だけど行は「暗黙的」ということになる。 暗黙的なグリッド…

developer.mozilla.org これを読んでる。 まず、初っぱなはここからスタートする。 HTMLはこんなの。 <div class="wrapper"> <div class="one">One</div> <div class="two">Two</div> <div class="three">Three</div> <div class="four">Four</div> <div class="five">Five</div> <div class="six">Six</div> </body> CSSはこんなの。重なってもわかるように半透明の色をつけてます。 .wrap…

フロントの技術について知らなさすぎるので、今度はCSSを勉強してみたい。 というわけで、CSS GRIDをやる。なぜかその前にBootstrapのhowtoビデオを見た エゲレス語が難しいので0.5倍速で見た。時間がかかった。コンセプトはわかったけど、HTMLの魔改造ぶり…

お仕事だと一番よく使うかもしれない、要素をテーブルにするための繰り返しのディテクティブ。 TABLEなら繰り返しの指示は<table>に書く。 複数の要素を繰り返したかったら<ng-container>というダミーの枠を作る。 app.component.html <table class="table"> <tr> <th>No</th><th>通称</th><th>型式番号</th><th>主なパイロット</th> </tr> <tr *ngFor="let b of ms; index as i"> <td>{{i + 1}}</td> <td></td></tr></table></ng-container></table>…

条件によって要素を追加・削除する。これは開発者ツールでみたDOMの変化が面白かった。 app.component.html <form> <label for="ifsample">表示/非表示</label> <input id="ifsample" name="ifsample" type="checkbox" [(ngModel)]="ifsample" /> </form> <div *ngIf="ifsample"> <p>見えてる？</p> </div> app.component.ts export class AppComponent { ifsample = false; }…

テンプレートの機能にパイプというものがあって、 シェルのパイプのような記法で表示する変数を整形できる。 表示のための機能はテンプレートに寄せたいと、そういうことなのかな。 わざわざ新しい記法を入れてまでやることなのかとか、そんな気がしないでも…

読んでもよくわからない・・・サンプルは以下 app.component.html <form> <label for="name">名前:</label> <input id="name" name="name" [(ngModel)]="myName" /> <div>こんにちは、{{myName}}さん!</div> </form> app.component.ts export class AppComponent { myName = '山田' } [ ]でViewへ向かう方向のバインド、( )でコンポーネントへ向かう方向のバインドを …

フロントの動作の核心、イベントの扱いでございましょう。 app.component.htmlはこんな感じ <input type="button" (click)="setCTime($event)" value="現在時刻" />{{ctime}} <hr /> <form> <label for="key">キー入力:</label> <input id="key" name="key" (keydown)="keylog($event)" /> </form> <div>キーコード:{{which}}…</div></hr>

app.component.htmlはこんな感じ <table border="1"> <tr><td [attr.rowspan]="len">結合</td><td>1</td></tr> <tr><td>2</td></tr> <tr><td>3</td></tr> </table> <div class="line back" [class.fore]="clazz" [style.text-align]="align" [style.font-size.%]="fsize">…</div>

この本で勉強してる。安定の山田祥寛クオリティ。感謝しかない。Amazonへのリンクを貼ってますが、技術評論社の本なのでPDF版が買えますからそちらをお勧め。下のリンクからどうぞ。 Angular アプリケーションプログラミング | Gihyo Digital Publishing … …