画像に一括で任意のウォーターマークを挿入できるWebアプリ・「fastwatermark」 - かちびと.net
fastwatermarkは画像に一括で任意のウォーターマークを挿入できるフォトグラファー向けのWebアプリです 複数画像をアップロードし、別途アップロードした、透かしに使うロゴ等をワンクリックだけで一括挿入する事が出来ます 各画像ではロゴの位置やサイズの調整も可能で、透かしを入れ終わったら一括でzipでダウンロード出来るので透かしを入れる時間を節約できます 無料アカウントは一括ダウンロードが月2回までの制限がありますがそれ以外は特に制限なく利用できます fastwatermark
fastwatermarkは画像に一括で任意のウォーターマークを挿入できるフォトグラファー向けのWebアプリです 複数画像をアップロードし、別途アップロードした、透かしに使うロゴ等をワンクリックだけで一括挿入する事が出来ます 各画像ではロゴの位置やサイズの調整も可能で、透かしを入れ終わったら一括でzipでダウンロード出来るので透かしを入れる時間を節約できます 無料アカウントは一括ダウンロードが月2回までの制限がありますがそれ以外は特に制限なく利用できます fastwatermark
レスポンシブなWebデザインが当たり前になっており、その表示確認が大変になっています。Webブラウザの幅を変えたり、スマートフォンやタブレットでの表示を確認したりしている方は多いでしょう。 そうした手間を減らせそうなのがResponsive Viewerです。一気に複数デバイスでの表示を確認できます。 Responsive Viewerの使い方 こんな感じでまとめて表示を確認できます。 幅が広いタブレットでの表示も確認できます。 クリック連動で、一つの画面でリンクをクリックすればすべての表示が変更されます。 インスペクタで全デバイスでの要素の場所を確認できます。 横方向での表示確認も。 Responsive Viewerを使えば指定したデバイスでの表示をまとめて確認できます。スクロール追従もできるのですが、筆者環境ではうまく動きませんでした。デバイスの種類は追加できますので、Android
レスポンシブなWebサイトを開発する際には、様々なデバイスでの表示を一気に確認できると便利です。デバイス毎に画面幅が数多くあるので、それらをまとめて表示確認して調整していくという作業が不可欠です。 今回紹介するResponsively Appはそうした表示をまとめて行えるアプリになります。スクロールやイベントの追従もできます。 Responsively Appの使い方 立ち上げました。iOS系とノートPCでの表示をテストしています。 Webサイトを変えると、全体に反映されます。 表示を横に並べる形にしました。 表示するデバイスを選択します。カスタムサイズも可能です。 表示するデバイスを絞り込めます。 横向きに変更しました。 デバイスを指定して開発者ツールを開けます。 Responsively Appはクリックイベントをすべての表示に対して適用したり、ホットリロードにも対応しています。サイト
Webアプリケーションが広く使われるようになり、さもローカルアプリケーションと同じように操作できるようになっています。しかし、デスクトップの操作に近づけば近づくほど、ちょっとした操作性の違いに違和感を感じるようになります。 今回はドラッグして選択する操作をサポートするSelecto.jsを紹介します。この操作、デスクトップでは当たり前なのでWebでもできるようになると便利でしょう。 Selecto.jsの使い方 下にあるタイルが選択された状態です。 マウスでドラッグして選択できます。 キーボードとの組み合わせで複数回の選択もできます。 選択してドラッグ移動といった使い方もできます。 Selecto.jsが使われそうなのはExplorerやFinderといったファイル管理を提供する場合でしょう。同様に複数のファイルやオブジェクトをまとめて選択させたり、それを移動したりするのにSelecto.
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 机の上に複数台のPCを置いている人は珍しくありません。しかし、複数台あるとキーボードとマウスもその台数分必要になります。取り違えれば、別なマシンを動かしてしまったりします。これはとても面倒です。 そこで使ってみたいのがBarrierです。複数台のPCを一つのキーボードとマウスで操作できるようになります。 Barrierの使い方 一台がサーバ、他はクライアントとして接続します。 クライアントが立ち上がると自動的に接続が開始されます。 macOSの場合、セキュリティ設定も必要です。 Barrierはこの手のソフトウェアとして有名なSynergyのコア部分を使って作られています。Synergyは有償ソフトウェアになったので、オープンソースで使い続けたい方はBarrierがいい選択肢になる
もっと早く知りたかった！初心者のためのIllustratorレイヤー整理＆活用術 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！デザイナーのぱんちゃんです。 デザインの勉強を始めたのが約一年前。今でこそツールの使い方も少しずつ慣れてきたのですが、最初のころはIllustratorが苦手でした。特によく絶望していたのがIllustratorのレイヤー。どうやって管理したらいいのか分からず、毎回ぐっちゃぐちゃのレイヤーを作っていました……。 ただ、アイキャッチ制作プロジェクトでLIGの先輩にレイヤーの管理の方法を教えてもらってから、一気に作業が楽になりました。 デザイン始めたての当時の私に何か一つ伝えられるなら「Illustratorのレイヤーの整理の仕方」を伝えたい！！！ ということで、今回はデザイン始めたての方に向けて、私が実際に業務で行っているレイヤーの整理＆活用方法をお伝えします。 絶対に覚えておいたほうがいいポイントだけをまとめたので、今日でぐちゃぐちゃレイヤーとはおさらばしましょう〜！ 独学でつ
【WordPress】WP-CLIを利用して、負荷を減らしつつ画像のリサイズをしよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、エンジニアのづやです。 WordPress便利ですよね。ただサイト構築してる最中だったり、リニューアルだったりで画像のサイズパターン増えちゃうことありますよね。そんなとき、過去にアップロードした画像を作り直すことがあるかと思います。 プラグインでやるなら、Regenerate Thumbnailsなどを使用するでしょうか。管理画面からすべての画像をリサイズできるのは、すごく便利ですね。ただすべての画像の、すべての画像サイズに対して、リサイズを行う必要が発生してしまいます（1個ずつもできるけど、あんまりないですよね）。 画像サイズや量によっては、膨大な時間がかかってしまうこともあります。一度に検証することで、サーバに負荷がかかって重くなってしまうこともあります。 そんなときWP-CLIで画像をリサイズするとで解決できることもあったので、使い方を紹介します。 wp mediaコマン
Webブラウザを必要に応じて切り替えている人は多いのではないでしょうか。開発用途、普段のブラウジングはもちろん、特定のサイトの場合だけIEを使わないといけない人もいそうです。 そんな方たちにお勧めしたいのがBrowser Chooserです。Webブラウザを自由に切り替えできます。 Browser Chooserの使い方 設定を促されます。 デフォルトブラウザをBrowser Chooserにします。 利用するブラウザを設定します。 そしてURLを開く際にWebブラウザを選択します。 Browser ChooserはURLごとに表示するWebブラウザを記憶できます。普段はGoogle Chromeにしつつ、特定の開発時にはFirefoxに切り替えるといった操作が手間なくできるでしょう。 Browser ChooserはVB.NET製のオープンソース・ソフトウェア（Microsoft Pub
複数の Next.js アプリケーションをローカルで同時起動する際にポート番号を覚えきれない問題を nginx で解決する - Uzabase for Engineers
こんにちは、株式会社アルファドライブ @takano-hi です。AlphaDrive で Web フロントエンドを中心に設計・実装などを担当しています。 今回は、弊社のローカル開発環境で localhost:xxxx といったポート番号が増え続ける問題を解決した話をまとめてみました。 背景 弊社では Next.js を利用したフロントエンドアプリケーションを複数開発しており、今後も増える見込みがあります。 通常 Next.js アプリケーションは、ローカル開発環境の起動時に localhost:3000 にホストされます。 これが複数になると、2つ目以降はそのままではポート 3000 番が占有されていることによるエラーが発生するため、別のポート番号を指定する等の方法で回避することが多いと思います。 さらに、それぞれのプロジェクトごとに Storybook を用意したりすると、必要なポート
文字を入れ替える置換処理を何度も繰り返し行うことがあります。正規表現を使えば複数のパターンをまとめることもできますが、それでもなお、何度も何度も行わないといけないこともあるでしょう。 そこで使ってみたいのがMultiReplaceです。TSV形式で置換条件をまとめて設定できます。 MultiReplaceの使い方 利用例です。上に置換条件、中央に対象文字列、下に結果が出ます。 MultiReplaceは修正した内容がリアルタイムに反映されます。置換条件を追加すれば、それもまた反映されます。必要な結果が得られるように条件を変更しながら試してみてください。 MultiReplaceはVue製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 MultiReplace ueruku/MultiReplace: TSV形式(=Excelコピペ)で複数の文字列を一
QUERY関数の基本と簡単な応用例！意外と気づかない2つの注意点も紹介【Googleスプレッドシート】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
LIGのtetsuこと手塚です。情報システム室の室長をしています。 LIGでは主にGoogleのサービスを利用していることが多く、社内共有の利便性からGoogleの「スプレッドシート」を使う機会が多くあります。特に業務の中では、表計算やデータの集計などで多く使い、あらゆる関数を駆使して必要なシートを作成していきます。 今回はその関数の中でQUERY関数について、少し紹介していきます。QUERY関数はVLOOKUP関数より複雑な条件で出力したり、出力結果の並びを自由に変更できる関数です。 QUERY関数とは QUERY関数の説明でGoogleでは Google Visualization API のクエリ言語を使用して、データ全体に対するクエリを実行します。 参照元：Google とあります。 これはGoogleが提供するスプレッドシート内のデータに対する処理を、指定の書式で構成した命令文を
FontGoggles - フォントを並べて比較する
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました どのフォントを使うかによって、受け手で感じる印象はまったく違います。とはいえ、フォントがまったく違うコンセプトでできているならばまだしも、ちょっとした違いしかない場合にどちらを採用するかは難しい問題です。 そこで使ってみたいのがFontGogglesです。フォントを比較表示できるソフトウェアです。 FontGogglesの使い方 フォントをドラッグ&ドロップで登録して、同じテキストで比較できます。 日本語も使えます。 マージンやフォントサイズを変更して比較もできます。 デザイナーであればフォントの比較はよく行うでしょう。開発者であっても、プログラミングフォントを比較して自分にあったものを選ぶことができます。各文字の細かな情報も得られるので、フォント選択時に役立ててください。 Fon
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Responsive Viewer - レスポンシブWebデザインをまとめて確認
Responsively App - レスポンシブWebデザインを効率化
Selecto.js - Web上でドラッグで選択するUXを実現 MOONGIFT
Barrier - 一組のキーボードとマウスで複数台のPCを操作
Browser Chooser - Webブラウザを手軽に切り替える
MultiReplace - 置換条件をまとめて指定してテキスト変換
tabelog.com
www.natureasia.com
alegria-sales.co.jp
motoshidaa-backdiary.hatenablog.com
anond.hatelabo.jp
qiita.com/swiri