HTML5やクラウドなどを使えばここまでできる「モーグリのツイートキャッチ」
一見するとフツーのよくあるキャンペーンサイトですが、Flash・Silverlight・Javaといった追加プラグイン的なものを一切使っておらず、その裏側ではHTML5のCANVAS・SVG・Geolocation要素など使えるものを使いまくっており、しかもクラウドやCDN(コンテンツデリバリネットワーク)をバックグラウンドで使用、見た目よりもはるかに技術的にがんばりまくっている……というサイトがこの「モーグリのツイートキャッチ」です。 モチーフとしては、「FinalFantasy XIII-2」にてモーグリを投げ飛ばして遠方のお宝を探索させる「モーグリ投げ」をちょっと違う形で再現しており、このモーグリ投げによってネット上からTwitter上のツイートを集めてくることが可能になっています。もちろんツイートを集めるためにAPIを叩く際にもがんばっていろいろ工夫しています。 Internet
HTML5の説明文が読み札、タグが絵札のカルタ「HTML5KARUTA」
HTML5のうちページにおいて一般的なタグ36個の説明が書いてある読み札とタグの書いてある絵札からなるカルタが「HTML5KARUTA」です。ウェブサイト上で遊べるだけでなく、ダウンロードしたPDFファイルを使って実際にカルタを作りプレイすることも可能で、遊びながらHTML5の学習ができるようになっています。 HTML5KARUTA http://roadstohtml5.com/html5karuta/ カルタは以下のような感じで、HTML5のタグ108個のうちページにおいて一般的なタグ36個が扱われています。 「表組み内の行の見出しのタグ」、「ページ自体のメタ情報をまとめるタグ」、「ページ自体の題名のタグ」が並んでいます。 「ページ自体のメタ情報をまとめるタグ」の札の上にカーソルを乗せると、答えである「head」が現れました。 なお、カルタはページの下部からPDFファイルをダウンロード
HTML5によるハイブリッドアプリ開発に関する雑記 - id:anatooのブログ
HTML5でiPhoneやAndroid向けのハイブリッドアプリを作るのが最近の流行りみたいです。ハイブリッドアプリとは、外面は普通のアプリとしてAppStoreやGoogle play marketでインストールできるものの、その中身や一部がHTML5で記述されているアプリです。 最近の有名な例だと、CookpadやLinkedIn、はてなスペース、少し前にネイティブに移行してしまいましたがfacebookのモバイルアプリもHTML5を使って記述されていました。GREE界隈で言われているらしいガワネイティブっていう言葉もハイブリッドアプリを指します。ちょっとググってみると、2016年には企業向けのアプリの50%がハイブリッドアプリになるという予測もあります。 ハイブリッドアプリの何がいいかというと、Objective-CとかJavaとかがわからなくてもウェブ系技術者であればAndroid
HTML5の新機能、HTML4との違い
HTMLのこれまでと、進化したHTML5 HTML（Hyper Text Markup Lanuguage）とは、Webページを作成するための言語です。タグと呼ばれる目印を文書に埋め込む（＝マークアップする）事で、画像やハイパーリンクを挿入したり、文書にリストや表などの意味を割り当てる事ができます。 昨今、Webページは、単なる「マークアップされた文書の集まり」というだけではなく、閲覧者が情報を理解しやすいようにデザインされていて、閲覧者からの情報を受け取る仕組みのある「アプリケーション」として利用されるようになってきました。「アプリケーション」としてのWebページの開発には、HTMLの他にも、見た目の表現部分を記述する言語であるCSS、動きを記述する言語であるJavaScriptも使用します。 そのような潮流の中で生まれてきたのが、HTMLの最新の改訂版であるHTML5です。狭義では、W
スマホアプリの作り方【超まとめ】Web編：HTML5やjQuery MobileなどスマホWebアプリ開発に役立つ記事52選 - ＠IT
Web編：HTML5やjQuery Mobileなど スマホWebアプリ開発に役立つ記事52選 ＠IT編集部 2012/1/31（2013/2/28 改訂） iOS（iPhone／iPad／iPod touch）、Android、Windows Phoneなど、さまざまなスマートフォンのプラットフォームのアプリを作るための＠IT記事のまとめです。今後、順次更新・追加していきます。 開発者が登録したApp StoreやMarketplaceなどからダウンロードしてインストールするアプリ、もしくは、あらかじめインストールされているアプリは、「ネイティブアプリ」と呼ばれています。iOSやAndroid、Windows PhoneといったOS上で動き、マイクやカメラなどデバイスの機能を十分に使えるのが特徴です。作り方は、基本編やデザイン／グラフィック編で紹介した記事が参考になると思います。 一方で
最近のFlash騒動やHTML5/JS開発についてまとめ « package a24
AndroidブラウザのFlashPlayerの開発が終了したり、HTML5製の3Dコンテンツが出てきたりで、「Flash終わったの？」とか、「これからはFlashじゃなくて全部HTML5で作った方がいいの？」とか聞かれる事が増えてきたので、ちょっとまめとめてみました。 同じような境遇の方も少くないと思うので、参考程度にどうぞ。 AndroidブラウザFlashPlayerの開発終了について 残念なことにAndroidブラウザのFlashPlayerはバージョン11.1を最後に開発は終了することが発表されました。これについて「AdobeがFlashよりHTML5の方が優秀だと認めた」や「HTML5を推奨していたジョブズの完全勝利！」と考えている方もいるかと思いますが、実際のところどうなのでしょうか。 記事を参考に、開発終了の理由についてまとめてみました。 【参考記事】 ・ Clarific
これからのWebサイト
この10年間ほどで、Webの世界はめまぐるしい変化を遂げ、いまなお進化を続けています。情報発信としてのWebサイトだけではなく、サービス提供、開発支援のツールなども増加し、Webは様々な利用をされるようになりました。この特集では、この先の10年につながる今後のWebとそれを支える注目技術を紹介していきます。ですが、その前に、まずこれまでにWebがどのように変化してきたか。近代史を振り返ります。 2000年ごろから「Flash」を活用したサイトが増え始め、Webサイトは表現的にも華々しいものとなっていきました。それまでの無機質なインタフェースだけでなく、情緒的な演出として、また直感的な操作を促す効果として、随所に使われるようになってきています。この傾向は徐々に強まっていき、2007年には「Silverlight」も登場しました。 並行して、「JavaScript」も脚光を浴びました。以前はW
theshodo - Bing
FUNCTION LIMITED. Get the best experience with Internet Explorer 10. Beauty of the Web for Upgrading to Internet Explorer. JavaScript is …
iPhone向けWebアプリを作ろう（1/4） － ＠IT
Safari Web Content Guide for iPhoneを読み解きながら、iPhone／iPod touch上のWebブラウザのSafariで動くWebアプリを作成し、UIを最適化するコツを紹介します。 （編集部） Safari Web Content Guide for iPhoneを読み解く ネイティブアプリケーション開発を可能にするSDKが公開され、一層注目を集めている米アップルのiPhone（Applle Developer）。3Gへの対応がうわさされ、日本市場向けの発表も待たれますが、読者の中には、早速iPhone向けのアプリケーション開発にチャレンジしている人もいるでしょう。 しかし、ネイティブアプリケーションを作るにはそれなりにプログラミングスキルが必要ですし、完成したアプリケーションは米アップルが用意する「App Store」経由でしか配布できないといった制約
HTML5が注目を浴びる理由とは？ ここが違う！サンプルで見るHTML5（1）
はじめに この連載では、「HTML5」をとりあげ、全6回に分けて、これまでの技術とどのような違いがあるのか、具体的にサンプルのコードを示しながら解説していきます。 HTML5はなぜ注目されているのか HTML5は、今やウェブ業界の流行語といっても良いほどの過熱ぶりです。HTML5は、名前の通り、HTML4の後継に当たる仕様です。とはいえ、HTML5に注目しているのは、ホームページを作成するウェブ制作者だけではありません。ウェブ業界に限らず、あらゆるIT関連業界で注目を浴びています。なぜ、これほどまでにHTML5が注目を浴びているのでしょうか。 この理由は、大きく分けて2つあります。1つはマークアップです。もう1つはAPIです。 マークアップの仕様を更新 まずは、マークアップの視点から見ていきましょう。これは、とりわけウェブ制作者、中でもウェブページ製作の現場において重要です。これまでウェブ
WebSocketで目指せ“リアルタイムWeb”！第1回 node.jsの衝撃とWebSocketが拓く未来 - ＠IT
ご挨拶 こんにちは、ロンドンのNew Bambooという会社でWebエンジニアとして働いている@makoto_inoueです。ここのところ、PusherというWebSocketのクラウドサービスの開発に関わっています。今回から3回に渡ってWebSocketに関する短期連載を担当させていただきます。 私を含めたNew Bambooの面々（我々は自分たちのことをBambinoと呼んでいます）がWebSocketになぜ興味を持ったかということからはじまり、実際にクラウドサービスを始めるまでにいたったストーリーをお話ししたいと思います。そのストーリーを通じて、WebSocketが切り開く「リアルタイムWeb」な世界への可能性や技術的課題を皆さんと共有できればと思っています。
古籏一浩のJavaScriptラボ
活躍の舞台をどんどん広げているJavaScript。本連載では、JavaScript関連書の執筆でおなじみの古籏一浩氏が、最新の活用Tipsから今後注目のAjax/JavaScriptライブラリーの解説まで、“楽しくできて役立つネタ”をお届けします。
HTMLで図まで描ける！進化した「HTML5」ってどんなもの？ - はてなニュース
HTML言語の最新バージョンとして、現在標準化作業が進められている「HTML5」。はてなブックマークでもこのキーワードを目にする機会が増え、「HTML5って何？」と疑問に思っている人も多いのではないでしょうか。今回は、「HTML5って何？どんなことができるの？」という疑問にお答えしたいと思います。 ■HTML5でできること まずは、HTML5を使うと具体的にどんなことができるのかを見ていきましょう。 ＜具体的に何ができるの？＞ ▽HTML5.JP - 次世代HTML標準 HTML5情報サイト ▽HTML5とは？変わるWebと注目の新要素 HTML5.0の情報サイト ▽大幅に進化した次世代 HTML 規格「HTML5」とは？ - japan.internet.com Webビジネス ▽HTML5, きちんと。 ▽めざましTech - HTML5 についての Q&A ▽2010年に勧告される「
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
html5-lab.jp
html5shiv - Project Hosting on Google Code
ie7-js - A JavaScript library to make MSIE behave like a standards-compliant browser. - Google Project Hosting
HTML5KARUTA - 「HTML5カルタ」で覚える！HTML5の108つのタグ
http://www.theshodo.com/Gallery
日本語で学べるHTML5関連資料15個まとめ : 二十歳街道まっしぐら