ヒカラボ(ウェブ技術でiOS/Androidアプリ開発！！～HTML5ハイブリッドアプリ開発[実践]入門～)での発表スライドです。 書籍『HTML5ハイブリッドアプリ開発[実践]入門』には、このスライドに載っていないCordovaの使い方、最適化のためのノウハウやテクニック、ジェスチャやviewp…
jQuery MobileなどのすぐれたJavaScriptフレームワークの登場で、HTML5とJavaScriptを組み合わせたWeb標準によるモバイルアプリケーション開発が普及し始めています。 この記事では、Web標準によるアプリケーション開発をさらに簡単にしてくれる、WebブラウザベースのjQuery Mobile対応モバイルアプリケーション開発環境「codiqa」と「Application Craft」の2つを紹介しましょう。 Codiqa～jQuery Mobileアプリのモックアップがすぐ作れる モバイルデバイス対応のアプリケーションを開発するときに手間がかかるのが、小さい画面でも使いやすいユーザーインターフェイスの構築です。モックアップを作り、使い勝手を試す必要があります。 先月公開が始まった「codiqa」は、そのモックアップを手軽に、Webブラウザ上でドラッグ＆ドロップす
HTML5対応のテンプレートツール「Initializr」にBootstorap 2向けのテンプレートが追加された。InitializrはWebサイト上で使用するフレームワークなどを選択するだけで、Webサイトで利用できるテンプレートを簡単に作成してくれるツールである。 テンプレートを使うメリット HTML5の登場で、Webサイトの表現力は格段に向上している。従来は特別なプラグインを使う必要のあった多彩なデザインが、Webブラウザの標準機能だけで実現できるようになりつつある。 しかしながら、現時点でHTML5を使う上では気をつけなければならない点が多数存在することもまた事実である。もっとも重大な問題としては、Webブラウザ間でサポートする機能が統一されていないことだろう。素晴らしいと思って使ってみた機能が、ほとんどのブラウザで動作しなかった、ということにもなりかねない。もっと言えば、世の中
PhoneGap 1.3では主にWindows Phone 7のサポートを強化し、加速度計、コンパス、カメラなどのネイティブな機能がすべて利用可能になりました。また、BlackBerry向けアプリの開発がMacOS上で可能になっています。 以下がPhoneGap 1.3で対応しているネイティブ機能の一覧です。 PhoneGap:Buildも1.3にバージョンアップ PhoneGapはオープンソースで開発されており、無料でダウンロードして利用できます。ただし、ネイティブアプリの生成にはPhoneGapと同時に各モバイルデバイス向けのSDKのインストールが必要になります。 開発元のNitobiはPhoneGapを用いたネイティブアプリの生成をサービスとして提供する「PhoneGap:Build」も提供しており、これを利用すると開発者は手もとにPhoneGapやSDKなどをインストールする必要が
初めての投稿となります。エンジニアのmatsuです。 携帯向けウェブサイトを1時間でスマートフォン対応する方法を紹介します。 概要 2011年4月7日のニュースにて携帯電話の新規契約数のうち、スマートフォンが占める割合が50%を越え、スマートフォンが本格的に普及する兆しが見えてきました。 現在、スマートフォン向けサイトを新規構築するためのチュートリアルは数多く出ていますが、既存の携帯サイトをスマートフォンに最適化する方法があまり紹介されていないのでこの記事で紹介したいと思います。 このチュートリアルを行うと以下のようになります。 実装 全部で8ステップあります。 このチュートリアルではブログのトップページを例にとって説明します。 前半では文字コードの変更、HTMLの変更といった構造を変更します。後半では絵文字や文字スタイルを行い、仕上げとしてHTML5のバリデーションを行っていきます。最初
MaqettaはIBMからDojoに寄贈されたWebベースのHTML5対応オーサリングソフトウェア。 MaqettaはWebベース、Java製のオープンソース・ソフトウェア。HTMLのオーサリングツールと言えばDreamweaverをはじめとしてローカルソフトウェアで行うのが一般的だ。だがその結果をレンダリングするのはWebブラウザだ。この環境の違いで作りやすさが変わってしまう。 メイン画面 どうせWebブラウザ上で動かすならば、元々Webブラウザ上で作ってしまうのはどうだろう。IBMが開発し、先日Dojoに寄贈されたMaqettaを使えばそれが実現する。 MaqettaはHTML5用のオーサリングツールで、Webブラウザ上でHTML/CSSを作成することができる。DojoやYUIといったUIウィジェットに対応しており、ドラッグアンドドロップで画面を作成していくことができる。配置したウィジ
KeyDownはMarkdown記法を使ってテキストファイルからHTML5のプレゼンテーションを生成する。 KeyDownはRuby製のオープンソース・ソフトウェア。個人のエンジニア、デザイナーが集まる勉強会ではあまり凝ったプレゼンを見る事が少ない。むしろHTMLやKeyNoteなどを使ってカジュアルに作られる方が多いのではないだろうか。 スライド テキストファイルで作成したプレゼンテーションは検索も容易でWebとの親和性も高い。配布して見てもらうのに特別なソフトウェアも無用と言う事なしだ。とは言え作成にHTMLを使ったりしたくない、という人はKeyDownを使ってみよう。 KeyDownはプレゼンテーションファイルの記法にMarkdownを使えるソフトウェアだ。keydownコマンドを使って（オプションはgenerate）プレゼンテーションのベースを作成する。!SLIDEというのがスライ
このところHTML5関連のモバイルアプリケーション開発について調べていて、先週の水曜日にはSwapSkills主催のイベント「jQueryモバイルで簡単！ スマートフォンサイト作成」に参加してjQuery Mobileについて勉強してきました。 jQuery Mobileとは、jQueryのプラグインとして利用するモバイルアプリケーション用のライブラリです。そしてその驚異的なまでの簡単さは、これから業務用のモバイルアプリケーションの作り方を一変させてしまう可能性を感じさせます。 jQuery Mobileの大きな特徴は次の3つです。 1）HTMLを書くだけでモバイルアプリケーションができてしまう 2）モバイルのユーザーインターフェイス対応の部品が多く揃っている 3）iOS、Android、WebOS、Windows Moblie、Symbianなどクロスプラットフォーム対応である 具体的な
Come creare il miglior gioco da casinò Quando si progetta un gioco da casinò, la prima cosa che devi considerare è che tipo di gioco sarà. Ci sono molti diversi tipi di giochi da casinò, dalle slot e video poker ai giochi da tavolo e giochi di carte. Dovrai decidere quale tipo di gioco si adatta meglio alle tue esigenze. Ogni tipo di gioco ha il proprio set di regole e regolamenti, quindi dovrai a
BlueGriffonはHTML5をサポートした、Firefox4をレンダリングエンジンにしたHTMLオーサリングツール。 BlueGriffonはWindows/Mac OSX/Linux用のオープンソース・ソフトウェア。Webは日々進化している。それに合わせて制作ツールも進化しなければならない。オーサリングツールとしてはDreamweaverのシェアが圧倒的なようだが、HTML5を考えると物足りなくもない。 HTMLファイルを開いた所 入力サポートは当たり前として、HTML5対応サイトの再現性が高くなければならない。最新の技術にも率先して対応しているブラウザと言えばFirefox、そんなFirefoxのGeckoエンジンを使ったオーサリングツールがBlueGriffonだ。 BlueGriffonはNvuやKompoZerの後継として開発されているオーサリングツールで、HTML5に十分
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という拡張子の
HTML5 Templateのデモページ Easy HTML5 Templateの特徴 汎用性の高いシンプルなつくり HTML5の新しい要素に重点をおいて設計 HTML5対応ブラウザはもちろん、IE6, IE7, IE8も考慮 モバイルデバイスも考慮 jQuery, Google Analyticsなどよく使用されるものを配置済み [ad#ad-2] Easy HTML5 Templateの外部ファイル Easy HTML5 Templateで使用している外部ファイルです。 screen.css Reset CSSには「Eric Meyer's reset」が使用されています。 modernizr-1.6.min.js 「Modernizr」。HTML5やCSS3をサポートしているか調べ、CSSの場合はエレメントにclassを加えます。 html5.js 「html5.js」。IE9未満（
TOP > WebDesign > ソース付き！HTML5を学ぶためのチュートリアル10選「10 Cool and Useful HTML 5 Tutorials」 開発者の間では次世代の規格として注目を集めているHTML5。まだまだブラウザも対応していない部分もあり商業デザインではなかなか使いづらいところもありますが、従来のHTMLと比べてかなり表現できる幅が広く、確実に今後WEBデザインの世界では必要となってくるものだと思います。今日紹介するのはそんなHTML5を学ぶためのチュートリアル10選「10 Cool and Useful HTML 5 Tutorials」です。 Design & Code a Cool iPhone App Website in HTML5 レイアウト的なものからJSと組合わえたものまで様々なHTML5のテクニックが学べるチュートリアルがまとめられて
Androbookというandroid用電子書籍プラットフォームを作りました。誰でも簡単に無料でAndroidマーケットを通じて世界中に電子書籍を売れるサービスです。今回HTML5に本格対応しました。zipで圧縮したHTMLだけで挿絵付きノベルやゲームなども作れますし、それをAndroidマーケットを通じて世界中に出せます。androbookは手数料も取りません。無料のサービスです。 HTMLも文字だけでなく、小説に挿絵を入れたい。 ノベルゲームなどを作りたい。 絵が描けないから文字だけのコンテンツを作りたい。 そういう声がいっぱい来ていたんで実装してみました。 書籍のサンプルとして作った「ダメ人間のための起業入門」。3ページくらいで終わるやる気のない新書です。すでにAndroidマーケットで無料で配っています。サンプルのHTMLもWebにあります。 また、ゲームのサンプルも作ってみました
この数カ月でHTML5のサイトが国内にも増えてきました。先日10周年を迎えた EC studio のサイトもHTML5で制作しています。マークアップの面でのHTML5の導入となりましたが、難しいと思う以上に勉強になることが多くありました。（今も改善を続けています。） http://www.ecstudio.jp/ 個人サイト以外でHTML5を導入するのをためらっている人が多いと思うので、今からでも使っていくためのコツやノウハウをまとめてみました。 新要素をJavaScriptで生成する HTML5の新要素はIEでは未知の要素です。そのため記述していてもDOMツリーが構成されなかったり、CSSが適用されないという問題が生じます。 そこでdocument.createElement(要素名);により、ブラウザ（ユーザーエージェント）にとって未知な存在の要素を生成し、認識させることができます。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
