きゃべログ

プログラミングや電子工作などについての記事がほとんどです

Rails Tutorial 8章9章 フラッシュメッセージのCSSが適用されない問題の解決方法

0 件のコメント

前回の記事では7章のCSSが上手く反映されない問題について説明しました。
Rails Tutorial7章でBootstrapのCSSが反映されない問題

Bootstrap3を使用していると、8章と9章においてもCSSのスタイルが反映されないところがあるので補足しようと思います。いずれのパートにおいても対応方法が2種類あります。

8章のアラートに色がつかない

Bootstrap3を使用している方は8.1.5節のフラッシュメッセージに図8.6のような赤色のスタイルが適用されません。これは仕様変更にともなって、赤色のスタイルが適用されるクラスがalert-errorからalert-dangerに変更されたためです(記事末の参考を参照)。

sessions_controller.rbを編集する方法

app/controllers/sessions_controller.rbのflashを発生させる部分を変更させます。具体的には
flash[:error]flash[:danger]に変更することで解決できます。

custom.css.scssを編集する方法

app/assets/stylesheets/custom.css.scssに下記のコードを追加します。
CSSクラスをそのままにしておきたい場合はこの方法が良いでしょう。

.alert-error{
    @extend .alert-danger;
}

これにより、alert-noticeクラスにもalert-warningのスタイリングが適用されるようになります。

9章のアラートに色がつかない

Bootstrap3を使用している方は9.2.1節の図9.6のように、アラートの背景が黄色くならないと思います。これは仕様変更にともなって、黄色のスタイルが適用されるクラスがalert-noticeからalert-warningに変更されたためです(記事末の参考を参照)。

users_controller.rbを編集する方法

app/controllers/users_controller.rbのsigned_in_userを以下のように変更します。

def signed_in_user
    #元の
    #redirect_to signin_url, notice: "Please sign in." unless signed_in?
    redirect_to signin_url, warning: "Please sign in." unless signed_in?
end

すなわち、notice:warning:に変更すればよいです。

custom.css.scssを編集する方法

app/assets/stylesheets/custom.css.scssに下記のコードを追加します。

.alert-notice{
    @extend .alert-warning;
}

これにより、alert-noticeクラスにもalert-warningのスタイリングが適用されるようになります。

参考

Migrating to v3.x · Bootstrap

0 件のコメント :

コメントを投稿

Rails Tutorial7章でBootstrapのCSSが反映されない問題

0 件のコメント

Rails TutorialのRails4.0版に取り組んでいるのですが、指示に逆らってgemをすべて最新版を入れているので非常にエラーが多いです。
同じようにGemfileにバージョン指定をせず、最新版をインストールして勉強している皆さん向けの記事です。

問題の部分

Rails Tutorial 7章のフォームにスタイルを着ける部分で、図7.18と自分の作成したアプリの表示が異なり、首をかしげる。
完全に写経できたはずなのにフォームにエラーのスタイルが反映されない……。具体的には

  • The form contains 〜 errors.
  • エラーが生じているフォーム部分

が上手く表示されていない。

対処方法

調べてみるとBootstrapのバージョンが2から3に伴う仕様変更のせいらしい。

The form contains …のところの問題

問題はdivタグのalert-errorクラスがバージョン3でalert-dangerに変更された点である。そのため、該当部分を変更する。

app/views/shared/_error_messages.html.erb
<% if @user.errors.any? %>
  <div id="error_explanation">
    <div class="alert alert-danger">
      The form contains <%= pluralize(@user.errors.count, "error") %>.
    </div>
    <ul>
    <% @user.errors.full_messages.each do |msg| %>
      <li>* <%= msg %></li>
    <% end %>
    </ul>
  </div>
<% end %>

フォームのスタイルが変わらない問題

仕様変更により、フォームの要素にクラスを追加する必要があるらしい。ラベルにはcontrol-labelクラス、テキストフィールドにはform-controlクラスを付与する。

app/views/users/new.html.erb
<% provide(:title, 'Sign up') %>
<h1>Sign up</h1>
<div class="row">
    <div class="span6 offset3">
        <%= form_for(@user) do |f| %>
            <%= render 'shared/error_messages' %>

            <%= f.label :name, class: "control-label" %>
            <%= f.text_field :name, class: "form-control" %>

            <%= f.label :email , class: "control-label" %>
            <%= f.text_field :email, class: "form-control" %>

            <%= f.label :password, class: "control-label" %>
            <%= f.password_field :password, class: "form-control" %>

            <%= f.label :password_confirmation, "Confirmation" , class: "control-label" %>
            <%= f.password_field :password_confirmation, class: "form-control" %>

            <%= f.submit "Create my account", class: "btn btn-large btn-primary" %>
        <% end %>
    </div>
</div>

結果

以上を適用すると下のような感じになる。

なんか思っていたのと少しだけ違うけど、まあいいかと妥協できるレベルに。
エラーメッセージがインデントされている理由はわからないけど、見やすくなった気がするから良し。
Confirmationのスタイルが適用されていないのは検証がうまくいっていないからかな?

参考

Migrating to v3.x · Bootstrap
1つ目の問題に関するサンプル
2つ目の問題に関するサンプル

0 件のコメント :

コメントを投稿

Emmetで簡単に既存のタグを他のタグで囲む方法

0 件のコメント

外側にタグを追加するのは面倒

Emmet-Vimを使用していますが、例えば次のコードの外側を<div>タグで囲みたいとします。
<!-- これを -->
<p>
    I am a vimmer.
    As yet I have no name.
    I've no idea where I was born.
</p>

<!-- こうする -->
<div>
    <p>
        I am a vimmer.
        As yet I have no name.
        I've no idea where I was born.
    </p>
</div>
まともに変更しようとすると、まず<p>の上に<div>を入力して、</p>の下に移動して</div>を入力するといった手間がかかります。
これを少しのコマンドで簡単に行いましょう。

Emmet-Vimを使用して入力文字数を削減!

以下に手順を紹介します。

今回の例では、
1. <p>タグの行でShift + v(Visual Lineモードに切り替え)
2. </p>タグの行へ移動
3. Ctrl + Y,を入力
4. VimのステータスラインにTag:と表示されるのでdivと入力

これで希望のコードが生成できます。

手順を一般的に書くと
1. 囲みたい部分の最初の行でShift + v(Visual Lineモードに切り替え)
2. 囲みたい部分の最終行へ移動
3. Ctrl + Y,を入力
4. VimのステータスラインにTag:と表示されるので挿入したい任意のタグを入力

複数のタグで囲みたいときに本領発揮

先ほどの例では、作業手順数に大差がないため、あまり有効性を感じられなかった方もいらっしゃると思います。この手法が真に力を発揮するのは複数のタグで囲む場合です。次の例を紹介しましょう。
<!-- これを -->
<p>
    I am a vimmer.
    As yet I have no name.
    I've no idea where I was born.
</p>

<!-- こうする -->
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <p>
                    I am a vimmer.
                    As yet I have no name.
                    I've no idea where I was born.
                </p>
            </div>
        </div>
    </div>
</body>

一気に面倒な作業に感じますね。
これでも簡単に変更できるのがEmmetのスゴい所。

手順3までは先ほどと同様で、異なる点はTag:以降に記述するコマンドのみです。Tag:以降に次を入力してください。
body>div.container>div.row>col-md-4

期待どおりのコードが生成できたはずです。
つまり、Emmetの記法をそのまま使って任意の選択箇所をタグで囲むことが可能ということになります。

Sublime TextのEmmetでも同様な操作が可能だと思います。ぐぐってみたところAlt + Shift + wらしいです。動作確認していないので保証はしませんが!

0 件のコメント :

コメントを投稿

Affinity DesignerとSketchのどちらが買いなのか

0 件のコメント

2016/2/21追記


Affinity Tips – Affinity製品の使い方ガイド
Affinity Designの操作方法やチュートリアルを紹介するWebサイトを開設しました! もしこの記事をきっかけにAffinity Designerを使うことになったら是非読んでくださいね! まだまだ記事数は少ないですが、どんどん更新していく予定です。

Macで使えるベクタードローツールを探していた

Windows環境ではフリーのソフトを簡単に導入できたのだが、Macではなかなか良いのが見つからない。そして有料のソフトを検討しはじめた。Adobe Illustratorの永続ライセンス販売を終了し、使用期間に対して課金するプランになり早2年、依然としてドローツールといえばIllustratorだが導入を悩んでしまう。やはりソフトは買い切りのものがいいという考えが捨てられず、App Storeで販売されているベクタドローツールから選ぶことに。

なんか色々あるけど…

App Storeのランキングを見たところ、ベクタドローツールはかなりの数存在するようだった。例えば、

  • iDraw(3000yen)
  • Affinity Designer(6000yen)
  • Sketch 3(11800yen)
  • Eazy Draw(120yen)
などである(価格は2015/8/7現在のもの)。ただし今回は高機能のものに絞りたかったのでAffinity DesignerとSketchの二択にすることに。

配色デザイン見本帳 配色の基礎と考え方が学べるガイドブック
伊達千代
エムディエヌコーポレーション
売り上げランキング: 19,104

Affinity DesignerとSketchとAdobe Illustratorを比較

Scott Lewisさんの記事を参考に比較してみる。
Can Sketch or Affinity designer replace Adobe Illustrator?

カスタムグリッド

イラレとSketchはグリッドサイズをカスタマイズして使用することが可能。Affinity Designerは現在は対応していない(実装予定ではある)。

シェイプツール

3ツールいずれも長方形や三角形、楕円などの基本的な幾何学図形は描画できる。Affinity Designerは他にも20種類ほどの形を描画することが可能。

ペンツール

イラストレータが機械的なペンのような感覚であるのに対し、他の2つのツールはチョークで描くような感覚らしい。

線の連結

形を分離したり、点をつないだりする機能がないことは考えられない。イラレではよくこの機能を使うが、Sketchにはこの機能が見当たらない。
Affinity Designerではノードツールで2点を選択することにより連結ができる。

パスファインダ

2つの図形を合体させたり、引き算したりする機能であり、イラレではもちろん備わっている機能である。
Sketch、Affinity Designerでもこれに類似した機能は存在する。パスファインダの処理を行った後でも、2つの図形を個別に編集できるところがイラレと異なる点である。

スナップ機能

点やグリッドにマウスカーソルを吸着させて、きれいな線を引くための機能である。イラストレータには優れたスナップ機能が存在し、Sketchにもそれに近い機能が存在する。
Affinity Designerはその2つに比べると直感性や容易さに欠ける。

ピクセルプレビュー

ベクタ画像をピクセルモードで出力した際にどう表示されるかは3つのツールいずれにも搭載されている。
Affinity DesignerはRetinaディスプレイでの表示のシミュレーションも可能な点において他より優れている。

アートボードの数

1つのファイルにアートボードを含める事ができると、アイコンの作成の際、様々な形式で出力させたりファイル名の設定が用意になる。
イラレとSketchにはこの機能がある。ただしイラレは1つのドキュメントにつき100までしかアートボードを作ることができない。
Affinity Designerには現在このような機能は存在していない。しかし今後実装予定である。

ファイル出力

イラレではアートボードをSVG、PNG、EPSなど様々な形式で出力することが可能である。
Sketchは更に優れており、アートボード毎に異なるフォーマットを指定して出力することが可能である。例えば、512*512のアイコンはPNG形式で、32*32のアイコンはSVGで保存する、などである。Affinity Designerではアートボードの制限のため、同時出力い対応していないが、直感的なダイアログにより様々な形式で画像を出力することが可能である。

ファイルインポート

イラレはこの機能においては特に優れている。PDF、EPS、SVGはもちろんのこと、その他30の形式のファイルをインポートすることが可能である。
Affinity Designerは特に問題なくSVG、EPS、PDF、さらにAi(イラレの独自形式)もインポート可能である。欠点を挙げるとすれば、Aiファイルをインポートしたときにグループ化したオブジェクトのグルーピングが解除されてしまうことである。
一方Sketchはこの分野には弱い。Aiファイルはサポートしていない上、対応する拡張子はSVG、EPS、PDFに限られる。

カスタムスクリプト

スクリプトが使えることにより便利なプラグインなどが使用可能になる。イラレはJavaScriptによるスクリプトコーディングが可能である。
SketchはCocoaScriptによるコーディングが可能である。
Affinity Designerにはスクリプティング機能はないが、今後AppleScriptによるスクリプティングが可能になると言われている。

まとめると

Adobe Illustrator
メリット
  • 成熟しているため情報を得やすい
  • 約10年も使用され続けている
  • 広く普及している
  • 写真編集ツールとDTPツールと連携できる
デメリット
  • 定期使用料がかかるのは不人気
  • 利用するトータルコストが高い
  • アートボード数の制限が100
  • アートボードごとにグリッドをカスタマイズできない
Sketch
メリット
  • たったの100ドル
  • 予め用意されたアイコンのテンプレート
  • 同時に他のサイズ・形式・場所に出力可能
デメリット
  • Macでしか使えない
  • ドローツールが不正確
  • 少し機能がかけている(点の連結・ダイレクト選択ツールなど)
  • UIの標準と離れている(Command + Spaceでズームなど)
Affinity Designer

メリット
- たったの50ドル
- Ai程広範囲ではないがユーザの欲しい機能が揃っている
- UIはAiによく似ているため親しみやすい
- ズームがいくらでもできる
デメリット
- Macでしか使えない
- アートボード数制限
- スクリプトが使えない
- バッチ処理が出来ない
- グリッドがカスタムできない

絵はすぐに上手くならない
成冨 ミヲリ
彩流社
売り上げランキング: 4,308

Affinity Designerの有用性

次にDeborah Johnsonさんによる記事を参考にAffinity Designerの長所を見てみる。
この方はSketchをこれまで長い間使ってきていたそうで、両方の経験を活かしたレビューをしている。その上でAffinity Designerをプッシュしている立場のようだ。
英語なので日本語で要点をまとめてみる。
Affinity Designer, Sketch, and Why You Don’t Have to Choose — Design Process — Medium

ラスタデザイン機能の有無

Affinity Designerにはラスタ画像編集の機能があり、Sketchにはない。そのため今回はベクタツールとしての機能に着目して比較している。

洗練されたペンツール

ペンツールはAffinity Designerのほうが優れているらしい。
基本の接点タイプがあるのに付け加え、点同士を連結・連結を解除したり、曲線を分断するボタンが存在する。

ブラシのカスタマイズ性

たくさんの独創的なベクタ・ラスタのブラシが使え、修正したりできる。自作することも可能。

ライブビュー

ブラシやブレンドモデル、レイヤ切り抜きやマスキングなどの効果をリアルタイムにプレビューすることが可能である。適用する前に実際に見ることが出来るのはとても便利。

スニッピングツール

簡単にオブジェクトを配置することが可能で、オプションはオブジェクト毎にカスタマイズできる。

履歴

Sketchユーザが切望していた、履歴をリストに列挙した機能がある。これにより簡単に過去のある時点に作業を戻すことができる。サイドバーでさっと履歴を見ることが出来る。

マスキングとレイヤクリッピング

Sketch3.1のアップデートによるマスキングに関する大幅な改善を考慮してもSketchよりAffinity Designの方が使いやすい。ドラッグ&ドロップでレイヤーを素早くクリッピング・マスキングすることが可能。

オブジェクト挿入モデル

オブジェクトを新たに作る際に、既存のオブジェクトに入れ子の中に作成することが可能。これにより入れ子構造を効率的に実現出来る。

レイヤ効果と修正

Affinity Designerにはベベル・グラデーションオーバレイ・3D効果など様々なレイヤ効果がある。レイヤ修正にもポスタライズなどたくさんの選択肢がある。

さらに多い色空間

Affinity DesignerはRGBだけでなくたくさんの色空間を用意してある。最も良い例がCMYK。

ドキュメントサイズの単位

インチやミリメートルなどで指定も可能。印刷物に対するサポートも厚い。

ではSketchは良くないのか?

Affinity DesignerとSketchは大きく異なる、いずれも素晴らしいツールである。Affinity Designerは機能が充実しているため複雑なベクタ画像の制作や詳細なアイコンの作成に適している。一方SketchはUIデザインやレイアウト作成など、基本的なベクタ画像の制作に有効である。つまりどちらも試してみる価値があるツールである。

結論

ものすごいスピードでIllustratorに追いついているとネットでの評判が高いAffinity Designerを導入することにしました。まだリリースから間もないことを考慮し、今後のアップデートにも期待したいと思います。
さっそく触ってみましたが、わくわくする感じ。使いこなせて面白いデザインができたらアップロードします。

Affinity Designer

Sketch
(App Storeでの配布は終了したようです。)

デザインのルール、レイアウトのセオリー。
伊達千代
MdN
売り上げランキング: 6,336

0 件のコメント :

コメントを投稿

pyenvでバージョンが切り替えられなくて苦労した話

2 件のコメント

2016/7/7追記

pythonを呼び出すときに優先してpyenvのpythonを呼び出すように初期化するコマンドを実行してみるといいかもしれません。 eval "$(pyenv init -)" これを実行して直ったら下記の手順を踏まなくても大丈夫ですね。

pyenvで指定したpythonが起動しない

ここまでのあらすじ

  • pyenvインストールしたった!
  • yyuu/pyenvリポジトリのreadmeの通りにPATH通したった!
  • いくつか違うバージョンのpythonインストールしたった!

意気揚々と使い出すがしかし……

  • $ python local 3.4.3でバージョン指定したった!
  • $ python -V (エンターキーターン!!)
  • Python 2.7.10
  • あれ?3.4.3指定したのに
  • 一応globalも指定してみて試すか $ python global 3.4.3
  • $ python -V 今度こそ!(エンターキーターン!!)
  • Python 2.7.10
        /\___/ヽ   ヽ
       /    ::::::::::::::::\ つ
      . |  ,,-‐‐   ‐‐-、 .:::| わ
      |  、(o),:  (o), :::|ぁぁ
    .   |    ::<      .::|あぁ
       \  /( [三] )ヽ ::/ああ
       /`ー‐–‐‐―´\ぁあ

確かな力が身につくPython「超」入門 (確かな力が身につく「超」入門シリーズ)
SBクリエイティブ (2016-03-16)
売り上げランキング: 19,659

解決編

怪しかったところ

なんでうまくいかないのかと、とりあえず$ which python実行すると、usr/local/bin/pythonが返ってきた。~/.pyenvを通ってないのはおかしい。

HomebrewでインストールしたPythonのせいだった

さっき返ってきたusr/local/bin/pythonっていうのは昔Homebrewでインストールしたpythonだったんですね。brew listしたらやっぱりいました。ということで

$ brew uninstall python
Uninstalling /usr/local/Cellar/python/2.7.10_2... (4906 files, 77M)
を実行。さよならぱいそん……
そして$ python -Vを実行すると、無事Python 3.4.3が返ってきました。めでたしめでたし。

Pythonスタートブック
Pythonスタートブック
posted with amazlet at 16.08.26
辻 真吾
技術評論社
売り上げランキング: 3,122

2 件のコメント :

コメントを投稿

Vagrantの仮想マシン内のRailsサーバにブラウザから接続出来ない時の対処法

0 件のコメント
  • 仮想マシンを使わずに直接rails sしてみるとうまくいく。
  • 仮想マシン上のhttpサーバには接続できる。
  • でもrailsサーバには接続できない→なんで?
という状態でした。
というわけでハマっていた所の対処について説明します。

ググってみたがその方法だけでは上手くいかなかった

ググってみたところ以下の記事が出てきました。
Vagrantの仮想環境でrails serverで動いているアプリケーションにMacのブラウザからアクセスしてみる | Fuzz blog
よくあるハマりポイントはポートフォワーディングとか
基本的にRails 4.2未満のバージョンではこれでサーバにブラウザからアクセスできるはずです。問題はRails4.2の場合です。

Rails 4.2の仕様変更

Ruby on Rails 4.2 リリースノート | Rails ガイド
注目していただきたいのは、上記ページの3.3節の2パラグラフ目です。
ただし、今回の変更により、別のPCからRailsサーバーへのアクセスは以前と同じようにはできなくなります。たとえば、development環境が仮想マシン上にあり、ホストマシンからこのdevelopment環境にアクセスする場合などがこれに該当します。
このような場合、サーバーを起動する際にrails server -b 0.0.0.0とすることで、以前と同じ動作を再現できます。
仮想マシンも上記の別のPCの例外ではありません。
なので先ほどの設定を終えた場合であればrails server -b 0.0.0.0とすることにより万事解決です。私は今回無事にWelcome aboard 画面を拝むことができました。

まとめ

  • ここに従って仮想マシンの設定をする。
  • 駄目ならオプション付きのrails server -b 0.0.0.0でサーバを立てる。

0 件のコメント :

コメントを投稿

VagrantとVirtualBoxの関係

0 件のコメント
最近Webのお勉強、とくにRailsの勉強をやっています。
その過程でVagrantを使ってみたりしているのですが、なかなか理解が難しい。
Vagrantは仮想マシンを構築するツールです。

VagrantとVirtualBoxはどう関係している?


使いながらもよくわからなくて気持ち悪かったのは、Vagrantの導入とセットでインストールするVirtualBoxとの関係でした。というのもVagrantを使っているとガッツリとVirtualBoxの操作をすることがあまりない。

わからないまま両方をとりあえずインストールしたのですが、気になって調べた所以下の記事が。
  初心者のための Vagrant, Chef, VirtualBox の関係 - Qiita

この記事によると、簡単に説明すればVagrantは仮想マシンであるVirtualBoxを操作する役割をしているとのことでした。なんとなくスッキリ。

ついでにもう一件。Vagrantを使う意味がわかりやすく書いてあるので、まったくわからなかった時期に役立ちました。
FuRyu Tech Blog » Blog Archive » この春エンジニアなった君に使って欲しいVagrant

0 件のコメント :

コメントを投稿