HTMLファイ部のしんちゃんです。よろしくぅ(^o^)/
「顔文字」と「ASCII Art」はほとんど毎日使っていますが、
コードで表現するとどうなるのか考えたことはありますか？
jsdo.itでは「第三回HTML5実技コンテスト」が現在開催中です。
今回のお題は、HTML5で表情豊かに表現する「顔文字(・∀・)」です。
顔文字とASCII ArtがHTML5最先端の技術との融合は、
果たしてどんな結果を生み出せるかを考えたらワクワクしますよね。
((o(´∀｀)o))ﾜｸﾜｸ
では、さっそく投稿したコードをいくつか見ていきましょう！
おはこんばんちは！ファイ部のしんちゃんです。
中国の上海から来日して一ヶ月、日本料理を食べることに限らず、最近作ることにも挑戦し始めました。
（来日前の自炊歴はほぼゼロですが...さすが「つくる人を増やす」のカヤックです！）
今日も和風弁当に挑戦しつつ、男子力UPを図ろうと思っています。
さて、jsdo.it主催の「第一回全国統一HTML5実技コンテスト」では、
「じゃんけんゲーム」をお題にしたコンテストが熱く繰り広げられております。
今回のコンテストは、これまでとは一味ちがいます！
今回は優秀者に豪華賞品の詰め合わせがもらえます！
なんと、あのiPad miniも賞品の詰め合わせに入っています！
あと、SONYヘッドマウントディスプレイも！
さすがにほしくてたまりません！
HTML5で夢中にさせる「じゃんけんゲーム」というお題で、
以前と違って、技術力より、企画力と発想力が主に審査されます。
もし技術にあまり自信ないと思う方でも、どんどんご投稿ください！
優秀者には「あの企業」からのスカウトが来るかもよ！
11月22日(木)に、DeNA本社内のカフェテリア「Sakura Cafe」で、
HTML5実技コンテスト授賞式と、
HTML5についての勉強会を兼ねたイベントを開催します。
こちらのイベントは、コンテスト参加者以外の方も参加できます！
詳しく知りたい方はぜひjsdo.itユーザ設定画面にてメールアドレスをご登録ください！
（jsdo.itアカウントが必要です。）
ルールが差し替えられ、新しいゲームとして生まれ変わったじゃんけん作品が多数投稿されております！
さっそく投稿作品のいくつかを紹介します。
はじめまして。ファイ部新卒のしんちゃんです。中国の上海から来ました。
日本に来て、やっと本場のとんこつラーメンを食べることができて、感動ですっ！
さて、Web Creator's Contest Q（HTML、CSS、JavaScript エンジニアのためのコンテストサイト）では、
新しい楽器をテーマにしたコンテストが開催されています。
楽器経験者の方はたくさんいらっしゃると思いますが、
ブラウザ上で動く楽器を演奏すると聞いたら、一体どんな楽器をどんな方法で演奏するかには、
実に興味津々ですね。
発想力に富んだコードが次々と投稿されています！
さっそくそのなかの幾つかを紹介しようと思います！
HTMLファイ部のほんだです。シュッ
「ページ遷移」、聞くだけでゾクゾクしませんか？ 僕は大好きです。
Web Creator's Contest Q（HTML、CSS、JavaScript エンジニアのためのコンテストサイト）では、
ページ遷移・画面遷移をテーマにしたコンテストを開催中です。
とても好評で、5回目となった当コンテスト。
今回のテーマも、力の入ったコードがたくさん投稿されています！
jsdo.itで書いたコードをブログに埋め込んで紹介することができます。
これまでは一番行数の多いコードのタブを表示していましたが、見せたいタブを選べるようになったので記事の中で紹介しやすくなりました。
右上の最大化ボタンをクリックすると新しいタブでウィジェットを大きく表示できます。コードをじっくり読みたいときや、大きな画面でプレビューしたいときに便利です。
Readmeのタブにシェアボタンを追加しています。
初夏。HTMLファイ部の本多です。
夏祭りが待ちきれないあなたのために、金魚すくい顔負けのハマるゲームをご用意しました！
カヤック運営のHTML5ゲームの投稿プラットフォーム「jsdo.it HTML5-Games」から、
HTML5でつくられたブウラザゲームを紹介します。
※ Chrome、Safari など、最新のモダンブラウザでご覧ください。
ブロック崩しならぬパーティクル崩し！
最初はガマン...！
数分間打ち返し続けると、フィーバータイムに突入します！
jsdo.itで開催中のイベント「Web Creator's Contest "Q"」で「桜」を募集したところたくさんの投稿が集まっています。まだ募集期間中ですが、花見シーズンが終わる前に投稿作品の一部を紹介したいと思います！
このFlashで作られた作品をHTML5でリメイクするのが今回の課題です。
こんにちわ。HTMLファイ部のふちがみです。
HTML5のすごいコンテンツやニュースをキャッチアップしきれない！知らないところでバズってる！と悔しい思いをしている方も多いと思います。そこで、ミーハーなファイ部のメンバーに「どうやって情報収集をしているか」を聞いてみたのでまとめてみました。
jsdo.itでコーディングコンテスト「Web Creator's Contest Q」が開催中です。
現在募集中のテーマは「ブラウザで動くTODOアプリ」。
お手本コードをフォークして書き始めてもいいし、ゼロから書いても参加してもOKなコンテストです。
締切は今週の水曜日、3月28日です。
1位「MacBook Air」、2位「Apple TV」、3位「Web Money 5000円分」と賞品も超豪華なのでぜひぜひご参加ください！
と、いつものテンプレPR文はここまでにして、続々と集まっている投稿作品の一部をご紹介したいと思います。今回も皆さんかなり、本気出し過ぎですね…！
さて、ものすごく突然で恐縮ですが、この度「HTMLファイ部」、設立しました！
株式会社カヤック（本社：神奈川県鎌倉市、 代表取締役CEO：柳澤大輔、http://www.kayac.com以下「カヤック」）は、HTML＋CSSコーディング、JavaScript プログラムを担当する職種が所属する「HTMLファイ部」を発足いたします。
これまでHTMLおよびCSS、JavaScriptの担当者は、プログラマが所属する技術部、デザイナが所属する意匠部ME課（MEはMarkup Engineerの略）に分かれて所属していましたが、昨今のHTML5の進化と普及を受けて、HTML、CSS、JavaScriptの担当者は「HTMLファイ部」にて活動をスタートします。
そんなHTMLファイ部員が今回お送りさせていただくのは、 HTML5 について基礎から学ぶ方のために、参考サイト・資料、ギャラリー、勉強法などなどまとめてみました！
それでは、続きからどうぞ！
あいつ仕事してないで女の子のイラストばっかりいじってるぞと陰ながら言われていた喜納です。
HTML5で動くSVGアニメーション「SVG女子」がラスベガスでのマイクロソフト基調講演MIX11で公開され、
世界を（いろんな意味で）驚かしてきましたが、
ついに本日、日本でも公開されました！
しかも日本版に合わせてアニメーションも長くなっています！
こっそりブラウザを英語にして見ていた人も必見です！
（神風動画さんによる予告編動画！）
神風動画さんによるハイクオリティアニメーションをSVGで再現すると言う試み、
プログラムについては
で担当プログラマーの吾郷が説明していますが、とにかく
SVGといえば拡大しても荒れる事の無いベクター形式で、pngよりも軽くつくれたりすることで使われていますが、
今回は1500枚を超えるレイヤーによる250コマに及ぶ大量のSVG！
それをぐりぐり動かすとあって、そう簡単にはいきませんでした。
この記事ではイラストをSVGに変換する過程で得た、SVGの軽量化テクニックをご紹介したいと思います〜
（あとイラレでSVGを扱った時のバグを未解決も含めていくつか）
SVGってなに？って方はこの記事をみてからどうぞ！
面白法人カヤックは、卒業制作をがんばったあなたを積極採用いたします。卒業制作に打ち込みすぎて就職活動が終わってた！そんな方も大歓迎です。私たちの経営理念は「つくる人を増やす。」つくることに打ち込んで、力のこもった作品を生み出したあなたと、一緒に働きたいと思っています。
卒制に打ち込んでいた学生の皆さんにぜひぜひ応募していただきたいと思っています！
ME志望の学生さんの中には
「学生時代は三度の飯よりコーディングに打ち込んでました」という方もいるのでは・・・！
ぜひとも、そういう学生さんにもエントリーしてほしい・・・！
ということで、担当にかけあってきました！
「卒制採用」とは、あくまで別軸ですが、特別に「コーディング推薦」を行います！
以下の原稿を「あなたらしく」マークアップ・装飾してください。
ME課 コーディング推薦 課題 - jsdo.it - share JavaScript, HTML5 and CSS
あなたらしい、学生生活の集大成のような作品をお待ちしております！
W3Cは、このロゴは「HTML5、CSS、SVG、WOFFといったオープンWeb技術群を表す汎用ロゴマーク」だとしている。Webサイトに表示したり、Tシャツなどのグッズに利用することができる。既にMicrosoftのInternet Explorer 9 Test Driveサイトなどがこのロゴを表示している。ロゴはクリエイティブ・コモンズライセンスの下で提供されている。
デザイナーズブログもhtml5なので、フッターにこのロゴを表示しました！
公式サイトはこちら。
ロゴには二種類あります。
用いている技術をアイコンにして表示するパターンと、静的な画像を
縦横タイプはアイコンを選べます。設置するサイトで用いている技術をアイコンにして表示することができるみたいです。
設置サイトで用いているhtml5の技術を選択するとアイコンが切り替わります。
コードをコピーしてサイトに貼りつけるだけ！簡単ですね。
ロゴだけのパターンや個別のアイコンなどの素材も公開されています。
これらの画像を設置してもよいでしょう。
PNGだけじゃなく、SVGファイルもあるだなんて！
弊社ではhtml5を使っている自社サービスもあります。こちらにもロゴを設置させていただきました！
初めまして。11月からME課で働いている久保田(@ta2_o2p)です。よろしくお願いします！
自分の仕事としては、携帯サイト中心にコーディングを行っているのですが、BMKidsの縁起物と笑い袋の紹介ページのコーディングを行ったり、他にも色々とPCサイトのコーディングをしています。
さて、実はカヤックで働き始めてHTML5を本格的に触ったのですが、触れていくうちに「HTML5はややこしい所があるなー」と思い、この記事を書きました。
そういう訳で、HTML5でコーディングするに当たって間違いやすいポイントについて、書いていきたいと思います。
本題とは反れますが、HTML5でコーディングするにあたって、押さえておきたいポイントを2つ書きます。
今までは以下のようにmeta要素の中に長々と属性を指定していたと思います。
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
しかし、HTML5ではこう書きます。
<meta charset="UTF-8">
「え？これだけ？」と思った人もいると思いますが、これだけです。簡単ですね。
IE9ではHTML5をサポートするようですが、現時点で多く使われているIE6～8はHTML5に対応していません。 header要素やfooter要素にCSSで装飾してもそれが全く反映されないのです……
しかし、html5.jsというJavaScriptを読み込ませる事により、IE6～8でもCSSを反映させる事が出来ます。
<!--[if lte IE 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
では、本題に入りたいと思います！
asideを見直す(http://www.html5.jp/html5doctor/aside-revisited.html)によると、
メインのコンテンツほど重要な役割を持たないコンテンツだけれども、それがページや記事に関連しているなら、ビジュアル・デザインの有無にかかわらず、aside が適切。
と書かれています。つまりasideはサイドバーをコーディングする時に使用してもいいという事になります。 例としては下のようになります。
<article> <h1>記事タイトル</h1> <p>本文本文本文本文本文</p> </article> <aside> <section> <h2>最新記事一覧</h2> <ul> <li><a href="/">記事タイトル</a></li> <li><a href="/">記事タイトル</a></li> <li><a href="/">記事タイトル</a></li> </ul> </section> </aside>
しかし、ページや記事と関係ない物をサイドバーに置く事も考えられます(特に広告など)。 ページや記事と関係ない物を置く場合は、サイドバーをdivで囲ってコーディングしたほうが良いと思います。
<article> <h1>記事タイトル</h1> <p>本文本文本文本文本文</p> </article> <div id="sidebar"> <section> <h2>最新記事一覧</h2> <ul> <li><a href="/">記事タイトル</a></li> <li><a href="/">記事タイトル</a></li> <li><a href="/">記事タイトル</a></li> </ul> </section> <div class="ad"> <p>広告</p> </div> </div>
またasideは、サイドバーだけに使用されるのではなく、article内などでも使う事が出来ます。
使う場面としては、例えば百式(http://www.100shiki.com/)の記事の下にある管理人の独り言のような所や、記事の中に専門用語を書いた時の解説の役割を果たす用語集などがあると思います！
<article>と<section>は似た物同士に見えて、実は！全く違う物です。
まず<article>は、ブログの記事や記事に投稿されたコメントなど、メインコンテンツとなるような項目をマークアップする時に使います。 そして<section>は、文章の構成を示す物となります。
例えば、『永久保存版！？携帯コーディング、これだけ読めばすぐできる！（テンプレートのおまけつき）』という記事を例にあげると、
<section> <h1>携帯コーディングの基本</h1> <section> <h2>基礎の基礎</h2> <p>内容～</p> </section> <section> <h2>docomoでCSSを使う</h2> <p>内容～</p> </section> </section> <section> <h1>携帯コーディング独自テクニック</h1> <section> <h2>共通項目</h2> <h3>DTD、xml宣言</h3> <p>内容～</p> </section> </section>
という風にコーディングされます。
<section>のコーディングのコツとしては、本の目次を作る感覚でコーディングすれば上手くいくと思います！
コーディングは好きですか？私は大好きです！
DE課でME課なgunjiです。
カヤック意匠部では、デザイナーも全員コーディングを一度は経験し、
ちょっとしたコーディングならME（マークアップエンジニア）課に依頼せず
自分たちでやります。
単に人手が足りないときもありますが、WEBデザイナーならやっぱり
コーディングの考え方を理解していた方が、WEBに最適なデザインが
できるようになるから という理由もあります。
そのため、新人さんや、中途でも紙の分野から来た方には
オリジナルのコーディング課題をお出ししています。
今回はそんな課題の第1回を、
思い切って公開してみたいと思います。
ダウンロードする
続きには模範解答と簡単な解説を掲載しました。
やるだけでコーディングがみるみるできるような気分になりますよ！
HTML5で出来たこのサイトがbいいね！って事で、
最近見たものからきょうBuzzってるHTML5のサイトを幾つかご紹介します。
良く出来てるHTML5増えてますね。
カッコbいいね！
o(●´ω｀●)oわくわくしたw
http://www.google.co.jp/hotpot#
美しい! 格好良い! インフォグラフィックスまとめ記事って最近よく目にしますね。
一目見ただけで引き込まれる作品ばかりで、自分も沢山ストックしてます。
はじめまして。 このブログで書くのは初めてのME課の比留間(@edo_m18)です。
今回は9/23に開催される「DeNA × 面白法人カヤック × クリーク・アンド・リバー社 セミナー」で、 自分のセッションのプロローグを書きたいと思います。 セッションのタイトルは「もしも、マークアップエンジニアがひとりでWebサイトをつくるとしたら ～HTML5でつくるWebアプリ～」です。
話の内容は、最近なにかと目にする「HTML5」について。
その中でも関連API(JavaScript)を使ったwebアプリについて話したいと思っています。
HTML5になることで、今まではサーバを介してしかできなかったこと、そもそもブラウザ上では実現不可能だったことが実現できるようになります。
これを利用して、マークアップエンジニア(だけ)でも作れる、ちょっとしたwebアプリを紹介しながら、HTML5の可能性について話そうと思います。
カヤックのME は、uemura率いる意匠部ME課（メカ）に所属しています。
ME課のお仕事は、コーディングを覚えたい新人デザイナーのサポートも担っているのですが、
そんななかで出会った、新人にありがちな勘違いネタについてエントリーを書いてみたいと思います。
これから紹介する勘違いや誤解はME課が全力で解いているのでご安心ください ♪
