Primer - GitHub製。みんなで使えるデザインフレームワーク MOONGIFT
企業やプロジェクトによってデザインガイドラインは自ずと必要になってきます。それが社で働くデザイナーの共通認識になる訳ですが、例えばFacebookアプリを作る際にはボタンやデザインをFacebookっぽくしたくなるのではないでしょうか。つまりデザインガイドラインは社内だけでなく社外の人にとっても有益なのです。 そこで登場したのがPrimerです。PrimerはGitHubが作り、使っているデザインガイドラインになります。 Primerの使い方 スクリーンショットを多めで紹介します。まずはグリッド。 ヘッダー。h1〜6まで対応。 テキスト。若干小さめ？ インラインテキストの装飾。 ボタン。ここはGitHubっぽいですね。 ボタングループ。こういうのもGitHubで使われていますよね。 フォーム。シンプルです。 フォームグループ。縦に並べる時に使えます。 メニュー。アイコンはオプションです。
Bootstrap Admin Theme - Bootstrap3に対応した管理画面テンプレート
これは知っておいて損はないでしょう！ Bootstrapの便利な使いどころとして管理画面があります。管理画面は限られた関係者しか使いませんのでBootstrap臭がしても気にすることはありません。それなりの表示がすぐに実現できるのは使い勝手を向上します。 しかしそんな適当な範囲を超えて実用性のある管理画面を実現できるBootstrapテンプレートがBootstrap Admin Themeです。Bootstarp 3系に対応していますので最新のウィジェットもばりばり使えるでしょう。 Bootstrap Admin Themeの主なページとしては、 ログイン ダッシュボード カレンダー グラフ ボタン/アイコン WYSIWYGエディタ フォーム/ウィザード テーブル その他ウィジェット が用意されています。これだけあれば後は組み合わせるだけで（Bootstrap本来の機能も使いつつ）リッチな
favico.js·Faviconを自在にコントロール MOONGIFT
Webカムや動画までFaviconに流しちゃいます！ FaviconはWebサイトのマークとして大事な役割を担っていますが、単に同じ画像をいつまでも表示しているのでは面白みがありません。もっと活用したい、そう考える人に使ってみて欲しいのがfavico.jsです。 できること favico.jsができることはFaviconのダイナミックな変換です。例えば、 バッジ表示 別なアイコンに差し替え 動画の表示 Webカムの表示 ができます。Faviconの中でWebカムを表示したいと思うケースは思いつきませんが、バッジ表示やユーザによってアイコンを変えると言うのは十分ありえるのではないでしょうか。 バッジ表示についてはアニメーションや形を指定することもできます。 デモ バッジ表示。数はダイナミックに変更できます。 数をアップしました。 アイコンの差し替え。 動画の再生。 バッジの表示位置は指定でき
GraphSketcher - グラフを加工してさらに面白く
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ああ、こういう加工は良いかも！ Omniと言えばドロー系ソフトウェアを数多く出している有名な企業ですが、そこから新しい面白いソフトウェアがオープンソース化されました。それがGraphSketcherです。 その名の通りグラフ＋スケッチというソフトウェアなのですが、今ひとつ雰囲気が分かりづらいかと思います。しかしこれが非常に面白い可能性をもったソフトウェアと言えそうです。 例えば適当にペンで書くと、いい感じにポイントを使ってベジュ曲線になります。 そこに文字を書いたり、さらに説明を追加したりできます。 まさにグラフ＋スケッチです。 グラフはフリーハンドで描く他、パレットを使って値を入力もできます。表計算から持ってくる場合はこちらですね。コピー&ペーストでグラフを貼付けることもできます
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 そうすると以
npmd - npmをローカルで管理
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました オフラインでも使えるnpm！ nodeにはnpmと言うパッケージ管理システムがあります。非常に便利な仕組みですが、唯一の欠点があります。それはオンラインでないと使えないということです。 ネットワークがあるのが当たり前な現在ですが、飛行機の中や地下鉄などネットワークが使えない状況はまだまだ存在します。そんな時にもnpmを使って開発を進めたい、そんな人のためのソフトウェアがnpmdです。 使い方としてはまずnpmを使ってインストールします（ちょっとした矛盾を感じますが）。 npm install npmd -g そしてsyncを実行します。 npmd --sync これで準備は完了です。 後はnpmdを使ってインストールを実行します。 npmd install browserify -
70を越えるOAuthプロバイダに対応した認証デーモン·OAuth daemon MOONGIFT
OAuth daemonはnode/JavaScript製のオープンソース・ソフトウェア（GNU Affero General Public License）です。 OAuth.ioはフロントエンドエンジニアにとっては便利なサービスと言えますが、セキュリティ的にはOAuthの概念を覆してしまう問題があります。そこでOAuth.ioのコア部分を取り出してオープンソース化したOAuth daemonを使ってみましょう。 管理画面です。まず最初に管理者アカウントを設定します。 次にアプリケーションを作成します。複数作成が可能です。 ドメインも複数指定できます。 そしてプロバイダごとにキーの設定を行います。 例えばこんな感じです。 Tumblrなどになるとどこに設定を行うべきかのヘルプもあります。分かりやすいです。 クライアントID、シークレットを設定します。 その場で試すことができます。認証ダイ
OAuth認証を一手に行うOAuth.ioのJavaScriptクライアント·oauth-js MOONGIFT
oauth-jsはJavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 ソーシャルなサービスが増えるのに伴ってOAuthプロバイダーはどんどん増えています。OpenIDと違って、同じ仕様で全てがこなせないのが辛いところです。そこで使ってみたいのがOAuthをまとめてくれるOAuth.ioで、さらにそれを簡単にしてくれるのがoauth-jsです。 デモの画面です。70を越えるプロバイダが利用できます。 ポップアップ版による実装です。 ウィンドウが閉じるとデモの画面でトークンが表示できています。 GitHubなどもポップアップにできます。 プロバイダによって多少のデータフォーマットの違いはありますが、概ね同じ形のようです。 oauth-jsを使うとリダイレクト方式とポップアップ方式を簡単に切り替えて使えます。いずれの形にしてもサーバサイド
メールに関連した開発のお供に。Java製ダミーメールサーバ·FakeSMTP MOONGIFT
FakeSMTPはJava製、マルチプラットフォームで使えるダミーのSMTPサーバです。 テスト用にダミーのSMTPサーバが必要になったらFakeSMTPを使ってみましょう。Java製なのでマルチプラットフォームで使えて便利です。 メイン画面です。サービスを開始します。 開始しました。この状態でプログラムからメールを送ってみます。 リストに送信したメールがあがってきます。 ダブルクリックで本文が読めます。 ログです。 最後のメッセージは細かく見られます。 実際のメールアドレスを使って開発していて、間違って一括メール送信してしまったなどといったら目も当てられません。FakeSMTPを立てて決してメール送信されないようにしておけば安全に開発、運用ができるでしょう。 FakeSMTPはJava製のオープンソース・ソフトウェア（BSD License）です。 MOONGIFTはこう見る メール周り
社内で立てられるGistサーバ·Gistub MOONGIFT
GistubはGitHubの提供するGistのクローンです。 GitHubの提供するスニペットサービスのGist。便利に使っている人も多いと思いますが、何となく会社で使うのは控えてしまっている…そんな人も多いでしょう。そこで社内で立てられるGistクローンGistubを使ってみましょう。 パブリックなGist一覧。 ソースコードハイライト付きです。 編集画面です。 編集すると履歴がつきます。 新しいGistの追加画面。 プライベートなGistも作成できます。 Gistubはエディター画面こそ単純なテキストボックスで、ハイライトする言語指定ができないものの他はGistと変わらず普通に使えるようになっています。社内で立ててチームで使ったりするのに良いのではないでしょうか。 GistubはRuby/Ruby on Rails製、MIT Licenseのオープンソース・ソフトウェアです。 MOON
JavaScriptを使ってSVGでグラフを描く·Morris.js MOONGIFT
Morris.jsはjQueryを使ったSVG描画型のグラフライブラリです。 Webブラウザ上でグラフを描画しようと思ったら従来はサーバサイドの仕組みかFlashを使うのが一般的でした。しかし今後はJavaScriptが便利です。Morris.jsはjQueryを使ったグラフライブラリです。 二つのデータがある折れ線グラフ。 棒グラフ。 エリアグラフ。 パイチャート。 今のところ対応しているのは折れ線、棒、エリア、ドーナッツチャートになっています。それぞれ豊富なオプションが用意されています。また、マウスオーバーで値をフローティング表示してくれるのも便利です。データはJavaScriptで与えますが、グラフはSVGで出力される仕組みになっています。 Morris.jsはjQuery/JavaScript製、BSD Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る
Web Fontを使ったソーシャル系サービスアイコン集·OpenWeb Icons MOONGIFT
OpenWeb Iconsはソーシャル系サービスを表現するのに使えそうなWeb Fontです。 文字の横にちょっとしたアイコンを載せるとその意味がぐっと分かりやすくなることがあります。そんな時にはこれまでごく小さなアイコン画像を使うのが一般的でしたが、今回はWeb Fontを使ったOpenWeb Iconsを紹介します。 サンプルです。 実例です。こういう使い方は良いですね。 HTMLでの指定方法です。Bootstrapライクです。 OpenWeb Iconsは現時点で19種類のアイコンが登録されています。EOT/WOFF/TTF/SVGで作成されており、それぞれをCSS上で読み込んで使います。なおBootstrapと組み合わせることで、Bootstrapのアイコンのように指定して使えるようになっています。クラス名に-coloredをつけるとカラーになります。 OpenWeb Iconsは
便利！GitHub Wikiに検索機能を追加するGreasemonkey·Github Wiki Search MOONGIFT
Github Wiki SearchはGitHubのWikiを検索するボックスを追加するGreasemonkeyです。 GitHubでソフトウェアを公開するケースが多くなっています。その中でドキュメントの記述にWikiを使っている方も多いでしょう。しかし記述された内容を検索するのに手間を感じていました。そこで使ってほしいのがGithub Wiki Searchです。 インストールします。 完了です。GitHubのWikiを見てみましょう。 こんな感じで右側に検索ボックスが追加されます。 検索するとインラインで結果が表示されます。これは便利！ Github Wiki SearchはGreasemonkeyであり、Google Chrome/Firefox/Safariで動作します。そのプロジェクトのWikiからだけ検索できるので、必要な情報にすぐにアクセスできます。GitHub標準の機能にし
JavaScriptを使ってExifデータを読み取る·exif.js MOONGIFT
exif.jsはJavaScriptを使って写真のExifデータを読み取るライブラリです。 スマートフォンの普及によって写真データをオンライン上に扱うケースが増えています。そんな写真のメタデータであるExifをJavaScriptで扱ってしまおうというのがexif.jsです。 サンプルです。写真を指定するとそのExifから位置情報を読み取ってGoogleマップにマーカーを立てています。 コードです。FileReaderでデータを読み取った上で解析しています。 exif.jsは位置情報のみならずホワイトポイントやフラッシュ、シャッタースピードなどExifで取得できるデータが網羅されています。これだけのデータが取れれば、面白い使い方が考えられそうです。 exif.jsはJavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 MOONGIFT
Bootstrapを使おう！様々なカラーテーマ、プラグインを用意·Kickstrap MOONGIFT
KickstrapはBootstrapをベースにしたテーマ、プラグインを提供するソフトウェアです。 最近作られるWebサービスでよく使われているBootstrap。そんなBootstrapは固定色でそれっぽさが感じられてしまうのが欠点でしたが、見事に打ち消してくれるのがKickstrapです。 色が変わると随分印象が違います。 テーマ機能があります。 青と白。 こんな感じのシンプルなテーマも。 逆にカラフルなものもあります。 基本は同じですが、印象は違いますね。 好みのテーマを選べます。 JavaScriptプラグインがデフォルトよりもぐっと増えています。 Kickstrapを使えばBootstrapをより便利に使えるでしょう。JavaScriptプラグインも通知機能をはじめ、色々なものが追加されていますのでWebサイトをより強力にパワーアップできるはずです。 KickstrapはHTML
Webブラウザ上で使える埋め込み型Markdownエディタ·EpicEditor MOONGIFT
EpicEditorはテキストエリア内でプレビューできるWebベースのMarkdownエディターです。 エンジニア向けを中心にMarkdown記法を使ったWebサイトが増えてきました。そこでより入力をしやすくしてくれるWebエディター、EpicEditorを紹介します。 デモです。この黒いテキストエリアがエディター部になります。 エディター部の右下にある×ボタンを押すとエディターとプレビューを切り替えられます。 リストなどMarkdown記法は問題なく利用できます。 フルスクリーンモードにすると左右にエディタ、プレビューが表示されるモードになります。 画面の横幅が広いと使いやすいです。 EpicEditorはプレビューが入力部と一緒というのがユニークです。またフルスクリーンモードにすれば左右でリアルタイムプレビューができるようになるので、より書きやすくなりそうです。オプションも多数用意され
滑らかに自然なページ送りができるJavaScriptライブラリ·turn.js MOONGIFT
turn.jsはタブレットやスマートフォンで使えるWeb向けのページ送りライブラリです。 turn.jsはリアルなページ送りができるWebベースのソフトウェアです。ハードウェアアクセラレーションを使い、滑らかに動きます。 四隅にマウスを持っていくと小さくカールします。ここをドラッグして引っ張ります。 ページをめくります。何となく海外のページの薄い雑誌をめくっているような感じです。 それ以外にもページの端にマウスを持っていくと矢印が出ますので、これをクリックしてもページめくりされます。 右から左の他、逆に左から右へもめくれます。 デモ動画です。 この手のライブラリは幾つかありますが、turn.jsは水平にページがカールするだけではなく、実際の雑誌のように斜めにカールしてページ送りできるのが特徴と言えます。ただ、その雰囲気がTime誌のような作りでちょっとペラペラな感じになってしまうのが残念で
jQueryで作られた本格的表計算ソフトウェア「jQuery.sheet」 - MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ
jQuery.sheetはjQueryで作られたWebベースの表計算ソフトウェアです。 業務システムなどではWeb上にテーブルを表示するというケースがよくあります。さらに一歩進んで表計算のように集計したり並び替えたりしたいという無茶な要望が出るかも知れません。そんな時に使ってみたいのがjQuery.sheetです。jQuery製の表計算ソフトウェアです。 カラムはもちろん、グラフの表示までできてしまう本格的な表計算ソフトウェアです。 最大化表示。セルの値を参照することもできます。 テキストだけではなくラジオボタン等も使えます。 関数も多彩に用意されています。 編集しているところ。 文字装飾を変更します。メニューから選択できます。 HYPERLINKはその名の通りリンクを埋め込みます。 データにはHTML/XML/JSONが使えます。エクスポートも各フォーマット向けに可能です。 JavaSc
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
