デザイン修行:インターンブログデザイン仮を公開する(未達)

2012.11.29の作業

  • 昨日まで作ったやつをWordPressに仮にのせてみる
  • WordPressに慣れる
    WordPress.comはBootstrapが扱えないことが判明。.orgから自分のサーバにホスティングすればOKなのだが、phpを扱うことになりそうなのでNG。それならばHerokuで出来ないか検討
  • CustomizedTwitterBootstrap
    食いついてみることにしたのだが、色々戦うもエラーが倒せず断念。database系エラーか。
  • Heroku, Bootstrap, Lookaなどに
    次の日の朝、LokkaのGetting Started読んでやればあっさりできた。

Twitter BoostrapをWordPressに取り込む(結局頓挫)

何をしたらいいのか捜索:

Twitter Bootstrap in a WordPress Theme
http://320press.com/wpbs/

WordPress Twitter Bootstrap CSS plugin
http://wordpress.org/extend/plugins/wordpress-bootstrap-css/

7 Free Twitter Bootstrap Themes for WordPress
http://wpmu.org/7-free-twitter-bootstrap-themes-for-wordpress/

WordPress.com と WordPress.org の違い
http://ja.forums.wordpress.com/topic/3?replies=1

このブログはWordPress.com、PluginやThemeをインストールしたりできないことが発覚!
びっくりです。これは驚いた。phpは今更やりたくないので、それなら、Heroku(ruby)の方向で検討してみることに…

Heroku, Twitter Bootstrap, Lokka。またここにぶち当たる

昨日のエントリで出てきたのにももう一度食いつく:

RailsエンジニアのためのTwitter Bootstrapカスタマイズ例
https://speakerdeck.com/machida/railsenziniafalsetamefalsetwitter-bootstrapkasutamaizuli

HerokuでthemeがあるというやつならLokkaでしょうということで、以前のエントリで挙げた資料にももう一度食らいつく:

Heroku-ja Meetup #1でLokkaのLTをさせていただきました
http://fjord.jp/love/841.html

CustomizedTwitterBootstrapに取り組んでみる(これも頓挫)

まずはHerokuで静的なページを使えばどうかと思ったので、TwitterBootstrapを使えるCustomizedTwitterBootstrapという、上で出てきたbootstrapのhero-unitを簡単にカスタマイズできるやつ(rails app)をcloneしてみました:

CustomizedTwitterBootstrap
https://github.com/machida/CustomizedTwitterBootstrap

環境:

ruby 1.8.7 (2011-12-28 patchlevel 357) [universal-darwin11.0]
RubyGems 1.8.24 installed
Rails 3.2.9

bundle installで足りないgemをインストールしろと出たのですが、rubyの1.8系と1.9系の違いでGemfileがsyntaxエラーに:
(こちょこちょ編集して回避)

gem ‘bootstrap-sass’, :git => “git://github.com/machida/bootstrap-sass.git”, :branch => ‘master’

しかしrake server後に/にアクセスするとActiveRecordのエラーに…。dbが必要なのか??database.ymlもないし挫折…:

Started GET “/” for 127.0.0.1 at Thu Nov 29 15:39:08 +0900 2012

ActiveRecord::ConnectionNotEstablished (ActiveRecord::ConnectionNotEstablished):

最終的にLokkaに

時間も無くなってきたので、Lokkaに逃げ込む:

gituhubからLokkaを落としてローカルで動かす。
http://kuroigamen.com/17

bundle installの項でエラーが…
次の日の朝、LokkaのGetting Started読んでやればあっさりできた。

bundle install –without=production:postgresql:mysql

http://localhost:9292/ に無事アクセスできました。

その他資料

Sass ドキュメント
http://rubydoc.info/gems/sass/3.2.3/frames


明日以降の作業

  • Lokkaで静的ページを作ってみる
  • Herokuにインストール
  • Lokka+Bootstrapをやってみる
  • Heroku+CustomizedTwitterBootstrapのカスタマイズ(できたら)
Advertisements

デザイン修行:ローカルでCSSやらBootstrapと格闘

2012.11.28の作業

DevLOVE2012ではいろんなscssが出てきて混乱。これどうなってるのだ。多分sass-twitter-bootstrapを使用しているためと推測。
普通にbootstrap使うだけなら、普通にbootstrap.cssを使うだけでいいのかも。WordPress+Twitter Bootstrapのみという組み合わせ。その次の段階で+Sassに取り組んでみる。
あと、ブログのタグの王道がわからない。はてなブログのHTML構造は見つけた。


SCSSとLESSの違い。SCSSを選んだ場合。

https://github.com/twitter/bootstrap のサイトを眺めていたら、lessというのが出てきたので。

CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較
http://dxd8.com/archives/217/

なぜ、こんなことに、Sass vs LESS:

なぜTwitter BootstrapがLESSを使いはじめたのか
Bootstrap (front-end framework): Why did Twitter use LESS instead of Sass for Bootstrap?
http://www.quora.com/Bootstrap-front-end-framework/Why-did-Twitter-use-LESS-instead-of-Sass-for-Bootstrap

いや、SCSS(Sass)を使いたいというみんなのために:

Sass-loversのためにJohnさんが Sassにポーティング。

Sass Twitter Bootstrap:The Sass Way
http://thesassway.com/projects/sass-twitter-bootstrap

Sass Twitter Bootstrap on GitHub
https://github.com/jlong/sass-twitter-bootstrap

その他参考:

CustomizedTwitterBootstrap by @machida
https://github.com/machida/CustomizedTwitterBootstrap

Heroku(ヘロク)で,Ruby on Railsアプリを簡単に公開する方法の入門 (無料のRuby向けPaaS環境の使い方)
http://d.hatena.ne.jp/language_and_engineering/20110914/p1

はてなブログのHTML構造
http://tikeda.hatenablog.com/entry/2011/11/07/224858


明日以降の作業

  • ローカルでhtml+bootstrapの適用は大体出来たので、WordPressのブログに適用してみる
    (その方がどういうサイトを作っているか見てもらいやすい)
  • WordPressの構造について見てみる
  • その後、Sass+Bootstrap+WordPressの組み合わせに取り組んでみる

デザイン修行:DevLOVE2012をじっくり見てみる。Bootstrapを見てみる。

今日の作業

  • 来週の作業週の作業を検討
  • DevLove2012をじっくり見る
  • Twitter Bootstrapを見る

作業週についてもメモ

  • Bufferが何とか、あとFulcrum自体の使い方がよくわからないので、来週はそれをwikiにやり方をまとめる
  • タスクの作業をする

DevLOVE2012をじっくり見る

DevLove2012
http://devlove2012.devlove.org/

Stylesheets

  • css x2

    フォント毎に(DevLove2012では二つ)作って、Web Fontをロードしている。.woff拡張子。

  • wedget.css
    twitterウィジェットのcss
  • style.css

    色んなscss/sassファイルのカスタマイズ

    • Twitter Bootstrapカスタマイズ分:34ファイル
      • _reset.scss
      • _mixins.scss
      • _scaffolding.scss
      • _layouts.scss
      • _type.scss
      • _code.scss
      • _forms.scss
      • _tables.scss
      • _sprites.scss
      • _dropdowns.scss
      • _wells.scss
      • _component-animations.scss
      • _close.scss
      • _buttons.scss
      • _button-groups.scss
      • _alerts.scss
      • _navs.scss
      • _navbar.scss
      • _breadcrumbs.scss
      • _pagination.scss
      • _pager.scss
      • _modals.scss
      • _tooltip.scss
      • _popovers.scss
      • _thumbnails.scss
      • _labels-badges.scss
      • _progress-bars.scss
      • _accordion.scss
      • _carousel.scss
      • _hero-unit.scss
      • _utilities.scss
      • _responsice-utilies.scss
      • _responsive-767px-max.scss
      • _responsive-navbar.scss
    • Font Awesome
      • FontAwesomeというフォントを動的にロード?
      • .eotファイル
      • font-awesome.sassでカスタマイズ
    • Font Squirrel
      • EntypoRegularというフォント
      • .eotファイル
    • YUI Fonts CSS

      http://developer.yahoo.com/yui/fonts/

      • yui_fonts.sass
    • basic.sass
    • eyecatch.sass
    • twittter.sass
    • header.sass
    • footer.sass
    • staff.sass
    • information.sass
    • articles.sass
    • gist.sass
    • sponsor.sass

Images

  • 背景
    • body.gif
    • paper2.png
    • red.gif
  • 文字画像
    • copy.png

      世界を変えるのは他の誰かではない…の

その他気になった事

  • gist.jsが何をしているのか
  • style.cssで、カスタマイズ行が書かれているが、ファイル名がバラバラに出てくる。これは勝手にそうなるのか、意図的か

    (もしかしたらSASSのツールのせいかもしれない??)

  • Lokkaを使用

明日以降の作業

  • bootstrap hero-unitをもうちょっとよく見てみる
  • 作り途中のbootstrapを適用したwordpressのブログを作ってみる

デザイン修行:インターンブログデザインの完成とSass作業の準備

大体デザインは決まってきました。
インターンブログのデザインについてのまとめと、その後に、来週以降にSassの作業をするための準備作業を書きます。
他に、ブログを書くのにMarkdownを使っていて、SublimeText2で書いたMarkdownをプレビューできるようにMarkdown Previewパッケージを導入しました。便利便利!


インターンブログの狙いとか

  • Fjörd.jpでのインターンだと分かること -> 左上のタグ
  • Web Designerのインターンだと分かること -> ブログタイトル
  • 自分がどういう目的でデザインをしようと思ったか分かること -> メイン(The Power of Design)
  • 自分が何者か、どういうことをやっているか/やろうとしているかがわかること -> About
  • 自分が好きな/興味あるサイトを知ってもらう(自分がどういうデザインをするか) -> Links
  • 自分が今何をやっているか知ってもらう -> Blog

懸念事項とか

  • ブログタイトルに「by @satoko」を入れるスペースがあるか。なければAboutのところで少し目立たせ気味にしよう
  • ブログのトップページだけど、ブログ記事のリンクまで少し遠いがいいか
  • ヘッダは何pxとかメインブロックの高さ・幅とか決めてない。絵の時点でどこまで決める必要があるか
  • ブログタイトル・見出しなどtext-shadowする
  • box-shadowをブログタイトルの下のグレーのラインに入れる

パレット

  • ちょっと画面で見たのと、Gimpに落としてみてデザインしたのと若干違う色になってしまっているのはいいのか
  • #FFFFFF とか薄いグレー
  • #F6D580
  • #E38692

メインのbackground-image

左上のフラッグのbackground-imageの候補一覧


デザインからCSSに落とし込む作業

この辺りは初めての作業なので、色々と下準備をしていきます。

  • gemのアップデート
  • sass gemのインストール
  • ベースとなるサイトを探す(CSS/SCSSの参考にさせてもらう)
    DevLove2012のサイトは@machida さんが作ったので、アドバイスを求めやすそう

    DevLOVE2012
    http://devlove2012.devlove.org/

引き続き、こんな感じで作業していこうと思います。

デザイン修行:ブログの狙いを考えてデザイン

今日もデザイン修行です。

  • 背景のデザインを変えてみました
  • ブログのタイトルを変えました(デザインを勉強してるということがわかるように)
  • 右のサイドバーにリンクを作ってみました
  • 後ほか細々と

Image

狙い的には下記を意識しました:

  • デザインをやっていることが分かること
  • リンクから自分のデザインが分かってもらえること(about meリンクも作りたい)
  • ブログから勉強している内容が分かること

参考資料

devlove2012のサイトは@machidaさんが作成されたそうなのですが、なんと画像は3種類ほどしか使っていないんだとか!!これに触発されて、私のブログもそうしようと頑張っています。

[今日の作業:2012.11.19] デザイン修行、ズルいcheatsheet作成

週末に話題になっていた、資料を復習しました。

第一回 プログラマ向けデザイン勉強会 #design4p で「ズルいデザインテクニック」発表させていただきました。
http://d.hatena.ne.jp/ken_c_lo/20121115/1353004699

とても勉強になったので、「ズルいcheatsheet」としてcheatsheetを作ってみました。
(まだまだ途中ですが)

ズルいcheatsheet
https://gist.github.com/4109082

あと、これも勉強しました。fjord.jp @machidaさんのプレゼン!:
(色の選び方と調整の仕方が具体的に紹介されていたのが良かったです。今後のインターン作業としてTwitter Bootstrap使ってみたいなぁと思いました。)

RailsエンジニアのためのTwitter Bootstrapカスタマイズ例 by @machidaさん
https://speakerdeck.com/machida/railsenziniafalsetamefalsetwitter-bootstrapkasutamaizuli

あとは、デザイン修行として、他のサイトを見ながら色々試案しました。あまり進まなかった…。

[今日の作業:2012.11.14] デザイン修行:インターンブログのデザイン

今日はデザイン修行しました。
参考にしたいサイトや部品はPinterestのプライベートboardに詰め込みました。boardに並べてみると、自分の好きなデザインとか色々分かったので面白いです。ごちゃごちゃしていなくて、左上にタグ?を付けるのと、自分がこういう所を学びたいんだというのをセンターに置いて、後は作業日誌へのリンクの塊と、fjord.jp、@satokoへのリンクの塊を置いたら出来上がりにしようと思います。以下が今日出来た成果:

Image

参考にさせてもらったサイトの役に立つこと!あと、(Lingrで)補足してもらえるのはやっぱりメリットが大きくて、インターンさせてもらえてよかったなぁと実感しました。

参考にしたサイト

http://devlove2012.devlove.org/

http://subtlepatterns.com/

明日以降の作業

明日も引き続きこの作業をしてみたいと思います。明日ともう一日で細かいデザインまで考えて、CSSに落とし込むんでwordpressに組み込む(1-2日?)みたいなスケジュールはどうなのでしょうか。この辺も相談してみたいと思います。