Spritebot - SVGを最適化してサイズをより小さく
SVGファイルはベクターデータなので画像サイズによってはPNGやJPEGに比べて小さなサイズで表現できます。特に高解像度になればなるほどSVGのがサイズが小さくなります（SVGは画像サイズは関係がないので）。 そんなSVGですが、まだまだムダがあります。それらを削り取るのがSpritebotです。 Spritebotの使い方 メイン画面です。SVGファイルをドロップするだけです。 Spritebotを使うことで場合によっては70%以上も削減できています。ただし、うまくいかないSVGファイルも存在します。元々そんなに大きくはありませんが、ムダを省けるのは良いことです。SpritebotはSVGOというSVG最適化ライブラリを用いて処理を行っています。 SpritebotはElectron/JavaScript製のオープンソース・ソフトウェア（GPL）です。 thomasjbradley/sp
Shape Shifter - 異なるSVGに変化するアニメーションを生成
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました SVGとこれまでの画像バイナリと決定的に違う部分はなんと言ってもプログラムから操作しやすいということでしょう。アニメーションの定義などはSVG内でもできますが、より詳細なアニメーションはJavaScriptで制御できます。 そんなSVGを使って形状変化するアニメーションを定義できるのがShape Shifterです。 Shape Shifterの使い方 2つのボックスに対してSVGファイルを適用します。あまり複雑でないものがいいようです。 そしてプレビューを押すとアニメーションされます。 一例。マイナスがプラスに変わるアニメーション。 さらに変化点を変えることでアニメーションを若干変化させられます。 ハンバーガーメニューが矢印に変わるアニメーション。 Shape Shifterを使
Goat - アスキーアートをSVGに変換
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました アスキーアートと画像は切り離せない関係にあります。面白い写真が誰かの手によってアスキーアート化されたり、逆にアスキーアートのキャラクターがイラスト化されたりします。それぞれに良さがあります。 今回はアスキーアートをSVGに展開するGoatを紹介します。テキストで作った作品が滑らかな直線、曲線で描かれるのは面白いです。 Goatの使い方 例です。こんな矢印があります。 ^ | < ---+---> | v Goatで変換するとこんな格好良いSVGになります。 こんな複雑な図形も描けます。 .----. .----. / \ / \ .-----+-----+-----. + +----+ +----. | | | | .-----+-----+-----+-----+ \ / \ /
SVG Floorplan Editor - HTML5で実現するフロアマップエディタ
SVGといえばWeb上でベクターベースの描画を可能にしますが、その使い方はまだまだ模索中と言ったところでしょう。画像の代替として使おうと思ってもサポートされているブラウザやその対応負荷が大きくなかなか取り組めないと思います。 そこで一案として面白そうなのがWeb上で実際にドロー自体させてしまうというものです。そんなソフトウェアがSVG Floorplan Editor、フロアエディタです。 SVG Floorplan Editorの使い方 文字の編集ができなかったり、ドアの回転もサポートされていませんのでまだまだ実用レベルとはいいがたいでしょう。しかしこれまでFlashで行っていたようなドロー機能もSVGを使えばスマートフォンやタブレットでもできるようになりそうです。SVGの可能性を感じさせるソフトウェアです。 SVG Floorplan EditorはPHP製のソフトウェア（ソースコード
選んだ文字だけをSVG Fontsにまとめる·Fontomas MOONGIFT
FontomasはWebブラウザ上で任意のアイコンだけのSVG Fontsを作成できるソフトウェアです。 Web Fontsを使うと画像を使わずに素敵なフォントをオンライン上で使えます。しかしフォントを読み込むために転送量が大きくなってしまうのが欠点です。そこで使ってみたいのがFontomasです。SVG Fontsを使って自分で選んだアイコンだけをWeb Fonts化できます。 様々なアイコンフォントが並んでいます。自由に選んでいきます。 さらに色々なアイコンがあるので適当に選びます。 アイコンサイズを変更することもできます。 選んだものだけが抽出されます。 SVGが出力されました。これを使えばWebフォントとして使えます。 保存ダイアログです。 Fontomasを使えばフォント全てを読み込まずに選んだものだけを使えるようになります。そのためサイズが小さくなるのが利点です。また、複数のソ
小さなアイコン画像のSVG化に·pixel2svg MOONGIFT
pixel2svgは画像をSVGへ変換するPythonスクリプトです。 pixel2svgはその名の通り、ピクセル画像をSVGファイルへ変換できるソフトウェアです。Pythonスクリプトで、ターミナルベースで動作します。 処理を実行した所。解析処理が開始されます。 対応している画像はPNG、JPEGの他PIL（Python Imaging Library）で対応している画像なら何でもSVG画像に変換できるようです。 解析が終わると同じファイル名で拡張子がsvgのファイルが生成されます。 今回の変換元になった画像。PNGファイルで33KBです。 変換が終わったファイルはSVGなのでWebブラウザで開いたり、IllustratorやInkscapeで編集できます。なお変換後のサイズは999KBで、かなり大きくなっています。 SVG画像。忠実に再現されています。 その代わり、相当拡大することもで
IE6非対応サイトになるならば告知をしよう·ie6alert-js MOONGIFT
ie6alert-jsはWebサイト上部を使ってIE6向けにメッセージを表示する。 [/s2If] ie6alert-jsはJavaScript製のオープンソース・ソフトウェア。YoutubeやYahoo! Japanなど有名どころのWebサイトでIE6への非対応を掲げ始めている。もちろんすぐに影響が出る訳ではないが、近い将来認証やデザイン面で影響が出てくる可能性はある。 IE6の場合に表示されるメッセージ もし自社のサービスにおいてもIE6への対応を打ち切るのであれば、何らかの告知が必要になるだろう。その場合にはIE6の場合だけ表示を出したいはずだ。ie6alert-jsはまさにそのためのソフトウェアになる。 使い方は簡単だ。ie6alert-jsをヘッダーで読み込み、ie6Alert()という関数を実行すれば良い。後はブラウザの判別を自動で行って、IE6であれば画面上部に指定されたメッ
見るべし、試すべし！オンラインのSVGエディター·SVG-edit MOONGIFT
SVG-editはWebベース/JavaScript製のオープンソース・ソフトウェア。時々こういうソフトウェアに出くわすからオープンソースの紹介は止められない。オンラインで動作するWebアプリケーションは多数存在し、画像編集すらオンラインで行えるようになっている。 オンラインでSVGを作成、編集！ そういったソフトウェアは大抵Flashを使って動作する。だがSVG-editは違う、JavaScriptのみで動作するのだ。jQueryを用いたソフトウェアになっており、Webブラウザ上でSVGファイルを編集、作成できるようになっている。 まるで画像編集ソフトウェアのようなインタフェースをもち、右側に並んだツールアイコンを使ってドローができる。文字を書いたり、円や四角を描くこともできる。直線や自由線を描き、色を変更することだって可能だ。オブジェクトは描画後にドラッグして移動したり回転させることも
文字をJavaScriptで画像のようにレンダリングする·typeface.js MOONGIFT
Webサイトを見ていると、文字を画像に置き換えたサイトを見ることがある。思い描いている見せ方をそのまま表示させたいときなど、デザインを重視するサイトでよく見られる工夫だ。しかし問題はそのメンテナンス性の悪さだろう。 奇麗に文字が表示されるようになる それに適切に説明文を入れておかないと文字読み上げブラウザなどでは何も情報が得られなくなってしまう。そうした煩雑さから解放されるライブラリがこれだ。 今回紹介するオープンソース・ソフトウェアはtypeface.js、文字をSVG画像に変換するJavaScriptライブラリだ。 typeface.jsは指定した文字をそのままcanvasタグを使ったSVG画像に変換する。CSSを使って文字装飾を行うことができ、太字/イタリック/色変更を変更できる。他にもfont-stretch（横幅）、文字間隔、行の高さなどを指定することが可能だ。 選択すると文字全
MOONGIFT: � Web上で音声入力を可能にする「w3voiceIM.js」:オープンソースを毎日紹介
音声入力というのはずっと昔からあるわりには一般的な普及が進まない技術だ。もちろん、何らかの障害がある方々の間では利用されているが、もっと一般に普及しなければよりよい技術革新やコスト低減などが臨めないのではないだろうか。 単語の認識精度は高い そんな中、一つのきっかけになり得るソフトウェアが登場した。なんとJavaScriptを埋め込むだけで音声入力が可能になる。 今回紹介するオープンソース・ソフトウェアはw3voiceIM.js、Web APIを使った音声認識ライブラリだ。 w3voiceIM.jsはw3voice.jpで提供される音声認識エンジンをJavaScriptだけで利用できるようにするライブラリだ。テキストボックスやテキストエリアに対して利用可能で、オブジェクトをダブルクリックすると音声入力のダイアログが表示される。 Pukiwikiに組み込まれた例。テキストエリアに音声入力でき
MOONGIFT: » PDFが増えて困ったら「Shoka」:オープンソースを毎日紹介
企業間でPDFファイルをやり取りする回数が増えてきた。送り先の環境を気にせず、編集される心配も（ほぼ）なく送れるので便利だからだ。 だが、その代わりにPDFの枚数が増えてきた。請求書等の業務用書類も合わせると相当枚数のPDFが毎月増えている。 そんなPDFの増加に伴って必要になるのがPDF管理ソフトウェアだ。 今回紹介するオープンソース・ソフトウェアはShoka、PDF管理ソフトウェアだ。Mac OSX向けにはDMGファイルで提供され、他のプラットフォームにはWeb Start経由で提供されている。 ShokaはPDFを追加すると、日付で区切ってファイルを登録してくれる。いつ頃に作成されたものか分かれば、大体の判別もしやすい。また、サムネイルも登録されるので、表紙だけではあるがどういった内容が書かれているのか開かずに分かるようになっている。 現時点で検索は有効ではないようだ。尚、サムネイル
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
