バンドのイベントサイト構築:(3月の)振り返り

(こちらのサイトと違って間が開いています。スミマセン)
もう4月の尻尾が見え始めていますが、やり残しているたのでご報告です。
(遅くなって申し訳ない)

色々ぼやかしてますがこんな感じのができました:
otoniwa_20130415

反省とか勉強になったこと


  1. 手元のiPhoneで自作したwebフォントが見れなかった。時間と環境が無く、そのまま納品に…ヨクナイデス。
  2. iPhoneでのCSS(media-queries)とmetatagでの対応が難しい。まだよくわからない。
  3. 画像での曲線がやっぱり難しい。納得のいく線が描けなかった。
  4. iPhoneでPCと見え方を勉強する必要がある。Androidも。
  5. 重たい画像は軽くする処理を行うことで、かなりサイズがあっても大丈夫
    (by mashidaさん)

幾つもあって、色々勉強になりました。モバイルとPC向けのサイトの構築ノウハウについては今度の自習課題として取り上げたいです。

デザイン素材メモ:Design materials


はんなり明朝を使用しました:

フォント無料ダウンロード | Typing Art
http://typingart.net/

ギターっぽい曲線部分にレイヤーとして使用しました:

Retia Wood
http://subtlepatterns.com/retina-wood/

緑の背景レイヤ–に、GimpのBrumモードのレイヤーとしてかぶせて使用しました:

Natural Paper
http://subtlepatterns.com/natural-paper/

参考:References


media queriesについて:

[CSS]CSS3のMedia Queries(メディアクエリ)の使い方と実装例
http://coliss.com/articles/build-websites/operation/css/css3-media-queries.html

複数のmediaに対応するときの書き方。参考になりました:

レスポンシブ・ウェブデザインでの CSS コードの書き方
http://yomotsu.net/blog/2012/10/01/mediaquery-goodpractice.html

2011の記事だけど大変参考に:

CSS3 Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き
http://webdesignrecipes.com/web-design-for-mobile-with-css3-media-queries/

iPhoneでのviewportを詳しく解説:

Viewport [iPhone生活]
http://ipn3g.com/web/study3.html

デザイン参考、その1:

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

デザイン参考、その2:

2011-2012 日本―フィンランド ダンス レジデンス エクスチェンジ 共同製作プログラム
http://jf2012.jcdn.org/about/index.html

Rakeカスタムtask、kowabana:hibi:tag:populateを作った

タグ画面一覧デザインのための、ダミーデータ作りをやっています。

Rakeタスク、kowabana:hibi:tag:populateの作成


kowabanaのタグ一覧画面のためのデータを作成するtaskを作りました:

% rake -T
rake kowabana:hibi:tag:create          # Create User, Story, Tag, Tagging data
rake kowabana:hibi:tag:delete          # Erase User, Story, Tag, Tagging data
rake kowabana:hibi:tag:populate        # Erase and Create User, Story, Tag, Tagging data

Rakeタスクで詰まったところは下記でした:

  • namespaceはいくつも入れ子に出来る
  • task内から別のtaskを呼ぶ事もできる
  • Railsの環境を使いたいとき、データのinsertなどは=> :environment doを使う
  • データ作成時、without_protection: trueオプションを使うと便利
  • Fakerを使うと、ユーザ名や文章、単語を自動生成してくれるので便利
  • putsでタスクの進行状況を表示しておくと便利

rakeファイルの作成場所:

% ls -al lib/tasks/
kowabana.rake
kowabana_hibi_tag_test_data.rake

kowabana:hibi:tag:populateタスク:

(namespaceの入れ子)

(taskの中から別のタスクを呼ぶ)

namespace :kowabana do 
    namespace :hibi do
        namespace :tag do
            desc "Erase and Create User, Story, Tag, Tagging data"
            task "populate" => [:delete, :create]

            #省略

kowabana:hibi:tag:createタスク:

(Fakerを使用)

    desc "Create User, Story, Tag, Tagging data"
    task :create => :environment do
        require 'faker'

        #省略

        puts "Create Story"
        (100..112).each do |i|
            Story.create!({id: i, 
                user_id:5,
                created_at: Time.now,
                created_at: Time.now,
                title: Faker::Lorem.sentence,
                body: Faker::Lorem.sentences(5).join(' ')
                }, without_protection: true)
        end

Fakerの使い方


Gemfileにgemの行を追加:

group :development, :test do
    #省略

    gem 'faker'
end

インストール:

bundle install

Rakeファイル内でrequireして使えばOK:

require 'faker'

puts Faker::Lorem.word
puts Faker::Lorem.sentences(5).join(' ')
puts Faker::Name.name
puts Faker::Internet.email

Faker::Lorem.sentences(5)のままだとArrayが帰ってくるのでjoin(‘ ‘)しています。

データが出来たっ!と思ったら、どんなデザインにしようとしていたか忘れていた…。

怖い話 タグ一覧デザイン:検討編 その3にある下記です:

「Bかなぁ」と思ったので、viewを見てみることにしたら、kowabana/app/views/tags/index.html.hamlだった。Haml。

Haml


トップページのhamlをのぞいてみると、%nav.keywordsというのがあるのですが:

%nav.keywords
  %h1= t('keyword')
  %ul
    - random_keywords.each do |keyword|
      %li= link_to keyword, tag_path(tag: keyword)

こんな感じで出力されます:

<nav class="keywords">
        <h1>キーワード</h1>
        <ul>
          <li><a href="/tags/%E5%96%A7%E5%98%A9">喧嘩</a></li>
          <li><a href="/tags/%E5%AE%87%E5%AE%99">宇宙</a></li>

難しい。代入していたりしてなかったり、インデントも意味があるみたい。

Haml、また今度やります…

資料:References


2008の記事ですが、Rakeカスタムtaskの書き方で、seed、fixturesが出てきてよかったです:

How (and whether) to populate rails application with initial data

http://stackoverflow.com/questions/62201/how-and-whether-to-populate-rails-application-with-initial-data

Fakerのドキュメント:

Faker

http://rubydoc.info/gems/faker/1.1.2/frames

簡潔な説明:

Railscasts: #66 Custom Rake Tasks

http://railscasts.com/episodes/66-custom-rake-tasks

Haml+Sinatraの例。わかりやすい:

An Introduction to Haml and Sinatra

http://net.tutsplus.com/tutorials/ruby/an-introduction-to-haml-and-sinatra/

HamlのReference:

Haml (HTML Abstraction Markup Language)

http://haml.info/docs/yardoc/file.REFERENCE.html

怖話:リポジトリの更新とダミーデータ作成周りの調査

お休みを頂いていたので、1月からの作業の続き。

怖話を最新に更新&リセット


とりあえず、リポジトリを最新に:

git stash save
git pull origin master -v
git stash pop

OK。で、db:migrateしたらbundle installしろとのmsgが:

bundle install

OK。またもやdb:migrateでエラー。MySQLが動いてなかった…:

mysql.server start
db:migrate

A-OK!さて、ダミーデータ作成の続き…の前にゴミデータを消す必要があります:

rake kowabana:reset

怖話のタグ一覧画面用ダミーデータ


タグのデータを作っていきます。

kowabanaを立ち上げて、

rails s

タグ付きの話を登録。tag, taggingsのデータをdbconsoleで確認します:

rails dbconsole
mysql> select * from taggings;
+----+--------+-------------+---------------+-----------+-------------+---------+---------------------+
| id | tag_id | taggable_id | taggable_type | tagger_id | tagger_type | context | created_at          |
+----+--------+-------------+---------------+-----------+-------------+---------+---------------------+
|  1 |      1 |          12 | Story         |      NULL | NULL        | tags    | 2013-02-25 04:19:29 |

tags、tagginsのデータを作ればいいことがわかりました。

Railsのデータ作りにはざっくり言って下記の方法があります:

fixturesはどうも評判が良くないみたいというのと、seedsはそのアプリを動かす時に必要な最低限のデータを作成するためのものということで、その他の方法を調べてみたのですが学習コストが高く諦めました。

テストのためのデータならFactory Girlを使うのが吉のようなのですが、今回は画面をデザインするのにデータを自動で作れたらという程度のものなので、Railsタスクを作ってデータを作ることにしました。

(続きは明日)

資料:References


アプリ用のミニマムなデータを作成する時、rake db:seed

Railscasts: #179 Seed Data

http://railscasts.com/episodes/179-seed-data

テストデータを作成する時、rake db:populate
(populate gemの最終更新が2年前。rails3未対応)

Railscasts: #126 Populating a Database

http://railscasts.com/episodes/126-populating-a-database

ダミーの文字列を作ってくれる:

Gem Fakerのドキュメント

http://rubydoc.info/gems/faker/1.1.2/frames

Gem Fakerの使い方がちょこっと:

The UI Controller, part 2: Faking It

http://blog.hashrocket.com/posts/the-ui-controller-part-2-faking-it

seed-fuというのもあるらしい:

seed-fuで始める効率的なRails Seed管理
http://morizyun.github.com/blog/seed-fu-ruby-on-rails-setup/

Fabrication!:

Fabrication!

http://www.slideshare.net/KenichiTachibana/fabrication-10499288

internブログのまとめ:振り返りと今後の作業について

internブログのデザインが大体出来上がりました。

細かい所は(faviconほか)はまだなのですが、今までの振り返りと今後の作業について考えてみます。

やってみての所感:my impression


  • 久しぶりに色々新しいものに触れてみて/考えて、楽しかった!
  • 時間がかかり過ぎたのではないか(作業時間をあまり意識していない。計算してみよう→ココ)
  • TumblrのThemeなら作れるようになった。単純な管理項目もOK
  • cssをガリガリ書くのではなくて、haml, sassなどを使って楽ができないか検討したい
  • もう少し画像や色を使ったものを作ってみたい
  • WordPress頓挫した
    • インストール後のメンテナンスがよくわからない
    • セキュリティ?とか何かケアする必要があるのかな
    • 余裕が出て来たらやってもいいかも

かかった日数を計算してみた。11日間:total workdays; 11 days


日誌を書いているので、それで計算してみました。

(キーになる日だけ、日誌のリンクを貼っています)

  • 12/17
  • 1/21, 22, 23, 24
  • 2/4, 5, 6, 7, 18, 20

よって:

  • 合計11日間
  • 作業時間は大体10:00〜14:30時(うち1時間はお昼)
  • Tumblr theme学習:4日
  • git flow:1日

なるべくコード書きを効率よくして、デザインに時間をかけられるような方向を目指す。

技術的にカバーしたこと:covered technical skills


  • Bootstrap(途中で頓挫)
    • シンプルなサイトなら別にBootstrapいらないかも
    • 無しで作ってみることでどこをカバーしてくれてるかちょっとだけ把握できたのでよかった
  • Heroku
    • 静的ページの作成/配信
    • デプロイ
  • git flow
  • Tumblr カスタム theme

次にやること/やりたいこと:next things to do


internブログのデザインが大体できたので、次にやりたい事の当りを付けてみます:

  • faviconの作成:internブログや他のときにも役立つ
  • middleman, haml, sassを使って、internブログをやり直してみる
  • iPhoneアプリのサイト作成
    • サイトトレンドや自分の好みの勉強に
    • 自分のアプリの宣伝に
  • かけた時間を意識する
    • ボリュームにもよるが作業週2ユニットで1つ完成を目指してみる
  • モバイルからの見え方を意識する

余談:今日読んで興味深かった記事:all this blog aside, interesting readings


なぜ日本のWebデザインはダサいのか?
http://memo.goodpatch.co/2013/02/is-japanese-web-design-bad/

上の記事のネタ元:

Japanese Web Design: Why You So 2003?
http://www.tofugu.com/2012/05/15/japanese-web-design-why-you-so-2003/

フラットデザイン、たまに聞くので気になった:

2013年のトレンド、フラットデザインを使うメリット+参考にしたいデザインまとめ
http://memo.goodpatch.co/2013/02/benefit-of-flat-design/

MarkdownではH1タグにもidが振られるのですが、ページ内リンクも記述できて便利なことを発見:

In Markdown, what is the best way to link to a fragment of a page, i.e. #some_id?
http://stackoverflow.com/questions/3292903/in-markdown-what-is-the-best-way-to-link-to-a-fragment-of-a-page-i-e-some-id

floatについて。分かってないこともあった!:

All About Floats
http://css-tricks.com/all-about-floats/

Internブログカスタマイズ:記事のタイトル周りを整理

今日は午前中の作業だけなので、少しの修正のみ。

記事作成日のデザイン


記事の作成日は重要です。
検索エンジンから来たときに、参考になる記事だと思って最後まで読み終わり、その記事が3年前のものだった時のがっかり感といったらもう(技術的記事だと特に…)言葉になりません。
というわけで、目につきやすい位置、記事のタイトルと距離がない、一番上に配置することにしました。

タグのデザイン


タグってもう古い、そう思っていました。ですが、ただの甘ちゃんだった…。
ちゃんと設定することで、記事の要約になりますし、SEO的にも意味のあるものになります。タイトルに詰め込めなかったキーワードをここに付ける事もできます。しっかり考えて付けたいと思うようになりました。

項目は少なく


記事作成日を左に出したのには、上で書いた以外にも理由があります。
1記事のヘッダーにいくつも項目が並んでいたら、うんざりするから。素直に欲しい内容を羅列していったら、3つになっていました。これは嫌だ。

  • タイトル
  • 作成日
  • タグ

これでスッキリしました。並べるのは2つまで。両方とも記事の内容を要約するものが一番上にきていて、読者にとって有益ではないでしょうか:

  • タイトル
  • タグ

資料


日付表示に参照:

Tumblr custom theme:Dates
http://www.tumblr.com/docs/en/custom_themes#dates

左に見出しが出ているのは前から気になっていたのですが、日付が出ているのがいいなぁと思って参考に:

個別記事ページのタイトルを設定する – Tumblrをブログとして運用するためのtips
http://blog.quellencode.org/post/17195020894/tumblr-tips

CSSで丸を描くには、width/heightを同じに、widthと同じborder-radiusを設定すればよい:

CSSで絵を描く!?今日から作れる達人のコツをご紹介
http://design.kayac.com/topics/2013/01/cssdrawing.php

インターンブログデザイン:Google Analyticsの導入とTumblrのカスタマイズ

学習週:2013.2.18。

先週の作業週はお休みを頂きました。引き続き、Tumblrでのインターンブログ作業をしていきます。

Google Analyticsの作業


  • 設置
  • 設定:資料にあるカスタムレポートを設定しました

アクセスなどのレポートは今後見ていきます。

Tumblrの作業


  • pagenation
  • footerの調整
  • タグの表示
    • titleに表示:informative
    • SEO

その他、気づいた事なのですが、{block:IndexPage}項は下記表示時に表示されるんですね:

  • トップページ
  • tagページ
  • 記事一覧:次/前のポストとは別。

というわけで、トップページの時のみ表示したいというのをどうやったらいいか。資料を参考に考えました:

{block:PreviousPage}<!--{/block:PreviousPage}
{block:PermalinkPage}<!--{/block:PermalinkPage}
{block:TagPage}<!--{/block:TagPage}

    ここにトップページでしか表示したくないものを書きます

<!-- dummy comment to close comment -->

{block:PreviousPage}、{block:PermalinkPage}、{block:TagPage}のいずれかで始まったコメントは、dummyコメントで閉じられます。tagページを表示する際、PreviousPageとTagTageの2つのコメントが始まる場合があるのに注意する必要があるかもしれません。

資料


これだけ見ておけばとりあえず大丈夫!僕が設定しているGoogleAnalyticsのカスタムレポート5つ
http://www.danshihack.com/2013/02/13/junp/googleanalytics-customreport.html

tumblrで固定されたインデックスページをつくる方法
http://no-new-folk.com/blog/web-develop/how-to-create-tumblr-front-page/

Tumblrのカスタムthemeの勉強

2013.2.7:学習週


  • Tumblrのカスタマイズについて勉強
    • Tumblr公式のcustom themeタグリファレンス
    • Tumblrにstaticファイルをアップロード
    • Essential boilerplate theme
  • メモ:uploadしたリセットCSS

Tumblr公式のcustom themeタグリファレンス:


How to create a custom HTML theme

http://www.tumblr.com/docs/en/custom_themes

Themeに必要なリセットCSS、imageなどのstaticファイルのアップロード


[注意] アップロードした際に表示されるURLをメモしておかないと、DashboardやSettingsには表示されないみたいです。

Tumblr Upload a static file

http://www.tumblr.com/themes/uploadstaticfile

以前、紹介したリセットCSSをファイルに落としてuploadしておけば便利。

HTML5 Reset Stylesheet

http://html5doctor.com/html-5-reset-stylesheet/

Essential boilerplate theme:修飾が入っていないデザインベースとして使えるTheme:


Theme作るときのベースとして。CSSは全て、CustomCSS内で設定できる。ページ内のDemo base codeをコピペしてベースとして使用。

Essential boilerplate theme

http://buildthemes.tumblr.com/code/essential

これはスゴイ!便利!

シンプルなので見やすく、HTMLタグの設計も変更しやすいと思います。

また、実際にEssentical boilerplate themeを使ったブログは下記。必要最低限のHTMLって感じです。:

http://essentialtheme.tumblr.com/

Tumblrでの制限:分かったこと


  • 1記事表示のとき、「最近の記事」とかを取ってくることはできない
  • ADVANCEDの「10 posts per page」の10(ポスト数)を意識しないといけない場面が出てくる
  • {block:PermalinkPagination}・{block:PreviousPost}・{block:NextPost}はIndexPageでは表示されない
  • {block:IndexPage}・{block:Pagination}などはトップページ、NextPageなどで表示される:Page概念
  • google web fontsはthemeに直接埋め込む

資料


2010年の記事。少し古いものの、Theme作成の手順がざくっと分かってよかった:

Things to Know About Custom Tumblr Theme Design

http://buildinternet.com/2010/04/things-to-know-about-custom-tumblr-theme-design/

Tumblrのテーマ開発をchapterに分けて解説している。ステップに分かれているので学習しやすかった。必要なところだけ読むのもOK:

http://buildthemes.tumblr.com/