)
textFit - 枠に合わせてテキストを最大表示
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webの表現力は高く、ウィンドウの幅によってテキストの行数が変わってしまったりします。その結果、デザイナーの意図した表示にならないことも多く、かといって固定サイズにすると閲覧者にストレスを与えることにもなりかねません。 そこで使ってみたいのがtextFitです。テキストを枠の中に収まる形で最適化してくれるライブラリです。 textFitの使い方 利用例です。徐々にサイズが変わって、最終的に枠いっぱいに表示されているのが分かります。 文字のスペース、行の高さ、フォントなどもカスタマイズできます。 textFitを使うことで、枠の大きさに合わせた最大サイズの表示を簡単に実現できます。textFitは分かりやすいように段階的になっていますが、通常使う限りは一瞬で調整されるでしょう。ウィン
)
konstellate - Kubernetesの設定をビジュアル化
Kubernetes（以下k8s）は設定ファイルを記述してアーキテクチャを指定しますが、慣れるまでは設定が抜けてしまったり、うまくリンクできなかったりします。さらに設定が複雑化すると、全体を俯瞰的に確認したいと思うことでしょう。 そこで使ってみたいのがkonstellateです。k8sの設定内容をビジュアル化します。 konstellateの使い方 設定ファイルを読み込んだところです。各コンテナが丸で表されて、線でコネクションを表現します。 丸をクリックすると、その内容が分かります。 テキストベースの設定を確認、編集できます。 konstellateを使えばk8sの設定を可視化しながら行えます。すでにある設定ファイルを可視化するのはもちろん、新しく作ることもできます。k8sの設定を行う際にぜひ使ってみたいソフトウェアです。 konstellateはClojure製のオープンソース・ソフトウ
Fusuma - Markdownを使ったHTMLスライド
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました HTMLでスライドを作る場合、アニメーションやロゴの配置ではなく、コンテンツに集中して作れます。さらに記法がMarkdownであればスライドを作るのが苦手な人であっても問題ありません。さくさくと作れるでしょう。 今回は新しいHTMLスライドのFusumaを紹介します。便利な機能がたくさん詰まっています。 Fusumaの使い方 デモスライドです。 特に良いのがプレゼンテーションモードです。 目次を出す機能もあります。 ターミナル、コードの表示も綺麗です。 メニューです。目次でジャンプもできます。 この手のソフトウェアは幾つもありますが、プレゼンテーションAPIに対応しているものは意外と多くありません。Fusumaを使えばコンテンツはMarkdownでさくさくと、プレゼンテーションモー
Tabulator - これはすごい。HTMLテーブルを高機能に MOONGIFT
テーブル表示はWebシステムのデファクトとも言えます。業務システムはいうに及ばず、管理者画面などでも必ず求められる表示です。そしてただ表示すればいいという訳ではなく、ソートやフィルタリング、インラインでの編集など様々な機能が求められるものです。 そんな多機能なテーブル表示を実現してくれるのがTabulatorです。多くのニーズを満たしてくれることでしょう。 Tabulatorの使い方 てんこ盛りなデモテーブル。ざっと見てもフィルタ、ページネーション、グラフ表示、ソートなどの機能が確認できます。 インライン編集もサポートされています。 データに合わせて幅を自動調整。 行をクリックして展開する機能。 カラムをグループ化。 カラムを縦に。これはカラムが多い時に便利そうです。 ドリルダウン。 テーブルを入れ子にもできます。 スパークライン表示。 フッターで集計。 HTMLテーブルを変換する機能もあ
Loaders Kit - CSS3で作るローディングアイコン
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました WebアプリケーションはAjaxを多用するので処理状態を分かりやすくためローディングアイコンを使うと良いでしょう。通常その手のリソースにはアニメーションGIFが使われますが、色やサイズを変えたいと思う度に素材を作らないといけないのは不便です。 そこで新しいローディングアイコンを提供してくれるのがLoaders Kitです。なんとCSS3を使って多彩なローディングアイコンを提供しています。 画像では分かりづらいので動画にて。 実際の使い方ですが、例えば左上のタイマーの場合は次のようなスタイルシートになっています。 /* Timer*/ .timer{ width: 24px; height: 24px; background-color: transparent; box-shado
GetShares·Webサイトにカスタマイズ可能なシェアボタンを配置しよう MOONGIFT
今のWebマーケティングにおいてソーシャル拡散は欠かせません。そこでまずは各サービスにおいてどれくらいシェアされているのかを知るのが大事です。ソーシャルボタンを単に配置するだけでは全く自分のためにはならないデータにしかならないでしょう。 多数のソーシャル系サービスがある中で全てに対応するのは難しいですが、GetSharesを使えば手軽に実現できます。ぜひ使い方を覚えて欲しいソフトウェアです。 シェア数を知る まず特定のURLに対するシェア数を知る方法です。GetSharesを開くとこのような画面になります。 メイン画面です。ここで任意のURLを指定します。 そうするとそのURLが各サービスでどれくらいシェアされているか分かります。 これが最も簡単な使い方です。 さらに自分でカスタマイズして設置もできます。日本のサービス、自分たちのサービスには不要なものもあるでしょうから、特定のサービスを指
jquery.adaptive-backgrounds.js·背景色を写真に合わせて変化させる MOONGIFT
最近のWebデザインのキーワードの一つにアダプティブデザインというのがあります。アダプティブとは適応性を意味する言葉で、単純に言うとデバイスではなく周囲の環境やそのターゲットに向けて最適化された情報を配信しましょうと言ったような概念になるようです。 確かにデスクトップとスマートフォンでは求めている情報が違ったり、その利用シーンによって求める情報が変わってもおかしくはありません。そんなアダプティブの一例としてjquery.adaptive-backgrounds.jsを紹介します。 デモ。緑系の写真の背景は同じくグリーン系に。 黄色系の場合は黄色に。 同じく赤系。 jquery.adaptive-backgrounds.jsの使いどころとしてはCGM系があるかと思います。予め決められた写真を出すのであればあえて背景をダイナミックに変更する意味はありませんので、ユーザをはじめ任意にアップロード
UIImageView-BetterFace·写真表示アプリに。人をいい感じに表示してくれるiPhone用ライブラリ MOONGIFT
あらこれ素敵。 写真のサムネイル表示をするのは意外と悩ましい問題があります。単純に小さくしてしまうと細かい部分が分かりづらく、インパクトが薄くなります。しかし切り抜くような表示すると最もインパクトがある部分が切り抜かれてしまったりします。 人が写っている写真において一番大事なのは人の顔であるのは当たり前なことです。そこでUIImageView-BetterFaceでは顔のある場所をメインとして写真を切り抜き表示してくれます。 サンプルの写真です。左側が単純にアスペクト比を変えただけ。右側がUIImageView-BetterFaceによる表示です。人物が大きく表示されます サンプル二つ目。 この左側の写真では顔が認識されませんでした。顔が大きく写っていないと失敗するようです。 横向きの写真でも適切に配置されます。 中央に寄っています。いい感じですね。 複数の人物でも使えます。 複数人物でさ
Free PixelKit Bootstrap UI Kits - Bootstrapを一変させるフラットUIテーマ
Bootstrapは良いのだけれど、Bootstrapっぽさが如実に感じられるのが嫌だなぁと思っているプログラマーの方は多いはず。そこで使ってみて欲しいのがFree PixelKit Bootstrap UI Kitsです。フラットなUIでがらっと雰囲気を変えてくれること請け合いです！ 見てもらうのが一番だと思うので、まずはデモサイトから。 ということで実際に細かな部品を紹介していきたいと思います。 ベースはBootstrapながら、雰囲気が一変しているのでどこにもらしさを感じさせません。この辺りのカスタマイズ性の高さがBootstrapの良さなのかも知れませんが、全体を統一してデザインするのは相当大変な労力であろうと思われます。なお一部の部品はjQueryやjQueryプラグインを利用しています。 しかしBootstrapで制作しておけば後々流行が変わったとしてもそのテーマを取り入れてサ
手軽にスムーズなスクロールを実現·AnimateScroll MOONGIFT
AnimateScrollはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 Webページは縦長になりがちです。そこで使われるのが自動スクロールですが、一気に飛んでしまうとユーザのストレスになるのでスムーズなスクロールが求められます。そこで今回はAnimateScrollを紹介します。 AnimateScrollでは3つのパターンのスクロール法が利用できます。詳細は動画をご覧ください。 実際にはもっと滑らかなのでぜひ実際に試してみてください。 よくあるのは素早く移動して目的の場所近くになると減速して止まるというものかと思います。AnimateScrollではさらに一旦行き過ぎてからバウンドするなど細かくカスタマイズされた動きを実現しています。面白いスクロールです。 MOONGIFTはこう見る 画面が切り替わったり、目にしている情報が一気に変
Apple公式のやり方を真似る。確認を必要とするボタン操作に使える·MAConfirmButton MOONGIFT
MAConfirmButtonはAppleのApp Storeアプリなどで使われている確認がある購入ボタンを再現するUIコンポーネント。 MAConfirmButtonはiOS用のオープンソース・ソフトウェア。iOSアプリ開発においてApple提供の公式アプリのUIを真似るのはとても良いことだ。公式アプリは利用者が多いので、他のアプリで同様の操作を提供してもすぐに使いこなしてくれるはずだ。 App Storeでよく見るボタン さらにAppleの手法はデザインとユーザビリティを考えた、とてもユニークな作りになっている。その一つ、アプリや音楽購入時のボタン操作を再現するのがMAConfirmButtonだ。 MAConfirmButtonはApp Storeアプリ等で使われている、購入時の確認ボタンを再現するUIコンポーネントだ。ボタンを一回タップすると別なメッセージを出し、さらにクリックする
レガシーなWebブラウザを救済。CanvasをHTML5で描画·FlashCanvas MOONGIFT
FlashCanvasはCanvasタグをFlashを使って描画するライブラリです。 HTML5の仕様に入っているCanvasですが、便利な機能である反面レガシなーブラウザに対応できないために利用を躊躇してしまっている人も多いのではないかと思います。そこで使ってみて欲しいのがFlashCanvasです。 Flotのグラフを表示した例。 多彩なグラフをFlash上に描画できます。 マウスに追従させることもできます。 ワープのような表示。 より複雑な描画を行うデモ。 FlashCanvasはCanvasタグをFlashを使って描画します。現在、Canvasタグのテストに対して72〜78%合格となっています。Google Chrome9.xが87.4%、Firefox3.6が74%なので簡易的な描画であれば十分耐えられるレベルと言えそうです。 FlashCanvasはFlash製、MIT Lic
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と
ブラウザキャッシュではなくローカルストレージを使ったキャッシュシステム·basket.js MOONGIFT
basket.jsはローカルストレージにJavaScriptをキャッシュして高速化をはかるソフトウェアです。 Webの高速化を語る上でキャッシュの存在は欠かせません。そこで使ってみたいのがbasket.jsです。何とHTML5のローカルストレージを使ってキャッシュする仕組みを提供します。 最初の実行。underscore.jsなどが読み込まれています。2回目以降は消えます。 でもちゃんとjQueryオブジェクトは存在します。 basket.requireメソッドを使って対象ファイルを読み込みます。有効期限を設定することも可能です。読み込み失敗をハンドリングすることもできます。普段はそのまま利用でき、remove()やclear()でファイルを解除できます。 basket.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る ロ
タグ入力はこれにお任せ！·jQuery TextExt MOONGIFT
jQuery TextExtは自動補完をはじめとする便利な機能が多いタグ入力ライブラリです。 タグ入力機能を持ったWebサービスは多いですが、入力しやすいものは多くありません。そこで使ってみたいのがjQuery TextExtです。 こんな感じでタグ入力ができます。×ボタンを押せば消えます。 他の入力から追加もできます。 自動補完。 入力した値は配列で受け取れます。 自動補完のカスタマイズも可能です。 削除だけでなく、値の変更もできます。 予め入力された状態にもできます。 タグ入力で必須とも言える入力補完や入力後の表示変更、placeholder、×ボタンによるキャンセルなど必要な機能は概ね押さえてあります。デザインを自分のサイト向けにアレンジすればすぐに使えそうです。 jQuery TextExtはjQuery/JavaScript製、MIT Licenseのオープンソース・ソフトウェア
画像のサムネイル表示にも対応したWebブラウザへのD&Dアップロードライブラリ·Dropzone MOONGIFT
Dropzoneはファイルのドラッグ&ドロップによるファイルアップロードを可能にするJavaScriptライブラリです。 Gmailではじめ（恐らく）見て以来、様々な場面で見られるようになったWebブラウザへのファイルのドラッグ&ドロップでのアップロード機能ですが、より手軽に扱えるようにしてくれるライブラリがDropzoneです。 トップページです。 ファイルをドロップしました。画像はサムネイルが表示されます。 画像をアップロード中。平行して実行されます。 ファイルをドロップすると自動的にアップロードを開始してくれます。ドロップしたりアップロードが完了したりしたタイミングでイベントを実行したり、最大ファイルサイズ指定やサムネイルの表示設定など細かなカスタマイズができるようになっています。 DropzoneはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。
オブジェクトのドラッグ移動を実現するJavaScriptライブラリ·Pep MOONGIFT
Pepはデスクトップ/スマートフォンの両方で動作するドラッグライブラリです。 ゲームなどでWebブラウザ上のオブジェクトをドラッグアンドドロップしたりする操作はよくありますが、その操作をデスクトップとモバイル両方に対応させたのがPepです。 使い方は簡単でDOMに対してpep()を実行するだけ。 ドラッグで移動させられます。 枠の中だけでの移動もその逆もできます。 コールバック対応です。 スライダーを動かすと大きさが変わるデモ。 X軸、Y軸を固定にすることもできます。 こちらはiPhoneで試した所。動きに慣性があるのが特徴です。 Webブラウザ上のオブジェクトを動かすという操作は通常のWebサイトではあまりない動作なので面白いです。またデスクトップとスマートフォン両方に対応しているので使い勝手が良いのではないでしょうか。 PepはJavaScript製、MIT Licenseのオープンソ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
)
a2hs.js - iOSでもAdd to Home Screen MOONGIFT)
ken-burns-slideshow - ケン・バーンズ効果を実現できるWebコンポーネント MOONGIFT)
OpenInTerminal - 今開いているディレクトリでターミナルを開く MOONGIFT