iPhoneブラウザ「Mercury」が便利すぎて「Safari」に戻れなくなった
今までiPhoneのブラウザはSafariを使っていたのですが、以前から気になっていたMercuryのPro版が期間限定で無料になったので試しに使ってみたところ、便利すぎてSafariに戻れなくなっちゃいました！ Google Chromeを使っている方は、iPhoneもChromeで問題ないと思いますが、私のメインブラウザはFirefoxです。私のようなFirefox使いに特におすすめしたいのがMercuryです。 ※現在はサービスを終了しているようです。 Mercuryウェブブラウザのここが (・∀・)ｲｲ！！ ユーザーインターフェースが素敵 見た目の好みは人それぞれだと思いますが、個人的に今まで使ったブラウザの中で一番素敵だと思いました。テーマを変えられるのもFirefoxっぽくていいですね。なんだかんだデフォルトのままが一番カッコいいと思います。 スピードダイアルが便利 Opera
Hide the address bar in a fullscreen iPhone or Android web app
gistfile1.html ���U � 너U <!DOCTYPE html> <meta charset=utf-8> <meta name=viewport content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name=apple-mobile-web-app-capable content=yes> <meta name=apple-mobile-web-app-status-bar-style content=black> <title>Test fullscreen</title> <style> html, body { margin: 0; padding: 0; } #page { position: absolute; width: 100%; height: 100%; -web
Modernizrを使ってブラウザーの機能を調べるには
ユーザー・エージェント文字列を使ってブラウザー単位で、使用可能なHTML5／CSS3機能を判定する方法は時代遅れだ。これからは機能単位で判別しよう。その方法を解説。 本稿では、Webブラウザーで使用できる機能を調べるのに、ユーザー・エージェント文字列を使ってブラウザー単位で判定するのではなく、機能単位で使えるかどうかを判別する方法を紹介する。 Modernizrとは HTML5やCSS3では、HTMLで表現できることが大幅に強化された。そのため、HTML5＆CSS3が普及するにつれ、きれいな見た目のサイトやリッチなレイアウトを持つサイトが増えてきている。 しかし、HTML5／CSS3機能の実装状況はブラウザーごとに異なるため、HTML5／CSS3の仕様として定義されているからといってそのまま使えるわけではない。この実装の差異に対応するために、これまでは、JavaScriptやサーバーサイド
iOSアプリ未インストール時にSafariでカスタムURLスキームを開く時の対策 - Qiita
iOSアプリケーションにカスタムURLスキームを実装し、SafariからそのURLを開く際にまだユーザがそのアプリケーションをインストールしていなければそのURLを開けずにページエラーになってしまう。その場合はアプリケーションをインストールする導線を張りたい。 対策1 workaroundとして以下のhackがある。 setTimeout(function() { window.location = "http://itunes.com/apps/yourappname"; }, 25); window.location = "custom-uri://"; hack1の説明 window.locationにてカスタムURLスキームを設定し、そのURLに対応したアプリケーションがない場合（Safari自身も対応していない場合）、window.location = "custom-uri:/
[iOS 6版] 設定アプリを直接起動するためのスキームまとめ！ ＆ Siriから呼び出す方法
iOS 5の頃から見ると設定アプリの構造が所々変わったので、それに対応したスキームに変更されています。 また、項目自体も増えたりしていますので、それについても追加してあります。 さらに！！誰も使わなそうなiBooksの「謝辞」項目のスキームなんかも書いてあります。ダレカツカッテクダササイ 活用してみる 現在はSiri経由でのみ使用することが出来る様になっていますので、Siriで使えるようにしてみましょう。 まずは使用したいスキームを連絡先に新しく登録します。 例えば「Wi-Fi」項目へアクセスしたいとします。 まずSiriに話しかけて呼び出すために名前を適当に付けてあげます。今回はWiFiと分かりやすいようにしてみました。ただ通常は日本語の方が認識されやすいかと思います。 そして、ぐいっと下の方に行くとWebという項目があります。ココに目的のスキームを入力しましょう。今回は「prefs:r
![[iOS 6版] 設定アプリを直接起動するためのスキームまとめ！ ＆ Siriから呼び出す方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/75269b2b713089e3b83cb6027798e0e3cae1fb39/height=288;version=1;width=512/https%3A%2F%2Ftools4hack.santalab.me%2Fmedia%2Fuploads%2F2015%2F03%2Fios6-settings-app-scheme-01.jpg)
iOS標準の写真アプリのURLスキームが見つかり狂喜乱舞！私が写真アプリにこだわる理由
iOS標準の写真アプリはドッグに置いて使っている@Mori2ndです。 以前は使えていた写真アプリのURLスキーム（アプリのショートカットみたいなもの）いろいろな事情があったからか、途中から使えなくなっていました。 ところが、今になって使えるURLスキームが存在していたことがわかったので、声を大にしてこの喜びをお届けしたいのです。 ということで、私が写真アプリをこだわって使っている理由とあわせてご紹介させていただきます！ ついに写真アプリのカメラロールにアクセスできる！発見された写真アプリのカメラロールにアクセスできるURLスキームはこちらでした！ photos-redirect: Nanokamo BLOGさんの記事で見つけたときは驚きましたね。 iOSの写真アプリを開くためのURLスキームが判明！ アップロードアプリ『PictShare』と組み合わせると便利に使える | NANOKAM
ブラウザ「Safari」の使い方。Safariを格段に強化する「ブックマークレット」編。 | AppBank
ブックマークレットの使い方 一度作ってしまったら、あとはとても簡単です。 まず、ブックマークレットを使いたいと思ったページを開きましょう。開きましたか？ 開いたら、ブックマークレットをタップ！これでブックマークレットが機能します。 ブラウザに戻るとほら！ページが下までスクロールされています。 それでは以下に、便利なブックマークレットをどんどん紹介していきます。自由に活用下さい！（また、「このブックマークレットも追加すべきだ！というものがあれば@toshism0331までご連絡下さい！ アプリと連動するブックマークレット ＊iPhoneでコピーをする場合、テキストは右端よりも右にとび出してコピーできないという声を頂いております。その場合、次の行のテキストまでコピーして、最終行を削除するという方法でコピー下さい。（例えば、「読んでいるページをGoogle Readerに追加」のブックマークレッ
ブックマークレットで jQuery を使う魔法の 210 文字 - Qiita
「ブックマークレットで jQuery を使う魔法の 210 文字」という記事を ブログ に書いたのですが、ここ Qiita ではその技術的な解説をしてみようと思います。 やりたい事はそのものずばり、ブックマークレットの中で jQuery を使うという事です。 ちょっとした処理の自動化や簡単なツールなど、よくブックマークレットを書いて活用しているのですが、ブックマークレットだと素の JavaScript を書かなければならず、DOM 操作が含まれる事をやろうとすると、jQuery に慣れた身には面倒くささが先に立ってしまいます。 ならば、ブックマークレットで jQuery を使えるようにすればいい！というのが今回の趣旨になります。 まず方針として、どんなページでブックマークを起動してもちゃんと jQuery が使えるようにしたいです。ですので、jQuery 本体は自前で調達しなければなりませ
iPhoneとiPod Touchの見分け方 | 越前屋、お主も悪よのう
「それiPhoneですよね？私も欲しいんですけど…やっぱり並んだんですか？」 『いや、これ、iPod Touchなんで（苦笑）』 iPhoneなのかiPod Touchなのかわからないと、声もかけずらいですね。 LEVEL 1 ・着信音や曲が鳴った。 ・耳にあてて会話をしている。 ・写真を撮っていた。 ・裏面が白。 →間違いなくiPhoneです。 LEVEL 2 ・外に電話をかけに行く時に持っていった。 ・やたら電波を気にしている。 ・液晶の上に穴が開いている。 →多分iPhoneです。 LEVEL 3 ・他に携帯を持っていない。 ・やぼったい、厚みがある。 ・イヤホンが向って左に刺さっている。 ・イヤホンを刺さないで操作していいる。 ・電話とSMSのアイコン（ともにグリーン）がある。 LEVEL 4 ・イヤホンにマイク&スイッチがある。 ・上部と側面にボタンがある。 ・上部にSIMスロッ
FacebookやTwitterでログインさせる「Social Login」- ショッピング・サイトや会員制サイトをより簡単に実現させる便利プラグイン
久しぶりに、ノウハウ系のネタです。 最近の会員サイトやショッピングサイトでよく見かけるのが、 マイページにログインしたり、新規会員登録をする際に、 FacebookやTwitterアカウントで簡単に登録・ログインできるサイト、 例えば、こんな感じ↓ 面倒なメールアドレスの入力やパスワードを考えなくていいので、便利ですよね。 今回は、そんなソーシャルネットワークを利用してログインや新規登録を簡単にさせる、 「Social Login」の設定方法について紹介します。 ※Wordpress用のプラグインです。あしからず。 Step 1 プラグインのダウンロードとアップロード まずはコチラから、「Social Login」をダウンロードし、wp-content/plugin/にアップロード Step 2 設定をスタート 「プラグインを有効」後、左サイドバーに[Social Login]が表示される
[WordCamp資料]WordPressでWebアプリケーションを作る方法～Croppy編～
この記事は、WordCamp Tokyo 2012でお話した「WordPressでWebアプリケーションを作る方法～Croppy編～」の内容をまとめ、分かりやすいように + 一部のコードについてセッションよりも詳しく加筆したものです。 WordPress に Twitter・Facebook ログインのようなソーシャル性を取り入れたWebアプリを作るためのプレゼンをするにあたり、最初は「ノンプログラマーでもできる」みたいなタイトルにしようかと思ったのですが、さすがに PHP が分かっていないと厳しいかと思いますので入れませんでした。 普段 PHP を全く書かない方には少々難しいかもしれませんが、ある程度 WordPress をカスタマイズできる方ならなんとかなるかな…という程度かと思います。 Croppyとは Croppy は、ほぼ WordPress でできているWebアプリです。 気に
![[WordCamp資料]WordPressでWebアプリケーションを作る方法～Croppy編～](https://cdn-ak-scissors.b.st-hatena.com/image/square/ecd2788c73bf4fe2c30c0116e541fcc599fc08f9/height=288;version=1;width=512/https%3A%2F%2Fi0.wp.com%2Fstocker.jp%2Fdiary%2Fwp-content%2Fuploads%2Fwctokyo_2012.001.png%3Ffit%3D1024%252C768%26ssl%3D1)
Facebook/Twitter/WordPress.com ログイン対応の Jetpack コメントシステム
Automattic の開発している WordPress プラグインパック「Jetpack」のバージョン 1.4.1 から、Facebook/Twitter/WordPress.com ログイン対応のコメントシステムが導入されました（1.4.2 から完全日本語化済み）。 この機能は WordPress.com で現在使われているコメントシステムとまったく同じ。メールアドレスや名前を入力する必要なく、ソーシャルアカウントを使ってログインし、ブログにコメントできるようになります。すでに WordPress.com にログインしている人は、その状態でいきなりコメントを書くこともできます。 使い始めるには Jetpack をインストールし、Jetpack 管理画面からコメント機能モジュールの「有効化」ボタンをクリックします。 一度連携を済ませれば次回はサービスを選択するだけですぐにコメントが書ける
Twit ConnectはWordPressにtwitterでログイン、他にもいろいろ出来るプラグイン | まちいく
Home » WordPress » Twit ConnectはWordPressにtwitterでログイン、他にもいろいろ出来るプラグイン Twit ConnectはWordPressにtwitterでログイン、他にもいろいろ出来るプラグイン Posted by machiiku in WordPress On 4月 15, 2011 WordPressにtwitterのoAuthを使ってログインしたい。他にも方法があるかもしれないが、シンプルかつ高機能にそれを実現するのがTwit Connectだ。杉並区おた助は、全く知らない人を執筆者として迎え入れるマルチユーザーサイトなので、ユーザーのアカウント作成・ログイン環境を簡略にする必要があった。Twit Connectはtwitterによる気軽なサンインンを可能にしたたけでなく、その他小粋なことも実現してくれた。Twit C
WordPress 超簡単にソーシャルログインを設置・facebook,twitter,googleなど様々なログインを実現する方法 | Stronghold Archive
WordPress 超簡単にソーシャルログインを設置・facebook,twitter,googleなど様々なログインを実現する方法 STEP1.まずはダウンロード コチラからダウンロードし/plugin/内に格納 もしくはプラグインの検索で「Social login」をインストールしてください。 STEP2.OneAllでサイト登録 ダウンロード後、管理画面左メニューに【Social Login】の項目が追加されます クリックすると下記のような画面が表示されますので 『 Click here to login to your account 』をクリック その後、アカウント作成 & 登録しましょう。 STEP3.サイト情報の設定 サイト情報の登録に必要なのは ・ログイン用サブドメイン名、これは何でもOKです。 ・サイト名 ・サイトのドメインを（http://abcd.com の場合は a
WordPressを、TwitterやFacebook、Googleなどのアカウントでログイン可能にするプラグイン・Make Your Site Social
WordPressをOpneID対応にする プラグイン・Make Your Site Social のご紹介です。世界中の様々な ソーシャルサービスのアカウントを OpenIDとして提供するGigyaを WordPressに適応させるプラグイン になります。 備忘録。WordPressをOpenID対応にします。Gigyaというサービスがあって、WordPressにもプラグインという形でサポートしてくれています。僕も未検証なのでメモということでご了承下さい。 ログイン画面がこんな感じに。対応しているサービスは海外のものが中心ですが、TwitterやFacebook、Googleなど、日本でも身近なサービスにも対応しているのでこれはこれでアリなんじゃないかと。 APIキーとか入れるだけで動くみたいです。ログイン後のリダイレクトも指定できます。 Gigyaのアカウントが必要 Make Your
どの会員管理プラグインを使おうか、迷ったときに。
Chris Lema による「まとめ」。 Choosing a WordPress Membership Plugin http://chrislema.com/choosing-wordpress-membership-plugin/ ちょうど、先日 「有料で会員向けに動画を配信するサービスを やりたいんだけど、どういうプラグインがいい？」 という、ご相談を受けたところですが、 会員管理のプラグインは数多くあるものの、 どれも一長一短で、かといって全部試してみるのも 面倒なので、こういうチャートは とっても便利だと思います。 彼のブログ本体の方には、PDF版のダウンロードリンクも あるので、是非チェックしてみてください。 それにしても、Decision Tree（ディシジョンツリー） って、あえて訳したことなかったけど、 調べてみたら、そのまま 「決定木（けっていぎ）」というんですね。
会員ログインをSNSログインでやってみる | WordPress 不動産プラグインで不動産ホームページ
最近よく見かけるようになった Twitter や Facebookでのログイン を WordPress でもできるようになったプラグインがありましたので不動産プラグインで試しました。 不動産プラグインで会員登録の際に、実名や住所等の個人情報が不要な場合は これを利用する事でユーザ登録不要で 簡単にログイン出来るようになり、またパスワードも不要な為、ユーザーにとってはとても敷居が低くなり会員も増えるのではないかと期待します。 但し、Twitterの場合はメールアドレスが取得出来ない為、マッチングメールは送られません。この辺りは今後の検討になるかと思います。 新プラグインGianism http://wordpress.org/extend/plugins/gianism/ 新プラグインGianism説明 http://takahashifumiki.com/web/programin
【WordPress】WordPressで “会員制サイト” を実現するプラグイン『WP-Members』と『Members Only』（設定晒し有）
様々なプラグインで、できないことを探すのが難しいくらいに何でもできちゃうWordPressですが、パスワードでログインしないと見ることができないような、いわゆる「会員制サイト」を作ることも可能です。 以前『【WP】WPサイト全体をパスワード認証させて会員制サイトのようにするプラグイン | glad design blog 2.0』という記事でいろんな方法をご紹介しましたが、実際に構築してみたので、自分メモも兼ねてレビューしてみたいと思います。 会員制サイトの仕様 会員制サイトといっても、さまざまな形態がありますので、まずはどんなカタチにするかを決めます。 今回は、 要件（１）ブログのトップページは会員以外も見えるようにする 要件（２）第二階層以下はIDとパスワードが必要 要件（３）IDとパスワードは全会員共通（つまり１通りでいい） という条件を満たすことを目指します。 今回構築した会員制サ
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
[HTML5] 利用端末のLocalStorageの容量を調べられるページを紹介します - YoheiM .NET
こんにちは、@yoheiMuneです。 LocalStorageの容量を調べる為のサイトを作りました。今日は、そのご紹介をさせて頂ければと思い、 ブログを書きました。 HTML5 LocalStorageとは HTML5のLocalStorageとは、ブラウザ上でデータを永続的に保存できる仕組みです。 JavaScriptから簡単にデータの永続化やデータの取得をすることが可能です。 ■ローカルストレージのサンプル - ローカルストレージを使ったデータの保存／読み出し＠YoheiM.NET - LocalStorageに格納するデータを暗号化する＠YoheiM.NET - Canvasに描画した画像をLocalStorageに保存＠YoheiM.NET 簡単にデータを永続化できるのですが、いくつか問題があります。 その問題の一つが保存可能容量です。W3Cの仕様書では、ドメイン毎に５MBが一つ
![[HTML5] 利用端末のLocalStorageの容量を調べられるページを紹介します - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/307d01d6e8c6f3f5c9ceb7d1e1aa597c2553724c/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F143.png)
ウェブストレージ API - Web API | MDN
ウェブストレージ API (Web Storage API) は、Cookie を使用するよりも直観的な方法で、ブラウザーがキーと値のペアを保存できる仕組みを提供します。 ウェブストレージには、以下の 2 種類の仕組みがあります。 sessionStorage は、ページのセッション中（ページの再読み込みや復元を含む、ブラウザーを開いている間）に使用可能な、オリジンごとに区切られた保存領域を管理します。 1 セッションのデータのみを保存します。つまり、データはブラウザー（またはタブ）が閉じられるまで保存されます。 データがサーバーに転送されることはありません。 ストレージの上限が Cookie よりも大きいです（最大 5MB）。 localStorage も同様ですが、こちらはブラウザーを閉じたり再び開いたりしても持続します。 有効期限なしでデータを保存し、JavaScript によるクリ
クロスドメインで同じlocalStorageを使うテクニック
Nicholas C. Zakas is a web software engineer who specializes in user interface design and implementation for web applications using JavaScript, Dynamic HTML, CSS, XML, and XSLT. Nicholas C. Zakas氏がNCZOnlineのLearning from XAuth: Cross-domain localStorageの記事で、XAuthで採用されている機能を紹介している。XAuthは複数のドメイン間でデータを共有するための機能を提供してくれる。氏はXAuthで採用された方法は複数の違うドメインの間で永続的にデータを共有するテクニックとして素晴らしい方法だとしており、簡単なサンプルコードも含めて説明している
PHPやnode.jsで画像をbase64エンコードしてインラインイメージとしてimgタグで表示する方法
このドキュメントの内容は、以下の通りです。 はじめに インラインイメージとは base64 とは インラインイメージの指定方法 指定できる主なコンテンツタイプ インラインイメージの使用例 PHPを用いて画像をbase64する方法 PHPで画像をbase64エンコードして、imgタグに指定する方法 node.jsで画像をbase64エンコードする方法 Unixコマンドで画像ファイルをbase64エンコードする方法 はじめに ウェブページをはやく表示するテクニックはいろいろあります。たとえば、ページや画像などのリソースのサイズを小さくしたり、画面を表示するためのHTTPリクエストの数を減らす、といった手法があります。 HTTPリクエストの数を減らすためのテクニックを例に挙げます。 インラインイメージ CSSスプライト(CSS Sprite) イメージマップ 今回は、インラインイメージについて紹
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
A beginner's guide to using the application cache | Articles | web.dev
A beginner's guide to using the application cache Stay organized with collections Save and categorize content based on your preferences. Introduction It's becoming increasingly important for web-based applications to be accessible offline. Yes, all browsers can cache pages and resources for long periods if told to do so, but the browser can kick individual items out of the cache at any point to ma
オフライン ウェブ アプリケーション－HTML5のAPI、および、関連仕様
■オフラインでもウェブアプリケーションを利用可能に HTML5では、インターネットに接続していないオフラインの状態でも、 ユーザーがウェブアプリケーション（ウェブサイト）を利用できるようにするための、 キャッシュマニフェストと呼ばれる仕様が追加されています。 この仕様の基本的な仕組みは、ユーザーがインターネットに接続してウェブアプリケーションを利用した際に、 HTMLファイル・CSSファイル・JavaScriptファイル・画像ファイル…などの ウェブアプリケーションの利用に必要となるファイルをユーザーのローカル環境にダウンロード保存して、 次回からはオフラインでもウェブアプリケーションを利用できるようにするというものです。 このような仕組みでサーバー上のファイルをローカル環境にダウンロード保存することをキャッシュ（CACHE＝貯蔵所・貯蔵物）といいますが、 ウェブアプリケーションをオフライ
[HTML5] アプリケーションキャッシュの使い方
アプリケーションキャッシュは指定したファイルをローカルにキャッシュさせることで、 表示の高速化やオフラインでの動作を可能にするものです。 ブラウザでもその効果は体感できるが、一番威力を発揮するのはスマートフォン環境。 特に速度の遅い3G回線下にあるiPhoneで使うと、まるでWifiを使っているような気分が得られます。 導入方法 あちこちで語られまくってて今更感あるけど一応…。 マニフェストファイルの作成 まずは何をキャッシュするのか指定するマニフェストファイルを作ります。 UTF-8のテキストファイルを開いたら、拡張子を “.appcache” にして適当な名前を付けて保存。 保存する場所はアプリケーションのルートでいいと思います。 保存したらテキストファイルの先頭に CACHE MANIFEST と追加。目印なので忘れずに。 その後にキャッシュするものとしないものの設定を書きます。 ま
![[HTML5] アプリケーションキャッシュの使い方](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
JavaScriptで画像のオフラインキャッシュを実装する - KAYAC engineers' blog
もうすぐクリスマスシーズンなんですかね？本間です。 巷で話題のイケメンホイホイ（以下イケホイ）ですが、このたびiPhone用サイトがオープンしました。 それにあわせて新機能も搭載！イケメン写真にタグを付ける機能と、iPhoneでぼんやり眺めているだけで楽しいビューア機能です。 タグ機能はPC版にも搭載されましたので、ぜひぜひみんなで色んなイケメンにタグを付け合ってくださいね。 タグが付くことで、オススメの精度が上がりますよ！ ビューア機能は、自分がゲットしたイケメンズがiPhone上で次から次へと表示される機能です。 オフラインでも表示できる機能付き！ 電車の中で見るも良し、卓上に置いて眺めるも良しです。 あなた好みのイケメンがゾロゾロ。イケメンホイホイのサイトはこちら！ …うーん、ユーザ層がかぶらなそうだな、この記事。 さてさて、本題はHTML5の機能を使った画像のオフライン表示について
HTML5 で作る iPhone ローカル Web アプリ入門
さて、まず「ローカル Web アプリ」ってなんぞっていう話ですが、Web ベースの技術で作られブラウザからサーバにアクセスして利用するものの、いったんロードが完了したら、それ以降はネットワーク接続不要で動作する Web アプリ、といった概念を表した造語です。 iPhone の App Store を経由することなく配布が可能なので、アプリの内容について一切の制限がなく、また、最近のライブラリの進歩やモバイルパフォーマンスの向上により、ものによってはネイティブアプリと遜色ないレベルのものも作れるようになってきました。 先日、1 Click Config (閉鎖済) (解説記事) を作って公開しましたが、これがまさにローカル Web アプリとして動作しています。 ここで使われている技術の各論についてはそれぞれ詳しく書いたサイトがあるのですが、これらの技術をひとまとめに紹介しているサイトが見当た
Webサイト制作でつまずきがちな解像度に関わるあれこれ │ Design Spice
アプローチ方法は違うものの、このdipと先程のデバイスピクセル比はほぼ同じ目的を持った機能です。 参考：Androidレイアウトの単位 – dpについて掘り下げる – アンテナ立てて viewport 仮想的なウインドウサイズです。 viewportがないと仮定した場合、デバイス幅320pxのiPhoneでインターネットにアクセスした時のウインドウサイズは320ピクセルとなり、通常のサイトを閲覧するには不便です。 そこで仮想的に大きいウインドウサイズとすることで、通常のサイトでもひと目で情報が見え、閲覧性や操作性を高まります。 viewportのデフォルト値は980ピクセルです。 （※iPhoneは980ピクセルで間違いないのですが全てのスマホで980ピクセルでしょうか？ 情報が見つからなかったので知ってる方は教えてください） また、viewportの数値はサイト側で指定できます。 スマホ
【Webアプリ】iPhone4 で画像をきれいに表示する色々な方法【試行錯誤編】
iPhone4 がついに届いて興奮気味のgunjiです。 2週間待ちでした！ 待ってる間に、iPhone4も対象としたWEBアプリ（ネイティブアプリのweb view を含む） のコーディングで気をつけることについておさらいしていたところ、 Retinaディスプレイに画像を最適化させるのって意外とめんどいよね！ という現実に打ちのめされたので、まとめてみます。 そもそもRetinaディスプレイってなんでしたっけ？ はいはい、iPhone4の目玉のひとつで、今までの2倍の解像度で 画面がとってもキレイに見えるんですよね！ 拡大しなくても小さな文字が読めるなんてサイコー！ ところが、今までiPhone向けに作ったサイトをこのiPhone4で見るとちょっと 不思議な状態になってることがあるのです。 iPhone4で見たらなんか画像がにじんでるように見える・・・？！ こういうイメージです。 そう、
jQueryでRetinaディスプレイを判別して処理を変える方法｜BLACKFLAG
iPhoneなどApple製品に使われているRetinaディスプレイ。 従来のディスプレイよりも高解像度（1ピクセルの幅が78ミクロン）であることから Retinaディスプレイで画像を綺麗に表示するには、表示する倍のサイズで作成する必要があったり 特別な対処をする必要がでてきたりします。 そんなRetinaディスプレイに対して、jQuery（JavaScript）を使って判別し 個別に処理させる方法があったので紹介してみます。 ※webkitブラウザのみの対応です。 Retinaディスプレイかどうかを判別するプロパティは デバイス上で画像の1pxの単位を何pxとしてレンダリングしているかを見てくれる ————————————– window.devicePixelRatio ————————————– によって判別します。 Retinaディスプレイはここで取得する値が「2」になります。 こ
Android端末のdevicePixelRatio
Android端末のdevicePixelRatio WebKit系のブラウザではdevicePixelRatioというプロパティが定義されています。これは画像1pxを実際のデバイス上で何pxとしてレンダリングを行うかというもの。 CSSでdevicePixelRatioを特定できる -webkit-min-device-pixel-ratioなどは iPhone4のRetina Display対応などで一時期注目されましたね。 【Webアプリ】iPhone4 で画像をきれいに表示する色々な方法【試行錯誤編】 | KAYAC DESIGNER'S BLOG JavaScriptでは次のように取得できます。 window.devicePixelRatio そこで、Android端末のdevicePixelRatioがどうなってるかTwitterで色々な方に協力いただき調べてみました。
新しいサイトをつくるときに使いたい基本的なあれこれ - LAZY CAMERA Weblog
最近、新規でサイトをつくるときに使うことにしている技術やサービス、細かいテクニックについて、備忘録的に書いておきたいと思う。おおまかにまとめると、以下のような感じ。 CSS 3のMedia Queriesを使って1ソースでスマートフォンからタブレット、フルブラウザまでレスポンシブ対応 CSSの日本語フォント指定について（とくに三点リーダ） retinaimages.phpでiOSのRetina対応 jQueryのプラグインやJavaScript関係 基本的に、スマートフォンやタブレットなどのモバイル端末でのブラウズが多くなることを想定したのが今までと大きく違うところだ。モバイル対応というか、複数デバイスを想定というのは、今後ますます重要になってくると思うのでその辺りのことを重点的に書いてみたい。 CSS 3のMedia Queriesを使って1ソースでレスポンシブ対応 一番の目玉は、やはり
iPadに最適化したサイトがつくれるかもしれない5つの方法（基本編） - EC studio デザインブログ
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" /> /* 好ましくない例 */ これを使うことで横幅1024px以下のデバイスでアクセスされた場合に、ipad.cssを読み込むということはできるんですが、PCの場合でもこの程度の解像度のものはありますし、なおかつ利用しているブラウザが最近のものであれば、このコードを理解してしまいます。 つまり、「iPadだけ」に適用させるということは実質できないということになります。 この点はご注意ください。 デバイスの幅に左右されないリキッドレイアウトにする 前述のユーザーエージェントの話に次いで、レイアウトの話です。 iPadのデバイスとしての画面サイズはポートレート（縦向き）であれば 横
Home | Plus Venture Capital
ENTREPRENEURS + EXPERIENCE IT ALL ADDS UP We know what it takes to make the numbers work. With over 200 transactions under our belts, we are one of the most seasoned investors in the MENA region, funding bright talent that are bringing the next generation of tech-enabled companies over the last 10 years. Apply Now BUILT TO HELP YOUR STARTUP GROW FIRST SLOW, THEN FAST We are truly founder focused;
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WiFiの接続先ごとに起動設定を行なえるポータルiPhoneアプリ、SpotLauncher - 週刊アスキー
iPhoneアプリのURLスキーマ
HugeDomains.com
mesiopress.com
2181 | 年齢が上がっても挑戦できる！
カラクリサイクル
HugeDomains.com
Page not found
はてなブログ | 無料ブログを作成しよう