Googleフォントを利用する時、どうしてますか? サイトにアクセスして、フォントを選んで、ダウンロードして、インストールして、、、とけっこう面倒だったりしませんか? 昨日リリースしたばかりの「Fontea」はそれらの手間なく、Photoshop上で簡単にGoogleフォントが利用できる優れものです。 しかも完全無料!
ウェブサイトのURLを保存したいがために自分から自分にメールを送る、という作業を行ったことがある人も多いはず。Googleが、そんな手間を省くためにウェブサイトから2クリックで簡単にページURLをGmailに保存したり、メールで誰かと共有したりできるChrome拡張「Inbox by Gmail」を公開しているので、実際に使ってみました。 Official Gmail Blog: Inbox by Gmail: a better way to keep track of events, newsletters and links https://gmail.googleblog.com/2016/04/inbox-by-gmail-better-way-to-keep-track.html Inbox by Gmailを使うにはまず、以下のウェブページにアクセス。 Inbox by Gma
Webサイトのスクリーンショットは色々な場面で使われます。ニュース系サイトであったり、Webサイトを紹介するブックマーク的なサイトでも使われるでしょう。そんなスクリーンショットを一つ一つ手動で保存していたら時間がかかってしまいます。 そこで使ってみたいのがScreenshot as a Serviceです。Webサイトを画像化するコマンドツールです。 Screenshot as a Serviceの使い方 Screenshot as a Serviceを使ってGoogleのスクリーンショットを保存する例です。 画面の幅や高さを指定することもできます。レスポンシブなサイトに良さそうです。 さらにウィンドウの一部だけを指定も可能です。 Screenshot as a Serviceはコードから操作もできるので自動化することもできます。ウィンドウの中だけなので余計な機能拡張が写ってしまうこともあ
JavaScriptライブラリやフレームワークの中でもjQueryやEmberのようなインターネット利用者がよく使うファイルはContent Delivery Network(CDN)サイト上に置かれており、CDNにアクセスして読みこむ仕組みとなっています。しかし、CDNにアクセスすることでわずかながら読み込みに時間がかかりページ表示速度が遅くなったり、CDNによって行動履歴を追跡されたりする危険性があるため、「なるべくならばアクセスをなくしたい」と考えた技術者によって、頻繁に使われるJavaScriptライブラリ/フレームワークをローカルに保存してCDNへのアクセスを減らすFirefoxアドオン「Decentraleyes」が開発され、GitHub上で公開されています。 Decentraleyes :: Versions :: Add-ons for Firefox https://ad
はじめまして。デザイナーのminecoです。 私は去年から「Pinterest(ピンタレスト)」というデザイン情報を収集できるWebサービスを使っていますが、ここまで長く使っているアプリは初めてじゃないかというくらい継続して利用しています。デスクトップブラウザからでもスマートフォンアプリからでも使えるので、忙しい日々の生活のなかで情報収集ができ、情報が豊富なので1日徘徊していても飽きないからだと思います。 ということで今日は、そんな「Pinterest」を使ったデザイン収集の方法をご紹介します。今回は「Webデザイン」を集めることをテーマにしていきます。 Pinterestとは? Pinterest は見て、発見するツールです。プロジェクトや趣味にぴったりのアイデアを見つけるのに活用してください。ーPinterestより 気軽にアイデアを発見できるツールです。サイト上で気に入ったデザインや
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ベジュ曲線などを使ったドローイングをやろうと思うとIllustratorやInkscapeのような特別なソフトウェアを使わないといけない気がしてしまいます。それこそ覚えるのに何日もかかるでしょう。 そこで使ってみたいのがCurve Appです。機能は決して多くありませんが、シンプルなUIですぐに使いこなせるドローアプリです。 Curve Appの使い方 Curve Appを起動しました。サンプルのドローが描かれています。 クリックするとポイントがハイライトされます。 適当に色々追加したところ。円や多角形の他、ベジュ曲線を使ったドローもできます。 Curve AppはElectronを使っている点がポイントで、つまりこれはHTMLで動いているということです。データはSVGで保存できる
2017年11月23日 便利ツール Webサイトに修正指示を出す時、どんなツールで、どのようにシェアしていますか?該当ページのスクリーンショットを撮影し、その画像に指示を入れていく…という方が多いかな、と思います。今回はWebサイトの制作者のみならず、制作者に指示をだす人や、クライアント側も使える、修正指示がグンと楽になりそうなツールをいくつか紹介します! ↑私が10年以上利用している会計ソフト! AUN[あうん] AUN[あうん]はふせん紙の感覚でWebサイトや画像にコメントを残し、共有できるツールです。登録不要!無料で気軽に利用できるところが魅力的。対象となるWebサイトのURLを入力するだけでスクリーンショットを撮影でき、指示やコメントを残していけますよ。さっそく試してみましょう。 サイトからURLを入力し、読み込みが終わると、画面をトリミングするかどうかの選択画面が表示されます。読
Microsoft Word・Microsoft Excel・Microsoft PowerPointで作成したファイルをPC内だけではなく、Google ドライブに保存したり、Google ドライブに保存してあるOfficeファイルをブラウザではなくそれぞれのソフトで開くことのできるGoogle純正プラグインが登場しました。 Google Drive Blog: Introducing the Google Drive plug-in for Microsoft Office http://googledrive.blogspot.jp/2015/07/google-drive-plug-in-for-office.html Microsoft Office プログラムからドライブ ファイルを使用、保存、共有する - Google Apps 管理者 ヘルプ https://support
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webサイトのスクリーンショットを撮りたいと思う機会は多いかと思います。Webサービスの中でもURLに対してそのサムネイルを表示したいと考えることもあるでしょう。 そんな時に使えそうなのがElectron Screenshot Serviceです。旧atom shellであるElectronを使ってnodeベースでWebサイトのスクリーンショットを撮影、保存できます。 Electron Screenshot Serviceの使い方 Electron Screenshot Serviceのインストールはnpmで行います。 $ npm install electron-screenshot-service 使い方としてはコマンドは提供されていないのでコードを書いて使います。例えば次のよ
これはMac OSXユーザであれば必携のツールになるのではないでしょうか。Mac OSXでファイルの保存先、開く先を変更する際にFinder側にあるファイルをドロップするという方法があります。これをよく使う人は多いでしょう。 しかしドロップすると保存ファイル名まで書き換わってしまって逆に面倒なこともあります。そこで使ってみたいのがLocatです。 Locatの使い方 LocatはSIMBLプラグインになっています。EasySIMBLなどを使ってインストールできます。 後はFinder側でOption + Returnを押すと選択している項目をOpen/Saveダイアログに反映します。Shift + Returnはファイル名は反映せず、場所だけ移動します。ファイルをドロップせず、キーボードショートカットだけでできるのが便利です。 実際のデモ動画はこちら。 日々よく行う操作を手軽にしてくれると
photoshopの「レイヤーからの画像アセット」機能。 前から気になっていたのですが、やっと試せました。 これは速いですねー。photoshop CC 2014.2.2リリースのバージョンでの 使い方をすこし解説します。 今までは、psdカンプを作成したあと、「スライス」ツールを使って スライス枠を作り、書き出し用のファイル名を別ウィンドウで書き込み、 「Web用に保存」ウィンドウを開き、出力設定を行い、 さらに背景などを切り出し・・と、htmlでコーディングするためのパーツを書き出すためにはたくさんの手順が必要でした。 「レイヤーからの画像アセット」機能でも、ウェブ用のパーツを書き出すのですが 上記手順に比べるとすごく少ないステップでパーツが書き出せるようになります。
Firefoxでスクリーンショットを撮る方法を紹介します。 1.はじめに ブラウザで表示されたページのスクリーンショットを撮るときは、いつもクライアントツールを使ってますが、Firefoxでも簡単にスクリーンショットを撮ることができます。 しかもページ全体のスクリーンショットを撮ることができます。 2.使い方 スクリーンショットを撮りたいページを表示します。ここでは「Yahoo!JAPAN」のページをサンプルにします。 画面上で右クリックして「要素を検証」を選択 「開発ツールのオプション」アイコンをクリック。 表示されたオプションから「ページ全体のスクリーンショットを撮影します」をチェック。 カメラのアイコンが表示されるのでクリック。 クリックした後の反応がなかったのですが、私のWindows環境では「C:\Users\ユーザー名\Downloads」配下に「Screen Shot YYY
インターネットをしていると思わず表示中の画面をキャプチャして保存したくなることもありますが、そんな時に役立つ機能が「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版で名称が
WebページをPDF化して保存したい場合、大きく分けて2つの方法がある。テキストや画像を選択できる状態で保存する方法と、ページ全体を1枚の画像として保存する方法だ。目的に応じてどちらも利用できるようにしておくと便利だ。 保管コストの削減はもとより、劣化の防止や検索性の向上、再利用の促進などさまざまな利点が認められ、徐々に広がりつつある紙の文書や帳票のデジタルデータ化ですが、用途や目的を考慮せずにむやみにスキャンすることでかえって効率が悪くなったり、作業に手戻りを発生させてしまうことも少なくありません。 また商法や税法で保管が義務付けられている文書の場合、電子帳簿保存法やe-文書法などのルールに則った手順を踏む必要があり、自分の判断でやみくもにデータ化するわけにいかないといった事情もあります。 本連載ではこうした現在の状況を踏まえつつ、文書のデータ化にまつわる情報、さらにはフォーマットである
Google Chromeで表示したページのHTMLソースをダウンロードする方法を紹介します。 1.問題点 前置きが長くなりますが、Firefoxとの動作の比較からChromeでの問題点を説明します。 まず、次のHTMLマークアップのページがあるとします。 <!doctype html> <html> <head> <meta charset="UTF-8" /> <title>テスト</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div id="container"> <h1>test</h1> <div id="content"> <h2><a href="http://user-domain/test.html">テスト</a></h2> <p>本文です本文です本文です本文です本文です</p> </
このPDFの図版、プレゼン資料に使いたい――。そんなとき、手間をかけずに抜き出せる機能がAdobe Readerに用意されている。 保管コストの削減はもとより、劣化の防止や検索性の向上、再利用の促進などさまざまな利点が認められ、徐々に広がりつつある紙の文書や帳票のデジタルデータ化ですが、用途や目的を考慮せずにむやみにスキャンすることでかえって効率が悪くなったり、作業に手戻りを発生させてしまうことも少なくありません。 また商法や税法で保管が義務付けられている文書の場合、電子帳簿保存法やe-文書法などのルールに則った手順を踏む必要があり、自分の判断でやみくもにデータ化するわけにいかないといった事情もあります。 本連載ではこうした現在の状況を踏まえつつ、文書のデータ化にまつわる情報、さらにはフォーマットであるPDFや変換機器であるスキャナ、保存先となるストレージに至るまで、業務現場と情報システム
こんにちは、段田です。 今回は、WordPressで使わない機能を停止させるプラグインをテーマに紹介します。 使う場面は限られると思いますが、必要になったときに参考になれば幸いです。 1. ビジュアルモードを停止するプラグイン https://wordpress.org/plugins/disable-visual-editor-wysiwyg/ 「Disable Visual Editor WYSIWYG」は投稿画面のビジュアルモードを停止できることができるプラグインです。 このプラグインを使うと、下の画像のようにビジュアルモードが消えて、テキストモードのみが利用できるようになります。 手順 プラグインファイルをダウンロードして、pluginフォルダに設置する。もしくはプラグイン新規追加画面からインストール。 管理画面のプラグインページから「Disable Visual Editor W
Adobe Creative Cloud アセットでPSD画像をスライスし、テキストのCSS情報を取得しよう こんにちは。まろCです。 雪がふりました。積もりはしませんでしたが。 そうですね、何かに例えるなら、白雪姫でした。 コーディングするとき、一番と言っていいほど時間がかかる箇所があります。それはPSDデータとのにらめっこです。 Fireworks派だった僕はLIGに入社して初めてPhotohopを触っているのですが、画像を切り出したり、テキストのサイズや行間を見て要素間のマージンを測ったりと、作業がいちいち面倒で時間がかかっていました。 しかし、なんと体感で6000倍ぐらい効率化してくれるWebツールがAdobeにあったのです。それがCreative Cloud アセットです Creative Cloud アセットとは https://assets.adobe.com/ ひとことで言
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く