Blog
2006/01/26のBlog
[ 17:03 ]
[ Web ]
;)
おそくなっちゃったけど
CSS nite vol.04レポート
イベントオルガナイザー兼講演者の鷹野さんのブログ
CSS Nite Vol.4 フォト・ギャラリー
●イベント概要
CSS niteは『Web標準を進める上で重要な役割を果たす「CSS」にスポットを当てるマンスリーイベント』（鷹野さんブログより）ということで、主にスタイルシートに関する解説やTIPSを鷹野さんが説明され、加えてゲストの方が最近のホットな技術や話題を紹介する、というスタイルをとられています。
以下、当日の資料を元に概要をお伝えします。
CSS nite vol.04レポート
イベントオルガナイザー兼講演者の鷹野さんのブログ
CSS Nite Vol.4 フォト・ギャラリー
●イベント概要
CSS niteは『Web標準を進める上で重要な役割を果たす「CSS」にスポットを当てるマンスリーイベント』（鷹野さんブログより）ということで、主にスタイルシートに関する解説やTIPSを鷹野さんが説明され、加えてゲストの方が最近のホットな技術や話題を紹介する、というスタイルをとられています。
以下、当日の資料を元に概要をお伝えします。
;)
●Vol.4 第１部
第1部、たにぐちまことさん（h2o-space）の「Ajax超入門」
最近よく聞かれるようになった
Ajax（エージャックス）について、
概要が知りたい、勉強したい初心者向けに
たにぐちまことさんがやさしく解説してくれました。
まずは、Ajaxを体感できるサイトを実際に紹介。
・ Ajaxを体験できるウェブサイト
Google Maps
有名なグーグルマップも、実はAjaxによるもの。
これまでの地図サービスでは、
地図の上下左右などの隣接地域を見たい場合、
いちいちクリック＆ページ更新が行われていましたが、
グーグルマップスではマウスのドラッグ＆ドロップで
シームレスに閲覧できます。
（その他のAjaxによるサイト例）
check*pad
SCOTTSCHILLER.COM（すべてCSSをAjaxで制御することで演出）
・Ajax=Asynchronous JavaScript + XMLの略称
参考）
Ajaxの新しいところは、
クライアントサイドのスクリプト（Javascriptなど）と、
サーバサイドのスクリプト（PHPなど）を組み合わせている
ところです。
実際はXMLを使っていない場合もあるそうですが・・・。
・Ajaxでネットはどう変わる？
Ajaxの強みとして、たにぐちさんは以下のような点をリスト。
☆FLASHなどのプラグインを使うことなく、動的なサイトつくれる。
☆これまでのHTML資材（送信フォームなど）がそのまま活用。
☆操作性、見た目はこれまでどおり
☆それほど高い技術力は必要ない
・Ajaxを体験しよう
Ajaxを実現するのに必要な環境は、
Webブラウザ＋Webサーバ＋データベース＋PHP＋Javascript
ということで、少々敷居が高いな、と思う人向けに
インストールしたらすぐにAjaxが使える便利なサイトを
紹介していただきました！ただし、マックの人だけですが・・・
MAMP. The abbreviation stands for Macintosh, Apache, Mysql and PHP.
（必要な環境づくりの手順）
１．MAMPをインストールする
http://www.webedition.de/en/serviceCenter/download/mamp.php
ダウンロードしたディスクイメージから、アプリケーションフォルダにファイルをドラッグドロップ。
MAMPアイコンをダブルクリックして起動
２．Firefoxをインストールする
http://www.mozilla-japan.org/products/firefox/
以下、実際に動かすサンプルプログラムファイルについては
http://www.h2o-space.com/にて配布されています。
第1部、たにぐちまことさん（h2o-space）の「Ajax超入門」
最近よく聞かれるようになった
Ajax（エージャックス）について、
概要が知りたい、勉強したい初心者向けに
たにぐちまことさんがやさしく解説してくれました。
まずは、Ajaxを体感できるサイトを実際に紹介。
・ Ajaxを体験できるウェブサイト
Google Maps
有名なグーグルマップも、実はAjaxによるもの。
これまでの地図サービスでは、
地図の上下左右などの隣接地域を見たい場合、
いちいちクリック＆ページ更新が行われていましたが、
グーグルマップスではマウスのドラッグ＆ドロップで
シームレスに閲覧できます。
（その他のAjaxによるサイト例）
check*pad
SCOTTSCHILLER.COM（すべてCSSをAjaxで制御することで演出）
・Ajax=Asynchronous JavaScript + XMLの略称
参考）
Ajaxの新しいところは、
クライアントサイドのスクリプト（Javascriptなど）と、
サーバサイドのスクリプト（PHPなど）を組み合わせている
ところです。
実際はXMLを使っていない場合もあるそうですが・・・。
・Ajaxでネットはどう変わる？
Ajaxの強みとして、たにぐちさんは以下のような点をリスト。
☆FLASHなどのプラグインを使うことなく、動的なサイトつくれる。
☆これまでのHTML資材（送信フォームなど）がそのまま活用。
☆操作性、見た目はこれまでどおり
☆それほど高い技術力は必要ない
・Ajaxを体験しよう
Ajaxを実現するのに必要な環境は、
Webブラウザ＋Webサーバ＋データベース＋PHP＋Javascript
ということで、少々敷居が高いな、と思う人向けに
インストールしたらすぐにAjaxが使える便利なサイトを
紹介していただきました！ただし、マックの人だけですが・・・
MAMP. The abbreviation stands for Macintosh, Apache, Mysql and PHP.
（必要な環境づくりの手順）
１．MAMPをインストールする
http://www.webedition.de/en/serviceCenter/download/mamp.php
ダウンロードしたディスクイメージから、アプリケーションフォルダにファイルをドラッグドロップ。
MAMPアイコンをダブルクリックして起動
２．Firefoxをインストールする
http://www.mozilla-japan.org/products/firefox/
以下、実際に動かすサンプルプログラムファイルについては
http://www.h2o-space.com/にて配布されています。
;)
●Vol.4 第２部
第2部、鷹野雅弘さんの「フォントサイズとスタイルシート切り替え」
今回は、Weｂデザイナーなら誰もが頭を悩ます、
「フォントサイズ」について。
まずは、そもそもフォントサイズはどうあるべきか？という
ところからの確認です。
基本思想：ユーザー視点から考えると、身近な身近なアクセシビリティ問題として、文字サイズの変更は必要不可欠
しかし、実際はフォントサイズの指定に際しては、
[キーワード指定]：xx-small、x-small、small、medium、large、x-large、xx-large。CSS 1では、各キーワード間の倍率が1.5倍、CSS 2では1.2倍変更。そのため、WinIE 5.xや互換モードでは、キーワード間のジャンプ率（大きさの比率）のバランスが異なる。
[%/em/ex]：emも%も、親要素に対しての比率になる。親要素を対象とするため、乗算されてしまう。
[ピクセル指定]：pxコントロールしやすいが、（12px は12px）WinIE ではテキストズームできない。
・・・とそれぞれ一長一短。
現状に即したまとめとしては、
「WinIEで、テキストズームできればベスト。
しかし、アクセシビリティを考えるといただけない。
問題は残るが、かけ合わせ問題のあるemや％に比べ、
キーワード指定の方が使いやすいのではないか」というところをおとしどころに、
実際の対策を提案してくださいました。
対策１：キーワード指定
キーワード指定：CSS Hack でクロスブラウザに対応させる
p{
font-size:x-small; /* IE4/5 用 */
voice-family:"\"}"";
voice-family:inherit;
font-size:small; /* モダンブラウザ用 */
}
html>p {font-size:small;} /* Be kind to Opera */
ピクセル指定：文字サイズを切り替えるための、明示的なボタンを画面上に配置させることで対応
YOMIURI ONLINE
http://www.yomiuri.co.jp/
文字サイズ可変
DELL
www.dell.co.jp/
とやまウェブ
http://toyamaweb.net/text/000145L.html
対策２：ブラウザからスタイルシートを切り替えることで対応
Firefoxで、CYBER@GARDENにアクセス。
http://www.cybergarden.net/
［表示］メニューの［スタイルシート］を開くと、
［標準スタイルシート］にチェックがついてるが、その他に、［left-sidebar］［non-fixed］［simpler］がある。
［left-sidebar］を選択すると、サイドバーが左側に移動、
［non-fixed］を選択すると、ウインドウサイズに応じて横幅が可変に、［simpler］を選択すると、装飾要素が排除されたシンプルな状態に、と、それぞれ変更される。
FirefoxおよびNetscape、Operaでは、代替スタイルシートを用意しておくとメニューからスタイルシートを切り替えることができる。
セミナーでは、この後実際にスタイルシートを切り替えるためのコードの書き方と、javascriptの入手法まで紹介。
Style Sheet Switcher
http://www.alistapart.com/articles/alternate/
（Paul Sowden）
*JavaScript ファイルをダウンロードして、リンクさせる
詳細は、参考資料からのリンクをご参照のこと。
http://cssnite.jp/vol4/form.html
（資料）
CSS Nite Vol.4フォローアップ（1）
第2部（鷹野さん）の資料
http://cssnite.jp/vol4/form.html
CSS Nite Vol.4フォローアップ（2）
第1部（たにぐちまことさん）の資料
http://www.h2o-space.com/
の「プレゼン資料」「配布資料」よりDLできます。
pdfからは紹介されたサイトへのリンクが！ありがたい。
無料というのが信じられないほど、
懇切丁寧、充実したセミナーでした。
なにより、初参加にもかかわらず、
抽選ですばらしいテクストをいただいてしまった！！
勉強せねば！
CSSプロフェッショナル・スタイル―世界の「最先端」事例に学ぶ
次回もぜひ参加させていただきたいです。
第2部、鷹野雅弘さんの「フォントサイズとスタイルシート切り替え」
今回は、Weｂデザイナーなら誰もが頭を悩ます、
「フォントサイズ」について。
まずは、そもそもフォントサイズはどうあるべきか？という
ところからの確認です。
基本思想：ユーザー視点から考えると、身近な身近なアクセシビリティ問題として、文字サイズの変更は必要不可欠
しかし、実際はフォントサイズの指定に際しては、
[キーワード指定]：xx-small、x-small、small、medium、large、x-large、xx-large。CSS 1では、各キーワード間の倍率が1.5倍、CSS 2では1.2倍変更。そのため、WinIE 5.xや互換モードでは、キーワード間のジャンプ率（大きさの比率）のバランスが異なる。
[%/em/ex]：emも%も、親要素に対しての比率になる。親要素を対象とするため、乗算されてしまう。
[ピクセル指定]：pxコントロールしやすいが、（12px は12px）WinIE ではテキストズームできない。
・・・とそれぞれ一長一短。
現状に即したまとめとしては、
「WinIEで、テキストズームできればベスト。
しかし、アクセシビリティを考えるといただけない。
問題は残るが、かけ合わせ問題のあるemや％に比べ、
キーワード指定の方が使いやすいのではないか」というところをおとしどころに、
実際の対策を提案してくださいました。
対策１：キーワード指定
キーワード指定：CSS Hack でクロスブラウザに対応させる
p{
font-size:x-small; /* IE4/5 用 */
voice-family:"\"}"";
voice-family:inherit;
font-size:small; /* モダンブラウザ用 */
}
html>p {font-size:small;} /* Be kind to Opera */
ピクセル指定：文字サイズを切り替えるための、明示的なボタンを画面上に配置させることで対応
YOMIURI ONLINE
http://www.yomiuri.co.jp/
文字サイズ可変
DELL
www.dell.co.jp/
とやまウェブ
http://toyamaweb.net/text/000145L.html
対策２：ブラウザからスタイルシートを切り替えることで対応
Firefoxで、CYBER@GARDENにアクセス。
http://www.cybergarden.net/
［表示］メニューの［スタイルシート］を開くと、
［標準スタイルシート］にチェックがついてるが、その他に、［left-sidebar］［non-fixed］［simpler］がある。
［left-sidebar］を選択すると、サイドバーが左側に移動、
［non-fixed］を選択すると、ウインドウサイズに応じて横幅が可変に、［simpler］を選択すると、装飾要素が排除されたシンプルな状態に、と、それぞれ変更される。
FirefoxおよびNetscape、Operaでは、代替スタイルシートを用意しておくとメニューからスタイルシートを切り替えることができる。
セミナーでは、この後実際にスタイルシートを切り替えるためのコードの書き方と、javascriptの入手法まで紹介。
Style Sheet Switcher
http://www.alistapart.com/articles/alternate/
（Paul Sowden）
*JavaScript ファイルをダウンロードして、リンクさせる
詳細は、参考資料からのリンクをご参照のこと。
http://cssnite.jp/vol4/form.html
（資料）
CSS Nite Vol.4フォローアップ（1）
第2部（鷹野さん）の資料
http://cssnite.jp/vol4/form.html
CSS Nite Vol.4フォローアップ（2）
第1部（たにぐちまことさん）の資料
http://www.h2o-space.com/
の「プレゼン資料」「配布資料」よりDLできます。
pdfからは紹介されたサイトへのリンクが！ありがたい。
無料というのが信じられないほど、
懇切丁寧、充実したセミナーでした。
なにより、初参加にもかかわらず、
抽選ですばらしいテクストをいただいてしまった！！
勉強せねば！
CSSプロフェッショナル・スタイル―世界の「最先端」事例に学ぶ
次回もぜひ参加させていただきたいです。
2006/01/24のBlog
[ 10:52 ]
[ まほろば紀行 ]
;)
通路の続き。
いい味だしてます。
いい味だしてます。
;)
ちょうど企画展示では
「ラスカルと世界名作劇場展」が
展示されていました。
か～わいい☆
「ラスカルと世界名作劇場展」が
展示されていました。
か～わいい☆
;)
いよいよ常設展示に入ります。
;)
破れた障子穴からのぞくと・・・？
;)
萬画館正面のハッチは
定時にひらく仕掛け時計。
石ノ森キャラが龍に乗って音楽と共に登場します！！
すげー
きてよかった・・・
定時にひらく仕掛け時計。
石ノ森キャラが龍に乗って音楽と共に登場します！！
すげー
きてよかった・・・
[ 10:45 ]
[ まほろば紀行 ]
;)
;)
ユニークな外観の建物に近づくと
こんどは仮面ライダーがお出迎え
こんどは仮面ライダーがお出迎え
;)
ロッカーはマンガ作品のキャラたちが勢ぞろい！！
;)
わくわくするな～
;)
２階の常設・企画展示は有料なのですが、
展示入り口にいたるまでの
通路にもマンガの一こまや
連続したこまが描かれていて飽きさせません
展示入り口にいたるまでの
通路にもマンガの一こまや
連続したこまが描かれていて飽きさせません
[ 10:40 ]
[ 写真 ]
;)
ちょっとした工夫だけど
たのしいな
たのしいな
[ 00:36 ]
[ 日々・つれづれ ]
ジャーナリスト・カメラマンの吉岡逸夫さんのインタビュー
二度目のエチオピアが人生を変えた
生きてくって
のどに刺さった骨のような
心に刺さった何かを
なんとか飲み込むか
あるいは取り除いてしまうか
その試みの連続上に
あるような気がする
二度目のエチオピアが人生を変えた
生きてくって
のどに刺さった骨のような
心に刺さった何かを
なんとか飲み込むか
あるいは取り除いてしまうか
その試みの連続上に
あるような気がする
2006/01/23のBlog
[ 22:21 ]
[ まほろば紀行 ]
;)
;)
旅館の軒先
干し柿が。
干し柿が。
;)
噴水も凍ってオブジェになる。
[ 22:05 ]
[ まほろば紀行 ]
;)
;)
;)
蕪栗沼マップ。
周辺をぐるっとまわると、
１週徒歩２時間ぐらい。
周辺をぐるっとまわると、
１週徒歩２時間ぐらい。
;)
寒さ厳しく、
いまだ水面は
凍っていました。
いまだ水面は
凍っていました。
;)
雲の白さが
目に眩しい。
目に眩しい。
[ 21:45 ]
[ まほろば紀行 ]
;)
;)
仙南の古い養蚕農家の
家を移築した建物。
軒の高さに驚く。
家を移築した建物。
軒の高さに驚く。
;)
手作りの郷土料理がうまい！
;)
かも鍋に、平茸、舞茸。
ごちそうさまでした。
ごちそうさまでした。
;)
[ 21:19 ]
[ まほろば紀行 ]
;)
年末～正月にかけて
宮城県内をまわる
仙台駅（イルミネーション）
農家民宿＆レストラン
蕪栗沼（ラムサール条約）
石ノ森萬画館
追分温泉
愛宕神社（初詣）
宮城県内をまわる
仙台駅（イルミネーション）
農家民宿＆レストラン
蕪栗沼（ラムサール条約）
石ノ森萬画館
追分温泉
愛宕神社（初詣）
2006/01/20のBlog
[ 14:18 ]
[ 日々・つれづれ ]
;)
うちあわせちゅう
2006/01/19のBlog
[ 14:55 ]
[ 日々・つれづれ ]
大学生のころ、突然飛島に行きたくなった事があった。
休みで暇だったのだが
遊ぶ金もなく。
けど、急に飛島に行きたくなった。
電車、バスと乗り継いで
酒田港の定期連絡船に乗ろうと思った。
港についたのは
おぼえているけど
そこから先には進まなかった。
船便がなかったのか
宿泊する金がなかったのかは
覚えていない。
ただ
もっと自由がほしいと
思う自分に気づいた。
動いてる瞬間、自由を感じた。
それは結局
いまも変わっていないのかもしれない。
休みで暇だったのだが
遊ぶ金もなく。
けど、急に飛島に行きたくなった。
電車、バスと乗り継いで
酒田港の定期連絡船に乗ろうと思った。
港についたのは
おぼえているけど
そこから先には進まなかった。
船便がなかったのか
宿泊する金がなかったのかは
覚えていない。
ただ
もっと自由がほしいと
思う自分に気づいた。
動いてる瞬間、自由を感じた。
それは結局
いまも変わっていないのかもしれない。