40日目『レスポンシブデザインの海外ゲーム攻略ページ + 最適化ツール』を作った
ここ5日ほどちまちま作っていた、TapTitans2という海外ゲームの攻略ページが一応完成しました。
スマホサイズの幅で表示したトップページです。レスポンシブ対応！
静的ページを作るだけでも、なにぶん初めてのことなのでかなり苦戦した。序盤は Rails チュートリアルの1~5章を参考にしながら作っていたが、途中からはほとんど自分でググって実装した。
そしてこのページの目玉である、AFオプティマイザーの紹介です。
このゲームを知らない人にはちんぷんかんぷんだと思うのですが、おおざっぱに言うと「ゲーム内のデータを入力すると最適化されたレベル配分を教えてくれるツール」のようなものです。
主に JavaScript を用いて中身を設計したのですが、この過程でJSに関する基本的な知識がかなり身についたと思う。
あと開発中の3分の2くらいはエラーに対応していた気がするので、エラー文でググって解決方法を調べるスキルもある程度身についたかも。詳しい内容はこれまでの日記に書いてきたので省略...。
そしてTapTitans2コミュニティに完成品を投げて、実際に使ってもらいました。
おお、思ったより多くの人に使ってもらっている...！
事前に何回もチェックしたので、ミスは無さそう･･･と思っていたら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
39日目
サイト制作。今日中には仕上げたい。
知見メモ。
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
この記事を参考にしたら、無事いけました。
全ての先人に感謝を......
38日目
サイトで動かすためのjsコードを書いていた。
tt2-japanese-code/optimise.js at master · hukurouo/tt2-japanese-code · GitHub
なおまだ完成してない模様。
色々と詰まったところがあったのでメモ
まずrailsはヘッダーでjsを読み込んでからbodyに移るので（アセットパイプラインだっけかな）、フォーム入力とかあるページの場合、
window.onload = function(){
これでまるっと囲って、ページを読み込んでからjsを起動させる必要がある。
あと配列の定義のとき、
var r = []; r[0] = r[1]; r[1] = 1;
こんな感じにしちゃったところがあって、r[0] = NaMになってしまった。
これは上から定義していくというルールがあるから、2行目でr[1]を参照できなくてエラーになってるのかな。
今日のABCはサイトが重くてまともにできなかった。テストコードを試すのはローカル環境でもできそうだから設定しておくか…。
37日目
サイトを作っていた。
https://tt2japanese.herokuapp.com/
まあまあ形になってきたな
今日の知見
画像を画面の幅に合わせて自動でリサイズしてほしいときはscssに以下を追加する。
あと文字を画面端で自動改行させるコード。
img { max-width: 100%; height: auto; } p { ~ word-wrap: break-word; }
で、今日なかなかに詰まったのが横幅を固定した table について。どうも bootstrap を使って table を作ろうとすると、自動で横幅いっぱいになってしまうらしい。なのでPCサイズで表示すると割と不格好になってしまう。
どうにかならんかなと色々ググってみたが結局解決せず。
ここで発想を変えて、bootstrapを遣わずに htmlとcssだけで表を作ってみた。これで上手くいった。
ウム、見栄えよし。
しかも特に設定も変えないままで、画面幅に合わせて臨機応変にサイズを変えてくれた。
明日はABCがんばろう
36日目
今日も今日とてサイト制作。ヘッダー、フッター、ページ内リンク、レスポンシブデザインを実装。
あと明日ひさびさにAtcoderのビギナーコンテストがあるので数問過去問を解いてウォーミングアップをしておいた。
知見。
bootstrapの動的なやつにはjQuerryが必要。これがないと動かん。
参考：Ruby on Rails チュートリアルで作成したヘッダーをレスポンシブデザインに対応させる - Qiita
Rails で レスポンシブデザインを対応させるには、下のコードをヘッダー内に記述すればよい。
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
memo 数値⇔文字 桁数
文字⇒数値
#include <bits/stdc++.h> using namespace std; int main() { string S; cin >> S; int a = (S[1] - '0'); a *= 2; cout << a << endl; }
数値⇒文字
string S = "hello"; int a = 3; cout << S + to_string(a) << endl;
桁数を求める
int digit = 0; while(N != 0){ N = N / 10; digit++; }
