Tags

閉じる

Category

閉じる

Search

Search

閉じる

( ・ω・)⊃ “ html5 “ の検索結果

HTML5の最先端技術で顔文字はこんなにおもしろくなる

HTMLファイ部のしんちゃんです。よろしくぅ(^o^)/

「顔文字」と「ASCII Art」はほとんど毎日使っていますが、
コードで表現するとどうなるのか考えたことはありますか?

jsdo.itでは「第三回HTML5実技コンテスト」が現在開催中です。
今回のお題は、HTML5で表情豊かに表現する「顔文字(・∀・)」です。

顔文字とASCII ArtがHTML5最先端の技術との融合は、
果たしてどんな結果を生み出せるかを考えたらワクワクしますよね。
((o(´∀`)o))ワクワク

では、さっそく投稿したコードをいくつか見ていきましょう!

続きを読む

こんにちは~!意匠子です!
最近はふんどしにハマってます☆

先週開催された、jsdo.it主催『放課後のHTML5 vol.2』の様子を 写真レポートしちゃうよっ!

この勉強会イベントは、
『HTML5の最新の動向や今後の展望』をテーマにした講演
『第二回 HTML5実技コンテスト』結果発表&表彰式
の二本立てで行われました。

会場は、前回と同じく、話題の渋谷ヒカリエ!
DeNAさんにオシャレな社内カフェテリアを貸していただきました。
ありがとうございました~!

では、盛り上がったイベントの様子をさっそく見ていきましょ~!

続きを読む

動くぞ!きれいだぞ! ヘ(・_・ヘ)

とにかく痩せたい、HTMLファイ部のほんだです。

jsdo.itnakamapPaberishHTML5実力テストといった自社運営Webサービス
HTML5エンジニアを担当している者です。

jsdo.it、ユーザー数 5万人突破!

手前味噌ですが、このたび弊社運営のHTML5コード共有コミュニティ「jsdo.it」が、
ユーザー数 5万人を突破しました!(わーい!)

今回の記事では、jsdo.itのユーザー5万人を記念して、
HTML5 Canvas に芸術的な動きを表現しているJavaScriptコード「アートスクリプティング」を特集します!

あまり一般的ではないようですが、「アートスクリプティング」という言葉でくくってみました。

続きを読む

こんにちは~!意匠子です!
最近はローソンのからあげクン・トリプルジャン味にハマってます☆

先週開催された、jsdo.it主催『HTML5実力テスト答え合わせ勉強会』の様子を 写真レポートしちゃうよっ!

この勉強会イベントは、

の二本立てで行われました。

会場は、話題の渋谷ヒカリエ!
DeNAさんにオシャレな社内カフェテリアを貸していただきました。
ありがとうございました~!

表彰式のプレゼンターには、キュートなサプライズゲストも登場!
盛り上がったイベントの様子をさっそく見ていきましょ~!

続きを読む

「HTMLファイ部」のほんだです(・Å・)∫

jsdo.itnakamapPaberishHTML5実力テストといった自社運営Webサービスの
HTML5エンジニアをやっているものです。

よろしくお願いします!


「HTMLファイ部」創立1周年!

非常に手前味噌ではございますが、
弊社HTMLファイ部が創立から1年になりましたっ!・u・

HTMLファイ部は、「HTML5」技術を軸に、様々な表現に挑戦していくエンジニアを集めた部署となっています。

今回の記事では、HTMLファイ部の一周年を勝手に記念して、
HTMLファイ部のメンバーからかき集めてきた、HTML5サイト制作ツールをまとめます!

続きを読む

おはこんばんちは!ファイ部のしんちゃんです。

中国の上海から来日して一ヶ月、日本料理を食べることに限らず、最近作ることにも挑戦し始めました。
(来日前の自炊歴はほぼゼロですが...さすが「つくる人を増やす」のカヤックです!)
今日も和風弁当に挑戦しつつ、男子力UPを図ろうと思っています。

さて、jsdo.it主催の「第一回全国統一HTML5実技コンテスト」では、
「じゃんけんゲーム」をお題にしたコンテストが熱く繰り広げられております。

今回のコンテストは、これまでとは一味ちがいます!

1. 賞品は前回よりさらにパワーアップ!

今回は優秀者に豪華賞品の詰め合わせがもらえます!
なんと、あのiPad miniも賞品の詰め合わせに入っています!
あと、SONYヘッドマウントディスプレイも!
さすがにほしくてたまりません!

2. お題は企画力、発想力を重視!

HTML5で夢中にさせる「じゃんけんゲーム」というお題で、
以前と違って、技術力より、企画力と発想力が主に審査されます。
もし技術にあまり自信ないと思う方でも、どんどんご投稿ください!
優秀者には「あの企業」からのスカウトが来るかもよ!

3. リアルイベントが開催!

11月22日(木)に、DeNA本社内のカフェテリア「Sakura Cafe」で、
HTML5実技コンテスト授賞式と、
HTML5についての勉強会を兼ねたイベントを開催します。
こちらのイベントは、コンテスト参加者以外の方も参加できます!
詳しく知りたい方はぜひjsdo.itユーザ設定画面にてメールアドレスをご登録ください!
jsdo.itアカウントが必要です。)

ルールが差し替えられ、新しいゲームとして生まれ変わったじゃんけん作品が多数投稿されております!
さっそく投稿作品のいくつかを紹介します。

続きを読む

こんな発想はなかった!HTML5でつくられた楽器まとめ

はじめまして。ファイ部新卒のしんちゃんです。中国の上海から来ました。

日本に来て、やっと本場のとんこつラーメンを食べることができて、感動ですっ!

さて、Web Creator's Contest Q(HTML、CSS、JavaScript エンジニアのためのコンテストサイト)では、
新しい楽器をテーマにしたコンテストが開催されています。

楽器経験者の方はたくさんいらっしゃると思いますが、
ブラウザ上で動く楽器を演奏すると聞いたら、一体どんな楽器をどんな方法で演奏するかには、
実に興味津々ですね。

発想力に富んだコードが次々と投稿されています!
さっそくそのなかの幾つかを紹介しようと思います!

続きを読む

HTMLファイ部のほんだです。シュッ

「ページ遷移」、聞くだけでゾクゾクしませんか? 僕は大好きです。

Web Creator's Contest Q(HTML、CSS、JavaScript エンジニアのためのコンテストサイト)では、
ページ遷移・画面遷移をテーマにしたコンテストを開催中です。

とても好評で、5回目となった当コンテスト。
今回のテーマも、力の入ったコードがたくさん投稿されています!

続きを読む

仲夏。HTMLファイ部の本多です。

jsdo.itにて、コーディングコンテスト「Web Creator's Contest Q」を開催しています。
QはWebクリエイターのためのコンテスト、HTML5、JavaScript、CSSを駆使して挑戦しましょう!

募集中のテーマはズバリ、

夏を涼しくする表現

暑い夏をひんやり涼しくしてくれる作品をお待ちしています!

本記事では、続々と集まっている投稿作品の一部をご紹介します。
夏の暑さでやる気のでない方、涼しくてアツいHTML5作品をご堪能あれ!

※ Chrome、Safari など、最新のモダンブラウザでご覧ください。

続きを読む

初夏。HTMLファイ部の本多です。

夏祭りが待ちきれないあなたのために、金魚すくい顔負けのハマるゲームをご用意しました!

カヤック運営のHTML5ゲームの投稿プラットフォーム「jsdo.it HTML5-Games」から、
HTML5でつくられたブウラザゲームを紹介します。

※ Chrome、Safari など、最新のモダンブラウザでご覧ください。

HTML5ゲームまとめ

JSパーティクル崩し

ブロック崩しならぬパーティクル崩し!

最初はガマン...!
数分間打ち返し続けると、フィーバータイムに突入します!

jsdo.it HTML5-Gamesでみてみる。(詳細説明あり)

続きを読む

HTML5ゲームの投稿プラットフォーム「jsdo.it HTML5-Games」がスタート!

HTMLファイ部ほんだです。

カヤックの新規開発事業部「ブッコミジャパン」が、
HTML5ゲームをあそべる、つくれるプラットフォーム「jsdo.it HTML5-Games」をリリースしました!

jsdo.it(弊社運営のHTML5コード共有サイト)からHTML5ゲームを簡単に投稿でき、
他のクリエイターによって投稿されたゲームを無料で遊べます!

また、スマートフォンをコントローラーにしたゲームを簡単につくれるようになる
JavaScriptライブラリ「jsdoitController.js」もリリースしました。

今回は「jsdoitController.js」で使えるようになる
jsdo.it WebSocket Controller」(以下:jsdo.it コントローラー)の
仕組みについてお話ししたいと思います!

続きを読む

HTML5関連の情報源のまとめ(2012年4月版)

こんにちわ。HTMLファイ部のふちがみです。

HTML5のすごいコンテンツやニュースをキャッチアップしきれない!知らないところでバズってる!と悔しい思いをしている方も多いと思います。そこで、ミーハーなファイ部のメンバーに「どうやって情報収集をしているか」を聞いてみたのでまとめてみました。

続きを読む

好きなプロパティは「-webkit-animation-delay」の渕上です。

昨年、卒制採用にのっかって行った「コーディング推薦」。今年もやることになりました!

コーディング推薦って?

KAYACの採用キャンペーンの一つです。
コーディング推薦用の課題にHTML・CSS・JavaScriptで回答していただき、弊社のHTMLファイ部のメンバーが「キュン」としたコードを書いた方を全力で推薦します!就活よりも卒業制作よりもコーディングを頑張ってしまった学生さん、履歴書よりもHTMLを書いていたい求職中のコーダーさんにぜひオススメしたいキャンペーンです!!

課題

以下の原稿をあなたらしくマークアップ・装飾してください!

HTMLファイ部 コーディング推薦 課題 - jsdo.it - share JavaScript, HTML5 and CSS

  • 写真袋」というiPhoneアプリのランディングページを想定しています
  • 検証環境はGoogle Chromeの最新版です
  • 画像の使用は自由です
  • 内容が伝われば、原稿の内容を多少イジっても構いません

素材

写真袋のマスコット「むらかみさん(クマ)」のウェブフォントが公開されています。自由に使ってください!

HTMLファイ部 コーディング推薦 フォント素材 - jsdo.it - share JavaScript, HTML5 and CSS

参加方法

jsdo.itでアカウントを作成し、課題のコードを「フォーク」して参加してください。
(フォークとは、元のコードを改変してあなたなりの作品を作ることです。)
作品が投稿されると自動的にエントリーとなります。

結果発表

投稿されたコードはファイ部のメンバーが随時チェックしていきます。
メンバーが「キュン」としたコードの制作者にはjsdo.itのマイページからご連絡いたします。

締切は3/31です。

ファイ部の @calmbooks が挑戦してみました

好きなタグは「em」、好きな女性は「PSDがキレイな人」だそうです。

回答サンプル forked: HTMLファイ部 コーディング推薦 課題 - jsdo.it - share JavaScript, HTML5 and CSS

光から移動まで、すべてCSSで作る光るアニメーション

光から移動まで、すべてCSSで作る光るアニメーション

 

ゲーム型キャンペーンサイト「URBAN RESEARCH Christmas 2011」

意匠部ME課あらため、HTMLファイ部所属となった比留間です。

今回は、先日リリースした「アーバンリサーチ」のキャンペーンで
「アーバンサンタ」からのプレゼント、というサイト制作に携わりました。

簡単にキャンペーンの概要を説明すると、Webとアーバンリサーチの店舗が連動して先着でクリスマス限定のキャンドルをもらえるというキャンペーンです。
内容はサイト内に隠されたプレゼントボックスを見つけ出して、それをアーバンサンタにおねだりする、
というとてもシンプルなゲーム型キャンペーンサイトになっています。
さらに抽選でおねだりした商品がもらえるので、ぜひぜひ参加してみてください。

さて、今回この記事でご紹介したいのは、
このキャンペーンサイトで使用した「CSSで作る光のアニメーション」の作り方を
簡単に説明したいと思います。

これを追加したことによって、だいぶ雰囲気が出ました。(アーバンリサーチのゲームページで雰囲気を確認
HTMLファイ部ということで、HTML5関連技術であるCSS3をメインに使用したものとなっています。
jsdo.itにもサンプルコードが載っているので、自分で色々といじってみたい方は以下のサンプルコードをForkしてみてください。

ホタルっぽい雰囲気の演出をCSSだけで作る - jsdo.it - share JavaScript, HTML5 and CSS

ホタル風オブジェクトのベースを作る

ということで、早速作り方に入って行きます。
まず、ホタル風オブジェクトのベースとなるオブジェクトを作ります。
今回のサンプルではdiv要素ひとつに、CSS3で色々とスタイルを当てていきます。

実際に使ったコードは以下。

	.fireflyDot {
        width: 4px;
        height: 4px;
        background-color: rgba(255, 241, 202, 0.8);
        border-radius: 2px;
        box-shadow: 0 0 5px rgba(255, 241, 202, 0.8), 0 0 8px rgba(255, 241, 202, 0.8), 0 0 15px rgba(255, 241, 202, 0.9);
    }
    

見てもらうとわかりますが、数種類のプロパティだけで実現しているのがわかります。
これを適用したものが↓
firefly.png

ベンダープレフィクス(-webkitとか)とCSS3の細かな説明は省きますが、widthとheightでサイズを、border-radiusで丸みを、そしてbox-shadowでふんわり光る光彩を演出しています。

実際のホタル風オブジェクトの生成などについてはJavaScriptで対応していますが、サイズや光加減などをすべてCSSで実現しているので、サイズや色味を自由に変更できるのが強みです。

ホタル風オブジェクトを動かす

上記のCSSを適用することでホタル風オブジェクトが表現できました。
しかし、ただ配置しただけではただのぼやけた丸ですね。
なので動きを加えてみましょう。
そしてその動きの部分もCSSで対応します。

使用している主なプロパティは以下。

	opacity: 0;
        transition-property: transform, opacity;
        transition-duration: 2.5s;
        transition-timing-function: ease-out;
    

これだけです。
動きの実装で重要なのはtransitionプロパティだけ、ということになります。(移動の際の位置指定はJavaScript側で自動生成しているため)
このtransitionプロパティ、設定しておくとtransition-propertyプロパティで指定したプロパティの値(サンプルではtransform、opacity)に変化があった際、トランジション(遷移)を伴って変化を表現する、というものです。

つまり、サンプルで指定している「transform」と「opacity」の変化を監視させることで、その値が変更された際に、それをアニメーションで表示する、というものになります。
そしてJavaScriptで移動後の位置を動的に決定し、それを指定してあげれば、あとはCSSが勝手にアニメーションをつけてくれる、というわけです。
これだけで、移動と同時に透明度も1→0と変化するためホタルが光ってふんわりと消えながら移動する、というような演出が完成します。

もちろん、こうした処理はCSS3のtransitionやtransformに対応していないと動作しませんが、jQueryを使えばこれと似たような処理を実現することは可能です。(animateメソッド)

iPhone / Android対応

今回の実装のいいところとしては、CSSで表現しているためスマートフォンでも表示可能なこと、とりわけiPhone/iPadではとてもスムーズにアニメーションが実行される点です。

Mobile Safariでは、指定方法によってはCSSによるアニメーションはGPUを利用してレンダリングされるためPCと同じようになめらかに表示される、という特性があります。

もしスマートフォンをお持ちの方は、ぜひキャンペーンサイトをスマートフォンでも見てみてください。
PCとほぼ同じ感じで表示されるのが分かるかと思います。
もちろん、ゲームもプレイできるので、スマートフォンからも楽しめるコンテンツとなっています。

HTML5 旋風、吹き荒れてますね!(^0^)/

さて、ものすごく突然で恐縮ですが、この度「HTMLファイ部」、設立しました!

株式会社カヤック(本社:神奈川県鎌倉市、 代表取締役CEO:柳澤大輔、http://www.kayac.com以下「カヤック」)は、HTML+CSSコーディング、JavaScript プログラムを担当する職種が所属する「HTMLファイ部」を発足いたします。

これまでHTMLおよびCSS、JavaScriptの担当者は、プログラマが所属する技術部、デザイナが所属する意匠部ME課(MEはMarkup Engineerの略)に分かれて所属していましたが、昨今のHTML5の進化と普及を受けて、HTML、CSS、JavaScriptの担当者は「HTMLファイ部」にて活動をスタートします。

そんなHTMLファイ部員が今回お送りさせていただくのは、 HTML5 について基礎から学ぶ方のために、参考サイト・資料、ギャラリー、勉強法などなどまとめてみました!

それでは、続きからどうぞ!

続きを読む

地獄のミサワがCSS3の勉強に最適と話題に

CSS3に興味はあるけど、きっかけが無いなあと思っている方へ

こんにちわ、jsdo.it担当のふちがみです。

最近jsdo.itで地獄のミサワをイジりながらCSS3やcanvas、javascriptを学ぶ動きが活発なんです。

「それ2年ぐらい前に見たわー」という方も続きからどうぞ!

続きを読む

弊社では「卒制採用」を始めました。

卒制採用2011

面白法人カヤックは、卒業制作をがんばったあなたを積極採用いたします。
卒業制作に打ち込みすぎて就職活動が終わってた!そんな方も大歓迎です。
私たちの経営理念は「つくる人を増やす。」
つくることに打ち込んで、力のこもった作品を生み出したあなたと、一緒に働きたいと思っています。

卒制に打ち込んでいた学生の皆さんにぜひぜひ応募していただきたいと思っています!

とはいえ、、、

ME志望の学生さんの中には
「学生時代は三度の飯よりコーディングに打ち込んでました」という方もいるのでは・・・!
ぜひとも、そういう学生さんにもエントリーしてほしい・・・!

ということで、担当にかけあってきました!
「卒制採用」とは、あくまで別軸ですが、特別に「コーディング推薦」を行います!

就活よりコーディングを頑張ったあなたを推薦します!「コーディング推薦」!

  1. 対象は 2011年3月に卒業予定の方
  2. jsdo.itで「課題」に挑戦していただきます(課題については後ほど説明します)
  3. 卒制採用のページから、作品のURLを添えてエントリーしてください。希望職種の欄には「意匠部(ME課・コーティング推薦)」とご記入ください
  4. 集まった作品をME課のみんなで見させていただき、「これは!!」という作品を投稿頂いた方をME課から推薦・面接に進んでいただきます!
    ※その他詳細は、卒制採用に準じます

課題について

以下の原稿を「あなたらしく」マークアップ・装飾してください。

ME課 コーディング推薦 課題 - jsdo.it - share JavaScript, HTML5 and CSS

ポイント!

  • 上記の作品をフォーク(改変)して作成してください
  • htmlのテキスト情報を適切にマークアップしてください(多少の改変はOKです)
  • デザインは自由です。あなたらしく装飾してください。
  • javascriptは使用しても使用しなくても構いません

あなたらしい、学生生活の集大成のような作品をお待ちしております!

HTML5使ってます!をロゴで表示しよう!

W3Cは、このロゴは「HTML5、CSS、SVG、WOFFといったオープンWeb技術群を表す汎用ロゴマーク」だとしている。Webサイトに表示したり、Tシャツなどのグッズに利用することができる。既にMicrosoftのInternet Explorer 9 Test Driveサイトなどがこのロゴを表示している。ロゴはクリエイティブ・コモンズライセンスの下で提供されている。

W3C、HTML5ロゴを発表 - ITmedia News

デザイナーズブログもhtml5なので、フッターにこのロゴを表示しました!

HTML5 Powered with CSS3 / Styling, Graphics, 3D & Effects, and Semantics

 

1分でわかる設置方法

公式サイトはこちら。

ロゴには二種類あります。
用いている技術をアイコンにして表示するパターンと、静的な画像を

アイコンを選ぶパターン

縦横タイプはアイコンを選べます。設置するサイトで用いている技術をアイコンにして表示することができるみたいです。
設置サイトで用いているhtml5の技術を選択するとアイコンが切り替わります。
コードをコピーしてサイトに貼りつけるだけ!簡単ですね。

img01.png

静的な画像を設置するパターン

ロゴだけのパターンや個別のアイコンなどの素材も公開されています。
これらの画像を設置してもよいでしょう。
PNGだけじゃなく、SVGファイルもあるだなんて!

img02.png

おまけ

弊社ではhtml5を使っている自社サービスもあります。こちらにもロゴを設置させていただきました!

kbthm.png

 

SPEC - Flash and HTML5 -とは

ブラウザ上でFlashを作成できる「wonderfl」と、JavaScript、HTML、CSSを実行できる「jsdo.it」が
提供する公開型リクルーティングイベントです。
企業出題するテーマに対して、ユーザーが得意なプログラム言語で回答するものです。
気になるユーザーの方には、運営事務局を通してスカウトされる場合があります。

審査形式

審査員:株式会社サイバーエージェント
Flash部門、JavaScript,HTML5,CSS部門それぞれから優秀作品を3作品発表。
該当者なしの可能性もあり
作品投稿者の中から、気になる作品投稿者へ、スカウト実施。

Vol1 テーマ


モンスターを捕まえて、育て、戦わせるゲーム『GYAOS!(ギャオス)』のバトルシーンの演出方法を追求してください。

バトル画面のユーザーインターフェース作成、バトルシーンのエフェクト付けなど、
投稿している素材を自由につかっていただき、Webデザイナー、マークアップエンジニア、
Flashクリエイターとそれぞれの見地から、オリジナリティあふれる作品を投稿してください!
優秀作品者には、いま話題の Kinect for Xbox360 を贈呈させていただきます!
 

スケジュール


募集期間: 2010年12月21日(火)〜2011年1月31日(月)
審査期間: 2011年2月1日(火)〜2011年2月7日(月)
結果発表: 2011年2月8日(火)

 

賞品

入賞された方には、豪華な賞品もご用意しております!

1位 Kinect + Xbox360
2位 Amebaぬいぐるみ
3位 Amebaキーホルダー



今後もクリエイティブな企業が続々登場します!
お楽しみに!

 

SPEC - Flash and HTML5 -

 

 


 

今年ありがとうを言いたい「html5の本」5+1選

連載企画「今年ありがとうを言いたい○○」

2010年も残り僅かとなりましたが、いかがお過ごしでしょうか。

デザイナーズブログでは今年を振り返って、
それぞれが「ありがとうを言いたいもの」を紹介する連載企画をはじめます。

第一弾は「今年ありがとうと言いたい『html5の本』」です。
それでは続きからどうぞ!

続きを読む

警告とメッセージ