作業週:怖話をローカルで立ち上げる

作業週:2013.1.30


  • ローカルで怖話を立ち上げる
  • メンバー一覧に追加
  • 困ったところ解決法
    • rubyの1.9.3-p327がない
    • brewでのmysqlのインストールでエラー
    • brewでMySQLをインストールした場合のメモ
    • Bundler vs rbenv vs zsh
  • 資料

ローカルで怖い話を立ち上げる


  • リポジトリをclone
  • ruby 1.9.3-p327を用意
  • インストール手順にしたがって環境を整える
    • brewでimagemagick, mysqlなど
    • bundleで色々gem
    • rakeでdbなど
    • rails s

大した事ない手順のようですが、色々ハマりました。なので、困った所をメモします。

rubyの1.9.3-p327がない


rbenv installしても出て来ない。
ruby-build –definitionsしても出てこない。
ぐぐった。brew upgrade –HEAD ruby-buildでOK。そしてrbenv install 1.9.3-p327成功!

brewでのmysqlのインストールでエラー


rubyのインストールに成功してよっしゃー!と思っていたら今度はmysqlで詰まる。こんな感じに詰まる:

% brew install mysql
Warning: It appears you have MacPorts or Fink installed.
Software installed with other package managers causes known problems for
Homebrew. If a formula fails to build, uninstall MacPorts/Fink and try again.
==> Downloading http://downloads.mysql.com/archives/mysql-5.5/mysql-5.5.25.tar.gz

curl: (22) The requested URL returned error: 404
Error: Download failed: http://downloads.mysql.com/archives/mysql-5.5/mysql-5.5.25.tar.gz

困ったなぁと、バージョン指定してインストールする方法を探そうとしたら、下記でインストール可能なバージョンをSHA1付きで表示してくれることが分かった:

$brew versions postgresql

しかし、brewが古かったらしくupdateせよとのお叱りが。brew updateしたら、ちゃんとversionsコマンドも発行出来、おまけにmysqlのインストールも成功しました。
インストール成功時、Terminalに絵文字のビールが表示されたのには思わずニヤリ:

==> Summary
  /usr/local/Cellar/mysql/5.5.29: 6389 files, 210M

brewでMySQLをインストールした場合のメモ


mysqlは大体誰かがセットアップしたものを使ったり、自分だと適当に使っていたのでコマンドはよく分かっていない。なのでメモをしておきます。

インストール後に表示されるメッセージは下記コマンドで見れる:

$brew info mysql

データベースを作成(上で表示されたコマンドをそのままコピペして実行):

unset TMPDIR
mysql_install_db --verbose --user=`whoami` --basedir="$(brew --prefix mysql)" --datadir=/usr/local/var/mysql --tmpdir=/tmp

Terminalで開始と停止:

mysql.server start
mysql.server stop

Bundler vs rbenv vs zsh


次はBundlerの番。
しかしBundlerがsystemのrubyを使おうとする(エラーの内容をコピーしていなかった…残念)。1時間くらい悩んだのですが、zshのPATHにrbenvが通っていなかったのが問題ぽい。~/.zshrcに下記を足してOK:

export PATH=$HOME/.rbenv/bin:$PATH
eval "$(rbenv init - zsh)"

参考にしたページとかrbenvの公式サイトには

eval "$(rbenv init -)"

とあるのだけれども、zshだと下記のようなエラーが出てしまう:

/usr/local/Cellar/rbenv/0.3.0/libexec/../completions/rbenv.bash:14: command not found: complete

というわけで、 zshですよというフラグを渡す必要があるみたいです。先のコマンドでググるとzshはこれだねとか出てくる。あと、PATHを通すのも忘れずに。
これが解決すると、するすると問題がほどけ、Bundlerでのインストールが完成する。

資料:

rbenvじゃなくてruby-buildが古いという解をくれた:

rbenvで管理しているrubyのバージョンを1.9.3-p327にアップデートする手順
http://qiita.com/items/5d000afa6571c71c2723

.zshrcを編集するのにviでは嫌だ的な:

Sublime Text 2 includes a command line tool, subl
http://www.sublimetext.com/docs/2/osx_command_line.html

rbenvの設定はこれでいいんだよね、と確認:

zshの設定プロファイル(.zprofileと.zshrc)
http://blog.hifumi.info/mac/zprofile-and-zshrc/

Homebrew初心者、MySQL初心者には丁寧でありがたかった:

HomebrewでMySQLをインストールする時に知っておきたいこと
http://tukaikta.blog135.fc2.com/blog-entry-197.html

Homebrewでバージョン指定してインストールするにはどうしたらいいのか:

Homebrew install specific version of formula?
http://stackoverflow.com/questions/3987683/homebrew-install-specific-version-of-formula

Advertisements

怖い話 タグ一覧デザイン:検討編 その3

作業週:2013.1.29

  • 画像での画面作業作り

案A


  • 幅をちょっと狭めて、背景を黒(topのキーワードと同じ表示)にしたので、下のタグより目立つのでいいかも
  • 「おすすめ」というタイトルとfeatured tagの一体感がまだ出せてない。

tag_list_choice_A

案B


topと同じ形式で表示。無難。

tag_list_choice_B

検討事項


  • 他に良いタイトルはないか:「おすすめ」以外に
  • タイトルとfeaturedの一体感を出したい
  • featuredと他のタグ一覧の区切りをどうするか
  • featuredの数をいくつにするか
  • タグ一覧より、「キーワード一覧」にしてもいいかも?

作業週:細々とした修正+ちょっといい所(企画)

作業日誌:2013.1.24


  • 細々とした修正
  • 検討事項
  • ちょっといい所
    • 急に思いついた企画です

細々とした修正


  • 1記事ページを作成
  • RSSのリンク、をfooterに追加
  • css、htmlを綺麗に!!!
    • htmlやcssがごちゃごちゃしてて混乱してしまった…
    • スペースを意識する
    • 文字とかの色・太さ

検討事項


  • 検索を入れたい
  • どこまでの要素を設計しないといけないか
    • blockquate
    • a
    • H1, H2, H3
    • time
    • ul, li
      (この辺は今使っているテーマでどこまで実装されているかチェック)
  • bootstrap無しにできるか
    • できる場合、WordPressのテーマとして作る
    • bootstrap responsiveが何か調べる
  • パレット作っておく

成果物


1記事表示画面のレイアウト:
Screen Shot 2013-01-24 at 15.16.54

資料


header要素

header 要素は、通常は、セクションの見出し(h1–h6 要素や hgroup 要素)を入れることを想定しています。しかし、これは必須ではありません。header 要素は、セクションの目次や検索フォームや関連ロゴを囲むために使うこともできます。

http://www.html5.jp/tag/elements/header.html

ちょっといい所


ボタン、角丸。ちょっと飽きてきたじゃないですか。

で、何の気なしに見たほぼ日ハラマキの、「カートの中身を見る」「商品の一覧に戻る」ボタンにびびっときたので貼付けます。

HOBONICHI HARAMAKI
http://www.1101.com/store/haramaki/warmer_shop/lineup/clst.html

「カートの中身を見る」は何となく右に行く感じがするし:
hobonichi_view_cart

「商品の一覧に戻る」は左に行く感じがする:
hobonichi_back_to_top_button

ぼんやりした感覚を、ボタンの形に表してくれてるってすごいな〜って思いました。

作業週:ブログのデザインについてメモ

作業日誌:2013.1.23


  • ブログのデザインについてメモ
  • 最近の記事・footerのデザインを確定
  • 検討事項
  • コメントをもらったtigをちょっと見てみる

ブログのデザインについてメモ


意識したこと:

  • 七宝という模様が好き
  • 七宝をアレンジしてああいう形に。段々広がって開いていく感じ、花が開いていく感じ
  • 中心に光が見える
  • 下の行のブログタイトルで扉が開く感じ
  • 黄色とグレーでまとめたかった
  • デザインについての考えをドーンと見せる/見てもらう(自分のメインの目標だから)
  • 最近の記事と最新の記事は分かれる目が分かりやすいように
  • 下にかけて、閉じていく感じに

最新の記事と最近の記事は分かれ目が視覚に分かりやすいように意識した。
上の部分では開いていく感じの雰囲気を作ったので、下の部分は閉じていく感じに。

成果物


http://frozen-bayou-8506.herokuapp.com/blog_with_bookstyle.html

画像で見る(右が今日の作業後):

Screen Shot 2013-01-22 at 15.17.06Screen Shot 2013-01-23 at 13.52.42

検討事項


  • 検索を入れたい
  • 文字とかの色・太さ
  • cssを綺麗に
  • 1記事表示画面のレイアウト
  • RSSのリンク
  • bootstrap無しにできるか
    • できる場合、WordPressのテーマとして作る
    • bootstrap responsiveが何か調べる
  • パレット作っておく

コメントをもらったtigをちょっと見てみる:”GUI-like” text-mode interface for git


1.21の日誌コメントtigを紹介してもらいました。スクリーンショットを探してみたら、分かりやすそうで良さそうです。モードがあるのがvimに似ていて、ちょっと不安になるのだけれども。

マニュアル
http://jonas.nitro.dk/tig/manual.html

スクリーンショットを見ると、どういうものか分かるし、gitのlogが綺麗に表示されているのもいいなぁと思いました:

スクリーンショット
http://jonas.nitro.dk/tig/screenshots/

作業週:フッターのデザインを考える

作業日誌:2013.1.22


  • footerを考える
  • 1記事表示画面のレイアウト

fotterのレイアウト


aboutとfooterに自分の名前が二回出てくるのが嫌でfooterに詰め込んでしまうことに決めた。

  • 名前
  • iPhoneアプリへのリンク
  • twitter
  • デザイン成果物へのリンク

検討事項


  • 検索を入れたい
    (月ごとのリンクを入れてもほとんどクリックしないから、検索だけでいいや)
  • 最近の記事の表示デザイン
    (角丸にしたらいいというものでもなかった。もう少し考える)

資料


レスポンシブデザイン、背景の画像も私好み:

SHIFTBRAIN backyard
http://shiftbrain.tumblr.com/

出版社?のサイト。本っぽくデザイン?してあって面白い。デザインを参考にさせてもらっている:

mcsweeneys
https://store.mcsweeneys.net/

成果物


検討を適用したもの:

http://frozen-bayou-8506.herokuapp.com/blog_with_bookstyle.html

画像で見る。今日の検討前(左)と後(右):

Screen Shot 2013-01-22 at 15.25.01Screen Shot 2013-01-22 at 15.17.06

作業週:デザインの作業フローとインターンブログのデザイン

作業日誌:2013.1.21


  • デザインのフローについて
  • インターンブログのデザイン
  • コマンドを色々思い出す
  • 現時点での成果物

デザインのフローについて


@machidaさんの場合:
(紙は使わないらしい!結構レアらしいです)

  • 簡単な画像を作る
  • コーディング
  • chrome上でcssの調整編集

※ただし、受託の場合は割ときっちり目にカンプ(comprehensive layout)を作ってクライアントに確認してもらう。アジャイルな場合は、簡易なカンプにすることが多いそうです。

インターンブログのデザイン


  • フッター内での配置
  • デザイン候補をいくつか置いておきたい
    • デザインブランチみたいな
  • About
    • 何を書くか
    • 何か画像を入れたい
      • アプリのアイコンを
      • iPhone壁紙

コマンドを思い出す


  • Herokuにpushする前にローカルで確認する

    ruby -rubygems web.rb

  • git flowの使い方

    https://satoko87.wordpress.com/2012/12/13/77/#git-flow

  • git logをtree形式かつカラフルに

    git log –graph –pretty=format:’%C(yellow)%h%C(cyan)%d%Creset %s %C(green)- %an, %ar%Creset’

[参考]

Git config powerup with aliases, diff & log
http://oli.jp/2012/git-powerup/

  • Sinatraで静的ファイル

    get ‘/’ do
    content_type “text/html”
    send_file “public/index.html”
    end

[参考]
@komagataさんのを見かけて:

herokuに静的ページをアップする
http://docs.komagata.org/5024

rackを使わない舞波さんの方法:

Sinatra で静的ファイル
http://blog.s21g.com/articles/1565

現時点での成果物


案2の方で行こうと思っています。

  1. 案1

    http://frozen-bayou-8506.herokuapp.com/blog_with_backgroundimage.html

  2. 案2

    http://frozen-bayou-8506.herokuapp.com/blog_with_bookstyle.html

怖い話 タグ一覧デザイン:検討編 その2

作業日誌:2013.1.18


machidaさんと相談して、いくつか確認。

  • fulcrumタスク登録:タグ一覧へのfeaturedタグの導入。topページのキーワード項と同等
  • fulcrumタスク登録:topページのキーワード項に「もっと見る」ボタンを作り、タグ一覧への導線を
  • ,(カンマ)入力間違いで出来たタグのゴミを消す(“怖い話,夜,クローゼット,にまつわる怖い話,”など)
  • 一つも怖い話が付いていないタグをタグ一覧に出さない/消す(“怖い話のほう関係なくない?にまつわる怖い話”など)
  • fulcrumタスク登録済:タグ入力は10個くらいtextfieldを作って入力するように。「,」入力が面倒なので。

引き続き、タグ一覧のデザインを考えていく…

検討事項


  • ちょっと目立たせたい。
    • featured tagsは背景を変えたらどうか
  • featured tagsの数
    • topページには20個のタグが表示されている
  • モバイルの見え方はどうする
  • デザインラフの場合のステップの洗い出し
    • ページをローカル保存してやるのめっちゃ手間がかかる…
      時間を潰してしまった。反省。→ 他の方法を考える。

資料


目立たせる方法

テキストのメリハリをつける方法7つ
http://www.ar-ch.org/mt/archives/2012/11/clear.html

デザインする上で要素を目立たせるという事
http://wp.yat-net.com/?p=2574

レイアウト|伝わるデザイン
http://tsutawarudesign.web.fc2.com/miyasuku1.html