MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました HTTPサーバとしてnginxを使っているケースは多いかと思います。しかし設定に関する情報はまだまだ多くはなく、動くように設定はしても、それがベストなのかどうか判断できない方も多いのではないでしょうか。 そんな方にお勧めなのがGixyです。nginxの設定ファイルを解析して改善案を提示してくれます。 Gixyの使い方 Gixyのインストールは pip でできます。 pip install gixy 後はnginxの設定ファイルを指定するだけです。 $ gixy /path/to/nginx.conf ==================== Results =================== Problem: [host_spoofing] The proxied Host h

今ではスタイルシートをゼロから組むことは減ってきているかも知れません。レスポンシブな対応であったり、全体的な見た目の統一感を考えるとフレームワークをベースにした方が楽だからです。とはいえ、大型なフレームワークを使うと束縛が強くなります。 BootstrapやFoundationが有名ですが、今回はそれらに対抗していこうとしているKickstartを紹介します。軽量なスタイルシートフレームワークです。 Kickstartの使い方 スクリーンショット多めで紹介します。アラート表示。 ボタン。 コンテナ。 フォーム。 ラベル。 モーダル。 ナビゲーション。 通知（右上）。 テーブル。 タブ。 ツールチップ。 タイポグラフィ。 プロフィール表示のデモ。 Kickstartはスタイルシートのサイズが80KBで、Bootstrap（117KB）/Foundation（148KB）よりも軽量です。また、

システム開発を行っているときにダミーのデータが欲しくなることは多々あります。そんな時に本番データをコピーして使うのは大きな問題につながる可能性があるので決してしてはいけません。電話番号やメールアドレスなどを置き換える作業が逆に手間になる場合もあります。 そこで使ってみたいのがダミーデータのジェネレータです。今回はPython製のfake2dbを紹介します。 fake2dbの使い方 fake2dbはSQLite、PostgreSQL、MySQLそしてMongoDBに対応しています。インストールはpipでできます。 pip install fake2db インストールしたらfake2dbコマンドでデータベースに直接データを流し込めます。 fake2db --rows 200 --db sqlite # SQLiteの場合 fake2db --rows 1500 --db postgresql

レスポンシブなWebサイトを作ろうと思った時、一からすべてを設計するのはとても大変です。とはいえ既存のフレームワークはUIウィジェットを含んでいたりして余計なしがらみが発生してしまう可能性もあります。 そこで使ってみたいのがSkeletonです。ごく基本的なレスポンシブ構造だけを提供するCSSフレームワークです。 Skeletonの使い方 こちらがデモページのトップです。 デザインのデモ。スマートフォンアプリのランディング風。 3つのグリッドを分けて表示。 画像のレスポンシブにも対応しています。 幅を狭めるとこうなります。 先ほどの3段カラムは縦に並びます。 画像も縦です。 グリッドはよくある12カラムで構成されています。 タイポグラフィ。 ボタン。 フォーム。 リスト。 コード。 テーブル。 Skeletonはごく基本的な機能、部品だけを提供します。このまま本サイトに適用するということは

最近はフラットUIの流行もあって説明をなるべく少なめに、アイコンでどういった機能かを表すことが増えてきています。しかしアイコンが分かりづらかったり抽象化され過ぎていると一見して機能が分かりづらくなります。そこでマウスオーバーによる説明表示がおすすめです。 スマートフォンやタブレットでは使えませんが、デスクトップであればマウスオーバーを上手に使えばユーザビリティが高まるでしょう。そのためのライブラリとしてiHoverを紹介します。 iHoverの使い方 iHoverはとにかくパターンが多いのが特徴です。まずは動画をご覧ください。 マウスを載せると上下左右から説明文が飛んできたり、元々の画像が回転したりします。 元々。マウスを載せると… 説明が表示されました。 こんな感じにサムネイルになったり。 上下左右に変更できます。 iHoverはピュアなCSSで作られていますのでJavaScriptが使

これは素敵すぎる！ アイコン画像の作成は大変です。小さな画像ながら、それを見て内容が理解できないとアイコンとしての意味がありません。最近ではIconfinderのようなサイトもできていますが、色味やサイズがほんの少し合わないと言ったことも多いはずです。 そこで使ってみて欲しいのがIconionです。アイコンのピックアップと設定変更だけで簡単に素敵なアイコン集ができてしまいますよ！ Iconionの使い方 Windows版とMac OSX版がありますのでお好きな方をダウンロードし、起動しましょう。 メイン画面です。これだけでほぼ使い方が分かってしまいますよね。左側にアイコンが並んでいますので好きなものを選択しましょう。 アイコンを選択すると中央のプレビューが変わります。さらにその下にアイコンが登録されます。 色や角丸のサイズなどを自由に変更できます。 さらにスタイルを変更するとまとめて設定が

HTML iOS NotificationsはHTML/JavaScritp製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 iOSやAndroidなどのモバイルでは通知機能が便利に使われています。それはアプリに限らず便利に使えるはずです。そこで使ってみたいのがHTML iOS Notificationsです。 デスクトップ版。画面上部に通知が表示されています。しばらく経つと消えます。 複数出すこともできます。 レスポンシブに対応しています。 iPhoneで出す場合は画面幅いっぱいに広がるようです。 Webなので画像やメッセージ、クリックした時のアクションなどは自由に操作できます。スマートフォンに最適化されたWebサイトで使うとまるで本物のネイティブ風になるのではないでしょうか。 MOONGIFTはこう見る HTML iOS Notification