カテゴリー:雑談

リスト表示へ

『ノンプログラマのためのJavaScriptはじめの一歩』を献本いただきました

2012年11月 4日 22:31

ピクセルグリッドの社員である @hokaccha さんに、11/7発売予定の『ノンプログラマのためのJavaScriptはじめの一歩 (WEB+DB PRESS plus)』という本を献本いただきました。

中身を読んでみた感想をつらつらと書いてみたいと思います。まず最初に言っておくと、タイトルの通り「ノンプログラマ」向けの書籍です。

そのため、普段からJavaScriptを書いているような人にとっては若干物足りない書籍でしょう。ただ、「これからJSを学びたい」という人や「プログラムってなんだかむずかしいんでしょう?」と思ってなかなか手を出していない人にとってはとても分かりやすく、理解を助ける良書になると思います。

プログラムの基礎から解説

ノンプログラマのための、というサブタイトルがついているだけあって、まずは「プログラムとはなにか」という説明から始まります。
例えば「変数とは箱である」みたいな説明もされています。プログラムのある程度の知識がある人は、このあたりは読み飛ばしてもよさそうです。

JavaScript開発の説明に特化

この本のターゲットが、ノンプログラマでかつJavaScriptをこれからやろうとしている人向けのため、JavaScriptを開発する上で必要な知識、便利なツールなど開発環境についても言及されています。

特に、Google Chromeに付属しているWeb Developer toolsについては基本中の基本のため、あまりよく分かっていない人は読んでみると発見があるかもしれません。

個人的にも、こうしたツールの使い方、便利な機能についてはひと通り知っておくことで、開発効率が飛躍的に高まると思っています。

jQueryを使った場合との比較

最後に、サンプルプログラムをjQueryを使った場合にどのように書くかというサンプルが記載されています。
まずはjQueryから、というふうに考えている人が「じゃあjQueryを使わない場合どうするの?」という、逆引き的に使うと理解が進みそうです。
最近社内では「Goodbye jQuery」みたいなことを(冗談めかして)話している場面もあったりします。jQueryはとても便利な半面、便利なゆえに余計な処理やクロスブラウザの処理などが含まれているため、どうしても重くなってしまいます。

しかし、スマホサイトの構築などではそもそもクロスブラウザ(特にIE対応)はほとんど必要ありません。そのため、最近ではjQueryを使わずに開発することも多くなってきています。つまり、jQueryを使わずに書かれたJSを見る機会が今後増えていく可能性があります。そうした場合でもある程度JSが読めるようにするためにも、こうしたjQueryとの比較から入るJSの勉強はとても有意義なのではないでしょうか。

ひとつのサンプルプログラムを徹底解説

そして個人的にいいなと思ったのは、冒頭で示されるサンプルプログラムを徹底的に解説しているところです。どう徹底的か、というと、サンプルプログラムで書かれている文章1行1行について何を意味しているのかを解説している点です。
そして説明が終わったあとに、その章で説明された部分を編みかけにして「学んだ範囲」として示してくれます。

そのため、まったく分からない箇所がない状態にしてくれます。まさに「ノンプログラマのための書籍」と言っていいでしょう。
プログラム自体にまだ不慣れな人はぜひ読んでみてください。

CSS Nite LP9 第2回コーディングコンテストで、見事に入賞しました!

2010年4月20日 23:56

Web Site Expert 賞を頂きました

コーディングコンテストの結果が発表されたようです。応募された作品や、入賞した作品へのコメントも掲載されているので、見てみると面白いかもしれません。

前回の記事の CSS Nite LP9 第2回コーディングコンテストに応募しました で応募したコンテストで、見事入賞することができました!(結果発表はこちら

時間があまり取れず、最後の方は急ぎ足で作ったのと、HTML5.JP を運営している羽田野さんの 書籍:徹底解説HTML5マークアップガイドブック を応募後に読んで、なんだか色々と「ああしておけばよかった・・orz」としきりに後悔していましたが、幸いにも賞を頂くことができました。

ただ、今回のコンテストでは最優秀賞はいなかったとのこと。
次回(もしあれば)は最優秀賞をもらえるよう、がんばりたいと思います。

今回のコンテスト参加で、賞以前に、とても勉強させてもらいました。
一度、がっつりとコーディングをしてみることで色々なものが見えてきます。
まだ上記の結果発表ページの下から、デザインデータなどがダウンロードできるのでコンテストに関係なく、コーディングルールを意識して制作してみると色々と勉強になっていいと思います。時間があるかたはぜひ、チャレンジしてみてください。

いちおう、CSS Nite LP9 にも参加してきたんですが、あいにくお通夜と重なってしまい、一番見たかった最後の 3 セッションは結局断念・・(´;ω;`) とりあえずそのセッションに関しては公開されているスライドを見て気を紛らわせることにしますw

CSS Nite LP9 第2回コーディングコンテストに応募しました

2010年3月28日 15:47

無事、コーディングコンテストに応募できました。

なんと見事、コーディングコンテストで受賞しました! 詳細はこちら!

以前 CSS Nite LP9にて、第2回コーディングコンテスト開催決定。 で書いたコーディングコンテストに応募しました!

なかなか時間が取れず、結局最後の 3 連休で時間を作って大慌てで作成しました。作業時間としては大体 13 時間くらいかな?
だからというのでもないですが、今見直すと色々と直したいところがちらほら・・。

しかし、実際に作ってみてとても勉強になったいい課題だったと思います。
CSS3 を前提としているからか、「あ、きっとこれはこれを使うことを考えてるんだろうな」みたいなところが見え隠れして、細部まで考えられてるなーというのが印象に残ってます。

ということで、とりあえず応募したのはこんな感じになりました↓

CSS Nite LP9にて、第2回コーディングコンテスト開催決定。

2010年2月21日 23:09

コーディングコンテストデザインサンプル

表題通り、4/17に開催される CSS Nite LP9 にて、コーディングコンテスト が開催されることになりました。

あらかじめ用意されている PSD データを基に、自分の考えに基づいてコーディングを行い、テクニック、デザイン再現性、メンテナンス性の高さを競うものです。

さらに今回のコンテストはなんと、HTML5+CSS3 でのコーディングとなります。
HTML5 とか CSS3 まだ使ったことないんだよなーという人も、この機会に参加してみてはいかがでしょうか。いちおう自分も参加するつもりでおります。

しかも発表は、CSS Nite LP9 イベント当日に行われるそうです。いくつかの賞が用意されているようで、最優秀賞作品はシックス・アパート公式サイトで公開されるようです。(デザインサンプルの提供がシックス・アパートで、コンテスト対象のデザインも MT5 のページ 1 ページをコーディングする、というものです)

対象ブラウザも Firefox3.6 と Safari4 と、かなり思い切ったものなので、思う様 CSS3 を書くチャンスですw
なかなか実務で使うことが難しい CSS3 ですが、たまに CSS3 のサンプルを書くとあまりにも楽なセレクタや表現の幅の広がりに涙が出そうになります。
そういった CSS3 の素晴らしさを知る、という意味でも参加してみると面白いと思います。

Coding Contest #02 - HTML5 + CSS3

CSS Nite 4周年記念イベント(Vol.40 reprise)に参加してきました

2009年11月13日 23:44

CSS Nite in Ginza, Vol.40 repriseの様子

スピーカーである KAYAC の山田さんに招待いただいて参加してきました。
今回の主題は「HTML5」。最近よく耳にするようになりました。実際自分も、HTML5で組んでみた で HTML5 を使ってテスト的に組んだりもしたのでとても興味のある回でした。

CSS Nite Vol.40 reprise のセッションは以下でした。

セッション内容

Vol.40 reprise に参加したことで、HTML5 に対する理解がより一層深まりました。
手書きメモベースなので細かい抜けや勘違いなどもあるかもしれませんが、内容をざっくりおさらいをしながらまとめたいと思います。

装飾用divを劇的に減らせるCSS3プロパティとテクニック

2009年6月20日 09:55

div イメージ

以前の記事の HTML5で組んでみた に続いてサンプルがまったく一緒ですがw
タイトルの通り、HTML5+CSS3 を使ってできるだけ無駄な HTML 要素(主に div)を使わずにどこまで思い通りのデザインが実現できるか実験してみました。⇒[DEMO]

結果、使用した div はわずかに 3 つ。ちなみに実際のブログトップで使用している div を数えたところ、54 個も使ってました。(一概に減らせばいい、というものでもありませんが)n

ただし、今回の実験はまだ草案の段階のものなどを多く含んでいるため、またそれらに対応しているブラウザが webkit 系(Safari や Google Chrome など)のみということもあり、正常に表示されるのは webkit 系だけとなってます。n

無駄なHTML要素がどこまで減らせるか実験してみた デモ

今回の実験の説明

個人的にアツイと思った CSS3 プロパティ・値

  • border-image: ...
  • display: box
  • box-flex: 1
  • background: ...
  • box-shadow: ...
  • box-sizing: border-box

CSS3 の草案で定義されているプロパティなどについては、各ブラウザで先行実装しているCSS3プロパティまとめ でまとめています。n

簡単に説明すると、n

HTML5 の新要素により、div を使う機会が減った

まず、header 要素や footer 要素、nav 要素など、今までは<div id="header">などとして定義していた箇所が、そのまま要素名として使えるようになったため、div を使う必要がなくなりました。n

border に画像が使用できる「border-image」

ひとつの画像を指定した値で区切って上下左右、それからボックス四隅へ適用するプロパティです。これのおかげで、ひとつのボックス要素にこれを指定するだけで、角丸などの複雑な囲みでも簡単に実装することができます。n

つまり、これを ul 要素などに使えば、装飾用に新しく div を追加する必要がなくなる、というわけです。n

簡単にカラム同士の高さを揃えられる「display: box」

こちらはプロパティではありませんが、CSS3 で新しく定義されている display プロパティの新しい値です。
display: box を指定された要素の子要素であるブロック要素は、自動的にカラム配置となり、さらにどのカラムも最大の高さを持つカラムに追従して高さが確保される、という特徴があります。n

そのため、メイン・サブカラムの高さを揃える JS を使ったり、はたまた背景を使ったトリッキーな方法で高さを揃える、という必要がなくなるため、これもまた div 要素を削る要因となります。n

それのおかげで、div をほとんど使わずにサンプルの左右のカラムの高さがそろっている、というわけです。n

背景画像を複数指定できるようになった CSS3

現在策定中の CSS3 では、背景画像を複数指定することができるようになりました。
指定したい数だけ、カンマ区切りでそれぞれ指定します。n

上のようにカンマ区切りで指定すると、それぞれの配置や繰り返し内容を列挙することができます。n

これにより、アイコンと画像ボーダー、のように複数の画像を指定することが可能なため、余計な div などの要素を追加する必要がなくなります。n

100% の要素内でも固定幅を持ったように要素を配置するテクニック

ここの気づきも、div を減らす要因になりました。
以下の HTML と CSS を見ていただくと分かりますが、heade 要素は横幅 100% に設定されているにも関わらず、内包している h1 などの要素がメインのコンテンツと同じ 830px の幅に収まっています。n

このテクニックの肝は、float,position,marginの 3 つです。n

設定する値は上記を参考にしてもらうとして、なにをやっているか、を説明すると、float させた要素に対し、position: relative を指定します。n

こうすることで、続く left などの値が反映されるようになります。
そしてこの left に 50% を指定すると、指定された要素の左端は画面中央に来ます。n

最後に、margin にマイナス値を設定し、数値をコンテンツ幅の半分に指定することで、まるでコンテンツ幅が固定されているような位置に配置される、というわけです。n

つまり、いったんコンテンツを画面中央に移動させたのち、マイナス方向に要素を移動することで、意図した固定幅の範囲にコンテンツが収まるようになる、というわけです。n

今回のサンプルでは、RSS feed のアイコンが右側にあるので、同じように左右を入れ替えて値を設定すれば、右寄せにコンテンツが表示される、というわけです。n

まとめ

以上の、border-image,background,display: boxと、HTML5 の新要素、および上記のテクニックを使うことによって 54 個も使っていた div を、3 つまでに抑えることができました。n

まだ CSS3 の草案段階のプロパティだったりしますが、早くすべてのブラウザに実装してもらいたいものですね。n

CSS Nite in Ginza, Vol.36に行ってきました

2009年6月19日 09:49

CSS Nite in Ginza, Vol.36の様子

昨日(06/18)は "CSS Nite in Ginza, Vol.36" に行ってきました。CSS Nite in Ginza, Vol.36 の詳細はこちら

今回のテーマは "インフォメーションアーキテクトの過去、現在、そして未来" というものでした。講師は "佐藤 伸哉" さん。n

セミナーで使用されたスライドは後日公開されるようですが、セミナーのスライドで紹介されたリスト化された項目をピックアップ。n

一般的な IA のタスク

  • 市場調査、競合調査、ユーザー分析
  • ペルソナ
  • ユースケース、ユーザフロー
  • フューチャー、コンテンツリスト
  • ハイレベルサイトマップ、コンセプトモデル
  • ワイヤーフレーム
  • 詳細なサイトマップ
  • 機能要件定義書、仕様書
  • ページデザイン(コンポーネント設計)

よくある問題点

  • スキルの問題
  • PM と IA の兼務は判断基準が不安定になるため望ましくないn
    • メイン:PM サブ:IA の人はスケジュール重視になりがち
    • メイン:IA サブ:PM の人はクオリティ重視になりがち
  • チーム内で最も経験がある人が IA になると良い
  • 規模に応じたアサインがされていない現状
  • 案件が適切ではない

まとめ

  • IA には領域(情報アーキテクチャ)と役割(インフォメーションアーキテクト)がある。
  • IA の役割は時代とともに変化してきている
  • IA は情報設計だけではない
  • IA はユーザの経験を設計するのが目的
  • IA の対象は Web だけとは限らない
  • 情報の表示された、その先の(設計という意味での)デザインも必要

アフターパーティにも参加してきました

CSS Nite in Ginza, Vol.36 アフターパーティの様子

セミナーの後、懇親会という感じでアフターパーティがあります。そこに参加してきました。
なかなか同じ立場の人と会ったり話したり、という機会がないのでとても楽しかったです。n

そこで色々な人と名刺交換してきました。が。
名刺をたくさん持っていこうと思って用意しておいたのに、忘れてきたことに気づき・・。ほとんどの人に名刺を渡せませんでした(;´Д`)(もらうばっかり・・)n

次回参加するときはそれを肝に銘じてしっかりと名刺を持って行こうと思います(´・ω・`)

アフターパーティでは、サイバーガーデンの 益子さん もいらしていたんですが、話すきっかけが掴めず、結局一度も話せず・・orz

ちなみに、いまだにこれ以上の本を見たことがないのですが、自分のバイブルにしている "Web標準の教科書─XHTMLとCSSで作る“正しい”Webサイト" の著者です。n

余談

アフターパーティでは、Sugamo.css の主催者の Sig. さん とお知り合いになりました。
今度やるから参加しない? と誘われたんですが、時間的に都合がつくか怪しい・・。
でもなかなか興味深いイベントです。
月 1 回くらいの頻度でやっているみたいなので、いずれは参加したいな。(第 4 回 Sugamo.css の様子)n

余談2

ちなみに、こういったセミナーというか、イベントみたいのやるよーって言ったら参加したい人とかいたりするのかな・・wn

HTML5で組んでみた

2009年6月18日 13:55

HTML5 イメージ

タイトル通り、HTML5 の勉強、ってことでこのブログのトップを HTML5 でテスト的に組んでみた。n

組んだ感想。すげーやりやすい。n

section など、div よりも より意味のあるタグが追加されたことで、視覚的にも分かりやすいし、section section {}のように入れ子を表現しても div のように変になりづらいというのも利点。n

HTML5 で組んでみたのサンプル

そして全然関係ないけど、今回の HTML5 で組むことで、なんだかかなり色々なことに気づけたw(コーディングのノウハウ的なので)n

IE で HTML5 を使う際の注意点

IE は正式に HTML5 には対応していないので、そのまま使用すると、CSS が反映されない。(section { display: block; }などとしても無視される)n

なので IE 向けに HTML5 を使うにはちょっとした工夫が必要です。といっても大したことしないけどw
以下のように JavaScript を使用して、該当の(section などの)要素を生成することで CSS が反映されるよーになります。n

今回使ってみた新要素

  • header
  • footer
  • section
  • nav

上記以外で使えそうなのとしては

  • article
  • dialog
  • audio
  • video
  • canvas

なんかがメインで使うものかなーなんて思ってます。
ただどれも、現在はまだ草案の段階なので仕様や実装が変わる恐れもあるので注意です。
HTML5 についてはこちらのサイト が詳しいです。n

HTML4(と XHTML) との違い

まず大きな違いは DOCTYPE 宣言。HTML5 では<!DOCTYPE html>と書きます。システム識別子、公開識別子が取り払われてとてもシンプルになってますwn

次に、今までは文字コードの設定は<meta http-equiv="content-type" content="text/html; charset="utf-8">を使っていましたが、HTML5 からは<meta charset="utf-8">となります。n

余談

ちなみに上記のサンプルページ、IE6 で見るとちょっと面白いことに・・wn

iPhoneに最適化してみました(TOPだけ)

2009年4月27日 23:56

さて、タイトル通り、このブログの TOP を iPhone に最適化してみました。
このブログの性質上、あまり iPhone から見ることってほとんどないと思いますが、さすがにそろそろ iPhone 向けサイトの作り方とかを知らないとなぁってのもあってとりあえず TOP だけ最適化してみました。(といってもかなりやっつけ)n

ただやってみて思ったのは、ほんと、Safari は優秀だな、ということ。
iPhone 向けサイトを作る利点というか、うれしいところは、Mobile Safari だけを意識して作ればいい、ということ。(つまりブラウザ間の誤差を気にしなくていい)n

さらに、Safari はかなり CSS の実装が進んでいるため、とにかく class や ID がなくてもスタイルが指定しやすいしやすい。n

はてなブックマーク数のリンクだけを消したいなーって思ったらa[href*="hatena"] { display: none; }とか指定すればいいだけ。とにかく楽です。n

まだ TOP だけですが、他のページも随時最適化予定です。
そこで iPhone 関連の部分でなにか Tips 的なのを見つけたらそれをネタにするかもwn

リニューアルしました。

2009年4月17日 00:28

前回はさっぱりめだったので、次は黒かな、ってことで黒ベースでシックな感じにリニューアルしてみました。
まだ微妙にアイコンとか修正しきれてないけど、そこらへんはおいおいってことで・・。

1  2