その他の最近のブログ記事

山中俊治さんのデザインの骨格を読みました。

この１週間、サイト制作のために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プログラミングについてまとめたいと思います。

無事に大学を卒業し、今春からWebデザイナーとして都内のIT企業に就職しました。
新卒社員として、週末は社内研修合宿に参加し、感じたことや得ることが多かったので、未来の自分のために記事として残したいと思います。

本質から逃げない。

研修では新規事業提案をチームで考え、プレゼンしました。
チームで考えていく中で必要となる技術や知識、姿勢などにおいても様々な学びを得ることができましたが、プレゼン後のフィードバックで「本質から逃げるな」という指摘をされ、ハッとしました。

事業案を考えていく中で、

• 「どうすればお金になるか...」
• 「どうすればユーザが増えるか...」
• 「ターゲットはどこがいいか...」
• 「競合のサービスはこんなのがあって...」

など、なんとなく固まりつつある一つのアイデアのプレゼンに向けて、落ち度のある点や指摘されそうな点をつぶしていく作業に方向性が傾いてしまいました。

もちろん、これらは必ず必要となる議論なのですが、僕たちはこれらを議論してプレゼンできなくもない状態になった上で、最終的に次のような点から再度考え直すことになっていましました。

• 「自分だったら使いたいと思うか」
• 「自分たちが本気になってできるサービスか」
• 「人はなぜサービスを求めるのか」
• 「人は何を幸せと感じるのか」
• 「人はなぜ流行っているサービスを使っているのか」
• 「流行っているサービスを使っている中で、今何を感じているのか」

僕は、「本質から逃げている」という言葉から、以上のような点についてチームで熟慮することが欠けていたのだと感じ、ハッとしました。
本質的な点を熟慮し、方向性や答えを決めて進み始めなかったため、
プレゼンとしてまとまってはいても、どこか気持ちが乗らなかったり、表面的な事柄を寄せ集めたような内容になってしまったのだと思います。

また、事業を提案するからには、自らが身を捧げる心意気でサービスを創り、絶対の自信を持って運営をし続ける覚悟も伝えなくてはいけません。
この点を伝えられなかったのも、結果的に役員の方にGoと言ってもらえなかった理由だと思います。

もう既に数多あるWebサービスの中で、ユーザに新しい体験や感動を与えるサービスを作るためには、本質的な議論をとことんすることが必要不可欠であると強く感じました。

学生から社会人となり１週間ばかりですが、
ここで感じたことを忘れずに努力を重ねていきたいと思います。

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

個人的にredmineを使ってのプロジェクト管理について興味を持ったので、Heroku上に構築してみることにしました。
Ruby on Railsの知識は皆無でしたが、色々と調べるなどして無事にDeployすることができました。

http://d.hatena.ne.jp/alpha_neet/20111027/1319748428を大変参考にさせていただきました。この場を借りて感謝します。。。

環境など

• Mac OS X 10.6.8
• ruby 1.8.7
• redmine 1.2.1
• gem 1.3.7
• rails 2.3.11

rvmのインストール｜複数のバージョンのrubyを管理する。

redmineでは、最新バージョンよりも少し古いRubyを使用しないと上手くいかないということでした。
そこで、rvm(Ruby Version Manager)を使って、複数のバージョンのrubyを用途に合わせて使用できる環境を作ります。

rvmのサイト（http://beginrescueend.com/）にアクセスしてみると、rvmの導入方法が書かれていました。
説明の通りにターミナルを使って、

bash < <(curl -s https://raw.github.com/wayneeseguin/rvm/master/binscripts/rvm-installer)

を実行すると、インストールされます。

これによって、ターミナルで[rvm]コマンドが使えるようになる！・・・と思いきや、上手く動作しなかったので、ターミナルに以下を打ち込んで実行します。

echo '[[ -s "$HOME/.rvm/scripts/rvm" ]] && . "$HOME/.rvm/scripts/rvm" # Load RVM function' >> ~/.bash_profile

さらに続けて以下も実行。

source .bash_profile

これで、やっとのこさrvmコマンドが使えるようになりました。
果たして本当に使えるのか？を確かめるためには、ターミナルで以下のコマンドを実行すればわかります。

type rvm | head -1

=>「rvm is a function」とでれば、無事にrvmが使えるということです！

Rubyのインストール｜rvmを使ってRubyをインストールする。

いよいよ、rvmを使って、Rubyを導入します。ここではRubyの1.8.7バージョンを使うので、ターミナルで実行するrvmコマンドは以下になります。

rvm install 1.8.7

ダウンロード、インストールには多少の時間が必要となります。気長に待ちましょう★

無事に完了したら、PCにdefaultで使うRubyのバージョンを指定しておきます。これにもrvmコマンドを使います。引き続きターミナルで以下を実行してください。

rvm --default use 1.8.7

これで、使用するバージョンの指定は完了。

RubyGemsのバージョンを変更する｜Ruby言語用のパッケージ管理システム

Rubyをインストールすると、自動でRubyGemsというものも導入されています。
Rubyを使い倒すために便利なライブラリやツール群を簡単にインストールや利用、管理してくれるのが、このRubyGemsです。
正式名はRubyGemsですが、基本的には「gem」と呼ばれます。現在（2011/10/30）の最新バージョンは1.8.10なんですが、ここでは1.3.7を使用します。
ターミナルで以下を実行すると、gemのバージョンを確認することが出来ます。

gem -v

自分の場合は、「1.8.10」と出てきてしまい、1.3.7ではなかったため、バージョンを変えないと行けませんでした。
RubyGemsをバージョンダウンするためには、gemを使って「rubygems-update」をインストールしなくてはなりません。以下をターミナルで実行して、このrubygems-updateをインストールします。

gem install -v 1.3.7 rubygems-update

これで、rubygems-updateを使用できます。「-v 1.3.7」で、ダウンしたいgemのバージョンを指定します。
つづいて、rubygems-updateのコマンド「update_rubygems」を使って、gemのバージョンをダウンします。

update_rubygems

ちゃんとgemのバージョンがダウンしたかどうかを、改めて確認します。

gem -v

「1.3.7」と表示されたので、僕の場合はOKでしたが、ここで躓くことがよくあるようです。。。

rails、sqlite3をインストールする

着々と環境が整ってきました。
次にローカルPCへの作業環境の整備とrailsのインストールを行います。
私の場合は、以下の場所に「workspace」というディレクトリを作成し、その中にアプリケーションを入れていくことにしました。

作業環境スペースの例

上記の画像はあくまでも例なので、都合の良い場所にディレクトリを作成すればよいと思います。
それでは、ターミナルを使ってディレクトリを作り、そのディレクトリに入ります。

mkdir workspace
cd workspace

「workspace」ディレクトリに入ったら、次にRailsをインストールします。今回はRailsのバージョンを2.3.11に指定したいので、2.3.11バージョンを指定する形でインストールします。以下をターミナルで実行してください。

gem install rails -v=2.3.11

これで、railsがインストールされました。続いて、データベースに使うsqlite3もインストールします。

gem install sqlite3-ruby

sqliteは、MySQLと同様のデータベース管理システムで、小規模のアプリケーションには十分なものです。
もちろんMySQLも使うことが出来ます。（ここでは、MySQLは使用しませんが・・・）

redmineを作業ディレクトリに入れる。

続いて、redmineをダウンロードしてローカルディレクトリに入れます。
私の場合は、「workspace」ディレクトリの中に個人「projects」ディレクトリを作成し、その中にダウンロードしたzipファイルを入れました。
redmineのzipファイルは下記にアクセスすることで手に入れることが出来ます。

http://rubyforge.org/frs/download.php/75099/redmine-1.2.1.zip

ダウンロードしたファイルをその場所で解凍しておきます。「redmine-1.2.1」という名前のディレクトリができると思います。

database.ymlの設定を行う。

次に、[redmine1.2.1/config/database.yml]にある、database.ymlファイルの中身を編集します。
先ほどsqlite3をインストールしたので、sqlite3を使う旨を設定としてこのdatabase.ymlに書き込みます。

production:
  adapter: sqlite3
  database: db/production.sqlite3

development:
  adapter: sqlite3
  database: db/development.sqlite3

test:
  adapter: sqlite3
  database: db/test.sqlite3

このdatabase.ymlは、Railsアプリにおいてデータベースを設定するためのファイルです。
「production(本番用)」「development(開発用)」、「test(テスト用)」の３種類の設定ができ、実行モードを変えることで、それぞれの設定を切り替えて使うことができます。上記の用に書けば、sqlite3を用いる際の設定としては問題ありません。

bundle installコマンドを使う

Railsではbundle installコマンドを使うことでプロジェクトで必要とされるモジュールを一括でインストールすることができます。
このbundle installコマンドを使うためには、予め以下を実行する必要があります。

gem install bundle

bundle installコマンドでインストールしたいものは、プロジェクトディレクトリの中に「Gemfile」という名前のファイルを作り、編集する必要があります。
以下を実行してGemfileを作り、ターミナル上で編集しましょう。

vim Gemfile

Gemfileに書き込む内容は以下になります。

source 'http://rubygems.org'

gem 'rails', '2.3.11'
gem 'i18n', '0.4.2'
gem 'rubytree'
gem 'coderay', '~>0.9.7'

Gemfileが整った状態で、ターミナルでbundle installコマンドを実行します。

bundle install

どしどしとインストールされるはずです。。。

session_store.rb ファイルを生成する

redmineでセッションデータを安全に扱うための秘密鍵が含まれる config/initializers/session_store.rb ファイルを生成します。
ターミナルで以下を実行して下さい。

rake generate_session_store

これでconfig/initializers/session_store.rb が出来ているはずです。

データベースの更新作業を行う

先ほど設定したデータを基に、データベースの更新作業を行います。以下をターミナルで実行してください。

RAILS_ENV=production rake db:migrate
RAILS_ENV=production rake redmine:load_default_data

実行をすると、

Select language: bg, bs, ca, cs, da, de, el, en, en-GB, es, eu, fa, fi, fr, gl, he, hr, hu, id, it, ja, ko, lt, lv, mk, mn, nl, no, pl, pt, pt-BR, ro, ru, sk, sl, sr, sr-YU, sv, th, tr, uk, vi, zh, zh-TW [en]

と問われるので、「ja」と答えます。ここで、使用言語を設定することになります。

この操作では、database.ymlにおけるproductionの設定に基づいてデータベースを更新しています。
redmine:load_default_dataと指定することで、デフォルトの内容をある程度揃えてデータベースを設定してくれます。

ローカル上で実行してみよう！

いよいよredmineをローカル上で実行してみます。起動させるには、以下のコマンドを使用します。

ruby script/server webrick -e production

私の場合は、「http://0.0.0.0:3000」にアクセスすればローカルでredmineを動かすことが出来ました！やった！

Herokuにデプロイするための準備

Herokuにredmineをあげるために、redmine内のファイル構成をいくつか編集する必要があります。
以下のコマンドを実行して、必要となるディレクトリを作成します。

mkdir tmp/files
mkdir tmp/plugin_assets

さらに作成したディレクトリ内が空であると、gitが上手く機能しないため、dummyファイルを作っておきます。

touch tmp/files/dummy
touch tmp/plugin_assets/dummy

続いて、何個かのファイルをガリガリ編集します。ターミナル上で編集してもよいんですが、私は慣れているエディタで直接編集しました。

lib/redmine/menu_manager.rbを編集

「@last_items_count = 0」の下に、「@childrenHash ||= {}」を追加する。

@last_items_count = 0
@childrenHash ||= {}

lib/redmine/menu_manager.rb内

app/models/attachment.rbを編集

「@@storage_path = Redmine::Configuration['attachments_storage_path'] || "#{RAILS_ROOT}/files"」を書き換える。

@@storage_path = Redmine::Configuration['attachments_storage_path'] || "#{RAILS_ROOT}/files"
@@storage_path = Redmine::Configuration['attachments_storage_path'] || "#{RAILS_ROOT}/tmp/files"

app/models/attachment.rb内

vendor/plugins/engines/lib/engines.rbを編集

「self.public_directory = File.join(RAILS_ROOT, 'public', 'plugin_assets')」を書き換える。

self.public_directory = File.join(RAILS_ROOT, 'public', 'plugin_assets')
self.public_directory = File.join(RAILS_ROOT, 'tmp', 'plugin_assets')

vendor/plugins/engines/lib/engines.rb内

config/environment.rbを編集

「Rails::Initializer.run do |config|」の下にいくつか追加する。

Rails::Initializer.run do |config|
 config.action_controller.session = { 
    :key => "_myapp_session", 
    :secret => "適当な文字列" 
}

config/environment.rb内

.gitignoreを編集

「.gitignore」を以下の内容にする

/.project
/.loadpath
/config/additional_environment.rb
/config/configuration.yml
/config/database.yml
/config/email.yml
/config/initializers/session_store.rb
/coverage
/db/*.db
/db/schema.rb
/files/*
/lib/redmine/scm/adapters/mercurial/redminehelper.pyc
/lib/redmine/scm/adapters/mercurial/redminehelper.pyo
/log/*.log*
/log/mongrel_debug
/public/dispatch.*
/public/plugin_assets
/tmp/cache/*
/tmp/sessions/*
/tmp/sockets/*
/tmp/test/*
/vendor/rails
*.rbc

.gitignore内

heroku上にアプリをつくる

gem install heroku
git init
heroku create 'プロジェクトの名前'

加えて、heroku上のrubyのバージョンも設定しておきます。

heroku stack
heroku stack:migrate bamboo-ree-1.8.7

いよいよheroku上にコミット！！

git add .
git commit -m 'first commit'
git push heroku master
heroku rake db:migrate

これでやっとのこさ、heroku上にredmineが置けました。
ターミナル上で、

heroku open

と実行すれば既定のブラウザでアクセスできます。

プロジェクトマネジメントにredmineがどのくらい使えるかはわかりませんが、無事にredmineを使える状態になりホットしました。

AGESTOCK2011 in TOKYO DOME CITY HALLを見てきました。

高校、大学の友人たちと一緒に、お客さんとして見るAGESTOCK。 昨年もたくさんの友人たちがAGESTOCKに足を運んでくれましたが、運営スタッフであったために、彼らの楽しむ様子や表情を見ることはできませんでした。

今回一番うれしかったのは、わざわざ足を運んでくれた友人たちの、AGESTOCKのステージを見つめる姿が、本当に楽しそうであったことです。

彼らの笑顔、手を挙げて盛り上がる姿や感動で言葉を失う姿に、AGESTOCKが存在する理由や、続いていく理由を感じられました。



そして、もう１つうれしかったこと。



それは、自分が昨年Ageメンバーとして駆け抜けた意味、一緒にAgeを引退した同期のみんなと過ごした時間の意味を再確認できたことです。

久しぶりに会っても、同期のメンバーには頭が下がるというか、
あの時、あの場面でお世話になったとか、ありがとうと言いたくなる気持ちが自然と湧いてきます。AGESTOCK2011のステージを見ていて、昨年のことを色々回想しました。
いい仲間を持ったのだと、改めて感じるのです。



Ageでの生活が終わり、時間が出来ると新しい時間が増えます。



これまであまり絡むことの少なかった身近な人々との時間、新しいことを学び、打ち込む時間。
Age2010が終わってから、Ageとは違う場所で大きな力を注ぎ、惜しみない努力をし、大きな成果をあげる学生を数多く見てきました。
大学生の可能性にこだわり、挑戦してきた自分が、多くの同世代に大学生の可能性や挑戦する姿を見せつけられる。。。
そんなこともしばしばでした。

自分たちがAgeStock2010で伝えようとしたこと、
後輩たちからAGESTOCK2011で伝えられたこと。

それを胸を張って表現できる、体現している人間になるべく、
夢を持って、ひたすらに努力を重ねていかなければ、、、
AGESTOCK2011が改めて感じさせてくれました。

これでまた１年間がんばれそうです！
AGESTOCK2011の皆さん、本当にありがとう！
本当に本当に、最高でした！

最終課題に向けて、自分がつくろうとしているFlickrViewerについて考えました。

正面図

私は上図のようなFlickrViewerを作ります。
前回とは異なり、写真はタイル状に出現し、
検索した写真をクリアするボタン、写真の撮影年を指定するフォームを上部に設置します。

断面図

まず、画面のレイアウトについて考えます。

画像をクリックして拡大できます。

以前、HTMLViewerを改造した際に用いたレイアウトを応用し、以前作成したFlickrViewerに、画面をクリアするボタン、撮影年を指定するフォームを新たに配置できるようにします。
BorderLayoutに加えて、上部ではGridLayoutを用います。

画像をクリックして拡大できます。

撮影年を指定する部分の実装については、JTextFieldを用いて、新たに撮影年を入力する部品を作成し、エンターキーが押された際のイベントを指定している、「actionPerformed()」クラスの中に入力された値を受け取る変数をつくり、その値を検索URLのパラメータに追加するようにします。
撮影年のフォーム内が空であっても検索ができるように、ここのイベント処理をif文で分岐させるようにします。

タイル状に画像を表示させることについては、「FlickrPhotoPanelクラス」の中にあるg.drawImageに受け渡すx,y座標の値をfor文を使って枚数順に綺麗に並べるようにします。

右上の画面をクリアボタンについては、現時点でどのようにすれば実装できるかはっきりしていません。以前作成したflickrViewerでは、検索を新たに行うと画面がリセットされず、追加される形で写真が表示されていました。g.clearRect()を用いて画面をクリアすればよいのか？！・・・。もう少し検討が必要です。
以上、よろしくお願いします。

メディア技術基礎 （ネットワーク・画像処理） 第3回課題をこちらに提出させていただきます。

本課題においては、Flickrというプロジェクトを作成し、その中にクラスを４つ作成しました。

今回はプロジェクトの中にクラスを４つ作成した。

作成したそれぞれの.javaファイルの中に、レジュメに記載されているプログラムを書きこんでいきました。

デバックをして表示されるウィンドウ

デバッグをすると、上のようなウィンドウが表示され、ウィンドウ上部の入力フォームに文字列を入力して[Enter]キーを押すことで、指定した文字列のタグがついた画像を表示させることができました。

タグ「Jubilo」のついた画像を取得

個人的に好きなサッカーチームの名前で検索しました。私が小学生のころに活躍していたスキラッチ選手の画像が出てきて驚きました。。。
今回の課題では、４つのクラスを作成しましたが、指定したプログラムが何を意味するのか、まだわからない点が多いです。
今後このFlickrViewerを改造していくので細かい部分をできるだけ理解するようにしたいです。

メディア技術基礎（ネットワーク・画像処理）の第１回課題について、こちらに提出させていただきます。

【▼目次】

1. プログラム一覧
2. プログラムの解説
3. 実行画面
4. クラス・インスタンス、イベントとイベントリスナーの概念解説
5. おわりに

プログラム一覧

※PDFデータでも見ることが出来ます。

////////////////////////////////////////////////////////////////////////////////////////////////
//
//		▽インポートデータ
//
////////////////////////////////////////////////////////////////////////////////////////////////
import java.awt.*;
import java.awt.event.*;// ActionListenerのインポート
import javax.swing.*;//JFrameのインポート
import javax.swing.event.*;//HyperlinkListenerのインポート
import javax.swing.JButton;//JButtonのインポート
////////////////////////////////////////////////////////////////////////////////////////////////
//
//		▽HTMLViewerクラス
//
////////////////////////////////////////////////////////////////////////////////////////////////
public class HTMLViewer implements ActionListener, HyperlinkListener{
	
	JTextField addrField;//URLを入力してもらう部品
	JEditorPane htmlPane;//HTMLを表示してもらう部品
	JButton homeButton;//ホームボタン部品
	JButton sfcButton;//SFCボタン部品
	
	public HTMLViewer(){
		//部品としてのウィンドウを作成：newする JFrameという部品のコンストラクタを呼び出す。
		JFrame frame = new JFrame("Simple HTML Viewer");//JFrameのオブジェクトを作成する
			frame.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);
			frame.addWindowListener(
					new WindowAdapter() {
						public void windowClosed(WindowEvent e){
							System.exit(0);
						}
					}
			);
		////////////////////////////////////////////////////////////////////////////////////////
		//
		//		▽URL入力フォームについて
		//
		////////////////////////////////////////////////////////////////////////////////////////
			
		addrField = new JTextField("http://");//テキストフィールドオブジェクトの作成。
			addrField.addActionListener(this);
			
		////////////////////////////////////////////////////////////////////////////////////////
		//
		//		▽Webページ表示画面について
		//	
		////////////////////////////////////////////////////////////////////////////////////////
			
		htmlPane = new JEditorPane();//JEditorPaneオブジェクトの作成
			htmlPane.setEditable(false);
			htmlPane.setContentType("text/html");
			htmlPane.addHyperlinkListener(this);//クリックされたら知らせるよう設定
		
		////////////////////////////////////////////////////////////////////////////////////////
		//
		//		▽ホームボタンとSFCボタンの作成と、ボタンを押した時に呼び出す仕事の設定
		//	
		////////////////////////////////////////////////////////////////////////////////////////
			
		homeButton = new JButton("HOME");//JButtonオブジェクトの作成
			homeButton.addActionListener(new HomeActionListener());
		sfcButton = new JButton("SFC");//JButtonオブジェクトの作成
			sfcButton.addActionListener(new sfcActionListener());
		
		////////////////////////////////////////////////////////////////////////////////////////
		//
		//		▽オブジェクトの描画、レイアウトなどについて
		//	
		////////////////////////////////////////////////////////////////////////////////////////
			
		
		JPanel topContainer = new JPanel();
			topContainer.setLayout(new GridLayout(1,2));
			topContainer.add(homeButton);
			topContainer.add(sfcButton);
		
		JPanel bottomContainer = new JPanel();
			bottomContainer.setLayout(new BorderLayout());
			bottomContainer.add(addrField, BorderLayout.NORTH);
			bottomContainer.add(new JScrollPane(htmlPane), BorderLayout.CENTER);
		
		frame.getContentPane().add(topContainer, BorderLayout.NORTH );
		frame.getContentPane().add(bottomContainer, BorderLayout.CENTER );
		
		frame.setSize(640,480);
		frame.setVisible(true);//ウィンドウが見えるようにセットする
	}
	
	////////////////////////////////////////////////////////////////////////////////////////
	//
	//		▽URLを入力し、エンターキーが押されたら実行する仕事について
	//	
	////////////////////////////////////////////////////////////////////////////////////////
	
	public void actionPerformed(ActionEvent e){
		String url = addrField.getText();
		System.out.println(url);
		try{
			htmlPane.setPage(url);
		}catch(Exception err){
			System.out.println("無効なURLを指定していませんか？");
		}
	}

	////////////////////////////////////////////////////////////////////////////////////////
	//
	//		▽ホームボタン、SFCボタンそれぞれが押されたら実行される仕事について
	//	
	////////////////////////////////////////////////////////////////////////////////////////
	
	public class HomeActionListener implements ActionListener {
        public void actionPerformed(ActionEvent e) {
        	String url = "http://yahoo.co.jp/";
        	System.out.println(url);
        	try{
    			htmlPane.setPage(url);
    		}catch(Exception err){
    			System.out.println("ページジャンプに失敗しました。");
    		}
        }
    }

	public class sfcActionListener implements ActionListener {
        public void actionPerformed(ActionEvent e) {
        	String url = "http://www.sfc.keio.ac.jp/";
        	System.out.println(url);
        	try{
    			htmlPane.setPage(url);
    		}catch(Exception err){
    			System.out.println("ページジャンプに失敗しました。");
    		}
        }
    }

	////////////////////////////////////////////////////////////////////////////////////////
	//
	//		▽Webページ内のリンクについて
	//	
	////////////////////////////////////////////////////////////////////////////////////////
	
	public void hyperlinkUpdate(HyperlinkEvent e){
		if(e.getEventType() != HyperlinkEvent.EventType.ACTIVATED){
			return;
		}
			String url = e.getURL().toString();//どのリンクがクリックされたかを取得
			addrField.setText(url);//取得した文字列をurl変数に格納する
			try{
				htmlPane.setPage(url);
			}catch(Exception err){
				
			}
		
	}
	
	////////////////////////////////////////////////////////////////////////////////////////
	//
	//		▽プログラムの実行処理
	//	
	////////////////////////////////////////////////////////////////////////////////////////
	
	public static void main(String[] args){//全てのプログラムが始まる所ところ
		HTMLViewer my_viewer = new HTMLViewer();//自分で設計した部品を１つ生成：newする
	}
}

プログラムの解説

▽ホームボタンとSFCボタンの作成

まず、ソース上部でJButtonクラスをインポートします。

import javax.swing.JButton;

そして、HTMLViewerクラスのはじめに、新たにつくるホームボタンと、SFCボタンの宣言を行います。

public class HTMLViewer implements ActionListener, HyperlinkListener{
        JButton homeButton;//ホームボタン部品
        JButton sfcButton;//SFCボタン部品

宣言を行ったら、JButtonをnewして、二つのボタンを作成します。
青字の部分に、文字列を指定することで、その文字列をボタンに描画することができます。

homeButton = new JButton("HOME");//JButtonオブジェクトの作成
sfcButton = new JButton("SFC");//JButtonオブジェクトの作成

▽ボタンをクリックしたときのイベントの設定

ボタンを押したら、指定したURLにアクセスしてページが表示されるように設定をします。
先ほど設定したhomeButton,sfcButtonに、addActionListenerメソッド追加し、ボタンがActionEventを受け取ることができるようにします。

homeButton.addActionListener(new HomeActionListener());
sfcButton.addActionListener(new sfcActionListener());

これで、ホームボタンを押した時には、HomeActionListener()を、SFCボタンを押した時には、sfcActionListener()を呼び出すことが出来るようになったので、呼び出すクラスをそれぞれ定義しておきます。

public class HomeActionListener implements ActionListener {
        public void actionPerformed(ActionEvent e) {
        	String url = "http://yahoo.co.jp/";
        	System.out.println(url);
        	try{
    			htmlPane.setPage(url);
    		}catch(Exception err){
    			System.out.println("ページジャンプに失敗しました。");
    		}
        }
}

同様に、SFCボタンには、urlをSFCのホームページのURLを渡して表示させるようにしました。

▽オブジェクトの描画、レイアウトなどについて

次に、ボタンの描画、レイアウトについてのプログラムについて解説します。
JPanelオブジェクトを２つ作成し、
１つはボタンをグリッドレイアウトで横並びに２つ配置するコンテナ、
もう１つは、URL入力フォームとページを描画するフレームを配置するコンテナです。
配置の概念図（これで伝わるかは微妙ですが。。。）は以下のようになります。

JPanel topContainer = new JPanel();
	topContainer.setLayout(new GridLayout(1,2));
	topContainer.add(homeButton);
	topContainer.add(sfcButton);
		
JPanel bottomContainer = new JPanel();
	bottomContainer.setLayout(new BorderLayout());
	bottomContainer.add(addrField, BorderLayout.NORTH);
	bottomContainer.add(new JScrollPane(htmlPane), BorderLayout.CENTER);

topContainerではGridLayoutを用いました。1行2列のレイアウトで、２つのボタンを配置しました。
bottomContainerではBorderLayoutを用いました。NORTHにURL入力フォームを、CENTERにページ表示フレームを配置しました。

最後に、topContainerと、bottomContainerをContentPaneオブジェクトに配置します。

frame.getContentPane().add(topContainer, BorderLayout.NORTH );
frame.getContentPane().add(bottomContainer, BorderLayout.CENTER );

これで、ボタン、URL入力フォーム、ページ表示画面の描画、レイアウトを設定しました。

実行画面

▲初期実行画面

▲ホームボタン実行画面

▲SFCボタン実行画面

▲URL入力&エンターキー実行画面

クラス・インスタンス、イベントとイベントリスナーの概念解説

▼クラス・インスタンスの概念解説

クラスは、部品の設計図、インスタンスは、その設計図を基に作られた実際の部品を指します。インスタンスを作成する際には、引数を設定することが出来、それによって同じクラスから作成したインスタンスでも、中身のデータを異なるものにすることができます。
※本プログラムでは、ボタンを押された際の実行イベントについてクラスをボタンの数だけ作成しました。しかし、これを一つにして、インスタンス生成時に引数を渡すことで異なるURLを指定することが出来たと思います。

▼イベントとイベントリスナーの概念解説

イベントは、

• ボタンが押された
• エンターキーが押された
• 文字列が入力された
etc...

何かが起きることを言います。

イベントリスナーは、あるイベントが起こった時にその内容を受け取るオブジェクトです。
※まだ、マウスイベントやテキストイベントについては、どのように動作するのかイメージがつかめていません。

おわりに

特に骨が折れたのは、作成したオブジェクトをどのように描画、レイアウトをするかでした。
JPanelオブジェクトを使うことになったのですが、JPanelとcontentPaneの概念を理解するのにまず苦戦しました。borderLayoutだけで、描画しようとするとどうしてもレイアウトが微妙なものになってしまうので、JPanelを使いました。borderLayout以外にもgridLayoutを用いたり組み合わせることで、なんとか自分の中で納得のいく描画、レイアウトを実現できました。
イベント部分の実装については、これがベストのプログラムだとは思っていません。クラスに引数をうまく渡すことでもっとシンプルにボタンを押した際のイベントを実装できたと思います。