ITエンジニア/デザイナ向けにオープンソースを毎日紹介

メディア - 画像の記事一覧

プレミアムユーザー限定記事

MOONGIFTプレミアムは、月額500円の有料サービスです。詳細はこちらから

もっと見る

List

  • 2017/08/30

node dependencies view - nodeプロジェクトの依存性を可視化

nodeに限った話ではありませんが、各プログラミング言語では多くのライブラリを利用します。自分では一つしか使っていないつもりでも、そのライブラリが別なライブラリに依存し、そのライブラリがまた別な…と広がっていくのはよくある話です。そんなnodeプロジェクトの依存性を可視化してくれるのがnode dependencies...

List

  • 2017/08/24

image-compressor - Webブラウザ上で画像圧縮

スマートフォンのカメラの性能が大幅に向上し、1ファイルのサイズが肥大化する傾向にあります。JPEGなのである程度圧縮がかかっているものの、それでも数MBあったりします。ブログなどで使うのであれば、正直そこまでの品質や画像の大きさは不要でしょう。そこで使ってみたいのがimage-compressorです。Webブラウザベ...

List

  • 2017/08/11

ChartEx - Excelのグラフを画像/PDFで出力

Excelで作成したグラフをHTML上に組み込んだり、別なドキュメントに使いたいと思ったことはないでしょうか。同じOffice系であれば連絡が簡単ですが、もっと広く使いたいはずです。そんな時にいちいち画面をキャプチャするのは面倒です。そこで使ってみたいのがChartExです。Excelのグラフを画像やPDFとしてエクス...

List

  • 2017/08/10

Alchemy - 画像をPDFに変換する常駐アプリ

画像をPDFに変換したいと考える時があるかも知れません。そんな時、画像を開いて印刷機能の一部で提供されるPDF変換を使ったり、PDFにしてくれるプリンタドライバを利用します。しかしこれは手間です。そこで使ってみたいのがAlchemyです。メニューバーに常駐するPDFコンバータです。## Alchemyの使い方常駐してい...

List

  • 2017/08/02

Chameleon.js - 画像からカラーパターンをピックアップ

Webサイトのデザインを考える上で色彩は重要なパーツです。それだけに慎重に選ばざるを得ません。同系色でまとめれば良いという訳でもなく、一見すると合わないような色合いでも意外とマッチするケースもあります。そんなカラーパターンを既存の画像からピックアップしてくれるのがChameleon.jsです。## Chameleon....

None

  • 2017/07/25

npm-icon-gen - スマートフォンアプリ/Webサイト用のアイコンファイルをまとめて生成

スマートフォンやWebサイトなどアイコンを使う機会は多いですが、それらはプラットフォームなどによってサイズがすべて違います。iOSであってもデバイスの画面の大きさや解像度によって異なります。これを一つ一つ作るのは大変です。そこで一つのSVG画像さえ用意すれば後は自動で生成してくれるnpm-icon-genを使いましょう...

List

  • 2017/07/21

jQuery Images Compare - 二つの画像をスライダーで比較

JPEGなど圧縮率によって画像の粗さやサイズが変わるフォーマットの場合、実際にその保存方法によってどう変わっているか比較してみないと分かりづらいでしょう。その時、ウィンドウを切り替えながら比較しても画面がチカチカしてしまってははっきりと分かりません。そこで使ってみたいのがjQuery Images Compareです。...

List

  • 2017/07/21

eCards - 送ろう!Web上でeカード作成

誕生日やクリスマスなどに、西洋ではグリーティングカードを送ります。日本でも売られてはいますが、年賀状ほど有名ではないでしょう。そして、最近ではもっと手軽にeカードが使われるようになっています。今回紹介するeCardsはWeb上でeカードを作成できるソフトウェアになります。## eCardsの使い方メイン画面です。テーマ...

List

  • 2017/07/17

asciicast2gif - asciicastをアニメーションGIFに

ターミナルの入力をそのまま記録、再現してくれるasciicastは便利なサービスですが、ブログなどに埋め込みたいと思ってもJavaScriptが許可されていないケースも多いでしょう。GitHubのREADMEもそうです。そうした時にリンクだけ貼るのでは面白くありません。そこで使ってみたいのがasciicast2gifで...

List

  • 2017/07/10

kingraph - 家系図/組織図ジェネレータ

組織図であったり、家系図といった図を描こうと思ったらどんなツールを使っているでしょうか。ドローツールも使えますが、編集したりするのが面倒だったりします。Excel職人の方はやはりExcelを駆使して作り上げてしまうかも知れません。今回はWebベースで使える家系図を作れるkingraphを紹介します。## kingrap...

List

  • 2017/06/30

SmartPhoto.js - 横スライドする画像ビューワー

画像とレスポンシブデザインの相性はあまりよくありません。最適なサイズで見せたいと思ってもパーセントで指定せざるを得ないですし、テキストのように自由に改行ができる訳でもありません。特に写真をメインにしたサイトでは悩みのタネでしょう。そこで使ってみたいのがSmartPhoto.jsです。特にモバイルデバイスに最適化されたレ...

None

  • 2017/06/29

berryjack - Twitter画像をまとめてダウンロード

Twitterはストリームなサービスなので、データがどんどん流れていってしまいます。そんな時、一時的に足を止めてデータを懐かしみたい時もあるはずです。しかしデータが流れてしまっていると探すのも大変です。今回は写真にフォーカスしたダウンロードツール、berryjackを紹介します。## berryjack の使い方ber...

List

  • 2017/06/23

EmojiPanel - Webベースの絵文字パレット

絵文字は多くのWebサービスで使われるようになっています。自分のサービスでも取り入れたいと考える方も多いでしょう。スマートフォンやmacOSであれば絵文字入力が行えますが、その他のOSでは別途仕組みを用意しなければなりません。そこで使ってみたいのがEmojiPanelです。Webベースで絵文字入力ができるパレットです。...

List

  • 2017/06/14

png2svg - PNGをSVGに変換

SVGもドロー系フォーマットとして一般的になりつつあります。モダンなWebブラウザは表示に対応していますし、JavaScriptと組み合わせればFlash風なインタラクティブ性を持ったコンテンツも作成できます。そんな中紹介したいのが画像をSVGに変換するというpng2svgです。## png2svgの使い方png2sv...

List

  • 2017/06/09

glsl2img - GLSLファイルを画像に変換

3Dやグラフィックスを描くのに使われるのがシェーディング言語になります。その一つで知られるのがGLSL(OpenGL Shading Language)で、OpenGLの中で使われているシェーディング言語です。そんなGLSLが書かれたファイルを画像に変換するのがglsl2imgです。## glsl2imgの使い方まず一...

List

  • 2017/05/26

PictShare - 画像加工Web APIを搭載した画像アップローダー

友人に写真や動画を送りたいと思った時に、サイズや量が多いと意外と面倒なことがあります。チャットでは強制的にファイルが送られてくるので受取手にとっては嫌なタイミングなこともあります。Gmailではファイルのサイズ制限があります。そこで使ってみたいのが画像や動画専用のアップローダーPictShareです。ちょっとしたWeb...

List

  • 2017/05/25

Progressive Image.js - ぼかし画像を使う画像遅延読み込み

写真コンテンツは見せ方が大事です。単純に一覧として表示しているだけではよくありません。より印象づけるための手段として、ユーザアクションと関連づけるという方法があります。そうすることでオンデマンドな情報提供ができるようになります。今回紹介するProgressive Image.jsはFacebookやMediumにインス...

List

  • 2017/05/19

besticon - Faviconを取得、フォーマット変換

Webサイトで使われているFavionは昔からあまり変わっていません。icoという拡張子のファイルが使われ、サイズもごくごく小さいものでした。スマートフォンが増えてきてようやくPNGや独自の大きなサイズの画像が求められるようになりました。そんなFaviconを生成、取得するのに便利なのがbesticonです。## be...

List

  • 2017/05/15

Code Snipper - コード(スニペット)を画像化

GitHub Gistのようにオンラインでコードを書いておけるサービスはあります。しかし、埋め込みコードが自分のサイトでは使えないというケースは多々あります。JavaScriptタグを危険なものとして全般的に不可としてしまっているケースです。そこで使ってみたいのがCode Snipperです。コードを画像にしてくれるソ...

List

  • 2017/04/13

Onion Packer - デザイナー向け。テクスチャ管理ソフトウェア

プログラマーであればスニペット、デザイナーであればよく使うデザインを手元に置いておくのは大事なことでしょう。一つのフォルダに入れておいても良いですが、もっと一覧で分かりやすく管理したいと思うでしょう。そこで使ってみたいのがOnion Packer、テクスチャデザイン管理です。## Onion Packerの使い方メイン...