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 また福井来てくださいー。