負け組なモバイルWebは、これから本当に復活するのか？Googleが考える次のアーキテクチャ - ふろしき Blog
Google I/O 2015でのセッション「The Next Generation Mobile Web(次世代のモバイルWeb)」がそこそこに激アツな気がしたのですが、予想に反し、あまり注目を集めていません。 わかります。大衆向けなメディアだと、AndroidやVR/AR、Google Photosのようなわかりやすいキーワードの方が注目されるでしょう。エンジニア向けメディアであっても、昨今のモバイル技術の状況を鑑みて、ネイティブアプリの方を扱いたいと感じるのが当然です。 先日、某懇親会で「え、モバイルをWebでやっているのですか？それ、完全に負け組じゃないですか」と言われ、そこまで印象が悪いものかと心を痛めました。負け組とか、Webがかわいそうじゃないか。 そんな状況というのもありまして、先日の「第58回HTML5とか勉強会」では、あえてGoogleらが考える「次世代モバイルWeb」
スマートフォン時代のCSS Frameworkあれこれ : 構想雑文
構想雑文 WEBデザインとmacに関すること中心の自分向けメモ主体のブログ。 DREAMWEAVER、Illustrator、Photoshopなどのアプリケーションの設定や使い方。HTML、CSS、JavaScript、PHPのコーディングのことをあれこれ書いています。 ここ最近のサイトへのアクセスログを見ていると、スマートフォンからのアクセスが増加傾向にあるので、ウェブサイトつくるときもスマートフォンに考慮したサイトにせねば、とようやく思い始めています。 スマートフォン向けのレイアウトをつくるのは苦手だし、特に、レスポンシブウェブデザインのレイアウトって面倒としか思えないし、どうするかなぁ、と思うもすぐにCSS Frameworkを使えば解決するかなぁ、と思って調べてみました。 CSS Frameworkの数あり過ぎです。 昔は、グリッドレイアウトをきれいに作成するぐらいのものでしたが
アプリのUIデザインはズルいデザインテクニックを活用しよう！ - 40歳からのキャリアチェンジ
@ITのHTML5 + UX : HTML5とUXの総合情報フォーラムというカテゴリで、少ない手間と知識でそれなりに見せる、ズルいデザインテクニックという記事があります。 クラフトビールの情報（特にクラフトビールが買えるお店のやつ）をiPhoneで気軽にチェックしたいという自分の欲求を満たすためにアプリ作っているのですが、UIデザインをそれっぽく仕上げたいので上記記事を参考にして、このような↓感じのUIを作ってみました。 グラデーション設定での工夫点 SassやCompassを使って、ズルいデザインテクニック (1/2)という記事の中でズルいグラデーションという内容が取り上げられています。 一部引用すると ベタ塗り一歩手前くらいの、微妙な明度差のグラデーションで本物っぽい質感を出そう 一見、1色でベタ塗りにしたように見えるけど、よく見ると微妙に上下で色の明るさが異なるグラデーションを、「ズ
成功するPhoneGapアプリを開発するための高速化＆UXテクニック
興味深いブログ記事が海外で掲載されていました。拙訳で恐縮ですが紹介したいと思います。 内容はPhoneGapアプリを高速化するための手法の解説で、具体的な事例とともに、いくつかのテクニックの紹介が行われています。少し長い記述になりますが、是非PhoneGapやMonacaを用いた開発の参考にしてください。 成功するPhoneGapアプリを開発するための高速化＆UXテクニック Performance & UX Considerations For Successful PhoneGap Apps PhoneGapアプリを開発する方から、下記のような質問をよく尋ねられます。 ・アプリを高速化する方法は？ ・どうやってネイティブアプリのような質感を出せるか？ ・プラットフォームに違和感のないアプリを作るためのテクニックは？ ・OSのルック＆フィールとマッチさせるためには？ この記事では、素晴らし
ネイティブよりも速いと評判のfastbookの裏側を調べてみる - webとかmacとかやってみようか R
本記事は、Sencha Advent Calendar 2012 の23日目の記事です。1日遅れでごめんなさい！あ、今日であってた(;´▽｀A 当初完走は無理なんじゃないかと思ってたけど、みんなのがんばりで完走目前！おめでとうございます！ Sencha Touchで作ったネイティブよりも速いfacebookアプリ「fastbook」が話題になっていますね。 原文: The Making of Fastbook: An HTML5 Love Story 和訳: HTML5へのラブストーリー: メイキングオブFastbook ネイティブを凌ぐすごいパフォーマンスに驚きますよね！これらは実際にはどんなコンポーネントを使って作られているのかすごく気になります。そこで、ちょっと調べてみたいと思いました。 ネイティブアプリ向けパッケージが、https://github.com/extjs/fastbo
HTML5のスマホ対応の基礎知識とハマリどころ3選
HTML5のスマホ対応の基礎知識とハマリどころ3選：スマホ向けサイト制作で泣かないための秘伝ノウハウ（2）（1/3 ページ） スマートフォン向けWebサイト構築支援ツールを開発・販売するため、国内すべてのケータイ・スマートフォン・タブレットを所有している企業に勤める筆者が、サイト構築のハマリどころとも言えるノウハウを紹介する連載。今回は、HTML5についておさらいし、OSごとの対応状況や、iPhone／Androidなどで表示する際のハマリどころを紹介 こんにちは。KSK「フレックスファームビジネスユニット」の渡辺です。前回の「スマホ向けサイト制作3手法の基礎知識と課題、OS／機種依存のハマリどころ3選」では、スマートフォン向けサイト制作についての注意点や、代表的なOS／機種依存を紹介しました。 今回は、KSKの製品「x-fit（クロスフィット）の開発・販売や、実機での検証サービス事業で蓄
iPhone, Android(desire) ブラウザのhtml5対応状況 - 超自己満足プログラミング
手元にあるスマートフォンのhtml5対応状況を、http://html5test.com/ で確認したのでメモ。 iphone4 (4.0.2): Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_0_2 like Mac OS X; ja-jp) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8A400 Safari/6531.22.7 iphone3G (3.1.2): Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_1_2 like Mac OS X; ja-jp) AppleWebKit/528.18 (KHTML, like Gecko) Version/4.0 Mobile/7D11 Safari/528.16 android2.1: Mozil
Titanium Mobile紹介 〜 HTML5とか勉強会 05/17/2012
TIP Press Ctrl-F⌘F to quickly search anywhere in the document.
【デブサミ2012】17-A-3 レポート HTML5でどこまでできる？ その実力とスマホ向けアプリ開発のポイント
描画能力が大幅に向上、Flashに匹敵するアニメーションも可能に 膨大な数の仕様で構成されるHTML5は幅広い意味を持ち、一言で定義するのは難しいが、紀平氏はセッションの冒頭で「今回はスマートフォンの話に限定する（PCブラウザに関しては触れない）」と断ったうえで、次のように述べた。 「HTML5はHTMLとJavaScriptの複合体。それ自体はHTML4と大きく変わっているわけではない。もっとも重要な違いは、今までに比べてAPIが非常に豊富になったこと」 この豊富なAPIにより、HTML5では描画能力が大きく向上している。例えば、Canvasを使えばドット単位の描画が可能であり、ベクターグラフィックスを扱えるSVGによって曲線のある図形も描画できる。さらに、アニメーションもFlash並のクオリティが実現できるようになった。 ここで紀平氏は、同じ内容のアニメーションを2つの画面で同時に再生
HTML5製のWebサイト向けUIフレームワーク・Kendo UIモバイル版の日本語サンプル作った - かちびと.net
以前ご紹介した、HTML5製のWebサイト 向けUIフレームワーク・Kendo UIの モバイル版に触ってみたついでに 日本語化してサンプルにしました。 まだベータ版みたいなので、実用 段階では無さそうですが。 Kendo UIのモバイル版です。去年の夏くらいに記事書いたので合わせてご参照頂ければ幸いです。 タッチデバイス対応、HTML5で構築したWebサイト向けのUI用フレームワーク・Kendo UI 選択肢はずいぶん増えてきましたが、これもその一つという事で・・・jQueryベースで動作しますので、JQMの代替として覚えておいてもいいんじゃないでしょうか。 基本的には有償版の販売がビジネスモデルみたいですが、OSSとしてGPLライセンスで配布されています。モバイル版もそんな感じ。 Kendo UI Mobile モバイルバージョンです。触った感触として、まだ他フレームワークに比べて物足
スマートフォンWebアプリ開発研修&ハッカソン - ドワンゴ 研究開発ブログ
はじめまして、ドワンゴモバイル事業のエンジニア、入木田と申します。 今回は12月19日(月)にアシアル株式会社とドワンゴ社で共同開催した「スマートフォンWebアプリ開発研修＆ハッカソン」の様子をお届けします。 対象読者 スマートフォンWebアプリを作ってみたい方 HTML5で何ができるのか知りたい方 objective-Cに挫折したけど、スマートフォンアプリ作成の夢を諦めていない方 はじめに スマートフォン、これを見ている方だったら、iPhone/Android、どちらかは持ってますよね。開発してる方もいらっしゃいますか？ objective-C,Java,どちらも一から作るとなると、結構な労力です。 ところで、HTML,JavaScriptは書いたことありますか？ Web系エンジニアやデザイナーなら、仕事で書いてるかもしれません。手軽ですよね。 スマートフォンにはブラウザも載ってる
[CSS]スマフォ対応サイトのためにMedia Queriesをしっかり身につけるチュートリアル
iPhoneなどの小さいサイズのモニターをはじめ、2560pxの大きいサイズのモニターなど、それぞれの幅に適したレイアウトを自動的に適用するMedia Queriesをしっかりと身につけるためのスタイルシートのチュートリアルを紹介します。 Adaptive & Mobile Design with CSS3 Media Queries [ad#ad-2] 下記は各ポイントを意訳したものです。 デモページの確認 HTML CSS Media Queries 完成したデモの確認 デモページの確認 チュートリアルの前にまず、それがどのように見えるかデモページをチェックしてみてください。 このデモページはHTML5+CSS3 Media Queriesで作成されており、ユーザーが使用しているビューポートのサイズに適したレイアウトに自動調整して表示されます。 デモページ 左から、ノーマル、ナロウ、ス
1時間で携帯サイトをスマートフォン対応にする方法 | GREE Engineering
初めての投稿となります。エンジニアのmatsuです。 携帯向けウェブサイトを1時間でスマートフォン対応する方法を紹介します。 概要 2011年4月7日のニュースにて携帯電話の新規契約数のうち、スマートフォンが占める割合が50%を越え、スマートフォンが本格的に普及する兆しが見えてきました。 現在、スマートフォン向けサイトを新規構築するためのチュートリアルは数多く出ていますが、既存の携帯サイトをスマートフォンに最適化する方法があまり紹介されていないのでこの記事で紹介したいと思います。 このチュートリアルを行うと以下のようになります。 実装 全部で8ステップあります。 このチュートリアルではブログのトップページを例にとって説明します。 前半では文字コードの変更、HTMLの変更といった構造を変更します。後半では絵文字や文字スタイルを行い、仕上げとしてHTML5のバリデーションを行っていきます。最初
こてさきAjax:Stream APIで、カメラの映像をWebSocket ライブ配信 - livedoor Blog（ブログ）
ずっと、待ち焦がれていたAPIが、ついにテスト実装されました。ブラウザから、カメラのライブストリームを取得するStream API (仕様はWHAT WGのサイトに記載)です。 この機能により、Webアプリのポテンシャルが飛躍的に向上すると期待されます。例えば、ビデオチャット。 カメラから取得した映像データを、Websocket で相互に交換すれば、ブラウザのネイティブ機能だけで、簡単に実現できます。 この機能が、実装されたのは、Opera mobileのテクニカルプレビュー(for Android)。以下のサイトの[Android build]からインストール出来ます。 http://my.opera.com/core/blog/2011/03/23/webcam-orientation-preview また、詳しくは以下のブログ(WebOS Goodies)で紹介されています。是非、ご
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
DeNA Engineering - DeNAエンジニアのポータルサイト
Next Mobile WebApplication
SSSSLIDE
スマートフォンにおけるHTML5実装の最先端@Developers Summit 2012
JavaScriptエンジニア向け！スマートフォンで動くブラウザゲームの作り方
これは便利、モバイルデバイスでのHTML5の対応状況を一覧出来るサイト「Mobile HTML5」 - 強火で進め
