Webデザイン初心者でも手軽に使えるダイアログ/通知ライブラリALERTIFY.js:HTML5アプリ作ろうぜ!(12)(1/2 ページ) ダイアログ/アラート/Notification(通知)を見栄え良く簡単に使用できるJavaScriptライブラリ「ALERTIFY.js」の概要と基本的な使い方をサンプルを交えて紹介します。 最近はやりのHTML5、JavaScriptライブラリ、CSS3、API、またそれらを組み合わせたサンプルアプリを解説していく本連載「HTML5アプリ作ろうぜ!」。今回紹介するライブラリは「ALERTIFY.js」です。 ALERTIFY.jsとは 「ALERTIFY.js」は見栄えの良いダイアログ/アラート/Notification(通知)を簡単に使用できるライブラリです。短時間で既存のWebサイト/WebアプリのHTMLに記述できるのも魅力です。また、コントロ
iOS 8からSafariがWebGLに対応することが発表されました。これによりスマートフォンにおいてもWebGLを使ったコンテンツが広がりを見せるでしょう。特に利用されると思われるのがゲーム分野かと思います。 そこで注目したいのがWebGLによるゲームエンジンを提供するPlayCanvasです。オープンソースなゲームエンジン、見逃す手はなさそうです。 PlayCanvasの使い方 数多くのデモが登録されていますので順番に見ていきます。 シンプルにキューブが浮かぶデモ。 モデルロード。回転しています。 光源を反映したデモ。 アニメーション。動きはスムーズです。 3D空間を走るデモ。 シェーダー。モデルが燃えながら消えていきます。 マウス、キーボード入力もサポートされています。 FPSデモ。マウスとキーボードで動き回れます。 iPod TouchなiOS 8であれば一部のデモが表示されました
HTML5の新しい機能の一つにデスクトップ通知があります。ブラウザ上だけでなく、デスクトップに通知が出せるのでメッセージやチャット、お知らせを配信するのにぴったりです。とは言え実装方法が面倒そうで手を出していないという人も多いでしょう。 そこで使ってみたいのがNotify.jsです。各ブラウザのデスクトップ通知をラッピングし、手軽に扱えるようにしたライブラリです。 Notify.jsの使い方 Notify.jsを使っている場合、以下のようなコードを書きます。 var myNotification = new Notify('Yo dawg!', { body: 'This is an awesome notification', notifyShow: onNotifyShow }); function onNotifyShow() { console.log('notification
HTML5/JavaScriptで作成したアプリケーションをラップし、ネイティブアプリケーションとして扱える「ハイブリッドアプリケーション」は、高い生産性でモバイルアプリケーションを開発できるといったメリットから注目されています。 しかし実際に自分でハイブリッドアプリケーションを開発しようとすると、例えばiOS用ならMacOSのマシンを用意してPhoneGapの環境を整え、ビルドしたアプリケーションをいちいちiPadやiPhoneに転送して試すなど、それなりの手間がかかります。Publickeyでは以前からハイブリッドアプリケーションに注目して紹介してきたため、時間があれば自分でもHTML5とJavaScriptで作ったアプリケーションをハイブリッド化しみてみようと思いつつ、なかなか開発環境を整備するに至りませんでした。 そこで思い出したのが「Monaca」です。Webブラウザ上でHTML
こんにちは!がねこまさしです。前回は複数人の同時通話まで実現しました。社内で使うには十分なレベルです。 しかし本格的な企業ユースとなると、まだまだ障害があります。会社と家、自社と別の会社さんなど、実際に通信しようとするとNATやFirewallといった壁が立ちはだかります。 NATを越えよう NATの役割は NAT(+IPマスカレード)は企業だけでなく、一般家庭でも使われています。ブロードバンドルーターやWiFiルーターでは、1つのグローバルIPアドレスを、複数のPCやデバイスで共有することができます。このとき、NATには2つの役割があります。 インターネットにつながったグローバルなIPアドレスと、家庭内/社内のローカルなネットワークでのIPアドレスの変換 複数のPC/デバイスが同時に通信できるように、ポートマッピングによるポート変換 WebRTCでNAT越しに通信すること考えてみましょう
公益社団法人日本印刷技術協会(JAGAT)XMLパブリッシング研究会が米国の出版社O’Reilly Mediaが提唱するHTMLBookフォーマットの仕様案及びHTMLBookの紹介ページの日本語訳を公開しています。 HTMLBookはオープンで、XHTML5ベースでプリントとデジタル双方の本を執筆・制作するためのフォーマットです。XHTML5(HTML5)のサブセットでセマンティクスにEPUBの語彙(EPUB 3 Structural Semantics Vocabulary)を使用しています。 HTMLBook仕様: ワーキングドラフト (最終更新日 2013年12月29日)(原文) (HTMLBook紹介)HTMLBook-JA · GitHub(原文) PDF、EPUB、mobi(Kindle形式)、DAISYなどの電子書籍フォーマットをマルチに提供するO’Reilly Media
HTML5は多彩な機能をWebにもたらしてくれますが、機能が多彩でブラウザによってサポートされている機能が異なるなどまだまだ課題も多いのが実情です。しかしその課題こそプログラミングによって解決できる余地がある部分でもあります。 今回はオーディオ系APIを一つにまとめて提供してくれるライブラリBoombox.jsを紹介します。 Boombox.jsのデモ 実行中です。 Boombox.jsはHTMLAudio/WebAudio/HTMLVideoの3つのAPIを透過的にサポートするライブラリです。さらにブラウザが非アクティブな時には音を消したり、同時に複数の音を鳴らすのもサポートしています。 ミックスもサポートされています。 単純な再生、停止はもちろんのこと途中から再生したりループ再生、ボリュームの調整もできます。フィルタリングもサポートされています。サポートブラウザとしてはiOS/Andr
Enterprise x HTML5 Web Application Conference 2014の発表資料です。
HTML5に関連する技術のひとつに、WebGLがあります。WebGLは、ブラウザー上で3DCGプログラミングを実現できる技術です。今回のレポートでは、WebGLプログラミングの基礎知識についてご紹介します。 WebGLって? WebGLでどんなことができるのか──百聞は一見にしかず。まずは例を見てみましょう。demo内のスライダー部分をドラッグすることでカメラの位置などを任意に変更できますので、リアルタイムでレンダリングされていることがわかるでしょう。 (invalid jsdo.it code) このように、ブラウザー上でプラグインに頼ることなく、なめらかな表面、自然な影、高FPSでのリアルタイムレンダリング(アニメーション)など、まるで最近の家庭用ゲーム機にも匹敵する高度な3DCG表現ができるわけです。 WebGLは2013年10月現在、Chrome、Firefox、Operaで標準対
Not your computer? Use a private browsing window to sign in. Learn more about using Guest mode
Build your mobile web applications faster than ever before — deploy on iOS, Android and other phones supporting HTML5 technologies! mobl is a new free and open source language designed specially to speed up building mobile applications. Using modern HTML5 technologies, mobl offers you a concise language to build native-feeling web apps in a jiff; great (Eclipse) IDE support (such as as-you-type er
moblはEclipse上で開発し、HTML5/CSS/JavaScript/画像を生成するスマートフォン向けプログラミング言語。 moblはJava製のオープンソース・ソフトウェア。スマートフォンの人気がとても高い。特にWebKitのモバイル版を組み込んでいるものが殆どで(iOS/Android/Palm Pre/Blackberryなど)HTML5の恩恵にあずかりやすいのが良い。 開発環境はEclipse そんなHTML5のパワーを使えば、まるでネイティブアプリのような動作をさせることも可能になっている。そのためのスマートフォン向けライブラリは数多くあれど、moblは一味も二味も違う。完全に専用言語でスマートフォン向けWebアプリケーションを開発できる。 moblはEclipse用のプラグインを配布しており、それをインストールした後プロジェクトを作成する。使うのはmoblという拡張子の
The-M-ProjectはiOSやAndroidといったスマートフォン向けに特化したWebアプリケーションフレームワーク。 The-M-ProjectはJavaScript/HTML5製のオープンソース・ソフトウェア。Webアプリケーションが本格的に取り入れられるようになっている。AjaxなどによるWebアプリケーションの操作性向上に加えて、JavaScriptで実現しうる機能が増えていることに要因があるだろう。 サンプルのTodoアプリ そしてもう一つがHTML5の存在だ。PCブラウザ向けにはまだ全面採用は難しいものの、スマートフォンであれば採用できるだろう。そんなスマートフォン向けのWebアプリケーションを開発する際に使えるフレームワークがThe-M-Projectだ。 The-M-ProjectはHTML5を採用したWebアプリケーションフレームワークだ。iOSはもちろん、Andr
ひさしぶりのエントリになります。JavaScript Advent Calendar 2010 の24日担当です。 この Advent Calendar では、12月1日からクリスマスの12月25日まで1日ずつ持ち回りでblogに書くことになっています。お題に"JavaScript"とあるように、blogは、JavaScriptに関するものになります。他の方々も面白いことを色々を書いておられますので、是非読んでみてください。 さて、何やら世間はクリスマスイブで盛り上がっていますが、仕事で缶詰の私には関係ありませんので(もちろん仕事がなくても関係ありませんが…)、今回は、HTML5 の API のひとつである、Web Storage について紹介したいと思います。 割と初心者向けの内容になります。 Web Storage とは Web Storage は、データをブラウザ上に永続的に保持する
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く