本番環境で画像が反映がされない!?(JSで画像の切り替え）
今回は、アセットパイプラインというフレームワークによって、エラーがでて苦戦したのでその共有させていただきます。まず、はじめに今回の方法は記述が長くなり、見た目があまり良くないので正直おすすめはしないです...
むしろおすすめな解決方法があれば、ご教授頂けると助かります！！！笑
はじめにアセットパイプラインとは？
javascriptやcss、画像ファイルといったHTMLに付随したファイルを連結したり圧縮することで効率的にアクセスできるようにするフレームワークのことです。
これに関してあまり知識がなかったので、ネットで検索して確認してみると本番環境ではassets内のSCCファイルやJsファイルが最小化され、Public下で管理されるとのこと。つまり、ローカル環境で指定していた画像のパスとデプロイ後の本番環境でのパスが変わります。
今回は、マウスホバーすると画像が切り変わる実装を行っています。
まず、記述とエラー内容はこちらです。
404エラーが出てしまい、画像の指定しているページがないですよ...と言われてしまい、画像の表示ができませんでした。
1.本番環境用のパスを調べます。
上記の記述をすると、画像のパスが確認ができます↓
最初にもお伝えしましたが、本番環境では、Public下で管理されるので、上記の記述で確認方法になっています。myapp5は、私のアプリ名なのでみなさんのアプリ名に変更をお願いします笑
2.パスが確認できたので、今までローカル環境のパスの部分を本番環境のパスに変更します。
画像が小さくてすみません...
5行目と9行目の部分を変更しています（かなり長いです）
この記述変更により、ローカル環境と本番環境にも画像の切り変えの反映が無事にできました！みなさんも同じような事例で困ってしまった際、一つの案として知ってもらえたらと思います。
今回は、正直ネットで調べたことを一つ一つ確認して実装を行いましたが苦戦したのち、このような記述にしました。
これに関したら、もっと良い記述があると思うので、もう一度アセットパイプラインについて知識の深掘りをしたいと思います。
本日も記事をみていただいてありがとうございました！！もし、記事の内容での誤りやご質問等ありましたら、お気軽にお待ちしております。
jqueryプラグイン「typist」？？ ○○さん、ありがとうございました！！
今回は、タイトルにある通りJqueryのプラグイン「typist」についてのご紹介です。
これは、twitterでとある方のポートフォリオを拝見した際に、使っていたので、興味があって調べてみた所見つけました。「いや〜面白いな〜😳」と思ってアウトプットの一貫としてみなさんにも共有したいと思います！
まず、わかりやすいように下の動画をご覧ください！
↓
はい、動画が見切れてしまって申し訳ありません...
このプラグインを使えば、自分で自由に決めた文字を1文字ずつ表示してくれます。1文字ずつ表示するので、タイプライターで入力しているようなアニメーションを実装することができます。
私は、昔からゲームが好きなので、これを見るとドラクエやポケモンを少し思い出します←共感してくれる方はいないかもしれませんが...笑
では、早速導入方法とコードを紹介します。
１.下のリンク先（インストール）から最新のtypist.jsをダウンロードしておく。
※これができていないと実装時にエラーが出るのでご注意を！！
２.headの中に下の２行を設置をする
３.body内にコードの記述をする
今回は、わかりやすいように簡易的に記述しています。
まず、クラスは自由に決めていただいて、<script>内で$('クラス名')で指定してあげます。
typistのオプションについては、1のリンク先に記述がありますのでそちらで確認していただければと思います。
私は、
typistAddでアニメーションさせる文字を決めてあげて、
typistで、アニメーションの文字の速度を指定し、
typistPauseで一行読んだら、一時的に停止させています。
オプションは、記述の順番によって、停止するタイミング等も変わってきます。
以上になります。とても簡単に実装ができるので、興味ある方がみえましたら、ぜひアレンジしながら試していただければと思います。
はい！本日もブログをみてくださって誠にありがとうございました！もし、何か記述で誤っていることやご質問等ありましたら、お気軽にお待ちしております。
では、また次回もよろしくお願いします🙇
vue.jsとmarked.jsを使って簡易なMarkdownエディタを作ってみた！
今回は、７月から学習しているvue.jsを使って実装を行いました。
簡易的なものではあるので、特にcssを当てていません。もし、参考にされる方がみえましたら、好みでcssの変更をお願いします。笑
では、まず実際に出来上がるものがこちらになります↓
続いて全体のコードになります↓
今回一つのファイルに記述してあるので、わかりにくいかもしれないです、、すみません。
では、順番に流れとコードの説明をします。
1.ライブラリの準備
まず今回は、Markdownのライブラリの一つであるmarked.jsを使用します。
CDNのインストールが簡単ですので、vue.jsと合わせてheadの中に記述しています。
2.Vueインスタンスの作成
続いてわかりやすいように先にvue.jsの記述の説明をします。
「el:」にはどの要素と繋げるかを書くので「'#app'」と指定する。
「data:」には、「input」プロパティを用意して値を空にしておく。（ここにユーザーが入力した文章を入れるため）
「computed:」には「convertMarkdown」プロパティを用意する。ここにfunctionを用意して、this.inputの値をMarkdown形式に変換して返すようにしています。（ユーザーが入力した文字列をHTMLに変換して返している）
3.HTML要素の用意とつなぎ方を決める
textarea要素のテキストには、「input」に入るようにしたいので、「v-model = 'input'」と記述する。
div要素には、「convertMarkdown」の値をHTMLで表示させたいので「v-html = 'convertMarkdown」と記述する。
流れは、このような形です。
今回は、学習の一貫として作成してみましたが、Markdown記法は簡単な記号を使用するだけで、手取り早く文章を強調させたり、見出しを作れたりと便利なものだと再確認ができました。ぜひ、みなさんも使って見てください。
あ、でも最初にもお伝えしましたが、cssの適応だけお願いします！！！笑
では、今回は以上になります。
もし記述の内容での誤りや何かご感想ありましたら、お気軽にお待ちしております。
最後まで読んでいただき、誠にありがとうございます。
デフォルトの画像を表示させる方法は？(carrierwave使用の場合）
タイトルのようなことを考えた方は、私だけではないと思います。
個人アプリを作る際、アイコンの画像を特定のもので表示して、もしユーザーがアイコンの画像を変更した場合に新しい画像を表示させる際に役立つものです。
文章でお伝えしてもなかなかイメージしにくいと思いますので、下記の画像を見て頂けたらと思います。
デフォルトの画像
ユーザーが変更した場合
この画像は、現在プログラミングスクールで私が作成した某フリマサイトの一部になります。最初の画像で、人間のアイコン（デフォルト）で表示しています。ユーザーがこの部分をクリックしたらファイル選択ができるようにしています。私はあいくるしい豚の画像にしました笑
[では、実際に上の画像の手順方法がこちらになります。]
まず、carrierwaveで作成したファイルがapp / uploaders /の中にできていると思います。
①そのファイルに必ず下の記述をする。（名前にuploaderが入っているファイルです）
②デフォルトで使いたい画像をapp / assets / images /の中に保存する
その際の注意点として、画像の保存名は必ず
default.jpg に変更して保存すること。
はい、これだけです。笑
とても簡単ですよね？
この記述だけで、画像がまだ入っていない場合はcarrierwaveがapp / assets / images /の中からdefault.jpgの名前の付いた画像を見つけて読んでくれます。また、他の画像をユーザーが追加した場合はその画像を優先して表示してくれます。
carrierwaveを使用している場合のみですが、このように記述しておけばデフォルトで自分の好きな画像を表示させておくことができます。
これから個人アプリを作成する方で、もし使いたいと思う方がいらっしゃればぜひ参考にして頂けばと思います。
では、今日も見てくださってありがとうございました！また、間違いやご質問があればよろしくお願いします。
奥が深いよ、validations
みなさん、validationsはご存知でしょうか？
少しでもrubyを勉強されている方は知っていますよね。
validationsは、ユーザーが入力したデータに対して、正しいデータのみDBに保存するメソッドのことです。
例えば、カラムに対して、文字を制限したり、入力が空だったら保存しないようにしたり、正規表現を使って、メールアドレスのフォーマットをチェックすることができます。これから自分でアプリを作る方は、必ずと言っていい程使用すると思いますよ！
記述する場所は、Modelのファイルになります。
記述方法は、ネットで検索していただければすぐに的確な書き方が出るので、参考にしていただければと思います。←ここで教えないのかよ...笑
では、今回なにをアウトプットするかと言うと、
validationsのエラーの確認方法です！
validationsの記述を間違えてしまうと、DBに保存ができないことが多々あります。それが、本日の私です...
チーム開発中で、最新のmasterをpullした途端、急にDBに保存ができなくなりました。
すぐに仮説を立てて、エラーに立ち向かいましたが、なかなか苦戦しました。
そこで、チームメンバーが記述してくれたvalidationsを確認することに。
まず、コントローラのアクションにbinding.pryして、ターミナルで確認
そこで、今日メンバーに教えてもらったコマンドの入力
下記の画像を参照ください
任意のタイミングでオブジェクトのバリデーションを行うメソッドです。
私の場合userなので、この後に.valid? と追記すれば、validationsのエラーの確認ができます。1枚目のtrueが無事に保存できた場合です。
続いて、validationsによってDBに保存ができない場合です。
確認して見ると、falseと出ていますよね。
これは、エラーが起きていて、DBに保存ができていない状況です。
もし、falseが出てしまったら、.errors.full_messagesと入力すると、起きているエラーの内容も確認できます。上記参照。
これによって、どこの部分でエラーが起きているか確認できて、修正することができました。メンバーの方教えてくださってありがとうございます。
少し簡潔に文章を書いてしまいましたが、便利なので困った際は、ぜひ使ってみてください！！
もし間違いやご質問があれば、ぜひぜひお答えさせていただきます。
ブログ開設！！！
初めまして！ブログ開設初日でございます。
未経験でエンジニアを目指して、日々奮闘中する27歳の元営業マンです！
今回のブログを開設した意味合いは
・自分の知識をアウトプットして知識の定着をするため
・これから勉強を始める方に少しでも有益な情報を知ってもらうため
・エンジニアに転職するため
です！
これから学習し続ける中での疑問や学んだこと、エンジニアのイベント等を書く予定です。注意深く記事を書くつもりですが、知識にもし間違いがあればご指摘していただければ幸いです。すぐに修正致します。
今後ともよろしくお願い致します。
