Minio - Amazon S3互換のオブジェクトストレージ
Web上で手軽に使えるストレージシステムと言えばAmazon S3ですが、AWSを組み合わせていない時には転送料金が気になるかも知れません。さらに自社独自のカスタマイズをしたいと思うこともあるでしょう。 S3並の柔軟性と独自のカスタマイズを組み合わせたいと思ったら使ってみたいのがMinioです。S3互換のAPIを持ったオブジェクトストレージです。 Minioの使い方 Webブラウザ向けに管理画面が提供されています。 最初にバケットを作る必要があります。 後は自由にファイルをアップロードできます。 シェア（有効期限も）は簡単です。 MinioはS3互換のAPIを提供しているので標準ライブラリであるaws-cliと組み合わせて使うこともできます。もちろん一部の機能は実装されていませんが、データを保存しておく、HTTP経由でアクセスするといった使い方であれば十分でしょう。 MinioはGo製のオ
Lepton - JPEGをロスレスで約22%軽減
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ファイルサイズが小さいのは良いことです。特にスマートフォンなどのモバイルネットワークであったり、弱いWiFiなどでもサービスが快適に使えるかどうかは大きな問題になります。 そこでDropboxが開発しているのがLeptonです。ロスレスでJPEGを22%程度サイズ軽減させるソフトウェアです。 Leptonの使い方 元ファイルが3,680KBで、2,943KB程度に軽減されます（79%になっています）。どれくらい強力に行うかによって3つ程度プログラムがあります。 Leptonは可逆実行が可能で、.lepファイルを対象に実行することで元のJPEGファイルが取得できます。つまりDropboxであればサーバとクライアント間、さらにサーバでの保存時にLeptonを使うことで写真のストレージや
Cropper - スマートフォンにも対応した画像切り抜きライブラリ MOONGIFT
スマートフォンやデジカメで撮影した写真は横長、または縦長です。それに対してWebサービスのプロフィールに使う画像は大抵正方形ではないでしょうか。そんな写真を自動で加工すると顔の一部が削れてしまう可能性があります。 そこでユーザ自身の手で切り抜きしてもらうのが一番です。今回はスマートフォンにも対応したCropperを紹介します。 Cropperの使い方 Cropperのデモ画面です。左側の画像が元画像、切り抜いた時の各サイズの画像が右に並んでいます。 もちろん切り抜き部分のサイズ、位置は自由に変えられます。 クロップした画像。 画像サイズも指定できます。 スマートフォンでも動きます。 ハンドル部分もスムーズにつかめます。 Cropperを使えばユーザに自分の写真をアップしてもらった後、そのまますぐに切り抜き加工を行えるようになります。かつ切り抜いた画像をサーバに送れるので、サーバ側では画像ラ
jQuery editTable - その場で編集できるテーブルを生成するjQueryライブラリ MOONGIFT
Webベースの業務システムを作っていると度々データを一覧で表示する機会があります。そんな中で度々あがってくるのが一覧の時点でデータ編集したいという要望です。 In place editのような仕組みを使って作り込んでも良いですが、専用の仕組みを使った方がユーザビリティ高くできるはずです。そこで使ってみたいのがjQuery editTableになります。 最初の表示です。適当にセルをクリックします。 そうするとその場で編集可能になります。 行の追加もできます。 ポストすると各行ごとにデータが入ってくるのが分かります。 Ajaxの場合もJSONの配列で受け取れます。 日付選択に際してカレンダーピッカーを使うこともできます。 行の追加できる数を制限した場合。3行追加した時点でボタンが押せなくなります。 jQuery editTableの使い方は以下のようになります。 var mytable =
ECharts - 多種多様な表現に対応したグラフ/チャートライブラリ MOONGIFT
Webは表現力がそれほど高くないのが常に問題視されています。特に業務系システムではグラフ/チャートを使ってデータを可視化する必要があります。最近ではビッグデータが話題にあがっており、大量のデータを効率的に描画しなければならなくなっています。 そこでEChartsを紹介します。ビッグデータモードまで用意された多種多様なパターンの用意されたチャートライブラリです。 EChartsの使い方 今回はその多様なグラフ、チャートを紹介します。 曲線のグラフ。 積み上げグラフ。 棒グラフ。 エリアグラフ。 曲線。かなり複雑です。 こちらもユニークです。途中で途切れています。 棒グラフですが、範囲が指定できています。 左右の比較グラフ。 複数グループの棒グラフ。 散布図。 こちらも散布図。 画像も合わせた表示。 散布図と色の組み合わせ。 ローソクチャート。 円グラフ。 より描画にこだわった円グラフ。 レー
Materialize - マテリアルデザインのためのCSSフレームワーク MOONGIFT
レスポンシブでWebデザインを組むのは当たり前、今のトレンドはマテリアルデザインにあるという時代になってきました。フラットUIを踏襲しつつ、アニメーションを効果的に使うことでさらにユーザビリティ高いデザインを可能にします。 主にモバイルアプリ用に使われていますが、Webデザインにおいても十分利用が可能です。今回はマテリアルデザインを実現するスタイルシートフレームワーク、Materializeを紹介します。 Materializeの使い方 今回はスクリーンショット多めに紹介します。 Materializeはレスポンシブかつマテリアルデザインのフレームワークになっています。開発の高速化、ユーザ体験重視、ドキュメントとサンプルを多めにして学習コストを低くするといった特徴があります。 MaterializeはHTML5/JavaScript/CSS3製のオープンソース・ソフトウェア（MIT Lic
UnCSS·使っていないスタイル設定を探してスタイルシートをリファクタリングしよう！ MOONGIFT
プログラマーにとって過去のコードに手を加えていくことで負の資産を生み出すように、デザイナーにとってもスタイルシートの度重なる修正は負の資産を生み出していきます。その結果、全体のバランスが崩れたり、リファクタリングもできずに破綻したりします。 スタイルシートの場合、プログラミングのようにUnit Testを書いてリファクタリングしたりできないのが難点です。そこで使ってみたいのがuncss、利用していないスタイルシート設定を洗い出してくれるソフトウェアです。 UnCSSのインストール インストールはnpmコマンドでできます。 npm install -g uncss ヘルプです。ファイルまたはURLを渡します。 $ uncss --help Usage: uncss [options] <file or url, ...> e.g. uncss http://getbootstrap.com/
AdminLTE·ここまで多ければ何でもできそう。多機能なBootstrapベースの管理画面テンプレート MOONGIFT
これで十分でしょ！ Bootstrapで作る管理画面は相当増えてきているようです。確かに一般ユーザ向けに提供するとBootstrap臭が出てしまいますが、管理画面であれば問題はないですよね。 ということで今回は新しいBootstrap製の管理画面テンプレートAdminLTEを紹介します。高度なウィジェットが数多く提供されていますので使い勝手良さそうですよ。 AdminLTEの画面 今回もスクリーンショット多めで紹介します。 ダッシュボード。この時点でかなりリッチ。 ボックス。これだけ多彩なパターンがあると言うのも凄いですね。 左端にはちょっとした設定を表示させています。 背景色を変えるだけでも随分印象が違います。 グラフ。 こちらもグラフ。 外部ライブラリもそつなく使いこなしています。 スパークラインも！ アラート。ちょっと飛び出しているのがいい感じです。 アイコン。 ボタン。フラット系で
WOW.js - JavaScript/CSS3でスクロール連動型アニメーション MOONGIFT
最近Webサイトでアニメーションしながら表示される所が増えています。かといってかつてあったFlashのようにスプラッシュ的なものではなく、表示構成要素がさりげなくアニメーションしながら配置されていくといった感じです。 それはCSS3のアニメーションで作られているのですが、スクロールと組み合わせて容易に実現してくれるのがWOW.jsです。 何はともあれ動画を見てもらうのが良いと思います。 犬や猫のアイコンがアニメーションしながら表示されていきます。スクロールの感知はJavaScriptで行っていますが、実際のアニメーションはCSSアニメーションによるものです。 実用的にどうなの、と思ったのですが以下のサイト（利用例）を見るとかなりいけてることが分かります。 さりげないアニメーションで表示されます。 1640 iOS7 Icons for designers & Developers | St
Bootstrap Admin Theme - Bootstrap3に対応した管理画面テンプレート
これは知っておいて損はないでしょう！ Bootstrapの便利な使いどころとして管理画面があります。管理画面は限られた関係者しか使いませんのでBootstrap臭がしても気にすることはありません。それなりの表示がすぐに実現できるのは使い勝手を向上します。 しかしそんな適当な範囲を超えて実用性のある管理画面を実現できるBootstrapテンプレートがBootstrap Admin Themeです。Bootstarp 3系に対応していますので最新のウィジェットもばりばり使えるでしょう。 Bootstrap Admin Themeの主なページとしては、 ログイン ダッシュボード カレンダー グラフ ボタン/アイコン WYSIWYGエディタ フォーム/ウィザード テーブル その他ウィジェット が用意されています。これだけあれば後は組み合わせるだけで（Bootstrap本来の機能も使いつつ）リッチな
bookShop - HTML/PDF/ePub/Mobiまでこなす電子書籍ジェネレータ MOONGIFT
これは使い勝手良さそう！ 2014年は電子書籍が大いに羽ばたく年になるかも知れません。デバイスは各種揃い、そのためのハードウェア的土壌は整ってきました。サービスも数多く存在し、足りないのはコンテンツです。もっと誰でも簡単に電子書籍を作れる仕組みが必要でしょう。 特にePubを作るのは面倒なイメージがあります。そこで使ってみて欲しいのがbookShop、電子書籍作成フレームワークです。 bookShopはこれ一つでHTML/PDF/ePub/Mobiファイルの作成ができます。基本はHTML5で、PDFの場合はPrinceXMLを使って生成します。 インストールと準備 インストールは簡単でRubygemsを使って行えます。 $ gem install bookshop インストールが終わったら電子書籍プロジェクトを作成します。 $ bookshop new my_new_book そうすると以
ownCloud·クラウドが使えない職場、なら自前で立てるのはいかが？ MOONGIFT
うお、もの凄い勢いで進化しています！ 今はクラウド全盛の時代です。Dropboxでローカルデータをクラウド上に保存し、Google Appsでメールやスケジュールを管理し、さらにiCloudでスマートフォンやタブレットのデータをバックアップする。そんな中心配になるのは自分のデータがちゃんとセキュアに保存されているのかということでしょう。 企業においてはセキュリティ基準からクラウドサービスを安易に導入できないケースもあります。そこで使ってみたいのが自前で立てられるクラウドサーバ、ownCloudです。 元々ファイルストレージがメイン機能だった覚えがあるのですがバージョン6になって実に多彩な機能を備えるようになっています。順番に見ていきましょう。 ファイル管理 まずはファイル管理。ここではローカルのファイルを同期してクラウド上からの閲覧、ダウンロードできるようになっています。 写真はownCl
jQuery.iviewer - 画像を拡大縮小、回転もできるjQuery製ビューワー MOONGIFT
Googleマップをはじめて見た時の感動は覚えているでしょうか。JavaScriptだけでスムーズに拡大や縮小ができて、さらにマウスでドラッグまでできてしまうユーザビリティの高さに驚きました。 その簡易版とも言える操作を画像に追加してくれるライブラリがjQuery.iviewerです。写真のギャラリーなどに使ってみると面白いのではないかと思います。 サンプルです。画像の上下にツールバーがあります。 プラスボタンを押せば拡大されます。 回転もサポートされています。 縮小もできます。 ここまでは画像の表示に関するデモでした。さらにこんなサンプルもあります。 画像を表示しているのはこれまでと同じです。 リンクで選択したオブジェクトに矢印が追加されます。 それが画像の縮小、拡大に関わらず表示されるのが面白い点です。 jQuery.iviewerでは予め指定したオブジェクトに対して拡大、縮小の相対位
Web上でZipファイルの読み書き·zip.js MOONGIFT
zip.jsはWebブラウザ上でZipファイルを作成したり、読み取ったりするライブラリです。 Web上でZipファイルを作成したり、内容を読み込んだりするのに使えるのがzip.jsです。ファイルの送受信で使えそうです。 メイン画面です。まずファイルをアップロードします。 ファイルを追加しました。自動でアップロードが開始します。 4つファイルを登録しました。ダウンロードボタンを押すとZipファイルがダウンロードできます。 こちらは逆にZipファイルを読み込みます。ファイル構造を読み取れます。 中身のファイルをダウンロードできます。 Zipマネージャです。ファイル構成を見たり、ファイルの追加ができます。 ディレクトリを追加したりできます。 zip.jsはZipファイルの作成や読み込みはもちろん、その内容を変更することもできます。Webアプリケーションで威力を発揮しそうです。Web worker
試してみよう。背景の要素を自然にぼかす·Vague.js MOONGIFT
Vague.jsはJavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 iOS 7が登場した直後に一気に注目を集め始めたのが背景をぼかす表現ではないでしょうか。類似のライブラリは幾つかあると思いますが、今回はVague.jsを紹介します。 一例。メインの画像以外はぼかしています。 画像を切り替えることもできます。アルバムに良さそうです。 こちらは中央以外がぼやけています。 こんな感じの表現も可能です。 Vague.jsでは擬似的ではなく、Webページの上に一枚重ねてぼかし表現を加えています。そのため若干重たい気がしますが、画像だけでなくテキストもぼかされるのでより正確な表現ができるようになっています。 iOS 7のレイヤーの重なり具合を表現するUIは新鮮ですが、自然なパララックスはとても難しいです。そこに大きな需要があるのではないかと
SVGをもっと活用するために使いたい·svg.js MOONGIFT
svg.jsはアニメーションやイベント駆動型のSVGを実現するライブラリです。 SVGはまだ広く利用されているとは言いがたいですが、ビットマップではなくベクターデータなので拡大してもきれいなど特徴が多数あります。今回紹介するsvg.jsはSVGを使ったアニメーションを実現するライブラリになります。 デモです。単純なオブジェクトの生成、移動、中央寄せが簡単に指定できます。 クローンして重ね合わせ。重心の判定、傾けるのも手軽です。 X軸、Y軸のずらし。塗りつぶし。 枠だけを描く、グラデーション（線形、円形）。 クリック、マウスオーバー、画像マスクもできます。 クリックしたオブジェクトだけ色を変更します。 さらにアニメーションも自在に。 プラグインによる拡張もサポート。 svg.jsを使えばアニメーションはもちろんのこと、画像を重ねて表示したり、マウスイベントによって形状や色を変更したりすること
iOSアプリのデザインをスタイルシートで行う凄い技術·Pixate MOONGIFT
PixateはMac OSX用のソフトウェアです。 iOSアプリのデザインはXcodeを使って行うのが一般的です。しかしWebデザイナーや開発者にとっては思い通りにいかなくてやきもきするときがあるかも知れません。そこで注目したいのがPixateです。何とスタイルシートと同じ記述で画面を作成できます。増資し、フリーになりました。 ボタンのデザイン。確かにスタイルシート調です。 記述を変えればダイナミックに描画が変わるのも特徴です。 SVGの表示も行えます。 さらにタップすると線だけに。 こちらはプレイグラウンド。様々な表示例があります。 ラベル。テキストエリアの部分は変更できます。 こんな感じにダイナミックに文字サイズを変更できます。 地図のポインター部分の大きさを変更。 本当に数多くのデモがあります。 検索ボックス。 セクション付きのテーブルビュー。 様々なテキストビュー。 Pixateは
面白い！自分のサイトに高度な画像編集機能を提供する·jquery.deviantartmuro MOONGIFT
jquery.deviantartmuroはWeb画像編集サービスのdeviantART muroを埋め込みサービスとして呼び出すjQueryプラグインです。 Webブラウザ上でできることは多岐に渡る訳ですが、ペイントですらWebベースで行う時代になっています。その高機能ペイントサービスとして知られるdeviantART muroを自分のWebサイトに埋め込んで使えるのがjquery.deviantartmuroです。 この画像を自由に編集できます。 もはや普通のペイントアプリです。 レイヤーにも対応。 エクスポートできます。 拡大も可能。 囲い込みでの範囲指定も。これがWebアプリケーションとはすごい時代になったものです。 jquery.deviantartmuroはペイントソフトウェアとしての機能を提供する訳ではなく、あくまでもdeviantART muroの機能を埋め込みで提供してい
Androidアプリを開発する際のベースにどうぞ！·Android Bootstrap MOONGIFT
Android Bootstrapは多彩な機能が実装されたAndroidアプリ開発ベースです。 Webサービス開発時においてBootstrapが活躍しています。そういったベースがあると開発がとてもスムーズになるのではないでしょうか。そこで今回はAndroid Bootstrap、Androidアプリ開発のベースを紹介します。 ログイン画面。 ユーザ一覧。 ニュース。 タイトルをタップすると記事詳細が表示されます。 チェックイン。 タップすると地図が表示されます。 メニューはログアウトのみ。 紹介動画です。 Android Bootstrapはフラグメント、ページャー、アカウント管理などの実装に加え、Android Mavenプラグイン、RoboGuice 2、ActionBarSherlock 4、ViewPagerIndicator、http-request、GSON、Robotiumと
その場でデータを編集。BootstrapやjQuery UIに対応した·X-editable MOONGIFT
X-editableはBoostrapやjQuery/jQuery UIで使えるIn-place Editorです。 表示されている内容を編集する際にその場ですぐに編集できるようにするのがIn-place Editorです。それをBootstrap、jQuery UIなどに対応させたのがX-editableになります。 こんな感じでポップアップで編集できます。 エラー表示にも対応。 カレンダーでの入力。 選択式も可能です。 インラインで編集もできます。 こちらはjQuery UI版。 この場合も選択式などが使えます。 X-editableは単純な文字列入力の他に、選択やテキストエリアでの入力にも対応しています。入力チェックも可能で、エラーの際にそのまま表示を残せます。純粋なjQueryにも対応しているのでWebサービスに組み込んでみるのはいかがでしょう。 X-editableはJavaSc
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
