bootstrapでコンテナの幅を固定する方法

bootstrap

デフォルトの設定ではディスプレイ画面に合わせて自動でコンテナの幅を決められてしまうので、それを固定する方法を探しました。

いくつか見つかったのですが、自分は以下のようにscssファイルでcontainerクラスを上書きする方法で解決させました。この記述だとディスプレイの大きさに依らずコンテナの幅が 750px に固定されます。

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 750px;
  }
}


他にも、新たにcontainer-fluidクラスをscssで定義して用いる方法もあるようです。
参考：https://crafrite.com/web-pc/web/9.html

46~48日目

プログラミング日記 javascript

railsチュートリアル読破。
webサイトの構想も固まってきたし、ぼちぼち作っていこう。

そういえばこの前作ったサイトで初回読み込み時にJSでDOMエラーが出て、ページ更新したら直るみたいなよく分からん現象が起きていたのですが、経験者の人に相談してみたらあっけなく解決した。

どうやらonloadで囲む前のjsをブラウザのキャッシュで保存してしまっていたみたいでした。

41~43日目

プログラミング日記

41日目

https://tt2japanese.herokuapp.com/optimiser

の手直しなどをしていた。

42日目
VsCodeで競プロ環境を整えた。
過去問を数問解く。
Railsチュートリアルを再開。

43日目
なんかめちゃくちゃ早起きしてしまって、朝やることが無いのでQiitaを読んでいた。
専門用語とかもあらかた理解できるようになっていた。
Slackをプログラミング学習ノートとして使おう　みたいな記事があり、なるほどと膝を打った。
実際試してみたけど　これかなり良いですね　習慣づけよう
Railsチュートリアルを読んだ。

40日目『レスポンシブデザインの海外ゲーム攻略ページ + 最適化ツール』を作った

プログラミング日記 works

https://tt2japanese.herokuapp.com/

ここ5日ほどちまちま作っていた、TapTitans2という海外ゲームの攻略ページが一応完成しました。

スマホサイズの幅で表示したトップページです。レスポンシブ対応！


f:id:owlhoot:20190521223248p:plain

静的ページを作るだけでも、なにぶん初めてのことなのでかなり苦戦した。序盤は Rails チュートリアルの1~5章を参考にしながら作っていたが、途中からはほとんど自分でググって実装した。


そしてこのページの目玉である、AFオプティマイザーの紹介です。


f:id:owlhoot:20190521224200p:plain


このゲームを知らない人にはちんぷんかんぷんだと思うのですが、おおざっぱに言うと「ゲーム内のデータを入力すると最適化されたレベル配分を教えてくれるツール」のようなものです。

主に JavaScript を用いて中身を設計したのですが、この過程でJSに関する基本的な知識がかなり身についたと思う。

あと開発中の3分の2くらいはエラーに対応していた気がするので、エラー文でググって解決方法を調べるスキルもある程度身についたかも。詳しい内容はこれまでの日記に書いてきたので省略...。


そしてTapTitans2コミュニティに完成品を投げて、実際に使ってもらいました。

f:id:owlhoot:20190521225946p:plain

おお、思ったより多くの人に使ってもらっている...！

事前に何回もチェックしたので、ミスは無さそう･･･と思っていたら2時間後、
『ゲーム内の数字の表記が指数表記にならない』
というメッセージが。

そういえばこのゲームはe15以下の値は 1,10,100,1K,10K,100K,1M ~ B ~ T~ で表示されるのだった。この最適化ツールは指数表記にしか対応していない。これはまずい。1時間くらいで対応させデプロイ。

次は『レター表記にも対応できませんか？』とのメッセージが届いた。レター表記とは K,M,B,T以降をaa,ab,ac,ad,...で表していく表記である。こちらはやや苦戦したが2時間くらいで対応させデプロイ。

あとは『cookieなどで入力内容を保存できないか？』とのメッセージも届いており、これは勉強が必要そうなので保留にしておいた。多分 Railsチュートリアルの6章以降でやるはず...。


前回のこれに比べたら幾分かは成長したように思える。
17日目『ランダム5文字メーカー』を作った - hukurou code


次は Railsチュートリアルを参考にログイン機能を付けたWEBアプリを制作する予定。6月中を目標に！

39日目

プログラミング日記 javascript heroku bootstrap

サイト制作。今日中には仕上げたい。

知見メモ。

JavaScriptでページ内の特定の位置に文字を出力する (JavaScript プログラミング)
Bootstrap Tab で任意のイベントでタブ遷移 - Qiita
【JavaScript備忘】for文とgetElementByIdでテキストフォームのクリアをした時にやったこと - 嗚呼、学習の日々


javascriptを書いてからherokuへデプロイしようとしたらエラーが出たときの覚え書き

まずそのままデプロイしようとしたところ

Precompiling assets failed.

と表示されデプロイがリジェクトされた。エラー文を見てみると

SyntaxError: Unexpected token: punc ())

のようなことが書いてある。その下には ex.js ～ と記述されたおり（うろ覚え）どうやらjavascriptのプリコンパイルが出来なかったようだ。

ググってみたところ、新しいバージョンのやつにしか対応してない関数を使ってしまっていたらしい。
累乗計算の ** 、総和計算の reduce あたりかな？と見当をつけ、それぞれ Math.pow関数、for文で総和の形に変えて記述した。これでデプロイは成功した。

あとこれはただの間抜けな話なのですが、コードを書き直した後に git commit をせずに heroku にデプロイして「直んね～～」みたいなことをやっていた時間がしばらくあり、無だった。


さて、デプロイが無事完了してサイトを見てみると、

We're sorry, but something went wrong.

ページを開けなかった。
どうやら本番環境でアセットパイプラインが正しく設定されてなかったみたいです。
herokuで"We're sorry, but something went wrong."が出てアプリが開けなくなった - Qiita

この記事を参考にしたら、無事いけました。

全ての先人に感謝を......