アドビの新ツール「Shadow」は、モバイル用Webアプリ開発者必須のツール
モバイルデバイス用のWebサイトやWebアプリケーション開発で大変なものの1つが動作確認です。何台ものデバイスを机の上に並べて、ひとつひとつ確認しなければなりません。 アドビシステムズのAdobe Labsが公開した「Adobe Shadow」は、そうした苦労をしているデベロッパー、デザイナーにとって手放せないツールになるでしょう。 複数デバイスに対する同時表示とリモートインスペクション Shadowがどんなツールなのか解説用ビデオの説明を紹介しましょう。 iPhoneアプリのShadowを起動すると番号が表示されます。 その番号を、MacOSかWindows用Chromeブラウザのエクステンションとして配布されているShadowに入力します。これで、ChromeブラウザとiPhoneがペアになりました。 同じように、Android用ShadowもChromeブラウザとペアにすることができ
ブックマークレット／Bookmarkletの作り方 - catch.jp-wiki
Photo by Gayatri Krishnamoorthy via Flickr Bookmarklet(ブックマークレット)は、Webブラウザに追加できる小さなプログラムです。 ブックマーク(お気に入り)に置いといて、そこから呼び出す小さなプログラムなので、こんな名前になってます。 たとえば、Wikipediaや英和辞書で調べたり、今見ているWebページをちょっと加工したり、なんてことができます。 Webブラウザを使っていると、自分専用でちょっとした便利な機能が欲しくなることがありますよね。 解決する方法は色々あるけれど、とりあえずBookmarklet(ブックマークレット)が簡単なんじゃないか。 ということで、作り方を調べてみました。 ちなみに、ドラッグで選択した文字を検索するのは、ブックマークレットを使わなくても、右クリックすればOK >>オススメのJavscript解説書 確か
[JS]高性能で設置も簡単、ブラウザ枠いっぱいに背景画像を配置するスクリプト -bgStretcher
デモページ：Super Slider スライドのスーパー版で、斜め方向のスライドで画像を切り替えます。 bgStretcherの主な特徴 セットアップはシンプル 全てのモダンブラウザをサポート 画像は一枚だけでなく、複数枚にも対応 対応ブラウザ Internet Explorer 6, 7, 8, 9 Firefox 2, 3, 4 Opera 9+ Safari Chrome bgStretcherの使い方 Step 1: ファイルのダウンロード サイトの「Download」よりファイル一式をダウンロードします。 一式には必要なファイル全て（jqeury.jsも）が含まれています。 Step 2: 外部ファイル 外部ファイルを下記のように<head>～</head>に記述します。 <script type="text/javascript" src="../jquery-1.5.2.mi
避けるべきHTML5機能をまとめたティップサイト「HTML5 Please」登場
HTML5やCSS3といった最新の技術を活用したWebページの制作は開発者にとっては魅力的な選択肢だが、そこには常に「どの機能ならば使っても良いか」という判断が必要になる。最新のブラウザがある機能に対応していたとしても、それがすべての主要ブラウザでサポートされていないことがあったり、あるバージョンでは特定の問題を引き起こすこともある。「どの機能ならば使っても良いか」という調査にかかるコストを考えると、従来の古い技術のみでWebサイトを構築する、といった選択肢も捨てがたいものとなってしまう。 こうした際に役立つサイト「HTML5 Please」が登場した。HTML5やCSS3、JavaScript APIに関して利用が推奨されるかどうか、どのブラウザのどのバージョンがサポートし、全体としてどの程度の対応状況にあるかをまとめたサイトだ。どの機能を利用すべきかといった判断をするのに役立てることが
iPhone, iPad, ブラウザなどクロスデバイス対応のCSSフレームワーク -Less Framework
iPhoneなどのモバイルデバイスには320px、iPadやネットブックには768px、デスクトップなどのブラウザには1280px、三種類のデバイスにあわせてレイアウトを切り替えるフレームワークを紹介します。 Less Framework 2 ベースとなるカラムは下記のようになります。 iPhoneなどのモバイルデバイス 320px、2カラム iPadやネットブック 768px、5カラム デスクトップなどのブラウザ 1280px、8カラム 三種類のレイアウトは同じグリッドを使用しており、カラム幅：120px、溝幅：24pxとなっています。 異なる点はカラムとマージンの量です。 レイアウトの変更にはCSS3のMedia Queriesが使用されています。 body {width: 696px;} @media only screen and (max-width: 767px) { body
EvernoteのWindowsクライアントが重いので、Chromeを使ったら快適になった | フリーソフトラボ.com
クラウドサービスの最先端とも言えるEvernoteの存在は、もはや欠かせないものになっている人も多いと思いますが、一方で肝心のノートを閲覧するためのクライアントソフトが重いことに悩んでいる人も少なくないのではないでしょうか。 筆者自身、決してハイスペックとは言えないラップトップをメインPCとして使用しているため、重くてどうしようもないと言う程ではありませんが、いまいち快適とは言い難い使い心地にストレスを感じてきたことも今までに何度かありました。 また、以前はウェブ版のEvernoteのユーザーインターフェースがクライアントソフトのそれとは大きく異なっていたため、プラットフォームによって使い勝手の善し悪しが変わってしまうという問題もありましたが、こちらは最近になってクライアントソフトのUIとほぼ同じのものに変更され、ずいぶん使いやすくなりました。 そこでこれを機に、思い切ってクライアントソフ
Flash?いいえ、HTML5です: ファイルのドラッグ&ドロップによるフォトアップロード機能について - mixi engineer blog
はじめまして。コミュニケーションサービス開発部の澤と申します。コーヒーとカレーをこよなく愛する新卒2年目の新米エンジニアで、弊社Webのフロントエンドを主に担当しています。最近はmixiスマートフォン版(mixi Touch)の開発にも精力的に取り組んでいます。 さて、本日はPC版のmixiで1つの機能をリリースいたしました。ファイルをWebブラウザにドラッグ&ドロップするだけで写真をmixiフォトにアップロードできるもので、HTML5 File API※1を採用しています。本記事ではこの機能について色々とお話をしたいと思います。 なにこれ? 以下では、ドラッグ&ドロップによるアップロード機能を「本機能」と呼びます。 百聞は一見にしかずです。本機能のプロモーションムービーがありますので、まずはこちらをご覧ください。 動画では下記を説明しています。 従来のアップロード方法からドラッグ&ドロッ
Firefoxで使用していた＆Chromeで使用中の拡張機能 計36個
2017年6月30日 便利ツール 以前「ChromeからFirefoxに戻した6つのくだらない理由」という記事を書いてから約８ヶ月。久しぶりにChromeをいじってみると、エクステンションの数も増え、いろいろと進化しているようです。「Firefoxにあるこの機能がChromeであれば移行するのに…」と思っていた事がだいぶ解消されたので再びChromeに復帰しました！そこでFirefoxに入れていたアドオンと、Chromeで使用し始めたエクステンションを紹介します。Firefox派の人も、Chrome派の人も、移行検討中の人も、ぜひ参考にしてみてください！ ↑私が10年以上利用している会計ソフト！ Firefoxアドオンに代わるChromeエクステンション 私のようにもともとFirefoxユーザーの場合、一番のネックは便利なアドオン。それに代わるエクステンションがないと移行の決意はできません
Evernoteを挫折した人、僕ともう1度本気になって挑戦してみませんか？[環境作り編] * 男子ハック
WebサービスEvernoteEvernoteを挫折した人、僕ともう1度本気になって挑戦してみませんか？[環境作り編]2011年1月25日709 @JUNP_Nです。Evernoteを挫折した僕がもう1度本気になってEvernoteに挑戦してみる企画の第2弾。 第1弾がそこそこ評判がよかったみたいなので調子にのって続編です。今回はEvernotoを取り巻く環境を作り直してみたので紹介します。 前回の記事「Evernoteを挫折した人、僕ともう1度本気になって挑戦してみませんか？[運用ルール作り編]」ではEvernoteを自分に合った使い方をするために考え直して、ノートブック/スタックとタグの使い方に関してルールを決めてみました。 今回はどうやって情報をEvernoteに集約させるかについて考えてみます。 ※ちなみに前回の記事を投稿した後に有料アカウントを取得しました。 目次まずはiPhon
![Evernoteを挫折した人、僕ともう1度本気になって挑戦してみませんか？[環境作り編] * 男子ハック](https://cdn-ak-scissors.b.st-hatena.com/image/square/2ad87cdc65e68f8b0b13790b44ccad965f74ecc4/height=288;version=1;width=512/https%3A%2F%2Fwww.danshihack.com%2Fwp-content%2Fuploads%2F2011%2F01%2FEvernote_Revenge_2.jpg)
主要なCSS Resetのスタイルシートとドキュメントのまとめ -CSS Reset.com
ブラウザのスタイルを初期化するCSS Resetのスタイルシートとドキュメントをまとめたポータルサイトを紹介します。 CSS Reset.com [ad#ad-2] 現在、登録されているCSS Resetは下記の7つです。 Eric Meyer's "Reset CSS" Eric Meyer's "Reset CSS"のドキュメント HTML5 Doctor CSS Reset TML5 Doctor CSS Resetのドキュメントメント Yahoo! CSS Reset (YUI 3) YUI 3のドキュメント Vanilla CSS Un-Reset Vanilla CSS Un-Resetのドキュメント Tripoli CSS Reset – David Hellsing Tripoli CSS Resetのドキュメント 'undohtml.css' – Tantek Celik
iPadのブラウザをPCで利用する - iPadのSafariをエミュレーションする方法 - クラウディア
5月10日にiPadの予約が開始され、発売日の5月28日が待ち遠しい人も多いでしょう。僕もその一人です。僕はWi-Fi 16GBを10日にApple Storeで早速予約しました。Apple Storeを見ると予約が殺到しているようで、現在（5月14日）は出荷予定は6月7日までとなっています。 さて、待ち遠しい方々や、インターネットサービスを提供している方々は、iPadのエミュレーターでサイトがどのように表示されるか、確認してみてはどうでしょう。 僕らフィードパスもクラウドアプリケーションのプロバイダーなので、提供するクラウドアプリケーションがiPadでどのように表示されるか大変興味のあるところです。早速、フィードパスが提供するグループカレンダーのfeedpath Calendarの表示を確認してみました。 方法はAppleが提供するSDKである「 iPhone OS 3.2 SDK be
新しく買ったPCに入れておきたいWindows用フリーソフト15本まとめ | フリーソフトラボ.com
「新しくパソコンを買った。」「OSを再インストールした。」…次に何をしたらいいだろうか…。そんなとき、たいていの人は、まず必要なソフトウェアをいくつか適当にインストールして、自分なりの快適なPC環境を構築することから始めますが、いざ作業にかかるとどれから入れたらいいのか迷ったり、ダウンロード先ページを探し回ったりして、案外時間がかかってしまうものではないでしょうか。 あまり多くのソフトを必要ないものまで手当たり次第入れても、PCの立ち上がりを遅らせたり、クラッシュなどの不具合が起こりやすくなって、良いことはありませんが、できればPCの普段使用に必要最低限なアプリケーションくらいはあらかじめインストールしておきたいものです。 今回は、そんなときに、とりあえずこれくらいのツールは入れておけば基本的なPC作業は何でもできるだろうというWindows用フリーソフトを、ウェブブラウザ、メーラー、オフ
お気に入りの壁紙を使ってChromeテーマを作成する方法 | ライフハッカー・ジャパン
Chromeのテーマギャラリーがローンチしてからというもの、素敵なテーマが溢れんばかりの今日この頃ですが、それでもやはり自作してみたい、という方のためにChromeテーマの自作方法をご紹介。思っているよりも全然簡単ですよ。 実際、ChromeテーマはJavaScriptもHTMLコードも含まない単純なアドオンで、2つの構成エレメントからなっています。 その2つとは 画像 x 数枚 .jsonマニフェストファイル x 1個 これらのエレメントが.crx形式にパッケージされています。.crxファイル形式とはGoogle Chromeが使用しているZIPファイルのバリエーションの一つです。 下の画像を使って作成したChromeテーマが、そのもう一つ下の画像です。このテーマは下記に記したやり方で作成しました。 ＜ビフォー＞ ＜アフター＞ お気付きの方もいるかもしれませんが、背景画像に対して新規タブ
[JS]モバイル・タッチデバイス用のアプリケーションを構築するためのJavaScriptのフレームワーク -DHTMLX Touch | コリス
DHTMLX Touch [ad#ad-2] DHTMLX Touchの主な特徴 DHTMLX TouchはUIウィジェットのセットだけでなく、モバイルやタッチデバイス用のクロスプラットフォームのウェブアプリケーションを作成することも目的とした完全なフレームワークです。 対応デバイス iPad, iPhone, Androidなど人気の高いデバイス全てに対応。 Firefox3.6, Chrome, Safari など主要ブラウザにも対応。 リリース計画 以下のリリースを予定しています。 フル機能のヴィジュアルデザイナー サーバーサイトのインテグレーション データストアのグローバル化 カルーセルコンポーネント アニメーションの追加 詳細なドキュメント クライアントストレージのサポート ver 1.0のリリースを2011年第1四半期に予定しています。 [ad#ad-2] DHTMLX Tou
もうCSSハックは必要なし!? ブラウザ毎にCSSを切り替える「cssuseragent」 | Web活メモ帳
CSSでページをデザインする際に、ブラウザ毎のレイアウトの違いって本当に嫌ですよね。 CSSハックで対応する方も多いかと思いますが、本日紹介する「cssuseragent」を使うとclassの作り方を少し工夫するだけでより柔軟に対応できるようになります。 詳しくは以下 設定方法はJavaScriptを一つ読み込むだけになります。 <script src="cssua.min.js" type="text/javascript"></script> このライブラリを使うと、ページのhtml属性に動的にclass属性を追加するようになります。 例えばですが、IE6でアクセスした場合には ua-ie-6というclass名が追加されるようになります。 <html class="ua-ie-6"> <head>…</head> <body>…</body> </html> iPhoneの場合はua-
背景画像をブラウザの枠いっぱいに表示するテクニックの考察
最近のトレンドの一つでもある背景画像をブラウザの枠いっぱいに表示する実装方法はたくさんあります。その中から、理にかなった最新のテクニックや、より多くのブラウザに対応させるテクニックを紹介します。 Perfect Full Page Background Image [ad#ad-2] 下記は各ポイントを意訳したものです。 各デモはページ下部のDownload Files」で、まとめてダウンロードできます。 背景画像をブラウザの枠いっぱいに表示するテクニックとは CSS3を使ったテクニック CSSだけで実装するテクニック：その1 CSSだけで実装するテクニック：その2 jQueryを使ったテクニック 背景画像をブラウザの枠いっぱいに表示するテクニックとは 前提として、下記のポイントが挙げられます。 画像でページをいっぱいにします。 空きは無いようにします。 画像のサイズは必要があれば調整しま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
5509.me
ブラウザ対応表とかでよく見かけるようなチェック表をサクッと生成するWebサービス・Compare Ninja - かちびと. net
2011年、スマフォ・デスクトップ用のクロスブラウザ確認ツールのまとめ
TechCrunch | Startup and Technology News
