主婦がアプリをリリースするまでの軌跡

自宅でお小遣い稼ぎをしたい主婦がアプリリリースを目指すブログです。

【Rails Tutorial】herokuコマンドが使えない

f:id:song-of-life1352607:20190923114521p:plain

こんにちは、マリンです。

今更ながら復習でRails Tutorialをやっています。

前回は訳も分からずやっていた部分も多く、

何度繰り返しても新しい発見や、

前は理解できなかったけど今回はわかる!

ということがあって面白いです。

さて、今回は第3章のsample_appをHerokuに上げる際に、

herokuコマンドが使えなくなったのでその対処をメモします。





状況

まず最初に、今回はCloud9ではなくローカルでテキストエディタAtomを使って勉強しています。


前に勉強した時にHerokuはインストール済みです。

第1章のHello, world!は問題なくデプロイできました。

第2章のToy Appはデプロイを省略してしまったのですが、

第3章のSample Appでセットアップ後に教材通りデプロイを試みたところ、

$ heroku create

bash: heroku: command not found

と出てherokuコマンドが突然使えなくなりました。


原因

今回参考にさせていただいた記事はこちらです。

qiita.com




どうやら、heroku自体は使える状況ですが、

ターミナルを起動するごとに前回のherokuの設定が消えてしまうため、

herokuがどこにあるか分からなくなっている。

ということのようです。


対処法

上記の原因を踏まえ、対処法としてはherokuへのパスを書いたファイルを、

ターミナルの起動毎に実行するように設定してあげると良いとのこと。

それでは方法を記述します。


まずはbashrcファイルにパスを記述します。

# vimでbashrcファイルを開きます
$vi ~/.bashrc
# 入力モード(iキー)でパスを記述
PATH=/usr/local/heroku/bin:$PATH
# escキーで入力モード解除後に:wqで保存、終了




次に上記のbashrcファイルをターミナルの起動毎に読み込むようにします。

# bash_profileファイルに記述
$vi ~/.bash_profile
# bashrcの時と同じ手順でファイルの最後に以下を記述
source ~/.bashrc

その後ターミナルを再起動、もしくはsource ~/.bash_profileを実行。

以上になります。


まとめ

もし前回同じような問題で躓いたとしたら、

おそらく時間をかけて解決はできたかもしれませんが、

その方法や自分が行なっていることがなんなのか?

までは理解できなかったと思います。

Rails Tutorial含め、教材は何度も繰り返すことは必要だなと感じました。

【CSS】liner-gradient 〜CSSで線形グラデーション〜

f:id:song-of-life1352607:20190903130934p:plain

こんにちは、マリンです。

今回はCSSで線形グラデーションを実装する方法です。

今までなんか難しそうだったから

コピペでなんとなく使っていたのですが、

仕組みをちゃんと理解しようと思って勉強しましたので、

ここでまとめます。





liner-gradientとは

CSS3にある線形グラデーションを実装するための関数です。

引数にグラデーションの方向や角度、色などをしていすることで、

要素に対して複雑なグラデーションを表現することができます。


liner-gradientの仕組み

ちょっと難しい話なのですが、詳しい内容はこちらで説明してくださっています。

developer.mozilla.org

理解力が乏しいので、間違っていたらご指摘ください。

乏しいなりに解釈したポイントを以下にまとめます。


liner-gradientは画像である

二つ以上の色の間で、連続的な直線の変化から構成される画像を生成します。結果は gradientデータ型のオブジェクトであり、これはimageの特殊型です。

何となく難しいのですが、つまるところ

グラデーションは色扱いではなく画像扱い。

ということです。

指定した2色以上の間でちょっとずつ色を変えていった直線を

並べることでグラデーションを表現した画像?

と勝手に理解しています。


ですので注意すべきは

background-colorなどの色を指定するプロパティには使えない という点です。

私も実際一度失敗しています。使えませんでした。

なんで??と思ったけど、これですっきりです。


寸法は要素と同じ

他のグラデーションと同様、線形グラデーションは固有の寸法を持ちません。つまり、画像本来の寸法や、優先されるアスペクト比を持たないということです。実際の寸法は、適用先の要素の寸法と一致します。

この部分を読む限り、このliner-gradient自体には決まったサイズはないようですね。

なので、適用させる要素のサイズ = liner-gradientのサイズ

ということのようです。


グラデーションの角度は軸の角度で決まる

線形グラデーションは、グラデーションライン (Gradient line) と呼ばれる軸によって定義されます。軸上の各点にはそれぞれ違った色が割り当てられます。なめらかなグラデーションを作成するために、 linear-gradient() 関数はグラデーションラインと直行した線を、グラデーションライン上の交点の色で連続して引きます。

liner-gradientには適用するボックスの中心を通る(見えない)軸があり、

グラデーションの角度はこの軸の角度によって決まっています。


ポイント地点は軸に対して直角に交わる交点

そしてこの軸に対して開始地点、終了地点、中間地点を示す、

直角に交わるポイントを指定することで変化をつけます。

最初の画像のところに書いたちょっとずつ色の違う線が、

このポイントから順番に引かれていくことでグラデーションになるのかな?

上記の中間地点に関しては細かく、そして複数設定することが可能ですが、

特に指定のない場合は、前後の点の真ん中が中間地点となります。


liner-gradientの構文

続いて構文について記載します。

linear-gradient(グラデーションの角度または方向, 開始色, 中間色, 終了色);
  • 角度、方向: 角度であればdegを付けた角度値、方向ならtopなどのキーワードで指定できる。

  • 開始色: rgbやrgba、キワードで指定でき、%をつけると、その位置を指定できる。

  • 中間色: 上に同じ。複数指定可能。

  • 終了色: 開始と同じ。




角度については0deg90degなどのように

軸の角度値を指定することで決められます。

方向でしたらto topto bottomto leftのように

何処〜というキーワードを指示してあげます。

開始と終了の色については

キーワード、rgb、16進法など通常の色指定ができます。

また、スペース区切りでパーセンテージを指定すると、

その位置を指定できます。

中間についても開始、終了と指定方法は同じで、

更に複数指定することで間に様々な色を入れたグラデーションを作れます。


グラデーションの参考サイト

最後に勉強させていただいたサイトと、

様々なグラデーションの例を見られるサイトをご紹介します。

リファレンス

いつもお世話にな入ります。Mozillaさんのリファレンスです。

とても詳しい解説が載っています。

developer.mozilla.org

こちらもいつもお世話になります。HTMLクイックリファレンスさんです。

とてもわかりやすい使い方が載っています。

www.htmq.com




参考サイト

Webクリエイターボックスさんです。

めちゃめちゃキレイなグラデーションの書き方が載っています。

www.webcreatorbox.com

Web屋tmさんです。

カッコいいメタリックなグラデーションをお探しならこちら。

webya-tm.com




まとめ

いかがでしたでしょうか?

いつもは最後の参考サイトさんのものをコピペして使っていました。

だって引数がいっぱいあってなんだか難しそうだったんですもん!!

でもちゃんとリファレンス読んで見れば難しいことはなかったです。

1つ目は角度(もしくは方向)、2つ目は開始色(と位置)、最後が終了色(と位置)、

そしてそれ以外が中間色とその位置で、

それらを工夫することで美しいグラデーションや、

カッコいいメタリックなグラデーションを表現していたんですね。

これがマスターできればWebのデザインにも幅が広がりそうです。

【CoffeeScript】 ->と=>の違い

f:id:song-of-life1352607:20190505165514p:plain

こんにちは、マリンです。

祝!令和!!無事新しい時代が幕を開けましたね!

私も怒涛の長女卒園からの入学が終わって一安心です。

令和の時代も平和が続きますように!

そしてスキルアップできますように!!


さて、令和元年一発目の投稿は、

CoffeeScriptの=>(ファットアロー)についてです。

名前初めて知りました。。。

今までよくわからないので->こちらのみを使っていましたが、

先輩のコードを読んでいて頻繁に出てきたため勉強してみました。





ファットアローとは?

ファットアローとは、CoffeeScriptにおける関数定義の方法の一つです。

現在のthisを、定義した関数の中でも保持することができるというシロモノです。

って、なんぞや?という感じだったので詳しく調べました。




thisを保持するとは?

そもそもthisとは、呼び出す場所や方法によってその中身が変わる特殊な変数です。

構文やオプション設定などもなく、単体でどこでも呼び出すことが可能です。

CoffeeScriptにおいては、@で表します。

基本的には「現在のオブジェクト等」を表しており、

thisが呼び出された場所や方法によって、その「現在」が変わるため、

中身が変わってきます。


class myObj
        func: () ->
            console.log @
            do ->
                console.log @
            return

myobj = new myObj
myobj.func()


#=> myObj {}
#=> Window { postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, ...}

上記では呼び出す場所によってthisの中身が変わっていることを検証しています。

myObjクラスの中で定義したクラスメソッドのfuncでは、

自身のクラスをthisに格納しているようです。

しかし、そのfuncの中で呼び出している即時関数のthisにはWindowが入っています。

thisが保持されていない」状態ですね。

コールバック関数やイベントハンドラの中ではthisがその対象だったりしますが、

これが保持されていない状態です。


class MyObj
        func: () ->
            console.log @

            that = @

            do ->
                console.log that

            return

myobj = new MyObj
myobj.func()


#=> myObj {}
#=> myObj {}

今度はfuncの中で、即時関数を実行する前に@thatという変数に入れてみました。

そして即時関数ではこのthatを出力するようにしています。

すると、実行結果がfuncと即時関数で同じになりましたね。

これが「thisを保持する」という状況です。




->と=>の違い

通常JavaScriptなどでは前述のように、

that = thisなど変数に格納することによって保持するようです。

(格納する変数名はthatもしくはselfが慣習となっています。)

このthisを保持するための変数格納の処理を自動的に行いつつ関数宣言するのが

=>(ファットアロー)です。


先程の例を使って->=>の違いを見てみます。

class MyObj
    func: ->
        console.log @
        
        do ->
            console.log @

        do =>
            console.log @

        return

myobj = new MyObj
myobj.func()


#=> myObj {}
#=> Window { postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, ...}
#=> myObj {}

->(アロー?でいいのかな)の方の即時関数は、最初の例と同じように、

thisが保持されることなくWindowが格納されています。

しかし=>(ファットアロー)の方は、

改めて変数を定義することなくthisが保持されていることがわかります。

これが->=>の関数定義の違いです。


ちなみにこの2つがどのようにコンパイルされているか見てみましょう。

  var Pages, pages;

  Pages = (function() {
    function Pages() {}

    Pages.prototype.func = function() {

      console.log(this);

      (function() {
        return console.log(this);
      })();

      (function(_this) {
        return (function() {
          return console.log(_this);
        });
      })(this)();

    };

    return Pages;

  })();

  pages = new Pages;

  pages.func();

10~12行目が->の部分、14~18行目が=>の部分です。

ちょっと見づらいですが、=>の方は即時関数に_thisを渡し、

それを元に無名関数を呼び出しています。

この_thisが先ほどで言うthatの働きをしており、

即時関数の部分がthat = thisの代わりのような役割になっているようです。

即時関数の実引数にMyObjでのthisが渡されていますね。


まとめ

->=>はともにCoffeeScriptにおける関数定義の方法で、

2つの違いは、関数定義前のthisを保持するか否か?ということでした。

先輩のコードではこの2つが入り乱れており、今まで見てみぬふりをしていましたが、

今回の大型連休のおかげで一つ謎が解けました。

ほかにも90%近く見てみぬふりをしていますが、

一つ一つ解読して私もマスターできるようになりたいです!

令和の目標はスキルアップです!!


Special thanks!!

ism1000ch.hatenablog.com

umatomakun.hatenablog.com

【jQuery】イベントオブジェクト ー親要素で発火するイベントを特定の子孫では解除したいー

f:id:song-of-life1352607:20180113005923j:plain

こんにちは、マリンです。

今回はJSでのイベントを発火させる要素の特定です。

親要素で指定するが、特定の子孫要素では実行してほしくない。

そんな時どのように指定すればよいでしょうか?

:notとか調べてみたのですが、

子孫要素でのやり方がイマイチよくわからず。。。

そこで今回はイベントオブジェクトを使ってこれを実装しました。


もっと簡単に実装できる、

セレクタとか、便利なメソッドとか、

皆様ぜひ教えてください。




概要

  • tableの概要を記述したtrをクリックした時、詳細の列が表示されるようにする。

  • trの中には承認ボタンがある。

  • 親のtrにイベントを付けているので、子要素のボタンのクリックでもshow hideが実行されてしまう。

以上のことから、子要素のボタンだけクリックイベントを外したいわけです。

最初は:notなどを使って特定しようとしたのですが、

うまくボタンだけを取ることが出きませんでした。

そこで、イベントオブジェクトを使ってみました。


詳細

サンプルコード

まずは解説に使うサンプルコードを記載しておきます。

<form action="sample/create" method="post">
    <table class="table">
        <tr id="sample-tr">
            <td>Name: Yamada Hanako</td>
            <td>Age: 20</td>
            <td><button name="approve" type="submit" value="approve">承認</button></td>
        </tr>
        <tr id="sample-hidden-tr style="display: none">
             <td>Address: Tokyo Minato-Ku</td>
             <td>Email: sample@example.com</td>
             <td>Password: password</td>
        </tr>
    </table>
</form>

上段のtrが表示されている行。

下段のtrが非表示部分で、上段をクリックすると表示されます。

しかし、上段3つ目のカラムにあるボタンだけはクリックの対象外にします。


以下が今回のCoffeeです。

$('#sample-tr').on 'click', (e)->
    target = $(e.target)
    if target[0].nodeName == "BUTTON"
        return
    if $(@).hasClass('show')
        $(@).removeClass('show')
        $('#sample-hidden-tr').hide()
    else
        $(@).addClass('show')
        $('#sample-hidden-tr').show()
    retrun




詳細解説

HTMLは省略します。

$('#sample-tr').on 'click', (e)->
    target = $(e.target)

まずは最初の2行です。

1行目は上段trへのクリックイベントで、引数eがイベントオブジェクトです。


2行目はイベントが発生したjQueryオブジェクトを変数に入れています。

targetの中身は以下のようになっています。

target: jQuery.fn.init(1)
  0: button
    accessKey: ""
    assignedSlot: null
    attributeStyleMap: StylePropertyMap {size: 0}
    attributes: NamedNodeMap {0: type, 1: name, type: type, name: name, length: 2}
    autocapitalize: ""
    .
    .
    .
    nextElementSibling: null
    nextSibling: null
    nodeName: "BUTTON"
    nodeType: 1
    .
    .
    .




次の2行です。

if target[0].nodeName == "BUTTON"
    return

if文でイベントが発生した要素がボタンだったら何もしないで終了させています。


if文の内容と、先ほどのtargetの中身を見比べてみてください。

target: jQuery.fn.init(1)
  0: button
    accessKey: ""
    .
    .
    .
    nodeName: "BUTTON"
    .
    .
    .
target[0].nodeName == "BUTTON"

イベントオブジェクトのtarget

その中に入っているキー[0]でDOM要素を取得し、

さらにその中からnodeNameプロパティで対象となった要素名を取得します。

そして、要素名が"BUTTON"だったら何もせずreturnというわけです。


ちなみに、最初にe.targetを変数targetに入れましたが、

今回のような単純なコードでしたら入れる必要もないと思います。

if $(e.target)[0].nodeName == "BUTTON"

でいけます。

個人的に見やすかっただけです、、、


まとめ

今まで苦手意識のあったイベントオブジェクトやjQueryオブジェクトでしたが、

一度じっくり眺めてみるとなんとなく解ってきました。

やはりぱっと見よくわからない!と思っても、

テンパることなく冷静に眺めていることって必要ですね。

余談ですが、今回のことで

なぜ$()を使ってjQueryオブジェクトにするのか?

ということが今更ながら理解できました。

根本が解っていないと理解が遅くなる一方ですね。。。

まだまだ奥が深いと思うので、これを機にちゃんと勉強してみます。

【Git】ブランチ間違えてコミットしてた!?

f:id:song-of-life1352607:20180113002051p:plain

皆さん明けましておめでとうございます。

なんとか1月終わる前に更新できました(^ ^;)

本年も地味に更新してまいりますので、

どうぞよろしくお願いいたします。

さて、今回は年明け早々やらかしたブランチ切り替え忘れ、

そしてそのまま作業した挙句コミットまでしちゃった!

その時の解決方法を載せておきます。





経緯

先日、仕事開始時にブランチを切り替え忘れ、

そのままずーっと作業し、コミットももちろん複数回行い、

作業終了時に初めて「ブランチ前回のままじゃん!!」と気づきました。

ひどい失敗で、誰かの役にたつのかわかりませんが・・・

その時行った、

間違えたブランチから本来のブランチへ変更部分を移してコミット。

という解決方法を記述します。


手順

  1. 間違えたブランチをコミットする前の状態に戻す。

  2. 変更部分を一度退避する。

  3. ブランチを切り替える。

  4. 切り替えたブランチで退避した変更部分を復活。

  5. コミットする。


詳細

間違えたブランチを、コミットする前の状態に戻す。

$git log

$git reset --soft コミットのハッシュ値

まずはgit logでどこまで戻せば良いか確認します。

次にgit reset --soft コミットのハッシュ値でブランチを

コミット前の状態に戻します。

この時絶対に--softを使ってください!

このオプションで作業ディレクトリの変更内容は残したまま、

コミットだけを取り消すことができます。


ちなみに指定するコミットのハッシュ値は、

このコミットまで戻したい!というコミットのハッシュ値を指定します。

指定したコミットの次にコミットしたものまでが取り消されます。

これに限らず、どれを指定するとどこまで影響するのか?にいつも迷います。。。


変更部分を一時退避する

$git stash

このままではcheckoutしても変更部分を反映させられないので、

この変更部分は一時的に退避させます。


ちなみに、退避させるものが複数ある場合、

$git stash save "hogehoge"

のように名前をつけておくこともできます。


ブランチを切り替える

わざわざ紹介することもないと思いますが、

$git checkout ブランチ名




切り替えたブランチで退避した変更部分を復活

$git stash pop

このコマンドは、退避した部分を復活と同時に

退避リストから削除するものです。

もちろん復活と削除を別々に行うことも可能ですが、

今回は全変更部分を一括でやってしまったので。。。

あとは切り替えたブランチでコミットすれば作業終了です。


なお、git stashの使い方については、こちらで詳しく説明してくださっています。

qiita.com

解決方法の参考にさせていただいたのはこちらです。

vatscy.github.io

www.kaasan.info




まとめ

今回は焦っていたので全変更部分を一括で移して1コミットで終わらせてしましました。

本来ならコミットごとに、

状態を一つ戻す→名前をつけて退避

を繰り返し、退避終了後

ブランチ切り替え→一つずつ復元→コミット

とすべきだったと思います。

初めてのことでパニクっていたのと、子供の迎え時間が迫っていたので

テンパって一気にどーん!とやってしまいました。

反省。。。。

しかしまずは作業前に確認しましょう。。。

本年もご覧いただき有難うございました。

f:id:song-of-life1352607:20180115004800j:plain

こんにちは、マリンです。

2018年最後の投稿です。

いよいよ今年も残すところ12時間弱。

年々1年が短くなっている様に感じます〜(´༎ຶོρ༎ຶོ`)

来年は1日1日、1仕事1仕事、1コード1コード大事に、

毎日勉強していく!!!(つもりです…(≧∀≦))

では、本年も皆さま当ブログをご覧いただき、

誠にありがとうございました!

2019年も地味に更新して参る所存ですので、

どうぞよろしくお願い申し上げます。

皆さま良いお年をお迎えくださいm( )m

【Rails】Date型↔︎文字型変換

f:id:song-of-life1352607:20180314224659p:plain

こんにちは、マリンです。

最近よく日付関係を扱うことがよくあるのですが、

Date(日付)型と文字列型の変換方法をよく忘れるので、

備忘録としてここに書かせていただきます。





Date型 → 文字列型

Date型から文字列型への変換方法。

strftime

today = Date.today    # 2018-12-05  Date型の日付(変換前)
today.strftime("%Y年 %m月 %d日")    # "2018年 12月 05日"  文字列型の日付(変換後)

Date型のオブジェクトに対し、strftimeメソッドを使うことで文字列型に変換できます。

引数にフォーマットを指定することで、その指定通りの形に変換できます。

ちなみに、%Y%yにすると年の下二桁だけを出せます。




フォーマット一覧は以下の通りです。

*文字は基本的に英語表記です。

フォーマット 変換後の出力
%A 曜日の名称
%a 曜日の省略名
%B 月の名称
%b 月の省略名
%c 日付と時刻
%d 日(01-31)
%H 24時間制の時(00-23)
%I 12時間制の時(01-12)
%j 年中の通算日 (001-366)
%M 分(00-59)
%m 月を表す数字(01-12)
%p 午前または午後(AM,PM)
%S 秒(00-60 *60はうるう秒)
%U 週を表す数。最初の日曜日が第1週の始まり(00-53)
%W 週を表す数。最初の月曜日が第1週の始まり(00-53)
%w 曜日を表す数。日曜日が0(0-6)
%X 時刻
%x 日付
%Y 西暦を表す数
%y 西暦の下2桁(00-99)
%Z タイムゾーン
%% パーセント文字




文字列型 → Date型

文字列型からDate型への変換。

to_date

to_dateメソッドを使う。

str_today = "2018-12-05"    # 文字列型の日付(変換前) 
str_today.to_date    # Date型の日付(変換後)
=> Wed, 05 Dic 2018

to_dateは楽なのでよく使います。

ただ、西暦の下二桁のみには対応していません。


strptime

Date型のstrptimeを使う。

Date.strptime('2018-12-05', '%Y-%m-%d')    # (文字列型の日付, 日付を表すフォーマット)
=> Wed, 05 Dic 2018 




to_dateに比べたらちょっと複雑になりますが、

こちらは西暦下二桁のみにも対応可能です。

Date.strptime('18-12-05', '%y-%m-%d')
=> Wed, 05 Dic 2018




まとめ

日付についてはDateやらDateTimeやらいろいろあっていつも混乱します。

また取得したものがDateなのか文字列なのか?とか。

計算するときに型が違うとエラーになっちゃいますしね(汗)

日付に関する型の違いもいずれまとめられたらと思います。