Chromecastで動くHTML5ベースのメディアストリーミングアプリを作るための基礎知識
意外と知られていないことですが、Chromecast対応アプリは、iPhoneアプリやAndroidアプリ同様に誰でも開発することができ、今多くの開発者から注目されていて、今後もその数が増えることが予想されます。 Web＆モバイル技術のSIを手掛けるオープンストリームでは、Chromecastデバイスの国内発売前からスマートフォンアプリ（iOS版およびAndroid版）の対応について技術検証を行い、詳細な技術ノウハウを獲得してきました。本連載では、その時に得た技術を基にChromecastアプリのシステム構成、開発環境、開発準備、メディアストリーミングアプリの開発方法について注意点を含めて解説していきます。Chromecast対応アプリを開発する参考にしてください。 初回は、Chromecastの概要とサンプルアプリを動作確認できるまでの開発手順を解説します。 Chromecastアプリの
-webkit-text-size-adjust: none を絶対に設定してはいけない理由
PC 版の Google Chrome や Safari で見たときにユーザビリティーが落ちるから。 以上。 で終わってしまうと記事にならないので、ちゃんと説明しておく。 そもそも -webkit-text-size-adjust とは何か iPhone や Android のブラウザーは、縦向き (Portrate mode) と横向き (Landscape mode) の文字サイズを自動調整する機能がある。 これを制御するのが CSS の -webkit-text-size-adjust である。 文字サイズ自動調整の具体例 次のような HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-
クロスプラットフォーム開発の大本命!? HTML5もアプリもFlashも開発できる「OpenFL」とは？ - ICS MEDIA
クロスプラットフォーム開発の大本命!? HTML5もアプリもFlashも開発できる「OpenFL」とは？ 「インタラクティブコンテンツをワンソースでクロスプラットフォームに対応させたい」、それはフロントエンドのデベロッパーであれば誰もが望むことではないでしょうか。一昔前はAdobe Flashが「Open Screen Project」と題して一歩手前まで実現していましたが、iPhoneからFlashを締め出そうとするAppleの強硬な姿勢によって頓挫することになりました。 尾野さん(しっぽさん)からの勧めもあり調べたのですが、「OpenFL」（オープンエフエル）というテクノロジーはさまざまな形式にインタラクティブコンテンツを出力できます。つまりOpenFLを使えばワンソースでクロスプラットフォームを実現できるのです。今回はOpenFLからHTML5とFlashを出力することによってクロス
iPhone、AndroidのモバイルWebでの長押しアクションを無効化する - paranitips
モバイルWebにおいて、セキュリティ上、WebのリンクURLを表示させたくなかったり、 テキストのコピーを防止したい場合があります。 これらの長押しアクションを無効にするにはbodyのcssに以下を追記します。 body { -webkit-touch-callout:none; // リンク長押しのポップアップを無効化 -webkit-user-select:none; // テキスト長押しの選択ボックスを無効化 } 補足 また、一般的なWebサイトの右クリックの無効化は <body oncontextmenu='return false;'> コピーの無効化は <body oncopy='return false;'> でOKです。 （developerツールを使えば簡単に解除できますが。） 参考 iPhone リンクを長押しした時のポップアップメニューの制御 « TriAx Lab
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
デバイスを判定し、CSS/JavaScriptで簡単に利用できるようにするスクリプト -Device.js | コリス
ページにほんの一行外部ファイルを加えるだけで、iPhone, iPadなどのiOSをはじめ、Android, Blackberry, Windows Phone, Window Tabletなどスマフォやタブレット、デスクトップなどのデバイスを判定し、簡単に条件付きのCSSやJavaScriptを利用できるにするスクリプトを紹介します。 Device.js -GitHub Device.jsの使い方 Device.jsのデモ Device.jsの使い方 Device.jsの実装は、簡単です。 外部ファイルとして、当スクリプトを記述するだけです。 <script src="device.js"></script> スクリプトを設置すると、表示デバイスに基づいて<html>に適切なclassを付与します。 iPhoneでアクセスすると、こんな感じに。 <html class="ios ipho
iPhone/Android等モバイル版webkitで縦持ち(portrait)横持ち(landscape)のcssを切り替えたい - ハリーかつき・旧技術ブログ
iPhone/AndroidではJavaScriptのwindow.orientation;を取得できる。 jQueryスタイルでの記述方法を用いると、下記のような大変シンプルなコードでデバイスの縦持ち（portrait）と横持ち(landscape)でcssの切り替えが実装可能である。 function switchOrientation(){ var orientation = window.orientation; if(orientation == 0){ $("body").addClass("portrait"); $("body").removeClass("landscape"); }else{ $("body").addClass("landscape"); $("body").removeClass("portrait"); } } $(document).ready(
スマートフォンで解像度ごとに最適な画像サイズにするdevicePixelRatioの設定 | ユージック
スマートフォンで解像度ごとに最適な画像サイズにするdevicePixelRatioの設定 2011年8月31日 スマートフォンでは機種によって解像度がことなるのは周知のとおり。 100px×100pxの画像をiphone3で表示すると100px×100pxで表示されるが、iPhone4では解像度が2倍なので50px×50pxになってしまいます。 スマートフォンの解像度は横幅320pxを標準として480px、640px、720pxなど機種により様々な違いがあります。そこでCSSのmedia query を利用して最適なサイズに書き分けを行います。 /* devicePixelRatio=1（iPhone3～3GS、低解像度Android端末）とdevicePixelRatio未対応ブラウザ */ .className { width: 100px; height: 100px; backgr
web帳 | webデザイナーの、webデザイナーによる、webデザイナーのためのサイト » スマートフォン devicePixelRatio について
スマートフォンには、画像1pxが実際のデバイス上で何pxとしてレンダリングされるかを示す devicePixelRatioという値があります。 これの値はwebkit系であれば、window.devicePixelRatioに入っています。 javascriptで出力する場合、 document.write(window.devicePixelRatio); で出力可能です。 また、cssでは-webkit-min-device-pixel-ratioで指定出来ます。 調べたところiPhone4ではこの値が2になっていて、 今まで通りに画像を表示させると自動的に拡大されて画像がボケて表示されます。 【回避策】その１ これを避けるには、実際に表示させたいサイズの2倍のピクセルサイズのものを用意して、 縦横を1/2にし、css又はHTML等で指定を行い 表示させると画像の1ピクセルとデバイスの
インテル、無償のHTML5アプリ開発環境「Intel XDK」を公開。iOS/Android/Kindleなどクロスプラットフォーム対応
インテル、無償のHTML5アプリ開発環境「Intel XDK」を公開。iOS/Android/Kindleなどクロスプラットフォーム対応 インテルは、先週4月10日から11日かけて中国北京で開催された「Intel Developers Forum Beijing 2013」（IDF Beijing 2013）において、クロスプラットフォームに対応したHTML5アプリケーションの開発ツール「Intel XDK」を発表しました。 Intel XDKはブラウザ上で動作するHTML5アプリケーション開発ツール（ChromeブラウザとJavaのインストールが必要）。HTML/CSS/JavaScriptで開発したアプリケーションを、PhoneGap機能でビルドし、iOS/Android/Kindle/Facebookなどのアプリケーションが開発できます。開発したアプリケーションは、各アプリストアで販
HTML と JavaScript と Android 4 で位置情報を取得した感想文 | 自作自演
■環境 GALAXY S III SC-06D (Android 4.0.4) ■コードについて Geolocation の利用 | MDN Geolocation API－HTML5のAPI、および、関連仕様 などを参考に… 対応していないブラウザはif (!navigator.geolocation) { alert ("geolocation services are not supported by your browser."); return; }みたいな感じで処理を分けておく。 (※ブログの都合で全角スペース入れてます…) 1回だけ取得なら navigator.geolocation.getCurrentPosition 定期的に監視するなら navigator.geolocation.watchPosition を使う。 どちらも成功時に呼ばれるコールバック関数に 位置情報
AndroidのWebViewでassets内のhtmlを#つきで読み込む - アキバ戦線異臭アリ！
アプリ内ヘルプで利用しようと、assetsフォルダにhtmlや画像一式を入れて、webViewで webView.loadUrl("file:///android_asset/index.html"); とかしますよね。file://じゃなくてfile:///なのがポイントです。 これならこのまま動くんですが。 問題は、URLがindex.html#hogeとかの場合です。つまりアンカーリンクを指定した場合です。 何故かファイルが見つからないとなってしまう。 ぐぐってみたら、どうも3.xあたりからのバグのようで、4.2では直ってましたが、現時点でたいていのターゲットは4.0だと思うので問題になります。 遅延させてロードさせろとか色々解決策を書いてる人はいましたが、どれも実際に組み込んでみるとダメでした。 結果、試行錯誤の末、以下のような手順を取る事に。 １．ページエラーが生じたとき、URL
Android × Canvas の即死ポイントとその回避策 | buccchi.jp
CreateJS を使ったWebアプリをいくつか作ったのですが、iPhone はサクサクでも Android でやたらハマる。 Android 2.3 で最適化したつもりのものが 4.0 の標準ブラウザで落ちたりする。 機種や OS のバージョンにより動作がさまざまなため確認しきれない。 というとこでハマったポイント3つを共有します。 誰かもっとよい解決策を教えてくれるとありがたい。 即死ポイントその1 Android 4.0.4 で Canvas をリサイズするとブラウザが落ちる 回避策 Canvas 領域を広めにとっておき、Canvas ではなく Container 側をリサイズ。 はみでた部分は css でトリミング。 これで落ちなくはなるが全体的にボケる。 2013.7.7 追記 その後、以下の方法を試したところ落ちずに動作すことが確認できました。 描画とかGPUアクセラレーション
Android 2.x では Canvas の toDataURL メソッドが使えない - しばやん雑記
この間、ちょっと仕事で調べてて知ったんですが、Android 2.x の標準ブラウザでは Canvas に描画された内容を Base64 に変換して取得する toDataURL メソッドが実装されていないんですね。 手持ちの Nexus S (Android 2.3.6) で確認したところ data:,という文字列しか返ってきませんでした。 ググってみると Android 3.0 からは対応しているようですが、WebKit 使ってるはずの Android でこのメソッドが未実装になっていたことが個人的には驚きでした。 Android 向けに Canvas を使う場合には toDataURL を使わないか、Android 4.0 がリリースされるのを待つしかないようです。
HTML5のモバイルアプリを“ネイティブアプリ化”する「PhoneGap」が正式版に。オンラインでの変換サービスも発表
HTML5のモバイルアプリを“ネイティブアプリ化”する「PhoneGap」が正式版に。オンラインでの変換サービスも発表 HTML5、CSS、JavaScriptなどのWeb標準の技術で作成したモバイルアプリケーションを、iPhoneやAndroidなどのデバイスにインストール可能なネイティブアプリケーションへと変換するフレームワーク「PhoneGap」が、正式版「PhoneGap 1.0」になったと開発元のnitobiより発表されました。 PhoneGapはオープンソースソフトウェアとして開発されているソフトウェアで、無料でダウンロードし利用することができます。 デバイスごとのネイティブアプリケーションに変換 PhoneGapを、jQuery Mobileのようなマルチデバイスに対応したモバイルアプリケーション用フレームワークと組み合わせると、HTMLやJavaScriptなどのWeb標準
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
DeNA Engineering - DeNAエンジニアのポータルサイト
はやわかりHTML5ハイブリッドアプリ開発事情
スマートフォンブラウザ不具合特集
html5-css3.jp - このウェブサイトは販売用です！ - リソースおよび情報
http://phonegap.com/
