自宅でお小遣い稼ぎをしたい主婦がアプリリリースを目指すブログです。この広告は、90日以上更新していないブログに表示しています。Rubyこんにちは、マリンです。Tutorialをやっています。前は理解できなかったけど今回はわかる!ということがあって面白いです。まとめ状況まず最初に、今回はCloud9ではなくローカルでテキストエディタAtomを使って勉強しています。前に勉強した時にHerokuはインストール済みです。world!は問題なくデプロイできました。foundと出てherokuコマンドが突然使えなくなりました。今回参考にさせていただいた記事はこちらです。qiita.comどうやら、heroku自体は使える状況ですが、ターミナルを起動するごとに前回のherokuの設定が消えてしまうため、herokuがどこにあるか分からなくなっている。上記の原因を踏まえ、対処法としてはherokuへのパスを書いたファイルを、ターミナルの起動毎に実行するように設定してあげると良いとのこと。それでは方法を記述します。bashrcファイルにパスを記述します。次に上記のbashrcファイルをターミナルの起動毎に読み込むようにします。~/.bash_profileを実行。まとめもし前回同じような問題で躓いたとしたら、おそらく時間をかけて解決はできたかもしれませんが、その方法や自分が行なっていることがなんなのか?までは理解できなかったと思います。Tutorial含め、教材は何度も繰り返すことは必要だなと感じました。プログラミングこんにちは、マリンです。今回はCSSで線形グラデーションを実装する方法です。仕組みをちゃんと理解しようと思って勉強しましたので、ここでまとめます。liner-gradientとはliner-gradientの仕組みliner-gradientは画像である寸法は要素と同じグラデーションの角度は軸の角度で決まるポイント地点は軸に対して直角に交わる交点liner-gradientの構文グラデーションの参考サイトリファレンス参考サイトまとめliner-gradientとはCSS3にある線形グラデーションを実装するための関数です。要素に対して複雑なグラデーションを表現することができます。liner-gradientの仕組みちょっと難しい話なのですが、詳しい内容はこちらで説明してくださっています。developer.mozilla.org理解力が乏しいので、間違っていたらご指摘ください。乏しいなりに解釈したポイントを以下にまとめます。liner-gradientは画像である二つ以上の色の間で、連続的な直線の変化から構成される画像を生成します。gradientデータ型のオブジェクトであり、これはimageの特殊型です。何となく難しいのですが、つまるところグラデーションは色扱いではなく画像扱い。指定した2色以上の間でちょっとずつ色を変えていった直線を並べることでグラデーションを表現した画像?と勝手に理解しています。私も実際一度失敗しています。なんで??と思ったけど、これですっきりです。寸法は要素と同じ他のグラデーションと同様、線形グラデーションは固有の寸法を持ちません。画像本来の寸法や、優先されるアスペクト比を持たないということです。実際の寸法は、適用先の要素の寸法と一致します。この部分を読む限り、このliner-gradient自体には決まったサイズはないようですね。liner-gradientのサイズということのようです。呼ばれる軸によって定義されます。軸上の各点にはそれぞれ違った色が割り当てられます。関数はグラデーションラインと直行した線を、グラデーションライン上の交点の色で連続して引きます。liner-gradientには適用するボックスの中心を通る(見えない)軸があり、グラデーションの角度はこの軸の角度によって決まっています。直角に交わるポイントを指定することで変化をつけます。指定のない場合は、前後の点の真ん中が中間地点となります。続いて構文について記載します。角度であればdegを付けた角度値、方向ならtopなどのキーワードで指定できる。rgbやrgba、キワードで指定でき、%をつけると、その位置を指定できる。角度については0degや90degなどのように軸の角度値を指定することで決められます。leftのように何処〜というキーワードを指示してあげます。開始と終了の色についてはキーワード、rgb、16進法など通常の色指定ができます。スペース区切りでパーセンテージを指定すると、その位置を指定できます。複数指定することで間に様々な色を入れたグラデーションを作れます。様々なグラデーションの例を見られるサイトをご紹介します。リファレンスいつもお世話にな入ります。Mozillaさんのリファレンスです。詳しい解説が載っています。developer.mozilla.orgこちらもいつもお世話になります。HTMLクイックリファレンスさんです。わかりやすい使い方が載っています。www.htmq.com参考サイトWebクリエイターボックスさんです。キレイなグラデーションの書き方が載っています。www.webcreatorbox.comWeb屋tmさんです。カッコいいメタリックなグラデーションをお探しならこちら。webya-tm.comまとめいかがでしたでしょうか?いつもは最後の参考サイトさんのものをコピペして使っていました。引数がいっぱいあってなんだか難しそうだったんですもん!!でもちゃんとリファレンス読んで見れば難しいことはなかったです。1つ目は角度(もしくは方向)、2つ目は開始色(と位置)、最後が終了色(と位置)、そしてそれ以外が中間色とその位置で、それらを工夫することで美しいグラデーションや、カッコいいメタリックなグラデーションを表現していたんですね。これがマスターできればWebのデザインにも幅が広がりそうです。->と=>の違いこんにちは、マリンです。祝!令和!!無事新しい時代が幕を開けましたね!私も怒涛の長女卒園からの入学が終わって一安心です。令和の時代も平和が続きますように!そしてスキルアップできますように!!さて、令和元年一発目の投稿は、CoffeeScriptの=>(ファットアロー)についてです。名前初めて知りました。先輩のコードを読んでいて頻繁に出てきたため勉強してみました。ファットアローとは?thisを保持するとは?->と=>の違いまとめファットアローとは?ファットアローとは、CoffeeScriptにおける関数定義の方法の一つです。現在のthisを、定義した関数の中でも保持することができるというシロモノです。?という感じだったので詳しく調べました。thisを保持するとは?そもそもthisとは、呼び出す場所や方法によってその中身が変わる特殊な変数です。構文やオプション設定などもなく、単体でどこでも呼び出すことが可能です。CoffeeScriptにおいては、@で表します。中身が変わってきます。...}上記では呼び出す場所によってthisの中身が変わっていることを検証しています。自身のクラスをthisに格納しているようです。そのfuncの中で呼び出している即時関数のthisにはWindowが入っています。「thisが保持されていない」状態ですね。コールバック関数やイベントハンドラの中ではthisがその対象だったりしますが、これが保持されていない状態です。{}今度はfuncの中で、即時関数を実行する前に@をthatという変数に入れてみました。即時関数ではこのthatを出力するようにしています。すると、実行結果がfuncと即時関数で同じになりましたね。これが「thisを保持する」という状況です。thisなど変数に格納することによって保持するようです。(格納する変数名はthatもしくはselfが慣習となっています。)このthisを保持するための変数格納の処理を自動的に行いつつ関数宣言するのが=>(ファットアロー)です。先程の例を使って->と=>の違いを見てみます。{}->(アロー?でいいのかな)の方の即時関数は、最初の例と同じように、thisが保持されることなくWindowが格納されています。変数を定義することなくthisが保持されていることがわかります。これが->と=>の関数定義の違いです。ちなみにこの2つがどのようにコンパイルされているか見てみましょう。pages.func();10~12行目が->の部分、14~18行目が=>の部分です。見づらいですが、=>の方は即時関数に_thisを渡し、それを元に無名関数を呼び出しています。thisの代わりのような役割になっているようです。即時関数の実引数にMyObjでのthisが渡されていますね。まとめ->と=>はともにCoffeeScriptにおける関数定義の方法で、2つの違いは、関数定義前のthisを保持するか否か?ということでした。今回の大型連休のおかげで一つ謎が解けました。ー親要素で発火するイベントを特定の子孫では解除したいーこんにちは、マリンです。今回はJSでのイベントを発火させる要素の特定です。親要素で指定するが、特定の子孫要素では実行してほしくない。子孫要素でのやり方がイマイチよくわからず。そこで今回はイベントオブジェクトを使ってこれを実装しました。皆様ぜひ教えてください。詳細サンプルコード詳細解説まとめ概要tableの概要を記述したtrをクリックした時、詳細の列が表示されるようにする。trの中には承認ボタンがある。hideが実行されてしまう。以上のことから、子要素のボタンだけクリックイベントを外したいわけです。最初は:notなどを使って特定しようとしたのですが、うまくボタンだけを取ることが出きませんでした。そこで、イベントオブジェクトを使ってみました。詳細サンプルコードまずは解説に使うサンプルコードを記載しておきます。</table></form>上段のtrが表示されている行。下段のtrが非表示部分で、上段をクリックすると表示されます。上段3つ目のカラムにあるボタンだけはクリックの対象外にします。以下が今回のCoffeeです。retrun詳細解説HTMLは省略します。$(e.target)まずは最初の2行です。1行目は上段trへのクリックイベントで、引数eがイベントオブジェクトです。2行目はイベントが発生したjQueryオブジェクトを変数に入れています。targetの中身は以下のようになっています。returnif文でイベントが発生した要素がボタンだったら何もしないで終了させています。if文の内容と、先ほどのtargetの中身を見比べてみてください。"BUTTON"イベントオブジェクトのtarget。その中に入っているキー[0]でDOM要素を取得し、さらにその中からnodeNameプロパティで対象となった要素名を取得します。要素名が"BUTTON"だったら何もせずreturnというわけです。今回のような単純なコードでしたら入れる必要もないと思います。"BUTTON"でいけます。一度じっくり眺めてみるとなんとなく解ってきました。見よくわからない!と思っても、テンパることなく冷静に眺めていることって必要ですね。余談ですが、今回のことでなぜ$()を使ってjQueryオブジェクトにするのか?ということが今更ながら理解できました。根本が解っていないと理解が遅くなる一方ですね。奥が深いと思うので、これを機にちゃんと勉強してみます。ー親要素で発火するイベントを特定の子孫では解除したいーTweet広告を非表示にするもっと読むコメントを書く2019-01-24【Git】ブランチ間違えてコミットしてた!?皆さん明けましておめでとうございます。^;)本年も地味に更新してまいりますので、どうぞよろしくお願いいたします。えたブランチを、コミットする前の状態に戻す。作業終了時に初めて「ブランチ前回のままじゃん!!」と気づきました。間違えたブランチから本来のブランチへ変更部分を移してコミット。いう解決方法を記述します。間違えたブランチをコミットする前の状態に戻す。変更部分を一度退避する。ブランチを切り替える。切り替えたブランチで退避した変更部分を復活。間違えたブランチを、コミットする前の状態に戻す。logでどこまで戻せば良いか確認します。コミットのハッシュ値でブランチをコミット前の状態に戻します。この時絶対に--softを使ってください!このオプションで作業ディレクトリの変更内容は残したまま、コミットだけを取り消すことができます。ちなみに指定するコミットのハッシュ値は、このコミットまで戻したい!というコミットのハッシュ値を指定します。指定したコミットの次にコミットしたものまでが取り消されます。これに限らず、どれを指定するとどこまで影響するのか?にいつも迷います。stashこのままではcheckoutしても変更部分を反映させられないので、この変更部分は一時的に退避させます。"hogehoge"のように名前をつけておくこともできます。popこのコマンドは、退避した部分を復活と同時に退避リストから削除するものです。今回は全変更部分を一括でやってしまったので。あとは切り替えたブランチでコミットすれば作業終了です。stashの使い方については、こちらで詳しく説明してくださっています。qiita.com解決方法の参考にさせていただいたのはこちらです。vatscy.github.iowww.kaasan.infoまとめ今回は焦っていたので全変更部分を一括で移して1コミットで終わらせてしましました。状態を一つ戻す→名前をつけて退避を繰り返し、退避終了後ブランチ切り替え→一つずつ復元→コミットとすべきだったと思います。ことでパニクっていたのと、子供の迎え時間が迫っていたのでテンパって一気にどーん!とやってしまいました。作業前に確認しましょう。13:40【Git】ブランチ間違えてコミットしてた!?Tweet広告を非表示にするもっと読むコメントを書く2018-12-31本年もご覧いただき有難うございました。こんにちは、マリンです。2018年最後の投稿です。今年も残すところ12時間弱。誠にありがとうございました!2019年も地味に更新して参る所存ですので、どうぞよろしくお願い申し上げます。12:52本年もご覧いただき有難うございました。Tweet広告を非表示にするもっと読むコメントを書く2018-12-05【Rails】Date型↔︎文字型変換こんにちは、マリンです。備忘録としてここに書かせていただきます。文字列型Date型から文字列型への変換方法。文字列型の日付(変換後)Date型のオブジェクトに対し、strftimeメソッドを使うことで文字列型に変換できます。引数にフォーマットを指定することで、その指定通りの形に変換できます。ちなみに、%Yを%yにすると年の下二桁だけを出せます。フォーマット一覧は以下の通りです。*文字は基本的に英語表記です。