1日でwebアプリのプロトタイプのデザイン作ったときに使ってよかったもの5つ

2月 11th, 2014 — 11:50pm

はじめに

2月7日〜2月8日にかけて会社の開発合宿をしてきました!
私にとってははじめての開発合宿です。

雪景色

すごい雪だった……

今回は日光に行ったのですが、運悪く大雪と重なってしまい
予定より3時間ほど早く切り上げることとなってしまいました(ヽ’ω`)
ぜんぶ雪のせいだ。
でもお宿のごはんはとてもおいしかった!

そんなこんなで本題です。
今回合宿で開発したのは、新しく始めるサービスを身内に評価してもらうためのプロトタイプ。

前提として、
・使用したフレームワークは Ruby on Rails
・チームのメンバーはエンジニアが2人、デザイナーが1人、ディレクターが1人。

私はデザインの担当で、Rails の view のコーディングも担当していました。
というわけでこの記事も Rails 前提です。

・合宿の1日である程度見せられるものを作らなければいけない
・デザインはしっかり作り込まなくてもいいがある程度は見せられるものにしたい

ということなので、とにかく素早くいい感じに見せられる手段を!と思って使用して、
「これはいい!」と思ったのが以下のものです。

1. Twitter Bootstrap

使用した Gem は bootstrap-sass-rails
今回は SASS(SCSS じゃないよ)を使ったのでこちらを入れました。
(ちなみに、bootstrap の SASS の gem はいくつかありますが、今回は別のプロジェクトで使用していたものを
そのまま使ったので精査はしてません)
管理画面を作るときなんかは特に重宝されてます、Bootstrap。
インストールするだけである程度きちっとデザインされたスタイルが使えるようになるため、
スピード感のあるプロトタイプ作成には必須です。
手軽にレスポンシブ対応できるのもウレシイ(`・ω・´)

2. FontAwesome

使用した gem は font-awesome-rails
こちらも手軽にアイコンフォントが導入できることでおなじみですね。
最初はなくてもいいかな〜と思ってたんですが、やはりアイコンがあるほうが
わかりやすくなるので使用しました。

3. Sass(SASS)

SASS といえば一般的には .scss のほうだと思われがちなんですが、
こちらは .sass のほうです。
.scss と見た目が全然違うので難しく思われがちですが、違うのは書き方だけです。
・{} は使わず、属性:値 をインデントすることでブロックを表す
・行末の ; がいらない
・@mixin は =、@include は + で表現

SCSS もネストが深くなってくると「あれ?この } どこのだっけ…」
てことが増えてくるんですが、(あんまりネストしすぎるなよって話ですけど……)
SASS だと閉じカッコもないからそんなことで悩まなくてよくなります!!

そしてこれは蛇足ですが、「sass」でググると SCSS の情報ばっかり出てくるのに激おこぷんぷん丸です。
SCSS を除外ワードにしても検索結果あんまり変わりないし、どうしたものかなぁ。。

4. Haml

Sass(SASS,SCSS) と同じように、html を楽に書くためのメタ言語です。
html とはだいぶ記法が違うので SCSS などに比べて導入するハードルは高いかも。
(インデントでブロックを表すのは SASS と一緒です)
だけど Haml に慣れるともう普通の html(erb)には戻れません!!

わかりやすく言うと
・<>で囲わなくていい
・閉じタグ書かなくていい
・閉じタグ書かなくていいぶん行数が減るのでコードの見通しがよくなる
・インデントでブロックを表すことが必須なので自然とインデントが綺麗になる
・「この</div>どこのだっけ……」って探す必要がなくなる ←Haml も何が嬉しいかってこれですよ!

ここであまり説明してもアレなので詳しくはこちら↓
マークアッパー的 Haml入門21の手引き
似たようなメタ言語だと Slim もあるらしいんですが使ったことないです。気になる。。

5. BEM

これは上記に上げたものとは性質が違うんですが、BEM とは css のクラスの命名規則の方法論です。
端的に言うと「css のクラス名の付け方」です。
と言いつつ私はBEMについて理解している自信があまりないので詳しい説明は省きます_(:3」∠)_
というわけで詳しくはこちら↓
BEM スタートガイド ― これからのWEB フロントエンド開発に必要な方法論に触れてみる

別のプロジェクトで BEM を取り入れ始めて、いままではピンときてなかったんですが
今回の合宿で「BEM、いいな。」と思いました。何がいいかというと
・Block,Element,Modifier と明確に役割と名前の付け方が決まってるので、クラス名で悩む時間が比較的少ない

今回は特に BEM で書こうと決めてたわけではないんですが、
sass 書き始めたときに自然に BEM で書いてました 笑
見た目が若干気持ち悪い、とか使い回したいクラスで使う時はどうするんだ、とか
懸念点もないことはないのですが。
今回はプロトタイプだったのでそこまでこだわんなくていいかと思ってガリガリ書いてました。

というわけで、webアプリのプロトタイプ制作のデザインに使ってよかったもの5つでした。
プロトタイプでなくても、スピーディーに開発するにはとてもいいので試してみてはいかがでしょうかo(^▽^)o

余談

13時すぎに日光につき、途中ごはんやお風呂などで休憩があったので作業していたのは実質10〜11時間ぐらいでしょうか?
最初のうちは画面設計だとか環境設定だとかやっていたので実際に Haml や SASS を書いてたのは6時間ぐらい。
その間にヘッダーなどのベースになるデザインと、メインになるページのだいたいのデザインはできて、
アプリとして最低限見られるデザインになりました。

実際はエンジニア2人が裏側を作り込むのと同時に作っていったので、
「ここの値ってどう書いたらとってこれますか」「controller に定義してないですね」みたいなこともあったり、
新しいバージョンの Ruby を使っていて私が環境構築するのに時間がかかってしまったりしましたが、
(rbenv まわりでハマってたような気がするんですがあんまり覚えてない……)
そのあたりも気軽に質問できるし、みんなで一緒に作りこんでいって
リアルタイムでアプリが出来上がっていくのを見るのは嬉しかったです。

新卒で入社してもうすぐ1年、最初は「Rails って何? Git って何??」レベルの初心者でしたが
少しずつ Rails の view のメソッドとかわかるようになってきて、
やっと今回はエンジニアの方々と同じスピードで開発に参加できたので
その喜びもかなりものもでした!
共同作業というか、「分かち合えてる感」がすごいです!
(でもこう思ってるのは私だけかも)

Rails の view をいじれるようになると
デザイナーとエンジニアの間の距離もぐっと近くなる感じがするので
ぜひぜひデザイナーの方々には Rails を覚えてほしいなーと思いました
(簡単なことではないのをわかって言っています、はい)

※今更ですが、私はデザイナーというよりはフロントエンドエンジニアなので正直デザインはあまりできないです!
今回はプロトタイプだったのでデザインぽいこともやってました。

Comment » | Design, Rails, Sass

Rails チュートリアルをはじめました

12月 28th, 2013 — 1:00pm

Rails 入門としてはおなじみ、Rils チュートリアルをやりはじめました。

http://railstutorial.jp/

なんでやりはじめたかっていうと、会社が Rails を使っていることと
趣味で作ってたイラストのサイトを Rails で作りなおしたかったからです!
いちいち html 書くのがめんどくさくなって放置しまくりで……

ただ今回はチュートリアルに忠実にやろうと思ってるので、イラストサイトはその次で。

最初サクッと Rails new したら 4.0.0 がインストールされたので
やるんなら3系かな〜と思い(4って3系に比べて情報少ないし)Gemfile で 3.2.14 を指定したら
ActiveRecord::ConnectionNotEstablished が出てしょっぱなから焦ったでござるの巻。

結局別のディレクトリで 3.2.14 で指定して rails new したらとりあえずは動きました!(^O^)!
がんばるぞー

Comment » | その他

WordPressのテーマを変えました

12月 14th, 2013 — 3:33pm

以前使っていたテーマが、なぜかサイドバーに検索BOXがふたつあったりと
ウーンな感じだったのでテーマ変えました。
(手動でいじろうかと思ったけどめんどくさくなった)

それとちょっとテーマのcssいじったりしました。といっても幅変えたりとかそれぐらい。
シンプルイズベスト。

あとコード表示するのに SyntaxHighlighter Evolved をインストールしました。
最初うまく動かなくてなんでだ〜〜と思ってたら、このテーマの footer.php に

<?php wp_footer(); ?> 

が書かれてなかったせいのようです。
(この関数でjsとか読み込んでるみたい)

SyntaxHighlighter のコードの文字がやたら小さいのでまたcssいじろうかと思ったんだけど、
FTPクライアントがエラー起こしたのであとにする!

Comment » | その他

Railsのerbでエスケープしないようにする

10月 30th, 2013 — 3:32pm

Railsのビューをいじってて、
<%= %>内の値をエスケープしないようにする処理。
(<%= %>の中身はデフォルトでエスケープされるそうで)

つまりerb上で

<%= <p style='color:red;'>ねこだいすき!</p> -%>

と書くと、レンダリングされたhtmlでは

<p style='color:red;'>ねこだいすき!</p>

とエスケープされてそのまま表示されてしまうわけです。

で、どうやってエスケープさせないかというと
Railsの raw メソッドでできるそうです。

こんなかんじ。

<%= raw "<p style='color:red;'>ねこだいすき!</p>" %>

これをレンダリングされたhtmlで見てみると

ねこだいすき!

こうやってちゃんとタグが機能してますね。ヒャッフウ!

2 comments » | Rails

ブランチを切って作業してる途中で別のブランチをrebaseするとpushできなくなる

10月 30th, 2013 — 12:48am

恥ずかしながらGitではいままでmasterを扱うことしかしなかったので、初めてブランチ分けて作業したらやらかしてしまいました。しょぼん。

Gitでブランチを切って作業していて、途中でmasterをrebaseする必要があったのでmasterをrebaseしたらリモートにpushできない。。。なぜ。。。

なんでpushできなかったかというと、そもそもGitのコミットひとつひとつにはそのコミットリビジョンとその親のリビジョンが記録されていて、コミットの親の親……と辿っていくことによってそのブランチのツリーができるわけですね。

ローカルのブランチからリモートにpushしようとすると、まずGitはリモートの最新コミットのリビジョンとローカルの前回pushした最新コミットの次のコミットのリビジョンを参照します。
そしてローカルのコミットに記録されている親のリビジョンと、リモートの最新コミットのリビジョンが同じだったら晴れてpushできます!

でもpushする前に他のブランチをrebaseするとリビジョンが変わってしまうので、いざpushしようとしてもローカルのコミットのリビジョンとリモートのコミットのリビジョンが一致しないので受け付けてくれない!困った!

ということでどうにかしようとマゴマゴして苦闘のすえpushしてみたらコミットログが大変なことになっていた………

どうしたらいいの?教えて先輩!!

 

先輩「強制pushで」

 

 

強制……だと………!?

先輩いわく、rebaseは必要な作業だし、rebaseしてからpushしたほうがコミットログがスッキリするので強制pushでいいそうです。
ちなみに強制pushは

 

git push -f origin hogehoge

もしくは

git push origin +hogehoge

です。

 

なんか強制pushって怖いしそんなに使うもんではないイメージがあったんですが、皆わりとカジュアルにやってたのでびっくりした。
たぶんmaster以外のブランチって基本的に自分以外は使わないからでしょうね。

Comment » | その他

Sublime text2で上書き保存をすると強制終了する問題について

7月 16th, 2013 — 12:05am

私、エディタはSublime text2を使っていたのですが、

ここ最近、

 

⌘+S押すと、3回に1回は強制終了する………

 

しかも、私はRailsの組み込みを主にやっているのですが、

 

Railsプロジェクトの中のscssファイルが勝手にcssファイルにコンパイルされてしまう

あまつさえ、assets/stylesheetsディレクトリに勝手にconfig.rbファイルが生成されてしまう

 

という問題にぶちあたりました。。。

 

さすがに保存するたびに強制終了するのは仕事にもメンタルにも響くので、

(Sublimeは次回起動時に前回終了直前のものを復元してくれるので

書いたコードが消えた!てことにはならないんですが、なにせイライラする)

原因を探してみました。でもぶっちゃけ会社の先輩がだいたい見てくれてました_(:3」∠)_アリガトウゴザイマシタ

 

原因は………プラグインで入れたLiveReload

これをインストールしておくと、保存するたびにブラウザを自動的に更新してくれるという

優れものなのですが、どうやらこれが悪さをしていたようです。

これを削除したら、冒頭で言っていた諸々の問題が解決しました(:D)| ̄|_

 

ちなみに、削除の手順は

⌘+Shift+P でパッケージコントロールを開く

「remove」とか適当な単語を入れたらRemove Packageが出てくるのでクリック

「live」とかいれたらLiveaReloadが出てくるのでクリック

削 除 完 了

 

(でも、なんで勝手にscssファイルをコンパイルしていたんだろう??

そのへんはよくわかりませぬ)

 

でも、リアルタイムリロードがなくなると地味に困る……どうしよう……

と思っていたらBrowser RefreshというプラグインがLiveReloadとほぼ同じ機能を持っている

(というかブラウザ側にインストールさせる必要がないぶん、こっちのほうが便利かも)

ので、こちらをリアルタイムリロードに使っております。快適快適。

 

Sublime textのプラグインは便利ですが、よくよく考えてインストールしようねというお話でした。

 

Comment » | その他

くだらないけどハマった(即時関数と.ready())

5月 14th, 2013 — 12:16am

ブログを作って1ヶ月経ってやっとふたつめの投稿をするという体たらく。

ま、あんまり縛りすぎると続かないのでゆるゆるとやっていきます。

 

私、入社してからひたすらjsの勉強をしておったわけですが

基本、教本を片手にひたすらサンプルコードを書くといった形がほとんどでした。

 

で、このたび初めて自分で1からjQueryを書いたんですが、

あれ……?動かない……???

alertも出ない???

 

なんでや!!何で動かへんのや工藤!!と躍起になり2時間ほど潰したわけですが

 

なんのこっちゃない、

 

(function($){

$(“#elements”).on(‘click’,function(){ … });

})(jQuery);

 

こんな感じのものをhtmlのhead内に読み込んでおったのですが、

これだとhtmlのbodyが読み込まれる前に実行されてしまうので、

body内の<div id=”elements”></div>が見つからないまま実行し、

何も起こらないというオチだった………

 

ではではどう直せばいいかというと、

 

$(function(){

$(“#elements”).on(‘click’,function(){ … });

});

 

こうなります。

なんか修正前との違いがよくわからないですね。

 

実は↑のコードは以下↓のコードと同じ動きなのです。

 

$(document).ready(function(){

$(“#elements”).on(‘click’,function(){ … });

});

 

ピンときたかな?

$(document).ready()とは

「htmlが全て読み込まれてから実行する」という命令ですね。

これならhtml内の要素を全て読み込んだあとで実行できます。

$(function(){ … });は$(document).ready()の省略形です。楽ちん。

 

この即時関数の書き方もいくらかバリエーションがあるように見えるけど、

まだまだ違いがよくわかりません(:D)| ̄|_

 

とりあえずこれから初めてのjsバリバリ案件があるので

気を引き締めて行こうと思います。

コワイヨォーー┗(^o^ )┓三3

 

【追記】

修正前の書き方はあれ、jQueryライブラリでよくある書き方でした。

即時関数で囲むのは、他のjs部分との衝突を避けるためですね。

(即時関数中の変数は即時関数外のものと名前がかぶってても衝突しない)

うん、$(function()~ との違いがわからなかったんだよ……ぺーぺーだからね………

 

そしてこの追記を書いているのは書いた日から2ヶ月たってるんだよ(:D)| ̄|_てへ

Comment » | jQuery

ブログはじめましたった

4月 6th, 2013 — 12:32pm

どうもはじめましてこんにちは。あさちゅんと申します。

今年度からwebシステム制作会社でプログラマーとして働き始めたので、

備忘録も兼ねてブログを始めました。

 

主にhtml、css、javaScript、SCSSやCoffeeScriptなどフロントエンドのことを書いていこうと思ってます。

よろしくお願いします〜(੭ु・ω・)੭ु⁾⁾

 

 

そしてすごくどうでもいい、ブログ名の由来。

私は出身は広島県なのですが、学生時代は4年間京都に住んでいました。

 

そのときにバイトをしていたお店の店長が、京都生まれ京都育ちの方でして

 

その方がなかなかに濃ゆい京都弁を使っていたのが印象に残っていたのと、

このブログを使う目的が備忘録ということで、

京都弁で「忘れたらいけないよ」という意味の

「忘れたあかんえ」になりました。

 

全部ひらがななのは、まあかわいいかな〜と思いまして。

 

まだまだ未熟ではありますが、気づいたことをメモしてくのでよろしくお願いします。

Comment » | その他

Back to top