インターンブログをTumblrに新しく作ってみる

学習週:2013.2.6


  • インターンブログのデザイン:CSS
  • WordPressのテーマについて調べる
    • cssやフォントカスタマイズには有料:$30/年
    • LokkaかWordpressを自前で運用するか
    • Tumblrも見てみる
  • TumblrはCSS編集も無料
    • Single A Tumblr Themeが便利かもしれない
      かなりのカスタマイズが必要

herokuでの理想:

http://frozen-bayou-8506.herokuapp.com/blog

しかしthemeを直接編集したり、Custom CSSを書いたりしてがんばりました!
現状の成果:

http://remote-internship.tumblr.com/

Sticky A Tumblr Theme


Stickyなタグを設定して、そのタグを付けたPostは常にtopページ(indexページ)に表示されるというのが特徴。便利そうですね。

Single A Tumblr Theme
http://singleatheme.tumblr.com/

と思ってカスタマイズを始めたのですが、{block:IndexPage}を使う事によって、topページにのみ表示したい内容を表示することができることが分かりました。

{block:IndexPage}
<div id="eyecatch">
<p>ここに何かeyecatch的なものを書く</p>
</div>
{/block:IndexPage}

資料


{block:IndexPage}などのReference:

How to create a custom HTML theme
http://www.tumblr.com/docs/custom_themes

学習週:インターンブログ、CSSリセットと整理

学習週:インターンブログのCSSリセットと整理


昨日、Bootstrapを取ったら、リセットCSSとか自分でどこまでCSSを書くか考えたくなった旨を書いたら、町田さんが「僕のブログも見てみてください」と教えてくださったので、渡りに船。
ここのリセットCSSをベースに、自分でカスタマイズしたいタグだけ書いたらいいのだ!とやってみました。
(見た目が変わってませんが、CSSは整理されています)

ブログ top
http://frozen-bayou-8506.herokuapp.com/blog

ブログ 1記事
http://frozen-bayou-8506.herokuapp.com/blog_entry.html

どこをどれだけカスタマイズすればいいかというのが分かって、input系などは使わないので、実装しなくて良いとか(自分が使う事になったら足して育てていけばよい)などと切り分けがわかると共に、CSSへの理解が深まりました。また、1記事の「次へ」がうまく右寄せになってないのですが、それ以外は明日以降で。

資料


はじめてのHTML5 第2回『HTML5のさらに詳しいCSSリセット方法』
http://www.html5-memo.com/first-html5/html5-002/

HTML5 Reset Stylesheet
http://html5doctor.com/html-5-reset-stylesheet/

コードの引用はgistに入れてから引用に使うとよいというtipsを教えてもらいました。:

machidaさんのブログ
http://machida.heroku.com/

インターンブログのデザイン:cssの整理とBoostrapをやめる

先々週の続き:

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

https://satoko87.wordpress.com/2013/01/24/134/

学習週:インターンブログのデザイン


  • 要らない要素・CSSを削除
    色々デザインをいじっているうちにゴミが混じっていたのです
  • bootstrapを取ってみました
    シンプルに書いたので、意外とbootstrapいらん??(そのほうがWordPressに優しいし)というので抜いてみました。Chromeで確認している分には大丈夫そうです。

ブログ top

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

ブログ 1記事

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

明日以降は、WordPressでのテーマ作りを調べてようと思います。あと、必要最低限のcssが気になり出しました。調べたいと思います。

資料


CSSのリセットとか、フォントサイズ:

WEB ページを作る時に気をつけること

http://blog.fenrir-inc.com/jp/2011/10/webtips.html

はじめてのHTML5 第2回『HTML5のさらに詳しいCSSリセット方法』

http://www.html5-memo.com/first-html5/html5-002/

親テーマをベースに子テーマを作るといいかもしれない:

CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
http://www.slideshare.net/rie05/css-nite-in-osaka-vol32wordpress

box-shadowを使って四角を三つ並べるのを頂きました:

CSSで絵を描く!?今日から作れる達人のコツをご紹介

http://design.kayac.com/topics/2013/01/cssdrawing.php

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

作業週: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

怖い話 タグ一覧デザイン:検討編 その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/