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

.fukui忘年会しましたー。

夏くらいから隔週で「みんな集まって自由に勉強しましょう。」的なノリで.fukuiという勉強会してたんですけど、それの忘年会しました。基本自由というコンセプトにのっとって、.fukuiに参加したことない人でもカモンカモンなノリで募集しましたらなんと@checkelaが富山から参加してくれました。遠くからお越しいただいてありがとうございました！

まぁなんというか...超楽しかったです！！
なんででしょうね。うん酔っぱらってたからでしょうw というのは冗談ですが、普段勉強会とかで顔会わせてる人が多く参加してくれたので気楽に話しながら飲めたということと、今回初めて参加してくれた方たちもいたので、その人たちとの新鮮な交流も楽しかったです。

みなさん技術だけでなく、個性もスゴい方でしたw 楽しい話たくさんした気がします。「気がする」と書いたのは酔っぱらったのであまり覚えてないからですw
まぁこんな私ですが来年もよろしくお願いします m(_ _)m

参加してくれた人リストはこちらから。
→.fukui vol.10 -忘年会-
プラス弊社のレディースが2人です。

当日の写真はfacebookにちょこちょこ投稿したのでそちらから。
→facebookのアルバム

あらためて見るとひどいなww

追伸：@haruiruka、すまんかった！次こそは一緒にやろう！

スマートフォンページ制作 〜開発環境設定＋マークアップ＋JavaScript〜

12月にも参加したSwapskillsのイベントが来年1月にも開催されますね。今度のテーマは「スマートフォンページ制作」ということで、これまた興味深い内容です。

スマートフォン向けのサイト制作やアプリケーション開発をひとつに括っても、デバイスは AndroidとiOSの両方が存在し、ネイティブのアプリになれば言語さえ違う事になります。 特に、Androidは頻繁にバージョンアップされ多種多様な端末に入っているため 検証方法も難しい状況にあります。
以前まで簡単に揃えられたAndroidの開発環境設定もややこしい設定が必要になりました。 今回は、iOSとAndroid向けという切り口で「マークアップ」「デバイスの振り分け」「各開発環境設定」 「JavaScript」を勉強していただきます。電子書籍アプリをデモに解説され、サンプルコードのプレゼント付きで開催いたします。

開催日：2011年1月16日 （日） 14:30 〜 16:50
講師： 川下城誉 （株式会社クリーム）& 柳井　政和（クロノス・クラウン合資会社）
会場：東京&北陸（金沢）
受講料：東京 2,000円&金沢 1,500円（税込）
1月14日から当日払い：東京 2,500円&金沢 2,000円（税込）
定員：東京50名／北陸（金沢）20名

詳細は公式サイトで。
スマートフォンページ制作　
〜開発環境設定＋マークアップ＋JavaScript〜

金沢のサテライト会場で参加させてもらおうと思います。宜しくお願いします！

SwapSkills Facebook 活用 〜コトハジメ〜

先週の土曜日に金沢でサテライト中継されたSwapSkills Facebook 活用　〜コトハジメ〜に参加してきました。

個人的にfacebookにハマってて楽しく使ってるわけなんですけど、基本的なこととかfacebookを取り巻く現状的なこととかは全く知らないので、いい機会なので勉強してきました。

まずは株式会社ECナビの斧田 恵さんによる「Facebookの基本として抑えておきたいコト」です。ほんと基本的なことを教えてもらいました。正直ウォールとかニュースフィードとかの意味がわかってなかったので、今回のできちんと理解することができました。Open Graph Protocolっていうものの存在も知れたので収穫になりました。うん、基本大事。コミュニケーション楽しんじゃいましょう＞＜

次に株式会社メンバーズの吉居 遥香さんによる「facebookファンページビジネス活用」です。最近ファンページのデザインをさせていただく機会が増えてきたので、いろいろと知りたいことがありました。企業としての活用方法とか。
そんな自分にとって、こちらのお話はとてもいい収穫になりました。ファンページの成功事例としていくつか紹介していただきましたし、そのなかで活用例とかの紹介もありました。「いいね！」ボタンで切り替わるファンページの見せ方についても@t32kのおかげで知ることができたし、ほんとに良かったと思います。

今回の勉強会は東京で開催されている勉強会のサテライト中継だったんですけど、あまりハンデというか、不満なく参加することができました。運営の人たちが頑張ってくれたおかげだと思います。ありがとうございます＞＜

SwapSkillsはこれからも毎月開催されるようで、金沢でも今回同様サテライトで開催するそうです。毎回興味深いテーマで勉強会やってるみたいですし、もし都合が合うようでしたらきっと参加した方がいいと思いますよ。次回も参加したいと思います！

福井でweb系忘年会しますよ

年末なので忘年会します！
今年1年あったいろんなことを話しあったりして、来年へつなげましょう。

一応「.fukui vol.10」っていう形ですけど、誰でもカモンエブリバディーです＞＜
参加してくれる人は今のところプログラマーさんが多い感じですね。プログラマーさんに絡みたいデザイナーさんやディレクターさんカモンカモン。せっかくなんで交流しちゃいましょう。

web系の人じゃなくてもいいです。福井の人でなくてもいいです。
楽しく飲み食い&トークしましょう！

日時：2010年12月22日 20:00〜
場所：旬菜麺茶屋　五目亭 開発店 （福井県福井市西開発2-201）
会費：3000円程度を予定

参加登録はATNDからどうぞー。
http://atnd.org/events/10751

HTML5などなど次世代Web勉強会 in 福井に参加してきました。

11月27日に開催されました「HTML5などなど次世代Web勉強会 in 福井」に参加して自作アプリの紹介をしてきました。というより、悪ふざけしてきましたw

.fukuiでHTML+JavaScriptでつくるiPhoneアプリの勉強してたので、そのことについて簡単なデモを絡めたLTするだけのつもりだったんですけど、どうしてあんなことになったんだろう。。まぁいいやw
たぶんやってたこと自体はマジメなことだと思ってるので、自身の反省を兼ねて補足の記事を書いてみよう。

そもそも

iPhoneアプリつくりたいなっていう思いがずっと前からあって、でもobjective-cが高い壁なんだろうなーとか思っててなかなか手を出せなかったんですけど、HTML5の勉強をしようと思ってたときに、たまたま「HTML+JavaScriptでつくるiPhoneアプリ〜」みたいな記事を発見して、「これならデザイナーでもできんじゃん。HTML5とJavaScriptの勉強にもなるし一石二鳥じゃね＞＜」とか思ったので少し調べてみました。
そんなときに@shoitoと「HTML5の勉強会したいよねー」と話してたので、「じゃあ俺なにか発表します。」という簡単なノリでスピーカーに立候補しました。

「HTML5」っていう言葉がよく聞こえてくるようになって、じゃあ実際どうしたらいいの？いつから使い始めればいいの？っていうのがずっと疑問でした。多分仕様策定はまだ先なんだろうなー。でもいきなり「はい、来月からHTML5解禁です。」ってなっても多分対応できないだろうなって思ってたので、ぼちぼちと本読んだり、記事読んだりして情報は追っかけてるつもりでした。でも、本読んだだけでは何となくわかってるつもり程度にしかならないだろうなって思いはあって、やっぱり手を動かさないと身に付かないなと考えてたのでたまにコーディングしたりとかはしてたんですけど、実際に公開するサイトじゃないので、なんとなく楽しくなかったのです。現状IEではhtml5.js読ませれば形は多分整うんですけど、なんかブラウザ意識してつくるのもめんどくさいなーって思ってました。（仕事ではブラウザチェックしてますよw）
「あ、じゃあブラウザ限定されるスマートフォン向けにつくればいいじゃん。HTML5の勉強にもなるし、前から興味のあったiPhoneアプリ制作もできる＞＜」ということに気づきましたので、それ関係の制作tipsを少し調べたのでそれの紹介です。

まずは表示サイズを調整しよう

[php]

[/php]


iPhoneのMobileSafariではデフォルトで横幅980pxで表示されるそうです。ですがiPhoneの画面サイズは横幅320pxです（縦の場合）。なのでデフォルトではとても文字や画像が小さく表示されてしまいます。 その問題を解消するために、上記のmetaの記述が必要となります。contentの値を細かく設定できるみたいですけど、width=device-widthにしておけばとりあえずは問題ないと思います。

参考サイト：iPhone向けサイト構築 基礎文法最速マスター

不要なタスクバーを非表示にしよう

[php]

[/php]

一応今回つくるのは「MobileSafariで動くwebアプリケーション」になります。ですが作りたいのは「iPhone」アプリです。MobileSafariでブラウジングした場合、当然ながら画面上部にURLを入力するためのタスクバーが表示されます。ですがiPhoneアプリにはこのタスクバーはありません。なので非表示にしたいです。上記のmetaの記述をすれば非表示になります。（ただし後述のホーム画面にアイコンを設置する方法でのみ）

参考サイト：iPhone向けSafari、HTML拡張属性を使いこなす


自作アイコンを設置しよう

[php]

[/php]

「アプリ」っていう言葉を聞くと、スマートフォンのホーム画面にあるアイコンをタップして起動させるものってイメージがあります。MobileSafariのブックマークで、「ホーム画面に追加」というボタンがありますので、それをタップすれば ホーム画面上にアイコンを設置することができます。ですが設置されたアイコンは、画面キャプチャを小さくしたものになりますので、あまり見栄えが良くない場合があります。そこで、上記のlinkの記述をすれば任意の画像をアイコンとしてホーム画面に設置することができます。

参考サイト：WebClipアイコン(Apple touch icon)の覚え書き

起動画面を作ろう

[css]

[/css]

アイコンをタップして起動させるときに、起動画面があったほうがよりアプリっぽい感じがしますね。上記のlinkの記述をすれば任意の画像を起動画面に使用することができます。


ネットがなくても使えるようにしよう

Webアプリケーション= ネットワークに繋がってる環境のみで動くものです。
これまで説明して来たのは「Mobile Safariで動くWebアプリケーションをiPhoneアプリっぽく見せる方法」なので、ネットに繋がってないと動かないものです。でもそれってiPhoneアプリっぽくないですよね。なのでネットに繋がってなくても動くようにしちゃいましょう。そんなこともできます。そう、HTML5ならねw

「cash.manifest」っていう名前のmanifestファイルを作って下記のような内容を記述します。要はネット環境無しでも動かしたいファイルを記述します。注意点としてはUTF-8で保存するということです。

CACHE MANIFEST

# Version: 006

CACHE:

# html
index.html

# image
./image/icon.png
./image/startup.png

次にhtmlファイルのhtml要素にmanifest属性で先ほどつくったmanifestファイルを読み込ませます。

[php]

[/php]


最後に.htaccessに

AddType text/cache-manifest.manifest

と1行記述します。

以上の手順だけでネット環境なくても使えるようになります。たぶん厳密に言うとキャッシュが残るので、「一度ネット環境あるところでアクセスして使うと、ネット環境無しでも使えるようになる」って感じだと思います。
MacOSXのローカルホストで動かなかったので見事にはまりました...orz

参考サイト：アプリケーションキャッシュのサンプル

という感じで、以上のことを押さえておけばiPhoneアプリっぽくできるんじゃないでしょうか。

で、つくったものは。

「TouchPaint」というネーミングで、画面上をタップすればランダムな大きさと色のグラデーションの円を描画するというものです。使用技術としてはcanvas要素とそれに関連するJavaScriptです。

「HTML5=canvas」っていう思いがあったので、canvasを使ったなにかを作りたかったのです。見た目を表現できるので、デザイナー向けかなと思ってましたけど、他にもSVGとかWebGLとかもありますね。もしかしたらそっちの方追ったほうがいいのかも...とか思ったのは内緒の事実ですw

なにに使うかは・・・スライドみてくださいw

デザイナーが作るHTML5アプリ

View more presentations from Toshiaki Sasaki.

コードはjsdo.itにはりました。

HTML5などなど次世代Web勉強会 in 福井　発表用 - jsdo.it - share JavaScript, HTML5 and CSS

で、結局はなにが言いたかったかというと、今回みたいになにか作れば少なからずそのことについて勉強できるし、作ったものをああしたい、こうしたいみたいな気持ちになってさらに勉強したいという気持ちになるから、とりあえず何かつくろうってことです。
HTML5を本格的に使うようになったら、JavaScriptのことをもっともっと知らなくちゃいけないようになるから、今のうちに何か作って慣れておきましょう。
多分、そんなたいしたもの作らなくてもいいし、背伸びなんてする必要ないと思います。大事なのはなにかしようという気持ちですよはい。偉そうですねはい。

という感じで言い訳終わりですw
来年はもうちょっとマジメに生きますw

暖かく見守ってくださった皆様ありがとうございましたー。

kanazawa.jsに参加してきたよ。

ゆるふわな感じで各自 JavaScript 勉強しましょうの会、その名も「kanazawa.js v0.0.1 勉強会」に行ってきました。
kanazawa.js v0.0.1 勉強会 | ATND

最初はcanvasの関連APIについていろいろ調べてみようかなって思ってたんですけど、なんとなくjQueryに路線変更。@pocotan001 に教えてもらったせむーちゃんにやられたからかなw

まずは前にWCAFで@taijuが話してくれたことの復習として、彼のブログにあるコードの写経からはじめました。うん、わかりやすい。なんとなくjQueryのお作法がなんとなくわかったような気がしますが、多分すぐ忘れるでしょうw そうならないためにもコードは書き続けないとですね。
Let's jQuery - ひとりでできるもん | あと味

午後はバシャログさんの「作って学ぶjQuery」という記事を参考にひたすら写経してました。「作って学ぶ」。すばらしい言葉ですね。やはり身につけるためには実践あるのみです！＞＜ いくつか実際使えそうな小技的なものができました。まとめたら公開したいなと考えています。
作って学ぶjQuery | バシャログ

参加してみての感想として、じっくりとコードと向き合う時間って大事だなっと思いました。普段は誰かが使ってるコードを意味もわからず使ってましたけど、中身を理解すれば自分なりに応用もできるだろうし、表現やデザインの幅も広がると思います。そういうことを改めて感じれましたし、もっと勉強したいと思える時間でしたので、参加してよかったと思います。

今回みたいにデザイナーとプログラマーが同じテーマで勉強するっていいですね。個人的にJavaScriptはプログラマーさんの方が詳しい気がするので、デザイナーさんはわからないことはすぐそばにいるプログラマーさんに質問できるし、逆にデザイン的な要素はデザイナーさんに質問できるし、その結果お互いに有益な情報を共有できるような関係になればめちゃくちゃいいじゃないですか。もうどんどんやっちゃってください ＞＜

kanazawa.jsは毎月こんな感じで自由な勉強会を開催するそうです。来月もやるみたいですし、興味のある人はぜひ参加するといいですよ。

あと、参加者の@kabakiyo が短い時間ながらも面白いの作ってましたよ。（Google Chromeのみかな？）やっぱすごいなー。ゴイスーです。
滝 | jsdo.it

参加された皆様、主催者の@t32k 、おつかれさまでしたー。
福井も.fukui やWCAF盛り上げますよ！

参加報告ブログは僕が3番目かな？
・kanazawa.js v0.0.1 開催報告 | MOL
・kanazawa.js v0.0.1 勉強会 / Tumblrのヌードフィルタを作ろうとしてみた

SwapSkills Facebook 活用 〜コトハジメ〜

12月11日にSwapSkillsが開催されますね。
今回のタイトルは「facebook 活用　〜コトハジメ〜」 ということで、facebookがテーマのようです。

世界最大のSNS Facebookが日本でも突然ヒットしています。その理由もさておきながらFacebookは企業のマーケティングにおいて無視できないSNSのひとつになっています。今回はコトハジメとして、「なぜFacebookが日本でもはやり始めたのか？」「本当に流行るのか？」 その裏付けを解説いたします。また、Twitterをはじめ、日本のSNSなど発信ツールが複数になっている現状、どのように情報発信をすることがスマートなのか？　個人として、企業のソーシャルマーケティングとしてのFacebookの運用のコツなどをご紹介予定しています。

最近、福井県でも福井SNS研究会というものが立ち上がって、福井県の中小企業の人たちがfacebookについて勉強しようと頑張ってらっしゃいます。僕もそのグループの一員として、facebookのことを勉強中です。今回のSwapSkillsで役立つなにかを得たいなと思って、参加させていただきます。

石川県の会場にお邪魔させていただきますので、よろしくお願いします！

詳細は下記のURLからどうぞ。

SwapSkills Facebook 活用　〜コトハジメ〜
http://swapskills.info/sessions/facebook-start.html

HTML5などなど次世代Web勉強会 in 福井が開催されます

11月27日（土）に「HTML5などなど次世代Web勉強会 in 福井」という勉強会が開催されます。その名の通りHTML5などについての勉強会です。講演とサービス/アプリのデモ＆解説の2部構成になっています。

講演はMozilla Japan の方と最近フランスで開催されたW3C会議に参加されたjig.jpの方のセッションがあり、とても興味深い内容となっています。

・Firefox4で見るHTML5時代のWeb技術 by Mozilla Japan dynamis(@dynamitter)

・W3C、SVGの2本立て(仮) by @rch850

サービス/アプリのデモ＆解説では、HTML5などの技術を使ったサービスやアプリの紹介をしてくれますので、こちらもとてもおもしろそうです！

・クイズ(仮) by @tkmsm
　利用技術: WebSocket, Scala

・HTML5で始めるお気楽プログラミング(仮) by @aroma_black
　利用技術: Web Storage, Offline Web Applications, CSS3, (Flask@Python), Widgets

・twistmap(仮) by @mirutover
　利用技術: WebSocket(socket.io), node.js

・Canvasでアニメーションしてみたよ（仮） by @taiju
　利用技術: Canvas

・デザイナーがつくるHTML5アプリ（仮） by @shirokuro331
　利用技術: Canvas

・Firefox for Android by Mozilla Japan dynamis(@dynamitter)

一応僕も簡単なデモさせてもらおうかなと思います。
LT芸人らしく、前説的な感じですけどねw

イベントのターゲットは初心者、開発者、デザイナー問わずです。興味のある方はお気軽にご参加ください。
参加定員まで残りわずかだと思いますので、お申し込みはお早めにー。

→HTML5などなど次世代Web勉強会 in 福井
http://kokucheese.com/event/index/5492/

WCAN2010 Winterが開催されますね

名古屋のweb系勉強会WCANのイベント、WCAN2010 Winterが今年も開催されますね。

WCANとは

WCANとは、Web Creators Association Nagoyaの略で、名古屋を中心としたエリアでWEB制作に携わっている人、WEB に興味のある人のグループとして活動しています。

前から参加したいなーと思ってたんですけど、ちょうど用事がかぶったりとかでなかなか参加できなかったんですけど、先日WCAN主催の@kazumichさんが福井にいらっしゃったときに、WCAN Winterのことを教えていただいたので、なるべく予定をかぶらないようにしたので、なんとか参加できそうです。

今回は株式会社ワンパクの阿部 淳也さん、株式会社タービン・インタラクティブの志水 哲也さん、COULDの長谷川恭久さんのお三方のセッションとＬＴという構成らしいです。
まだ詳細は決まってないようですけど、興味深い話が聴けそうな予感がします。興味のある方は参加してみては如何でしょうか。

日程
　2010年12月18日(土) 13:30〜19:15（受付13:00〜）
会場
　名古屋国際会議場 会議室 141+142
　〒456-0036
　愛知県名古屋市熱田区西町1-1（→地図・アクセス方法）
　TEL : 052-683-7711
定員
　170名
会費
　事前支払一般 ￥3,000
　学生 無料(学生証をお持ちください)
　※領収証は当日お渡しいたします。
お申込
　

HTML5新要素 canvasの勉強

CSS3から一旦離れてHTML5のお勉強。
HTML5といえばcanvas！

canvas要素とは

canvas要素はスクリプト(一般的に JavaScript)を使って図形を描くために使われる新しい HTML 要素です。

引用元：HTML 5 canvas要素 + Javascriptで作る、動的コンテンツ

canvas sample1 - jsdo.it - share JavaScript, HTML5 and CSS

上のコードはcanvasとJSを使って矩形を描画するというもの。

　canvas id="sample" width="400" height="300"

で、幅400px、高さ300pxのsampleって名前のついたステージがあります。そこにJSで図形を描画しましょうってイメージ。

　ctx.fillRect(50,50,300,200); // 塗られた矩形を描く
　ctx.clearRect(120,80,200,140);　//　指定された領域を消去し、完全な透明にする
　ctx.strokeRect(200,20,180,260);　//　矩形の輪郭を描く

canvas sample2 - jsdo.it - share JavaScript, HTML5 and CSS

上のコードは矩形じゃなくて、パスを書くもの。パスを繋げて三角形とかを書ける。

　ctx.beginPath(); // パスの開始
　ctx.moveTo(50,50); // パスの始点を移動する
　ctx.lineTo(360,200); // 現在の始点の座標から、座標(x, y)に向けて直線を描く
　ctx.closePath(); // パスを閉じる(始点に向けて直線を描くことで図形を閉じる)
　ctx.stroke();　// stroke();で輪郭線
　ctx.fill(); // fill();で塗り潰し

canvas sample3 - jsdo.it - share JavaScript, HTML5 and CSS

上のコードは丸を書くもの。arc メソッドを使う。

　arc(x, y, radius, startAngle, endAngle, anticlockwise)

引数は5つ。
・x と y は円の中心
・Radius は半径
・startAngle と endAngle パラメタは円弧の始まりと終点をラジアン角で定義します
・anticlockwise パラメタは true の時には円弧を反時計回りに、それ以外は時計回りの方向に描く

canvas sample4 - jsdo.it - share JavaScript, HTML5 and CSS

色のつけ方。

　ctx.globalAlpha = 0.5;　//←透明度
　ctx.fillStyle = '#3399ff'; //←塗りの色
　ctx.strokeStyle = '#ff9933'; //←線の色

とりあえず今日はこんなとこで。
canvasはいろいろできそうな感じで興味深く、奥が深い！＞＜

参考サイト：HTML 5 canvas要素 + Javascriptで作る、動的コンテンツ | yoppa.org

CSS3 @font-faceの使い方

クライアントPCにインストールされてないフォントでも表示させることが可能になる@font-faceについて。
動作確認はsafari, Google Chromeで確認。（参考サイトにはfirefoxもOKって書いてあるけど表示されなかった。フォントの種類の問題かな？）

（11/10追記）
winで見れなかった。truetypeってmacだけ？
フォントは奥が深い・・・。

@font-face sample - jsdo.it - share JavaScript, HTML5 and CSS

まずは@font-faceセレクタでフォントの名前（font-family）とフォントファイルへのパス（src）を指定する。

（例）
　@font-face{
　　font-family:'Justice by Dirt2'; /* fontの名前 */
　　src:url('http://dl.dropbox.com/u/5882398/Justice%20by%20Dirt2.ttf') format('truetype');　/* truetypeフォント*/
　}

次にbodyセレクタで先に指定しておいた@font-face内の名前を指定する。

（例）
　body {
　　background-color: #fff;
　　font-size: 100px;
　　font-family:Justice by Dirt2; /* @font-faceで指定したfont-familyの名前 */
　}

これだけ。

整理すればそんなにややこしいことしてないんだなって印象。
IEに使うこともできるみたいだけど今はいいのでここまで。

参考サイト：CSS3 「gradient」と「@font-face」