読者です 読者をやめる 読者になる 読者になる

今日で終わり!

タイトルに負けないような作業をしたい。する。

パーツの殆どはだいたいできている。

あとは、組み合わせて行けばよいはずだろう。

 

ある程度スクロールしたら、ページ上部にいくボタンが欲しい。

serinaishii.hatenablog.com

 

これをそのまま導入して、問題なく表示された。

微調整完了して、Git push!

 

ランキングつける時に、これいいな。

keitahirai.net

 

三角形カッコよかったけど、無理そうなので諦める。

結局丸にして、調整をして、アップロードDone!

 

スパークラインが合ったほうが良いな。

http://benpickles.github.io/peity/

 

これを導入する。

うーん、何かに競合して、うまく動作しないな。

多分、最初の部分のラインチャートを読み込むときのものだと思うのだけど。

 

jQuery Sparklines

こっちの方に変更しよう。

スパークラインは動作しているけど、タブの切替時に読み込みしてくれない。

なんでだろう。腹減った・・・

 

うーん、わからない。。

タブの切替時にうまく読み込めていないというのは、わかるけど、どうやって解決したらよいかわからない・・・

これは課題だな。

うん。だめだ、わからん。

これは辞めにしよう。ちゃんとJSを理解していない俺のせいでもある。

 

一度飯にしよう。

 

 

 

 

さて進めますか!

ちょっと想定していた予定と違うムーブがComeしすぎて、MeはDoesn't workでしたよ。

 

改めて実装実装。

 

前回途中までしていたのは、アコーディオンメニューを作っていたところだった。

途中までの記事も消えているので、改めて。

 

codecanyon.net

 

色々と調べたけど、俺はこれを4ドルで購入。

実装を進めていこう。

 

そうだった、プラスボタンを押すと、展開するのはOKなんだけど、そのメニューを再度クリックすると、ページのトップページに飛んでしまうのだった。

 

ダミーリンクを動作しないようにしたい。

qiita.com

 

これきた!

<a href="javascript:void(0);">リンク文字列</a>

 

で、Menuの開閉が問題なくされた。

あとは、メニューを展開した状態にするには、どうしたらよいかはDocumentに記載されていると思うので、チェックしよう。

 

く・・・コメントを読むと、有料サポートだと。。

2ドル程度ではあるのだが、なんだか悔しい。

 

開いている状態を、F12の開発モードで開く。

a.submenu-indicator-minus href="javascript:void(0);" Menu item
ul.submenu.active style="display:block;"

 

サブメニューを無理やり開いた状況を作った。

これで動作した!!

よし、これで開いた状態を作っておける。

無理やりっぽいけど、All OK。

 

影の部分は不要のため、削除。

色味は、サイトに合わせる。

 

よし、微調整など色々と終了した。

一度プッシュしよう。

そして、ブランチをマージして、HerokuにPushして、動作確認。

なんか、この呪文みたいな言葉Coolだよね。

 

ひとまず、プッシュも出来たし問題なく見れているのだけれど、モバイルでフル解像度になってしまう。

これもクロームのアップデートのせいじゃなかったかな。

とおもったけど、なんか違うっぽいな。。

 

調べてみよう。

tech.nitoyon.com

 

View Pointを設定しなければいけないっぽい。

早速メタタグを追加だ。

 

morizyun.github.io

 

これを参考にし、メタタグのみ追加してみる。

いや、ちゃんとオリジナルを参考にしよう。

github.com

 

にげちゃだめだ!

うん。逃げよう。

 

github.com

使い方、下に書いてあった。

上記リンクがそれ。

く・・・

もう一度Try!

 

Bundle installから初めて、再度挑戦。

さっきまでエラーでてたのって、サーバー再起動していないからじゃないかな・・・

と密かに思い始めてきた。

 

メタタグ恐ろしや。

ちょっと先に進まないので、むりやりビューポイント追加して様子を見てみよう。

 

メタタグを追加したら、携帯用に表示された。

無事に。

リンクのクリックの反応が良すぎて困る。

俺の設定が悪いかと思ったら、このやつの問題だという事に気がついた。

こういうのは携帯で一度確認しないとだめだな。

勉強になった。

 

うーむ、設定だけではどうともならならさそうなので、クリックできる場所を変更しよう。

 

lab.sonicmoov.com

 

これを携帯で確認すると、無事に操作できた。

こっち側に修正するか・・・

この購入した作者、わざとサポートさせるようにしているとしか思えない。

まぁ、ただ知識がないだけというね。

 

いやいやいや、色々となんか問題がありすぎだわさ。

タブメニューもページ一度移動してから、開いたら動作しないし。

なんだこれ。

 

結局、.bind("click touchstart"というのがついているのが原因という事を1時間ほど調べてわかったため、touchstartを削除したら、解決した。

 

いちいちherokuにアップロードしていたが、クロームスマホシミュレーターの場合、タッチスクリーンもシミュレートしてくれるので、それで問題ないことを確認。

 

変な地雷仕掛けてるなぁ。

まぁ、なんとか対応できたので、よしとするか。

 

これでアコーディオンメニューは無事に完成!

 

タブが開かれなくなったのは、いつごろからかな。

ちょっと確認しよう。

 

Javascriptを外部にしたら、問題なくできた。

たぶん、再度読み込みしたときに、競合してしまったのだろう。

 

ひとまず、二回表示されてしまうのでアニメーションをなくそうとおもって調べてみる。

codepen.io

最高にCOOLなのがでてきた・・・

これ使いてぇ。

予測とかで特に。

 

よし!

今日は終わり!

だいぶ良い感じに進んだ気がする。

うん。これで他のページだいぶ進むと思うなぁ。

明日頑張ろう。

 

 

 

今日はViewをサクサクと・・・

進めたい。

進めてやるぜ。

 

昨日は、Chart.jsで手こずったDayだった。

検索の部分が気になる。

 

検索部分のテンプレートを修正しよう。

 

ナビゲーションメニューの色が気に入らない。

ということで、修正をした。

なんとなく良い感じにまとまってきたけど、今日はいまいち乗っていない。

なんだろうこの気持の波の激しさは。面倒くさい気持ちになってしまう。

 

タイトルでは、サクサクなのに。

うん。やる気が起きない。

今日は、ちょっとやめよう。今日改てするかどうかは俺に任せよう。

Chart.js 2.0の沼。X軸にマウス乗っけて表示したいの巻

昨日はタブの切替も出来たし、今日はサクサク進めれるのではないでしょうか。

後日談:進めれませんでした。

 

【課題メモ】

日時・月次・年次でデータを表示するボタンの用意

X軸の表示数を減らす処理

 

これらは、まぁ後日対応しよう。

今は進めていくのが先決。

 

あ、その前に1点気になるので、これだけしておきたい。

Chart.jsで値をそのまま入れると、天辺が一番上になるので、良い感じに+の値を入れて表示したい。

 

 

そして、0をベースとしていたが、Googleで株価とかみると、そうでもなかった。良い感じに最低値と最大値を追加したいな。

 

1.最大値・最低値を取得

2.最大値と最低値に良い感じの値を追加して、表示

 

こう出来たら良いのか。

良い感じの値って・・・

 

マウスオーバーした時に、値を表示してほしい。

なんて質問したら良いのか。

 

vartical line でもないんだよな。

いや、そうなんだけどさ・・・

 

jsiddle chart.js というキーワードは、デモが見れて良いな。

これは今後使えそう。

 

ううーむ、さらっと、しれっと表示しているけど、未だにわからず。

沼だ・・・・沼にハマった。

 

一度今あるのを諦めて、jsiddle chart.jsで検索したよいサンプルを表示するところから始めてみよう。。

getContext("2d")

これがすごく怪しいんだよな。。

 

ちゃんと英語を読んでみると、1.0と2.0で書き方が変わっているやん。。

バージョン確認したら、chart.js は2.5だった。

2.0系の書き方になおさな。。

 

あった!!

github.com

 

1.0では標準装備なのが、2.0だと無いみたい。

それどうしたら良いのという質問。

この質問探すのに約3時間・・・トホホ。

 

based on cursors x position

というのがキーワードで必要だったんだな。。

ちなみに、俺が検索したのは

chart.js 2.0 hover option

 

Googleさんが理解してくれて大助かり。

 

表示はされたけど・・・表示されない!

くそぉ。

 

き・・・きたー!!

jsfiddle.net

 

これですよ、これ。

求めていたのは。

X軸にマウスを乗っけて、値が表示されるもの。

コードコピペマシーンの俺にとって、神現る。

 

よし、これを調整しよう・・・

ひとまず、昨日の状態までに戻したい。

これ、レスポンシブも対応している。素晴らしね。

 

不要なのを削除して、見やすく設定をしよう。

ツールチップの編集をしたいな。

 

Chart.jsにめちゃ時間かけているけど今は仕方がない。

うん、公式ドキュメント見てもわからず・・・

 

stackoverflow.com

 

ここの、callバックの部分を追加したら、追加できた。

ついでにタイトルも表示されなくなったので、All OK!

 

昨日簡単に追加できたら、ラインチャートを結局4時間かけて、作り直し的な。

一度Git push push!

 

・・・最大値を取得して、それをいい感じに+とマイナスをつけるっていうのをするんだった。

www.softel.co.jp

 

まず、これを利用して、最大・最小値を取得しますか!

 

端数を切り上げしたい。

syncer.jp

 

ん、小数点の切り捨てか。

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すると、あれれ。

1なら、+1000

0なら、+500

という条件分を設ければよいな。

 

うん、なんかうまくいかないので、一回やめよう。

今日はこれにて。

 

ページをリロードしないでタブの切替、Line Chart

ページをリロードしないでタブの切替をしたい!

allabout.co.jp

まずここを見てみよう。

Allaboutって昔良く見ていたけど、最近色々な情報がありすぎて見なくなってきたなぁ・・・

 

うーん、なんか違う。

検索キーワードを変えてみよう。

いろいろな検索をして、「タブメニュー」というキーワードを発見。

 

タブメニューはスワイプ対応はしたいところではあるのだけど、他のページのデザインとの調整も兼ねて辞めておこう。

むしろスクロールダウンして、タブの部分だけくっついて来てくれたら良いな。

ページのスクロール位置を維持したままフォーム送信やページ切り替えができる jQuery プラグイン | CYOKODOG

 

これが近い!

うーむ、調べ物で約1時間程度かかっている。

そろそろ決めないとな。

なんか、どうでも良くなってきたな・・・

普通にタブの切替設定をつけるか。

 

さっきまで表示されていたのに、エラーが発生している。

うーむ、なぜ permission denied?

 

あれ・・・ブランチ変更したからか、内容が変更されている。。

masterブランチからマージしようとしたがエラー。

Atomを落とすとすんなり出来た。

原因は、ATOMお前だったのか・・・!

 

ひとまず、気を取り直して作業再開。

タブの表示等確認出来た。

 

さて、微調整していきますか。

 

fukafuka295.jp

これを元に作っていく。

タブの色を決める時に、カラーコードを確認。

blog.codecamp.jp

 

ここからリンク辿っていくと良さそう。

さて、タブも完成した。

お次は、タブの中身と行きますか。

 

Chart.jsを導入しようではないか。

うん。一回トイレ。

 

Chart.jsのGemがあるのは嬉しいなぁ。

GitHub - coderbydesign/chart-js-rails: Chart.js for Rails Asset Pipeline

 

ふぉぉぉ。一発で表示された!

珍しすぎる。

ひとまず、サイズが大きすぎて叶わないので、調整。

ふぉぉぉ!また成功・・・!

 

これは、、、あとで詰まるパターンだな。

よし、勢いにのって、設定しよう。

 

Line Chartを作りたいので、

Chart.js | Documentation

を参考に進めていきましょう。

 

うん、適当にコピペして動かすのはだめですな。。

ちゃんと理解しよう。ううう。

 

お、ようやく表示された。

 

色々と設定をいじりたい。

qiita.com

 

あと、Y軸も0をベースにしたい。

joppot.info

 

オプションを追加して最低値を設定した。

1週間、1ヶ月、3ヶ月のチャートを表示出来るようにしたいな・・・

 

今日は、ラインの色とか調整して終わるか。

軸のラベルを飛び飛びにする方法は、まだ試していない。

明日試す。

 

色はここから、利用するとよいな。

まとまっておいてるから、安定した色合いになる。

www.hp-stylelink.com

 

よし、Line chartの導入が完了した。

プッシュして終わろう。

 

なかなか良く進んできたんじゃないかな。

 

 

 

ヘッダー再び

スクロールダウンした時に、ヘッダー非表示

スクロールアップした時に、ヘッダーを表示

 

これをぜひとも導入したい。

昨日は、コピペでだめだったので、もう一度丁寧にやろう。

コピペすればOK~!というのは、やはりだめですな。。

あらためて、これに挑戦してみる。

weboook.blog22.fc2.com

 

HTMLからSlimに置換するのが億劫だった。

置換してくれないかなぁー。と思い調べる。

erb2slim.com

 

いやぁ。あるんですな。

素晴らしい。

 

うーん、動かない。

固定表示はされているし・・・

 

ででで、、、できたー!!

Javascriptをちゃんと読み込み出来ていなかった。

 

よっしゃ!これで微調整して進めれる!

デザインの問題発生。

うぅむ・・・ヘッダーの高さを固定

いや、ナビゲーションメニューを上に持ってくることにしよう。

 

ナビメニューのサイズも固定しないと、この固定ヘッダー使えないな。

という事で、サイズを固定しよう。

昨日 vh とか vw設定してたものを一度破棄。

 

よし、微調整終了!これで、ヘッダーメニューを完成としよう。

 

このページだけで、コンテンツを表示したい!

そう思って調べて、便利なコードを発見。

if current_page?(設定したパス) == true

これを用いれば、トップページのみ表示したい場合など、追加できる!!

 

下階層のページに、パンくずリストを追加するぞ!

junk-blog.com

ページタイトルが長くなるので、パンくずリストは横スクロール出来るようにしておきたいね。

と、その前にどうやって各ページのパンくずリストまとめるんだ・・・

 

グーグルで調べまくりだ。そして何らかの答えが見つかる。

 

 

life.hint.jp.net

 

gretel gem使ってパンくずリストの設定をしてみよう。

何か新しい事する前に、現状をPush Push!

 

はい、また適当にしたため、エラーがでましたよっと。

ちゃんと理解しましょうね。俺。

github.com

 

ちゃんと読みましょうね、ドキュメント。

 

No methodのエラーはもう怖くない!

サーバーを再起動で確認だ。
Bundle installした場合は、基本サーバーを再起動だね。

 

うまく行かなかったけど、読み込みはされている。

はて、なぜテキストで出てしまっていたのか。

それは、=で結んでいたからだった。

 

slimでの記載は、==で結ばなきゃだめだという事に気が付き、無事に対応完了!

 

ナビゲーションメニューを一つの管理画面で作って、まとめて管理する事をしたい。

 

qiita.com

 

これ良いまとめだなぁ。

 

と、脱線するのではなく、まずパンくずリストのデザインもちゃんとしないと。

 

パンくずリストの表示ができた・・・!

各ページのパンくずリストを作ろう。

 

ホームをアイコンに変更したいなぁ、どうしたラインだろう。

出来ないなぁ。

 

よし!パンくずリストの追加は、無事に完了!

今日は順調に進んでいるなっ!

 

今日は、あとはパンくずリストを横スクロールをつけるのを導入して終わろう。

俺の携帯で試しに表示したら、めっちゃ文字小さかった・・・
@mediaで微調整は後ほどしよう。

 

パンくずリストのよこスクロール。

まずはコピペで試してガッテン!

 

スクロールの出来たけど、ものすごく微妙。。

よし!できた!

 

今日は、ヘッダーのスクロール、パンくずリストパンくずリストの横並べ表示の3つ完成。

なかなか良いんじゃないっすか!?

 

 

 

 

 

 

ヘッダー完成!

昨日は不甲斐なかった。

今日はバッチリ眠ったので、大丈夫!若干頭がいたいけど、どんまい。

 

ヘッダー部分と、スクロール設定を今日は設けよう。

www.webopixel.net

これ素晴らしいね。

ロームでモバイル版テストが未だにできない。

多分、携帯用の表示をしないとだめなんだろうなと思う。

IEでするのも面倒くさいので、仕方がないがFire Foxをインストールしよう。

Firefox良いな。

よし、これでストレス解消。

文字サイズを、変更させたい。

qiita.com

ホームページ制作 東京 【SKYGOLD】 / フリーランス WEBデザインオフィス » フォントサイズを「vw・vh」でビューポートの幅にあわせて可変させる

画面の横幅全体を「100vw」とみなしますので、
例えば、10vwと記述すると、「ビューポートの全体幅に対して1/10」のサイズになります。

画面の横幅が320pxの時に、14pxのフォントサイズで表示したいときは、
14px÷320px=0.04375(4.375%) となりますので、「4.375vw」と記述します。

 

とのこと。

%と同じような間隔で考えればよいかな。

これを設定すれば、それぞれのスマホで若干違うサイズが合ったとしても、変更対応できるな。

 

 

背景が、継承されない・・・なんでやねん!って何回も試していたが、継承されないようになっているんだね。

背景/CSSリファレンス

 

知りませんでした。

 

リンクの色がかわらない!

なんでだって思ったら、 a のタグを追加わすれというね。

a:link で aタグのリンク修正だと思ったら違ったでござる。

よし、ようやっといい感じになってまいりました。

 

vwとvhは、携帯で見ると良いかもしれないけど、そのままPCで見ると地獄だ。

PC用は、後日対応するとしよう。

 

次は、スクロールしたときに、ボタンがフォローしてくるのを導入。

 

RubyJavascript読み込ませる方法って、どうすんだっけな。。

Railsで、任意のJavaScriptやCSSだけを読み込む - Qiita

これを実行してみる。

 

多分問題なさそうな気がする。

 

そして、うまく動作したが・・・色々と設定が必要だな。

カクカクするのが気になるな。もっとスムーズに表示されないものだろうか。

 

 

weboook.blog22.fc2.com

こっちのほうがよいな。

 

うーむ、うまくいかない。もっと真剣にやればできるだろうけど、適当にしているからな。

 

wicky.nillia.ms

 

これよさそうあので、試してみる。

色々とやってわけわからなくなったので、一度元に戻した。

$ git reset --hard HEAD

で追加されたものを全て削除し、元にもどす。

 

https://euphomemo.tumblr.com/post/150484291521/よくググって時間無駄にしてしまいがちなサイト制作のあれやこれや

euphomemo.tumblr.com

 

これは良さそうだなぁ。

ヘッダーが上にスクロールした時に、表示するメニューを作れなかった。うーん、なんとか作り終えたい。

 

・・・だめでした。

あとで再度挑戦。