reg-cli - 二つの画像で異なる部分を抽出
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 間違い探しは好きでしょうか。好きか嫌いかに関わらず、仕事をしていると時に2つのデータを見比べなければならないことが何度もあります。穴が空くほど見つめても違いが見つからないのですが、他の人に聞くとあっという間に見つかったりします。見ている視点がほんの少しだけずれているのです。 そんな二つのデータの比較をさくっと行ってくれるのがreg-cliになります。 reg-cliの使い方 reg-cliは基本はCLIで実行しますが、レポートはHTMLで出力します。なお画像のパス生成部分に問題があります。 実行結果です。どこが違うのか一目瞭然ですね。画像は間違い探し - Wikipediaより。 画像の比較になるので、画像はPNGやGIF、BMPなど劣化しないフォーマットのものを使う必要があるでし
php-contact-form - PHP製のシンプルなお問い合わせフォーム
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 静的サイトジェネレータが人気ですが、それでも幾つかの機能においてはサーバサイドの仕組みが欲しいこともがあります。その一つがお問い合わせフォームではないでしょうか。しかしそのために全体をシステム化するのは面倒です。 そこでお問い合わせフォームだけ設置しましょう。そのためには特定の用途だけで使えるものが便利です。今回は日本製のphp-contact-formを紹介します。 php-contact-formの使い方 php-contact-formはBootstrapを使っていますのでUIは比較的簡単に変更できます。 確認画面付きです。 お問い合わせを送信しました。 問い合わせした人に対して確認メールも出ます。 もちろん運営側にもメールがきます。 php-contact-formはPHP
schedulerjs - スケジュール調整に使えそうな横向き予定表
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Web上で様々な作業を行えるようになったことで、UIに求められる多様性も増しています。特に面倒だと感じるのは時間関係ではないでしょうか。カレンダー、ウィークリー、デイリーなどいずれにおいても時間に合わせた表示、処理は大変です。 そこで様々なライブラリを知っておくことでいざとなった時に役立ちます。今回は横型のスケジュール選択ライブラリschedulerjsを紹介します。 schedulerjsの使い方 schedulerjsの初期表示です。 薄いブルーのエリアはドラッグしたり、端をドラッグして枠の幅を増減できます。 実際に操作しているところです。 実際の描画は予定を配列で渡すだけです。 var list = [ { 'name': 'Chewbacca', 'appointments
Dropify - ファイルアップロードを格好良く！ MOONGIFT
HTMLのデザインでいけてないのは入力系ではないでしょうか。特にファイルアップロードのフォームはダサいも良いところです。HTML5になってファイルをドラッグ&ドロップでアップロードできるようになったことでずいぶん良くなっています。 しかしデフォルトで格好良いわけではありません。自分でカスタマイズする必要があります。そこで使ってみたいのがDropifyです。 Dropifyの使い方 上が通常、下がDropifyを使った場合です。 デフォルトの画像を適用したり、ボックスの高さを指定することができます。 こちらは無効な場合。打ち消し線が良い感じです。 多言語対応もしています。 Dropifyを使えばファイルアップロードフォームが華麗に変身します。ドラッグ&ドロップはもちろん、プレビューも表示されます。その意味では画像に限定されるかと思いますが、積極的に使っていきたいライブラリです。 Dropif
FormFiller - フォーム入力しながらの開発作業がとてもスムーズに MOONGIFT
Webシステムのテストと言えば、入力してサーバに送ってデータをチェックして、また入力して…の繰り返しです。それこそうんざりするほど入力を繰り返すのではないでしょうか。 そこで使ってみたいのがFormFillerです。ブックマークレット型のソフトウェアで、入力を再現してくれる機能があります。 FormFillerの使い方 FormFillerはブックマークレットなので、ツールバーなどに登録後、まず何も入力していないフォームでクリックします。 そして再度フォームを表示した際にブックマークレットを実行すると入力内容が再現されます。 使用例。ブックマークレットを実行すると最後に入力した内容になります。 FormFillerは入力を監視し、最後の入力内容に復元してくれます。JavaScriptを修正しつつ、フォーム入力を行う…といったフロントエンド開発に大いに役立つことでしょう。 FormFille
Gentallela·多くのデザインパターンに対応したBootstrap製の管理画面テンプレート MOONGIFT
Bootstrapを使った管理画面テンプレートはたくさんあります。今回もその一つ、Gentallelaを紹介したいと思います。多くのテンプレートをもち、多数のチャートライブラリとも連携するようになっています。 スクリーンショット多めで紹介します。ぜひご覧ください。 Gentallelaの使い方 ダッシュボード。グラフが多数使われています。 別版。こちらは折れ線グラフです。 こちらは曲線。 フォーム。 さらに拡張版フォーム。 カレンダーやスライダー。 画像の切り抜きなんて機能も。 フォームバリデーション。 ウィザード。 画像アップロードフォーム。ドラッグ&ドロップ対応です。 フォームボタン。 基本的な要素。 ギャラリー。 タイポグラフィ。 アイコン。Font Awesomeです。 こちらはGlyphiconsです。 その他のウィジェット。 請求書。 メーラーっぽい形。 カレンダー。 テーブル
Mac用SSHアシスタント·JellyfiSSH MOONGIFT
Mac OSX付属のターミナルや、iTerm等は手軽に使えるが、SSH接続する際にはちょっと不便だった。時に接続先が保存できないので、専用アプリケーションを探していた所見つけたのがこれだ。 今回紹介するフリーウェアはJellyfiSSH、Mac OSX用SSHアシスタントソフトウェアだ。 アシスタント、と言うのはJellyfiSSHは専用ターミナルと言う訳ではなく、実際の接続は標準のターミナルやiTermを利用しているようだ。既に優秀なソフトウェアがあるのであればそれを利用すると言うのは正しい選択だと思う。 SSH接続する際の様々なオプションをGUIベースで設定できるのが便利だ。ログイン名やShell、種別（SSH/SSH2/Telnet/FTP等）。また、SSHトンネルの設定も可能だ。 ターミナルやiTermでも設定を保存しておけば同様のことはできるだろう。だが、それらをCUIで設定して
Primer - GitHub製。みんなで使えるデザインフレームワーク MOONGIFT
企業やプロジェクトによってデザインガイドラインは自ずと必要になってきます。それが社で働くデザイナーの共通認識になる訳ですが、例えばFacebookアプリを作る際にはボタンやデザインをFacebookっぽくしたくなるのではないでしょうか。つまりデザインガイドラインは社内だけでなく社外の人にとっても有益なのです。 そこで登場したのがPrimerです。PrimerはGitHubが作り、使っているデザインガイドラインになります。 Primerの使い方 スクリーンショットを多めで紹介します。まずはグリッド。 ヘッダー。h1〜6まで対応。 テキスト。若干小さめ？ インラインテキストの装飾。 ボタン。ここはGitHubっぽいですね。 ボタングループ。こういうのもGitHubで使われていますよね。 フォーム。シンプルです。 フォームグループ。縦に並べる時に使えます。 メニュー。アイコンはオプションです。
flexible.gs - レスポンシブ対応のグリッドレイアウトフレームワーク MOONGIFT
レスポンシブなWebサイトを作る際にBootstrapやZurb Foundationといったフレームワークを使うことはままあります。それはなぜかと言えば便利な機能と整ったデザインが提供されるからなのですが、逆にデザイン上の縛りが出てしまうのが難点です。 そこで使ってみたいのがflexible.gsです。レスポンシブWebデザインの中でも肝になるであろう、メディアクエリーとグリッドについてのみ提供するスタイルシートフレームワークです。 flexible.gsの使い方 flexible.gsのパターンは次のように分かれています。 xl（デスクトップ）、lg（横向きのタブレット）、md（縦向きのタブレット）、sm（横向きのスマートフォン）、xs（縦向きのスマートフォン）といった組み合わせでデザインを指定するようになっています。 グリッドのデモとしては次のようになりまうｓ。 スマートフォンの場合
Skeleton - レスポンシブサイトを構築するためのベースデザイン MOONGIFT
レスポンシブなWebサイトを作ろうと思った時、一からすべてを設計するのはとても大変です。とはいえ既存のフレームワークはUIウィジェットを含んでいたりして余計なしがらみが発生してしまう可能性もあります。 そこで使ってみたいのがSkeletonです。ごく基本的なレスポンシブ構造だけを提供するCSSフレームワークです。 Skeletonの使い方 こちらがデモページのトップです。 デザインのデモ。スマートフォンアプリのランディング風。 3つのグリッドを分けて表示。 画像のレスポンシブにも対応しています。 幅を狭めるとこうなります。 先ほどの3段カラムは縦に並びます。 画像も縦です。 グリッドはよくある12カラムで構成されています。 タイポグラフィ。 ボタン。 フォーム。 リスト。 コード。 テーブル。 Skeletonはごく基本的な機能、部品だけを提供します。このまま本サイトに適用するということは
whirl – CSSだけで実装されたローディング表示
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webアプリケーション化が進み、Ajaxを使ってデータを取得したりJavaScriptで画面を再描画するようになると、その処理途中にユーザに触って欲しくないことが増えます。特にフォーム送信の二重処理は厄介です。 そこでボタンを一時的に無効にしたり、処理中である旨を通知する必要が出てきます。そのためのライブラリがwhirlです。 whirlの使い方 whirlには様々なデザインが用意されています。 whirlの良いところは画像ではなくCSSだけでアニメーションを表現しているという点です。わざわざ画像をアップロードする必要もないのでwhirlだけで素早くローディングアニメーションが実現できます。 使い方としてもクラスを追加したり、表示するだけで使えますので手軽です。 <div clas
Tumblr周辺の便利ツール一挙紹介 MOONGIFT
今回はTumblrに関するツールをまとめて紹介します。Yahooに買収されて若干勢いが失われたか、といった感もあります。しかしそれでもデザイン性もあって関連ソフトウェアが次々と登場しています。そこでMOONGIFTでのTumblrの使い方と、関連ソフトウェアを紹介します。 MOONGIFTではコーポレートサイトがTumblrで構築しています。Flatteryというテーマを購入して使っています。テーマのマーケットプレイスがあり、経済圏があるのはデザイナーの方にとって魅力ではないでしょうか。 カスタムドメインが無料で使えるのも魅力と言えます。MOONGIFTではコーポレートサイト以外でも幾つかブログがTumblr上に構築しています。例えばDevRel.jpもその一つです。ちょっとしたWebサイトを素早く構築するのにとても良いです。 他、海外ではメディアサイト自体をTumblr上に構築しているケ
Library Detector - あのサイトはどのJavaScriptライブラリを使っているか MOONGIFT
Webシステムを開発していると他のサイトがどういった仕組みで動いているか気になったりしますよね。HTMLソースやURLからどんなプログラミング言語で、どんなフレームワークか知ったりするのは面白いです。 サーバサイドは実際のところは分からないのですが、フロントエンドは分かります。ということで入れてみたいのがLibrary Detectorです。 Library Detectorの使い方 Library DetectorはGoogle Chrome機能拡張としてリリースされています。 インストール後、任意のWebサイトを見ると使われているライブラリがチェックできるようになります。 Yahoo! JapanはYUI 2を使っているようです。 Yahoo! ニュースはjQueryです。 jQueryはさすがにjQueryを使っていますが、さらにModernizrも使っています。 Backbone.
Fluidbox – 画面いっぱいに広がるLightbox系ライブラリ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました クリックして写真を拡大表示するライブラリとしてはLightboxが知られていますが、いつも同じライブラリを使っていると次第に見飽きてしまうものです。そこでライブラリを変えてみることでユーザの目を新たに引くという施策はいかがでしょうか。 FluidboxはjQueryプラグインとして提供されるLeightbox系ライブラリです。 Fluidboxの使い方 使い方はjQueryプラグインだけにとてもシンプルで、fluidboxメソッドを実行するだけです。aタグでリンクされている画像を拡大版として扱います。 [  ](...) <script><br />$(function () {<br /> $('.gallery a, a[rel="lightbox"]').fl
Famo.us·WebGL/Canvasを使って高度な表現を可能にするJavaScriptフレームワーク MOONGIFT
スマートフォンにおいてWebかネイティブかと言った議論は常にされています。ネイティブアプリは高度なUI/UXを提供する一方、インストールの手間が否めません。Webは速度やUXにおいて見劣りがします。 しかしWeb（HTML5）の進化は止まりません。ついにここまで！というフレームワークがFamo.usです。3Dを備えたレンダーを行うJavaScriptフレームワークになります。 Famo.usの使い方 たくさんのデモが登録されていますので見ていきましょう。 写真と画像の組み合わせ。左右から表示されるアニメーションもあります。 スクロールパララックスエフェクトのデモ。 アニメーションのデモ。 カレンダーの日付を選択するとスケジュールが開きます。アニメーションがスムーズです。 スライドして表示される写真のデモです。 ページ送りのデモ。 天気アプリデモ。ベクター調の表示がいいですね。 タスク管理。
multiscroll.js - パララックスとはまた違うスクロールエフェクト MOONGIFT
パララックスエフェクトに代表されるようにスクロールで新しい視覚効果を生み出す試みがされています。単純な上下のスクロールでは得られない大きなインパクトを訪問者に与えることができます。 その新しい手法として紹介したいのがmultiscroll.jsです。スクロールによって起こる新しいエフェクトを楽しんでください。 multiscroll.jsの使い方 何はともあれ動画を見るのが一番分かりやすいかと思います。 いかがでしょう。スクロールすると上下から画像がスクロールしてきて合体します。パララックスとはまた違うインパクトがありますよね。 最初の表示はこんな感じ。 スクロールするとコンテンツが上下から表示されてきます。 視覚効果は慣れてしまうと思ったインパクトを与えづらくなります。パララックスイフェクトも最近では印象が残りづらくなっているかも知れません。そこで新しい視覚効果を考えてみるのは面白いと思
AdminLTE·ここまで多ければ何でもできそう。多機能なBootstrapベースの管理画面テンプレート MOONGIFT
これで十分でしょ！ Bootstrapで作る管理画面は相当増えてきているようです。確かに一般ユーザ向けに提供するとBootstrap臭が出てしまいますが、管理画面であれば問題はないですよね。 ということで今回は新しいBootstrap製の管理画面テンプレートAdminLTEを紹介します。高度なウィジェットが数多く提供されていますので使い勝手良さそうですよ。 AdminLTEの画面 今回もスクリーンショット多めで紹介します。 ダッシュボード。この時点でかなりリッチ。 ボックス。これだけ多彩なパターンがあると言うのも凄いですね。 左端にはちょっとした設定を表示させています。 背景色を変えるだけでも随分印象が違います。 グラフ。 こちらもグラフ。 外部ライブラリもそつなく使いこなしています。 スパークラインも！ アラート。ちょっと飛び出しているのがいい感じです。 アイコン。 ボタン。フラット系で
MOONGIFT: » 地図でブログする「WordPress Geo Mashup」:オープンソースを毎日紹介
※下の画像は公式サイトより 人は生きている限り、どこかへ行くものだ。それは会社かも知れないし、近くの公園かも知れない。だが、どこかに行って、そこで何かを体験して、それをブログに書き記す人も多いだろう。 今日はどこどこへ行った、といったようなブログを書いている方にお勧めなのがこのプラグインだ。 今回紹介するオープンソース・ソフトウェアはWordPress Geo Mashup、地図とブログシステムをMashupさせるソフトウェアだ。 WordPress Geo Mashupは名称の通り、海外で人気の高いブログシステムであるWordPress向けのプラグインソフトウェアだ。ごく単純に言うと、地図用のページを用意し、各記事をアップする際に表示するポイントを指定するだけだ。すると記事にポイントが表示され、それをクリックすると該当記事に飛ぶようになる。 カテゴリによってポイントの色が変えられるので、
GUIで管理できるSubversion·VisualSVN Server MOONGIFT
開発に際してSubversionを利用しているという方も多いだろう。一度立ててしまえばごく簡単に運用でき、それでいていざというときに役立つソフトウェアだ。さらにクライアントはGUIのフロントエンドも多数存在するのが良い。 ではサーバはどうだろうか。CUIでインストール、管理するのが当たり前になっている。だがWindowsであればGUIの方が便利そうだ。 今回紹介するフリーウェアはVisualSVN Server、SubversionのGUI管理ソフトウェアだ。 VisualSVN Serverの便利な点は、HTTPSのHTTPサーバと、Subversionがインストーラーで手軽に利用できるようになる点だ。また、その管理はWindows標準のコンピュータの管理で行える。 ユーザの作成はもちろん、グループの作成もできる。リポジトリの作成もGUIベースで完結するのでごく簡単だ。ファイル単位にアク
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
