KICKS Web

In My Circle

せんがんが、よしなしごとをつづります。

Web Designingに寄稿しました

『Web Desiging』2月号の特集「HTML5を始めよう−今年こそ脱4.01! これからのHTML+CSSの書き方、考え方−」に寄稿しました。

「HTML5」は、最初に複数のブラウザがサポートした仕様が「canvas要素」だったために動的なコンテンツ実現のための仕様として注目されましたが、実際には従来のHTMLコーディングのマークアップ記法をすべて刷新するものであり、今後のマークアップの基本となるものです。この特集では、やがて来るHTML5が当たり前の時代に備えて、HTML5の「本思想」「基本仕様」「マークアップ」などについて解説していきます。

  • INTRODUCTION(総論)_HTML5が制作環境に与える影響
  • 01_HTML5からのページ記述の基本記法
  • 02_HTML5のマークアップはアウトラインの理解から
  • 03_これだけは押さえたいHTML5の新要素、HTML4との違い
  • 04_CSS3の7つの主要な機能を理解する
  • 05_動的コンテンツを実現するHTML5
  • Column_HTML5とWebアクセシビリティ

私が担当したのは01、02、03です。年末のバタバタの中でがんばって書きました。

カテゴリ:In My Circle, 告知, 書いた Posted by 千貫りこ on 2012年1月18日

『a会』スピンオフ勉強会Vol.1

昨年4月、東京近郊に住むWeb業界の人たちで集う会を発足しました。名前は「a(エー)会」。
メンバーは、私の講座に参加してくださった方、さらにそこから広がった人の輪、で構成されてます。昨年は2回開催されたのですが、これがなかなか盛況で。
年齢も立場も仕事へのかかわり方もバラバラなみなさんですが、きっとモチベーションの高い人たちが集結してるから楽しいのでしょう。

まだ2回しか開催してませんが、各回なんと20名前後の参加がありました。これだけ人数がいるとその場ではあんまりゆっくり交流できなかったはずなのですが、本編以外で個人的に会ったりしている人もいるようで。しかも、メンバー間でお仕事も発生しているようで!スバラシイことですね☆
2012年はますます盛り上がっていくといいなーと思ってます。

さて、そんなa会の最年長(うっ)メンバー5名で、1/8に勉強会を開きました。今日はそのレポートを。

テーマは「グループワークにおける問題点の洗い出しとその解決方法」

私以外のメンバーはすべて組織内で仕事をしているため、彼らにとって今もっともホットな内容を第一回目のテーマとしました。
モデレータさんからのメッセージは以下のとおり。

自分一人でサイトを作る場合と違い、複数人が関わる場合には、様々な問題点が出てきます。
皆さんが日ごろ直面する問題や抱えている問題にはどんなものがあるのか、経験談を出し合いましょう。ついでに愚痴っちゃう勢いでもいいと思います。
同じウェブ制作者でも職場や立場などが異なる人の生の声は興味深いと思われます。
出てきた問題点について、あーだこーだ話しあって考えているうちに、何か気付くことがあるかもしれません。
グループワークにおいて気をつけるべきポイントや、解決方法が見つかれば、万々歳。
今回のテーマは、「新しい技術の勉強会」というようなものではなく、日常業務に関わる身近なものなので、積極的に事例や意見を出し合えればいいなと思います。

当日までの宿題

各自、以下について考えをまとめてくることにしました。

【A】グループワークにおいて困った経験談

「○○で困った」「○○なことがあった」「○○がやりにくい」「今○○で悩んでいる」など何でも。

【B】グループワークをしやすくするための、参考事例

例えば「職場で取り組んでいること」「ウェブや本などで見かけた手法」など、参考になりそうなことをピックアップする。

当日の流れ

当日は全員が順番に宿題を発表し、ひとり終わるごとにみんなでディスカッションしました。
おもしろかったのは、メンバーが発表する【A】が大体同じような内容になること。勤め先の業種も、携わっているサイトの規模や種類も、メンバーの雇用形態もまちまちなのですが、多少の違いこそあれ同じような悩みを抱えているものなんですねー。

たとえば…

  • プロジェクトメンバー不在時のフォロー体制が中途半端
  • 制作物の品質が、担当者によってばらつく
  • ソースの記述方法などがルール化されていないため、ちょっとした修正作業などにかかる工数が大きい
  • 責任の所在があいまい
  • それぞれが自分の仕事で忙殺されているため、進捗の共有などがおろそか

【B】については、実際にためした方法や便利なツール、参考になる書籍などを紹介しあいました。最後には「なんだかんだ言って、やっぱり人間同士のコミュニケーションだよねー」という結論に落ち着いてしまいましたが、それでもコミュニケーションを助けるためのヒントはたくさんあった方がいいですもんね。
ちなみに、今回紹介された本はこれ(楽天ブックスにリンク)。

  • HTML+CSSコーディングベストプラクティス
  • XHTML&CSS超高速コ-ディング術

16時スタートで、終わったのは4時間後の20時。想像していたよりはるかに長時間、白熱の勉強会となりました。


終了後はタイ料理屋さんに移動しておいしい料理とお酒で大盛り上がり!そしてその場で第2回のモデレータも決定。次回は春?夏?楽しみです!

カテゴリ:In My Circle, 参加した Posted by 千貫りこ on 2012年1月10日

WinとMacでHHK(US配列)を共有する

このたびWindowsマシンを購入しました。
旧マシンはいずれ破棄するので「完全移行」となるわけですが、私の環境がちょっと特殊なせいで基本的な移行作業でかなり苦労しました。次も同じ目にあわないよう、自分用メモ。

機材構成は、Mac(OS X 10.6)+モニタ、Win(Windows7)+モニタ、キーボードはHappy Hacking Keyboard Lite2(US配列)。キーボードとマウスはWin機に接続。
やりたいことは

  • Winを「サーバ」、Macを「クライアント」として、「Synergy」でキーボードとマウスを共有する
  • 文字種切替えを含む、いわゆるキーボードショートカット操作はMac方式に統一

の2点。

ちなみに「Synergy」とは、複数のパソコンでキーボードやマウスを共有するためのソフト。さらに、ひとつのパソコンで「コピー」したデータを、別のパソコンに「貼り付け」たり、複数のモニタ間をマウスで自由に行き来できるようにしてくれるスグレモノです。
くわしい情報はマイコミジャーナルさんのページで。

Synergyの設定

今回、Mac用のSynergyは「SynergyKM」というソフトを使いました。
インストール後、「システム環境設定」で簡単に設定できます。Macはクライアントとして機能させたいので、「General」画面で「Connect to a shared keyboard and mouse」にチェックを入れます。
続けて、「Client Configuration」画面の「Server IP or hostname」にはWin機のIPアドレスを入力。
Mac側の設定はこれで終わり。

Win用は本家Synergyを利用します。
「Screens & Link」でそれぞれのマシンの配置を設定。私の場合Macを左、Winを右に配置しているのでこんな感じになります。

続けて、Macでキーボードを利用するときのキーマップ変更の設定。
「Control」キーが「Alt」、「Alt」キーが「Control」として機能するよう設定しておきます。

HHKのスイッチを切り替える

Happy Hacking Keyboard Lite2(以下、HHK)の「Delete」キーを押したときに「バックスペース」として機能させたければ、キーボードの背面についているスイッチ「DIP SW」の3番を「ON」にします。これは箱についてる説明どおり。

また、Macと共有するときには「◇」キーを「Alt」として利用する設定にしておきましょう。「DIP SW」の3番をONにします。
ひとつ前のステップで、Macでキーボードを使用する際には「Control→Alt、Alt→Control」となるよう設定を済ませました。ということは、「◇」キーの機能は「Alt」から「Control」に変換されます。 Macでは「Control」キーが「コマンド」キーとして認識されるので、「◇」キーをたたけば「コマンド」として機能してくれるようになります。

Windowsの設定

US配列のキーボードを使うときは、まずレジストリを書き換えます。

  1. スタートメニューの[アクセサリ]-[コマンドプロンプト]を起動
  2. 「regedit」と入力してレジストリエディタを起動
  3. [HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Keyboard Layouts\00000411  ]までたどる
  4. [Layout file] の値を [KBDJPN.DLL] から [KBDUS.DLL] に変更
  5. レジストリエディタを終了

次に「KeySwap」をインストールして、キーマップの変更をレジストリに書き込みます。HHKのスイッチを切り替えたことにより、現在「Alt」として機能している「◇」キーを「Control」として機能するよう変更します。

※レジストリ関連は、まったく理解せずに書いてます。
あちこちのサイトで解説してくれている情報を寄せ集めているだけなので、間違いがあったらご指摘をお願いします!

CmdSpaceを導入

CmdSpace」は、Winマシンでも「Command」+「スペース」で文字種の変更ができるようにしてくれる、超スグレモノソフトです。XP時代から愛用してますが、Window7でもちゃんと使えるので本当にありがたい。
インストールして設定。

以上の設定を行えば、2台のマシンで1組のキーボード+マウスを共有したり、2台のモニターを自由に行き来できるようになります。
異なるOSなのに、キー操作もほとんど同じ。すごい!しかも全部無料のソフトです。なんとお礼を申してよいやら。

あ、SynergyはDonateウェアでした。安いけど$10寄付しとこ!

カテゴリ:In My Circle, メモった Posted by 千貫りこ on 2011年10月4日

『WebSig 1日学校2011』に出演しました

9月10日(土)に開催された『WebSig 1日学校2011』に出演しました。

WebSig1日学校2011:WebSig24/7のサーバサイドエンジニア、フロントエンドエンジニア、デザイナー、ディレクター/プロデューサー、Web担当者向け1日学校(セミナー)

当日私が担当したのは「非フロントエンドエンジニアのための選択授業」という枠で、私から見た「フロントエンドエンジニア(以下、FE)の意義」や「これからのWebサイトのありかた」などをテーマにお話しさせていただきました。
…のつもりだったのですが、私自身の未熟さや緊張が原因で伝えたいことの半分も伝えられなかったように感じたので、補足のためにこのエントリーをあげます。

そもそもFEって?

最初に、事前にtwitterでおこなったアンケートにいただいた回答を掲載しますね(原文ママではありません)。「FEの定義」や「FEに期待すること」について答えていただきました。

  •  SEOやトレンド、メンテナンスの効率化、アクセシビリティなど諸々をもちろん踏まえた上で「今回どういう仕様にするか」を判断できる
  • 「テクニカルアートディレクター」みたいな存在かも
  • JavaScriptをマスターしたマークアップエンジニアの上位クラス
  • ユーザーの手に馴染むようなUIを考える人
  • 質とスピードを両立できる人でありたい(現役FEさんから)

いやー、正直言って「FEって、自分が想像していたよりもずっとハイレベルなものだったんだ!」とガクゼンとしました。
私自身が想定していたFEの定義は「HTML、CSSの知識をベースとして、JavascriptやPHP、Perl、CMSの独自タグなどを必要に応じて使う人」だったので…。
かなり焦りつつ、でも定義を決めないことには話を組みたてられないので、今回はひとまず自分の定義に基づいて背伸びせずに話を進めさせていただくことにしました。

フロントエンドエンジニアの仕事って?

ひとつめのテーマ「フロントエンドエンジニアの仕事って?」を語る際に私が何度か口にした「精度の高いマークアップ」とは、つまり「デザインに引っ張られないマークアップ」のことです。
当日のスライドの例はその顕著な例だと考えています。あのソースの何が悪いのか、もうひとつのソースのどこが良いとされているのか。たとえ経験を積んだFEでも、きちんと説明できない方が(中には)いらっしゃると思います。

CSSはデザインカンプと密接につながっていますが、HTMLはまったく(と言い切れない場面もありますが)別モノです。
当たり前のようでいて、いざ実践に結びつけるとなると難しいポイントを、非FEさんにもご理解いただきたくてお話しさせていただきました。FEの力量を評価する上でのひとつの指針になるかと思います。

フロントエンドエンジニア受難の時代!?

技術は日々進化し、トレンドはうつりかわり、アプリケーションはバージョンアップを重ねます。それらに対応することだけで精一杯で、疲れきっているFEのなんと多いことか…。でもこれは、FEに限らずどの職種にもいえることですよね。

「Web制作」という動きの早い業界に身をおいているかぎり、トレンドに目を配ることは最低限のたしなみでしょう。でも、表層の情報を追うだけで本質を見失ってしまっては本末転倒だと感じます。

私は15年ほどWeb制作の仕事を続けています。歴史の浅いWeb制作業界においては、これでも中堅もしくは古参の部類に入るかと思います。その私から見て、15年前と今を比べると当然「浦島太郎もビックリ!」というくらい色々なことが変化しているのですが、実は概念的な部分は大して変わっていない気がします(個人的には、テーブルコーディングからの脱却の際は、それまでの概念を180度変える必要がありましたが…)。

たとえば、ブロードバンドの普及やマシンのハイスペック化にともなってWebサイトのデザイントレンドは刻々と変化してきました。コンテンツの幅が広がったり巨大な背景画像がしきつめられたり。でも、基本のセオリーに大きな違いは無いように思うのです。
「いろんなことが変わり続けているように見えて、実は大して変わっていないんじゃない?」
これは、ここ10年近くずっと感じ続けていることです。

私は、「概念(本質)さえしっかり理解しておけば日々の情報にふりまわされる必要は無い!」と考えています。
もちろん「知らない」よりは「知っている」方が有利に決まっています。でも、技術やトレンドに目を奪われるあまり、「流行っているからこうしよう」「みんながやっているからやらなくては」というのは、なんだかおかしい気がするのです。

仕事で必要になったときに、そのつど必要な(と思われる)情報や知識を的確にピックアップするのも“才能”であり“技術”です。
また、常に最新の技術や最新の表現を導入しないといけないのか。これも落ち着いて判断したいところですね。目新しいものに踊らされるのではなく、常にニュートラルな目線で「目的を達成するためにどの方法が最良か」を見極めることの大切さを、あらためて考えるきっかけにしていただけたらうれしいです。

これからのWebサイトを考える

当日は漠然とした話になってしまいましたが…。
これまでの「制作者が提供する形態で閲覧する」スタイルだけでなく、「ユーザーが自由な形態を選択して閲覧する」スタイルも視野に入れることで、まったく新しい、そして真に効果的な情報提供の可能性が見えてくるのではないか、と考えています。
ここでお話しした内容は、「概念」に通ずるかと思います。

チームのみなさんへ

授業後、参加者のおひとりが「せんがんさんは会社員時代にチームで苦労されたんですね」というコメントをくださいまして…。「キャー!こころの声が届いてしまった!!」と焦りました(笑)。
いやいやいや、フォローするわけじゃないんですが、私は制作会社時代の仲間には本心から感謝しています。いまだに尊敬する人もいるし連絡を取り合う人もいます。もちろん、社員全員と良好な協力関係を築けていたかどうかは分かりませんが…(あはは)。
でも、所詮はヒトとヒトとのことですもの。心を開いて素直に接することのできた相手と、そうでない相手がいるのは当然ですよね。
そういった経験もふまえて、最後の「結局はコミュニケーション」というまとめにいたりました。

組織に属している人はぜひ、ちょっと迷ったら気軽に周りの人に声をかけてみてもらいたいです。結果、望む答えにたどりつけなかったとしても、協力してもらえなくてムッとすることになったとしても、また懲りずに話しかけてみてほしい。
また、小さな組織のメンバーやフリーランサーなど孤立した状態で仕事をしている方なら、同業者と横のつながりを持って気楽に仕事の話ができる環境をつくってみてはいかがでしょうか。

周りを巻き込んでいくことで、ひとりでは気づかなかったことに気づける機会がきっとあると思います。
そしてその気づきが、あなたがつくったサイトを利用する誰かさんの暮らしを少し便利にしたり、一瞬でも華やいだ気持ちにさせることができたらステキだと思うのです。

最後に

今回のイベントを運営されたスタッフのみなさん。今回はお声がけ本当にありがとうございました。
来場者を喜ばせようという気合がほとばしった、すばらしいイベントでした。感動しました。
来年も是非、なんらかの形で参加したいです。生徒コスプレもよろこんで!!

カテゴリ:In My Circle, 話した Posted by 千貫りこ on 2011年9月12日

次の記事