[B! html5] Kesinのブックマーク

HTML5によるハイブリッドアプリ開発に関する雑記 - id:anatooのブログ

HTML5でiPhoneやAndroid向けのハイブリッドアプリを作るのが最近の流行りみたいです。ハイブリッドアプリとは、外面は普通のアプリとしてAppStoreやGoogle play marketでインストールできるものの、その中身や一部がHTML5で記述されているアプリです。最近の有名な例だと、CookpadやLinkedIn、はてなスペース、少し前にネイティブに移行してしまいましたがfacebookのモバイルアプリもHTML5を使って記述されていました。GREE界隈で言われているらしいガワネイティブっていう言葉もハイブリッドアプリを指します。ちょっとググってみると、2016年には企業向けのアプリの50%がハイブリッドアプリになるという予測もあります。ハイブリッドアプリの何がいいかというと、Objective-CとかJavaとかがわからなくてもウェブ系技術者であればAndroid

Kesin 2013/02/11

html5
iphone

リンク

Webアプリケーションを高速化する50のトリック

MicrosoftのInternet Explorer PMであるJatinder Mann氏は、BUILD 2012でHTML5アプリとサイトを高速化する50のパフォーマンストリックというセッションで、Webアプリケーションを高速化する多くのチップスを提供した。 Mann氏が提供したアドバイスは、以下の6つの原則を中心に構成されていた。 1. ネットワークリクエストに迅速に応答するリダイレクトを避ける。上位1,000のWebサイトのうち63%は、リダイレクトを使用している。これらはリダイレクトをやめることによって10%のパフォーマンスを改善することができる。メタリフレッシュを避ける。世界のURLのうち14%は、メタリフレッシュを使っている。可能な限りユーザーの近くにあるCDNを使用してサーバーの応答時間を最小化する。異なるドメインからのリソースをダウンロードすることによって、同時

Kesin 2012/11/28

リンク

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')); }) });

Kesin 2012/08/22

html5

リンク

HTML5 で作る iPhone ローカル Web アプリ入門

さて、まず「ローカル Web アプリ」ってなんぞっていう話ですが、Web ベースの技術で作られブラウザからサーバにアクセスして利用するものの、いったんロードが完了したら、それ以降はネットワーク接続不要で動作する Web アプリ、といった概念を表した造語です。 iPhone の App Store を経由することなく配布が可能なので、アプリの内容について一切の制限がなく、また、最近のライブラリの進歩やモバイルパフォーマンスの向上により、ものによってはネイティブアプリと遜色ないレベルのものも作れるようになってきました。先日、1 Click Config (閉鎖済) (解説記事) を作って公開しましたが、これがまさにローカル Web アプリとして動作しています。ここで使われている技術の各論についてはそれぞれ詳しく書いたサイトがあるのですが、これらの技術をひとまとめに紹介しているサイトが見当た

Kesin 2011/11/23

リンク

ここが変わった！HTML5マークアップ入門 (1/6)

ローソン、無印良品、テレビ朝日など、国内でもHTML5で企業サイトを制作する事例が増えてきました。今すぐではないにせよ、﹁次のリニューアルはHTML5で制作したい﹂と考えるWeb制作者も少なくないでしょう。本連載では、﹁XHTML 1.0/HTML 4.01からの移行﹂をテーマに、HTML5マークアップの基本から実務で使用するポイントまで、ライブドアのマークアップエンジニア　浜俊太朗さんが解説します。︵編集部︶﹁HTML5タグの誤用で恥をかいた﹂﹁分厚い仕様書は読み切れない﹂コーダー＆デザイナーのためのコーディングガイド。最終草案に対応したほか、商用サイトを意識したコーディング例を新たに書き下ろし。HTML5マークアップへ移行するために必要な知識を効率よく学べる1冊です。ネットで話題の﹁HTML5カルタ﹂付き!HTML5マークアップ現場で使える最短攻略ガイド定価‥2,808円︵

Kesin 2011/08/03

html5

リンク

jQuery製で手軽に使えるHTML5による画像のドラッグアンドドロップアップローダー·Droparea MOONGIFT

DropareaはHTML5/jQueryで画像のドラッグアンドドロップによるファイルアップロードを行うライブラリ。 DropareaはHTML5/JavaScript製のオープンソース・ソフトウェア。HTML5によって大きく改善されたWebの機能の一つがファイルアップロードではないだろうか。複数のファイルがアップロードできるようになったり、ドラッグアンドドロップでもアップロードできるようになった。アップロードするとすぐにサムネイルが表示されるドラッグアンドドロップでのアップロードとしてはGmailが有名だが、ファイルを持っていってはじめてドロップできることに気づくのでは使い勝手が良いとは思えない。それをもう少し分かりやすくしたのがDropareaだ。 DropareaはWebページに写真をアップロードするjQueryプラグインだ。特徴としてアップロードできる部分があらかじめ指定されて

Kesin 2011/07/03

リンク

最近よく使ってる、Web制作に役立つWebサービス的なやつ

少し前に聞いてくれた方がいたのでついでにシェアしてみます。個人的に最近よく好んで使っている、Web制作に役立つWebサービスみたいなものをご紹介。全部既出で珍しいものは無いんですけど、一覧にするのもたまにはいいかもですね。というわけで、場合によっては誰得な記事ですけどご了承下さい。僕がここ最近でよく使ってるWebツールを古いのから新しいのまで、順不同でご紹介していきます。 web計。 →　黄金比・白銀比をサクサク計算計算が面倒な黄金比や白銀比を、数値を入力するだけでサクサク出してくれます。動作も軽くてストレス無しです。 web計。 simplelib →　よく使うjQueryコードをパッケージで配布めっちゃ楽です。jQueryで作りたい機能だけを選択して、1つのjsファイルにパッケージにしてくれますよ。ページスクロールとかタブとか需要の高いものが揃っています。ちょっと機能を

Kesin 2011/06/30

リンク

jQueryやHTML5を使ってiPhoneやiPad向け電子書籍を作成する為のフレームワーク・Laker

iPadや、iPhoneなどのタッチデバイスの普及で、個人的にも電子書籍への関心がかなり高まりました。そんな中、割と良さそうな電子書籍専用のフレームワークがあったのでメモがてらご紹介。こういうの覚えておくと重宝しそうですね。なかなか動きが良かったです。ただ読むだけの電子書籍ではなく、HTML5やjQueryを使って、より﹁電子﹂らしく表現出来ると楽しそうですね。 HTML5で作る電子書籍用のフレームワークです。jQueryやiPadのようなタッチデバイス向けのフレームワークとなっています。複数フレームワークを併用 Lakerには定番のjQueryや、iPhone、iPadで黄金比を保つcssフレームワークのLess Framework、HTML5+jQuery製動画プレイヤーのjPlayer、スワイプイベントをサポートする為のライブラリ、TouchSwipeなども搭載されてい

Kesin 2011/06/12

リンク

ジャストアイディアを素早く形にしていく。HTML5/CSS3デザインテンプレート·Perkins MOONGIFT

PerkinsはHTML5/CSS3のデザインテンプレート。多数のパターンに対応している。 PerkinsはHTML5/CSS3製のオープンソース・ソフトウェア。アイディアを思いついてすぐにコーディングにとりかかるが、Webデザインで詰まって投げ出してしまったという経験はないだろうか。デザインが今ひとつだと開発する気力までなくなってしまうというものだ。 2カラム必要なのはある程度までパターンとして対応できる汎用的なテンプレートだ。それを実現するソフトウェアとしてPerkinsを紹介しよう。 PerkinsはHTML5/CSS3でデザインされたテンプレートだ。2カラムまたは4カラムのデザインで、ヘッダーやリスト、引用、コード記述、画像の回り込み、テーブル、フォーム、エラー（または通知）メッセージ、ボタン、角丸、傾き、細かく分けたブロックなどが用意されている。リストなどさらに文字をアイコ

Kesin 2011/06/04

HTML5

リンク

JavaScriptでマルチプラットフォーム向けソフトウェアを開発·Chromeless MOONGIFT

ChromelessはHTML5/JavaScript/CSSを使ってWindows/Mac OSX/Linuxネイティブアプリを開発するSDK。 ChromelessはWindows/Mac OSX/Linux用のオープンソース・ソフトウェア。ソフトウェアを開発する際には、環境に合わせて言語を習得する必要がある。Windowsなら.NET系、Mac OSXならObjective-C、WebならJavaScriptやサーバサイドの言語などだ。テキストエディタだがはやり廃りはとても早く、常にトレンドを追いかけるのは疲れてしまう。一つの言語で様々な環境に、と思う人はChromelessを使ってみよう。 ChromelessはMozillaが開発しているソフトウェアで、JavaScript/HTML5/CSSを使ってデスクトップアプリケーションを開発できる。Webブラウザでラッピングしている

Kesin 2011/05/26

リンク

HTML5を使った音楽、動画を織り交ぜたインタラクティブな電子書籍を作成する·Laker MOONGIFT

LakerはHTML5をベースに画像や音楽、動画をインタラクティブに使った電子書籍を作成するためのフレームワーク。 LakerはHTML5/Objective-C製のオープンソース・ソフトウェア。数年前まで一般の人が書籍を出版しようと思うのは相当困難なことだった。だが今では電子書籍があり、誰でも簡単に書籍を出版できるようになっている。それこそ旧来のしがらみがない分、身軽だ。 iPad用表示電子書籍を出版しようと思った時に問題になるのはそのデザインや文書の作り方だろう。だが心配は無用だ。HTML5を使って柔軟に作成できるフレームワーク、Lakerがある。 LakerはBakerをカスタマイズし、より多機能な電子書籍を作成できるフレームワークだ。HTML5を使うのはそのままだが、縦スクロールで長い1ページを表示し、横スクロールで次のページに切り替えられるようになっている。縦の長さが可変なのは

Kesin 2011/05/15

リンク

JavaScriptやHTML5でデスクトップアプリケーションを開発するツール「Chromeless 0.2」リリース | OSDN Magazine

Mozilla Labsは4月29日、JavaScriptなどのWeb技術を利用してデスクトップアプリを構築する実験プロジェクト﹁Chromeless 0.2﹂を公開した。Firefox 4と同じレンダリングエンジンを利用、最新のWeb技術を利用できるという。 Chromelessは、HTML、JavaScript、CSSといったWeb技術を用いたデスクトップアプリケーションを作成するためのツールを開発する実験的プロジェクト。 Chromeless 0.2では、先にMozillaが公開していたFirefox 4と同じレンダリングエンジンを採用、﹁WebM﹂﹁HTML5 Parser﹂などの最新技術が利用でき、マルチタッチ、WebGL、コンテンツのハードウェアアクセラレーション、JavaScript 1.8.5などにも対応する。 Chromelessで作成したアプリケーションは、Chrome

Kesin 2011/05/05

html5

リンク

必見。スマートフォン対応、WebベースのHTML5オーサリングソフトウェア·Maqetta MOONGIFT

MaqettaはIBMからDojoに寄贈されたWebベースのHTML5対応オーサリングソフトウェア。 MaqettaはWebベース、Java製のオープンソース・ソフトウェア。HTMLのオーサリングツールと言えばDreamweaverをはじめとしてローカルソフトウェアで行うのが一般的だ。だがその結果をレンダリングするのはWebブラウザだ。この環境の違いで作りやすさが変わってしまう。メイン画面どうせWebブラウザ上で動かすならば、元々Webブラウザ上で作ってしまうのはどうだろう。IBMが開発し、先日Dojoに寄贈されたMaqettaを使えばそれが実現する。 MaqettaはHTML5用のオーサリングツールで、Webブラウザ上でHTML/CSSを作成することができる。DojoやYUIといったUIウィジェットに対応しており、ドラッグアンドドロップで画面を作成していくことができる。配置したウィジ

Kesin 2011/04/25

リンク

HTML5でiOS Webアプリを作ってみました -えほんのじかん(iPad版)-

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blogはじめにこんにちは、EveryWhere開発部の久下孝順、高橋淳史と申します。先日リリースされました、iPad用Webアプリ﹁えほんのじかん﹂︵iPad版︶の紹介をさせていただきます。このサービスの内容はごく単純で、たくさん並んだサムネイルから気に入ったものを選択すると、アニメーションと朗読によって構成された絵本風の動画が流れる、というものです。もともとこの﹁えほんのじかん﹂の元祖は、﹁テレビ版﹂でした。インターネット対応テレビ向けに提供しているテレビ版Yahoo! JAPANやYahoo! JAPAN for AQUOSなどからみることができます。 iPad版より作品収録数は多く、30作品以上を掲載しています。テレビ

Kesin 2011/04/13

html5
ipad

リンク

HTML5時代が目前！本気で学ぶJavaScript

登場当時、動きのあるWebページを作る技術として注目されたJavaScriptは、その後“不遇”の時代を経て、Ajaxで再び脚光を浴びました。jQueryなどのライブラリの普及で、開発生産性やブラウザ互換性の問題がほぼ解決した現在、HTML5時代を目前にして、JavaScriptの重要度はさらに高まっています。この特集では、今、知っておきたいJavaScriptを一気に解説します。目次

Kesin 2011/04/11

リンク

今からハジメるHTML5マークアップ

3月10日にGDG京都さんのイベントの「GDG DevfestW Kyoto」で発表してきました。 https://sites.google.com/a/kyoto-gtug.org/devfestw/ HTML5でWebサイトを作ると制作者的に楽ですよ、と言うネタです。使えるタグとその覚え方、困ったことに対する処理方法の紹介です。

Kesin 2011/04/07

HTML5

リンク

HTML5, きちんと。

This document describes how to configure Spring Security for authentication and authorization in a web application. It defines a WebSecurityConfig class that configures HTTP security with roles like OWNER and MANAGER for access control. It also defines a UserDetailsManager service for loading users and a User entity class implementing UserDetails. Tests are shown for security configuration, login,

Kesin 2011/04/07

html5

リンク

モバイルゲームの歴史を年代別にご紹介します。モバイルゲームの成長と今後について詳しく解説していきます。

モバイルゲーム物凄い勢いで勃興したモバイルゲーム業界は、いろいろな課題や問題に直面しながらも巨大化し、今日の時点でのスマートフォン向けゲームの市場へと継承されていきます。モバイルゲームの歴史 2001 Javaアプリと3Dゲームの登場 Javaが利用できるようになったことにより、ダウンロード型のゲームが供給できるようになりました。 2002 携帯電話端末の大容量化・3D化競争 Java搭載携帯電話端末が登場してからごく僅か1年の間に、アプリのサイズに関しては10倍に広大化し、表現方法も2Dから3Dにシフトし始めました。J-PHONEは﹃ゼビウス﹄や﹃スペースハリアー﹄などといった昔のアーケードゲームを、ドコモはSIMCITYなどパソコンで世界的規模のヒットを飛ばしたゲームを主力商品としていました。 2003 モバイルゲームの一般化メモリの制限が厳しいJava仮想マシン上ではなく、OS

Kesin 2011/03/17

リンク

HTML5のlocalStorageでiPhone用Webアプリを高速化

HTML5のlocalStorageでiPhone用Webアプリを高速化‥iPhoneで動かす業務用Webアプリ開発入門︵4︶︵1/2 ページ︶今回は、iOSのSafariの中にデータを記録できる、HTML5の﹁localStorage﹂機能を使って、データの先読みとキャッシュを実現しアプリケーションの体感パフォーマンスを向上させてみます。 HTML5の﹁localStorage﹂とは localStorage︵ローカルストレージ︶とは、HTML5で規定されている、Webブラウザ内部のKVS︵キーバリュー型データストア︶です。iOSのSafariでも実装されていて、JavaScriptコードからアクセスでき、任意のデータを保存できます。いきなり注意！ localStorageの保存データはテキストで！ HTML5の仕様では、localStorageに保存できるデータはJavaScrip