今日で終わり！
タイトルに負けないような作業をしたい。する。
パーツの殆どはだいたいできている。
あとは、組み合わせて行けばよいはずだろう。
ある程度スクロールしたら、ページ上部にいくボタンが欲しい。
これをそのまま導入して、問題なく表示された。
微調整完了して、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の導入が完了した。
プッシュして終わろう。
なかなか良く進んできたんじゃないかな。
ヘッダー再び
スクロールダウンした時に、ヘッダー非表示
スクロールアップした時に、ヘッダーを表示
これをぜひとも導入したい。
昨日は、コピペでだめだったので、もう一度丁寧にやろう。
コピペすればOK～！というのは、やはりだめですな。。
あらためて、これに挑戦してみる。
HTMLからSlimに置換するのが億劫だった。
置換してくれないかなぁー。と思い調べる。
いやぁ。あるんですな。
素晴らしい。
うーん、動かない。
固定表示はされているし・・・
ででで、、、できたー！！
Javascriptをちゃんと読み込み出来ていなかった。
よっしゃ！これで微調整して進めれる！
デザインの問題発生。
うぅむ・・・ヘッダーの高さを固定
いや、ナビゲーションメニューを上に持ってくることにしよう。
ナビメニューのサイズも固定しないと、この固定ヘッダー使えないな。
という事で、サイズを固定しよう。
昨日 vh とか vw設定してたものを一度破棄。
よし、微調整終了！これで、ヘッダーメニューを完成としよう。
このページだけで、コンテンツを表示したい！
そう思って調べて、便利なコードを発見。
if current_page?(設定したパス) == true
これを用いれば、トップページのみ表示したい場合など、追加できる！！
下階層のページに、パンくずリストを追加するぞ！
ページタイトルが長くなるので、パンくずリストは横スクロール出来るようにしておきたいね。
と、その前にどうやって各ページのパンくずリストまとめるんだ・・・
グーグルで調べまくりだ。そして何らかの答えが見つかる。
gretel gem使ってパンくずリストの設定をしてみよう。
何か新しい事する前に、現状をPush Push!
はい、また適当にしたため、エラーがでましたよっと。
ちゃんと理解しましょうね。俺。
ちゃんと読みましょうね、ドキュメント。
No methodのエラーはもう怖くない！
サーバーを再起動で確認だ。
Bundle installした場合は、基本サーバーを再起動だね。
うまく行かなかったけど、読み込みはされている。
はて、なぜテキストで出てしまっていたのか。
それは、＝で結んでいたからだった。
slimでの記載は、＝＝で結ばなきゃだめだという事に気が付き、無事に対応完了！
ナビゲーションメニューを一つの管理画面で作って、まとめて管理する事をしたい。
これ良いまとめだなぁ。
と、脱線するのではなく、まずパンくずリストのデザインもちゃんとしないと。
パンくずリストの表示ができた・・・！
各ページのパンくずリストを作ろう。
ホームをアイコンに変更したいなぁ、どうしたラインだろう。
出来ないなぁ。
よし！パンくずリストの追加は、無事に完了！
今日は順調に進んでいるなっ！
今日は、あとはパンくずリストを横スクロールをつけるのを導入して終わろう。
俺の携帯で試しに表示したら、めっちゃ文字小さかった・・・
@mediaで微調整は後ほどしよう。
パンくずリストのよこスクロール。
まずはコピペで試してガッテン！
スクロールの出来たけど、ものすごく微妙。。
よし！できた！
今日は、ヘッダーのスクロール、パンくずリスト、パンくずリストの横並べ表示の3つ完成。
なかなか良いんじゃないっすか！？
ヘッダー完成！
昨日は不甲斐なかった。
今日はバッチリ眠ったので、大丈夫！若干頭がいたいけど、どんまい。
ヘッダー部分と、スクロール設定を今日は設けよう。
これ素晴らしいね。
クロームでモバイル版テストが未だにできない。
多分、携帯用の表示をしないとだめなんだろうなと思う。
IEでするのも面倒くさいので、仕方がないがFire Foxをインストールしよう。
Firefox良いな。
よし、これでストレス解消。
文字サイズを、変更させたい。
ホームページ制作 東京 【SKYGOLD】 / フリーランス WEBデザインオフィス » フォントサイズを「vw・vh」でビューポートの幅にあわせて可変させる
画面の横幅全体を「100vw」とみなしますので、
例えば、10vwと記述すると、「ビューポートの全体幅に対して1/10」のサイズになります。
画面の横幅が320pxの時に、14pxのフォントサイズで表示したいときは、
14px÷320px=0.04375(4.375%) となりますので、「4.375vw」と記述します。
とのこと。
％と同じような間隔で考えればよいかな。
これを設定すれば、それぞれのスマホで若干違うサイズが合ったとしても、変更対応できるな。
背景が、継承されない・・・なんでやねん！って何回も試していたが、継承されないようになっているんだね。
知りませんでした。
リンクの色がかわらない！
なんでだって思ったら、 a のタグを追加わすれというね。
a:link で aタグのリンク修正だと思ったら違ったでござる。
よし、ようやっといい感じになってまいりました。
vwとvhは、携帯で見ると良いかもしれないけど、そのままPCで見ると地獄だ。
PC用は、後日対応するとしよう。
次は、スクロールしたときに、ボタンがフォローしてくるのを導入。
RubyにJavascript読み込ませる方法って、どうすんだっけな。。
Railsで、任意のJavaScriptやCSSだけを読み込む - Qiita
これを実行してみる。
多分問題なさそうな気がする。
そして、うまく動作したが・・・色々と設定が必要だな。
カクカクするのが気になるな。もっとスムーズに表示されないものだろうか。
こっちのほうがよいな。
うーむ、うまくいかない。もっと真剣にやればできるだろうけど、適当にしているからな。
これよさそうあので、試してみる。
色々とやってわけわからなくなったので、一度元に戻した。
$ git reset --hard HEAD
で追加されたものを全て削除し、元にもどす。
これは良さそうだなぁ。
ヘッダーが上にスクロールした時に、表示するメニューを作れなかった。うーん、なんとか作り終えたい。
・・・だめでした。
あとで再度挑戦。
