IBM Developer is your one-stop location for getting hands-on training and learning in-demand skills on relevant technologies such as generative AI, data science, AI, and open source.
「DeNA × 面白法人カヤック × クリーク・アンド・リバー社 セミナー」に登壇することになりました。 はじめまして。 このブログで書くのは初めてのME課の比留間(@edo_m18)です。 今回は9/23に開催される「DeNA × 面白法人カヤック × クリーク・アンド・リバー社 セミナー」で、 自分のセッションのプロローグを書きたいと思います。 セッションのタイトルは「もしも、マークアップエンジニアがひとりでWebサイトをつくるとしたら ~HTML5でつくるWebアプリ~」です。 話の内容は、最近なにかと目にする「HTML5」について。 その中でも関連API(JavaScript)を使ったwebアプリについて話したいと思っています。 HTML5になることで、今まではサーバを介してしかできなかったこと、そもそもブラウザ上では実現不可能だったことが実現できるようになります。 これを利用して
YokulはCanvasタグを使ってGoogle Chart API互換のグラフを描くJavaScriptライブラリ。 YokulはJavaScript/HTML5製のオープンソース・ソフトウェア。Webサービスで工数がかかりやすいのがグラフの表示だ。システムから得られるデータを使って動的に変化させるため作るのが大変だ。そんな中、よく使われるのがGoogle Chart APIだ。 サンプル Google Chart APIを使えば画像ベースのグラフが簡単に作成することができる。しかし場合によっては外部にデータを渡すために利用できないかもしれない。そんな時に使えるのがYokulだ。 YokulはGoogle Chart API互換のグラフライブラリだ。さらに面白いのがサーバサイドの仕組みを用いないことだ。つまりCanvasタグを使ってJavaScriptだけでグラフを描くのだ。使い方も簡単
モバイルアプリケーションを開発する技術としてHTML5やJavaScriptなどのWeb標準が注目されています。しかしWeb標準が進化すれば自動的に普及する、といえるほど世の中は単純ではありません。 技術の進化以外に、モバイルアプリケーションの開発にWeb標準が使われるようになる理由として何が考えられるのでしょうか? 最近、ある人とこのことをテーマに議論をしていたのですが、僕の意見は「デバイスの多様化がモバイルアプリケーションのHTML5化を促進するだろう」というところに落ち着きました。 モバイルデバイスの多様化は個人所有デバイスが推進する 米調査会社のガートナーは、昨年11月に発表したレポート「Gartner Reveals Top Predictions for IT Organizations and Users for 2011 and Beyond」で、2014年までに90%の組
「HTML5は優先順位を間違った。もういちどセキュリティの設計からやり直すべきだ」と語るJavaScript大家のDouglas Crockford氏 「HTML5の最大の問題は、優先順位を間違ったことだ。機能について議論する前に、セキュリティの扱いについて検討すべきだった」こう語るのは、JSONの発明者として知られ、Yahoo!のシニアJavaScriptアーキテクトでもあるDouglas Crockford氏。5月4日に行われたオライリーのWeb2.0 Expo 2010でのインタビューでのことです。 「もうそれを議論するには遅すぎるという人もいるが、そうは思わない。正しいことをするのに遅すぎることはないのだから」(Crockford氏) Crockford氏はHTML5は機能が重複しすぎていることも指摘しています。「Local StorageとLocal Databaseの両方が本当
animated icon on hover デモページ [ad#ad-2] デモではパネルにマウスホバーすると、背景を変更しアニメーションのエフェクトを適用します。 実装方法 HTML HTMLはシンプルです。 ポイントとなるのは、h3やpなどのブロック要素をa要素で内包している点です。これはHTML5を使用する限りvalidです。 <!doctype html> <html lang="en"> <head> </head> <body> <a href="#" class="hover-panel"> <h3>Panel Title</h3> <p>Additional information about the panel goes in a paragraph here</p> </a> </body> </html> [ad#ad-2] CSS:ノーマル時のスタイリング まずは
ぱっと見た瞬間「Flashだな」と思ってしまったくらいの、Flashで実装したような複雑なアニメーションやムービーを作成できるスクリプトを紹介します。 使用するのはHTML, CSS, JavaScriptで、こういったものにありがちなHTML5, Canvas, CSS3には頼っていません。jQueryなど他のスクリプトにも依存していません。 ※CSS3のエフェクトなどオプションとして利用が可能です。 Mashiの主な特徴 スタンダードなHTML, CSS, JavaScriptでFlashのようなムービー、アニメーションを作成できます。(X)HTMLコンテンツに設置が簡単にできます。 41KB/13KB(CDN+GZip)と非常に軽量で、オブジェクト指向、モジュール式です。 基本的な利用では、追加のプラグインは必要ありません。 IE6をはじめ、すべての主要なブラウザをサポートしています
Windows 8がどのようなOSになるのか、マイクロソフトは始めてその詳細を同社のWebサイトの記事「Previewing ‘Windows 8’」で開示し、動画でのデモンストレーションも公表しました。 Previewing ‘Windows 8’: Article by Julie Larson-Green, corporate vice president, Windows Experience. 多くのメディアでは、タイル形式の新しいタッチユーザーインターフェイスに注目していますが、Windows 8の注目すべき特徴の中の1つとして、HTML5とJavaScriptに対応することが明らかにされています。 Web-connected and Web-powered apps built using HTML5 and JavaScript that have access to th
HTML5 vs ネイティブ。モバイルアプリはどちらで開発するべき?(前編) Google I/O 2011 モバイルアプリケーションを開発する方法として、JavaやC/C++などのプログラミング言語とSDKを用いてネイティブアプリケーションとして開発する方法以外に、HTML5/CSS/JavaScriptを用いて開発する方法が登場してきています。 この2つのアプリケーション開発にはどのような違いや利点があるのでしょうか? Androidを題材にして解説したセッション「HTML5 versus Android: Apps or Web for Mobile Development?」がイベントGoogle I/O 2011で行われました。 HTML5でモバイル開発を行う利点 Reto Meier氏(左)、Michael Mahemoff氏(右)。
IE 9が登場! ユーザーの閲覧環境がますます多様化! 4月26日、ついに日本でもInternet Explorer(以下、IE) 9が公開されました。また、マイクロソフトは早くもIE 10のプレビュー版を公開しており、CSS3やJavaScript周りが、さらに強化されるなどリッチなWeb表現が加速してきています。 IEのみならず、Firefox、Safari、Google Chrome(以下、Chrome)など他のWebブラウザもすさまじい勢いで進化してきており、スマートフォンやタブレットPCなどのデバイスも続々と開発され、ユーザーの閲覧環境がますます多様化してきています。 そうした流れの中で、必然的に欠かすことができなくなる知識が、この「プログレッシブ・エンハンスメント」という概念です。 プログレッシブ・エンハンスメントって何? Webブラウザや端末などの閲覧環境が多様化してきていま
CSSのキャッシュ対策 クロスブラウザ対応の角丸、ボックスシャドウ、不透明 ショートハンドCSS、再利用可能なclass ページ下部に固定表示されるSticky Footer CSS(Reset関連) リセットはHTML5ベースのEric Meyer's Reset Reloaded フォントのノーマライゼーション Webkit系ブラウザのフォントのスムージング フォーススクロールバー ラベルの一列化 クリック可能なインプット要素 スクリーンリーダー対応 IE7のイメージリサイジング 印刷時のスタイル X(HTML) クリーンなコード構造 コンテンツ幅は940px F型レイアウト 古いバージョンのIEからイメージツールバーの削除 最新のIEのレンダリングエンジン jQuey 1.5.2ベース(1.4.4も可) ページ上部へスムーズにスクロール HTML5のプレースホルダー機能 ナビゲーショ
A vocabulary and associated APIs for HTML and XHTML WHATWGブログにXHTML5 in a nutshellというタイトルのもと興味深い内容が紹介されている。HTML5をXHTMLとしても利用できるように制作するにはどうすればいいかを簡単にまとめたもので、将来的にはXHTML5と呼ばれるものになるであろうXHTMLの存在に軽く触れるものとしても参考になる。 HTML5でページを制作する場合、XHTML5で策定されるであろう機能とHTML5の機能と双方ともにサポートしている機能のみを採用すれば、HTML5としてもXHTML5としても利用できるようになる。XHTML5としても使えるようにすることの利点はHTML5をXMLベース技術として拡張しやすくなる点にある。XHTML5 in a nutshellの説明によれば、HTML5としてもXH
IDとclassを使わないで、HTML5とCSS3でコーディングしてみた。 2011-05-02 Webサイトをコーディングする時に、IDとclassを考えるのが面倒臭くなったので、IDとclassを使わないでコーディングしてみました。 シンプルなサイトなら簡単でつまらないので、IDとclassを使っても難しそうなデザインにしています。 今回もJavaScriptは一切、使用していません。 完成したサイト ID, classなしで組んだサイトを見る。 サイトでやってみたHTML5 HTML5では、html, head, bodyタグを完全に省略しても構わないとされています。 省略してもDOMツリー上に存在しているので、 body {background:#f00;} というCSSの記述も認識してくれました。 サイトで使用したCSS, CSS3の簡単なまとめ Child Selector 結
モバイルゲーム 物凄い勢いで勃興したモバイルゲーム業界は、いろいろな課題や問題に直面しながらも巨大化し、今日の時点でのスマートフォン向けゲームの市場へと継承されていきます。 モバイルゲームの歴史 2001 Javaアプリと3Dゲームの登場 Javaが利用できるようになったことにより、ダウンロード型のゲームが供給できるようになりました。 2002 携帯電話端末の大容量化・3D化競争 Java搭載携帯電話端末が登場してからごく僅か1年の間に、アプリのサイズに関しては10倍に広大化し、表現方法も2Dから3Dにシフトし始めました。J-PHONEは『ゼビウス』や『スペースハリアー』などといった昔のアーケードゲームを、ドコモはSIMCITYなどパソコンで世界的規模のヒットを飛ばしたゲームを主力商品としていました。 2003 モバイルゲームの一般化 メモリの制限が厳しいJava仮想マシン上ではなく、OS
※この記事はChromeで見るのがおすすめです。 こんにちは。新規開発グループ ディレクター兼マークアップエンジニアの浜です。 スマホ連載の第4回目は、HTML5とCSS3という実装寄りの内容になります。とは言っても難しいコードはあまり出てきません。「HTML5とCSS3で何ができるのか」という事をメインに、知っておくと、構成書を作る時のアイディアベースになったりデザイナー・マークアップエンジニア(コーダー)と打ち合わせをする際に話しやすくなる内容をお送りします。 記事のアウトラインは以下です。 そもそも、HTML5とCSS3ってもう使えるの? HTML5とCSS3を使うメリットは? HTML5とCSS3で何ができるの? そもそも、HTML5とCSS3ってもう使えるの? 使えます。 (※ここから先は、その根拠について説明します。必要ない方は、次の章に飛んでしまっても構いません) 現在のスマ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く