KICKS Web

In My Circle

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

『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日

twitter「プロフィールウィジェット」のHTML

需要があるか分かりませんが…。
公式のウィジェット作成ページでつくったjavascriptがはき出してるHTML(2011年8月現在)を載せておきます。最新tweetを2件表示する設定にしたときの。

class名を利用してCSSをいじると、結構思い切ったカスタマイズができます。こんな感じ。

twitterタイムラインのカスタマイズ例

<div class="twtr-widget twtr-widget-profile" id="twtr-widget-1">
<div class="twtr-doc" style="width: [指定した幅]">
<div class="twtr-hd">
<a target="_blank" href="http://twitter.com/intent/user?screen_name=[twitterアカウント]" class="twtr-profile-img-anchor"><img alt="profile" class="twtr-profile-img" src="[プロフィール写真]"></a>
<h3>[表示用ユーザー名]</h3>
<h4><a target="_blank" href="http://twitter.com/intent/user?screen_name=[twitterアカウント]">[twitterアカウント]</a></h4>
</div>
<div class="twtr-bd">
<div class="twtr-timeline" style="height: [指定した高さ]">
<div class="twtr-tweets">
<div class="twtr-reference-tweet"></div>
<div class="twtr-tweet" id="tweet-id-2">
<div class="twtr-tweet-wrap">
<div class="twtr-avatar">
<div class="twtr-img">
<a target="_blank" href="http://twitter.com/intent/user?screen_name=[twitterアカウント]"><img alt="[twitterアカウント] profile" src="[プロフィール写真]"></a>
</div>
</div>
<div class="twtr-tweet-text">
<p>
<a target="_blank" href="http://twitter.com/intent/user?screen_name=[twitterアカウント]" class="twtr-user">[twitterアカウント]</a>[発言内容]<em><a target="_blank" class="twtr-timestamp" time="[投稿日時]" href="http://twitter.com/[twitterアカウント]/status/[tweet ID]">xx days ago</a><a target="_blank" class="twtr-reply" href="http://twitter.com/intent/tweet?in_reply_to=[tweet ID]">reply</a>
<a target="_blank" class="twtr-rt" href="http://twitter.com/intent/retweet?tweet_id=[tweet ID]">retweet</a><a target="_blank" class="twtr-fav" href="http://twitter.com/intent/favorite?tweet_id=[tweet ID]">favorite</a></em>
</p>
</div>
</div>
</div>
<div class="twtr-tweet" id="tweet-id-1">
<div class="twtr-tweet-wrap">
<div class="twtr-avatar">
<div class="twtr-img">
<a target="_blank" href="http://twitter.com/intent/user?screen_name=[twitterアカウント]"><img alt="[twitterアカウント] profile" src="[プロフィール写真]"></a>
</div>
</div>
<div class="twtr-tweet-text">
<p><a target="_blank" href="http://twitter.com/intent/user?screen_name=[twitterアカウント]" class="twtr-user">[twitterアカウント]</a> [発言内容]<em><a target="_blank" class="twtr-timestamp" time="[投稿日時]" href="http://twitter.com/[twitterアカウント]/status/[tweet ID]">xx days ago</a><a target="_blank" class="twtr-reply" href="http://twitter.com/intent/tweet?in_reply_to=[tweet ID]">reply</a><a target="_blank" class="twtr-rt" href="http://twitter.com/intent/retweet?tweet_id=[tweet ID]">retweet</a><a target="_blank" class="twtr-fav" href="http://twitter.com/intent/favorite?tweet_id=[tweet ID]">favorite</a></em></p>
</div>
</div>
</div><!-- tweets show here -->
</div>
</div>
</div>
<div class="twtr-ft">
<div>
<a target="_blank" href="http://twitter.com"><img alt="" src="http://widgets.twimg.com/i/widget-logo.png"></a><span><a target="_blank" class="twtr-join-conv" style="color: rgb(255, 255, 255);" href="http://twitter.com/[twitterアカウント]">Join the conversation</a></span>
</div>
</div>
</div>
</div>

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

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

来る9/10(土)、『WebSig 1日学校2011』というイベントに出演させていただくことになりました

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

私が担当するのは「非フロントエンドエンジニアのための選択授業」というコマで、フロントエンドエンジニア(あぁ、まどろっこしい。以下「フロントエンドエンジニア」=「FE」で)ではない方に向けて、FEの立場から見た「仕事をよりスムーズに進めるためのアイデア」や「これからのWeb制作のあり方はこうなるのでは?」といったテーマについて話そうと考えています。

まだまだ準備中で、しかも初・非FEさん対象の講演ということで少し不安ですが、Web業界のお祭りみたいなイベントだと聞いているので楽しんでのぞみたいと思っています。
参加されるみなさん、どうぞよろしくお願いします!

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

パブリックコメント応募のお願い

仕事とぜんぜん関係なくて恐縮です。
今日は「パブリックコメント送ろうよ!」の呼びかけエントリーを書いてみました。

今、環境省が「動物取扱業の適正化」についてパブリックコメントを募集しています。このパブリックコメント、単なる「目安箱」かと思いきや、集まった意見はかなり重要視されるそうです。ちょっと面倒ですが、ペットを飼ってる方や動物好きな方、参加しませんか?あなたの意見が反映される可能性大ですよ。

こちらのサイトに、詳しいことが書いてあります。興味のある方はぜひ読んでみてください。
https://sites.google.com/site/1action4animals/public_comment
「ほぼ日」はさらに分かりやすい!
http://www.1101.com/george/2011-08-19.html

ひとつめのリンク先「One Action for Animals」の内容を一部かいつまんでご紹介すると、今回の法改正の重要項目のひとつは「犬猫幼齢動物を親等から引き離す日齢」についての規制です。現在はこの規制が緩いため、ペットショップなどでは「赤ちゃん」の動物たちを親から引き離して堂々と展示販売しています。

でも、まだ乳離れもしていないうちに親から引き離された赤ちゃん動物は、母乳による免疫力や栄養を十分にたくわえることができていないため虚弱になってしまうことがあります。また親から教わるはずの社会性を身につけないまま売られていくことで、やがて問題行動を起こす可能性があります。

ちなみに、2010年には犬猫合わせて229,832頭が保健所で殺されています。この中には、問題行動が原因で、心ない飼い主から保健所に持ち込まれる動物の数が多く含まれます。
よく誤解されますが、保健所の殺処分は決して「安楽死」ではありません。苦しい窒息死です。人間のエゴのために、命が使い捨てされている不幸な現状がたしかにあるのです。

動物と生活したことのある方なら分かると思いますが、小さくてかわいい時期なんて一瞬です。でも彼らは、小さいときよりも大きくなってからの方がずっとかわいいのです。
見た目の愛らしさよりも、ふとした瞬間に気持ちが通じ合ったと感じたり、自分を信頼して体を預けてくれたりする様子にこそ、私たちは愛情を感じるものではないでしょうか?

約三割の子犬や子猫がブリーダーからからペットショップの買い入れ元となる競り市の間で命を落とし、生き残っても競り市からペットショップに移動する間に命を落とす子がまた一割、さらにペットショップの裏側で一割の子が亡くなってしまうとも言われています。

この状況をなんとか変えたいと思います。
ということで、私はこのフォーマットに意見を書き込んでメールしようと思っています。
https://sites.google.com/site/1action4animals/public_comment/mail_text02
メールの宛先は shizen-some@env.go.jp 。タイトルに”「動物取扱業の適正化について(案)」に関する意見”と書いてください。

締め切りは8/27(土)!もうすぐです。賛同してくださる方はお早めに。
今回をのがすと、5年後まで法改正のチャンスはありません。

カテゴリ:In My Circle, 考えた Posted by 千貫りこ on 2011年8月19日

前の記事 | 次の記事