CSS3 ロールオーバーするとアニメーションで画像切り替え

昼間にコリスさんのサイトみてたらHTML5とCSS3をページ全体or少しずつ導入するチュートリアルという記事を見つけて、ちょっと実際にやってみたい内容があったので、書いてみた。

CSS3 ロールオーバーするとアニメーションで画像切り替え - jsdo.it - share JavaScript, HTML5 and CSS

アイコンにロールオーバーすると、縦にアニメーションでスライドして画像が切り替わるっていうやつ。いわゆるtransitionってやつですな。ちょっと「おっ」って思わせる仕掛けにいいかも。webkit系以外のブラウザだと普通に画像が切り替わるだけなので、実案件にも採用できそう。今度使えるときがあったらやろうっと。

参考サイト：coliss

jQuery 属性セレクタで属性の追加

久々に1日1コード。

a要素にtarget属性を追加してくれるjQueryの書き方があるって聞いてから、やりたかったけどずっとほったらかしにしていて、先日のkanazawa.js v1.0で@pocotan001のセッション中にその事が出て来たから、今がチャンスという感じで復習がてら書きました。やっぱセミナーで学んだことは実践しないとね。

[php]

yahoo

[/php]

ブラウザのソースビューで見ても、a要素内にはtarget属性は入ってないけど、実際クリックしたら別枠で開いてくれるはず。これで厳しいvalidateチェックも安心ですネ☆

special thanks:@pocotan001

第2回Google Hackathon for GAE in 福井のススメ

photo by @taisukef

昨日@shoito が第2回Google Hackathon for GAE in 福井についてブログ書いてましたので、触発されて僕も書きます。

スーパーエンジニア@shoito 様の記事はこちらから。
→福井でみんなで集まってサービス/ソフトウェアを作ってみませんか？[3/5, 3/12]

3月に福井でGAE Hackathonが開催されます。
今週5日（土）にIdeathonと事前勉強会、そして次週12日（土）にHackathon本番があります。

そもそもHackathonってなんぞや？ってことなんですけど、

ハッカソン（Hackathon：Hack-a-thon）とは、とある開発テーマの技術に興味のあるプログラマーたちが、会議室やソファーがある場所などにノートPC持参で集まり、みんなで一緒にソフトウェアをハックしまくって楽しみ、最後に開発したアプリケーションやサービスを参加者全員の前でプレゼンするという、いわばギークのためのお祭りイベントです。（ハッカソンとは（Hackathonとは）

引用：IT+

簡単に言うとプチ開発合宿って感じですね。決められた時間の中で、チーム組んでなにか作るって感じのイベントです。今回はGAE（Google App Engine）Hackathonということで、Googleのクラウドアプリケーション・プラットフォーム上で動く何かを作るという内容です。

「うわ、難しそ！」と思うかもですけど、HTML、CSS、JavaScriptでも開発は可能なので、エンジニアさんだけでなく、デザイナーさんやコーダーさんも参加できる、そこまで敷居の高くないイベント（だということに最近気づきましたw）です。

GAEってなんぞ？という方でも安心して参加いただける為に、5日の事前勉強会があります。ですので、GAEのことよくわからない人も、ある程度理解した上で、Hackathonのときに作るものを考えるIdeathonに臨めるかと思います。もちろん僕も事前勉強会から参加します。勉強しますw

で、Hackathonのなにがいいかってこと何ですけど、

・GAEについての理解を深められるいい機会
・会社外の人とチーム組んで開発できる数少ないチャンス
・仕事のこととか考えなくてもいいので、好きなもの作れる
・福井（北陸）の同業者さんたちと交流できて、いい刺激になる
・Google API Expertの人とかGoogleの人も参加される予定なので質問できるチャンス
・総じて楽しい！＞＜

って感じですね。

去年参加させてもらった時って、ほんとになにもわからなかったのでこんな感じでした。


でもチームの人に助けられてなんとか最後の発表までいけましたw 感謝です（-人-）

で、この時に知り合えた人たちって、その後もいろんなところでお会いさせてもらう事が多くて、その度に面白い話したり、情報交換したりしていい刺激をいただいてますので、Hackathonで得られるものって、その場だけじゃ終わらなくて、その後も続くすごく大きなものを得られるチャンスなんだなーと僕は思ってます。

まだ募集してるようですし、もし5日と12日に「よーし、ちょっと気分転換にハッカソンしちゃうぞー」という方はぜひぜひ申し込んでみてください！いっしょに楽しいものつくりましょう！
というか秋吉食べたい人は無条件で来ちゃいましょう！＞＜
→第2回Google Hackathon for GAE in 福井

Google Ajax Feed APIでRSS取得

Google Ajax Feed APIについて触れる事があったので、少しだけ調べてみた。

やりたかったのはRSSの取得。会社の仕事ではプログラマさんにお願いしてる事なんだけど、デザイナーで完結できるならそれでいいじゃないって感じでやってみたかった。

まずはAPIキーの取得から。下記ページでサイトのURLを入力してからAPIキーを取得する。
http://code.google.com/intl/ja/apis/loader/signup.html

あとは下のコードの最初のscriptタグのところにAPIキーを入力するだけ。
[php]

[/php]

たぶんお作法のこととか書くときりないし、そこまで理解もしてないのでこんな感じ。

一部捕捉すると、
[php]
var feedurl = "http://blog.surfboard.co.jp/staff/atom.xml";
[/php]
ここがとってくるRSSのURL入れるところ。Google Ajax Feed APIを使ってRSSフィードのXMLをJavaScriptで処理できるように（JSON（？））してくれてるって感じなのかな？
[php]
feed.setNumEntries(4);
[/php]
ここで表示させる記事数を入力。（）の中の数字が記事数。

このサンプルでは日付までしか表示させてないけど、秒数までも表示できるみたい。

xmlを直接使わずにやってると思うから、処理的にどうなのかなって疑問は残るけど、そこまで気にしないんであればいいかも。拡張子htmlでもいいし。

参考サイト：AjaxTower

→実際動くもの（そのうち消すと思います。）

自動下書き

CSS Nite in FUKUI, Vol.4で少しお話させていただきます。

2月19日（土）にふくい産業支援センターで開催されるCSS Nite in FUKUI, Vol.4で地元スピーカー枠という事で20分くらいのミニセッションさせていただきます。

正直CSS NIteにはある種のあこがれ的なものがあって、それに今回スピーカーとして参加できる事になって少し不思議な感じです。けっこう緊張もしていますが、せっかくなんで楽しんでこようと思ってます。これを読んでる方でご参加される方がいらっしゃいましたら、暖かい目で見守っていてくださいませm(_ _)m

「福井でWeb制作を行うためのワークハック」というセッションタイトルで、勤めてる会社の制作スタイルとかの話を自分流にやらせていただきます。ご参加される方達にとって、少しでも役に立つような事をお話できればいいかなと思って、精一杯頑張りますのでヨロシクです！＞＜

では会場でお会いしましょう（＞ω＜）ﾉｼ

WordCrab Fukui2011に参加してきた。

全国のカニ好きWordBenchクラスタが集まった「WordCrab Fukui2011」に参加してきました。

WordPressのインストール手順や、カートプラグイン「welcart」の紹介、他にも投稿フォーマットやVPSなどをテーマにしたLT4連発などなど、WordPressに関するセッション盛りだくさんでとても勉強になりました。

個人的には@digitalcube によるぶっちぎり時間オーバーのLTがとても刺激的でしたw WordPress活用手段や制作事例紹介を絡めながら、め組の制作スタイルについてのお話で、「あ、もうそんな時間経ってたんだ。」と思うような時間を感じさせない軽快なトークでした。懇親会でもお話させていただきましたけど、とてもアツい方でした。WCAFで話してくれる約束をしてくれたので、その時はお願いします！

僕も「デザイナー視点のWordPress」というセッションタイトルで、未熟者ながらも開発環境を整えてからWordPressでデザイン変える方法と、サイト構築についてのお話をさせていただきました。はい、緊張してましたw

発表スライドはこちらから。

デザイナー視点のWordPress WordCrub Fukui 2011.1.29

View more presentations from Toshiaki Sasaki.

メイン（？）のカニ懇親会も大盛り上がりだったし、WordPressコミュニティって楽しいなーと思った1日でした。福岡はちょっと遠いかもだけど、近いうちにWordCampも行ってみたい。WordPressもっと活用したいし勉強しようっと。

運営の皆様&ご参加された皆様おつかれさまでしたー。遠方から来られた方々はお気をつけてw また福井来てくださいー。

WCAF Seminar vol.5 のこと

新年1発目の勉強会がWCAFでした。写真は寝てるわけでも精神統一しているわけでもありませんw
イベント全体のレポートはWCAFサイトで書いたので、こちらでは自分のセッションについて。

楽しくWebするワークハック | WCAF Seminar vol.5

View more presentations from Toshiaki Sasaki.

「楽しくWebするワークハック」というセッションタイトルで30分くらいお話させていただきました。
内容をまとめると、
・仕事を楽しんで人生を楽しもうぜ
・Web系勉強会って楽しいよ。スキルもモチベーションもアップする。
・お互いプラスになるような関係つくろう
・作り手が楽しくないと楽しいWeb作れない。もっとWebの仕事をたのしもう！
って感じです。

去年はProgressionとかHTML5とか技術的な事をメインにしたセッションが多かったので、今回はマインド的なことを話させてもらおうかなって思ってました。ネタがつきたというのも一つの理由ですがw

それはさておき、僕は今Webデザイナーとして制作会社に務めてる人という以外に、WCAFの代表の片割れとしてコミュニティを仕切るという立場でもあります。そういった立場の人に求められるのは「参加してくれてる人を如何にして満足させるか」という事かなと個人的には考えています。

満足に繋がる一つの手段は「楽しさ」だと思ってます。
なので「Webって楽しいよ、みんなで楽しみながらスキルアップして交流深めよう。」って言う事を伝えたかった気持ちがあったので、そういった事も含めて今回のお話をさせていただきました。訳わからない子ネタはさみながらスベリまくったセッションでしたけど、お聴きくださったみなさまありがとうございましたw

次回WCAFは4月9日を予定しています。
テーマは「スマートフォン」です。iPhone、Android、Windows Phone7の3セッションとLTという構成を考えていますのでぜひぜひご参加くださいませ。
LT希望者絶賛募集中ですので、お話したい方は@shirokuro331までお気軽にご連絡くださいませー。

2010年のふりかえりなど。

もう年明けましたけど2010年のふりかえりなど。

2010年はいろんな経験させてもらった年だったです。ざっと思い返してみると、

・勉強会いっぱい出た
・Hackathon参加した
・いっぱい人前で話した（LT含めて11回）
・WCAFの再始動
・.fukui始めました
・Progression勉強した
・HTML5も勉強した

って感じです。
11回も人前で話したのか...。これも@shoito のおかげですかねw
勉強会にもよく参加しました。ほとんどがデザイナーがあまりいない勉強会だったのがちょっと変わってたかもしれませんねw でもそのおかげでいろんな人に知り合えたし、いろんな事を学ぶ事ができました。
個人的な考えで、学ぶということはボーダレスで、どんな経験もプラスにできると信じています。勉強会に参加されてる方々は仕事外でもスキルアップを目指してる方が多いので、そういう人たちと話していると自分のモチベーションもアップします。なので非デザイナー向けな勉強会だったとしてもなにかしら得るものはありますので今後も少しでも興味がある勉強会には積極的に参加して行きたいと思います。（家族も大事にしますw）

Hackathonに参加したのも楽しかったです。2回やりましたけど、デザイナーは僕一人でしたw たぶんテーマの内容わからなくても、デザインという武器があればじゅうぶん参加できるし楽しめると思います。春くらいにまたやるみたいですし、もっとデザイナーさんは参加するといいですよ＞＜

あとWCAFと.fukui始めたのが今年大きかったような気がします。WCAFは引き継いだ形ですけど、せっかくやるなら参加してくれる皆様にとって有益なコミュニティにしたいですね。.fukuiもいっしょです。なんにしろ楽しくやりましょう！それが僕の中で永遠のテーマです！

2011年の目標としては

・もっとFlashしたい
・JavaScriptも身につけたい
・IAとUXにも興味ある（というか身につけたい
・健康
・家族大事

てな所ですかね。
早くも年明けの予定もいくつか詰まってますし、今年も頑張っていきたいと思います。こんな僕ですけど今年もよろしくお願いしますです！m(_ _)m