窓際BLOG

プログラミングの学習メモや書籍の感想等を公開していきます。

Webデザイン:使ってみようWebフォント

デフォルトのフォントだと満足出来なくなってきたので、Webフォントを使ってみようと思ったらGoogleが良いものを提供してくれていました・・・!(..)アリガタヤ
使い方をメモしておきます。

[目次] [:contents]

そもそもWebフォントってなによ

Webフォントを導入すると、サーバー上にあるフォントファイルを参照するため、ユーザーのPCにインストールされていないフォントを表示できるようになります。 CSS3が一般化してきて、そろそろ本格的に利用したくなってきましたね。

liginc.co.jp

Webフォント = サーバー上のフォントファイル!
「ユーザーのローカルにフォントが無くて、ページがださくなる!」といったことが無くなる!(/・ω・)/

Webフォントの使い方

Webフォントの使い方は思ってた以上に簡単でした(..)

Webフォントを見つける

まずはWebフォントを見つけましょう!
私は下記のサイトを利用しました(/・ω・)/

fonts.google.com

↓詳しい使い方はこちら saruwakakun.com

Webフォントを導入する

見つけたWebフォントをHTMLファイルに導入しましょう・ω・

sample.html

<html>
    <head>
        <title>sample</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <!-- ↓WebフォントへのURL  -->
        <link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">
        <style>
            body{
                /* Webフォントを反映 */
                font-family: 'Poiret One', cursive;
            }
        </style>
    </head>
    <body>
        <h1>Sample Title</h1>
        <h2>Sample Section</h2>
        <p>Sample Text1</p>
        <p>Sample Text2</p>
        <p>Sample Text3</p>
    </body>
</html>

これだけ!ヮ(゚д゚)ォ!

実際の画面

f:id:madogiwa0124:20170815235825p:plain

おわりに

フォントでWebページのイメージはガラッと変わりますよね!
Webフォントを使ってお洒落なページを作っていきたいですね(/・ω・)/

Ruby on Rails:form_forでundefined method `to_key'が出続けてハマった話

f:id:madogiwa0124:20170729104257p:plain

あるモデルに紐づくモデルの登録を'form_for'を使って行おうとしたところ、下記エラーが出続けてハマったので対応策をメモφ(..)

ActionView::Template::Error at /
undefined method `to_key' for #<Favorite::ActiveRecord_AssociationRelation:0x007fcefaa056b0>
Did you mean?  to_set to_ary

原因

紐づくモデルの取得をmodel.childmodel.whereで行っていたことが原因。
whereメソッドは、モデルのインスタンスではなく、ActiveRecord::Relationを返却するため適切にフォームを作成できなった。

修正前のソースコード

  <% favorite = page.favorite.where(user_id: current_user.id) %>
  <%= form_for favorite, method: "delete", class: "form-inline" do |f| %>
    <%= f.submit "" %>
  <% end %>

解決策

モデルのインスタンスを返却するfind_byメソッドを使って取得するように変更。

修正後のソースコード

  <% favorite = page.favorite.find_by(user_id: current_user.id) %>
  <%= form_for favorite, method: "delete", class: "form-inline" do |f| %>
    <%= f.submit "" %>
  <% end %>

参考ページ

Active Record クエリインターフェイス railsguides.jp

Ruby on Rails:複数の取得結果を合わせて、更新日時の降順で並び変える方法

f:id:madogiwa0124:20170729104257p:plain

ruby on railsで別のメソッドで取得した結果を合わせて、更新日時の降順に並べ替える際にハマったのでメモφ(..)

やりたかったこと

別メソッドで取得した結果を結合後に更新日時の降順に並べ替える。

例:キーワードに合致するタグ及び名称を持つレコード

最初にやろうとしたこと

下記ページを参考に実装してみたが、上手く行かず。。。

loudspeaker.sakura.ne.jp

def self.search(key)
  # 検索値に合致したページの一覧を降順で返却
  result1 = Page.where("name like '%#{ key }%'")
  result2 = Page.tagged_with(key)
  (result1 + result2).uniq.sort_by{ |v| -v['updated_at'] }
end

エラー画面 f:id:madogiwa0124:20170810220448p:plain

解決策

他にもっと良いやり方がありそうですが、一旦昇順で取得し、reverseで降順にすることで解決・・・!

def self.search(key)
  # 検索値に合致したページの一覧を降順で返却
  result1 = Page.where("name like '%#{ key }%'")
  result2 = Page.tagged_with(key)
  (result1 + result2).uniq.sort_by{ |v|  v['updated_at'] }.reverse
end

RubyonRails:deviseを導入したらテストが通らなくなってハマったのでメモ

deviseを導入し、userモデルを作成後テストが通らなくなったので、 その事象と対応策をメモしますφ(..)

事象

deviseを導入しuserモデルを作成後、rails test実行時に下記エラーが発生し、テストが通らなくなった。

$ rails test

ActiveRecord::RecordNotUnique: PG::UniqueViolation: ERROR:  duplicate key value violates unique constraint "index_users_on_email"
DETAIL:  Key (email)=() already exists.
: INSERT INTO "users" ("created_at", "updated_at", "id") VALUES ('2017-08-06 23:19:03.809282', '2017-08-06 23:19:03.809282', 298486374)

解決策

userモデル作成時に自動生成されたuser.ymlファイルが原因。 デフォルトで設定値が入っていないため、emailnilが設定されKey重複エラーとなっていた。 そのため、root/app/test/fixtures/user.ymlを削除し、test時にユーザーが作成されないようにしたらエラーが解消した。

user.yml

# Read about fixtures at http://api.rubyonrails.org/classes/ActiveRecord/FixtureSet.html
 
# This model initially had no columns defined. If you add columns to the
# model remove the '{}' from the fixture names and add the columns immediately
# below each fixture, per the syntax in the comments below
#
one: {}
# column: value
#
two: {}
# column: value

色々:開発時にいつも調べちゃうことまとめ

いつも調べちゃうことを色々と下記にまとめていきます(/・ω・)/

HTML・CSS

monopocket.jp

bashalog.c-brains.jp

www.totec-bs.co.jp

tks-kan.com

bootstrap3.cyberlab.info

RubyRails

www.rubylife.jp

shinodogg.com

maeharin.hatenablog.com

Git

qiita.com

qiita.com

SIerのSEがプログラミングスクールに通ってみた感想をまとめてみた

f:id:madogiwa0124:20170730113612p:plain

昨日、通っていたプログラミングスクールの講義最終日だったので、感想等をまとめてみるφ(..)

自分について

SIerに務めるSEです。 業務では全くプログラミングは行わないのですが、Ruby on Railsは独学で半年程度勉強してました。 ※Railsチュートリアルをテスト含めて1週した程度ですが。。。 あとはjavascriptで簡単なツールを作ってGithub.ioで公開したりとかをしてました。

2つのキーワードから連想されるアイデアTwitterに投稿できるサービス http://madogiwa0124.github.io/KeywordMixer/

スクかんばんボードを元にしたタスク管理アプリです。 https://madogiwa0124.github.io/TaskBorder/

通っていたプログラミングスクール

DIVE INTO CODEに通ってました! 通常プログラミングスクールは、1ヶ月程度が多い気がするのですが、DIVE INTO CODEは半年間と期間が長いです(o・ω・o)

料金は¥298,000ですが、期間を含めて他のスクールと比較すると安めなのかなと感じました。

|スクール|期間|料金| |—|—|—| |DIVE INTO CODE|6ヶ月|¥298,000| |TECH::CAMPWebアプリケーションコース|1ヶ月|¥128,000| |TECH::CAMPエキスパートコース|約3ヶ月|¥398,000| |WebCamp|1~3ヶ月|¥118,000 ~ ¥258,000| ※2017年7月30日現在

diveintocode.jp

DIVE INTO CODEで学べること

DIVE INTO CODEで私が学ぶことが出来たことを下記にまとめましたφ(..)

DIVE INTO CODEに通ってよかったこと

自分を客観視できる

今までは業務でもプログラミングを扱わないし、学習は一人で書籍等を使って行っていたので、自分がどれくらい理解しているのか、周りと比べてどうなのかみたいのが見えづらい部分があり不安を感じていました。 DIVE INTO CODEで同期と共に学び教え合うことで自分がきちんと理解出来ている部分と、出来ていない部分が明確になり、より前向きに学びを進めることが出来るようになったと感じました。

コミュニティ

同期や卒業生と勉強会を開催したり、半期ごとにOB・OGが交流する場が用意されています。 SIerではマネジメント重視、技術軽視な部分があったので技術的な勉強をみんなでやる場等はなく、独学だったのですが、 DIVE INTO CODEでつながった人たちから一緒に勉強会を開催したり、参加したり出来るようになったのは非常に良かったかなぁと思いました。

DIVE INTO CODEで学べなかったこと

実践的なアイデア検討

書籍等でデザイン思考等の勉強を進めると共に、アイデアソンやハッカソンに参加して、実践的なアイデアの検討を学んで行きたいです!

実践的なアプリケーションの設計

オブジェクト指向に基づいた変更に強いクラスの分け方やERの検討等については、個人的に学ぶ必要があるなぁと感じています。

実践的なインフラ構築

インフラは苦手意識があるのですが、ロードバランサを使ったAPサーバーの冗長化やDBレプリケーションLinuxの知識等を個人的に学んで行こうと思います。。。

最後に

SIerにいて、個人的に技術的な勉強をしているけど自分の立ち位置や進め方に不安を持っている人、技術的なことを業務で扱わず不安に思っている人、プログラミングスクールは決して安くない買い物ですが、それに見合う価値はあったかなぁと感じました。

一人でもんもんとしていると鬱になってくるので、えいや!で通ってみても良いのではないでしょうか。

相談に乗ることも出来ると思うので何かあれば下記へDMとかリプライを送って貰えればと思います(o・ω・o)

twitter.com

RubyonRails:Railsアプリケーションを作成後にまずやること

f:id:madogiwa0124:20170729104257p:plain

rails newしたあとにやることを備忘目的でメモしました(o・ω・o)

不要なコメントを削除する。

下記ファイルはコメントが多く、見づらいためコメントを削除するようにしてます(._.)

  • Gemfile
  • routes.rb

デバック用のGemをGemfileに追記する。

開発時には、デフォルトのirbやエラー画面では辛いので、 下記Gemをインストールするようにしています(/・ω・)/

  gem 'pry-rails'
  gem 'better_errors'

ruby-rails.hatenadiary.com

morizyun.github.io

タイムゾーンを日本時間に変更する。

config/application.rbに下記を追記し、タイムゾーンを日本時間に変更します。

config.time_zone = 'Tokyo'
config.active_record.default_timezone = :local

qiita.com

本番環境用のログ出力レベルを変更する。

config/environments/production.rbで本番用にログレベルを変更し、 デバック情報が出力されないようにしますφ(..)

config.log_level = :info

rails.hatenadiary.jp

rails gで不要なファイルは生成されないようにする。

config/application.rbに下記を追記し、スタイルシートやルーティング等が行われないようにします(`・ω・´)

config.generators do |g|
  g.assets      false # scss,js
  g.helper      false # XX_helper.rb
end

qiita.com

なにかあれば、また追記します(._.)!