今日で終わりパート３
終わらせる気があるのか？という問には、YESと答えよう。
終わる気がするのか？という問には、NOと答えよう。
山登り的な感じで、一歩一歩ね。
前には進んでいる。
クロームの開発者モードで、黒丸が表示されない・・・
なぜだ。。
ハードウェアなんちゃらのチェックをはずして、再起動。
起動して確認すると表示された！やったね！
とおもったけど、サブモニターにしたらまた消えた。
ブラウザの解像度関係あるのかな・・・
まぁいいや。
ならモニターを変更するのみ。
こんな事で３０分近く時間が取られてしまった。ぐはぁ。
よく有りますよね。
昼飯食って、眠くなる・・・うーむ。
やはり食後はやる気が下がるのは、良くないなぁ。
ということで、今日は一歩も進まず。
めでたしめでたし。（ごめんなさい）
今日で終わりパート２
今日は作業できる時間が短い。
パート２はどこまで進むのやら。
CSSでカウンターを上げていくものだけど、ページが変わった時とか、どうやってカウント上げていったらよいかわからなくなりそうなため、実際の数値を入れることにした。
あまり時間がないため、簡単に作れるページをサクッと作っていこう。
高さのオプションを追加したら、表示されるようになった。
なんだかわからんけど、結果オーライ。
数値を入れると、やはり競合していることがわかる。
ページャーを追加しよう。
DBがあれば、ノコギリをつかってページャー追加できるのだろうけど、ダミーデータも入っていないため、HTMLを直接追加する。
微調整して、１ページ作って終了。
SpaklineとChart.jsのコンフリクトがたまたま解決されてめでたしめでたし。
今日は一旦ここまで。
今日で終わり！
タイトルに負けないような作業をしたい。する。
パーツの殆どはだいたいできている。
あとは、組み合わせて行けばよいはずだろう。
ある程度スクロールしたら、ページ上部にいくボタンが欲しい。
これをそのまま導入して、問題なく表示された。
微調整完了して、Git push！
ランキングつける時に、これいいな。
三角形カッコよかったけど、無理そうなので諦める。
結局丸にして、調整をして、アップロードDone！
スパークラインが合ったほうが良いな。
http://benpickles.github.io/peity/
これを導入する。
うーん、何かに競合して、うまく動作しないな。
多分、最初の部分のラインチャートを読み込むときのものだと思うのだけど。
こっちの方に変更しよう。
スパークラインは動作しているけど、タブの切替時に読み込みしてくれない。
なんでだろう。腹減った・・・
うーん、わからない。。
タブの切替時にうまく読み込めていないというのは、わかるけど、どうやって解決したらよいかわからない・・・
これは課題だな。
うん。だめだ、わからん。
これは辞めにしよう。ちゃんとJSを理解していない俺のせいでもある。
一度飯にしよう。
さて進めますか！
ちょっと想定していた予定と違うムーブがComeしすぎて、MeはDoesn't workでしたよ。
改めて実装実装。
前回途中までしていたのは、アコーディオンメニューを作っていたところだった。
途中までの記事も消えているので、改めて。
色々と調べたけど、俺はこれを４ドルで購入。
実装を進めていこう。
そうだった、プラスボタンを押すと、展開するのはOKなんだけど、そのメニューを再度クリックすると、ページのトップページに飛んでしまうのだった。
ダミーリンクを動作しないようにしたい。
これきた！
<a href="javascript:void(0);">リンク文字列</a>
で、Menuの開閉が問題なくされた。
あとは、メニューを展開した状態にするには、どうしたらよいかはDocumentに記載されていると思うので、チェックしよう。
く・・・コメントを読むと、有料サポートだと。。
２ドル程度ではあるのだが、なんだか悔しい。
開いている状態を、F12の開発モードで開く。
a.submenu-indicator-minus href="javascript:void(0);" Menu item
ul.submenu.active style="display:block;"
サブメニューを無理やり開いた状況を作った。
これで動作した！！
よし、これで開いた状態を作っておける。
無理やりっぽいけど、All OK。
影の部分は不要のため、削除。
色味は、サイトに合わせる。
よし、微調整など色々と終了した。
一度プッシュしよう。
そして、ブランチをマージして、HerokuにPushして、動作確認。
なんか、この呪文みたいな言葉Coolだよね。
ひとまず、プッシュも出来たし問題なく見れているのだけれど、モバイルでフル解像度になってしまう。
これもクロームのアップデートのせいじゃなかったかな。
とおもったけど、なんか違うっぽいな。。
調べてみよう。
View Pointを設定しなければいけないっぽい。
早速メタタグを追加だ。
これを参考にし、メタタグのみ追加してみる。
いや、ちゃんとオリジナルを参考にしよう。
にげちゃだめだ！
うん。逃げよう。
使い方、下に書いてあった。
上記リンクがそれ。
く・・・
もう一度Try！
Bundle installから初めて、再度挑戦。
さっきまでエラーでてたのって、サーバー再起動していないからじゃないかな・・・
と密かに思い始めてきた。
メタタグ恐ろしや。
ちょっと先に進まないので、むりやりビューポイント追加して様子を見てみよう。
メタタグを追加したら、携帯用に表示された。
無事に。
リンクのクリックの反応が良すぎて困る。
俺の設定が悪いかと思ったら、このやつの問題だという事に気がついた。
こういうのは携帯で一度確認しないとだめだな。
勉強になった。
うーむ、設定だけではどうともならならさそうなので、クリックできる場所を変更しよう。
これを携帯で確認すると、無事に操作できた。
こっち側に修正するか・・・
この購入した作者、わざとサポートさせるようにしているとしか思えない。
まぁ、ただ知識がないだけというね。
いやいやいや、色々となんか問題がありすぎだわさ。
タブメニューもページ一度移動してから、開いたら動作しないし。
なんだこれ。
結局、.bind("click touchstart"というのがついているのが原因という事を１時間ほど調べてわかったため、touchstartを削除したら、解決した。
いちいちherokuにアップロードしていたが、クロームのスマホシミュレーターの場合、タッチスクリーンもシミュレートしてくれるので、それで問題ないことを確認。
変な地雷仕掛けてるなぁ。
まぁ、なんとか対応できたので、よしとするか。
これでアコーディオンメニューは無事に完成！
タブが開かれなくなったのは、いつごろからかな。
ちょっと確認しよう。
Javascriptを外部にしたら、問題なくできた。
たぶん、再度読み込みしたときに、競合してしまったのだろう。
ひとまず、二回表示されてしまうのでアニメーションをなくそうとおもって調べてみる。
最高にCOOLなのがでてきた・・・
これ使いてぇ。
予測とかで特に。
よし！
今日は終わり！
だいぶ良い感じに進んだ気がする。
うん。これで他のページだいぶ進むと思うなぁ。
明日頑張ろう。
今日はViewをサクサクと・・・
進めたい。
進めてやるぜ。
昨日は、Chart.jsで手こずったDayだった。
検索の部分が気になる。
検索部分のテンプレートを修正しよう。
ナビゲーションメニューの色が気に入らない。
ということで、修正をした。
なんとなく良い感じにまとまってきたけど、今日はいまいち乗っていない。
なんだろうこの気持の波の激しさは。面倒くさい気持ちになってしまう。
タイトルでは、サクサクなのに。
うん。やる気が起きない。
今日は、ちょっとやめよう。今日改てするかどうかは俺に任せよう。
Chart.js 2.0の沼。X軸にマウス乗っけて表示したいの巻
昨日はタブの切替も出来たし、今日はサクサク進めれるのではないでしょうか。
後日談：進めれませんでした。
【課題メモ】
日時・月次・年次でデータを表示するボタンの用意
X軸の表示数を減らす処理
これらは、まぁ後日対応しよう。
今は進めていくのが先決。
あ、その前に１点気になるので、これだけしておきたい。
Chart.jsで値をそのまま入れると、天辺が一番上になるので、良い感じに＋の値を入れて表示したい。
そして、０をベースとしていたが、Googleで株価とかみると、そうでもなかった。良い感じに最低値と最大値を追加したいな。
１．最大値・最低値を取得
２．最大値と最低値に良い感じの値を追加して、表示
こう出来たら良いのか。
良い感じの値って・・・
マウスオーバーした時に、値を表示してほしい。
なんて質問したら良いのか。
vartical line でもないんだよな。
いや、そうなんだけどさ・・・
jsiddle chart.js というキーワードは、デモが見れて良いな。
これは今後使えそう。
ううーむ、さらっと、しれっと表示しているけど、未だにわからず。
沼だ・・・・沼にハマった。
一度今あるのを諦めて、jsiddle chart.jsで検索したよいサンプルを表示するところから始めてみよう。。
getContext("2d")
これがすごく怪しいんだよな。。
ちゃんと英語を読んでみると、1.0と2.0で書き方が変わっているやん。。
バージョン確認したら、chart.js は2.5だった。
2.0系の書き方になおさな。。
あった！！
1.0では標準装備なのが、2.0だと無いみたい。
それどうしたら良いのという質問。
この質問探すのに約3時間・・・トホホ。
based on cursors x position
というのがキーワードで必要だったんだな。。
ちなみに、俺が検索したのは
chart.js 2.0 hover option
Googleさんが理解してくれて大助かり。
表示はされたけど・・・表示されない！
くそぉ。
き・・・きたー！！
これですよ、これ。
求めていたのは。
X軸にマウスを乗っけて、値が表示されるもの。
コードコピペマシーンの俺にとって、神現る。
よし、これを調整しよう・・・
ひとまず、昨日の状態までに戻したい。
これ、レスポンシブも対応している。素晴らしね。
不要なのを削除して、見やすく設定をしよう。
ツールチップの編集をしたいな。
Chart.jsにめちゃ時間かけているけど今は仕方がない。
うん、公式ドキュメント見てもわからず・・・
ここの、callバックの部分を追加したら、追加できた。
ついでにタイトルも表示されなくなったので、All OK！
昨日簡単に追加できたら、ラインチャートを結局4時間かけて、作り直し的な。
一度Git push push!
・・・最大値を取得して、それをいい感じに＋とマイナスをつけるっていうのをするんだった。
まず、これを利用して、最大・最小値を取得しますか！
端数を切り上げしたい。
ん、小数点の切り捨てか。
1.11は1に
でも100単位にしたい場合は。
1450 → 1400
1450 / 100 = 14.5
にして、切り捨てした後に*100したらよいのか。
500単位にしたい場合ってどうなるんかな。
1450を1000と450に分ける。
450を/100して、四捨五入。この場合だと 0.45になるので、0になる。
その結果に＋500したらよいか。
1850でも、 0.85 = 1 になって、＋500すると、あれれ。
１なら、＋１０００
０なら、＋５００
という条件分を設ければよいな。
うん、なんかうまくいかないので、一回やめよう。
今日はこれにて。
ページをリロードしないでタブの切替、Line Chart
ページをリロードしないでタブの切替をしたい！
まずここを見てみよう。
Allaboutって昔良く見ていたけど、最近色々な情報がありすぎて見なくなってきたなぁ・・・
うーん、なんか違う。
検索キーワードを変えてみよう。
いろいろな検索をして、「タブメニュー」というキーワードを発見。
タブメニューはスワイプ対応はしたいところではあるのだけど、他のページのデザインとの調整も兼ねて辞めておこう。
むしろスクロールダウンして、タブの部分だけくっついて来てくれたら良いな。
ページのスクロール位置を維持したままフォーム送信やページ切り替えができる jQuery プラグイン | CYOKODOG
これが近い！
うーむ、調べ物で約１時間程度かかっている。
そろそろ決めないとな。
なんか、どうでも良くなってきたな・・・
普通にタブの切替設定をつけるか。
さっきまで表示されていたのに、エラーが発生している。
うーむ、なぜ permission denied？
あれ・・・ブランチ変更したからか、内容が変更されている。。
masterブランチからマージしようとしたがエラー。
Atomを落とすとすんなり出来た。
原因は、ATOMお前だったのか・・・！
ひとまず、気を取り直して作業再開。
タブの表示等確認出来た。
さて、微調整していきますか。
これを元に作っていく。
タブの色を決める時に、カラーコードを確認。
ここからリンク辿っていくと良さそう。
さて、タブも完成した。
お次は、タブの中身と行きますか。
Chart.jsを導入しようではないか。
うん。一回トイレ。
Chart.jsのGemがあるのは嬉しいなぁ。
GitHub - coderbydesign/chart-js-rails: Chart.js for Rails Asset Pipeline
ふぉぉぉ。一発で表示された！
珍しすぎる。
ひとまず、サイズが大きすぎて叶わないので、調整。
ふぉぉぉ！また成功・・・！
これは、、、あとで詰まるパターンだな。
よし、勢いにのって、設定しよう。
Line Chartを作りたいので、
を参考に進めていきましょう。
うん、適当にコピペして動かすのはだめですな。。
ちゃんと理解しよう。ううう。
お、ようやく表示された。
色々と設定をいじりたい。
あと、Y軸も0をベースにしたい。
オプションを追加して最低値を設定した。
1週間、1ヶ月、3ヶ月のチャートを表示出来るようにしたいな・・・
今日は、ラインの色とか調整して終わるか。
軸のラベルを飛び飛びにする方法は、まだ試していない。
明日試す。
色はここから、利用するとよいな。
まとまっておいてるから、安定した色合いになる。
よし、Line chartの導入が完了した。
プッシュして終わろう。
なかなか良く進んできたんじゃないかな。
