簡単にウェブ画面をキャプチャして文字・枠乗せなど編集も可能な「Nimbus Screen Capture」
インターネットをしていると思わず表示中の画面をキャプチャして保存したくなることもありますが、そんな時に役立つ機能が「Nimbus Screen Capture」です。Nimbus Screen CaptureはブラウザソフトのGoogle ChromeとFirefoxで使えるブラウザ拡張機能で、画面の一部を切り取ったり、ウェブページ全体を簡単な操作だけで行うことができます。 Nimbus - Nimbus Screen Capture http://nimbus.everhelper.me/screenshot.php ◆ブラウザに拡張機能をインストール Nimbus Screen Captureを利用するためには、まずは各ブラウザに拡張機能をインストールする必要があります。以下ではブラウザ別のインストール手順を記載していますが、なぜかGoogle Chrome版とFirefox版で名称が
UIデザインが捗る！Prottでスマホサイトのプロトタイプを作成しよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
はじめまして。LIGでデザイナーをしています、マチルダです。 最近、前職でお世話になったデザイナーの先輩から「アラサーは品が命」という格言をいただいたので、全体的に生き方を見直そうと思っています。 今後とも末永くよろしくお願いいたします。 数年前から、スマートフォンサイト制作のお仕事が多くなりました。 そんなこんなで、「スマートフォンでの使いやすさ」とはなんぞや？を考える日々を送っているのですが、使いやすさって、実際に使ってみないとわからない…でも、自分で実装する技術も時間もない…！ 今回はそんなデザイナーさんでも簡単で素早くプロトタイプを作成できるツール「Prott（プロット）」の使い方をご紹介したいと思います。 ※今回は分かりやすいよう、LIGのスマートフォンサイトをサンプルにして作成手順をご説明いたします。 「Prott（プロット）」とは？ Prott（プロット）はUIデザインで有名
既存のアプリのiPhone 6と6 Plus対応 - クックパッド開発者ブログ
はじめまして、11月頭にクックパッドに入社したモバイルファースト室のヴァンサン(@vincentisambart)です。 既存のiOSアプリのiPhone 6と6 Plus対応について書きたいと思います。 既存のiOSアプリはiPhone 6対応済みだと明確にOSに示さないと、iPhone 6でも6 PlusでもiPhone 5の画面を拡大したものが表示されます。アプリから見える画面のサイズはiPhone 5と同じ320x568です。 iPhone 6対応がされていると示すには、方法が2つあります： 静的起動画面：iPhone 6とiPhone 6 Plusの画面サイズに合わせた静的な起動画面用の画像をアプリに入れます。 動的起動画面：起動画面をXIBファイルという形でアプリに入れます。 iOS 7以下は動的起動画面を対応していません。iOS 7以下対応のアプリが動的起動画面を使っても問題
[JS]ヘッダやナビゲーションなどを下にスクロールした時には隠し、上にした時に表示するスクリプト -ScrollUpBar | コリス
デモ：offsetTop このデモでは、ブラックの「Top Bar」だけがスクロールで表示されます。 ScrollUpBarの使い方 実装は非常に簡単で、既存のページでも簡単に加えることができると思います。 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部ファイルとして記述します。 <body> ... <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="scroll-up-bar.min.js"></script> </body> Step 2: HTML スクロールで表示・非表示させるバーは、静的に配置させる箇所に記述し、「position: absolute;」を加えます。 <div id="topbar" styl
街角エラー画面コレクション第2回 エラー画面70枚、勢揃い
前回、気軽にエラー画面を募集してみたところ、なんと集まった投稿が約70通。 これまで、いつか記事にしようと思ってひとりでチマチマ撮りためていましたが、自分で撮った写真の10倍以上の数が一瞬で集まりました。スゲー！ というわけでその中でも僕がグッときたものを、より抜きでご紹介していきたいと思います。 ※中にはエラーじゃない表示の画面もありますが、総称として「エラー画面」と呼んでいきます。 インターネットユーザー。電子工作でオリジナルの処刑器具を作ったり、辺境の国の変わった音楽を集めたりしています。「技術力の低い人限定ロボコン（通称：ヘボコン）」主催者。1980年岐阜県生まれ。 本『雑に作る ―電子工作で好きなものを作る近道集』（共著）がオライリーから出ました！ 前の記事：技術力の低い人が作ったロボット大集合 ＞ 個人サイト nomoonwalk
ちょー簡単にPCの画面をシェアできる『Quick Screen Share』 | 100SHIKI
ちょー簡単にPCの画面をシェアできる『Quick Screen Share』 September 23rd, 2011 Posted in 便利ツール（ウェブ） Write comment 定期的にこういうサイトはあがってくるが、ドメインがわかりやすいのと、使い方がすんごく簡単なのでご紹介。 Quick Screen Shareはブラウザ＆JavaのみでPC画面をシェアできるサービスだ。最近のブラウザだったらJavaは載っていると思うので、実質的にほとんどのPCで実行可能だ。 使い方は簡単で、名前をいれて何回かクリックしていくだけだ。 あとは生成されるURLを友達に渡せばOKだ。相手のマウスの動きを見ることもできたり、コントロールを相手に渡したりもできて必要十分な機能が備わっていると言えるだろう。 Skypeなんかを使えば同等のことが可能だが、アプリのインストールが必要だったりして面倒だ。
簡単実装でパララックスコンテンツを作成できるスクリプト -Parallax ImageScroll | コリス
ページをスクロールすると、パララックスのエフェクトで次々に画像とコンテンツをカーテンを引き上げるように表示するjQuerのプラグインを紹介します。 もちろんレスポンシブにも対応、またタッチデバイスではパララックスのエフェクトが重く感じることもあるのでオン・オフの設定もできます。 Parallax ImageScrollの使い方 Step 1: 外部ファイル </body>の上あたりに、jquery.jsと当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="../jquery.imageScroll.js"></script> </body> Step2: HTML
[JS]縦長1ページのスクロール時にさまざまなインタラクションを加えるスクリプト -ScrollStory
ティザーサイトやプロダクトページ、ポートフォリオ、企業サイトなどにも多く採用されているスクロールを前提とした縦長のページにさまざまなインタラクションを加えることができるjQueryのプラグインを紹介します。 Scroll Storyの名の通り、スクロールするごとにさまざまなストーリーを与えることができます。 ScrollStory -GitHub ScrollStoryの特長 ScrollStoryのデモ ScrollStoryの使い方 ScrollStoryの特長 ScrollStoryは、スクロールベースのページとインタラクションをシンプルな実装で作成できます。 スタイルにとらわれない、自由なスクロールベースのページを作成可能。 既存コンテンツの流用だけでなく、新たにオブジェクトを配列で生成することにも対応。 jQuery UIの16種類のイベント・コールバックが利用できます。 アクテ
[CSS]癒されたい人へ！窓越しの雨粒がどんどん増えていくスタイルシート -CSS Raindrops
以前、JavaScriptで雨を再現した癒やし系スクリプトを紹介しましたが、今日紹介するのはスクリプト無し、CSS3アニメーションで実装する窓越しに楽しむ雨粒を紹介します。 キャプチャは静止画ですが、CSS3アニメーションで雨粒がどんどん増えていきます。
Photoshopでレイヤー周りのガイド引きを便利にする機能拡張 -Layer Guides
レイヤーに配置したエレメントの左・上・右・下に沿ってガイドを引きたい、天地中央・左右中央にガイドを引きたい、そんな要望に1クリックでガイドを設定できるPhotoshopの機能拡張を紹介します。 Layer Guides Photoshop Extension Layer Guides -GitHub Layer Guidesのインストール Layer Guidesの使い方 Layer Guidesのインストール ページの「Downloading the action」から「layer-guides-master.zip」をダウンロードします。 Layer Guides Photoshop Extension ファイルを解凍し「Layer Guides.zxp」をダブルクリックすると「Adobe Extension Manager」が起動するので、指示に従いインストールします。 Photos
[JS]着眼点が面白い！スクロールできない状態でキーボードやクリックでスクロールさせるスクリプト -Scrollocue
2番目のパラグラフに移動して、ハイライト表示 Scrollocueの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <script src="js/jquery-2.0.3.js"></script> <script src="js/scrollocue.js"></script> Step 2: HTML スクロールのキューとなるパラグラフを配置し、適用する範囲を指定できるようラッパーで包みます。 適用範囲のラッパー：#container <div id="container"> <h1>Scrollocue</h1> <div class="section meta"> <p>A simple autocue/teleprompter system.</p> <p>Just use the arrows or spacebar t
[JS]シンプルなページ内スクロールから、ちょっと面白いスクロールまで簡単に実装できるスクリプト -Scrolld.js
Demo 3 一番目はdiv、二番目はネコの画像、下の方には表示幅に合わせてエフェクトが変わります。 Scrolld.jsの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを</body>の上あたりに外部ファイルとして記述します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="../demo/js/scrolld.min.js"></script> Step 2: JavaScript スクリプトのトリガーを外部ファイルの下に記述します。 <script type="text/javascript"> $("[id*='Btn']").stop(true).on('click',function(e){e.preventD
デスクトップ・タブレット・スマフォなど、さまざまな環境で同時に同じページを表示できるオンラインサービス -Framote
デスクトップやノートブック、タブレット、スマートフォンなどの異なるデバイス、OS、ブラウザで、自動で次々に同じページを表示し、制作ページの表示確認できるオンラインサービスを紹介します。 遠隔地など異なる場所でも利用できます。 Framote Framoteの仕組みは同じページを表示するURLを発行し、各デバイスは一度そのURLにアクセスするだけで、後はコントロール側が表示ページを変更すると、各デバイスも自動で次々にページが表示されます。 使い方は簡単で、登録なども必要ありません。そして無料です！ まずは、各デバイスとページのURLを用意して始めましょう。 Framoteにアクセスし、表示したいページのURLを入力し「Create」ボタンを押して、共有するURLを発行します。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【保存版】プレゼンにいい！Webページやスマホアプリを魅せるモックアップ用の高品質な無料素材のまとめ
Engadget | Technology News & Reviews
Android, iOS, Windowsの各デバイスが揃っているデザイン用のPSD素材 -Mobile Design Kit