2014/8/30に開催された「HTML5とか勉強会 in IWATE 2014」のセッション資料です。
モバイル時代のWebパフォーマンス
2014/8/30に開催された「HTML5とか勉強会 in IWATE 2014」のセッション資料です。
スマホ向けサイト制作の実装＆使えるTips10選
スマホ向けサイト制作の実装＆使えるTips10選：jQuery Mobileでスマホ向け企業サイト構築（3）（1/4 ページ） まだjQuery Mobileを触ったことのないWeb制作者向けに、基本的な利用方法を学びながら、jQuery Mobileを使った簡単な企業サイトの構築の仕方を解説していきます。今回は、画面遷移の制御、アイコン表示、ナビゲーションバー、検索フィルタ、基本的なHTMLスタイル、固定ポジションモードなどを紹介します jQuery Mobileでスマホ向けサイト制作は、こんなに簡単にできる 前回の第2回「触りながら覚えるスマホ向け企業サイト設計の基礎知識」では、サイトの基本構造についての説明と、トップページのコーディングに合わせてヘッダ、フッタなどのツールバー、リストビューコンポーネントを紹介しました。 新年1発目となる本連載の第3回はお知らせページの作成を進めつつ、
スマホ用JavaScriptフレームワーク5つ＋1を徹底研究（1/5） - ＠IT
スマホ用JavaScriptフレームワーク5つ ＋1を徹底研究 jQuery Mobile、iUI、jQTouch、 Sencha Touch、Wink toolkit、PhoneGapとは アシアル株式会社 鴨田健次 2011/6/22 スマートフォン向けJavaScriptフレームワーク／ライブラリを使うと、スマートフォンアプリっぽい見た目のページデザイン、UI（ユーザーインターフェイス）パーツやページ遷移アニメーションを簡単に実装できます。多くは、おのおののフレームワークのルールにのっとったHTMLを書くことで、それらの機能を実現します。 本稿では、jQuery Mobileを筆頭として、いくつか発表されているスマートフォンサイト向けJavaScriptフレームワークを紹介します。 ■ PCサイト向けJavaScriptフレームワークについて PCサイト向けJavaScriptフレー
jQuery Mobileのマークアップの基本とCSSの変更 (1/6)
jQuery Mobileによるスマートフォンサイトの制作方法を解説する本連載。前回に引き続き、簡単な会社案内サイトを作りながら、jQuery Mobileの基本的な使い方を学びましょう。 aboutページの作成とCSS3によるデザインの変更 今回はトップページ以下の詳細ページを順に作成していきます。まずは「to-Rについて」のページ（#about）から取り掛かりましょう。前回作成したindex.htmlに次のようなHTMLを追加します。「data-role="content"」の中にh2要素とp要素を加えただけの簡単なHTMLです。 ■サンプル1[HTML] <div data-role="page" id="about" data-theme="b"> <div data-role="header"> <h1>to-R</h1> </div> <div data-role="conte
HTML5のモバイルアプリを“ネイティブアプリ化”する「PhoneGap」が正式版に。オンラインでの変換サービスも発表
HTML5のモバイルアプリを“ネイティブアプリ化”する「PhoneGap」が正式版に。オンラインでの変換サービスも発表 HTML5、CSS、JavaScriptなどのWeb標準の技術で作成したモバイルアプリケーションを、iPhoneやAndroidなどのデバイスにインストール可能なネイティブアプリケーションへと変換するフレームワーク「PhoneGap」が、正式版「PhoneGap 1.0」になったと開発元のnitobiより発表されました。 PhoneGapはオープンソースソフトウェアとして開発されているソフトウェアで、無料でダウンロードし利用することができます。 デバイスごとのネイティブアプリケーションに変換 PhoneGapを、jQuery Mobileのようなマルチデバイスに対応したモバイルアプリケーション用フレームワークと組み合わせると、HTMLやJavaScriptなどのWeb標準
10分でわかる！ jQuery Mobileのキホン (1/2)
スマートフォンサイトの制作でいま注目を浴びているのが「jQuery Mobile」です。jQuery Mobileを利用すると、CSSやJavaScriptの知識がない人でも簡単に本格的なスマートフォンサイトを作成できます。そんな“jQuery Mobileのキホン”が10分でわかるように、要点をギュッと絞って解説しましょう。 ※本記事は、jQuery Mobile 1.0をもとに執筆しています。 0分目： jQuery Mobileのダウンロードと利用方法 jQuery Mobileは、HTMLのhead要素で、（1）jQueryのスクリプトファイル、（2）jQuery Mobileのスクリプトファイル、（3）jQuery MobileのCSSファイルを読み込むだけで利用できます。 それぞれのファイルはjQueryのサーバーから呼び出せるようになっているので、わざわざ手元にダウンロードし
HTML5をすぐハイブリッドアプリとして試せる無料のツール「Monaca」を使ってみた
HTML5/JavaScriptで作成したアプリケーションをラップし、ネイティブアプリケーションとして扱える「ハイブリッドアプリケーション」は、高い生産性でモバイルアプリケーションを開発できるといったメリットから注目されています。 しかし実際に自分でハイブリッドアプリケーションを開発しようとすると、例えばiOS用ならMacOSのマシンを用意してPhoneGapの環境を整え、ビルドしたアプリケーションをいちいちiPadやiPhoneに転送して試すなど、それなりの手間がかかります。Publickeyでは以前からハイブリッドアプリケーションに注目して紹介してきたため、時間があれば自分でもHTML5とJavaScriptで作ったアプリケーションをハイブリッド化しみてみようと思いつつ、なかなか開発環境を整備するに至りませんでした。 そこで思い出したのが「Monaca」です。Webブラウザ上でHTML
スマートフォン対応でよく使うhtml、css、javascriptのまとめ
スマートフォン(ios、android)向けのウェブサイト・ウェブアプリを作る際に個人的によく使うhtml、css、javascriptの備忘録。 html関連 headタグ内での設定<!-- //デバイスサイズにあわせて表示領域を変更する --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- //電話番号のリンクを無効化 --> <meta name="format-detection" content="telephone=no"> <!-- //ホーム画面用アイコン --> <link rel="apple-touch-icon" href="icon.png"> <!-- //ホーム画面用アイコンの光沢を無効化する --> <link rel="apple-touch-icon
いったん、水を差されたHTML5の現状と、将来について
藤川真一（えふしん） FA装置メーカー、Web制作のベンチャーを経て、2006年にpaperboy&co.へ。ショッピングモールサービスにプロデューサーとして携わるかたわら、2007年からモバイル端末向けのTwitterウェブサービス型クライアント『モバツイ』の開発・運営を個人で開始。2010年、想創社（現・マインドスコープ）を設立。2012年4月30日まで代表取締役社長を務める Facebookが、HTML5をベースにしたアプリから、ネイティブアプリに舵を切った時に、「HTML5に賭けたのは失敗」という話が業界を駆け巡った。 それまでHTML5は、新しいWeb技術の希望の星のように言われており、将来を渇望されていたところに水を差された形になった。 そこで、改めて冷静に「HTMLとは何なのか？」ということを考え直してみた方が良いと思う。 HTMLとWebブラウザの技術的メリットは、 画像な
html5でアプリの壁を超える方法
制限 同時に再生できる音源は1ファイルのみ 再生できるタイミングはユーザイベントのハンドラ内だけ プリロード不可 OS自体のサイレントモードと連動せず BGMを流すだけならこんな方法も $('<div>BGMを再生しますか？</div>').appendTo('body').click(function () { $(this).remove(); (new Audio('bgm.mp3')).play(); }); $('body').on('click', 'a', function (e) { e.preventDefault(); $.get($(this).attr('href')).success(function (html) { $('body').html(''); $('body').append($(html).find('body')); }) });
HTML5モバイルWebフレームワークの比較 - きしだのHatena
モバイル用でJavaScriptでアプリケーションを作成できるフレームワークについて比較した記事を翻訳しました。 Comparing HTML5 Mobile Web Framework - Dzyngiri Comparing HTML5 Mobile Web Framework Apr 27, 2012 by Dzyngiri 今年はモバイルWebにとって面白い年になっている。HTML5とCSS3の採択、モバイルブラウザのパフォーマンス向上、モバイルアプリケーションフレームワークの爆発は、モバイルデバイスでのリッチでインタラクティブなWeb体験の作成がこれまでよりも現実的になったことを意味する。PhoneGapのようなラッパを使うことで、iPhoneやiPad、AndroidのネイティブのAppストアでアプリケーションを配布することも可能になった。単一のコードベースでマルチプラットフォ
モバイルアプリケーション開発のためのHTML/CSS/JavaScript関連技術まとめ
モバイルアプリケーションをHTML/CSS/JavaScriptなどのWeb標準技術を用いて開発するためのさまざまなツールや環境が登場しています。1つ前の記事で紹介した「jQuery Mobile」もその1つですが、それ以外のものもここでまとめて紹介しましょう。 jQuery Mobile jQuery Mobileは、JavaScriptライブラリとして知られるjQueryのプラグインです。オープンソースで提供されています。 「マークアップドリブン」をコンセプトとし、HTMLを記述していくことで、あらかじめ用意されているボタン、メニュー、ダイアログボックス、などのモバイル対応のタッチユーザーインターフェイスを備えたアプリケーションを開発できます。 クロスプラットフォームに対応し、iOS、Android、WebOS、Windows Phone、Symbianなど多数のデバイスでそのまま動作
スマフォのHTML5環境向けに作られたjQueryライクな軽量フレームワーク・jQ.Mobiの日本語サンプル作った - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 なかなか良さそうだったので備忘録。iOSやAndroidなど、スマートフォンでのHTML5環境に合わせて作られた軽量モバイルフレームワークです。jQuery互換なので慣れてる方は使い方もすぐに覚えられると思います。特に軽量なのが嬉しいですね。 現状、jQueryを使うのであればスマートフォンにはjQuery Mobileという選択肢となりますが、やはりファイルサイズが気になります。そこで、jQueryをなんとか軽量に使おう、という動きが少し目立ってきました。 例えばzepto.js。がそうですし、jquipという、目的に合わせてjQueryを細分、モジュール化するライブラリなどもあります。 jQ.Mobiもその一つで、jQueryっぽく使えるHTML5環境のスマート
Youtubeの動画を背景に
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webの開発側にいる人間でFlash死ね！HTML5最高!と言っている人は正直どうかと思う。