デザインの最近のブログ記事

この１週間、サイト制作のためにCSSをコーディングしていました。

奇麗なCSSとは何か？

そもそも、奇麗なCSSの条件とは何か、改めて整理しなくてはいけません。
Googleでは、「Google HTML /CSS Style Guide」（※リンク先は和訳された方のサイト）という、コーディングガイドラインがあります。
そこでは、

IDとクラス名にはちゃんと意味の分かる名前を使う

要素の目的や役割を反映した名前を付ける。意味の分かる範囲でできるだけ短いIDとクラス名を使う。

IDとクラス名にタイプセレクタは記述しない。

ul#example {} => #example {}

可能な限りショートハンドでプロパティを書く。

font: 100%/1.6 palatino, georgia, serif;のように、１回でまとめてプロパティを書く

IDやクラス名の別々の単語はハイフンで繋ぐ。IDやクラス名には固有の接頭辞を付ける。

#video-id {}

すべてのプロパティ名の終端にはコロンの後にスペースを入れること。

display:none; => display: none;

など、細かなコーディングのルールが定められています。
奇麗なCSSとは、他のプログラミング言語と同様に、保守性の高さ・パフォーマンス・動作の正確さ・無駄な部分の排除といった要素が満たされているものみたいです。
加えて、一貫したルールを持たせて記述することが大切ということも、このガイドラインから感じることができます。
個人で奇麗なCSSの定義をすることもできますが、GoogleやFacebook、Twitterなどのガイドラインを見習うことがスマートだと思います。
欲を言えば、そのルールがなぜそのように決められているのか理解することが大切だと思います。

Twitter社製ツール、『RECESS』という解決方法

奇麗なCSSを書くためのルールは理解しても、それに縛られるが故にコーディングのスピードが下がってしまうと思います。
Twitter社が公開しているツール『RECESS』は、作成した煩雑なCSSを奇麗なCSSに再出力してくれるツールです。

コンパイル前とコンパイル後｜クリックして拡大

このツールを使って指定したCSSをコンパイルすると、画像のようにプロパティの順番が規則通りになったり、コードの可視性が向上します。

間違っている部分を丁寧に指摘してくれる

また、命名規則やプロパティの順番が間違っている場合など（画像の場合は、#goToTopを#go_to_topにしなくてはならない）に、警告を出してくれます。
最終的に瞬時にコードを整形してくれるツールがあると、スピードを落とさずに質の高いものを実現できるので大変心強いです。
RECESSでは、適さない命名などのチェックもしてくれるので、チェッカーとして用いることもできます。

RECESSのインストール

RECESSを使うために、node.jsとnpmをインストールする必要があります。
昔は、両方とも別々にターミナルでコマンドを打ってインストールしなくてはなりませんでしたが、現在はnode.jsの公式ページにインストーラがあるので、自分のOSを選択してダウンロードすれば簡単にインストールできます。npmも同時にインストールされるので、RECESSをインストールするための環境構築は一瞬でできると思います。

いよいよ、RECESSのインストールをします。ターミナルなどで、以下を実行します。

$ sudo npm install recess -g

RECESSインストールの成功時

上記画像のようになれば、インストール完了です。

RECESSを使ってみる

早速RECESSを使って、煩雑なCSSを奇麗にしてもらいます。
cd コマンドで、自分のプロジェクトフォルダに移動して・・・

$cd プロジェクトフォルダへのパス

recessコマンドと共に、コンパイルさせたいcssのパスと出力させたいcssの名前を指定します。

$RECESS コンパイルさせたいcssファイル --compile > 出力cssファイル

RECESSを用いてCSSをコンパイル

これで、指定したファイル名で奇麗になったCSSファイルが出力されます。

出力はさせずに、CSSのチェックを行うときはシンプルに以下を実行します。

$RECESS チェックしたいCSSファイル

RECESSを用いてCSSをチェック

CSSファイル名の適さない部分を色々と指摘してくれます。

最後に

RECESSのgithubページを見ると、その他の使い方も記されています。
RECESSは、lessのコンパイラとしての機能を持っているので、less愛好家の人は今回紹介した以外にもメリットを教授できると思います。

RECESSのおかげで、なんとか人に見せても恥ずかしくないCSSが作れそうです。

CSS拡張メタ言語であるlessを個人制作の中に導入しました。個人的にどのように使っているかを整理したいと思います。
前編では、どのような環境で、どのように使っているのかにフォーカスをあてて綴りたいと思います。

使用している環境

[OS] Mac OS X 10.6.8
[エディタ] Coda http://www.panic.com/jp/coda/
[Coda プラグイン] less用の構文モード https://github.com/monoceroi/LESS.mode
[lessコンパイラ] less.app http://incident57.com/less/

less使用の基本的な流れ

はじめに、lessの利用方法は３つあります。

1. .lessファイルをクライアント側で読み込んでコンパイルする方法
   .lessファイルをjsを用いてパースします。速度的な問題が懸念されます。
2. サーバサイドでコンパイルする方法
   node.jsを利用してコンパイルする方法。nodeを導入するのに若干コストがかかりそうです。
3. ローカルでlessファイルをコンパイルしてcssを生成し、普段通りにcssをサーバにアップする方法
   一番無難な方法です。ローカルで.lessファイルを管理、コンパイルします。.lessファイルが共有できていないと、複数人のプロジェクトで混乱が生じるかもしれません。

個人制作での使用であることから、今回は3の方法でlessを導入、利用することにしました。
以下の画像は、その際のフローを簡単に図にまとめたものです。


[lessファイル] → [CSSファイル]の際にはCSSの書き出し先フォルダを指定しています。
また、関連するlessファイルを予め登録することで、lessファイルが変更、保存された際に自動的にCSSをコンパイルするようにしています。
この仕組みによって、lessファイルを保存した次にブラウザで確認すれば最新のCSSが反映されます。
これまでのCSSコーディングのやり方とほとんど変わらぬ感覚で制作を進めていけるのがポイントだと思います。

ファイル構成など

ファイル構成は、以下の図のようにしています。
最終的に書き出されるCSSは1つですが、実際には機能や構造に合わせて、複数のlessファイルを作っているのがわかると思います。
このようにした意図は、2点あります。

1. 将来的な運用のコストをできるだけ減らす
2. クライアント側の読み込み速度をできるだけ早くする

クライアント側にデメリットを生じることなく、CSSを機能、構造別に管理できるのは、大きな進歩だと感じました。


複数のlessファイルを一つにまとめるための.lessファイル（図の場合は[project.less]）には、以下のような記述がしてあります。


こうすることで、実際にコンパイルが必要な.lessファイルは、project.lessだけでよくなります。
この方法は、NAVERのエンジニアブログ（http://tech.naver.jp/blog/?p=951）でレコメンドされていました。
importしているlessファイルが、パッと見で把握できるように"_"（アンダーバー）をファイル名の頭につけています。

大まかにどのような環境でどうやってlessを使っているのか説明してきました。
後編では、具体的なlessプログラミングについてまとめたいと思います。

CSS拡張メタ言語であるlessを使い始めました。 雑感としては、

いよいよ、メディア技術基礎（ネットワーク・画像処理）最終課題について記入させていただきます。

まず、最終課題制作にあたって、私は以下のような設計図を提出しました。

正面図や断面図はこちらをご覧ください。

はじめにこの設計図に基づいて制作した改造FlickrViewerについて説明したいと思います。

改造FlickrViewerの概要について

デバッグした直後に表示されるウィンドウは以下になります。

デバッグ直後に表示されるウィンドウ

ほぼ、設計図と同様のレイアウト、機能を持った形を実現することができました。

撮影された年を指定することが出来るフォーム

左上には、撮影された年を指定することのできる入力フォームを設置。

画面をクリアするボタン

右上には、表示された画像をクリアするためのボタンを設置しました。

このFlickrViewerでは、撮影年を入力しても、しなくても検索が可能です。
撮影年はデフォルトの状態で、「Japan」というキーワードで検索すると、以下のように写真を取得、表示できます。

撮影年は表示されたものから変えずに、「Japan」で検索した。

設計図通りに、取得した画像はタイル状に表示させています。
では次に、撮影年を指定した状態で画像を検索することにします。

撮影年を2000年に指定した。

「Japan」というタグがついた、2000年に撮影された画像を取得します。
これによって、

2000年 1月1日 00:00:00〜2000年 12月31日 23:59:59

の間に撮影された写真を手に入れることが出来ます。
この結果、以下のように写真を手に入れることが出来ました。新たに検索をすると、先ほど検索して表示した画像の上に上書きされる形で表示されます。

撮影年を2000年に指定した上で、「Japan」タグのついた画像を検索

そして、表示された画像は、右上のCLEARボタンを押すことでクリアすることができます。

クリアボタンを押すことで、画面をクリアする。

以上が、改造したFLickrViewerの概要になります。

ソースコード、工夫した点

続いて、実装する上でのソースコードや工夫した点について説明したいと思います。

1. 写真をタイル状に並べる
　授業テキストでは、円状に写真を表示していましたが、シンプルに画面いっぱいにタイル状に表示されるように改造しました。画像の描画についてプログラムをしている「FlickrPhotoPanel.java」内を改造しました。

//取得した写真の枚数を格納
int photoNum = photoImgList.size();
if(0 < photoNum){
    for(int i=0; i<photoNum; i++){
        //写真の番号を9で割った際の余りの数で、列を指定する
        int amari = i%9;
        int x = (int)(0 + 75*amari);
        //写真の番号を9で割ることで行を指定する
        int count = i/9;
        int y = (int)(0 + 75*count);
    }
}

FlickrPhotoPanel.java

描画できるウィンドウは、横675px、縦300pxと指定しました。
また、Flickrから取得する画像のサイズは、縦横75pxです。このサイズの画像がウィンドウに隙間なくぴったりと埋まるためには、ちょうど54枚の画像を必要とする計算になります。
よって、FlickrAPIへパラメータ指定する際にこのサイズにぴったり画像が埋まるように、最大54枚を取得するよう設定しました。
そこで、取得した画像54枚を左上から順にタイル状に埋めていくわけですが、上から何枚目の写真であるかによって、描画する位置を指定するプログラムを書きました。(上記プログラム参照)

2. 描画されている画像をクリアする
　次に、一度描画した画像をクリアする機能について説明します。クリアといっても、実際に行っているのは"強制的に取得した画像を0枚としたこととして、画面上を再描画する"ということです。
この際にポイントとなるのは、".clear()"というメソッドです。

photoImgList.clear();

　photoImgListは、取得した画像の配列をリストとして格納している変数なので、上記のプログラムによって格納している画像のリストをすべて消してしまいます。
　この".clear()"を生かし、FlickrPhotoPanel.javaの中に、photsClear()というメソッドを用意しておきます。これを後からCLEARボタンと結びつけるのです。

public void photosClear(){
	//画像のリストデータをここでリセットする。
	photoImgList.clear();
} 

FlickrPhotoPanel.java内に、以下のメソッドをセットしておく

　一方で、CLEARボタンの描画については、以前授業でも登場したJButtonクラスを利用します。後で、このボタンに対応したイベントを発生させることが出来るよう、setActionCommandメソッドを用いて、アクションコマンドを登録しておきます。

clearButton = new JButton("CLEAR");
clearButton.addActionListener(this);
//CLEARボタンにアクションコマンドを登録しておく
clearButton.setActionCommand("CLEAR");

FlickrViewer.java内に、ボタンの描画などをセット

ボタンの描画が完了したら、CLEARボタンが押された際のイベントを設定します。

public void actionPerformed(ActionEvent e){
    //どのボタンが押されたかを確認する
    String cmd = e.getActionCommand();
    //もしCLEARボタンが押されていたら、以下を実行
    if(cmd.equals("CLEAR")){
        //先ほど作成したphotsClear()メソッドを呼び出して画像の配列リストをクリアする
        this.flickrPhotoPanel.photosClear();
    }else{
        ここでは省略
    }
    //セットした画像のリストデータに基づいて再描画する。
    this.flickrPhotoPanel.repaint();
}

FlickrViewer.java内に、CLEARボタンのイベントをセット

これで、クリアボタンが上手く動きます。ちなみに、改めて検索する場合に再描画するときも"photoImgList.clear();"を用いて一度画像の配列を空にしています。

3.撮影年指定部分の実装について
　続いて、左上のフォームで撮影年を指定する部分の実装について説明します。
フォームは、以下のようにJTextFieldを用いて作成し、描画しています。

takenYear = new JTextField("ここに撮影年を指定");

FlickrViewer.java内に、撮影年を指定するフォームをセット

デバッグした時点でフォームが出るだけでは、何を入力してよいものかわからないため、デフォルトで「ここに撮影年を指定」という文字がフォームに入るように指定しておきます。

デフォルトで、フォームの説明文を表示する

ウィンドウの立ち上げから、タグのみをフォームに入れて画像の取得を行うユーザーもいると想定されるため、画像を検索する際のイベント処理は、以下のように条件分岐しました。

public void actionPerformed(ActionEvent e){
    String cmd = e.getActionCommand();
    if(cmd.equals("CLEAR")){
        //CLEARボタンを押した際のイベント処理
    }else{
        //撮影年を入力するフォームの中の文字列を取得
        String year = takenYear.getText();
        //"撮影年フォームの中が空"または、"defaultの文字列"であるとき
        if(year.equals("") || year.equals("ここに撮影年を指定")){
            撮影年を指定しない際のイベントについて
        }else{//撮影年が入力されているとき
            撮影年を指定した際のイベントについて
        }
    }
}

撮影年が指定されていない際と、指定した際では、FlickrAPIに問い合わせるURLが異なります。
指定しない際は、撮影年フォームの文字列内容は無視し、タグ入力フォームに記入された文字列のみをパラメータとしてURLに組み込みます。

String keyword = addrField.getText();
String request2flickr = new String(
"http://flickr.com/services/rest/?method=flickr.photos.search&per_page=54&api_key="+ 
flickrApiKey +
"&tags="+
keyword);
this.flickrREST.sendRequestAndSetObj(request2flickr);

撮影年が指定されていない際のイベント処理

撮影年が指定されている時は、入力された値を、max_taken_date,min_taken_dateに引き渡し、パラメータとしてURLを作成します。

String keyword = addrField.getText();
String request2flickr = new String(
"http://flickr.com/services/rest/?method=flickr.photos.search&per_page=54&api_key="+ 
flickrApiKey +
"&tags="+
keyword +
"&max_taken_date="+
year + "-12-31 23:59:59" +
"&min_taken_date=" +
year + "-01-01 00:00:00");
this.flickrREST.sendRequestAndSetObj(request2flickr);

撮影年を指定した際のイベント処理

4.ウィンドウレイアウトの実装について
　ウィンドウレイアウトは、先日提出した断面図通りに作成しました。

ウィンドウレイアウトの断面図

//FlickrPhotoPanelインスタンスを生成
this.flickrPhotoPanel = new FlickrPhotoPanel();

//JPanelインスタンスを生成。
//topContainerの中身について
JPanel topContainer = new JPanel();
    topContainer.setLayout(new GridLayout(1,2));
    topContainer.add(takenYear);
    topContainer.add(clearButton);

//bottomContainerの中身について
JPanel bottomContainer = new JPanel();
    bottomContainer.setLayout(new BorderLayout());
    bottomContainer.add(addrField, BorderLayout.NORTH);
    bottomContainer.add(this.flickrPhotoPanel, BorderLayout.CENTER);

//topContainerとbottomContainerをBorderLayoutで上下に配置
this.getContentPane().add(topContainer, BorderLayout.NORTH );
this.getContentPane().add(bottomContainer, BorderLayout.CENTER );

レイアウトのコードについて

topContainerの中は、GridLayoutを用いることで、要素を横並びに表示しました。あとは、BorderLayoutを用いて上下に配置しました。


以上が、私が最終課題として制作した改造FlickrViewerです。長くなりましたが、よろしくお願いします。

おととい、プロダクトデザインを専攻している友人とSFCで会い、彼のWeb制作を手伝いました。
決して僕がWebを作成するのではなく、作るのは彼であって、
僕はあくまでもそのサポートをするという感じでした。

"Webをつくる"という言葉でひとくくりに考えられがちなのですが、
本当にWebを作れる人（プロ）というのは、言ってみれば英語も喋れてイタリア語もフランス語もドイツ語も流暢にしゃべれるということなので、Web制作において、僕自身もまだかろうじてぎこちない英語がしゃべれるくらいだと思っています。

その中で、Webを作成しようとしている彼に、何をどういった順番で教えればよいのか、説明すればよいのかを選択することは非常に難しいことでした。

3時間あまり、htmlとCSSのみを用いて、丁寧に説明して、以下のようなサイトができました。

画像をクリックして拡大

重点においたのは、htmlとCSSの関係を理解してもらうことと、デザインレイアウトをhtmlとCSSでどう実現するのかということです。
多少、型にはめた所もありますが、彼に驚く程吸収力があったため、教えた僕自身も満足のいく感じになったと思います。

実は、彼のサイトは様々なプロダクトのHow toを紹介していくものです。
おそらくHow toを人に伝えるプロセスの中で、自分自身の理解も深めるという意図があると思うのですが、僕にとってWebサイトのHow toをどうしたら人に伝えられるのか、理解してもらえるのかについて考えることは、自分自身のプレゼン能力や思考プロセス、そもそものWebのスキルを鍛えるのに良いトレーニングになります。
上記画像は、レゴブロックの説明書ですが、この説明書は本当にすごい。
言葉がなく、どの国の子供でも共通の説明書で組み立てることが出来るのだから。

将来こういったものを作れる人間になれたらと思います。

今月末には、野球の早慶戦があります。
昨年も春・秋と見に行きました。

みなさんは、早稲田大学の野球部のユニフォームに使われている文字に注目したことはあるでしょうか？！

よく見ると、うねうねして特殊な感じがするし、ポスターやイベントで使いたくてもこのようなフォントを見つけることができません。。。

唯一、野球専門店キトウスポーツさんのHPにて、このフォントが紹介されていました。「608早稲田型」という名前がつけられています。

画像：野球専門店キトウスポーツより転載

いつか、どこかで役に立つであろうという期待を持ちつつ、上部画像を元に、イラストレーターを使って、早稲田大学野球部の文字フォントをトレースしてみました。（ついでに慶應野球部もトレースしました。）


Ageの後輩とかで、もし使いたいことがあったら連絡してください☆

昨日、今年で十年のつきあいになる（ということを数えてビックリ）東大の先輩から、上記の言葉と共にオンライン記事を紹介していただきました。

「うぉ英語か。。。」と思い、朝になるまで"後読み"状態にしていたのですが、簡単な英語（少しWebをかじっていて、サービス名も知っていたこともあり）だったので、感想でも書こうと思います。

僕は、今ビジネスとかまったくわからない（I don't have business acumen...w）のですが、
DesignerでありHackerである必要性は以前から強く感じていました。僕はどちらも極めているわけではないし、そういった人たちがいるフィールドでビジネスをしていないので、これが確かな意見なのかはわかりません。
ただ、Webというメディアを通して自分やチームが"作りたいもの"を妥協せずに本当に作り上げるには、絶対にDesignerでありHackerである人が必要になると思います。

DesignerとHackerという関係性ではありませんが、
この記事を紹介してくれた東大の先輩も、Ageで代表をしていた江口もWebというものを理解し、チラシやパンフレットの制作過程、広報やブランディングなども大変心得ていました。きっと、そういった分野にチャレンジしたり、勉強したのだと思います。
僕は彼らと一緒に何かをする際にWebを作ったり、ビラやポスターを作ることが多かったのですが、その中でリーダーと呼ばれる彼ら（最終的な決断をする人）が自分の作業領域の理解をしてくれていることに大きな安心感（作業のしやすさみたいな感覚）を感じていました。
逆に言えば、僕自身はもう少し、彼らの仕事や考え方について歩み寄らなければいけなかったかもしれません。

この経験と、この記事を読んで、
何かを興したり成し遂げる際には、与えられた役割をこなすための専門的なスキルを上げると同時に、仲間がこなしている役割について理解するスキルを上げることも大変重要だと、改めて感じます。

それが、共に作り上げるもののクオリティ上げたり、スピードを促進させたり、自分自身の仕事を楽にすることにつながると思うのです。
それができているチームや事業には、魅力があり、自然と協力したい人や、投資家が集まってくる。そういうことではないかと何となく思いました。

movabletypeをCMSとして現在Webサイトを使っているのですが、
サイトをにぎやかに見せるために写真や画像を多く使いたいと思い、エントリーの画像の使用有無で条件分岐をさせるスクリプトを書きました。

上記画像のように、ブログ内に写真が使われているときと、使われていないときで、吐き出すhtmlを変化させるかつ、自動的にエントリー内の画像を読み込んで表示させています。

ここで、使用しているのは、以下のようなスクリプトです。

//▼予め、画像を使用しているエントリーに名前をつける変数をセット
<MTSetVarBlock name="img"><MTEntryAssets type="image">photo</MTEntryAssets></MTSetVarBlock>
<$mt:EntryTrackbackData$>
<div class="blog_list_body">
<h3 class="list_title list_h3_info"><a href="<$mt:EntryPermalink$>"><$mt:EntryTitle$></a><$mt:EntryDate format="%x"$></h3>

//▼もしエントリー内で画像を使っていたら以下を読み込み
<mt:If name="img" like="photo">
<MTEntryAssets type="image" lastn="1">//エントリー内の画像で、上から１番目の物を取得する。
//▽<$MTAssetThumbnailURL width="100"$>が、取得した画像のURLパス
<p class="list_photo"><a href="<$MTEntryPermalink$>" title="<$MTEntryTitle$>"><img src="<$MTAssetThumbnailURL width="100"$>" alt="<$MTEntryTitle$>" /></a></p>
<div class="list_photo_summary">
<p><$MTEntryExcerpt$>...</p>
<ul class="list_category">
<mt:IfArchiveTypeEnabled archive_type="Category">
<mt:If tag="EntryCategories">
<li><mt:EntryCategories glue='</li><li>'><a href="<$mt:CategoryArchiveLink$>" rel="tag"><$mt:CategoryLabel$></a></mt:EntryCategories></li>
</mt:If>
</mt:IfArchiveTypeEnabled>
</ul>
</div><!--list_photo_summary-->
</div><!--blog_list_body-->
</MTEntryAssets>
//▲ここまでが、エントリーに画像が使われている場合に読み込むスクリプト

<mt:Else>

//▼エントリー内に画像が使われていない場合は、以下を読み込み
<p><$MTEntryExcerpt$></p>
<ul class="list_category">
<mt:IfArchiveTypeEnabled archive_type="Category">
<mt:If tag="EntryCategories">
<li><mt:EntryCategories glue='</li><li>'><a href="<$mt:CategoryArchiveLink$>" rel="tag"><$mt:CategoryLabel$></a></mt:EntryCategories></li>
</mt:If>
</mt:IfArchiveTypeEnabled>
</ul>
</div><!--blog_list_body-->
//▲ここまでが、エントリーに画像が使われていない場合に読み込むスクリプト
</mt:If>

意外に、すんなりとできました。。。

Webサイトを作っているときに、必ずこだわるようにしているのがアイコンを上手に使うということです。
ユーザーが直感的に求める情報にたどり着けるようにするために、とても重要なことだと感じています。

先日、とあるWebサイトのデザインを描く作業で、海外のサイトからとてもかわいいアイコン素材を見つけました。

使う上での注意事項は、以下を参照してください。
（英語の勉強にもなると思います。。。）

素材ダウンロードページより引用

こちらのサイトよりダウンロードして使うことができますよ★