b6note

2011/05/30

Rails3のlink_toヘルパーで、画像と文字列にリンクを貼る

やりたいこと

<a href="リンク先URL">
<span>文字列</span>
<img src="画像パス" alt="あうあう">
</a>

普通(?)にlink_toでやると

<%= link_to リンク文字列, リンク先情報 %>

こう？でもこれだと出力は

<a href="リンク先URL">リンク文字列</a>

になっちゃう。

これだとタグがエスケープされちゃう

<%= link_to("文字列", リンク先URL) %>

し、imgタグもなんか入れにくい

それlink_toのブロック構文でできるよ

<% link_to "リンク先情報" do %>                                                                                              
  <span>文字列</span> 
  <%= image_tag("画像パス", :alt => 'ほげほげ' %>
<% end %>

出力

<a href="リンク先URL">
  <span>文字列</span>
  <img src="画像パス" alt="ほげほげ">
</a>

できたわーい！

※上記の例だと最初からそのままaタグ書けばいいじゃんって思えるけど
　"リンク先情報"の部分で
　「:controller => 'hoge', :action => 'fuga'」
　とか指定したいのでlink_toを使ってます。image_tagも似たような感じ。

2011/05/28

will_paginateを拡張しようとしたら"uninitialized constant WillPaginate::LinkRenderer"エラー

rails3,tips

will_paginateの表示をカスタマイズしたい

will_paginateのページネータで、デフォルトのspanタグではなく
ul>liを使いたかったので、renderer拡張クラスをつくろうとしてみた！

環境

railsのバージョンは3.0.7、will_paginateは3.0.pre2。

継承するクラスがない

ネット上でぐぐってみると

class CustomRenderer < WillPaginate::LinkRenderer   
   ・・・ここで拡張・・・ 
end

っていう情報がよく見つかるけど、こうしようとすると

uninitialized constant WillPaginate::LinkRenderer

エラーが出ました。あうあう

will_paginateのクラス構造が変わってた（ViewHelpers）

rubyonrails-talkのMLでのやりとりを見ると、

class CustomRenderer < WillPaginate::ViewHelpers::LinkRenderer
   ・・・ここで拡張・・・ 
end

って感じで、"ViewHelpers"が追加になったみたい！できた！

併せてwill_paginateのデフォルト設定

カスタムrendererを記述する場所はみんなそれぞれの場所に書いてるみたい。
（environment.rbとかapplication.rbとかapp/modelの下とか）
僕はこうしました。

app/helpers/paginate_helper.rb にヘルパーと拡張クラスを追加

# -*- coding: utf-8 -*-                          
module PaginateHelper                          
                                               
  def paginate collection, opts = {}           
    opts[:id] ||= 'pageNav'            
    opts[:previous_label] ||= '前へ'  
    opts[:next_label] ||= '次へ'               
    opts[:class] ||= nil                       
    opts[:renderer] ||= 'PaginateHelper::SetucoPaginateRenderer'
    will_paginate collection, opts             
  end                                          
                                               
  class SetucoPaginateRenderer < WillPaginate::ViewHelpers::LinkRenderer
    〜ここで拡張〜
  end                                          
                                               
end

ビューで使うとき

<%= paginate @pages %>

すっきり！！

2010/10/16

2010年の日本OSS奨励賞をいただきました

IPAが毎年行っている日本OSS貢献者賞／奨励賞というやつがあり、今年その奨励賞を受賞しました。

受賞理由は、簡単に言うと「コミュニティ活動や勉強会への学生の参加、情報発信を頑張った」ということで、2009年中に電設部のつかだとして勉強会に参加＆自分で開催＆周りの学生をたくさん誘致したのがよかったね！ということみたいです。情報発信は、ブログとか@ITとかでわいわい書いてました。あとは勉強会で登壇したりとか。中学生から大学生まで揃ってOSCで勉強会に
関するセミナーしてみたりとか。発表したものはSlideShareにタメてみたりとか。

でも、勉強会に参加して学生層／若い層に輪を広げたことが評価されるというなら、それの原動力になった各勉強会の運営者（「この勉強会に友達連れてきたい！」と思っちゃうような場をたくさんいただきました。それに、「参加したらブログに書いて恩返し」ということも学びました）や参加者のみなさん（「この人に会わせたい！」と思う魅力的な人ばかりでした）、電設部やかまってくれた学生のみんなが居たからこその結果なので、去年関わっていただいた全ての方に心から感謝です。全員で受賞した気持ちです。受賞を知ったとき、そう思いました。たくさんの方（数えきれないのでここで列挙はできない）に直接会ってお礼を言いたいです。どうもありがとうございました。

というわけで、今年ももちろん勉強会に参加したり開催したりしておりますし、今はSetucoCMSの開発に注力しております。SetucoCMSも、現在電設部の現役学生と私のようなOBでやっておりますが、学生と一緒にやるということをずっと大事にしていきたいです。

では、今後ともよろしくお願いします。

2010/08/24

zf create project ⇒ Cannot redeclare class PHPUnit_Framework_TestSuite_DataProvider in /usr/share/php/PHPUnit/Framework/TestSuite/DataProvider.php

zf create project path

を実行したとき、

Cannot redeclare class PHPUnit_Framework_TestSuite_DataProvider in /usr/share/php/PHPUnit/Framework/TestSuite/DataProvider.php

というエラーが発生。
スタックをたどってみると、

/usr/share/php/PHPUnit/Framework.php

の中で大量にphpファイルをrequireしていたので、ファイル内のrequireを全てrequire_onceに置換して解決。

2010/07/25

git rebase -i で編集をミスったとき

git,tips

git rebase -i で過去のコミットを編集、まとめたりするとき、
途中で操作をミスると再度 git rebase -i を実行しようとしても

"Interactive rebase already started"

と出ることがある。
このときは一度


$ git rebase --abort

を実行して、「今のrebase無しよ」としてから
再度git rebase -i を実行すれば上手くいく。

2010/06/02

Hello, world.

english,misc

I had written the blog in the title "[Susume] of school IT study meeting" before. My name is [tsukadaakihiro]. It is shifting gradually to akitsukada though I had acted by the pen name named atcorp before.

The place of employment is domestic SIer, and I am employed as SE apprenticeship. Even if it is private, the programming is done. The programming is a hobby.

The CMS development project of open source named SetucoCMS is started up with the classmate, the junior, and the senior in the school days now. A real activity has not started yet though the page of the project is made in SourceForge. The future is the enjoyment.

2010/05/06

SetucoCMS合宿中のHTML勉強会めも

今立ち上げ中のオープンソースプロジェクト「SetucoCMS」の合宿中に、HTML勉強会を行った。講師はプロジェクトリーダーの@skyguild。走り書きのようだけど、内容をメモったのでここに記録。

SetucoCMS HTML勉強会

hタグについて

h6まである。html4ではh1は一つのページに一つまで、となっていたが、html5ではその辺の事情が変わりつつある。単純に太い大きい文字で表示するタグじゃない。見出しの意味を持つのが重要。

リストタグ（ul ol dl）について

場合によっては、dlタグを使うのか、それをhタグをpタグでやればいいのかと迷うこともある。見分け方、判断の仕方としては、「◎◎」は「〜だ」、「○○」は「〜〜だ」というときは「dl dt dd」だろうし、「◎○」について、「◎○◎○◎○◎○◎○◎○◎○◎○◎○◎○◎でhhhhhhasldkfja;slkdjfaだ」とかならhタグとpタグがいいかもね。

divタグについて

ブロックレベル要素（ほかにh,p,・・・など、文書構造としての意味を持つもの）。要素をまとめておけるタグ。divタグ自体は意味を持たないタグ。意味をなさないので、本来は「いかにdivを使わないか」という観点で見たり。

spanタグについて

divのインライン要素。（a,img・・・など、文中に使うもの）pタグで囲った中でも、一部だけ赤文字にしたいとか。ただし、これも本来文書としての意味をなさないので、使用には一考を要する。たとえば、赤文字にしたいのはなぜか=>強調したいから。=>それなら別のタグでは。

b, em, strong の違いについて

bはbold、emはemphasis、strongはstrongの略（strongは略じゃない＞＜）。emは文中で強調・重視したいところ、strongはさらにstrongなところ！

copyright表記について、addressタグを使うのは適切か

addressか？そうでもないだろ => pタグじゃね？という議論があったりした。でも、それも違わね？みたいな展開になって、さらにhtml5ではsmallタグを使うんだって。

HTML5では

divで一般的に表していたことをタグ化して、より適切に文書構造の意味を表現できるようにする。例えば＜div id="header"＞というお決まりのタグは＜header＞タグにするとか。

例えば＜a＞（アンカー）タグでページ内ジャンプを表現しているとき、音声読上げブラウザでは毎回不要な見出しを読上げられたりする。それが、HTML5なら＜navigator＞タグで適切な意味を持たすことができ、音声ブラウザに対する適切な配慮ができる。「セマンティックなマークアップ」方面に力を入れている。

CSS3について

やりすぎじゃないかな、という意見も。CSSは装飾を施すものであって、アニメーション関連はCSS本来の役目だろうか？

CSSの書き方について

dim#header と書くときの、divは意味があるか？ないけど、それをみたときに意味が分かりやすい。p#copyright と書いたときとか、#copyrightより分かりやすい。htmlソースを見て検索しないでも、cssだけ見れば分かるよね。私は結構すき。そもそも、要素はコーディングに設計／定義をすべきものなので、後から要素を変更しない前提で書くべきだし。

cssの一括書きと個別書き

たとえば、backgroundとbackground-image, background-position, background-repeat。3つ書くと3行消費しちゃうし読みにくくなるから、background一行で書こうね。あと、marginの指定はmargin-top、margin-bottomとか分けるんじゃなくて、margin:10px 0; みたいにまとめ書きしよう。

それに、margin/paddingの指定をするときに0pxとか書かないで。0は0であって、emでもpxでもないのだよ。

HTMLコーダーが魅せるのは、見えないところ

HTMLコーダーがアツくなるポイントとしては、alt属性。これは入れた方がいいとかじゃなくて「入れなきゃいけない」。音声読上ブラウザに対する配慮もそうだし、SEO的にも効果がある。imgタグにaltが入っていなければ、どちらもダメ。

imgで、画像に対する意味の補足としてやるとか。tips的には、＜h2＞＜a href="" title="*****"＞＜/a＞＜/h2＞みたいに書いたときのtitle属性。title属性は、多くのタグにつけられる要素。補助的な意味として、アツい。
HTMLって、見えないところにけっこうこだわるもんなんだよー。googleも、「ランキング上げるためじゃなくてユーザのことを考えてサイト作りなさい」って言ってるんだよ！

読み上げブラウザのtips

altに補足の文書を書いてあげるとき、「menu」って書くと「エム・イー・エヌ・ユー」とか読上げられちゃったりすることがあるので、カタカナで「メニュー」って書いてあげるほうがいいよ、とかね！

レイアウト

固定幅レイアウト、リキッドレイアウト、エラスティックレイアウト。

固定幅: 横幅が変動しないレイアウト
リキッドレイアウト: リキッドレイアウト
エラスティックレイアウト（ゴムのように弾力性のあるレイアウト）: 文字サイズを基準に各所のサイズを決める（単位にemを使うなど）
リキッド+エラスティックレイアウト: 最大幅／最小幅などを指定したり、外部のバナー等固定幅でなければならない部分がある場合は、柔軟にがんばる。

エラスティック+固定幅の活用例⇒http://www.jec.ac.jp/design-w/

お役だち情報

役立つサイト: Another HTML-lint gateway
http://htmllint.itc.keio.ac.jp/htmllint/htmllint.html
HTMLの構造上の正しさを採点してくれるよ！; W3C Markup Validation Service
http://validator.w3.org/
役立つアドオン - Firefox: Web Developer
http://lab.tubonotubo.jp/tools/webdeveloper/index.html; HTMLバリデータ
https://addons.mozilla.org/ja/firefox/addon/249
検証してくれます。; Semantic Checker 0.8.0
https://addons.mozilla.org/ja/firefox/addon/13560
Sugamo.CSSで教えてもらったアドオン。
要素ごとに色分けして一目で分かるように表示してくれるよ。

質疑応答

Q:brタグってどうなの

A:改行であって空白ではない。改行なのだよ。p使うべきときはp使うべきだし、あくまでも意味としての改行に使うべき。レイアウト調整のために使うことは許されない。いっさい。ダメ、絶対。

Q:idとかclassの名前を付けるのめんどくさいんですけど。

A:逆に、必要なところ以外はidやclassをつけないようにコーディングを頑張っては。たとえばulタグ自体にcssを指定すればいいのにわざわざdivでラッピングしたりは無駄っすよね。あとは、＜div id="container"＞とか、ある程度お決まりの構造や名前を使っていけます。まぁ、正直迷うこともあるけど。