IDEA * IDEAドットインストール代表のライフハックブログ
200行で作る、enchant.jsを使った簡単ぷよぷよプログラミング - あのねノート。
2013-08-24 200行で作る、enchant.jsを使った簡単ぷよぷよプログラミング やり方 はじめに この前enchant.jsでぷよぷよ by おっ立ち野郎を作って公開しました。 enchant.jsで作ったHTML5+JavaScriptな「ぷよぷよ」を公開しました これを知り合いR君に紹介したところ、嬉しい事に「僕もぷよぷよ作りたい！」といってもらえました。それでぷよぷよの解説サイトをネットで見つけて紹介しようと思いました。 しかし、テトリスの解説サイトは山ほどあるのに、ぷよぷよプログラミングの解説サイトが全然ありませんでした。特に完成まで解説しているサイトは見つけられませんでした。テトリスはあるのに。 ということで、今回ぷよぷよプログラミングの完成までの解説を書いてみました。これはenchant.jsの基礎をひと通り勉強された方におすすめです。クマをちょこちょこ動かすだけ
Form Follows Function
Form Follows Function project is a collection of entrancing and engrossing "interactive experiences", each experience has its own unique design and functionality. The award-winning project includes a spinning navigation wheel on the website, with each interactive experience represented by a poster. By clicking on a poster, an interactive experience opens up. Each one is as much a piece of art as i
HTML5の最先端技術で顔文字はこんなにおもしろくなる
HTMLファイ部のしんちゃんです。よろしくぅ(^o^)/ 「顔文字」と「ASCII Art」はほとんど毎日使っていますが、 コードで表現するとどうなるのか考えたことはありますか？ jsdo.itでは「第三回HTML5実技コンテスト」が現在開催中です。 今回のお題は、HTML5で表情豊かに表現する「顔文字(・∀・)」です。 顔文字とASCII ArtがHTML5最先端の技術との融合は、 果たしてどんな結果を生み出せるかを考えたらワクワクしますよね。 ((o(´∀｀)o))ﾜｸﾜｸ では、さっそく投稿したコードをいくつか見ていきましょう！ HTML5で表情豊かに表現する「顔文字(・∀・)」 Gravity Face ※「▶Play」ボタンをクリック！
Magic Sphere - jsdo.it - Share JavaScript, HTML5 and CSS
▼はじめに 音が鳴ります。音量にご注意下さい！ WebGLに対応したブラウザ（Chrome, Firefox）でご覧下さい。 フルスクリーンの方が楽しいかも。 ▼操作方法 マウスドラッグで球体を回転させます カードをクリックで選択、再度クリックで選択キャンセル 1枚目に選択したカードがベースカードになります ベースカードを選択キャンセルすると、すべてのカードの選択状態がリセットされます 2枚以上選択すると「合成する」ことができるようになります（2枚以上であれば何枚でも合成可能） 合成演出が終わったらはじめに戻り、以下ループ。 ▼サウンド フリー音楽素材 Senses Circuit http://www.senses-circuit.com/ SPEC vol.5 エントリー http://jsdo.it/event/spec/vol5 (function(){ "use strict";
明日を生きるマークアップエンジニアのためのHTML5フレームワーク色々 | バンクーバーのうぇぶ屋
HTML5で書かれたサイトも多くなってきましたねー。僕はまだまだ勉強段階ですが、やっぱりHTML5のフレームワークなんかもたくさん出るんだろうなぁと思ってたら、まさに僕の理想を見つけたので、おすすめのフレームワーク含めていくつかご紹介（DLフォルダの中身も軽く紹介）。中にはフレームワークとしてではなく、勉強教材としても使えそうな物もあって楽しいですよ。 G5 Framework 個人サイトなんかから使えそうな使いやすいフレームワーク。ＤＬしてフォルダ開くと下のようなフォルダ構造。うーん。シンプルだし、分かりやすい。なかなか好印象っす。しかし、なぜindexがphpなんですか？ あ、でもCSS3 Pie（IE6-8対応のCSS3デコレーションキット的な奴）を使ってるんですね。デフォで使ってあるのはうれしーっす先輩。 52 framework こいつもクロスブラウザ対応をうたってるＨＴＭＬ5と
HTML5 × CSS3 × jQueryを真面目に勉強 – #6 パララックスエフェクトの基本 | DevelopersIO
そんな訳で、パララックス・スクロールについて少し学んでみたので、超初心者向け（※自分含む）のサンプルをいくつか紹介していきたいと思います。 はじめに - パララックスエフェクトについて パララックス（parallax）を直訳すると視差です。視差効果とは、視界が移動する際に各物体がそれぞれ異なったスピードでスクロールすることで、奥行き間をはじめとした視覚効果を指します。 アニメーションの世界ではディ○ニー映画で古くから使われていたり、ビデオゲームにおいても横スクロールアクションのゲームなどで昔から使われています。 JavaScript（jQuery）でパララックスエフェクト 1 | スクロール値を取得 どれだけスクロールしたかという値を取得します。これだけではまだパララックスも何もありませんが、全てはここから始まるのです。 $(function() { $(window).scroll(fu
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
HTML5学習(5)動画再生-videoタグの基本まとめ- - 青春B■雑記blog‐青酸カリ カラメルシロップ味‐
HTML5学習のまとめ【HTML5勉強用ページ-学習記事、お薦めリンク集、お薦め書籍まとめ-】はこちら 前回、前々回とスマートフォンに特化した話をしましたが、今回からまた元に戻って、HTML5そのものの話をしていきます。 ということで今回はHTML5の目玉機能の一つ、動画再生です。 HTML5ではvideo要素を使用することでこれまでは主にFlash Player形式を介して行っていた動画再生をブラウザ単体で行うことができます。 動画形式(ブラウザ毎の対応表) videoを使うにあたってまず気にしないといけないのが、各ブラウザが対応する動画形式です。 全ブラウザにて同一フォーマットであれば嬉しいのですが、現状、ライセンスの絡みもありブラウザ毎に対応フォーマットが異なっています。 調べた結果、現時点での対応状況は表にまとめると以下の通りでした。 H.264の拡張子はmp4以外にもありますが、
HTML5で綺麗なグラフを描くJSライブラリ「flotr2」
flotr2 (humble software development) HTML5 canvasで、グラフを描けるJavaScriptライブラリ「flotr2」が公開されています。 (英語) デモサンプルを見ると、種類が多くどれも綺麗なグラフで、アニメーションなどもできるようです。
HTML5 入門篇
ウェブで公開する文書作りに欠かせないHTML5の初歩から解説します。 本コンテンツは HTML5 の入門です。XHTML 1.0 の入門はXHTML 1.0 入門篇をご覧ください。 HTML5 入門篇・目次。 HTML5 とはどのような言語か HTML の歴史 マークアップとは何か HTML5 での文書マークアップの基本 <a>要素の使い方 キーボードなどでのアクセスを助ける<a>要素の属性 実際にマークアップする際の注意事項 文字参照について マークアップされた文書をHTML文書にするには HTML文書の文字コードとエンコーディング HTML文書が正しく書けているかを検証するには リストのマークアップ HTMLでのリスト HTML文書への画像の埋め込み ウェブ文書に埋め込める画像について <img>要素について <figure>要素について 文書のセクション分け セクションと見出しについ
Webの3つの問題を解決する「HTML5」とは何なのか
最近よく目にする「HTML5」という言葉。JavaScriptのAPIやCSS3、SVGなどを含め、急速な広がりを見せつつある「HTML5」の基礎を学べる入門連載です。「HTML5を使うと、何ができるのか」「それを実現するには、どのようなプログラムを書いたらいいのか」をお届けします どっからどこまでが「HTML5」なの？ 最近、「HTML5」という単語を目にする機会が驚くほど増えました。ニュースやブログで取り上げられない日はほとんどありませんし、筆者が主催している勉強会を含め、開発者同士の勉強会でもHTML5がテーマになることが少なくありません。 しかし一方で、「『HTML5』といわれているものは範囲が広すぎて、とても学ぶ時間がとれない」という声もよく聞きます。それもそのはず、HTML5は現在世界でも最もホットなテーマといってもよく、世界中の名だたる開発者や企業が日々仕様を提案したり、改善
HTML5 & CSS3 ブラウザ別サポート状況
What is an IP Address? An IP (short for “Internet Protocol”) address is a unique number assigned to every machine that connects to the internet. Nowadays, you can have multiple computers behind a router that share a single IP using Network Address Transformation (NAT). If you have ever used a wifi hotspot to access the internet, you’ve shared an IP address with someone. What’s the Difference betwe
HTML5で制作された国内企業サイト20から現状の制作状況を知る!! | HTML5でサイトをつくろう
HTML5でのコーディング 最近、HTML5のコーディング案件に関わることがあったのですが、その時にHTML5でコーディングされている企業サイトを調べましたので今回ご紹介したいと思います。 尚、サイトを調べていて気づいたのですが、現状(2011年8月)では宣言をHTML5にして内容自体は今まで通りdiv要素を使ってマークアップしているサイトが多いように感じました。新要素を多用して後から間違えが出てくるという可能性を考慮すると、とても理にかなっていると1人で感心してしまいました。今後この流れは変わると思いますが現状(2011年8月)では大切な考え方の1つだと思っています。 それともう１つ、多くのWEB制作会社が自社サイトをHTML5で作り直しているようです。調べて見つけるとWEBの制作会社サイトであることが非常に多いように感じました。とても参考にさせていただきました。私も取り残されないように
HTML5に踏み出せない人に捧げる、HTML5を使う10の理由
HTML5、使ってますか？ このサイトも未なのですが、これからHTML5を使い始めるぞっとなる10の理由を紹介します。 Top 10 Reasons to Use HTML5 Right Now [ad#ad-2] 下記は各ポイントを意訳したものです。 10. アクセシビリティ 9. ビデオとオーディオのサポート 8. Doctype 7. よりクリアなコード 6. ストレージ 5. インタラクション 4. ゲームの開発 3. 古いブラウザのサポート 2. スマートフォンへの対応 1. これからはHTML5 10. アクセシビリティ HTML5は「セマンティック」「ARIA」の2つの理由でサイトをアクセシブルにします。header, footer, nav, section, adiseなどのような要素はスクリーンリーダーにもコンテンツに容易にアクセス可能なようにします。また要素にrole
256番地のゆららぎ HTML5でギャルゲーを作る : 目次
ちょっとしたミニゲームの場合、DL不要なブラウザゲームは、ローカルアプリよりもやってもらえる敷居がぐっと下がる。 今までブラウザゲームと言えば、ほぼFlashの一強だったが、最近流行のHTML5で登場したCanvasにより、HTMLとJavascriptでグラフィカルなコンテンツを作る環境が整いつつある。 せっかくの新要素だし、ここらで簡単そうでかつ同人サイト的に使い勝手のよさそうなギャルゲー（=電脳紙芝居ゲーム）でも作ってみようという企画。 目次 HTML5でギャルゲーを作る 1 : 枠を作る ▼以下前置き 企画のレベル 自分のレベルとしては次ぐらいなので、同程度を想定してブログも書いていく。 ・HTML、CSSをおおよそ理解している。 ・Javascriptでちょっとしたプログラムを書いたことがある。 ・C#、.NET、JAVA等のオブジェクト指向言語でアプリケーションを作った経験が
情弱なはてブ民にも判りやすく HTML5 vs Flash のこと教えてやる
(ここで言うHTML5はcss3とJavascriptも含めた技術全体の事、逆にFlashはAir等の派生技術は含めないブラウザ上のFlashPlayerの技術のみを指します。） ウェブに携わる人間には常識だけど、HTML5は何でも出来るスーパーヒーローではない。 どちらかというと、中日の高木とか、ヤクルトの宮本とか、巨人の川相とかの方が近い。知らないやつはググれgoogle:いぶし銀。 HTML5の真骨頂は、昨今のリッチなインターネットコンテンツを、非常に簡潔にスマートに記述できるところにある。複雑な事をすれば凝った事もある程度できるけど、得意分野じゃない（標準APIが機能不足だし、JavaScriptの言語仕様が複雑な処理に向いていない）。 ブラウザだけでここまで出来る、とか、 Flashはもういらない、とか、 ってのは、川相だって筋肉付ければホームラン打てるようになるし清原はもういら
Google、FlashをHTML5に変換するツール「Swiffy」を公開 iOSにも対応
Flashを使ったWebページをiPhoneやiPadでも表示できるようにSWFファイルを変換するツール「Swiffy」がGoogle Labsで公開された。 米Googleは6月28日（現地時間）、FlashのSWFファイルをHTML5に変換するツール「Swiffy」を、Google Labsで公開した。Swiffyで変換したファイルは、GoogleのChromeや米AppleのSafariなど、XMLベースの2Dベクター画像記述言語SVGをサポートするWebkitブラウザで表示できる。つまり、iPhoneやiPadのSafariでも表示できるということだ。 Googleによると、現行版はまだ早期リリースのため、Flashのすべてのコンテンツを変換できるわけではないが、アニメーションやバナー広告などは問題なく表示できるという。ギャラリーにあるサンプルは、オリジナルとほぼ同じように表示され
HTML5で、オフラインでも使えるiPod/iPhone超簡単アプリっぽいものを作ってみた － Publickey
HTML5にはオフラインアプリケーション機能があり、オフラインに対応したWebサイトを作ることができます。Webブラウザでいちど表示させれば、あとはネットワークとの接続が切れてもそのままエラーを起こさずに利用し続けられるWebサイトです。 iPod TouchやiPhoneに搭載されているWebブラウザの「Safari」はHTML5のオフラインアプリケーション機能に対応しているそうなので、HTML5を使っていつでも参照できる超簡単なアプリを作れるのではないか、そう思ってお正月休みに試してみることにしました。 単に路線図を表示するだけのアプリ iPod Touchを僕は利用しているのですが、いつでも参照できる地下鉄の路線図があるといいなと思っていました。iPod TouchはWifi機能しかないため、外出中はずっとオフラインでの利用なのです。 そこで、起動すると路線図の画像を表示するだけの超
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5で追加された要素や機能のブラウザ対応度が分かる「HTML5 Please」